@charset "utf-8";

/* common */
html,body,div,span,applet,object,iframe,h1,h2,h3, h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
 margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
ol,ul,li {list-style: none}
blockquote,q {quotes: none}
blockquote:before,blockquote:after,q:before,q:after  {content: ''; content: none;}
ins {background-color: #ff9; color: #000; text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor: help}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #c7c7c7; margin: 1em 0; padding: 0;}
*{margin:0; padding:0; }
li{list-style:none;}
img {border:0 none;}
.hidden {position:absolute; left:-9999px; top:-9999px; width:0; height:0; font-size:0; line-height:0;}
form {min-width: auto;}
input[type="image"] {border:0 none;}
button, input[type="submit"] {cursor: pointer; border:0 none;}
button::-moz-focus-inner {border: 0 none; padding: 0;}
body {background-color:#ffffff; word-wrap:break-word; word-break:break-all;  zoom:1; -webkit-text-size-adjust: 100%;}
body,html {position:relative; height:100%;}

body,th,td,input,select,textarea,button {font-weight:400; font-size:14px; line-height:1.5; font-family: 'Noto Sans CJK KR', 'NanumSquare','Malgun Gothic', '맑은 고딕', sans-serif; color:#333; word-break: keep-all;} /* color값은 디자인가이드에 맞게사용 */
a{font-family: 'Noto Sans CJK KR', 'NanumSquare','Malgun Gothic', '맑은 고딕', sans-serif;text-decoration:none; color:#555; transition:.3s;} /* color값은 디자인가이드에 맞게사용 */

strong {font-weight: bold;}
@media screen and (min-width: 768px) {
    body,th,td,input,select,textarea,button {font-size:16px; }
}


/* */
.t_c {text-align: center !important;}
.t_l {text-align: left !important;}
.t_r {text-align: right !important;}
.mt20 {margin-top: 20px !important;}
.mb20 {margin-bottom:  20px !important;}
.color_666 {color: #666 !important;}

@media screen and (min-width: 1201px) {
	.pc_none {display: none !important;}
}
@media screen and (max-width: 1200px) {
	.pc_only {display: none !important;}
}
@media screen and (min-width: 768px) {
	.mb_only {display: none !important;}
}
@media screen and (max-width: 767px) {
	.mb_none {display: none !important;}
}

.inner {margin:0 auto; max-width:1200px;padding: 0;}
@media screen and (max-width:1200px) { 
	.inner {width:100%;padding: 0 20px;;}
}

/* --- placeholder */
input[type="text"]::placeholder {color: #999; opacity: 1; /* Firefox */}
input[type="text"]:-ms-input-placeholder {color: #999;}
input[type="text"]::-ms-input-placeholder {color: #999;}

textarea::placeholder {color: #999; opacity: 1; /* Firefox */}
textarea:-ms-input-placeholder {color: #999;}
textarea::-ms-input-placeholder {color: #999;}

/* margin */
body .mr20 { margin-right: 1.25rem;}
body .mt10 { margin-top: .625rem;}
body .mt20 { margin-top: 1.25rem;}
body .mt30 { margin-top: 1.875rem;}
body .mt35 { margin-top: 2.1875rem;}
body .mt40 { margin-top: 2.5rem;}
body .mt50 { margin-top: 3.125rem;}
body .mt60 { margin-top: 3.75rem;}
body .mt65 { margin-top: 4.0625rem;}
body .mt80 { margin-top: 5rem;}
body .mt100 { margin-top: 6.25rem;}

body .mb5 { margin-bottom: .3125rem;}
body .mb10 { margin-bottom: .625rem;}
body .mb15 { margin-bottom: .9375rem;}
body .mb20 { margin-bottom: 1.25rem;}
body .mb30 { margin-bottom: 1.875rem;}
body .mb40 { margin-bottom: 2.5rem;}
body .mb50 { margin-bottom: 3.125rem;}
body .mb60 { margin-bottom: 3.75rem;}
body .mb80 { margin-bottom: 5rem;}
body .mb100 { margin-bottom: 6.25rem;}
body .mb120 { margin-bottom: 7.5rem;}
@media screen and (max-width:768px) {
    body .mt40 { margin-top: 2.1875rem;}
    body .mt50 { margin-top: 2.5rem;}
    body .mt60 { margin-top: 2.5rem;}
    body .mt65 { margin-top: 3.125rem;}
    body .mt80 { margin-top: 3.75rem;}
    body .mt100 { margin-top: 5rem;}
}
.fs_15 {font-size: 15px !important;}
.fs_20 {font-size: 20px !important;}
.fs_24 {font-size: 24px !important;}
.fs_32 {font-size: 32px !important;}

@media screen and (max-width:768px) {
    .fs_20 {font-size: 18px !important;}
    .fs_24 {font-size: 20px !important;}
    .fs_32 {font-size: 24px !important;}
}

@media screen and (max-width:575px) {
    .fs_32 {font-size: 22px !important;}
}

.fw_bold {font-weight: bold;}

/* layer */
.layer {display:none; position:fixed; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}
.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 350px; height:auto;  background-color:#fff; border: 3px solid #555; z-index: 10;}
.pop-layer .pop-container {padding: 20px 25px;}
input[type="text"],input[type="password"],textarea,input[type="submit"] {-webkit-appearance: none; -webkit-border-radius: 0;}
.pop-layer .board-password-txt {font-size:13px; line-height:18px; text-align:center;}
.pop-layer .board-password-input {margin:40px; text-align:center;}
.pop-layer .board-password-input label{display:inline-block; margin:0 10px 0 0;	font-size:12px; color:#333; vertical-align:middle;}
.pop-layer .board-password-input input{display:inline-block; padding:0 0 0 8px; width:150px; height:26px; border:1px solid #d8d8d8; color:#555; vertical-align:middle;}
	/* btn */
.pop-layer .board-password-btn {text-align:center;}
.pop-layer .board-password-btn a{display:inline-block; margin:0 5px; padding:10px 30px; box-sizing:border-box; text-decoration:none; font-size:13px;}
.pop-layer .board-password-btn .board-password-btn-list {background:#d3d3d3; color:#464646;}
.pop-layer .board-password-btn .board-password-btn-ok {background:#111; color:#fff;}

/* ---------------------------------- layout */
html, body {height:100%;}
#wrapeer {overflow:hidden; width:100%;}

@media screen and (min-width:321px) { 
body {overflow-x:hidden;} 
}
/*
	header
*/
#header {
    position:fixed;
    top:0;
    width:100%;
    border-bottom:1px solid rgba(255, 255, 255, .2);
    background: rgba(255,255,255, .8);
    z-index:1000;
}
html:not(.gnb-on) .sub #header.fixed {background: rgba(255,255,255, 1);border-bottom:1px solid #ddd;} 
.main #header {
     -webkit-backface-visibility: hidden;
    background-color: rgba(42,150,240,.8);
    background-image: -webkit-linear-gradient(left,rgba(109,211,240,.8),rgba(42,150,240,.8));
    background-image: -moz-linear-gradient(left,rgba(109,211,240,.8),rgba(42,150,240,.8));
    background-image: -ms-linear-gradient(left,rgba(109,211,240,.8),rgba(42,150,240,.8));
    background-image: -o-linear-gradient(left,rgba(109,211,240,.8),rgba(42,150,240,.8));
}
#header:before {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    background: #fff;
/*
    -webkit-transition: .2s all ease-in-out;
		-ms-transition: .2s all ease-in-out;
			transition: .2s all ease-in-out;
*/
}

@media screen and (min-width:1201px) {
    #header { height: 90px;}
    .gnb-on #header { height: 445px; background: #fff;}

    .gnb-on #header:before {
        top: 89px;
        height: 355px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
}
#header .header-top {width:100%; background-color:#f1f1f1;}
#header .header-top dl {margin:0 auto; width:1200px; text-align:right; font-size:0; line-height:0;}
#header .header-top dd {display:inline-block; width:130px;}
#header .header-top dd a {display:block; font-size:13px; line-height:30px; text-align:center; letter-spacing:0.5px;}
#header .header-top dd.lang a {background-color:#555555; color:#fff;}

#header .header-bottom {margin:0 auto; width:1200px;display: flex;align-items: center;}
#header .header-bottom:after {content:''; display:block; clear:both;}
#header .logo {float:left;z-index: 1;font-size: 0;}
#header .logo a {display:block; width:100%;}

@media screen and (max-width:1200px) {
	#header .header-top {display:none;}
	#header .header-bottom {padding:0 30px; width:100%; height:80px; }
	#header .logo a {}
	#header .logo a img {width:auto;max-width: 100%;}
}
@media screen and (max-width:767px) {
	#header .header-bottom {padding:0 20px; height:55px; }
	.sub #header .header-bottom { border-bottom: 1px solid #ddd;}
	#header .logo a {height:30px;}
	#header .logo a img {height: 100%;}
}

/* web gnb */
#header .gnb {display:inline-block; width: calc(100% - 284px);vertical-align:top; text-align:center;}

/* 윤리경영신고 버튼 */
#header .gnb .report-button {float: right; margin: 33px 30px 33px 0;}
#header .gnb .report-button img { width: 16px; height:22px; vertical-align: top;}


#header .w-lang {overflow:hidden; float:right;padding: 30px 0;}
#header .w-lang dd {float:left; margin-left: 8px;}
#header .w-lang dd a {position: relative;display:block; font-size:13px; font-weight: 800;color: #fff;}
html[lang="ko"] #header .w-lang dd.lang.ko a:after,
html[lang="en"] #header .w-lang dd.lang.en a:after,
html[lang="zh"] #header .w-lang dd.lang.zh a:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #fff;
	left: 0;
	bottom: -3px;
}
#header .w-lang dd a img {border:1px solid #cecece;}

#header ._on {display: none;}
.sub #header ._on {display: block;}
.sub #header ._off {display: none;}

@media screen and (min-width:1201px) {
    .m-report-button {display: none;}
    #header .header-bottom {position: relative;}
	#header {}
	#header .m-menu-btn,
	#header .m-gnb-bg,
	#header .m-lang {display:none;}
    
    
    .gnb-on #header ._on {display: block;}
    .gnb-on #header ._off {display: none;}
		/* 1depth */
	#header .gnb > ul {display:inline-block; vertical-align:top; font-size:0; line-height:0;}
	#header .gnb > ul > li { display:inline-block; padding:0 39px; vertical-align:top;}
	#header .gnb > ul > li > a {position: relative; display:block; font-family: 'NanumSquare',sans-serif; font-weight: 400; font-size:17px; line-height:90px; color:#fff; text-align: left;}
   
    #header .gnb > ul > li > a:after {    
        content: '';
        width: 120%;
        height: 0;
        position: absolute;
        bottom: 0;
        left:-10%;
        background: #2ea7e0;
        
    }
    #header .gnb > ul > li:hover >a:after {
        height: 4px;
    }

    .gnb-on #header .gnb > ul > li > a {color:#333; }
    .sub #header .gnb > ul > li > a {color:#333; }
    
    #header .gnb > ul > li:hover >a,
    .gnb-on #header .gnb > ul > li:hover >a {
        color:#2ea7e0;
    }
	/* #header .gnb > ul > li:hover > a {color:#003e7e;} */
		/* 2depth */

	#header .gnb .depth_bg {display:none; position:absolute; top:90px; left:50%; z-index:0; margin-left:-600px; width:1200px; height:0; /*border-top:5px solid #ed1c25; background:rgba(0,0,0,.7); text-align:center;*/ transition:.3s; opacity:0; overflow: hidden;}
    #header .gnb .depth2 {width: calc(100% - 290px); display: flex; flex-wrap: wrap; padding: 30px 0 10px; margin: 0 -20px; background: #fff; float: left; } 
    #header .gnb > ul> li[data-name="technology-product"] .depth2 {}
    #header .gnb > ul> li[data-name="technology-product"] .depth2 li {width: auto; flex: auto;}
    #header .gnb > ul> li[data-name="technology-product"] .depth2 a {font-size: 14px;}
    
	#header .gnb .depth2 li {position: relative; transition:.3s; display:inline-block; width: 25%; padding: 0 20px 20px;text-align: left;}
    html:lang(en) #header .gnb .depth2 li {width: 50%; padding: 0 20px 12px;}
	/* #header .gnb > ul > li:last-child .depth2 {left:0; width:calc(100% + 30px);}
	#header .gnb > ul > li:nth-child(3) .depth2 {width:calc(100% + 20px);} */
	#header .gnb .depth2 a {position: relative;display:block; padding:12px 0; font-size:16px; line-height:20px; text-transform:uppercase; word-break:keep-all;font-weight: 500; border-bottom:2px solid #e1e1e1;}
    html:lang(en) #header .gnb .depth2 a { font-size:15px; letter-spacing: -.5px;}
    #header .gnb .depth2 a:after {    
        content: "\f105";
        font-family: 'FontAwesome';
        display: inline-block;
        width: 10px;
        line-height: 10px;
        height: 10px;
        font-size: 16px;
        margin-left: 10px;
        color: #bbb;
        font-weight: 100;
    }
    #header .gnb .depth2 a:hover {color: #2ea7e0;}
    #header .gnb_title_wrap {
        float: right;
        width: 290px;
        height: 355px;
        background: #fff url('/html/_skin/seil/img/common/bg_gnb_title_wrap.jpg')no-repeat right top;
        z-index: 1000;
    }
    
    /*  gnb title  */
    .gnb_title_wrap [class^="gnb_title-nav-"] { position: relative; display: none;  height: 355px; margin: 0 auto; margin-right: 0; padding: 30px 15px 30px 75px; text-align: left;
    }
    #header .gnb > ul > li.nav-1:hover .gnb_title-nav-1{
        display: block;
        background: url('/html/_skin/seil/img/common/bg_gnb_title_nav-1.png')no-repeat left bottom 20px;
    }
    #header .gnb > ul > li.nav-2:hover .gnb_title-nav-2{
        display: block;
        background:url('/html/_skin/seil/img/common/bg_gnb_title_nav-2.png')no-repeat left bottom 20px;
    }
    #header .gnb > ul > li.nav-3:hover .gnb_title-nav-3{
        display: block;
        background:url('/html/_skin/seil/img/common/bg_gnb_title_nav-3.png')no-repeat left bottom 20px;         
    }
    #header .gnb > ul > li.nav-4:hover .gnb_title-nav-4{
        display: block;
        background:url('/html/_skin/seil/img/common/bg_gnb_title_nav-4.png')no-repeat left bottom 20px;
    }
    #header .gnb > ul > li.nav-5:hover .gnb_title-nav-5{
        display: block;
        background:url('/html/_skin/seil/img/common/bg_gnb_title_nav-5.png')no-repeat left bottom 20px;
    }
    
    .gnb_title_wrap [class^="gnb_title-nav-"] h3 {
        font-size: 20px;
        color: #003953;
        font-weight: 500;
        line-height: 1.5;
        word-break: keep-all;
    }
    :lang(en) .gnb_title_wrap [class^="gnb_title-nav-"] h3 {
        font-size: 18px;
    }
    .gnb_title_wrap [class^="gnb_title-nav-"] p {
        display: inline-block;
        font-size: 14px;
        color: #003953;
        font-weight: 300;
        line-height: 1.5;
        margin-top: 15px;
        border-bottom: 1px solid #003953;
    }
	#header .gnb .depth2 li.in > a {
		padding-left: 20px;
		padding-right: 20px;
	}
	#header .gnb .depth2 li.in > a:after,
	#header .gnb .depth3 li.in > a:after {
		position: absolute;
		font-family: 'FontAwesome';
		content: "\f054";
		font-size: 10px;
		top: 50%;
		right: 10px;
		-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
				transform: translateY(-50%);
		color: rgba(255,255,255,.8);
	}
