@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */


#wrap{min-width:320px;}
img{max-width:100%;}
.inr{position:relative; max-width:1200px; width:100%; margin:0 auto;}
.inr2{position:relative; max-width:1700px; width:100%; margin:0 auto;}
.bold{font-weight:500;}

#header{position:relative; height:116px;}
#header .logo_bg{position:absolute; top:0; left:0; width:640px; height:100%; background-color:#059ca9;}
#header .logo{position:absolute; top:34px; left:0; width:245px; height:32px;}
#header .logo a{display:block;}
#header .area_util{position:absolute; top:40px; right:0; font-size:0;}
#header .area_util li{display:inline-block; margin-left:40px;}
#header .area_util li p{position:relative; padding-left:25px; font-size:14px; color:#0c676f; font-weight:400;}
#header .area_util li:nth-child(1) p:before{content:''; display:block; position:absolute; top:0; left:0; width:20px; height:23px; background:url(/images/common/icon_map.png)no-repeat 50% 50%; background-size:contain;}
#header .area_util li:nth-child(2) p:before{content:''; display:block; position:absolute; top:0; left:0; width:20px; height:23px; background:url(/images/common/icon_call.png)no-repeat 50% 50%; background-size:contain;}
#header .area_util li:nth-child(3) p:before{content:''; display:block; position:absolute; top:0; left:0; width:20px; height:23px; background:url(/images/common/icon_mail.png)no-repeat 50% 50%; background-size:contain;}
#header .area_util li p a{color:#0c676f;}
#header .area_util li span{padding-left:25px; font-size:12px; color:#666; font-weight:300;}
#header nav{position:absolute; left:0; bottom:-86px; width:100%; height:86px; background-color:rgba(0,0,0,0.5); z-index:10;}
#header nav .gnb{max-width:1200px; width:100%; line-height:86px; margin:0 auto; text-align:center; font-size:0;}
#header nav .gnb li{display:inline-block; width:20%;}
#header nav .gnb li a{display:block; color:#fff; font-size:20px; font-weight:500;}
#header nav .gnb li > ul{display:none;}
.menuopen{display:none; position:absolute; top:25px; right:0; width:30px; height:30px; z-index:100; cursor:pointer;}
.menuopen .bar{position:absolute; top:0; left:0; width:30px; height:5px; background:#000;}
.menuopen .bar.or02{top:13px;}
.menuopen .bar.or03{top:25px;}
.menuopen.on .bar{top:10px; transform:rotate(45deg); background:#000;}
.menuopen.on .bar.or02{display:none;}
.menuopen.on .bar.or03{transform:rotate(-45deg); background:#000;}
.nav_bg{display:none;position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:rgba(255,255,255,0.5);}

.area_subvisual{position:relative; width:100%; height:500px; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.area_subvisual.sub01{background-image:url(/images/contents/img_subvisual01.jpg);}
.area_subvisual.sub02{background-image:url(/images/contents/img_subvisual02.jpg);}
.area_subvisual.sub03{background-image:url(/images/contents/img_subvisual03.jpg);}
.area_subvisual .txt{position:relative; max-width:1200px; margin:0 auto; padding-top:320px;}
.area_subvisual .txt > p{font-size:36px; color:#fff;}
.area_subvisual .txt ul{margin-top:20px;}
.area_subvisual .txt ul li{position:relative; display:inline-block; padding-right:20px; font-size:16px; color:#fff; font-weight:200;}
.area_subvisual .txt ul li:before{content:''; display:block; position:absolute; top:9px; right:4px; width:4px; height:4px; border-radius:50%; background-color:#fff;}
.area_subvisual .txt ul li:last-child:before{display:none;}

.area_lnb{position:absolute; top:60px; left:0; width:100%;}
.area_lnb .lnb{width:100%; max-width:1700px; margin:0 auto; border:1px solid #bbb; box-sizing:border-box; font-size:0; text-align:center;}
.area_lnb .lnb > li{display:inline-block; width:11.11%;}
.area_lnb .lnb > li > a{display:block; padding:15px 0; font-size:16px; color:#111; border-right:1px solid #bbb; transition:all 0.5s ease 0.3s; box-sizing:border-box;}
.area_lnb .lnb > li:last-child > a{border-right:none;}
.area_lnb .lnb > li > a.on{background-color:#059ca9; color:#fff; transition:all 0.5s ease 0.3s;}
.btn_m_lnb{display:none; position:relative; width:96%; margin:0 auto; padding:17px 2%; border:1px solid #bbb; transition:all 0.5s ease 0.3s; background-color:#fff; box-sizing:border-box;}
.btn_m_lnb:before{content:''; display:block; position:absolute; top:25px; right:25px; width:11px; height:5px; background:url(/images/common/icon_deth.png)no-repeat 50% 50%; background-size:contain;}
.btn_m_lnb.active:before{transform:rotate(-180deg);}

#footer{padding:50px 0 0; background-color:#f8f8f8; text-align:center;}
#footer address{padding:30px 0;}
#footer address p{line-height:1.8; font-size:14px; font-weight:200; color:#888; word-break:keep-all;}
#footer address p > span{padding:0 10px;}
#footer address p a{color:#888;}
#footer .footer_bottom{max-width:1700px; width:100%; margin:0 auto; background-color:#000;}
#footer .footer_bottom p{padding:22px 0; font-size:14px; font-weight:300; color:#666;}

@media all and (max-width:1700px){
    .area_lnb .lnb{width:96%;}
}

@media all and (max-width:1500px){
    #header .logo_bg{width:28%;}
}

@media all and (max-width:1200px){
    .inr{width:96%;}
    .area_subvisual .txt{width:96%;}
    .area_lnb{z-index:40;}
    .area_lnb .lnb{display:none;}
    .area_lnb .lnb li{display:block; width:auto;}
    .btn_m_lnb{display:block;}
    .area_lnb .lnb > li > a{border-right:none; border-bottom:1px dashed #bbb; background:#f8f8f8;}
    .area_lnb .lnb > li:last-child > a{border-bottom:none;}
}

@media all and (max-width:980px){
    #header{height:80px;}
    #header .logo{top:26px; width:200px;}
    #header .area_util{top:25px; right:90px;}
    #header .area_util li{margin-left:20px;}
    #header .area_util li p{font-size:12px;}
    #header .area_util li span{font-size:10px;}
    .menuopen{display:block;}
    .nav_bg.on{display:block; z-index:1;}
    .area_gnb{position:fixed; left:auto; bottom:auto; top:0; right:-40%; width:40%; height:100%; background-color:#fff; transition:right 300ms ease;}
    .area_gnb.on{right:0; z-index:60; transition:right 300ms ease;}
    #header nav{position:static; width:100%; height:100%; background:none; overflow:hidden; overflow-y:auto;}
    #header nav .gnb{width:100%; height:100%; padding-top:80px; text-align:left;}
    #header nav .gnb li{display:block; width:100%; border-bottom:1px dashed #ddd; box-sizing:border-box;}
    #header nav .gnb li > a{padding:20px 25px; color:#333; line-height:1.6; font-size:16px;}
    #header nav .gnb .toggle > a{position:relative;}
    #header nav .gnb .toggle > a:before{content:''; display:block; position:absolute; top:30px; right:25px; width:11px; height:5px; background:url(/images/common/icon_deth.png)no-repeat 50% 50%; background-size:contain;}
    #header nav .gnb .toggle.on > a:before{transform:rotate(-180deg);}
    #header nav .gnb .toggle.on > ul{display:block; background-color:#f8f8f8;}
    #header nav .gnb .toggle.on > ul > li{border-bottom:1px solid #eee;}
    #header nav .gnb .toggle.on > ul > li > a{padding:20px 30px; font-size:14px; color:#666;}
    
    .area_subvisual{height:400px;}
    .area_subvisual .txt{padding-top:220px;}
}

@media all and (max-width:900px){
    #header .area_util{display:none;}
}

@media all and (max-width:780px){
    #header .logo_bg{width:35%;}
}

@media all and (max-width:680px){
    .area_gnb.on{width:50%;}
}

@media all and (max-width:640px){
    #footer address p{line-height:1.6; font-size:12px;}
    #footer address p > span{padding:0 5px;}
    #header .logo_bg{width:50%;}
    
    .area_subvisual{height:320px;}
    .area_subvisual .txt{padding-top:160px;}
}

@media all and (max-width:480px){
    #header .logo_bg{width:100%;}
    .menuopen .bar{background:#fff;}
    
    #footer .footer_bottom p{font-size:12px;}
}