@charset "utf-8";
@import url("../../fonts/fonts.css");
@import url("contents/typo.css");
@import url("contents/header.css");
@import url("contents/footer.css");
@import url("contents/grid.css");
@import url("contents/nice-select.css");
@import url("contents/nice-select-light.css");
@import url("contents/footer-spec.css");
@import url("contents/anim.css");
@import url("contents/mobile-nav.css");
@import url("contents/layout-spec.css");

/* reset */
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, 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, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
 {margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
th {font-weight: inherit}
em {font-style:normal;}
img {vertical-align:top;max-width:100%;}



input {vertical-align:middle;}
p,h3,h2,h1 {letter-spacing: normal;}
input,textarea,button,select {font-family:"HDFont", sans-serif; color: #222;border-radius: 0}
body {font-family:"HDFont", sans-serif;width: 100%;height: 100%; color:#555;background-color: #fff;font-weight: 400;}
video {object-fit: fill;}


#WRAP {overflow: hidden;}


.kr_sd_400{font-family: "HDFont",sans-serif;font-weight: 400}/* r */
.kr_sd_500{font-family: "HDFont",sans-serif;font-weight: 500}/* m */
.kr_sd_700{font-family: "HDFont",sans-serif;font-weight: 700}/* b */
.en_plain_l{font-family: "HDFont",sans-serif;font-weight:400;}/* Light */
.en_plain_r{font-family: "HDFont",sans-serif;font-weight:500;}/* Regular */
.en_plain_b{font-family: "HDFont",sans-serif;font-weight:700;}/* Bold */

.fclear {*zoom:1}
.fclear:after {display:block;content:"";clear:both;}
.ir_text {text-indent: -9999px;overflow: hidden;font-size: 0 ;height: 0;}
.ir_text > * {text-indent: -9999px;overflow: hidden;font-size: 0 ;height: 0;}

.ellipsis {display: inline-block; max-width:100%;
 white-space: nowrap;
 -ms-text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
 overflow: hidden;}
.ellipsis_line{
 /* font-size, line-height, max-height,-webkit-line-clamp : 개별적용(2줄이상) */
 position: relative;
 font-size: 16px;
 transition: all 0.3s;
 white-space: normal;
 word-wrap: break-word;
 line-height: 30px;
 max-height: 60px;
 -webkit-line-clamp: 2;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title{
	display: inline-block;
    width: 100%;
    padding-bottom: 10px;
}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title .left{display: block; float:left;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title .right{display: block; float:right;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p{display:inline-block;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p:hover{display:inline-block; text-decoration:underline;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p span.down_icon{position:relative; display:inline-block; padding-right:10px; vertical-align:middle;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p span.down_icon:before{content:''; width:18px; height:18px; background:url('../../img/common/ico_download.png') no-repeat right center / contain; padding-right:97%; margin-top:5px;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p span.down_icon:hover:before{ padding-right:97%; background:url('../../img/common/ico_download_hov.png') no-repeat right center / contain; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_contents span.content{display : inline-block;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_contents span.content a:before{opacity:1;padding-left:0;background:url('../../img/common/ico_outlink_black.svg') no-repeat right center / 14px; padding-right:17px;}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_contents span.content a{opacity:1;border-bottom:solid; border-width:1px;padding-left:0;background:url('../../img/common/ico_outlink_black.svg') no-repeat right center / 14px; padding-right:17px}
#ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_contents span.content a:hover{color: rgba(34, 34, 34, 0.57); opacity:0.5;}

#SNS .social-media-contents{padding:100px; background-color:#1A1A1A;}
#SNS .now-on-header{padding-right:30px;}
#SNS .now-on-desc{padding-top:10px;}
#SNS .row{height:100px;}


/* ================================ desktop css ================================== */
.section {position: relative; padding:116px 36px 0; width:100%; margin:0 auto; box-sizing: border-box;max-width: 1920px}
.container {min-height: 768px;margin:88px auto 160px;}

#MAIN_CONTAINER .section {padding:0; width:auto; margin:0; box-sizing: unset;max-width: 100%;background:#fff;}
#MAIN_CONTAINER.container {min-height: auto;margin:0;}

#header .gnb-sub-menus-depth2 .gnb-sub-menu ul li.on span{color: #222222}
#header .gnb-sub-menus-depth2 .gnb-sub-menu ul li.on span:after{width: 100%;opacity: 1}



/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px){
    img {max-width: 100%;}
    .container {margin:66px auto 100px;}
    .section {padding:70px 50px 0;}
    .footer-menu li > a > span > img{ width:16px; height:16px; padding-left:7px;}
     #SNS .social-media-contents{padding:50px}
     #SNS .now-on-desc{padding-top:0}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px){
 #WRAP {min-width:320px;}
 .section {padding:60px 20px 0;}
 #footer .sns{margin-right: 0}
 .footer-menu li > a > span > img{ width:16px; height:16px; padding-left:7px;}
 #ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p span.down_icon:before{width:13px;height:13px;}
 #ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p span.down_icon:before:hover{width:13px;height:13px;}
 #ETHICS_MANIFEST .gu_grid .gu_text .gu_text_box_title p span.down_icon:before{margin-top:5px;padding-right:120%;}

}