/*	#header .gnb .depth2 li:hover {background: #000; transition:.3s;}*/


	.gnb-on #header .gnb > ul > li .depth_bg  {display:block; z-index:999; height:auto; opacity:1;}
	.gnb-on #header .gnb > ul > li:hover .depth_bg { z-index:9999; display: block;}
	.gnb-on #header .gnb > ul > li .depth2 { display: flex;}
    .gnb-on #header .gnb > ul > li:not(:hover) .depth2 { display: none;}
    
	/* 3depth */
	#header .gnb .depth2 ul {
		position: absolute;
		display: none!important;
		width: 100%;
		top: -1px;
		left: 100%;
		background: rgba(6,6,6,.7);
	}
	#header .gnb .depth2 > li:hover > ul {
		display: block;
	}
	#header .gnb .depth2 ul li {
		border-top: 1px solid rgba(76,76,76,.7);
	}
	#header .gnb .depth2 ul li:hover {
		background: rgba(6,6,6,.7);
	}

		/* 4depth */
	#header .gnb .depth4 {display:none;}
	#header .gnb .depth3>li:hover .depth4 {display:block;}

    
    /*  다국어  */
    #header .w-lang {position: absolute; right:0; top: 0; padding: 30px 0 30px 40px; z-index: 10000;}
    #header .w-lang p {
        height: 30px;

    }
    #header .w-lang p {
        color: #fff;
        position: relative;
        padding: 0 16px 0 25px;
        display: inline-block;
        text-align: left;
        width: 114px;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
        background: url('/html/_skin/seil/img/common/ico_global.png')no-repeat left center;
    }
    .gnb-on #header .w-lang p,
    .sub #header .w-lang p{
        color: #333;
        background: url('/html/_skin/seil/img/common/ico_global_on.png')no-repeat left center;
    }
    
    #header .w-lang p:before {
        content: '';
        position: absolute;
        left: -40px;
        top: 3px;
        width: 1px;
        height: 24px;
        background:rgba(255,255,255,.3);
    }
    .gnb-on #header .w-lang p:before,
    .sub #header .w-lang p:before {
        background:rgba(0,0,0,.3);
    }
	#header .w-lang p:after {    
        content: "\f0d7";
        font-family: 'FontAwesome';
        display: block;
        width: 10px;
        line-height: 10px;
        height: 10px;
        font-size: 16px;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        margin-right: -1px;
    }
	#header .w-lang p.on:after {content: "\f0d8";}
	#header .w-lang ul {
        display: none;
