@charset "utf-8";

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Roboto:wght@300&display=swap'); /* Roboto체 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');


/* Default */
html {min-width:1400px;}
html, body {width:100%; height:100%; scroll-behavior: smooth; }
body {margin:0; overflow:visible; color:#000; font-size:16px; line-height: 1.8; font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','Apple SD Gothic Neo','돋움',dotum, sans-serif; font-weight: 300; word-wrap: break-word; word-break: keep-all; font-weight: normal; min-width:1200px; -webkit-font-smoothing:antialiased;}

h1, h2, h3, h4, h5, h6 {font-weight:700;}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, button, textarea, blockquote, table, thead, tbody, th, td, p, legend {margin: 0; padding: 0; -webkit-text-size-adjust: none; font-size:14px; word-break: keep-all; font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','Apple SD Gothic Neo','돋움',dotum, sans-serif;}
img {border: 0 none;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
table th {font-weight: 400;}
caption {height: 0; line-height: 0; font-size: 0; overflow: hidden; text-indent: -10000px;}
a {text-decoration: none!important; cursor: pointer; color:inherit;}
button {border: 0 none; background: none; vertical-align: middle; }
button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}
input {vertical-align: middle; height:28px; font-size:15px; line-height: 26px; border:1px solid #ccc;}
select {position: relative; vertical-align: middle; height:30px; font-size:15px; line-height: 28px; border:1px solid #ccc; appearance: none; -webkit-appearance: none; background: url(../img/common/select.png) #fff no-repeat right 10px top 50%;}
select::-ms-expand { display:none; }


textarea {font-size:15px;}

*:focus {outline:none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color:#222; } /* 크롬자동완성색상 */



/* 공통 */
.blind {position:absolute; top:-1000px; text-indent:-9999px; font-size:0 !important;}
.mt10 {margin-top:10px!important;}
.mt20 {margin-top:20px!important;}
.mt30 {margin-top:30px!important;}
.mt50 {margin-top:50px!important;}
.mt80 {margin-top:80px!important;}
.mt100 {margin-top:100px!important;}
.mb10 {margin-bottom:10px!important;}
.mb20 {margin-bottom:20px!important;}
.mb30 {margin-bottom:30px!important;}
.mb50 {margin-bottom:50px!important;}
.mb80 {margin-bottom:80px!important;}
.mb100 {margin-bottom:100px!important;}
.ml20 {margin-left:20px!important;}
.txt_tc {text-align:center!important;}
.txt_tr {text-align:right!important;}
.txt_tl {text-align:left!important;}
.txt_blue {color:#1f4bb4;}
.fl {float:left!important;}
.fr {float:right!important;}
.block {display:block!important;}


/* 상단 공통 */
header {position:absolute; top:0px;left:0; right:0; height:80px; z-index:99; font-weight: 400; min-width:1200px;border-bottom:1px solid rgba(255, 255, 255, .3);}

header h1 {position:absolute; top:25px; left:80px; width:160px; height:31px; overflow:hidden; z-index:10;} 
header h1 a {display:block; position:relative; width:160px; height:31px; }
header h1 a img.on {position:absolute; top:30px; left:0;}

header .bg {position: absolute; top:0; right:0; left:0; width:100%; height:80px; background:#fff; overflow: hidden; opacity:0; transition: all 0.3s; -webkit-transition: all 0.3s; }
header .bg:before {content:""; position:absolute; background:#f4f6fb; height:300px; top:81px; left:0; width:calc(50% - 495px); }
header .bg:after {content:""; position: absolute; top:80px; height:1px; left:0; right:0; background: #efefef;}

header nav {text-align: center;}
header .gnb {display: inline-block; height:80px; box-sizing:content-box; overflow:hidden; transition:height 0.3s; -webkit-transition: height 0.3s; margin-left:-15px;}
header .gnb li {float:left; display:block; }
header .gnb .item {position: relative; text-align: left; font-size:19px; line-height: 80px;  transition:all 0.3s; -webkit-transition: all 0.3s;  height:100%; display: inline-block; padding:0px 25px;}
header .gnb .item > a {color:#ffffff; letter-spacing: -1px; padding:5px; text-align:center; padding:0; position: relative; width:100%; display: block; }
header .gnb .item > a:after {content:''; display: block; position: absolute; overflow: hidden; left:50%; width:0; top:78px; background-color:transparent; transform: skewX(0) scaleX(0); -webkit-transform:skewX(0) scaleX(0); -webkit-transition: all 0.3s; transition: all 0.3s;}
header .gnb .item:hover > a {color:#e50019!important; letter-spacing: -1px; position: relative; }
header .gnb .item:hover > a:after {left:0; right:0; background-color: #e50019; height:4px; transform: scaleX(1); }
header .gnb .item .sub_item {padding-top:20px;}
header .gnb .item .sub_item a {display:block; font-size:15px; color:#555; line-height:34px; transition:all 0.3s; -webkit-transition: all 0.3s;  font-weight: 400; letter-spacing: -1px; margin:0 5px;}
header .gnb .item .sub_item a:hover {color:#e50019;}

header .gnb .item .sub_img {position: fixed; overflow: hidden; opacity: 0; width:0; height:0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s;letter-spacing: -0.25px; }
header .gnb .item:hover .sub_img {opacity: 0; left:0; top:0; padding:110px 0 30px; width:calc(50% - 525px); text-align: right; transition: opacity 0.3s; -webkit-transition: opacity 0.3s;}
header .gnb .item:hover .sub_img img {opacity: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; float:right;}

/* sub gnb*/
header.h_black .gnb .item > a {color:#000;}
header.h_black .util {color:#000;}
header.h_black .util > li > a {display: block; width:100%; height: 100%; line-height: 35px; font-weight:300; color:rgba(0, 0, 0, .8);}
header.h_black .util > li > a:hover {color:#000;}
header.h_black .util > li.Lang > .selectbox > a {border:1px solid #666;color:rgba(0, 0, 0, .8);}
header.h_black .util > li.Lang > .selectbox > a:before {content:"";position:absolute;top: 13px;right:15px;border:solid rgba(0, 0, 0, .7);border-width: 1px 0 0 1px;transform: rotate(225deg);padding:3px;transition: all .3s;}
header.h_black .util > li.Lang > .selectbox > ul {border:1px solid #666; background: #fff; z-index: 99; padding:10px 0;border-bottom:1px solid #666;border-top:0; }
header.h_black .util > li.Lang > .selectbox > ul > li {clear: both; display: block;}
header.h_black .util > li.Lang > .selectbox > ul > li > a {color:#000;opacity: .7;}
header.h_black .util > li.Lang > .selectbox > ul > li > a:hover {opacity:1;color:#000;}


header .util {position: absolute;top:18px;right: 20px;}
header .util > li {float: left; position: relative; font-size:13px; margin:0 8px; transition:all 0.3s; -webkit-transition: all 0.3s; height: 40px; }
header .util > li > a {display: block; width:100%; height: 100%; line-height: 35px; font-weight:300; color:rgba(255, 255, 255, .8);}
header .util > li > a:hover {color:#fff;}

header .util > li.customer a {font-size:21px;padding:5px;border:1px solid;border-radius:50%;width:25px;height:25px;line-height: 25px;}
header .util > li.customer i {margin-left:2px;}

header .util > li.list {font-size:25px;}
header .util > li.Lang > .selectbox {position:relative; float:left; width:110px;}
header .util > li.Lang > .selectbox > a {position:relative;display: block;padding:5px 0 5px 14px;margin:0;line-height: 25px;font-size:14px;font-weight: 400;border:1px solid rgba(255, 255, 255, .2);border-radius:0px;text-align: left;height: 25px;color:rgba(255, 255, 255, .8);}
header .util > li.Lang > .selectbox > a:before {content:"";position:absolute;top: 13px;right:15px;border:solid rgba(255, 255, 255, .5);border-width: 1px 0 0 1px;transform: rotate(225deg);padding:3px;transition: all .3s;}
header .util > li.Lang > .selectbox.on > a:before {transform:rotate(45deg); bottom:19px;}
header .util > li.Lang > .selectbox > ul {display: none; position: absolute; left:0; right:0; top:100%; border:1px solid rgba(255, 255, 255, .2); border-bottom:0; background: #20242e; z-index: 99; padding:10px 0;border-bottom:1px solid rgba(255, 255, 255, .2);border-top:0; }
header .util > li.Lang > .selectbox > ul > li {clear: both; display: block;}
header .util > li.Lang > .selectbox > ul > li > a {display:block; color:#fff; padding:8px 15px; font-size:14px; line-height: 20px; font-weight:400; opacity: .7;}
header .util > li.Lang > .selectbox > ul > li > a:hover {opacity:1;}

/* gnb 마우스 오버시 */

header.active {height:360px;border-bottom:0;}
header.active h1 a img.off {top:-28px}
header.active h1 a img.on {top:0}
header.active .bg {height:360px; opacity:1; box-shadow: 0px 5px 50px 10px rgba(0, 0, 0, .15);}
header.active .gnb {height:360px; }
header.active .gnb .item {color:#222;transition: all 0.3s;}
header.active .gnb .item a {color:#222;}
header.active .gnb .item:hover > a:after {width:100%;}

header.active .util > li.Lang > .selectbox > a {border-color:rgba(0, 0, 0, .5);color:rgba(0, 0, 0, .8); transition:all 0.3s;}
header.active .util > li.Lang > .selectbox > a:before {border-color:rgba(0, 0, 0, .5);}
header.active .util > li.Lang > .selectbox > ul {border-color:rgba(0, 0, 0, .5);}

header.active .util { display:block;}
header.active .util > li:after {background:#ccc;}
header.active .util > li > a {color:#757575;}
header.active .gnb .item .sub_img {display: block; opacity:1; height:219px;}
header.active .gnb .item:hover .sub_img {opacity: 1;}
header.active .gnb .item:hover .sub_img img {opacity: 1;}
header.active .gnb .item .sub_img p.tit {font-size:28px; color:#000; line-height: 40px; width:230px; margin-right:8px; margin-top:10px;  float: right; clear: both; font-weight: 300; }
header.active .gnb .item .sub_img p.txt {font-size:14px; color:#000; line-height: 20px; width:230px; margin-right:8px; margin-top:5px; float: right; clear: both; opacity: .5; font-weight: 300; }

/* 메인 */
#main_nav {position: absolute; left:-100px; top:50%; width:60px; height:100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition:all .5s .6s ease-in-out; -webkit-transition:all .5s .6s ease-in-out; z-index: 80; border-right:1px solid rgba(255, 255, 255, .2)}

#main_nav ul {position:absolute;left: -170px;top: 50%;overflow: hidden;text-align: center;width: 400px;transform: rotate(90deg);}
#main_nav.on {left:0px;}
#main_nav li {position: relative;padding: 15px 20px; display: inline-block; float: left;}
#main_nav li.on a {opacity: 1; color:#1b62cd;}
#main_nav li.on a:hover {opacity: 1;}


#main_nav li a span {font-weight: 700; position: relative;}
#main_nav li.on a span:after {transform:scale(1);-webkit-transform:scale(1);} 
#main_nav li:last-child {margin-bottom: 0;}
#main_nav li a {text-align: left;vertical-align: top;color: #fff;font-size: 14px;line-height: 30px;padding: 5px 0 10px;letter-spacing: 0;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;opacity: .25;}
#main_nav li a:hover {opacity:.6;}

.scroll {position:absolute; bottom:30px; left:50%; opacity: 1; transform:translate(-50%, 0); z-index:1; width:18px; height:30px; border:2px solid #fff; border-radius: 12px;}
.scroll:before{content:'scroll'; display:block; position:absolute; top:32px; left:50%; margin-left:-30px; width:60px; font-size:11px; color:#fff; letter-spacing:1px; text-align: center;}
.scroll .wheel {position:absolute; width:2px; height:8px; background: #fff; border-radius: 2px; top:8px; left:8px; animation:aniscroll 1s ease-out infinite;}
.scroll.on {opacity: 1;}


/* 스크롤 애니메이션 */
@keyframes aniscroll {
	0%{top:5px;}
	50%{top:10px;}
	100%{top:5px;}
}
@-webkit-keyframes aniscroll {
	0%{top:5px;}
	50%{top:10px;}
	100%{top:5px;}
}



.container #fullpage {z-index: 10; background-color:#000; }
.container #fullpage .section h2 {position: absolute; color:#fff; text-shadow: 0px 0px 10px rgba(0, 0, 0, .3); left:50%; top:50%;  z-index: 1; transform: translate(-50%, -50%);}
.container #fullpage .section h2 p {position: absolute; left:50%; top:-100px; transform: translate(-50%, -50%); width:1200px; text-align:center;font-weight:100;letter-spacing: -0.07em;}
.container #fullpage .section h2 p span {font-weight:500;}
.container #fullpage .section h2 p:nth-child(1) {font-size: 60px;line-height: 40px;opacity: 0;margin-top:50px;transition: all 0.7s ease;-webkit-transition:all 0.7s ease;}
.container #fullpage .section h2 p:nth-child(2) {font-size: 60px;line-height: 55px;opacity: 0;margin-top:120px;transition: all 0.7s ease;-webkit-transition:all 0.7s ease;}
.container #fullpage .section h2 p:nth-child(3) {font-size: 60px;line-height: 55px;opacity: 0;margin-top:190px;transition: all 0.7s ease;-webkit-transition:all 0.7s ease;}
.container #fullpage .section h2 p:nth-child(4) {font-size: 60px;line-height: 55px;opacity: 0;margin-top:260px;transition: all 0.7s ease;-webkit-transition:all 0.7s ease;}

.container.load #fullpage .section {position:relative;  min-width: 1200px; min-height:850px; background-repeat: no-repeat;background-position: center center;-webkit-background-size: cover; background-size: cover; display: block;}
.container.load #fullpage > div:last-child {min-height: 100px; background: #fff;}
.container.load #fullpage > div:last-child > div {display: block!important; background: #fff;}

.container.load #fullpage .section.active h2 p:nth-child(1) {opacity: 1; margin-top:0; transition-delay: 1s;}
.container.load #fullpage .section.active h2 p:nth-child(2)  {opacity: 1; margin-top:80px; transition-delay: 1.3s;}
.container.load #fullpage .section.active h2 p:nth-child(3)  {opacity: 1; margin-top:160px; transition-delay: 1.6s;}
.container.load #fullpage .section.active h2 p:nth-child(4)  {opacity: 1; margin-top:240px; transition-delay: 1.9s;}



.main_visual {width:100%; height:100%; min-width: 1280px;  position: absolute; top:0; left:0;}

.main_visual .visual_bg {width:100%; height:100%; top:0; left:0; position: absolute; background:#000;}
.main_visual .visual_bg div {width:100%; height:100%; opacity: 0; position: absolute; transform: scale(1.05) rotate(0.001deg); transition: all 0.5s ease; -webkit-transition:all 0.5s ease;}
.main_visual .visual_bg div.on {opacity: 1; transform: scale(1) rotate(0deg); }
.main_visual .visual_bg div.off {opacity: 0; transform: scale(1.05) rotate(0.001deg); transition: all 0.5s ease; -webkit-transition:all 0.5s ease; }

#fullpage .section .main_visual .visual_menu {text-align: center;position:absolute;bottom:15%;left:50%;transform:translateX(-50%); color:#fff;min-width: 1200px;}
#fullpage .section .main_visual .visual_menu ul {display: inline-block; overflow: hidden; vertical-align: bottom; height:240px;}
#fullpage .section .main_visual .visual_menu li {position:relative; opacity:0; display:inline-block; float:left; box-sizing:border-box; text-align:center; cursor:pointer; transition: all 0.8s ease; -webkit-transition:all 0.8s; padding-left:20px; width:300px; height:240px; margin-top:-80px;}

#fullpage .section .main_visual .visual_menu li .box {opacity: 0;}

#fullpage .section.active .main_visual .visual_menu li .box {display:inline-block; width:100%; height:80px; margin-top:160px; transition: all 0.8s ease; -webkit-transition:all 0.8s ease; position: relative; opacity: 1;}
#fullpage .section.active .main_visual .visual_menu li .box:before {content:""; position: absolute; top:0; left:0; right:0; height:2px; background: rgba(255, 255, 255, .15); transition: all 0.8s ease; -webkit-transition:all 0.8s ease; }
#fullpage .section.active .main_visual .visual_menu li .box:after {content:""; position: absolute; bottom:0; left:0; right:0; height:2px; background: rgba(255, 255, 255, .15); transition: all 0.8s ease; -webkit-transition:all 0.8s ease; }
#fullpage .section.active .main_visual .visual_menu li p.title {font-size:24px; margin-top:20px; opacity: .7; transition: all 0.8s  ease; -webkit-transition:all 0.8s ease; }
#fullpage .section.active .main_visual .visual_menu li p.txt {font-size:15px; line-height: 22px; opacity:1; margin-top:10px; font-weight: 300; letter-spacing: -0.03em;}
#fullpage .section.active .main_visual .visual_menu li p.txt span {opacity: 0;transition: all 0.8s  ease; -webkit-transition:all 0.8s ease; padding:0 5px; display: block;}

#fullpage .section.active .main_visual .visual_menu li {opacity:1; margin-top:0;}
#fullpage .section.active .main_visual .visual_menu li:nth-child(1) {transition-delay: 1.5s;}
#fullpage .section.active .main_visual .visual_menu li:nth-child(2) {transition-delay: 1.8s;}
#fullpage .section.active .main_visual .visual_menu li:nth-child(3) {transition-delay: 2.1s;}
#fullpage .section.active .main_visual .visual_menu li:nth-child(4) {transition-delay: 2.4s;}
#fullpage .section.active .main_visual .visual_menu li:nth-child(5) {transition-delay: 2.7s;}

#fullpage .section.active .main_visual .visual_menu li.on {}
#fullpage .section.active .main_visual .visual_menu li.on .box {height:240px; margin-top:0; opacity: 1;}

#fullpage .section.active .main_visual .visual_menu li.on p.title {font-size: 36px; margin-top:30px; opacity: 1;}
#fullpage .section.active .main_visual .visual_menu li.on p.txt {display: block;}
#fullpage .section.active .main_visual .visual_menu li.on p.txt span {opacity: .75;}

#fullpage .section.active .main_visual .visual_menu li .box .border {position:absolute; background:none;  transition:all .5s; transition-delay: .3s;}
#fullpage .section.active .main_visual .visual_menu li .box .border:nth-of-type(1) {top:0; left:0; width:0; height:2px; opacity: 0;  background:#fff;}
#fullpage .section.active .main_visual .visual_menu li .box .border:nth-of-type(2) {bottom:0; right:0; width:0; height:2px; opacity: 0; background:#fff;}

#fullpage .section.active .main_visual .visual_menu li.on .box .border:nth-of-type(1) {width:100%; opacity: 1;}
#fullpage .section.active .main_visual .visual_menu li.on .box .border:nth-of-type(2) {width:100%; opacity: 1;}

#fullpage .section.main_sec01 .main_visual .visual_menu ul {height:260px;}
#fullpage .section.main_sec01 .main_visual .visual_menu li {height:260px}
#fullpage .section.main_sec01.active .main_visual .visual_menu li .box {margin-top:180px;}
#fullpage .section.main_sec01.active .main_visual .visual_menu li.on .box {height:260px; margin-top:0; opacity: 1;}

#fullpage .section.main_sec02 .main_visual .visual_menu ul {height:260px;}
#fullpage .section.main_sec02 .main_visual .visual_menu li {height:260px}
#fullpage .section.main_sec02.active .main_visual .visual_menu li .box {margin-top:180px;}
#fullpage .section.main_sec02.active .main_visual .visual_menu li.on .box {height:260px; margin-top:0; opacity: 1;}


.main_visual .visual_01 .img01 {background:url('../img/visual/main_img01.jpg') center no-repeat; background-size:cover;}
.main_visual .visual_02 .img01 {background:url('../img/visual/main_img02.jpg') center no-repeat; background-size:cover;}
.main_visual .visual_03 .img01 {background:url('../img/visual/main_img03.jpg') center no-repeat; background-size:cover;}



/* 서브 공통 */
.container {width:100%; position:relative; overflow:hidden; min-width:1200px;}
.sub_visual {width:100%; height:300px; text-align: center; position: relative; overflow:inherit; transition:all 0.5s;margin-top:80px;}
.sub_visual .tbox {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); margin-top:0px; max-width: 800px;}
.sub_visual h2 {color:#fff; font-family: 'play', sans-serif;}
.sub_visual h2 div {display: inline-block; font-size:35px; margin-top:20px;line-height:45px;}
.sub_visual p {color:#fff; font-size:22px; font-weight: 300; }

.sub_visual.company p:after {content:""; position:absolute; left:325px; top:35px; width:150px; height:2px; background: #fff;}
.sub_visual.business p:after {content:""; position:absolute; left:306px; top:35px; width:188px; height:2px; background: #fff;}
.sub_visual.contribute p:after {content:""; position:absolute; left:225px; top:35px; width:185px; height:2px; background: #fff;}
.sub_visual.recruit p:after {content:""; position:absolute; left:316px; top:35px; width:140px; height:2px; background: #fff;}
.sub_visual.precision p:after {content:""; position:absolute; left:93px; top:35px; width:290px; height:2px; background: #fff;}
.sub_visual.invest p:after {content:""; position:absolute; left:307px; top:35px; width:183px; height:2px; background: #fff;}

.sub_visual .visual {transform: scale(1.2); transition:all 2s;}
.container.load .sub_visual .visual {transform: scale(1) rotate(0.001deg);}
.sub_visual.etc h2 div {font-size:38px; font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','Apple SD Gothic Neo','돋움',dotum, sans-serif; }

.sub_visual.company .visual {background: url(../img/visual/sub_company.jpg) no-repeat 50% bottom; background-size:cover; height:100%;}
.sub_visual.business .visual {background: url(../img/visual/sub_business.jpg) no-repeat 50% bottom; background-size:cover; height:100%;}
.sub_visual.contribute .visual {background: url(../img/visual/sub_contribute.jpg) no-repeat 50% bottom; background-size:cover; height:100%;}
.sub_visual.recruit .visual {background: url(../img/visual/sub_recruit.jpg) no-repeat 50% bottom; background-size:cover; height:100%;}
.sub_visual.precision .visual {background: url(../img/visual/sub_precision.jpg) no-repeat 50% bottom; background-size:cover; height:100%;}
.sub_visual.invest .visual {background: url(../img/visual/sub_invest.jpg) no-repeat 50% bottom; background-size:cover; height:100%;}


.sub_main {position:relative; width: 100%; height: 740px;}
.sub_main:before {content:""; position: absolute; left:0; right:0; top:80px; height:1px; background: #efefef; }
.sub_main h2 {color:#1b62cd; font-family: 'play', sans-serif; width:1150px; margin:0 auto; margin-top:200px; padding-left:10px; text-align: center;}
.sub_main h2 div {display: inline-block; font-size:25px; line-height: 100%;}


.sub_main .tbox {z-index: 1; transition: all .5s ease;-webkit-transition: all .5s ease;display:inline-block;position:absolute;left:50%;transform:translateX(-50%); top:140px; z-index:10; width:800px; }
.sub_main .tbox.load {opacity: 1;}
.sub_main .tbox h3 {font-size:50px; line-height:42px; color:#000; display: block; font-weight: 700; text-align: center;position:relative;}
.sub_main .tbox h3:after {content:""; position:absolute; left:-0px; top:50px; width:0%; height:3px; background: #fff;}
.sub_main .tbox p {color:#000; font-size: 15px;  line-height: 22px; opacity: 1; text-align:  center; display:block; margin-top:30px;}

.sub_main .tbox .line { display: block; width: 200px; height:120px; position: relative; position: absolute; left: -80px; top: -70px; }
.sub_main .tbox .line i { background-color: #fff;  display: block;}
.sub_main .tbox .line i.line01 { position: absolute; width: 12px; height: 0px; right: 0; bottom: 160px;  }
.sub_main .tbox .line i.line02 { position: absolute; width: 0; height: 12px; right: 0; top: 0; }
.sub_main .tbox .line i.line03 { position: absolute; width: 12px; height: 0; left: 0; top: 0; }
.sub_main .tbox .line i.line04 { position: absolute; width: 0; height: 12px; left: 0; bottom: 0; }

.sub_main .tbox.load .line i.line01 { height: 40px; transition: .2s ease-in; transition-delay: 2s;}
.sub_main .tbox.load .line i.line02 { width: 100%; transition: .4s linear; transition-delay: 2.2s;}
.sub_main .tbox.load .line i.line03 { height: 100%; transition: .4s linear; transition-delay: 2.6s;}
.sub_main .tbox.load .line i.line04 { width: 60px; transition: .2s ease-out; transition-delay: 3.0s;}


.sub_main:after {content:""; position: absolute; bottom:450px; height:25px; left:0; right:0; background: #fff; }
.sub_main .visual {transform: scale(1.1); top:0; left:0px; right:0px; transition:all 2s; }
.sub_main.load .visual {transform: scale(1) rotate(0.001deg); top:0; opacity: 1;}

.sub_main .mainlist {width:100%; margin:0 auto; position: absolute; bottom:0; display: table; }
.sub_main .mainlist li {display: table-cell; vertical-align: top; position: relative; cursor: pointer; height:450px; transition:all .5s; -webkit-transition:all .5s;}
.sub_main .mainlist li:after {content:""; position:absolute; right:0; top:0px; bottom:0; width:1px; height:450px; background: rgba(255, 255, 255, .3);}
.sub_main .mainlist li:last-child:after {display: none;}
.sub_main .mainlist li .box {display:block; text-align: center; vertical-align: top;}

.sub_main .mainlist li h4 {color:#fff; opacity: 1; font-size:24px; line-height: 24px; vertical-align: bottom; margin-bottom:10px; padding:0; font-weight:400; transition: all .5s; -webkit-transition: all .5s; transition-delay: 0s; margin-top:200px; position: relative; display: inline-block; padding:0 5px 18px;}
.sub_main .mainlist li h4:after {content:""; position: absolute; left:50%; transform: translateX(-50%); width:0; bottom:0; height:2px; background: #1b62cd; transition: all 0s; -webkit-transition: all 0s; transition-delay: 0s;}
.sub_main .mainlist li p {color:#fff; text-overflow:ellipsis; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; line-height: 22px; height:0px; overflow:hidden;  font-size: 15px; width:0; opacity: 0; margin:0 auto; transition:all 0s; -webkit-transition: all 0s; transition-delay: 0s; padding-top:20px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); width:50%; }
.sub_main .mainlist li a {display:block; width:150px; height:0px; margin:auto; text-align:center; line-height:50px; background: #1b62cd; font-size:17px; color:#fff; opacity:0; overflow:hidden; margin-top:30px; transition:all 0s; -webkit-transition: all 0s; transition-delay: 0s;}

.contents {width:100%;word-break: break-all;font-weight: 300;float: left;clear: both;}
.contents h3 {text-align: center; font-weight: 400; font-size:40px; line-height: 40px;letter-spacing: -2px; color: #000000; position: relative;}
.contents h3:before {content:""; position: absolute; left: 50%; bottom: -30px;	margin-left: -25px;	display: inline-block;	width: 50px; height:2px; background-color: #1b62cd;}
.contents h4 {font-size:28px; font-weight: 400; margin-bottom:50px;letter-spacing: -0.03em; }
.contents p {text-align: left;}
.contents section {width:100%; margin:100px auto 0; display: block; clear: both; float: left;}
.contents section > .inner {width:1200px; margin:0 auto; position: relative;}

.btn_group {text-align:center; margin-top:50px; clear: both;}
.btn_group a {padding:0 80px; height:60px; line-height: 60px; font-size:18px; display: inline-block; margin:0 5px; font-weight: 400;}
.btn_group a.ok {background: #1f4bb4; color:#fff; }
.btn_group a.cancel {background: #7d859a; color:#fff; }
.btn_group a.default {background: #7d859a; color:#fff; }


/* 푸터 공통*/
footer {width:100%; margin:0 auto; position: relative; clear: both; padding:40px 0!important; background: #ffffff;border-top:1px solid #ccc;}

.foot_btn_box {position: fixed; bottom: 30px; right: 30px; z-index: 50; }
.foot_btn_box > li { display: block; position:relative; width: 60px; height: 60px; box-shadow:0 1px 4px 3px rgba(0, 0, 0, .06); border-radius: 30px; transition: all 0.3s; margin-bottom:10px;}

.foot_btn_box > .foot_btn_top {float:right; overflow: hidden; opacity:0; border:1px solid #ccc; width:60px; height:60px;}
.foot_btn_box > .foot_btn_top.on {opacity:1;}
.foot_btn_box > .foot_btn_top span {background-color: #fff; text-align: center; display: block;font-size: 12px;letter-spacing: 0;font-weight:bold; padding-top: 27px; height:100%;}
.foot_btn_top:hover {color: #1f4bb4; background: #fff; }
.foot_btn_top:hover:after {border-color: #1f4bb4; top: 20px; }
footer .foot_btn_top:after { width: 6px; height: 6px; display: block; content: ""; position: absolute; top: 23px; left: 26px; border-width: 1px 1px 0 0; border-style: solid; border-color: #333; transform: rotate(-45deg); -transition: all .3s ease; -webkit-transition: all .3s ease;}


footer .foot_box {position: relative; width:1200px; margin:0 auto; display: table;}
footer .foot_box > ul {display: block;clear: both;float: left; }
footer .foot_box > ul li {float: left; padding:0 10px;}
footer .foot_box > ul li:first-child {padding-left:0;}
footer .foot_menu li {position: relative; font-size: 15px; color:#000;}
footer .foot_menu li:after {content:""; position: absolute; right:0; top:7px; width:1px; height:12px; background:rgba(0, 0, 0, .1);}
footer .foot_menu li:last-child:after {display: none;}
footer .foot_menu li a:hover {text-decoration: underline!important;}
footer .foot_info {margin-top:20px;}
footer .foot_info li {font-size:13px; line-height: 20px; color:#555555;} 
footer .foot_info li:nth-child(3) {padding-left:0;clear: both;}
footer .foot_info li span {color:rgba(255, 255, 255, .8)}
footer .foot_copy {clear: both; float: left; font-size:12px; color:#777; letter-spacing: 0; margin-top:5px;}


footer .foot_family {position: absolute; top:50%; right:0; transform: translateY(-50%);}
footer .foot_family > .selectbox {position:relative; float:left; width:200px;}
footer .foot_family > .selectbox > a {position:relative; display: block; padding:5px 0 5px 14px; margin:0; line-height:30px; font-size:14px; font-weight: 400; border:1px solid #ccc; border-radius:0px; text-align: left; height:30px; color:#333;}
footer .foot_family > .selectbox > a:before {content:""; position:absolute; top:19px; right:15px; border:solid #333; border-width: 1px 0 0 1px; transform: rotate(45deg); padding:3px; transition: all .3s;}
footer .foot_family > .selectbox.on > a:before {transform:rotate(-135deg); top:19px;}
footer .foot_family > .selectbox > ul {display: none; position: absolute; left:0; right:0; bottom:100%; border:1px solid #ccc; border-bottom:0; background: #fff; z-index: 99; padding:10px 0; }
footer .foot_family > .selectbox > ul > li {clear: both; display: block;}
footer .foot_family > .selectbox > ul > li > a {display:block; color:#333; padding:8px 15px; font-size:14px; line-height: 20px; font-weight:400; opacity: .7;}
footer .foot_family > .selectbox > ul > li > a:hover {opacity:1;}


#fullpage > div:last-child {min-height: 100px; background: #fff;}
#fullpage > div:last-child > div {display: block!important; background: #fff;}

#fullpage #footer {background: #fff;}
.sub_main+#footer {background: #f8f9fa;}
#fullpage #footer .foot_menu li,
.sub_main+#footer .foot_menu li {color:#222;}
#fullpage #footer .foot_menu li:after,
.sub_main+#footer .foot_menu li:after {background:#ddd;}
#fullpage #footer .foot_info li,
.sub_main+#footer .foot_info li {color:#555;} 
#fullpage #footer .foot_info li span,
.sub_main+#footer .foot_info li span {color:#222;}
#fullpage #footer .foot_copy,
.sub_main+#footer .foot_copy {color:#777;}

#fullpage #footer .foot_family > .selectbox > a,
.sub_main+#footer .foot_family > .selectbox > a {background:#fff; border:1px solid #ccc;  color:#333;}
#fullpage #footer .foot_family > .selectbox > a:before,
.sub_main+#footer .foot_family > .selectbox > a:before{border-color: #000;}
#fullpage #footer .foot_family > .selectbox > ul,
.sub_main+#footer .foot_family > .selectbox > ul {border-color:#ccc; background:#fff;}
#fullpage #footer .foot_family > .selectbox > ul > li > a,
.sub_main+#footer .foot_family > .selectbox > ul > li > a {color:#000; font-size:14px;}

header .util > li.Lang > .selectbox > a,
.sub_main+.util > li.Lang > .selectbox > a {background:rgba(255, 255, 255, .1);border:1px solid #fff;color:rgba(255, 255, 255, .8);}
header .util > li.Lang > .selectbox > a:before,
.sub_main+.util > li.Lang > .selectbox > a:before{border-color: #fff;}
header .util > li.Lang > .selectbox > ul,
.sub_main+.util > li.Lang > .selectbox > ul {border-color:rgba(255, 255, 255, .3); background:#fff;}
header .util > li.Lang > .selectbox > ul > li > a,
.sub_main+.util > li.Lang > .selectbox > ul > li > a {color:#333; font-size:14px;}


/* 서브 탭 */
.sub_tab {display: block; overflow: hidden; width:1200px; margin:0 auto; text-align: center;}

.sub_tab_menu {overflow: hidden; margin:0 auto; margin-bottom:50px; display: block;}
.sub_tab_menu li {float: left;display: inline-block;}
.sub_tab_menu li a {height:70px; line-height: 70px; display: block; position: relative; font-weight: 400; text-align: center;}
.sub_tab_menu li a:before {content:""; position: absolute; border:1px solid #e2e2e2; left:-1px; top:0; bottom:0; right:0;}
.sub_tab_menu li:first-child a:before {left:0;}
.sub_tab_menu li.active {background: #1f4bb4; color:#fff; }
.sub_tab_menu li.active a:before {border: 0;}

.sub_tab_menu.tab2 li {width:50%;}
.sub_tab_menu.tab3 li {width:33%;}
.sub_tab_menu.tab3 li:nth-child(2) {width:34%;}
.sub_tab_menu.tab4 li {width:25%;}
.sub_tab_menu.tab5 li {width:20%;}

.sub_tab_box {display: none; clear: both;}
.sub_tab_box#sub_tab1 {display: block;}