﻿@charset "utf-8";

body, input, textarea, select, button { font-family:'Noto Sans KR', sans-serif; font-weight:400; }
h1, h2, h3, h4, h5, h6 { color:#000; }
b, strong { font-weight:500; }
img { max-width:100%; }

/* */
html, body { height:100%; }
html { letter-spacing:-0.05em; color:#666; font-size:16px; }
img { max-width:100%; }
.comBg { background-color:#fff; }
.grayBg { background-color:#eff1f6; }
.red { color:#ff0404 !important;}
.cred { color:#f05c4a !important; }
.rred { color:#ce1701 !important; }
.orange { color:#ff7a01 !important; }
.point_color { color:#2e7bd9 !important; }
.point_color2 { color:#2d598f !important; }
.underline { text-decoration:underline !important; }
.borderline { border-bottom:1px solid #666; }
.borderline:hover { text-decoration:none !important; }
.txt_c1 { color:#999 !important; }
.center { text-align:center !important; }
.right { text-align:right !important; }
.left { text-align:left !important; }
.hText { position:absolute; z-index:-1; overflow:hidden; width:0; height:0; opacity:0; }

/* loading */
.loading { display:block; height:40px; background:url('../images/common/loadings.png') no-repeat 50% 50%; background-size:20px auto; }
.loadings { z-index:10000; position:fixed; top:-50px; left:-50px; bottom:-50px; right:-50px; background-color:rgba(255,255,255,0.6); animation:loading_show 0.2s 1 linear; -webkit-animation:loading_show 0.2s 1 linear; }
.loadings>div { width:34px; height:34px; position:fixed; left:50%; margin:-17px 0 0 -17px; top:50%; }
.loadings>div>i { display:block; width:100%; height:100%; top:0; left:0; background:url('../images/common/loadings.png') no-repeat 0 0; background-size:100% auto; -webkit-animation:loading 1s infinite linear; animation:loading 1s infinite linear; }
.loadings.inner { position:absolute; top:0; left:0; bottom:0; right:0; }
.loadings.inner>div { position:absolute; }
@keyframes loading {
	0% { transform:rotate(0); }
	100% { transform:rotate(360deg); }
}
@-webkit-keyframes loading {
	0% { -webkit-transform:rotate(0); }
	100% { -webkit-transform:rotate(360deg); }
}
@keyframes loading_show {
	0% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes loading_show {
	0% { opacity:0; }
	100% { opacity:1; }
}

/* focus navigator */
#skipToContent { z-index:999; top:0; left:0; right:0; text-align:center; position:absolute; background-color:#000; }
#skipToContent a { display:block; padding:0 10px; height:1px; margin-top:-1px; overflow:hidden; color:#fff; }
#skipToContent a:focus,
#skipToContent a:active { height:auto; padding:10px; margin-bottom:0; color:#fff; font-weight:bold; }

/* dropdownlist */
.dropLst { display:inline-block; position:relative; vertical-align:middle; color:#666; }
.dropLst .txt { position:relative; display:block; text-align:left; text-decoration:none; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:50px; padding:6px 50px 7px 15px; box-sizing:border-box; color:#333; }
.dropLst .hidradio { opacity:0; filter:alpha(opacity=0); position:absolute; z-index:-1; top:5px; left:5px; }
.dropLst .dlst { display:none; position:absolute; top:100%; z-index:9; min-width:100%; box-shadow:1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.2); }
.dropLst.bottom .dlst { top:auto; bottom:100%; }
.dropLst .dlst.aright { right:0; }
.dropLst ul { margin-top:0; background-color:#fff; max-height:300px; padding:0; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; -webkit-box-sizing:border-box; *position:relative; }
.dropLst ul > li { position:relative; }
.dropLst ul > li + li { border-top:1px solid #fff; }
.dropLst ul > li > label { display:block; position:relative; cursor:pointer; }
.dropLst ul > li > label > span { display:block; }
.dropLst ul > li > a:hover, .dropLst ul > li > label:hover > span, .dropLst ul > li > label.hover > span { background-color:#f3f3f3; }
.dropLst .txt, .dropLst ul { border:1px solid #e5e5e5; }
.dropLst .txt, .dropLst li span, .dropLst li a { line-height:33px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropLst li span, .dropLst li a { padding:5px 10px; line-height:30px; }
.dropLst li a.selected, .dropLst li a.on, .dropLst li label.on span { background-color:#f3f3f3; color:#000; font-weight:bold; }
.dropLst li span, .dropLst li a { display:block; }
.dropLst .txt { background:url('../images/common/sel_bg.png') no-repeat 100% 50%; }
.dropLst .txt.active,
.dropLst .txt.on { border-color:#333; background-image:url('../images/common/sel_bg_f.png'); }


/* layout */
.clear { clear:both; display:block; }
.vscroll_area { overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hscroll_area { overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#skipToContent { min-width:100%; }
.wrap { height:100%; min-width:320px; }
.wrap .areas { min-height:100%; margin-bottom:-330px; }
.wrap .container { padding-bottom:330px; }
body.scroll_off { overflow:hidden; }

/* */
.slick_slider { opacity:0; -webkit-transition:opacity 0.3s; transition:opacity 0.3s; }
.slick_slider:after { content:""; display:block; clear:both; }
.slick_slider.slick-initialized { opacity:1; }
.slick_slider > .item:not(:first-of-type) { position:absolute; opacity:0; }


/* */
.gnb_modal { visibility:hidden; opacity:0; position:fixed; top:100px; bottom:0; left:0; right:0; z-index:9; background-color:rgba(0,0,0,0.3);
  -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s; transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s; -ms-touch-action:none; touch-action:none; }
.gnb_on .gnb_modal { opacity:1; visibility:visible; -webkit-transition-delay:0s; transition-delay:0s; }
.gnb_bg { height:309px; visibility:hidden; opacity:0; position:fixed; top:-600px; left:0; right:0; z-index:10; border-bottom:1px solid rgba(51,96,133, 0.5);
   -webkit-transition:top 0.2s cubic-bezier(0, 0, 0.25, 1), opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s;
   transition:top 0.2s cubic-bezier(0, 0, 0.25, 1), opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s;
	 /*background-color:#f4f4f4;*/
	 background-color: rgba( 244, 244, 244, 0.95 );
	 background-image: url('../images/common/2depth_bg.png');
	 background-repeat:no-repeat;
	 background-position:right 150px bottom;
	 background-size:230px;
   }
.gnb_on .gnb_bg { top:0px; opacity:1; visibility:visible; -webkit-transition-delay:0s; transition-delay:0s; }
.gnb_bg > div { margin:0 auto; height:100%; padding-right:150px; }

/* */
.header { /* height:100px; */ }
.header .sec { height:100px; position:fixed; z-index:11; left:0; right:0; background-color:rgba(0, 62, 114, 0.9); -webkit-transition:background-color 0.3s; transition:background-color 0.3s; }
.header .sec:after { content:""; position:absolute; bottom:0; height:1px; left:0; right:0px; background-color:#336085; -webkit-transition:all 0.3s; transition:all 0.3s; }
/*
.header.fix .sec { background-color:#fff; }
.header.fix .sec:after { background-color:rgba(51,96,133, 0.5); }
*/
.gnb_on .header .sec:after { opacity:0; }
.header .gnb_nav { padding-left:320px; padding-right:150px; position:relative; }
.header .title { position:absolute; left:50px; top:12px; }
.header .title > a { display:block; position:relative; }
.header .title img { display:block; -webkit-transition:opacity 0.2s; transition:opacity 0.2s; }
.header .title img.b { position:absolute; opacity:0; top:0; left:0; }
/*
.header.fix .title img.b { opacity:1; }
.header.fix .title img.w { opacity:0; }
*/
.header .q, .header .q:visited { position:absolute; right:0; top:0; background-color:#ffdc10; line-height:100px; text-align:center; width:150px; font-size:18px; color:#112b51;
						background-size: 202% 100%;	
						background-position:0 0; 
						background-image: -webkit-linear-gradient(left, #ffdc10 50%, #ffc657 50%);	
						background-image: linear-gradient(to right, #ffdc10 50%, #ffc657 50%);
						-webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
						transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
					}
.header .q:hover{background-position:-99% 0; text-decoration:none;}	
.header .q:before { content:""; display:inline-block; vertical-align:middle; position:relative; top:-1px; width:25px; height:18px; background:url('../images/common/iconset.png') no-repeat -600px 0; margin-right:6px; }



.header .btn_gnb { position:absolute; top:0; display:none; right:100px; width:100px; height:100px; overflow:hidden; }
.header .btn_gnb:before { content:""; position:absolute; width:33px; height:25px; top:50%; left:50%; margin:-11px 0 0 -17px; background:url('../images/common/iconset.png') no-repeat 0 -50px; background-size:400px auto; }
.header .btn_gnb > em { opacity:0; position:absolute; }
.header .gnb_close { display:none; border-top:1px solid transparent; line-height:50px; text-align:center; font-size:15px; color:#638ab5; }
.header .gnb_close:before { content:""; display:inline-block; vertical-align:middle; position:relative; top:-1px; margin-right:6px; width:18px; height:18px; background:url('../images/common/iconset.png') no-repeat -50px -50px; background-size:400px auto; }
.header .nav { position:relative; padding-right:230px; text-align:center; }
.header .nav .gnb { position:relative; display:inline-block; vertical-align:top; font-size:0; white-space:nowrap; }
.header .nav .gnb > li { font-size:1rem; display:inline-block; vertical-align:top; padding:0 25px; white-space:normal; position:relative; }
.header .nav .gnb > li + li { background:url('../images/common/gnb_br.jpg') no-repeat 0 37px; }
.header .nav .tnav { display:block; height:100px; position:relative; font-size:0; }
.header .nav .tnav:after { content:""; display:inline-block; height:100%; vertical-align:middle; }
.header .nav .tnav:before { content:""; position:absolute; bottom:0; left:50%; width:0; height:5px; background-color:#397dc7; -webkit-transition:left 0.2s ease-out, width 0.2s ease-out; transition:left 0.2s ease-out, width 0.2s ease-out; }
.header .nav .tnav > em { display:inline-block; vertical-align:middle; line-height:1.1; font-size:20px; font-weight:bold; color:#fff; -webkit-transition:0.3s ease-out; transition:0.3s ease-out; }
/*.header.fix .nav .tnav > em { color:#003d73; }*/
.header .nav .on .tnav:before,
.header .nav .hover .tnav:before { left:0; width:100%; }
.header .nav .snav {position:relative; padding-top:15px; font-size:16px; color:#012e5f; opacity:0; visibility:hidden; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s; transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s; }
.header .nav .snav:after{content:"";display:block;position:absolute;width:1px;height:150px;left:-27px;top:35px;background:#d5d2d2;}
.header .nav .snav.first:after{background:none;}
.header .nav .snav > li { padding-top:20px; line-height:16px; }
.header .nav .snav > li a { display:block; -webkit-transition:0.3s ease-out; transition:0.3s ease-out;font-weight:bold; }
.header .nav .snav > li a:hover { color:#397dc7; }
.gnb_on .header .nav .snav { opacity:1; visibility:visible; -webkit-transition-delay:.1s; transition-delay:.1s; }
.header .nav .opt { position:absolute; right:0; top:0; padding-right:18px; font-size:13px; color:#638ab5; }
.header .nav .opt:after { content:""; display:block; clear:both; }
.header .nav .opt > li { float:left; line-height:100px; }
.header .nav .opt > li + li { padding-left:18px; }
.header .nav .opt > li > a:before { content:""; display:inline-block; vertical-align:middle; position:relative; top:-1px; background-image:url('../images/common/iconset.png'); background-repeat:no-repeat; margin-right:8px; }
.header .nav .opt > li > a:hover { color:#638ab5; }
.header .nav .opt .lang:before { width:24px; height:24px; background-position:-100px 0; }
.header .nav .opt .lang:hover{color:#8ab2eb}
.header .nav .opt .lang:hover:before {background-position:0 0;}
.header .nav .opt .fb:before { width:11px; height:22px; background-position:-400px 0; }
.header .nav .opt .fb:hover{color:#8ab2eb}
.header .nav .opt .fb:hover:before { background-position:-300px 0; }

/* */
.content .sec { margin:0 auto; max-width:1280px; }


/* */
.sticky_top { position:fixed; bottom:10px; right:10px; z-index:8; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
.sticky_top.off { position:absolute; bottom:auto; margin-top:-10px; }
.sticky_top.up { margin-bottom:40px; }
.sticky_top .goTop { display:none; width:81px; height:81px; }
.sticky_top .btn_top { position:relative; overflow:hidden; display:block; width:100%; height:100%; background:url('../images/common/iconset.png') no-repeat -500px -600px; border-radius:50%; box-shadow:1px 1px 2px rgba(0,0,0,0.2); }
.sticky_top .btn_top > em { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; }

/* */
.footer { position:relative; z-index:1; background-color:#2a2a2a; }
.footer .sec { max-width:1240px; margin:0 auto; }
.footer .fcnt { height:330px; display:table; table-layout:fixed; width:100%; color:#adadad; }
.footer .fcnt > li { display:table-cell; vertical-align:top; }
.footer .fcnt > li + li {position:relative; }
.footer .fcnt > li + li:before{content:"";position:absolute;top:59px;left:0;height:190px;width:1px;background:#404040;}
.footer .fcnt > li + li:nth-child(2):before{display:none;}

.footer .fcnt > li:first-child { padding-top:52px; padding-right:20px; padding-left:10px; }
.footer .fcnt .cnt { text-align:left; font-size:12px; }
.footer .fcnt .cnt .logo { display:block; }
.footer .fcnt .cnt > address { padding-top:30px; font-size:14px; }
.footer .fcnt .cnt .tel > span { display:inline-block; }
.footer .fcnt .cnt .tel > span + span { padding-left:1em; }
.footer .fcnt .cnt .lang { padding:24px 0; }
.footer .fcnt .cnt .lang > i { display:inline-block; font-style:normal; padding:0 1em; font-size:0.8em; vertical-align:top; }
.footer .fcnt .cnt .cp{}
.footer .fcnt a:hover { text-decoration:underline; }
.footer .fcnt dl {padding:58px 00px 10px 0px; font-size:16px; text-align:center;}

.footer .fcnt > li:nth-child(2){width:20%}
.footer .fcnt > li:nth-child(3){width:20%}
.footer .fcnt > li:nth-child(4){width:14%}
.footer .fcnt > li:nth-child(5){width:14%}

/*
.footer .fcnt > li:nth-child(4) dl{padding-left:85px;}
.footer .fcnt > li:nth-child(5) dl{padding-left:78px;}
*/
.footer .fcnt dl > dt { font-size:20px; color:#fff; font-weight:500; line-height:1.1; padding-bottom:10px; }
.footer .fcnt dl > dd { padding-top:1em; line-height:1.2; }

/*-webkit-transform:translateX(-50%); transform:translateX(-50%); */

@media all and (max-width:1440px) {
	/* */
	.header .title { left:25px; }
	.header .gnb_nav { padding-left:295px; padding-right:100px; }
	.header .q { width:100px; }
	.header .nav { padding-right:100px; }
	.header .nav .opt > li > a > em { display:none; }
	.header .nav .opt > li > a:before { margin-right:0; }
	.header .nav .opt > li > a { width:26px; display:block; }


}
@media all and (max-width:1279px) {
	/* */
	.header .title { left:15px; }
	.header .gnb_nav { padding-left:280px; }
	.header .nav .gnb > li { padding:0 15px; }

	/* */
	.footer .fcnt > li:first-child { padding-left:15px; width:28%; }
	.footer .fcnt .cnt .logo { max-width:86%; }
	.footer .fcnt dl { padding-left:15px; font-size:14px; }
	.footer .fcnt dl > dt { font-size:16px; }

}

@media all and (min-width:1200px) {
	/* */
	.header .nav { max-height:none !important; }
	.header .nav .snav { display:block !important; height:auto !important; }
	.header .nav .gnb { max-height:100px; overflow:hidden; }
	.gnb_on .header .nav .gnb { max-height:none; padding-bottom:100px; overflow:visible; }
}
@media all and (max-width:1199px) {
	/* */
	.gnb_on { overflow:hidden; }
	.gnb_on .gnb_bg { display:none !important; }
	.header .btn_gnb { display:block; }
	.header .nav { position:absolute; opacity:0; visibility:hidden; padding-right:0; left:0; right:0; top:100px; overflow-y:auto; -webkit-overflow-scrolling:touch; -webkit-transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s; transition:opacity 0.3s cubic-bezier(0, 0, 0.25, 1), visibility 0s cubic-bezier(0.9, 0, 0, 0.9) 0.3s; }
	.header .nav .gnb { display:block; }
	.header .nav .gnb > li { display:block; padding:0; }
	.header .nav .gnb > li + li { border-top:1px solid transparent; background-image:none; }
	.header .nav .tnav { height:50px; -webkit-transition:background 0.2s; transition:background 0.2s; }
	.header .nav .tnav:before { display:none; }
	.header .nav .tnav > em { color:#003d73; font-size:16px; }
	.header .nav .on .tnav,
	.header .nav .tnav.selected { background-color:#397dc7; }
	.header .nav .on .tnav > em,
	.header .nav .tnav.selected > em { color:#fff; }
	.header .nav .snav { padding-top:0; display:none; overflow:hidden; background-color:#f4f4f4; }
	.header .nav .on .snav { display:block; }
	.header .nav .snav > li { padding-top:0; line-height:normal; border-top:1px solid transparent; }
	.header .nav .snav > li > a { display:block; font-size:0; height:45px; }
	.header .nav .snav > li > a:after { content:""; display:inline-block; vertical-align:middle; height:100%; }
	.header .nav .snav > li > a > em { display:inline-block; vertical-align:middle; line-height:1.1; font-size:15px; }
	.header .nav .opt { border-top:1px solid transparent; padding-right:0; display:block; position:static; }
	.header .nav .opt > li { width:50%; line-height:normal; box-sizing:border-box; }
	.header .nav .opt > li + li { border-left:1px solid transparent; }
	.header .nav .opt > li > a { width:auto; line-height:50px; }
	.header .nav .opt > li > a > em { display:inline; padding-left:8px; font-size:12px; }
	.header .nav .opt .lang:before { width:19px; height:18px; background-position:-100px 0 !important; background-size:400px auto; }
	.header .nav .opt .fb:before { width:9px; height:18px; background-position:-250px 0 !important; background-size:400px auto; }
	.header .gnb_close { display:block; }
	.header .q { line-height:1; height:100px; box-sizing:border-box; padding-top:30px; }
	.header .q:before { display:block; margin:0 auto 7px; width:20px; height:13px; background-position:-350px 0; background-size:400px auto; }
	
	.gnb_on .header .nav { opacity:1; visibility:visible; -webkit-transition-delay:0s; transition-delay:0s; background-color:#fff; }	
	.gnb_on .header .nav .opt > li + li { border-left-color:#d5dee6; }
	.gnb_on .header .nav .opt,
	.gnb_on .header .gnb_close,
	.gnb_on .header .nav .gnb > li + li { border-top-color:#d5dee6; }
	.gnb_on .header .nav .snav > li { border-top-color:#e5e5e5; }


	/* */
	.sticky_top .goTop { width:61px; height:61px; }
	.sticky_top .btn_top { background-size:400px auto; background-position:-300px -300px; }
}


@media all and (max-width:999px) {
	/* */
	.header { /* height:60px; */ }
	.header .sec { height:60px; }
	.header .nav { top:60px; }
	.header .gnb_nav { padding-right:120px; padding-left:180px; }
	.header .btn_gnb { height:60px; width:60px; right:60px; }
	.header .title { top:11px; }
	.header .title img { width:126px; }
	.header .q { font-size:13px; padding-top:15px; height:60px; width:60px; }
	.gnb_on .header .sec:after { opacity:1; }
	.gnb_modal { top:60px; }


	/* */
	.wrap .areas { margin-bottom:-210px; }
	.wrap .container { padding-bottom:210px; }


	/* */
	.footer .fcnt { height:210px; }
	.footer .fcnt > li:first-child { padding-top:25px; }
	.footer .fcnt > li:first-child ~ li { display:none; }
	.footer .fcnt .cnt { text-align:center; font-size:11px; }
	.footer .fcnt .cnt .logo { margin:0 auto; max-width:139px; }
	.footer .fcnt .cnt > address { font-size:1em; padding-top:22px; }
	.footer .fcnt .cnt .lang { padding:1em 0; }
	.footer .fcnt .cnt .cp { font-size:9px; }
	.footer .fcnt .cnt .cp > br { display:none; }
}

/* */
