@charset "utf-8";

@font-face {
    font-family: 'RixYeoljeongdo_Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/RixYeoljeongdo_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* mVisual */
#mVisual{overflow: hidden;}
#mVisual .mv{height: 780px; position: relative; width: 100%;}
#mVisual .mv .ss-inner{height: 100%; display: flex; flex-direction: column; justify-content: center; margin: 0 auto;}
#mVisual .mv .txt{position: relative; z-index: 2;}
#mVisual .mv .txt h3{font-family: 'GmarketSans',sans-serif; font-size: 5.3rem; color: #2d353f; line-height: 1.2em;}
#mVisual .mv .txt h3 span{font-family: 'yg-jalnan', sans-serif; font-size: 5.8rem; display: inline-block; position: relative;}
#mVisual .mv .txt h3 span:before{content: ''; display: block; position: absolute; z-index: -9; width: 100%; height: 23px; background-color: #ccdff6; bottom: 4px;}
#mVisual .mv .txt p{font-weight: 300; color: #222; font-size: 3rem; margin: 30px 0 70px;}
#mVisual .mv .txt .btn_box{display: flex;}
#mVisual .mv .txt .btn_box a{font-size: 2rem; font-family: 'GmarketSans', sans-serif; font-weight: 700; text-align: center; width: 218px; display: block; line-height: 1em; padding: 20px 0; border-radius: 30px; border-top-right-radius: 0;}
#mVisual .mv .txt .btn_box a.btn1{ background-color: #4488dd;  color: #fff;}
#mVisual .mv .txt .btn_box a.btn2{color: #4488dd; border: 2px solid #4488dd; margin-left: 22px;}
#mVisual .mv .img{position: absolute; right: -200px; top: 50%; transform: translateY(-50%); z-index: 1;}
#mVisual .mv .img img{width: 100%;}

@media all and (max-width:999px){
    #mVisual .mv{height: 90vh; text-align: center;}
    #mVisual .mv .txt h3{font-size: 3.6rem;}
    #mVisual .mv .txt h3 span{font-size: 4rem;}
    #mVisual .mv .txt p{font-size: 2rem; margin: 3% 0 7%;}
    #mVisual .mv .img img{opacity: .4;}
    #mVisual .mv .txt .btn_box{justify-content: center;}
    #mVisual .mv .txt .btn_box a{font-size: 1.6rem; font-family: 'GmarketSans', sans-serif; font-weight: 500; text-align: center; width: 160px; display: block; line-height: 1em; padding: 16px 0; border-radius: 30px; border-top-right-radius: 0;}
    #mVisual .mv .txt .btn_box a.btn2{margin-left: 10px;}
}

@media all and (max-width:640px){
    #mVisual .mv .txt h3{font-size: 3.2rem;}
    #mVisual .mv .txt h3 span{font-size: 4rem;}
    #mVisual .mv .txt h3 span:before{height: 18px;}
    #mVisual .mv .txt p{font-size: 1.8rem;}
}


/* sec1 */
section.sec1{}
section.sec1 ul{display: flex;}
section.sec1 ul li{background-repeat: no-repeat; background-size: cover; background-position: center center; width: 50%; display: inline-flex;}
section.sec1 ul li:nth-child(1){background-image: url(/images/main/sec1_bg1.png);}
section.sec1 ul li:nth-child(1){justify-content: flex-end;}
section.sec1 ul li:nth-child(2){background-image: url(/images/main/sec1_bg2.png);}
section.sec1 ul li .cont{text-align: center;padding: 64px 0; display: inline-block; width: 100%; max-width: 620px;}
section.sec1 ul li .cont .img{}
section.sec1 ul li .cont .img img{max-width: 100%;}
section.sec1 ul li .cont h3{font-family: 'GmarketSans', sans-serif; font-size: 3.4rem; color: #fff; margin: 20px 0 10px;}
section.sec1 ul li .cont p{font-size: 1.8rem; color: #fff;}

@media all and (max-width:999px){
    section.sec1 ul{flex-direction: column;}
    section.sec1 ul li{width: 100%;}
    section.sec1 ul li .cont .img img{max-width: 20vw;}
    section.sec1 ul li .cont{max-width: 100%; padding: 10% 0;}
    section.sec1 ul li .cont h3{font-size: 2.8rem;}
    section.sec1 ul li .cont p{font-size: 1.6rem;}
}


/* sec2 */
section.sec2{}
section.sec2 .box{display: flex; justify-content: space-between; align-items: center; padding: 120px 0; margin: 0 auto; background-color: #fff;}
section.sec2 .box .sss-inner{display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
section.sec2 .box.bg{background-color: #f3f3f3;}
section.sec2 .box .img{max-width: 80%;}
section.sec2 .box .img img{max-width: 100%;}

.cont_box{width: 100%; max-width: 564px;}
.cont_box.center{max-width: 100%;}
.cont_box h4{font-family: 'yg-jalnan', sans-serif; font-size: 1.5rem; color: #4488dd; font-weight: 400;}
.cont_box h3{font-family: 'GmarketSans', sans-serif; font-size: 4rem; color: #222; margin: 0px 0 20px; line-height: 1.2em; word-break: keep-all;}
.cont_box h3 span{font-size: 2.4rem; font-weight: 500;}
.cont_box p{font-size: 1.8rem; color: #555555; line-height: 1.7em; word-break: keep-all;}
.cont_box p.line{padding-top: 10px; border-top: 1px dashed #ddd; font-size: 1.7rem; line-height: 1.8em; font-weight: 300; color: #666;}
.cont_box p b{font-size: 2rem; color: #4488dd; font-weight: 500;}
.cont_box .btn_box{margin-top: 4rem;}
.cont_box .btn_box a{margin-right: 10px;}
.cont_box > a{font-size: 1.6rem; font-family: 'GmarketSans', sans-serif; font-weight: 500; text-align: center; width: 190px; display: block; line-height: 1em; padding: 16px 0; border-radius: 30px; border-top-right-radius: 0; background-color: #4488dd;  color: #fff; margin-top: 70px;}
.cont_box ul{}
.cont_box ul li{font-size: 1.8rem; color: #555; position: relative; padding-left: 1rem; margin-bottom: 5px;}
.cont_box ul li::before{content: ''; position: absolute; display: inline-block; left: 0; top: 50%; transform: translateY(-50%); background: url(/images/main/cont_box_dot.png) no-repeat center; width: 5px; height: 5px;}

@media all and (max-width:999px){
    section.sec2 .box .sss-inner {flex-direction: column; padding: 0rem 0 0rem;}
    .cont_box{max-width: 100%;}
    section.sec2 .sss-inner .img{max-width: 100%; margin-top: 5rem; order: 2;}
    section.sec2 .sss-inner .img img{max-width: 80vw;}
    
    .cont_box h3{font-size: 3.6rem; margin: 5% 0 2%;}
    .cont_box p{font-size: 1.8rem;}
    .cont_box p br{display: none;}
    .cont_box p.line br{display: block;}
    .cont_box p br.mo{display: block;}
    .cont_box a{margin-top: 7%; width: 160px;}
    
    .cont_box ul li{font-size: 1.6rem;}
}
@media all and (max-width:640px){
    .cont_box h3 span{font-size: 2rem;}
    .cont_box h3{font-size: 3rem;}
}

/* sec3 */
section.sec3{background-color: #f5f9fd;}
section.sec3 .sss-inner{display: flex; justify-content: space-between; align-items: center; padding: 120px 0;}
section.sec3 .sss-inner .img{max-width: 60%; margin-right: 60px;}
section.sec3 .sss-inner .img img{max-width: 100%;}

@media all and (max-width:999px){
    section.sec3 .sss-inner{flex-direction: column; padding: 10rem 0;}
    .cont_box{max-width: 100%;}
    section.sec3 .sss-inner .img{max-width: 100%; margin-top: 5rem; order: 2; margin-right: 0;}
    section.sec3 .sss-inner .img img{max-width: 80vw;}
}

/* sec4 */
section.sec4{padding: 100px 0; position: relative; overflow: hidden;}
section.sec4::before{content: ''; width: 259px; height: 254px; display: block; position: absolute; top: 50%; left: -34px; transform: translateY(-50%); background: url(/images/main/sec4_bg1.png) no-repeat center center; z-index:1;}
section.sec4::after{content: ''; width: 250px; height: 258px; display: block; position: absolute; top: 50%; right: -29px; transform: translateY(-50%); background: url(/images/main/sec4_bg2.png) no-repeat center center; z-index:1;}
section.sec4 .sss-inner{z-index: 2;}
section.sec4 .sss-inner ul{display: flex; justify-content: center;}
section.sec4 .sss-inner ul li{text-align: center; width: 100%; max-width: 350px;}
section.sec4 .sss-inner ul li:nth-child(2){border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;}
section.sec4 .sss-inner ul li .count{font-size: 4.8rem; font-weight: 700; font-family: 'GmarketSans', sans-serif; color: #4488dd;}
section.sec4 .sss-inner ul li p{font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: 2.6rem; color: #222;}

@media all and (max-width:999px){
    section.sec4::before{transform: translateY(0); bottom: -20px; top: auto; opacity:0.4;}
    section.sec4::after{transform: translateY(0); top: -20px; opacity:0.4;}
    section.sec4 .sss-inner ul li .count{font-size: 3.6rem;}
    section.sec4 .sss-inner ul li p{font-size: 2.4rem;}
}
@media all and (max-width:640px){
    section.sec4 .sss-inner ul{flex-direction: column; align-items: center;}
    section.sec4 .sss-inner ul li:nth-child(2){border-right: 0; border-left: 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; margin: 3rem 0; padding: 3rem 0;}
}

.sec_tit{ position: relative; padding-top: 140px; padding-bottom: 120px; background-color: #f8f8f8;}
.big_tit{font-family: 'Noto Sans KR', sans-serif; text-align: center; font-weight: 600; font-size: 4.2rem; letter-spacing: -0.03em; color: #333; word-break: keep-all}

.big_tit b{color: #000;}
.big_tit span{color: #4488dd;}
.big_tit img{max-width: 220px; display: inline-block; top: 14px; width: 25vw; position: relative;}

ul.spec{display: flex; justify-content: center; margin-top: 10rem;}
ul.spec li{margin: 0 1%; width: 23%;text-align: center;}
ul.spec li .img{margin-bottom: 12px;}
/*ul.spec li::before{content: ''; display: block; width: 60px; height: 3px; background-color: #4488dd; margin-bottom:1.5rem; margin-left:  auto; margin-right: auto;}*/
ul.spec li p{margin-bottom: .75rem; font-size: 1.7rem; color: #333;}
ul.spec li h3{color: #000; font-size: 2.4rem;}
ul.spec li p::before{content: ''; display: block; width: 60px; height: 3px; background-color: #4488dd; margin-bottom:1.5rem; margin-left:  auto; margin-right: auto;}


@media all and (max-width:999px){
    .sec_tit .main_logo img{max-width: 200px;}
    .big_tit{font-size: 3.2rem;}
    ul.spec{flex-wrap: wrap}
    ul.spec li{width: 48%; margin-bottom: 4rem}
    .big_tit img{top: 10px; width: 22vw; max-width: 164px;}
}
@media all and (max-width:640px){
    .big_tit.border{padding: 6rem 0;}
    .sec_tit{padding-bottom: 10rem;}
    .sec_tit .main_logo img{max-width: 172px;}
    .big_tit{font-size: 2.5rem;}
    .big_tit img{top: 9px; width: 28vw; max-width: 112px;}
    ul.spec{display: none;}
}