/*	    position: absolute;*/
	    top: 60px;
	    left: 0;
	    width: 114px;
        border-top: none;
	    background: #fff;
	    text-align: center;
	    transition: .3s;
        -webkit-transition: .3s;
	}
	#header .w-lang li { 	}
	#header .w-lang li a {
	    display: inline-block;
	    width: 100%;
	    height: 30px;
	    line-height: 30px;
	    color: #888;
        font-size: 13px;
        padding-left: 16px;
        text-align: left;
        border-top: 1px solid #d7d7d7;
	}

	#header .w-lang .dep2 li:hover {
	    background: #f4f4f4;
	    transition: .3s;
        -webkit-transition: .3s;
	}

	.btn-all-menu {position:absolute; top:38px; left:50%; width:32px; height:25px; border:1px solid #cecece; margin-left: 487px; cursor:pointer;}
	.btn-all-menu span {position:absolute; left:50%; margin-left: -10px; width:20px; height:2px; background: #ababab;}
	.btn-all-menu span:nth-child(1) {top:5px;}
	.btn-all-menu span:nth-child(2) {top:50%; margin-top:-1px;}
	.btn-all-menu span:nth-child(3) {bottom:5px;}

	.all-menu-wrap {display:none; position:fixed; top:0; left:0; z-index:999999999; width:100%; height:100%; background:rgba(0,0,0,.85);}
	.all-menu-wrap > ul {position:absolute; top:60px; left:50%; transform:translateX(-50%); padding:30px 30px 50px; width:960px; background:#fff; font-size:0;}
	.all-menu-wrap > ul > li {display:inline-block; padding:0 30px; width:33.33333333333333%; vertical-align:top;}
	.all-menu-wrap > ul > li > a {display:block; margin-top: 20px; padding:10px; border-bottom:1px solid #222; font-size:22px; line-height:1.3; color:#222;}
	.all-menu-wrap > ul > li li a {display:block; padding:10px; border-bottom:1px solid #ddd; font-weight: 300; font-size:18px; line-height: 1.3;}
	.all-menu-wrap p {position:absolute; top:100px; left:50%; margin-left: 424px; cursor:pointer;}
	.all-menu-wrap p span {display:block; margin-top: 5px; font-size:0; width:30px; height:30px;}
	.all-menu-wrap p span:before {content:''; display:block; width:100%; height:1px; background:#666; transform:rotate(-45deg);}
	.all-menu-wrap p span:after {content:''; display:block; width:100%; height:1px; background:#666; transform:rotate(45deg);}
	
	#header .w-lang dd a:hover {color: rgba(255,255,255,.7);}
}
@media screen and (max-width:1200px) { 
    /* 윤리경영신고 버튼 */
    .gnb .report-button {
        display: none;
    }
    /*  윤리경영신고 버튼 mobile */
    .m-report-button {position: absolute; right: 100px; top: 50%; transform: translateY(-50%);}
    .m-report-button .report-button img { width: 25px; height:35px; vertical-align: top;}
    
	.btn-all-menu,
	.all-menu-wrap ,
    .gnb_title_wrap {display:none;}
	
	#header .w-lang {display: none;} 

	#header .m-menu-btn {display:block; position:absolute; top:24px; right:30px; width:42px; height:34px; z-index:9999; cursor:pointer;}
	#header .m-menu-btn span {height:6px; background:#28a8e1; transition:.3s;}
	.main #header .m-menu-btn span { background:#fff; }
    
	#header .m-menu-btn span:nth-child(1) {position:absolute; top:50%; margin-top:-3px; width:100%;}
	#header .m-menu-btn span:nth-child(2) {position:absolute; top:0; width:100%;}
	#header .m-menu-btn span:nth-child(3) {position:absolute; bottom:0; width:100%;}
	/* on */
	#header .m-menu-btn.on {z-index:100000;}
	#header .m-menu-btn.on span {background:#fff;}
	#header .m-menu-btn.on span:nth-child(1) {opacity:0;}
	#header .m-menu-btn.on span:nth-child(2) {height:2px; transform:translateY(16px) rotate(-45deg);}
	#header .m-menu-btn.on span:nth-child(3) {height:2px; transform:translateY(-16px) rotate(45deg);}

	#header .gnb {float:none; position:fixed; top:0; right:-100%; z-index:99999; width:100%; height:100vh; opacity:0; text-align:left;}
	#header .m-gnb-bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8);}

	#header .m-lang {position:fixed; top:0; right:-100%; z-index:100000; padding:18px 0 0 33px; width:80%; height:80px; background:#28a8e1; opacity:0; font-size:0;}
	#header .m-lang .w-lang {display: block;float: left;padding: 5px 0;}
	#header .m-lang .w-lang dd {margin-left: 0;margin-right: 10px;}
	#header .m-lang .w-lang dd a {font-size: 23px;text-align: center;}
	html[lang="ko"] #header .m-lang .w-lang dd.lang.ko a:after, html[lang="en"] #header .m-lang .w-lang dd.lang.en a:after, html[lang="zh"] #header .m-lang .w-lang dd.lang.zh a:after {bottom: 0;}
	/* on */

	#header .gnb > ul {overflow-x:hidden; position:absolute; top:80px; right:0; z-index:100000; width:80%; height:calc(100% - 80px); background:#fff;}
	/* depth */
	#header .gnb ul a {display:block; padding-left:36px; width:100%; line-height:1;}
	/* 1depth */
	#header .gnb > ul > li {width:100%;}
	#header .gnb > ul > li > a {position:relative; padding-top:20px; padding-bottom:20px; border-top:1px solid #ddd; font-size:23px; color:#333;}
	#header .gnb > ul > li > a:before {position:absolute; top:16px; right:30px; content:"\f107"; display:block; font-family:'FontAwesome'; font-size:30px; line-height:1;}
	#header .gnb > ul > li:first-child > a {border-top:0 none;}
	#header .gnb > ul > li:last-child > a {border-bottom:1px solid #ddd;}
	/* 2epth */
	#header .gnb > ul > li > div {display:none;}
	#header .gnb > ul > li > div > ul,
	#header .gnb > ul > li > div > ul > li {width:100%; background:#e8e8e8;}
	#header .gnb > ul > li > div > ul > li a {padding-top:15px; padding-bottom:15px; border-top:1px solid #d1d1d1; font-size:17px;}
	#header .gnb > ul > li > didv > ul > li:first-child > a {border-top:0 none;}
	/* on */
	#header .gnb > ul > li.on > a {background:#3f3f40; border-top:0 none; color:#fff;}
	#header .gnb > ul > li.on > a:before {content:'\f106';}
	
	#header .gnb > ul > li .depth2 > li > ul li a {font-weight: 400;}
	#header .gnb > ul > li .depth2 > li > ul li a:before {
		content: "-";
		display: inline-block;
		margin-right: 10px;
	}
}
@media screen and (max-width:767px) {
        /*  윤리경영신고 버튼 mobile */
    .m-report-button {right: 70px; }
    .m-report-button .report-button img { width: 16px; height:22px;}
    
	#header .m-menu-btn {top:16px; right:20px; width:28px; height:23px;}
	#header .m-menu-btn span {height:3px;}
	#header .m-menu-btn span:nth-child(1) {top:10px; margin-top:auto;}
	#header .m-menu-btn.on span:nth-child(2) {height:2px; transform:translateY(10.5px) rotate(-45deg);}
	#header .m-menu-btn.on span:nth-child(3) {height:2px; transform:translateY(-10.5px) rotate(45deg);}

	#header .gnb > ul {top:55px; height:calc(100% - 55px);}
	#header .gnb ul a {padding-left:20px;}
	#header .gnb > ul > li > a:before {top:12px; right:20px; font-size:23px;}

	#header .m-lang {padding:12px 0 0 20px; height:55px;}
	#header .m-lang .w-lang {padding: 7px 0;}
	#header .m-lang .w-lang dd a {font-size: 13px;}

	#header .gnb > ul > li > a {padding-top:16px; padding-bottom:16px; font-size:15px;}
	#header .gnb > ul > li > div > ul > li a {padding-top: 12px; padding-bottom:12px; font-size:13px;}

}

/*
	footer
*/
#footer {position: relative;width:100%; background:#16191a;}
#footer .footer-top {width:100%; padding: 45px 0; background:#1b1e1f;}
#footer .footer-top .inner {
    overflow: hidden;
}
#footer .footer-top .inner > div {
    display: inline-block;
    float: left;
}
#footer .footer-top .f_logo {
    width: 180px;
}
#footer .footer-top .f_customer { 
    /*width: 370px;    */
}
#footerSitemap {
    width: calc(100% - 550px);
    padding-top: 5px;
}
#footerSitemap > ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (min-width: 768px) {
    :lang(en) #footerSitemap > ul li.nav-item {
        width: 18%;
        padding-right: 10px;
    }
    :lang(en) #footerSitemap > ul li.nav-item.nav-2 {
        width: 28%;
    }
}
/* 하단 유틸메뉴 */
#footer .footer-top dl {margin:0 auto; }
#footer .footer-top dd {position: relative; display:inline-block; margin-right:12px; padding-right: 14px; margin-bottom: 10px;}
#footer .footer-top dd:not(:last-child):after {content: ''; position: absolute; right:0;
    top:1px; height: 14px; width: 1px; background: rgba(204,210,214,.3);}
