@charset "utf-8";
/* CSS Document */

/*기본화면-화면 너비값이 제일 작을 때*/

html, body {width:100%; height:100%;
            margin:0; padding:0;}
#wrap {width:100%; min-width:320px; max-width:1920px; height:100%;
       margin:0 auto;}
#container{width:100%; min-width:320px;}

/*헤더*/
#header_m{width: 100%; height: 70px;position: absolute; z-index: 500; top: 0;left: 0; background: #fff;border-bottom: 1px solid #efefef;z-index: 999}
#header_m h1{padding: 17px 0 17px 20px;}
#header_m h1 img{height: 36px; width: auto}
.menu{position: absolute;width: 25px; height: 21px; margin-right: 25px; margin-left: 25px; top: 25px; right: 0}
.menu span{position: absolute; left: 0; width: 100%; height: 3px; background: #3f3f3f; border-radius: 2px;display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.menu span:nth-child(1){top: 0}
.menu span:nth-child(2){top: 9px}
.menu span:nth-child(3){bottom: 0}

.menu.on span:nth-child(1){transform: translateY(9px) rotate(-315deg);-webkit-transform: translateY(9px) rotate(-315deg);}
.menu.on span:nth-child(2){opacity: 0}
.menu.on span:nth-child(3){transform: translateY(-9px) rotate(315deg);-webkit-transform: translateY(-9px) rotate(315deg);}

.allmenu{position: absolute;top: 0; left: 0; right: 0; width: 100%; background: #fff; padding: 75px 20px 10px 20px; box-sizing: border-box; display: none;box-shadow: 0 1px 2px rgba(0,0,0,0.1);z-index: 900}
.allmenu .am h2{border-top: 1px solid #d7d7d7}
.allmenu>div:first-child h2{border: 0}
.allmenu .am h2 a{color: #3f3f3f; font-weight: 500; font-size: 18px;display: block; padding: 15px; position: relative;font-weight: 600;transition: all 0.2s}
.allmenu .am h2 a span{position: absolute;top: 15px; right: 22px;font-weight: 600;color: #2a73f4}
.allmenu .am h2 a:hover{color: #2a73f4}
.allmenu .am>ul{border-top: 1px solid #d7d7d7; padding: 15px 0 15px 20px; display: none}
.allmenu .am>ul a{color: #3f3f3f; display: block; line-height: 1.8em}
.allmenu .am>ul a:hover{color: #2a73f4;}

.sub_menu{display: none}

footer{color: #b0b0b2;background: #1c1d22;padding: 40px 15px;position: relative;text-align: center}
.f_logo{margin-bottom: 15px}
.f_info{line-height: 1.4em;letter-spacing: -0.5px}
.f_info a{display: inline-block;border-radius: 3px;color: #fff;background: #32333a;padding: 4px 14px;font-weight: 300;letter-spacing: 0;font-size: 13px;margin-top: 7px}
.f_info a:hover{background: #43444d;}
.go-top{position: absolute;bottom: 20px; right: 15px}


.mv{background: url(../images/main/mv_bg.jpg)no-repeat 50% 0;background-size: cover}
.sec1{background: url(../images/main/sec1.jpg)no-repeat 50% 0;background-size: cover}
.sec2{background: url(../images/main/sec2.jpg)no-repeat 17% 0;background-size: cover}
.sec3{background: url(../images/main/sec3.jpg)no-repeat 50% 0;background-size: cover}

#fp-nav{display: none}
.mv_txt{position: absolute;top: 50%; left: 0;transform: translateY(-50%);-webkit-transform: translateY(-50%);text-align: center;color: #fff;padding: 0 15px;padding-top: 45px;width: 100%;box-sizing: border-box}
.mv_txt h2{font-size: 38px;line-height: 1em;margin-bottom: 13px;letter-spacing: -1px}
.mv_txt h2 span{color: #fff000}
.mv_txt p{line-height: 1.3em}
.slider{height: 100%}
.slider div{display: block;height: 100%;width: 100%;}
.slider .mv1{background: url(../images/main/mv1.jpg)no-repeat center/cover}
.slider .mv2{background: url(../images/main/mv2.jpg)no-repeat center/cover}
.slider .mv3{background: url(../images/main/mv3.jpg)no-repeat center/cover}
.slider .mv4{background: url(../images/main/mv4.jpg)no-repeat center/cover}

.s1_tit{text-align: center;padding: 0 15px;color: #fff;text-shadow: 0px 0px 2px rgba(0,0,0,0.25);margin-bottom: 30px;padding-top: 45px}
.s1_tit h2{font-size: 30px;line-height: 1em; margin-bottom: 10px;letter-spacing: -1px;font-weight: 300;}
.s1_tit h2 strong{font-weight: 900}
.s1_tit p{line-height: 1.3em}
.s1_box{padding: 0 15px}
.s1_box li{box-shadow: 0px 0px 20px rgba(0,0,0,0.2);position: relative;padding: 25px 20px;height: 55px}
.s1_box li .bar img{width: 25px}
.s1_box li h3{font-size: 18px;line-height: 1.3em}
.s1_box li h3 span{font-weight: 300}
.s1_box li a{position: absolute;top: 0px; right: 0px;height: 35px;width:45px;text-align: center;display: block;color: #fff;padding: 35px 15px;background: #ffa630;text-shadow: 0px 0px 2px rgba(0,0,0,0.2)}

.s1_box li.on{z-index: 5}
.s1_box li:nth-child(1){background: url(../images/main/s1_bg1.jpg)no-repeat center/cover}
.s1_box li:nth-child(2){background: url(../images/main/s1_bg2.jpg)no-repeat center/cover}
.s1_box li:nth-child(3){background: url(../images/main/s1_bg3.jpg)no-repeat center/cover}
.s1_box li.on:nth-child(1){background: url(../images/main/s1_bg1_on.jpg)no-repeat center/cover}
.s1_box li.on:nth-child(2){background: url(../images/main/s1_bg2_on.jpg)no-repeat center/cover}
.s1_box li.on:nth-child(3){background: url(../images/main/s1_bg3_on.jpg)no-repeat center/cover}
.s1_box li.on a{background: #ffcb3d;}

.sec2{height: 100%}
.sec2 .inner{height: 100%;padding-top: 70px}
.s2_box{width: 50%;box-sizing: border-box;float: left;text-align: center;display: block;height: 33.333%;border-top: 1px solid rgba(255,255,255,0.2);position: relative;transition: background 0.3s}
.s2_box:hover{background: rgba(0,0,0,0.5)}
.s2_box:nth-child(even){border-right: 1px solid rgba(255,255,255,0.2)}
.s2_box a{display: block;color: #fff;top: 50%;position: absolute;width: 100%;transform: translateY(-50%);-webkit-transform: translateY(-50%)}
.s2_box p{display: none}
.s2_box .s2b_icon{margin-bottom: 15px}
.s2_box .s2b_icon img{width: 60px}
.s2_box h4{font-size: 18px;line-height: 1em;margin-bottom: 15px}
.s2_box span{display: inline-block;padding-bottom: 3px;border-bottom: 2px solid #fff;font-weight: 600;font-size: 12px;opacity: 0.3;transition: all 0.3s;width: 35px}
.s2_box:hover span{opacity: 1; width: 70px}

.s3_box{color: #fff;text-shadow: 0px 0px 2px rgba(0,0,0,0.25);padding-top: 20px}
.s3b_tit{text-align: center;font-size: 30px;letter-spacing: 13px;margin-bottom: 40px}
.s3b_txt{padding: 0 15px;text-align: center}
.s3b_txt dl{position: relative;line-height: 1.7em;text-align: left}
.s3b_txt dt{position: absolute;top: 0;left: 0;font-weight: 600;opacity: 0.7;}
.s3b_txt dd{padding-left: 75px}
.s3b_txt a{display: inline-block;margin: 35px auto 0;border: 1px solid #fff; padding: 10px 35px;color: #fff;transition: all 0.2s}
.s3b_txt a:hover{background: #fff;color: #222;text-shadow: none}

.copyright{position: absolute;bottom: 0;left: 0;width: 100%; line-height: 50px;color: #ababab;letter-spacing: -0.4px;text-align: center;background: #2d2d2d}

@media screen and (min-width:768px){

    .mv_txt{padding-top: 60px}
    .mv_txt h2{font-size: 52px;margin-bottom: 15px}
    .mv_txt p{font-size: 18px}

    .s1_tit{margin-bottom: 40px;padding-top: 50px}
    .s1_tit h2{font-size: 40px}
    .s1_box{padding: 0 30px}
    .s1_box li{padding: 35px 35px;height: auto;width: 33.333333333%; box-sizing: border-box;float: left}
    .s1_box li:nth-child(2){width: 33.334%}
    .s1_box li span{display: block;margin-bottom: 10px}
    .s1_box li h3{font-size: 24px;margin-bottom: 20px}
    .s1_box li h3 span{font-weight: 300}
    .s1_box li p{line-height: 1.6em;height: 200px}
    .s1_box li a{position: static;height: auto;width:100%;padding: 0;line-height: 45px}

    .s2_box .s2b_icon img{width: 75px}
    .s2_box h4{font-size: 21px}
    
    .s3_box{background: url(../images/main/s3b_bg.png)no-repeat center/100% auto;box-sizing: border-box;width: 480px;text-align: center;padding: 120px 0;margin: 0 auto}
    .s3_box>div{display: inline-block}
    .s3b_tit{line-height: 1em;font-size: 36px}
    
}
/*768px끝*/

@media screen and (min-width:1200px){
    
    #container{width:100%; min-width:320px;}
    
    /*헤더*/
    #header{position: fixed;width: 100%; height: 99px;text-align: center;border-bottom: 1px solid #efefef;top: 0; left: 0;z-index: 999;background: #fff}
    #header h1{position: absolute;top: 30px;left: 0}
    .header_add{position: absolute;top: 35px; right: 0}
    .d1{margin: 0 auto;display: inline-block}
    .d1:after{content: ""; display: block; clear: both}
    .d1>li{vertical-align: top;float: left;letter-spacing: -0.7px}
    .d1>li>a{display: block; line-height: 14px; color: #3f3f3f; font-size: 17px; padding: 45px 27px 40px 27px;font-weight: 600}
    .d1>li>a:hover{color: #2a73f4}
    .header_add a{display: block;line-height: 32px; font-size: 15px; font-weight: 600; text-align: center; color: #2a73f4; border:2px solid #2a73f4;transition: all 0.2s;padding: 0 17px}
    .header_add a:hover{background: #2a73f4; color: #fff}
    
    .sub_menu{background: rgba(0,0,0,0.90);position: fixed;top: 100px;left: 0;width: 100%;text-align: center;z-index: 998;display: none}
    .sub_menu .inner{width: 1050px}
    .sub_menu .sm-box{float: left;padding: 53px 0 58px;width: 20%;text-align: center}
    .sub_menu .sm-box h4 a{color: #fff;font-size: 24px; margin-bottom: 30px;display: block}
    .sub_menu ul{display: block;box-sizing: border-box}
    .sub_menu li a{color: #ddd;line-height: 1.8em;letter-spacing: -0.5px;font-size: 16px}
    .sub_menu li a:hover{color: #fff}
    
    footer{padding: 50px 0;text-align: left}
    .f_logo{margin-bottom: 0;position: absolute;top: 0; left: 0}
    .f_info{padding-left: 259px;font-size: 16px;}
    .f_info a{font-size: 14px;margin-top: 12px}
    .go-top{position: absolute;bottom: auto; right: 0;top: 0}
    
    #fp-nav{display: block}
    
    .mv_txt{padding-top: 90px}
    .mv_txt h2{font-size: 72px;margin-bottom: 30px}
    .mv_txt p{font-size: 26px}
    
    .s1_tit{margin-bottom: 55px;padding-top: 55px}
    .s1_tit h2{font-size: 60px;margin-bottom: 20px}
    .s1_tit p{font-size: 18px;}
    .s1_box{padding: 0}
    .s1_box li{padding: 50px 43px}
    .s1_box li .bar img{width: auto}
    .s1_box li h3{font-size: 30px;margin-bottom: 25px;margin-top: 15px}
    .s1_box li p{font-size: 16px;letter-spacing: -0.3px;height: 195px}
    .s1_box li a{box-shadow: 2px 2px 10px rgba(0,0,0,0.1);line-height: 50px; font-size: 18px}

    .sec2 .inner{padding-top: 100px}
    .s2_tit{float: left;width: 50%;border-right: 1px solid rgba(255,255,255,0.2);box-sizing: border-box;height: 50%;color: #fff;padding-top: 105px}
    .s2_tit h3{font-size: 60px;line-height: 0.9em;font-weight: 300;margin-bottom: 30px}
    .s2_tit h3 span{font-weight: 900;}
    .s2_tit p{font-size: 16px;line-height: 1.4em;}
    .s2_box{width: 25%;height: 50%;border-right: 1px solid rgba(255,255,255,0.2)}
    .s2_box a{padding-bottom: 10px}
    .s2_box:nth-child(2) a{padding-top: 10px;padding-bottom: 0}
    .s2_box:nth-child(3) a{padding-top: 10px;padding-bottom: 0}
    .s2_box:nth-child(4){border-left: 1px solid rgba(255,255,255,0.2)}
    .s2_box p{display: block}
    .s2_box .s2b_icon{margin-bottom: 33px}
    .s2_box .s2b_icon img{width: auto}
    .s2_box h4{font-size: 26px;margin-bottom: 23px}
    .s2_box span{padding-bottom: 6px;font-size: 13px;width: 40px}
    .s2_box p{font-size: 16px;line-height: 1.2em;margin-bottom: 53px}
    .s2_box:hover span{width: 130px}
    
    .s3_box{width: 517px;padding: 120px 0;margin: 30px auto 0}
    .s3_box>div{padding-top: 90px}
    .s3b_tit{letter-spacing: 65px;font-size: 45px;position: absolute;left: 50%; transform: translateX(-50%);padding-left: 58px}
    .s3b_txt dl{font-size: 16px;}
    .s3b_txt dd{padding-left: 95px;letter-spacing: -0.3px}
    .s3b_txt a{font-size: 15px;padding: 13px 44px}

    .copyright{line-height: 55px;font-size: 15px}
    
} /*1200px끝*/