@charset "utf-8";
@import url(animate.css);
@import url(board.css);

/* 
 * layout CSS Document
 * KOWEB
 */

/* 카카오맵 업데이트로 불필요한 패딩, 선이 잡혀서 제거 */
.root_daum_roughmap{padding:0 !important;}

html,body{font-size:14px;}

#wrap{position:relative; overflow-x:hidden;}
#wrap,
#header{min-width:1240px;}
*{box-sizing:border-box;}
::selection{background:rgba(124,175,224,0.5); color:#fff;}

.inr{position:relative; width:1200px; margin:0 auto;}
.inr:after{content:''; display:block; clear:both;}
.inr03{position:relative; width:100%; height: 57px; background-color: #fff; box-shadow:4px 4px 25px rgba(0,0,0,0.05);}
.inr03:after{content:''; display:block; clear:both;}

#header{position: relative; z-index:999; width:100%; height:93px; font-family:Poppins, Noto Sans KR;}
#header .inr{position:relative; width:100%; max-width:1200px; margin:0 auto;}
#header .logo{position:absolute; top:29px; left:0;}
#header .logo > a{display:block; width:134px; height:40px; background:url(/images/common/logo.png) no-repeat; background-size:100% 100%; text-indent:100%; font-size:0;}

/* gnb */
nav > .gnb{margin-left:290px;}
nav > .gnb.en{margin-left:210px;}
nav > .gnb:after{content:''; display:block; clear:both;}
nav > .gnb > li{float:left; position:relative; padding:34px 42px 4px 42px;}
nav > .gnb > li > a{display:block; position:relative; padding-bottom:28px; font-size:18px; color:#333; font-weight:400; text-align:center;}
nav > .gnb > li > ul{display:none; position:absolute; top:80px; left:0px; z-index:90; width:100%; min-width:170px; box-sizing:border-box; box-shadow:4px 4px 25px rgba(0,0,0,0.05); border:1px solid #555;}
nav > .gnb > li > ul > li > a{display:block; position:relative; padding:15px 25px; color:#444; letter-spacing:-1px; font-weight:400; font-size:14px; border-bottom:1px solid #e4e4e4; background:rgba(255,255,255,1); }
nav > .gnb > li > ul > li:last-child > a{border-bottom:0;}
nav > .gnb > li > ul > li > a:hover,
nav > .gnb > li > ul > li > a:focus{color:#888;}
nav > .gnb > li > a.open{display:none;}
nav > .gnb > ul > ul{position:absolute; display:none !important;}

/* mobile gnb */ 
.btn_m_menu{display:none;}

/* 언어선택 */
.area_util02{position:absolute; top:30px; left:50%; margin-left:-600px; width:1200px; z-index:50; font-weight: 500; transition:all 0.3s ease 0s;}'
.area_util02:after{content:""; display:block; clear:both;}
.area_util02 > ul{position:absolute; top:0px; right:0px;}
.lang_list{position:absolute; top:0px; right:80px; padding:3px 0 0 10px; width:60px; height:32px; line-height:32px; border:1px solid #ccc; overflow:hidden; transition:all 0.3s ease 0s;}
.lang_list:hover{height:85px; background-color: #fff;}
.lang_list dt{width:55px; height:25px; margin:0 auto; background:url("/images/common/img_arrow.png") no-repeat 65% 50%;}
.lang_list:hover dt a{color:#0c4da2;}
.lang_list dt a{display:block; color:#2c2c2c; font-size:13px; line-height:25px;}
.lang_list li{margin:0 auto; width:60px; height:22px;}
.lang_list li:last-child{border-top:0 !important;}
.lang_list li a{display:block; font-size:13px; color:#2c2c2c; line-height:25px;}
.lang_list li a:hover{color:#777;}

/* 전체메뉴 */
.area_util{position:absolute; top:30px; left:50%; margin-left:-600px; width:1200px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.area_util:after{content:""; display:block; clear:both;}
.area_util > a{display:block; position: absolute; top:-10px; right:0px; width:50px; height:50px; font-size:0; text-indent: 100%; background:url(/images/common/btn_sitemap.png) no-repeat 50% 50%;}
#header .area_util.close > a{position:fixed; top:20px; right:50%; margin-right:-600px; border:1px solid #222; background-image:url(/images/common/btn_close.png);}
.inner{position:absolute; z-index:999; width:100%; margin:0 auto;}
.area_allmenu .inner > h2{min-width:1200px; font-size:3rem; color:#1353a5; font-weight:400; position:relative; margin:4.5em auto 3em auto; overflow:hidden; display:block; text-align:center; -webkit-animation-delay:0s; -moz-animation-delay:0s; -o-animation-delay:0s; -ms-animation-delay:0s; animation-delay:0s;}
.area_allmenu{position:fixed; display:block; z-index:999; width:100%; height:100%; background-color:#f9f9f9; overflow-x:scroll;}
.area_allmenu ul{float:right;}
.area_allmenu ul li{float:left; position:relative; top:-60px;}
.area_allmenu ul li a{text-decoration:none; color:rgba(255,255,255,0.6); font-weight:700; font-size:14px; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; -ms-transition:all 0.2s ease; transition:all 0.2s ease;}
.area_allmenu ul li a:hover{color:#fff;}
.area_sitemap{width:1300px; box-sizing:border-box; margin:0 auto; padding:0;}
.area_sitemap .gnb{float:inherit; width:100%; margin:0 auto !important;}
.area_sitemap .gnb:after{content:''; display:block; clear:both;}
.area_sitemap .gnb > li{float:left; width:calc(100% / 4 - 12.1px); min-height:310px; background:#fafafa; margin-left:15px; padding:0 !important;}
.area_sitemap .gnb > li:first-child{margin-left:0px;}
.area_sitemap .gnb > li > a{display:block; position:relative; z-index:6; width:100%; padding:20px 0px; background-color:#1353a5 !important; font-size:1.7rem; font-weight:400; color:#fff; text-align:center; letter-spacing:-1px; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > a span{position:relative; z-index:5; color:#fff;}
.area_sitemap .gnb > li > a:after{content:''; display:block; position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; background:#98a4b8; transition:all 0.4s ease-out 0s;}
.area_sitemap .gnb > li > a:hover,
.area_sitemap .gnb > li:hover > a{color:#fff;}
.area_sitemap .gnb > li > a:hover:after,
.area_sitemap .gnb > li:hover > a:after{transform:scaleX(1);}
.area_sitemap .gnb > li > ul{padding-top:100px !important; margin-top:30px !important; width:100%; min-height: 230px; display:block !important; background-color: #fff;}
.area_sitemap .gnb > li > ul > li{margin-bottom:10px; padding-left:0; width:100%;}
.area_sitemap .gnb > li > ul > li > a{display:inline-block; position:relative; width:100%; padding-left:30px; font-size:1.1rem; font-weight:300; color:#666; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > ul > li > a:before{display:none;}
.area_sitemap .gnb > li > ul > li > a:hover{color:#1353a5; font-weight:600; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > a.open{display:none;}
#content > .area_sitemap > a.btn_m_menu{position:absolute;}
#content > .area_sitemap > a.btn_m_menu span{display:none;}
#content > .area_sitemap > a.btn_m_menu:before,
#content > .area_sitemap > a.btn_m_menu:after{content:''; display:none;}

/* footer */
#footer{position:relative; clear:both; background-color:#2e2e2e; text-align:left; font-family:Poppins, Noto Sans KR;}
#footer .inr{position:relative; max-width:1200px; box-sizing:border-box; margin:0 auto; padding:110px 0px; text-align:left;}
#footer .inr02{position:relative; width:100%; height:80px; line-height:80px; box-sizing:border-box; margin:0 auto; text-align:left; background-color:#151515;}
#footer ul{position:relative; width:1200px; margin:0 auto;}
#footer ul > li{display:inline-block; position:relative; padding:0 20px;}
#footer ul > li:first-child{padding-left:0;}
#footer ul > li > a{display:inline-block; color:rgba(255,255,255,0.53) !important; font-size:14px; font-weight:300; letter-spacing:-1px;}
#footer ul > li > a:after{content:''; display:block; position:absolute; top:46%; right:0px; margin-right:-3px; width:1px; height:7px; background:rgba(253,253,253,0.14); transform:rotate(-45deg);}
#footer ul > li:last-child > a:after{display:none;}
#footer a{color:rgba(255,255,255,0.35) !important;}
#footer address{width:100%; color:rgba(255,255,255,0.35); line-height:1.7em; font-size:14px; font-weight:300; word-break:keep-all;}
#footer address span{display:inline-block; margin-left:20px;}
#footer address span:before{content:''; margin-right:20px; display:inline-block; width:1px; height:7px; background:rgba(186,186,186,0.26);}
#footer address span:first-child{margin-left:0;}
#footer address span:first-child:before{display:none;}
#footer.en address span:first-child{display:block;}
#footer.en address span:nth-child(2){margin-left:0;}
#footer.en address span:nth-child(2):before{display:none;}
#footer p{margin-top:15px; font-size:12px; color:rgba(255,255,255,0.5); font-weight:400;}

.btn_top{display:block; overflow:hidden; position:absolute; top:100px; right:0px; width:53px; height:53px; border:1px solid rgba(255,255,255,0.35);}
.btn_top span{display:block; margin:0 auto; width:13px; height:53px; text-indent:100%; font-size:0px; background:url(/images/common/btn_top.png) no-repeat 50% 50%;}

/* lnb */
.area_lnb{position:relative; width:100%;}
.area_lnb .inr{padding:0;}
.area_lnb .lnb{margin:0 auto; width:1200px; text-align:center;}
.area_lnb .lnb > li{display:inline-block; vertical-align:middle;}
.area_lnb .lnb > li > a{display:inline-block; padding:16px 0; margin-right:25px; font-size:1.1rem; font-weight:400; color:#888;}
.area_lnb .lnb > li > a:after{content:''; margin-left:25px; vertical-align: middle; display:inline-block; width:2px; height:2px; background-color: #111; border-radius: 50%;}
.area_lnb .lnb > li:last-child > a{margin-right:0;}
.area_lnb .lnb > li:last-child > a:after{display:none;}
.area_lnb .lnb > li > a.on {font-weight:600; color:#0c4da2;}

/* sub visual */
.area_subVisual{position:relative; width:100%; height:190px; padding-top:90px; color:#fff; text-align: center; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.area_subVisual.sub01{background-image:url(/images/content/img_sub_visual01.jpg);}
.area_subVisual.sub02{background-image:url(/images/content/img_sub_visual02.jpg);}
.area_subVisual.sub03{background-image:url(/images/content/img_sub_visual03.jpg);}
.area_subVisual.sub04{background-image:url(/images/content/img_sub_visual04.jpg);}
.area_subVisual .txt{z-index:20; position:relative; width:1200px; margin:0 auto; line-height:1.8em;}
.area_subVisual .txt em{display:block; font-size:35px; font-weight:200;}

/* 버튼 */
.btn_tel{display:block; margin-bottom:5px; color:#2759ab !important; font-weight:500; font-size:19px; letter-spacing:-0.5px;}
.btn_tel:before{display:inline-block; content:''; margin:-2px 5px 0 0; vertical-align:middle; width:20px; height:20px; background:url(/images/main/img_map02.png) no-repeat 50% 50%; background-size:100% 100%;}

@media all and (max-width:1280px){
    #header .area_util.close > a{right:40px; margin-right:0;}
}

@media all and (max-width:1024px){
    .area_sitemap .gnb > li{width:calc(100% / 4 - 15.1px);}
    .area_sitemap .gnb > li:nth-child(3n+1){margin-left:15px; clear: none;}
}

@media all and (max-width:600px){
    .area_sitemap .gnb > li:nth-child(2n+1),
    .area_sitemap .gnb > li:nth-child(3n+1){margin-left:15px; clear: none;}
}