#footer .footer-top dd a {display:block; font-size:14px; line-height:1; color:#ccd2d6;} 

@media screen and (max-width: 1280px) {
    #footer .footer-top .f_logo {
        width: 100%;
        margin-bottom: 20px;
    }

    #footerSitemap {
        width: calc(100% - 370px);
    }
}

@media screen and (max-width: 900px) {
    #footer .footer-top .f_customer {
        width: 100%;
        margin-bottom: 20px;
    }

    #footerSitemap {
        width: 100%;
    }
    #footer .f_contact li.address span br {
        display: none;
    }
}
/* 하단 회사정보 */
#footer .footer-top .f_customer h3 {color:#ccd2d6; font-size: 14px; padding-top: 10px; margin-bottom: 10px;}
#footer .f_contact {display: flex; flex-wrap: wrap;}
#footer .f_contact li {position: relative; display: inline-block; margin-right: 12px; padding-right: 14px;}
#footer .f_contact li span { 
    display: block;
    color:#ccd2d6;
    opacity: .6;
    font-size: 14px;
    margin-bottom: 10px;
}
#footer .f_contact li.address span {
    padding-left: 25px;
}
#footer .f_contact li:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    top: 3px;
    height: 14px;
    width: 1px;
    background: rgba(204, 210, 214, .3);
}

