@charset "utf-8";

body { font-size:15px; line-height:1.2em; -webkit-text-size-adjust:none; font-family: 'Noto Sans KR','맑은고딕','Malgun Gothic','돋움',Dotum,Arial,sans-serif; }
/*.rest { font-family:'맑은 고딕',"Malgun Gothic","돋움",Dotum,"굴림",Gulim,Helvetica,sans-serif; }
.safari { font-family:"Helvetica Neue", "Apple SD Gothic Neo"; font-weight:300; }*/
/*.safari.ip6, .safari.ip6p { font-size:16px; }
 .mainContainer.f1 { font-size:15px; }  .mainContainer.f2 { font-size:17px; }  .mainContainer.f3 { font-size:19px; }
.ip6 .mainContainer.f1, .ip6p .mainContainer.f1 { font-size:16px; } .ip6 .mainContainer.f2, .ip6p .mainContainer.f2 { font-size:18px; } .ip6 .mainContainer.f3, .ip6p .mainContainer.f3 { font-size:20px; }*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; }
body,input,textarea,select,button,table,h1,h2,h3,h4,h5,h6 { font-weight:normal; }
img,fieldset{border:0}
ul,ol,li{list-style:none;}
a {color:inherit;text-decoration:none;color:#222;}
em,i,address {font-style:normal; font-weight:normal;}
legend,caption {clear:both;display:none;}
input,textarea,select,button,table{ font-size:inherit;font-family:inherit;line-height:inherit; }
table{border-collapse:collapse}
textarea { resize:none; }
button,label { cursor:pointer; }
a:visited, a:hover, a:active { color:#222; }
/*.safari strong { font-weight:500; }*/
select { -webkit-appearance: none; -webkit-border-radius:0; }

input, textarea, button, select { outline:none; }
input,textarea,button { -webkit-border-radius:0; border-radius:0; } /*-webkit-appearance:none;*/

.skipNav, .hide { position:absolute;width:1px;height:1px;overflow:hidden; }

/*
* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
 }

 /* layout */
