@charset "utf-8";


/* layout */
#wrap{font-family: 'NotoSans'; background:url('/images/intro/m_bg.png') no-repeat center top; background-size:cover; overflow:hidden;}
#header{ width:95%; max-width:70rem; margin:0 auto; padding:0.5rem 0 0.5rem;}

/* contents */
#container{ width:96%; max-width:70rem; margin:0 auto; padding-bottom:5rem; /*font-family: 'GmarketSans';*/}
#container:after{display:block; clear: both; content:"";}
#container h2{font-size:2.5rem; line-height:1.2; font-weight: normal; padding:1rem 0 4rem; letter-spacing: -1px; color:#0c407f; word-break:keep-all;}
#container h2 em{color:#266ed4;}
#container h2 strong{ display:block; font-weight: 700; font-size:3rem; color:#0c407f;}

.conBox{position:relative; word-break: keep-all;}
.conBox:before{content:""; position: absolute; right:0; top:-12.4rem; width:100%; height:14.55rem; background:url('/images/intro/bg_cont.png') no-repeat right top; z-index:1; background-size:contain; transition: all .3s; -webkit-transition: all .3s;}

/* 바로가기01 */
.m_link01{ position:relative; padding-left:11.5rem; margin-left:2.5rem; background:#fff; text-align:center; border-radius:2rem; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.1);}
.m_link01 .titBox{position: absolute; left:-2.5rem; top:-2.5rem; width:14rem; height:12.5rem; padding:1.75rem 0; border-radius:2rem; color:#fff; background:#e33d65;}
.m_link01 .titBox h3{font-weight: normal; font-size:1.3rem; line-height:1.2; margin-top:1rem;}
.m_link01 .titBox h3 strong{display:block; font-weight: 700; color:#fff799;}
.m_link01 ul{overflow:hidden;}
.m_link01 li{width:25%; float:left; padding:1.5rem 0; line-height:1.3; color:#111; font-size:0.9rem;}
.m_link01 li + li{border-left:3px dotted #ddd;}
.m_link01 li div {position:relative; display:block;}
.m_link01 li p{width:7.5rem; height:7.5rem; border-radius:50%; line-height:7.5rem; border:5px solid #fff; margin:0 auto 1rem;}
/*.m_link01 li a:hover{text-decoration: underline; color:#e33d65;}
.m_link01 li a:hover p{border-color:#e33d65;}*/
.m_link01 p, .m_link01 a{ transition: all .3s; -webkit-transition: all .3s;}

/* 바로가기02 */
.m_link02{ position:relative; margin:2rem auto 0; text-align:center; }
.m_link02 li{width:18.4%; height:13rem; display:table; float:left;}
.m_link02 li + li{margin-left:2%;}
.m_link02 li a{position:relative; display:table-cell; vertical-align: middle; background:#3c7dd8 url('/images/intro/ptrn_slide.png'); border-radius:2rem; color:#fff; font-size:1rem;}
.m_link02 li a:before{content:"\e90b"; position: absolute; left:50%; bottom:-1.5rem; width:3rem; height:3rem; line-height:3rem; margin-left:-1.5rem; border-radius:50%; background:#e33d65; font-size:1.5rem; color:#fff; font-family: 'xeicon';}
.m_link02 li a p{margin-top:1rem; line-height:1.3;}
.m_link02 li a:hover{background-color:#0c407f; box-shadow:2px 2px 2px 2px rgba(0,0,0,0.3); color:#fff799; }
.m_link02 li a:hover:before{box-shadow:2px 2px 2px 2px rgba(0,0,0,0.3);}
.m_link02 li a:hover img{transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}
.m_link02 li a:hover p{text-decoration:underline;}
.m_link02 :before, .m_link02 img, .m_link02 a{ transition: all .3s; -webkit-transition: all .3s;}


@media screen and (max-width: 1280px){

    /* contents */    
    .conBox:before{top:-8.6rem; height:10rem;}

    /* 바로가기01 */
    .m_link01{ padding-left:9rem;}
    .m_link01 .titBox{width:12rem; height:11rem;}
    .m_link01 .titBox h3{font-size:1.1rem;}
    .m_link01 li{padding-top:2.5rem;}
}


@media screen and (max-width: 1024px){

    /* contents */    
    #container h2{padding-bottom:6rem;}
    .conBox:before{top:-6rem; height:7rem; background-position:right bottom;}

    /* 바로가기01 */
    .m_link01{ padding-left:0; margin-left:0; border-radius:0 2rem 2rem 2rem;}
    .m_link01 .titBox{width:auto; height:auto; display:inline-block; padding:0.5rem 2rem; left:0; }
    .m_link01 .titBox img{vertical-align: middle; width:auto; height:3rem;}
    .m_link01 .titBox h3{font-size:1.1rem; display:inline-block;}
    .m_link01 .titBox h3 strong{display:inline-block;}

    /* 바로가기02 */
    .m_link02 li{height:11rem;}
    .m_link02 li a img{width:3.5rem; height:auto;}
    
}

@media screen and (max-width: 860px){

    #header{text-align:center;}

    #container{ padding-bottom:2rem; }
    #container h2{text-align:center; padding-bottom:4rem; font-size:2rem;}
    #container h2 strong{font-size:2.5rem;}
    .conBox:before{display:none;}

    /* 바로가기01 */
    .m_link01 {border-radius:2rem;}
    .m_link01 .titBox{position:relative; left:auto; top:auto; max-width:90%; margin-top:-2rem;}
    .m_link01 ul{position:relative; }
    .m_link01 ul:before{content:""; position: absolute; left:0; top:50%; width:100%; height:1px; border:1px dotted #ddd;}
    .m_link01 li{width:50%; height:10rem; padding:0.5rem 0;}
    .m_link01 li:nth-child(3){border-left:0;}
    .m_link01 li p{width:6rem; height:6rem; line-height:6rem; margin:0 auto 0.5rem;}
    .m_link01 li p img{width:4.5rem; height:4.5rem;}

    /* 바로가기02 */
    .m_link02 li{width:31.33%; margin:0 1% 2.5rem;}
    .m_link02 li + li{margin:0 1% 2.5rem;}
    
}

@media screen and (max-width: 540px){

    #container h2{font-size:1.5rem;}
    #container h2 strong{font-size:2rem;}

    /* 바로가기02 */
    .m_link02 li{width:48%; height:10rem; margin-bottom:2rem;}
    .m_link02 li + li{margin-bottom:2rem;}
    .m_link02 li a{font-size:0.85rem;}
    .m_link02 li a:before{width:2.4rem; height:2.4rem; line-height:2.4rem; bottom:-1.2rem; margin-left:-1.2rem;}
    
}


@media screen and (max-width: 480px){

    #container h2{font-size:1.4rem;}
    #container h2 strong{font-size:1.8rem;}
    
    /* layout */
    #header img{ height:2rem; width:auto;}

    /* 바로가기01 */
    .m_link01 ul{padding:1rem 0;}
    .m_link01 ul:before{display:none;}
    .m_link01 li{width:100%; height:5rem; padding:0.5rem 0; display:table; border:0;}
    .m_link01 li + li{border-top:2px dashed #ddd; border-left:0 !important;} 
    .m_link01 li div{padding-left:6rem; padding-right:0.5rem; display:table-cell; vertical-align: middle; text-align:left;}
    .m_link01 li p{position: absolute; left:0; top:0; line-height:1; border:0; text-align:center;}
    .m_link01 li p img{width:4rem; height:auto;}
    .m_link01 li br{display:none; }

    /* 바로가기02 */    
    .m_link02 li{width:calc(100% - 1rem); height:4.5rem; margin-right:1rem; margin-bottom:0.5rem; text-align:left;}
    .m_link02 li + li{margin-bottom:0.5rem;}
    .m_link02 li a{padding:0 1rem;}
    .m_link02 li a:before{right:-1rem; left:auto; margin:0; bottom:auto; top:1rem; text-align:center;}
    .m_link02 li a img{width:2.5rem; height:auto;}
    .m_link02 li a p{width:calc(100% - 5rem); padding-left:0.5rem; margin:0; display:inline-block; vertical-align: middle;}
    .m_link02 li a p br{display:none;}
    
}