#footer .f_contact li.address {
    background: url('/html/_skin/seil/img/common/ico_f_address.png')no-repeat left top 3px;
}
/*
#footer .f_contact li.tel {
    background: url('/html/_skin/seil/img/common/ico_f_tel.png')no-repeat left top 3px;
}
#footer .f_contact li.email {
    background: url('/html/_skin/seil/img/common/ico_f_email.png')no-repeat left top 3px;
}*/


/* footer site menu */
@media screen and (min-width: 768px) {
    #footerSitemap {
        position: relative;
    }

    #footerSitemap:before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        top: 35px;
        background: rgba(204, 210, 214, .3);
    }

}

#footerSitemap > ul > li > a {
    line-height: 1;
    margin-bottom: 15px;
} 
#footerSitemap .depth2 {
    padding-top: 15px;
}
#footerSitemap .depth2 li a {
    margin-bottom: 10px;
}
#footerSitemap .depth2 li a:hover {
    opacity: 1;
}
@media screen and (max-width: 767px) {

    #footerSitemap > ul > li {
        width: 50%;
        margin-bottom:20px;
    }
    #footerSitemap .depth2 {
        border-top: 1px solid rgba(204, 210, 214, .3);
    }
}
@media screen and (max-width: 500px) {
    #footerSitemap  {
        display: none!important;
    }
}
#footerSitemap > ul > li a {
    display: block;
    color:#ccd2d6;
    opacity: .6;
    font-size: 14px;
    font-weight: 300;
}

