@charset "UTF-8";
@import url("notosan.css");
@import url("NanumSquare.css");
@import url("nanumsquareround.css");
@import url("sub.css");

/* header */ 
.wrapper *{box-sizing:border-box;}
.wrapper header{position:relative;background-color:#FFF7D4;padding:30px 0px 150px 0px;height:800px}
.wrapper header::after{content:'';display:block;clear:both}
.wrapper header .inner{width:100%;max-width:1200px;margin:0 auto;position:relative}
.wrapper header h1{text-align:center;}
.wrapper header nav .family-site{position:absolute;right:0px;top:-70px;z-index:1;}
.wrapper header nav .family-site a{display:block;padding:5px 12px 6px 30px;border:1px solid #4D472D;border-radius:6px;font-size:14px;color:#4D472D;font-weight:700;background:url(../images/ico/ico_ko_site.png) no-repeat 10px center}
.wrapper header nav{position:absolute;right:0px;top:80px;z-index:100;width: 100%;}
.wrapper header nav:before{content:'';width: 0;height:100%;background-color: rgba(0,0,0,0.85);position: fixed;left:0;z-index: -1;}
.wrapper header nav.on:before{width:100%;}
.wrapper header nav .mob-logo{display:none;}
.wrapper header.active nav{height:320px;}
.wrapper header nav > ul{display:table;width:100%;border-radius:50px;height:100px;background-color:#fff;}
.wrapper header nav > ul > li{position:relative;display:table;float:left;text-align:center;height:100%;}
.wrapper header nav > ul > li:first-child{margin-left:40px;}
.wrapper header nav > ul > li::after{content:'';display:block;position:absolute;right:0px;top:50%;width:2px;height:20px;background-color:#ddd;margin-top:-10px;}
.wrapper header nav > ul > li:last-child::after{display:none}
.wrapper header nav > ul > li > a{display:table-cell;font-family:'nanumsquare';font-weight:700;font-size:22px;padding:0px 40px;vertical-align: middle;height:100%;}
.wrapper header.active nav > ul > li > ul{display:block}
.wrapper header nav > ul > li > ul{display:none;position:absolute;left:0px;right:0px;top:130px;z-index:2}
.wrapper header nav > ul > li.active > ul{display:block;}
.wrapper header nav > ul > li > ul > li{margin:10px 0px;text-align:center}
.wrapper header nav > ul > li > ul > li > a{display:inline-block;height:38px;padding:8px 10px 5px 10px;font-size:18px;color:#333;font-weight:700;font-family:'nanumsquare';border-radius:19px;letter-spacing:-0.02em;}
.wrapper header nav > ul > li > ul > li > a:hover{background-color:#FFA62B;color:#fff}
.wrapper header.active nav .nav-bg{display:block}
.wrapper header nav .nav-bg{display:none;position:absolute;left:0px;right:0px;top:110px;z-index:1;overflow:hidden;height:200px;background-color:#fff;border-radius:40px;}
.wrapper header .mob_menu{display:none;}

/* sub header */
.wrapper header.sub{position:relative;height:500px;background-image:url(../images/content/bg_sub_visual.png);background-position:center top;background-repeat:repeat-x;overflow:hidden;background-color:transparent}
.wrapper header.sub.v1::before{position:absolute;left:0px;bottom:70px;z-index:1;width:561px;height:232px;background:url(../images/content/etc_sub_visual1_1.png) no-repeat;content:''}
.wrapper header.sub.v1::after{position:absolute;right:0px;bottom:70px;z-index:1;width:561px;height:329px;background:url(../images/content/etc_sub_visual1_2.png) no-repeat;content:''}
.wrapper header.sub.v2::before{position:absolute;left:0px;bottom:70px;z-index:1;width:561px;height:232px;background:url(../images/content/etc_sub_visual2_1.png) no-repeat;content:''}
.wrapper header.sub.v2::after{position:absolute;right:0px;bottom:70px;z-index:1;width:560px;height:329px;background:url(../images/content/etc_sub_visual2_2.png) no-repeat;content:''}
.wrapper header.sub.v3::before{position:absolute;left:0px;bottom:70px;z-index:1;width:438px;height:248px;background:url(../images/content/etc_sub_visual3_1.png) no-repeat;content:''}
.wrapper header.sub.v3::after{position:absolute;right:0px;bottom:70px;z-index:1;width:528px;height:341px;background:url(../images/content/etc_sub_visual3_2.png) no-repeat;content:''}
.wrapper header.sub.v4::before{position:absolute;left:0px;bottom:50px;z-index:1;width:561px;height:261px;background:url(../images/content/etc_sub_visual4_1.png) no-repeat;content:''}
.wrapper header.sub.v4::after{position:absolute;right:0px;bottom:70px;z-index:1;width:560px;height:339px;background:url(../images/content/etc_sub_visual4_2.png) no-repeat;content:''}
.wrapper header.sub.v5::before{position:absolute;left:0px;bottom:70px;z-index:1;width:561px;height:232px;background:url(../images/content/etc_sub_visual5_1.png) no-repeat;content:''}
.wrapper header.sub.v5::after{position:absolute;right:0px;bottom:70px;z-index:1;width:561px;height:329px;background:url(../images/content/etc_sub_visual5_2.png) no-repeat;content:''}
.sub-title{margin-top:200px;text-align:center; position: absolute; top: 50px; left: 50%; transform: translate(-50%, 0); z-index: 99; width: 100%;}
.sub-title span{display:block;font-family:'NanumSquareRound';font-size:22px;color:#222;font-weight:700}
.sub-title h2{display:block;margin-top:10px;font-family:'NanumSquareRound';font-size:56px;color:#222;font-weight:800}

/* sub common */
.sub-content{width:100%;max-width:1200px;background-color:#fff;min-height:500px;font-family:'nanumsquare';margin:0 auto;padding:30px 0px 100px 0px}
.sub-content::after{content:'';display:block;clear:both}
.loction-wrap{text-align:right;font-family:'Noto Sans Korean'}
.loction-wrap span{position:relative;display:inline-block;padding:0px 15px;font-size:16px;color:#666;height:16px}
.loction-wrap span:last-child{padding:0px 0px 0px 15px}
.loction-wrap span:last-child::after{display:none}
.loction-wrap span.home{width:16px;height:18px;background:url(../images/ico/ico_home.png) no-repeat left 2px;}
.loction-wrap span::after{display:block;width:8px;height:14px;content:'';background:url(../images/ico/ico_loc_arrow.png) no-repeat 0px 0px;position:absolute;right:-4px;top:4px;z-index:1;}
.loction-wrap span.active{color:#222}

/* tab */
.tab-element{margin-top:30px;border:2px solid #8fa0b7;border-radius:8px;border-width: 2px 0 2px;}
.tab-element::after{content:'';display:block;clear:both}
.tab-element li{float:left;width:50%;position:relative;height:60px;border-right:2px solid #8fa0b7;display:table;}
.tab-element li:last-child{border-right:none;}
.tab-element li.bone{border-right:none;}
.tab-element li a{display:table-cell;vertical-align:middle;line-height:24px;color:#666;font-size:22px;text-align:center;border-radius: 8px;border-right:none !important; width:100%; height:100%;}
.tab-element li a.active{background:#1F4270;color:#fff;z-index:1; border-radius: 8px;}
.tab-element li a.bone{border-right:none;}
.tab-element li:first-child a{border-left:2px solid #8fa0b7;}
.tab-element li:last-child a{border-right:2px solid #8fa0b7 !important;}

/* footer */
footer{position:relative;height:112px;padding:30px 0px;background-color:#232527;font-size:14px;color:#fff;text-align:center;line-height:22px}
footer span{display:inline-block;padding:0px 10px;opacity:.8;position:relative;}
footer span::after{position:absolute;right:0px;top:5px;z-index:1;width:1px;height:15px;background-color:#fff;content:''}
footer span:nth-child(3)::after{display:none}
footer p{margin-top:5px}
footer .sns-list{position:absolute;right:200px;top:50%;z-index:1;margin-top:-16px}
footer .sns-list li{float:left;width:33px;height:33.7px;margin-right:8px;background-repeat:repeat;background-image:url(../images/common/ico_sns.png);}
footer .sns-list li a{display:block;width:inherit;height:inherit;}
footer .sns-list li:nth-child(1){background-position:0px 0px}
footer .sns-list li:nth-child(2){background-position:-40px 0px}
footer .sns-list li:nth-child(3){background-position:-80px 0px}
footer .sns-list li:nth-child(4){background-position:-120px 0px}
footer .sns-list li:nth-child(5){background-position:-160px 0px}



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

    .wrapper header{padding:0 0 150px 0;}
    .wrapper header .inner{height:68px; background-color: #fff; line-height: 60px; padding:0 20px;}
    .wrapper header h1{text-align: left;}
    .wrapper header h1 img{width:200px;}
    .wrapper header .inner .family-site{position:relative;right:0px;top:0px;z-index:1;background-color:#1F4270}
    .wrapper header nav .family-site a{display:block;padding:0px 12px 0px 45px;border:0;border-radius:0px;font-size:14px;color:#fff;font-weight:400;background:url(../images/ico/ico_ko_site_white.png) no-repeat 20px center}

    .wrapper header nav{position:fixed;right:-100%;top:0;overflow:hidden;width: 280px;background-color: #fff;height: 100%;z-index: 99999;}
    .wrapper header nav .mob-logo{display:block;padding:4px 20px;overflow: hidden;border-bottom:1px solid #ddd;background-color: #fff;}
    .wrapper header nav .mob-logo h2{float:left;}
    .wrapper header nav .mob-logo h2 img{width:200px;}
    .wrapper header nav .mob-logo button{width:16px; height:16px; background: url(../images/common/close.png) no-repeat 0 0; text-indent: -9999px; float:right; margin:25px 0 0 0;}
    .wrapper header.active nav{height:320px;}
    .wrapper header nav > ul{display:block;border-radius:0;height:100%;}
    .wrapper header nav > ul > li{display:block; text-align: left; border-bottom:1px solid #ddd;float:none;height:auto;}
    .wrapper header nav > ul > li:first-child{margin-left:0;}
    .wrapper header nav > ul > li::after{width: 0;}
    .wrapper header nav > ul > li:last-child::after{display:none}
    .wrapper header nav > ul > li > a{font-size:20px;padding:0px 20px;display:block;background: url(../images/ico/ico_lnb_down.png) no-repeat 95% center;}
    .wrapper header nav > ul > li.active > a{background: url(../images/ico/ico_lnb_up.png) no-repeat 95% center;}
    .wrapper header.active nav > ul > li > ul{display:block}
    .wrapper header nav > ul > li > ul{display:none;position: static;padding:15px 20px;background-color: #F8F8F8; border-top:1px solid #ddd;}
    .wrapper header nav > ul > li > ul > li{margin:0px;text-align:left}
    .wrapper header nav > ul > li > ul > li > a{display:block;height:auto;padding:0;font-size:18px;border-radius:0;letter-spacing:0;line-height: 40px;}
    .wrapper header nav > ul > li > ul > li > a:hover{background-color: #F8F8F8; color:#FFA62B;}
    .wrapper header .mob_menu{display:block; position: absolute; top:27px; right:20px;}
    .wrapper header .mob_menu button{width:20px; height:16px; background: url(../images/common/mob_menu.png) no-repeat 0 0; text-indent: -9999px;}

    .wrapper header.sub{height:377px; background-size: 1200px 377px;}
    .wrapper header.sub.v1::before{width: 330px;height: 137px;background-size: 330px;bottom:48px;}
    .wrapper header.sub.v1::after{width: 320px;height: 189px;background-size: 320px;bottom: 48px;}
    .wrapper header.sub.v2::before{width:361px; height:153px; background-size: 361px; bottom:48px;}
    .wrapper header.sub.v2::after{width:361px; height:214px; background-size: 361px; bottom:48px;}
    .wrapper header.sub.v3::before{width: 300px;height: 165px;background-size: 300px;bottom:48px;}
    .wrapper header.sub.v3::after{width: 300px;height: 191px;background-size: 300px;bottom:48px;}
    .wrapper header.sub.v4::before{width: 300px;height: 141px;background-size: 300px;bottom: 38px;}
    .wrapper header.sub.v4::after{width: 300px;height: 183px;background-size: 300px;bottom: 49px;}
    .wrapper header.sub.v5::before{width:361px; height:153px; background-size: 361px; bottom:48px;}
    .wrapper header.sub.v5::after{width:361px; height:214px; background-size: 361px; bottom:48px;}
    .sub-title{margin-top:70px; top:60px;}
    .sub-title span{font-size:20px; line-height: 35px;}
    .sub-title h2{font-size:45px;}

    footer{height:100%; padding:30px 0;}
    footer .sns-list{position: static; overflow: hidden; text-align: center; margin-top:10px;}
    footer .sns-list li{display:inline-block; float:none;}
}

@media screen and (max-width: 768px){
    .wrapper header.sub{height:350px; background-size: 1200px 350px;}
    .wrapper header.sub.v1::before{width: 260px;height: 107px;background-size: 260px;bottom: 38px;}
    .wrapper header.sub.v1::after{width: 260px;height: 152px;background-size: 260px;bottom: 38px;}
    .wrapper header.sub.v2::before{width: 300px;height: 125px;background-size: 300px;bottom:38px;}
    .wrapper header.sub.v2::after{width: 300px;height: 177px;background-size: 300px;bottom:38px;}
    .wrapper header.sub.v3::before{width: 270px;height: 149px;background-size: 270px;bottom:38px;}
    .wrapper header.sub.v3::after{width: 270px;height: 173px;background-size: 270px;bottom:38px;}
    .wrapper header.sub.v4::before{width: 250px;height: 118px;background-size: 250px;bottom:38px;}
    .wrapper header.sub.v4::after{width: 250px;height: 161px;background-size: 250px;bottom:38px;}
    .wrapper header.sub.v5::before{width:300px;height: 124px;background-size: 300px;bottom: 38px;}
    .wrapper header.sub.v5::after{width:300px;height: 176px;background-size: 300px;bottom: 38px;}

    .sub-title{margin-top:50px;}
    .sub-title span{font-size:20px; line-height: 30px;}
    .sub-title h2{font-size:35px; line-height: 40px;}

    /*탭*/
    .tab-element li{height:50px;}
    .tab-element li a{font-size:20px !important;}
}

@media screen and (max-width: 480px){
    .wrapper header.sub{height:300px; background-size: 768px 300px;}
    .wrapper header.sub.v1::before{width:196px; height:81px; background-size: 196px;}
    .wrapper header.sub.v1::after{width: 196px;height: 115px;background-size: 196px;}
    .wrapper header.sub.v2::before{width:196px; height:81px; background-size: 196px;}
    .wrapper header.sub.v2::after{width:196px; height:115px; background-size: 196px;}
    .wrapper header.sub.v3::before{width:153px; height:85px; background-size: 153px;}
    .wrapper header.sub.v3::after{width:184px; height:118px; background-size: 184px;}
    .wrapper header.sub.v4::before{width: 196px;height: 91px;background-size: 196px;bottom: 31px;}
    .wrapper header.sub.v4::after{width: 196px;height: 118px;background-size: 196px;}
    .wrapper header.sub.v5::before{width:198px; height:81px; background-size: 198px;}
    .wrapper header.sub.v5::after{width:196px; height:115px; background-size: 196px;}

    .sub-title{margin-top:40px;}
    .sub-title span{font-size:20px; line-height: 23px;}
    .sub-title h2{font-size:28px; line-height: 32px;}

    /*탭*/
    .tab-element li{height:40px;}
    .tab-element li a{font-size:17px !important; line-height: 20px;}
}