.maincontainer { position:relative; width:100%; height:100%; }
.swiper-slide { position:relative; background: #fff; 
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.pgBox { position:absolute; bottom:80px; left:0; text-align:center; padding:0 20px; width:100%; height:1px; overflow:hidden; box-sizing:border-box; }
.swiper-pagination { position:relative; z-index:9; }
.swiper-pagination-progressbar { position:relative;  width:100%; height:1px; box-sizing:border-box; z-index:10; overflow:hidden; background-color:rgba(255,255,255,0.5);}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%; background:#fff; -webkit-transform: scale(0);  -ms-transform: scale(0);  transform: scale(0);  -webkit-transform-origin: left top;  -ms-transform-origin: left top;  transform-origin: left top; z-index:10; }  
.paging { position:absolute; bottom:90px; right:20px; width:50px; font-size:13px; font-weight:700; z-index:9; color:#fff; text-align:right; }

/* layout, common */
.wrap { position:relative; overflow:hidden; }

header { position:fixed; top:0; left:0; width:100%; height:60px; background-color:rgba(0,0,0, 0.45); z-index:100; overflow:hidden; transition: top 0.2s ease-in-out; }
header.hdUp { background-color:rgba(0,0,0, 0.45); }
header.hdDown {  background-color:rgba(0,0,0, 0.45); }
.header { position:relative; height:60px; }
.header .skbi { position:absolute; top:18px; right:20px; width:136px; height:30px; background:url('../img/set_icon_v3.png') 0 0 no-repeat; background-size:140px 500px; }
.header .skbi a { position:relative; display:block; top:-12px; width:180px; height:55px; color:transparent; }
.header .toggle { position:absolute; top:0; left:0; width:64px; height:60px; color:transparent; }
.header .toggle:before { content:''; position:absolute; top:24px; left:20px; width:25px; height:30px; background:url('../img/set_icon_v3.png') 0 -30px no-repeat; background-size:140px 500px; }
.header.sub1 {background:url('../img/bg_main01.jpg') 0 0 no-repeat; background-size:cover; }
.header.sub2 {background:url('../img/bg_main03_v3.png') 0 0 no-repeat; background-size:cover; }
.header.sub3 {background:url('../img/bg_main04.jpg') 0 0 no-repeat; background-size:cover; }
.header.sub4 {background:url('../img/bg_main02.png') 0 0 no-repeat; background-size:cover; }
.header.outsub { height:60px; background:#333; }
.header.outsub .skbi { top:23px; left:15px; right:0; width:144px; background:url('../img/bi_comms.png') 0 0 no-repeat; background-size:140px auto; }
.header.outsub .skbi a { width:144px; height:42px; }
3
footer { width:100%; margin:40px 0 0 0; padding-bottom:50px; }
.footer { position:relative; width:100%; padding:0 20px; box-sizing:border-box; font-size:14px; font-weight:300; color:#000; overflow: hidden; }
.footer .copyright { display:block; }
.footer .olink, .footer .mlink { position:relative; display:inline-block; margin-top:30px; font-size:15px; font-weight:300; }
.footer .bar { position:relative; top:-2px; padding:0 16px 0 14px; font-size:11px; color:#999; }
.footer .fsite { position:relative; }
.footer .fsite label { display:none; }
.footer .fsite .selectBox { position:relative; width:100%; padding:0 20px; height:50px; font-size:18px; font-weight:300; line-height:48px; color:#000; border:1px solid #000; box-sizing:border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:url('../img/set_icon_v3.png') 100% -35px no-repeat; background-size:140px 500px; }
.footer .uppage { display:block; margin:50px auto; width:70px; height:70px; color:transparent; background:url('../img/set_icon_v3.png') 0 -110px no-repeat; background-size:140px 500px; }
.footer.v2 { padding:12px 15px 0; border-top:1px solid #d8d8d8; }
.footer .olink.last {margin-right:17px;}
.footer .mlink  { margin-bottom:30px; }
.footer .mlink .link_info { position:relative; padding:0 19px 0 0; font-weight: normal; line-height:18px; letter-spacing: -0.68px; color:#000; }
.footer .mlink .link_info:before { content:''; position: absolute; top:3px; right:0; width:16px; height:16px; background-size:16px 16px; background-image:url('../img/btn-more.png'); }
.footer .mlink .link-list { display: none; position: absolute; bottom: -87px; left: 0; padding:6px 0 6px 13px; width:122px; height:60px; box-shadow: 3px 2px 4px 0 rgba(222, 222, 222, 0.5); border: solid 1px #ccc; background-color: #fff; box-sizing: border-box; }
.footer .mlink.infoOpen .link-list { display:block; }
.footer .mlink.infoOpen .link-list li a { display:block; font-size: 15px; font-weight: 300; line-height:22px; }

/* main */
.swiper-slide .page { position:relative; width:100%; height:100%; }
.swiper-slide .page a { display:block; }
.swiper-slide .page img { width:100%; }
.swiper-slide .page .txtBox { position:absolute; top:0; left:20px; width:100%; font-size:40px; font-weight:700; color:#fff; line-height:1.2; }
.swiper-slide .page .txtBox .txt { position:absolute; top:84px; }
.swiper-slide .page .txt span { display:block; margin-top:20px; padding-left:3px; font-size:15px; font-weight:400; opacity:0.54; color:#fff; }

.swiper-slide .page.n3 .txtBox .txt span { margin-top:13px; }
.swiper-slide .page.n3 .txtBox .txt .ico_oditto { position:relative; top:7px; margin-left:10px; display:inline-block; width:85px; height:27; }

.mainBox { position:relative; margin:0 20px; overflow:hidden; }
.cnt { float:left; margin-top:50px; box-sizing:border-box; color:#000; }
.cnt .tit { font-size:30px; font-weight:700; line-height:40px; }
.cnt p { margin-top:15px; font-size:17px; font-weight:300; line-height:28px; }

.spmenu { position:fixed; top:0; width:280px; height:100%; background-color:#fff; z-index:1000; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; overflow-y: auto; }
.spmenu.cbp-spmenu-open { left:0; }
.cbp-spmenu-left { left: -280px; }
.spmenu ul { margin:0 20px; }
.spmenu ul li { padding:15px 0 15px 0; border-bottom:1px solid #bdbdbd; }
.spmenu ul li:last-child { border-bottom:0; }
.spmenu ul li .home { padding-left:30px; font-size:20px; line-height:40px; background:url('../img/set_icon_v3.png') 0 -184px no-repeat; background-size:140px 500px; }
.spmenu ul li .tit { margin:0 0 10px 0; font-size:16px; font-weight:300; color:#777; }
.spmenu ul li .submenu { display:block; line-height:40px; font-size:20px; }
.spmenu .close { position:absolute; top:0; right:0; width:60px; height:60px; color:transparent; }
.spmenu .close:before { content:''; position:absolute; top:26px; right:22px; width:20px; height:20px; background:url('../img/set_icon_v3.png') -91px -90px no-repeat; background-size:140px 500px; }
#mask { position:absolute; left:0; top:0; background-color:#000; display:none; z-index:999; opacity:0.6;}
.not_scroll{position:fixed;overflow:hidden;width:100%;height:100%}


/* subwrap */
.subWrap {  position:relative; padding:60px 20px 30px; }
.subtit { position:relative; margin-bottom:20px; padding:50px 0; text-align:center; }
.subtit h2 { display:block; margin:0 auto; font-size:30px; font-weight:400; }
.subtit .category { position:relative; padding:40px 0 0 0; font-size:16px; font-weight:300; }
.subtit .category:before { content:''; position:absolute; top:18px; left:50%; margin-left:-14px; width:28px; height:15px; background:url('../img/set_icon_v3.png') 0 -90px no-repeat; background-size:140px 500px; }
.contents {  }
.contents .conBox { margin-bottom:50px; }
.conBox h3 { font-size:20px; line-height:35px; font-weight:700; }
.conBox h3.t1 { font-size:25px; }
.subInfo { width:100%; text-align:center; overflow:hidden; }
.subInfo .disc { font-size:17px; font-weight:300; line-height:28px; text-align:left; }
.subInfo .disc span { display:block; margin-top:10px; margin-bottom:35px; }
.subInfo .disc span a { color:#aaa; }
.subInfo .disc .svcImg { margin:0 0 40px 0; }
.subInfo .svcLink { margin-left:22px; }
.subInfo .svcLink:first-child { padding-left:5px; }
.subInfo .nateapps { position:relative; display:block; width:100%; height:100%; margin:0 auto; overflow:hidden; background:url('../img/ico_nateapp_v2.png') 0 0 no-repeat; background-size:100%; }
.subInfo .nateapps .applink { position:relative; display:block; margin:0; padding-top:21.7%; float:left; width:21%; height:100%; margin-right:4.5%; cursor:pointer; }
.subInfo .nateapps .box { position:absolute; display:block; top:0; left:0; width:100%; min-height:100%; color:transparent; }
/*.subInfo .nateapps .applink { display:block; float:left; width:21%; height:100%; margin-right:4.5%; color:transparent; }*/
.subInfo .nateapps .applink:last-child { margin-right:0; }
.subInfo .applink { display:inline-block; }

/* about us */
.culList { margin-top:30px; font-size:17px; overflow:hidden; }
.culList li { margin-bottom:15px; font-weight:400; line-height:26px; }
.culList li span { display:block; margin-top:5px; font-weight:300; color:#aaa; }
.culList.env li { position:relative; margin-bottom:20px; padding-left:130px; height:100px; }
.culList.env li:before { content:''; position:absolute; top:0; left:0; width:100px; height:85px; background:url('../img/ico_culture.png') 0 0 no-repeat; background-size:89px auto;}
.culList.env li:nth-child(4):before { background-position:0 -245px; }
.culList.env li:nth-child(6):before { background-position:0 -120px; }
.culList.env li:nth-child(5):before { background-position:0 -245px; }
.culList.env li:nth-child(7):before { background-position:0 -351px; }
.culList.env li:nth-child(1):before { background-position:0 -472px; }
.culList.env li:nth-child(2):before { background-position:0 -595px; }
.culList.env li:nth-child(3):before { background-position:0 0; }

.history { display:block; width:100%; margin-top:30px; font-size:17px; font-weight:300; }
.history th { display:none; }
.history td { padding:12px 0; }
.history .year { width:25%; font-weight:800; vertical-align:top; }
.history .year.rowspan { padding-left:47px; }
.history .hiscnt { width:75%; word-break:break-all; }

/* careers */
.process .conBox { margin-bottom:25px; }
/*.process .conBox:last-child { border-bottom:0; }*/
.process .conBox .desc { position:relative; padding:25px 0 25px 105px; font-size:17px; font-weight:300; line-height:26px; background:url('../img/ico_process_v2.png') 0 0 no-repeat;  background-size:91px 855px; }
.process .conBox:nth-child(1) .desc { background-position:0 33px; }
.process .conBox:nth-child(2) .desc { background-position:0 -142px; }
.process .conBox:nth-child(3) .desc { background-position:0 -356px; }
.process .conBox:nth-child(4) .desc { background-position:0 -572px; }
.process .conBox:nth-child(5) .desc { padding:45px 0 35px 105px; background-position:0 -775px; }

.benefit { margin-top:15px; overflow:hidden; }
.benefit li { position:relative;  height:80px; padding:25px 0 25px 130px; font-size:17px; font-weight:400; line-height:26px; }
.benefit li span { display:block; margin-top:10px; font-weight:300; color:#aaa; }
.benefit li:before { content:''; position:absolute; top:0; left:0; width:100px; height:110px; background:url('../img/ico_benefit.png') 0 0 no-repeat; background-size:95px 1450px; }
.benefit li:nth-child(1):before { background-position:0 32px; }
.benefit li:nth-child(2):before { background-position:0 -220px; }
.benefit li:nth-child(3):before { background-position:0 -340px; }
.benefit li:nth-child(4):before { background-position:5px -580px;; }
.benefit li:nth-child(5):before { background-position:1px -701px; }
.benefit li:nth-child(6):before { background-position:0 -824px; }
.benefit li:nth-child(7):before { background-position:0 -936px; }
.benefit li:nth-child(8):before { background-position:3px -1052px; }
.benefit li:nth-child(9):before { background-position:0 -1310px; }

.faqList { position:relative; }
.faqList li { margin-bottom:50px; font-weight:300; font-size:17px; line-height:26px; }
.faqList li strong { position:absolute; top:0; left:0; height:auto; margin-right:15px; font-weight:800; }
.faqList li .qs { position:relative; padding:0 0 8px 25px; border-bottom:1px solid #000; }
.faqList li .answer { position:relative; display:inline-block; margin:8px 0 0 0; padding:0 0 0 25px; }
.faqList li .answer strong {  }

/* download */
.btnDown { display:block; width:100%; height:46px; margin-top:80px; margin-bottom:20px; font-size:17px; background-color:#fff; cursor: pointer; border:0; border-bottom:1px solid #323232; }
.btnDown span { position:relative; display:block; padding:0 16px; text-align: left; }
.btnDown span:before { content:''; position:absolute; top:0; right:22px; width:13px; height:19px; background:url('../img/btn_download.png') 0 0 no-repeat; background-size:13px 19px; }

/* esg */
.outLink { padding:80px 15px 30px; }
.outLink h2 { display:block; margin:0 0 20px 0; font-size: 16px; font-weight: bold; color:#000; }
.etcBox { position:relative; margin-bottom:40px; overflow:hidden; }
.etcBox h3 { font-size: 18px; font-weight: 500; color:#000; }
.etcBox table { width:100%; margin-top:23px; font-size:12px; font-weight: 300; line-height: 1.17; letter-spacing: -0.8px; text-align: center; color: #000; }
.etcBox th { height:24px; font-size:12px; font-weight: 300; text-align: center; color: #000; background-color:#f5f5f5; border-bottom:1px solid #d7d7d7; border-right:1px solid #d7d7d7; }
.etcBox th:last-child { border-right:0; }
.etcBox td { padding:7px 0 6px 0; border-bottom:1px solid #d7d7d7; border-right:1px solid #d7d7d7; }
.etcBox td:last-child { border-right:0; }

/* ethical */
.ethical { position:relative; padding: 80px 15px 30px; }
.ethical h2 { display:block; margin:0 0 26px 0; font-size: 16px; font-weight: bold; color:#000; }
.ethical .link { position:absolute; display:block; top:80px; right:29px; font-size:16px; font-weight:bold; color:#000; }
.ethical .link:before { content:''; position:absolute; top:1x; right:-14px; width:14px; height:18px; background:url('../img/ico_arrow.png') 0 0 no-repeat; background-size: 14px auto;}
.ethical .txt { font-size: 17px; font-weight: 300; line-height: 1.53; color: #000; }
.ethical .emBox { margin:47px 0 0 0; }
.ethical .emBox h3 { margin:0 0 17px 0; font-size: 16px; font-weight: bold; color:#000; }
.emList { margin:82px 0 0 0; }
.emList li { width:100%; margin:0 0 54px 0; overflow:hidden; }
.emList li .thumb { float:left; width:100px; margin-right:25px; }
.emList li .desc h4 { margin:32px 0 0 0;  font-size: 17px; font-weight: 500; color: #000; }
.emList li .desc p { position:absolute;width:1px;height:1px;overflow:hidden; }