#footerSitemap .depth3 {display: none;}



#footer .footer-bottom {position:relative; margin:0 auto; padding:15px 0; font-size:0;overflow: hidden;}

#footer .footer-bottom .copyright {color:#9ba2a6; font-size: 14px; text-align: center;}


@media screen and (max-width: 767px) {
    #footer .footer-top {
        padding: 45px 0 15px;
    }
    #footer .footer-top dd a,
    #footer .footer-top .f_customer h3,
    #footer .f_contact li span,
    #footer .footer-bottom .copyright {font-size: 12px;}
}

/* ---------------------------------- contents */
#contents {position: relative;width:100%}

@media screen and (min-width:1201px) {
	#contents {min-height:calc(100vh - 255px);}
}
@media screen and (max-width: 1200px) {
	
}
@media screen and (max-width:767px) {
	#contents {min-height:calc(100vh - 288px);}
}

.top-btn {position:fixed; z-index:9999; bottom:30px; right:35px; width:50px; height:50px; background:rgba(35, 122, 192,.6); font-size:14px; line-height:50px; color:#fff; text-align:center; cursor:pointer;display: none;}
.top-btn.on {
	position: absolute;
    bottom: auto;
    top: -80px;
    background:rgba(35, 122, 192,.3);
}
@media screen and (min-width: 1201px) {
	.top-btn:hover {
		background:rgba(35, 122, 192,1);
	}
}
@media screen and (max-width:767px){
    .top-btn {right:0; }
}
/*
	path
*/

.path-wrap .path {
	font-size: 0;
}

.path-wrap .path>li {
	display: inline-block;
	padding-right: 20px;
	font-size: .875rem;
	color: #999;
	line-height: 60px;
}
.path-wrap .path>li:last-child {
	color: #222;
}
.path-wrap .path>li>span {
	display: inline-block;
	position: relative;
	line-height: 1;
}

.path-wrap .path>li>span:after {
	content:'';
	display: inline-block;
	position: absolute;
	top: 1px;
	width: 20px;
	height: 100%;
	background-image: url(/html/_skin/seil/img/common/ico_path_arrow_right.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.path-wrap .path>li:last-child>span:after {
	display: none;
}