@charset "utf-8";
@import url("reset.css");
@import url("sub.css");
/* main.css */
*{font-family: 'NanumSquare', sans-serif !important;}

/* react */
.pcB{display: block;}
.mbB{display: none;}
.pcI{display: inline;}
.mbI{display: none;}
.pcIB{display: inline-block;}
.mbIB{display: none;}


/* header */
.headWrap{width:12800px;margin:0 auto;position: fixed;z-index:100;left:0;right:0;top:0}
.headIn{box-sizing: border-box;border-bottom:2px solid #a5b0bd}
h1 a{float:left;width:400px;height:45px;padding:17px 0;background:url(../img/logo.png)no-repeat center;position: relative}
h1 a span{display:none}
.gnb{float:right;position: relative}
.gnb li{float:left;padding:20px 25px;box-sizing: border-box;position: relative;cursor: pointer;}
.gnb li:before{content:"";display: block;position:absolute;left: 0;top: 30px;width: 2px;height: 25px;background: #fff}
.gnb li:first-of-type:before{display:none}
.gnb li, .gnb a{display:block;color:#fff;font-size:20px;font-weight:600;}
.gnb li span, .gnb a span{display:block;font-size:14px;color:#a5b0bd}
.gnb li:hover, .gnb li:hover span, .gnb a:hover, .gnb a:hover span{color:#012b5d}


.headIn.on{border-bottom:none}
.headIn.on:before {content: "";display: block;width: 200%;height: 80px;background: rgba(255,255,255,1);position: absolute;top: 0;box-sizing: border-box;left: -50%;box-shadow: rgba(0,0,0,0.16)3px 3px 10px;transition:  all 0.4s;}
.fp-viewing-firstPage .headIn.on:before{background: rgba(255,255,255,0);box-shadow:none;border-bottom: 1px solid rgba(255,255,255,0.6);}
.fp-viewing-firstPage .headIn.on h1 a {background: url(../img/logo.png)no-repeat center}
.fp-viewing-firstPage .headIn.on h1 a {background: url(../img/logo.png)no-repeat center}
.fp-viewing-firstPage .headIn.on .gnb li, .fp-viewing-firstPage .headIn.on .gnb a{color:#fff}
.fp-viewing-firstPage .headIn.on .gnb li span, .fp-viewing-firstPage .headIn.on .gnb a span{color:rgba(255,255,255,0.6)}
.fp-viewing-firstPage .headIn.on .gnb li:before{background: #fff}
.headIn.on.act:before{background:#fff}

.headIn.on.act h1 a {
    background: url(../img/logo.png)no-repeat center
}
.headIn.on.act .gnb li:before{background: #000}
.headIn.on.act .gnb li, .headIn.on.act .gnb a{color:#000}
.headIn.on.act .gnb li span, .headIn.on.act .gnb a span{color:rgba(0,0,0,0.6)}
.headIn.on.act .gnb li:hover, .headIn.on.act .gnb li:hover span, .headIn.on.act .gnb a:hover, .headIn.on.act .gnb a:hover span{color:#012b5d}

.headIn.on h1 a {
    background: url(../img/logo.png)no-repeat center
}
.headIn.on .gnb li:before{background: #000}
.headIn.on .gnb li, .headIn.on .gnb a{color:#000}
.headIn.on .gnb li span, .headIn.on .gnb a span{color:rgba(0,0,0,0.6)}
.headIn.on .gnb li:hover, .headIn.on .gnb li:hover span, .headIn.on .gnb a:hover, .headIn.on .gnb a:hover span{color:#012b5d}

.headIn.on .gnb li.on:after{content: "";display: block;width: 8px;height: 8px;border-radius: 50%;background: #012b5d;position: absolute;right:25px;top:25px} 
.headIn.on .gnb li:last-of-type.on:after{right:0}
.headIn.on .gnb li.on a{color:#012b5d;position: relative}
.headIn.on .gnb li.on a span{color:rgba(1,43,93,0.6)}

.gnbIn{position: relative;top:0}
.gnbIn dl{display:none;position: absolute;width:100%;transition:all 0s linear 0.4s }
.gnbIn dl.on{display: block}
.gnbIn dl:before{content: "";display: block;width:200%;height:100%;background: #fff;position: absolute;z-index:100;left:-50%;border:1px solid #717985}
.gnbIn dl a{color:#000}
.gnbIn dl dt, .gnbIn dl dd{position: relative;z-index: 101;float: left;}
.gnbIn dl dt{z-index:102;width:40%;padding-top:65px;color:#fff;font-size:30px;font-weight: 600}

.gnbIn dl dt span{display: block; font-size: 20px;margin-top:70px;position: relative;color:#fff;font-weight:400;line-height: 28px}
.gnbIn dl dt span:before{content:"";display: block;width:50px;height:8px;background: #fff;position: absolute;top:-35px;left:0}
.gnbIn dl:nth-of-type(2) dt, .gnbIn dl:nth-of-type(3) dt{padding-top:47px}
.gnbIn dl:nth-of-type(2) dd:before{background-image: url(http://shareway.co.kr/dysemu/css/../img/gnb_bg2.png);background-repeat: no-repeat;background-position: right 35px bottom 26px;background-size: 5%;}
.gnbIn dl:nth-of-type(3) dd:before{background-image: url(http://shareway.co.kr/dysemu/css/../img/gnb_bg3.png);background-repeat: no-repeat;background-position: right 35px bottom 26px;background-size: 5%;}
.gnbIn dl dt span.none{display:none}
.gnbIn dl dt span.none.on{display:block}


.gnbIn dl dd{width:60%}
.gnbIn dl dd:before{content: "";display: block;width:200%;height:calc(100% + 2px);background-color: #012b5d;position: absolute;left: -200%;top:0;z-index: 1; background-position: right 65px bottom 65px;background-size: 10%}



.gnbIn dl dd > ul > li a, .gnbIn dl dd > ul > li span{display: block; font-size:20px;color:#000;border-bottom:1px solid #717985;padding:20px 0 20px 45px;cursor:pointer}
.gnbIn dl dd > ul > li:last-of-type a, .gnbIn dl dd > ul > li:last-of-type span, .gnbIn dl dd > ul > li > ul a{border-bottom:none}
.gnbIn dl dd > ul > li > ul li:last-of-type a{border-bottom:1px solid #717985;}
.gnbIn dl dd > ul > li > a:before, .gnbIn dl dd > ul > li > span:before{content: "";display: block;width:28px;height:28px;background: url(../img/gnb_btn_right.png)no-repeat center;position: absolute;right:10px;background-size: 100%;}



.gnbIn dl dd > ul > li > ul{display:none}
.gnbIn dl dd > ul > li > ul a{font-size:20px;padding:14px 0 14px 63px}
.gnbIn dl dd > ul > li > ul a:before{content:"";display:inline-block;width:6px;height:1px;background:#012b5d;position:relative;top:-6px;left:-14px}



.gnbIn dl dd > ul > li.on > a:before, .gnbIn dl dd > ul > li.on > span:before{background: url(../img/gnb_btn_down_white.png)no-repeat center;right:20px}
.gnbIn dl dd > ul > li.on span{background: #717985;color:#fff}
.gnbIn dl dd > ul > li.on ul a{background: #f1f0f0;color:#012b5d}
.gnbIn dl dd > ul > li.on ul a:hover{color:#000}




.fp-viewing-firstPage .topMenuTell{display: block;}
.topMenuTell{display: none;float: right;margin-top: 25px}
.topMenuTell a{display: block; padding:3px 0;font-size: 25px; color:#1494ce}
.topMenuTell a:before{content:"";display:block;width: 35px;height: 36px;margin-right:10px;margin-top:-3px;background: url(../img/topmenu_tell.png)no-repeat 0 0;float:left}
.fp-viewing-firstPage .topMenuTell a{color:#fff;}

.quick{margin:0 auto;position:fixed;right:calc(50% - 800px);top:calc(50% - 95px);z-index:99}

.quick > ul li a{display:block;margin-bottom:55px;width:80px;height:80px;background: #fff;color:#000;text-align: center;border-radius: 50%;font-size:20px;font-weight: 600;padding: 18px 0;box-sizing: border-box;box-shadow: rgba(0,0,0,0.16) 1px 2px 10px}
.quick > ul li a:hover{background: #1494ce;color:#fff;}
.quick > ul li:last-of-type a{margin-bottom:0}
.quick > ul li a.top, .quick > ul li.loginWrap a{padding:0;line-height: 80px}

/*.quick .navMenuTell{position: relative}
.quick .navMenuTell span{position: relative;z-index: 3; display:block;width:80px;height:80px;margin-bottom:30px;border-radius: 50%;background-color:#fff;background-image: url(../img/nav_tell.png);background-repeat: no-repeat;background-position: center;box-sizing: border-box;box-shadow: rgba(0,0,0,0.16) 1px 2px 10px;cursor: pointer}
.quick .navMenuTell span:hover{background-image: url(../img/nav_tell_over.png);background-color: #1494ce}
.quick .navMenuTell a{z-index: 1; position: absolute;right:0;top:0;padding: 28px 0;width:0;font-size:0;opacity:0;transition: all 1s linear 0s}
.quick .navMenuTell span:hover + a{z-index:5;width:200px;font-size: 20px;opacity:1;right:30px;border-radius:50px}*/
/*.quick .navMenuTellMb a{display:none;background-color:#fff;background-image: url(../img/nav_tell.png);background-repeat: no-repeat;background-position: center;}*/

.quick > ul{position: absolute;right:0;top:0;}
.quick .navMenuTell{position:relative;z-index:1}
.quick .navMenuTell a{padding: 34px 0;background-color:#fff;background-image: url(../img/nav_tell.png);background-repeat: no-repeat;background-position: center;transition: all 0.2s linear 0s}
.quick .navMenuTell a span{display:none;font-size:0;transition: all 0.3s linear 0s;}
.quick .navMenuTell:hover a{width:200px;padding: 28px 0;border-radius:50px;background-image: none;background-position: right; background-color:#1494ce;}
.quick .navMenuTell:hover a span{display:block;font-size: 20px;color:#fff}
.quick > ul li.loginWrap{position: absolute;right:0;top:38px}
.quick > ul li.topWrap{position: absolute;right:0;top:235px}

/* fullpage 수정 */
body #fp-nav{z-index:10}
body #fp-nav{left:calc(50% - 800px) !important}
body #fp-nav ul li .fp-tooltip{display:none}
body #fp-nav ul li,
body .fp-slidesNav ul li{width:18px;height:18px;margin: 20px 0;padding: 0}
body #fp-nav ul li a.active span, 
body #fp-nav ul li:hover a.active span{background: #012b5d;width:100%;height:100%;left:6px;top:6px}
body #fp-nav ul li a span{background: rgba(1, 43, 93, 0.4);width:100%;height:100%;left:2px;top:2px}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{width:100%;height:100%;margin:0;left:0;top:0;background: #012b5d;}
body #fp-nav ul li:first-child a.active span, body #fp-nav ul li:first-child:hover a.active span{background: #fff;}


/* section */
.section .inner{padding-top:100px;width:1280px;margin:0 auto;}
/* s1 */
.s1{background:url(../img/s1_bg.jpg)no-repeat center center;background-size: cover}
.s1 .s1Txt{text-align: center;color:#fff;}
.s1 .s1Txt h3{font-size:60px;margin-bottom:50px;color:#fff;}
.s1 .s1Txt p{font-size:30px;line-height:50px;color:#fff;}
.s1InfTxt{z-index:99;position:absolute;bottom:0;left:calc(50% - 86.4px);color:#fff;font-size:18px}
.s1InfTxt:after{content:"";display:block;margin:10px 0 35px;width:100%;height:57px;background:url(../img/down_scroll.png)no-repeat center}

/* s2 */
.s2{background:url(../img/s2_bg.jpg)no-repeat center center;background-size:cover;text-align:center}
.s2 h3{font-size:40px;font-weight:900;color:#000;letter-spacing:-0.2px}
.s2 h3 span{margin-bottom:20px;display:block;}
.s2 h3 + p{margin-top:10px;font-size:20px;color:#000;letter-spacing:-0.2px}
.s2 .serv{margin-top:55px;}
.s2 .serv li{position:relative;float:left;margin-right:1.5%;width:32.333%;height: 580px;text-align:center;transition:  all 0.3s;overflow: hidden;box-shadow:rgba(0,0,0,0.6) 3px 6px 10px}
.s2 .serv li:last-child{margin-right:0;}

.s2 .serv li span{position: absolute;left: 0;top: 0;display: block;content:'';width: 100%;height: 100%;background: rgba(0,0,0,0.7)}
.s2 .serv li:hover span{background:none}

.s2 .serv li a{display:flex;justify-content:center;align-items:center;}
.s2 .serv li a img{height: 100%;}
.s2 .serv li a img.mbI{width:100%;max-width:100%}
.s2 .serv li .box{position:absolute;left:0;right:0;margin:0 auto;z-index:20;border: 4px solid #fff;min-width: 240px;padding: 20px 0;width:240px;top: calc(50% - 134px);}
.s2 .serv li:hover .box{background: #1494ce;padding: 30px;min-width: 200px;box-shadow:rgba(20,148,206,0.6) 2px 2px 8px}
.s2 .serv li .box p{font-size:32px;font-weight:900;color:#fff;letter-spacing:-0.2px;}
.s2 .serv li .box .square{margin-top:25px;display:inline-block;padding:10px 20px;line-height:1;font-size:47px;font-weight:900;color:#fff;letter-spacing:-0.2px;}

.s2 .serv li .box .square + p{margin-top:30px;line-height:31px;font-size:19px;font-weight:400;color:#fff;letter-spacing:-0.2px;}

.s2 .serv li.actNone{width:21.25%}
.s2 .serv li.act{width:47.5%}

/* s3 */
.s3{background:#fff;text-align:left;}
.s3 h3{text-align:center;font-size:40px;font-weight:900;color:#003486;letter-spacing:-0.2px;}
.s3 h3 span{display:block;margin-top:10px;font-size:25px;font-weight:700;color:#000;opacity:0.5;letter-spacing:-0.2px;}
.s3 .board{float:left;padding:30px;margin-top:50px;margin-right:3.125%;width:48.437%;box-shadow:5px 5px 15px rgba(0,0,0,0.2);border-top:10px solid #04132a;box-sizing:border-box;}
.s3 .board:last-of-type{margin-right:0;}
.s3 .board .tab4 a{float:left;width:25%;height:60px;line-height:60px;font-size:20px;font-weight:700;color:rgba(0,0,0,0.4);text-align:center;transition:  all 0.4s;}
.s3 .board .tab4 a.on{color:#000;background:#eee;}
/* .s3 .board .bdList.on{display: block;}
.s3 .board .bdList{display: none;} */
.s3 .board .bdList li{padding:20px 0;border-top:1px solid #7a7a7a;}
.s3 .board .bdList li .tit{display:inline-block;width:calc(100% - 60px);text-align:left;font-size:18px;font-weight:700;letter-spacing:-0.2px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align: top;}
.s3 .board .bdList li .date{display:inline-block;width:60px;text-align:right;font-size:18px;font-weight:700;letter-spacing:-0.2px;color:#012b5d;vertical-align: top;}
.s3 .inner{margin-bottom: 96px;padding-top: 130px;}

.s3 .board{position:relative}
.s3 .board > h4{font-size:25px;font-weight:600;color:#000;margin: 10px 0 30px;}
.s3 .board > h4:before{content:"";display:inline-block;width:65px;height:65px;background:url(../img/main_bd_tit1.png)no-repeat center;position: relative;top: 10px;margin-right: 20px;}
.s3 .board.bd02 > h4:before{background:url(../img/main_bd_tit2.png)no-repeat center;}
.s3 .board > .more{position:absolute;right:30px;top:80px;background:#003486;color:#fff;font-weight:600;cursor:pointer}
.s3 .board > .more a{display:block;color:#fff;width:100%;height:100%;padding:10px 15px;box-sizing: border-box;}


/* footer */
.footer{padding:30px 0;background:#04132a;text-align:center;}
.footer p{font-size:20px;font-weight:700;color:#fff;letter-spacing:-0.2px;}
.footer p.copy{font-size:14px;font-weight:400;color:#fff;}



@media screen and (max-width:1600px){
.quick{right:50px}
body #fp-nav{left:50px !important}   
}



@media screen and (max-width:1280px){
.headWrap{width:90%}
.section .inner{width:90%}    
}



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

.pcB{display: none !important;}
.mbB{display: block;}
.pcI{display: none;}
.mbI{display: inline;}

    
h1 a{height:50px}    
.mbMenu{position: absolute;right: 0;top: 24px;width:32px;height:32px;background: url(../img/mb_menu2.png) center no-repeat;cursor:pointer;}
.fp-viewing-firstPage .headIn.on::before{background: rgba(255, 255, 255, 0);}
.headIn.on::before{box-shadow:0;border-bottom:1px solid #fff;}
    .headIn.on h1 a {
        background: url(../img/logo.png) left center no-repeat;
    }
    .fp-viewing-firstPage .headIn.on h1 a {
        background: url(../img/logo.png) left center no-repeat;
    } 
.fp-viewing-firstPage .mbMenu{background: url(../img/mb_menu.png) center no-repeat;background-size:contain;}
.topMenuTell a::before{width:30px;height:30px;background-size:cover;}
.quick{right:5%;bottom:5%;top:inherit}
.quick > ul li a{display: none;padding:20px 0;margin-bottom:20px;width:70px;height:70px;font-size:14px;opacity: 0;transition: all 0.4s;}
.quick > ul li a.top, .quick > ul li.loginWrap a{line-height:70px;}
.quick > ul li a.mb_quick{display: block !important;background: url(../img/mb_quick_open.png) center no-repeat #1494ce;opacity: 1 !important;transition:none}
.quick > ul li a.mb_quick.on{background: url(../img/mb_quick_close.png) center no-repeat #1494ce;}
.quick > ul{position: relative}
.quick > ul li.topWrap{position: inherit;top:0}
.quick > ul li.loginWrap{position: inherit;top:0}
.quick .navMenuTell:hover a{width:auto}


    
.headIn.mbAct::before{background: #021b3a !important;}
    .headIn.mbAct h1 a {
        background: url(../img/logo.png) left center no-repeat;
    } 
.headIn.mbAct .mbMenu{background: url(../img/mb_menu_close.png) center no-repeat;background-size:contain;}
.mbGnbIn{display: none;position: fixed;top: 78px;left: 0;width: 100%;height: calc(100% - 78px);z-index:100;transition:  all 0.4s;background: #fff;}
.mbGnbIn .mb_dep1{float: left;width: 30%;height: 100%;background: #012b5d;}
.mbGnbIn .mb_dep1 a{display: block;padding: 20px 0 20px 10%;font-size: 24px;color: #fff;opacity: 0.3;letter-spacing: -0.2px;}
.mbGnbIn .mb_dep1 li.on a{opacity: 1;}
.mbGnbIn .mb_dep2{float: right;width: 70%;height: 100%;background: #fff;overflow:auto;}
.mbGnbIn .mb_dep2 dl{display: none;}
.mbGnbIn .mb_dep2 dl.on{display: block;}
.mbGnbIn .mb_dep2 dl > dt{border-bottom:1px solid #d9d9d9}
.mbGnbIn .mb_dep2 dt a{display: block;padding: 15px 0 15px 8%;font-size: 22px;font-weight: 900;color: #000;letter-spacing: -0.2px;}
.mbGnbIn .mb_dep2 li a{display: block;padding: 20px 0 20px 8%;font-size: 22px;background: #e9e9e9;letter-spacing: -0.2px;line-height: 25px;word-break:keep-all;}

.section .inner{padding-top: 60px;margin-bottom: 0;}

.s1 .s1Txt h3{margin-bottom:30px;line-height:45px;font-size:40px;font-weight:900;letter-spacing:-0.2px;}
.s1 .s1Txt p{line-height:30px;font-size:25px;font-weight:400;letter-spacing:-0.2px;word-break:keep-all;}

.s2 h3{font-size:30px;}
.s2 h3 span{display:block;margin-bottom:20px;height:18px;}
.s2 h3 span img{max-height:100%;vertical-align:top;}
.s2 .serv{margin-top:50px;}
.s2 .serv li{float:none;margin-top:10px;margin-right:0;width:100%;height:auto;min-height:200px;}

.s2 .serv li .box{top:calc(50% - 72px)}
.s2 .serv li .box p{font-size:18px;font-weight:700;}
.s2 .serv li .box p:first-of-type{display:none}
.s2 .serv li .box p:nth-of-type(2){margin-top:0}
.s2 .serv li .box .square{margin-top:15px;display:inline-block;padding:5px 20px;border:2px solid #fff;line-height:1;font-size:20px;font-weight:900;color:#fff;letter-spacing:-0.2px;}
.s2 .serv li .box .square + p{margin-top:15px;line-height:31px;font-size:22px;font-weight:400;color:#fff;letter-spacing:-0.2px;}
.s2 .serv li span{display: none;}
.s2 .serv li a img.mbI{height: 100%;max-width: fit-content;width:auto}



.s3 h3{font-size:30px;text-align:center;}
.s3 h3 span{margin-top:10px;display:block;font-size:20px;}
.s3 .board{float:none;margin-right:0;margin-top:50px;width:100%;}
.s3 .board:last-of-type{margin-top:40px;margin-bottom:70px;}
.s3 .board .bdList li{padding:20px 0;}
.s3 .board .bdList li span{vertical-align:top;}

.footer{padding:30px 20px;}
.footer p{line-height:23px;font-size:15px;}
.footer p.copy{margin-top:15px;}



}

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

.mbMenu{top: 28px;width: 24px;height: 24px;background-size:cover;}
.mbGnbIn .mb_dep1{width: 25%;}
.mbGnbIn .mb_dep1 a{font-size: 18px;}
.mbGnbIn .mb_dep2{width: 75%;}
.mbGnbIn .mb_dep2 dt a{font-size: 16px;padding: 15px 0px 15px 5%;}
.mbGnbIn .mb_dep2 li a{font-size: 16px;padding: 15px 0px 15px 5%;}

.quick > ul li a{width: 60px;height: 60px;font-size: 12px;padding: 16px 0;}
.quick > ul li a.top, .quick > ul li.loginWrap a{line-height: 60px;}

.s1 .s1Txt h3{font-size: 30px;line-height: 36px;}
.s1 .s1Txt p{font-size: 18px;}
.s2 h3{font-size: 24px;}
.s2 h3 + p{font-size: 14px;}
.s2 .serv li{margin-top: 20px;}
.s2 .serv li .box p{font-size: 16px;}
.s2 .serv li .box .square{font-size: 16px;}
.s2 .serv li .box .square + p{font-size: 14px;}
.s3 h3{font-size: 24px;}
.s3 h3 span{font-size: 14px;}
.s3 .board .tab4 a{font-size: 16px;}
.s3 .board .bdList li{padding:15px 0}
.s3 .board .bdList li .tit{font-size: 13px;}
.s3 .board .bdList li .date{font-size: 13px;}
.footer p{line-height:20px;font-size:12px;}
.footer p.copy{font-size: 12px;}




.s3 .board > h4:before, 
.s3 .board.bd02 > h4:before{background-size: 100% 100%;width: 40px;height: 40px;top:5px;margin-right: 10px;}
.s3 .board > h4{font-size:20px;margin-bottom:15px}
.s3 .board > .more{top:62px}
.s3 .board > .more a{padding:5px 8px;font-size: 13px;}
}