@charset "UTF-8";

#sub #wrapper {padding-top:90px;}



.sub-vis {position:relative; width:100%; height:590px; z-index:1;overflow:hidden;}
.sub-vis .content {position:absolute; top:50%; text-align:center; transform: translateY(-10%); color:#fff; left:0; width:100%; padding:0 30px; z-index:10}
.sub-vis .content h2 {font-size:70px; line-height:1.3em; font-weight: 700;}
.sub-vis .background {position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); -moz-transform:scale(1.09); -webkit-transform:scale(1.09); -o-transform:scale(1.09); transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0;}
.sub-vis.load .background {transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1);}

.sub-vis.bg1 .background {background-image:url('../img/common/vis_company.jpg')}
.sub-vis.bg3 .background {background-image:url('../img/common/vis_contact.jpg')}


#lnb {margin-bottom:100px; background:#fff; border-bottom: 1px solid #dedede;}
.lnb {max-width:1440px; margin:0 auto; padding:0 20px; text-align:center;}
.lnb ul {display:flex;}
.lnb ul li {width:auto; flex:1; text-align:center;}
.lnb ul li a {position: relative; display:flex; align-items:center; justify-content: center; height:80px; color:rgba(2,2,2,.80); font-size:20px; line-height:1.4em; }
.lnb ul li a:after {content:""; position: absolute; bottom:0; left:0; width:100%; height:2px; opacity:0;}
.lnb ul li.active a {color:#002156; font-weight: 700;}
.lnb ul li.active a:after {background:#002156; opacity:1;}




/* content */
#contArea {position:relative; max-width:1540px; width:100%; padding:0 20px; margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}

.real-cont {padding-bottom:150px;}
.real-cont.none {padding-bottom:0;}

.inner {max-width:1540px;}

.sub-title {margin-bottom:44px;text-align:center; font-size:40px; line-height:1.25em; color:#020202;}
.sub-title storng {font-weight: 600;}

.company-inner {position:relative; padding:45px 0 105px; }
.company-inner ul {display:flex; flex-wrap:wrap; margin-left: -20px; margin-bottom:-20px;}
.company-inner ul li {width:calc(33.333333% - 20px); background:#fff; margin-left:20px; margin-bottom:20px; border:1px solid #f0f0f0; padding:27px;}
.company-inner ul li h3 {font-size:24px; line-height:1.4em; font-weight: 600; margin-bottom:10px;}
.company-inner ul li .txt {font-size:15px; line-height:1.5em; color:rgba(2,2,2,.80); margin-bottom:10px; height:calc(1.5em * 1 * 2);}
.company-inner ul li .pic {margin-bottom: 15px;}
.company-inner ul li .pic img {width:100%;}
.company-inner ul li .cnt {display:flex;  font-size:15px; line-height:1.4em; font-weight: 500;}
.company-inner ul li .cnt .col-txt {padding-left: 25px;}
.company-inner ul li .cnt .col-txt:first-child {padding-left:0;}
.company-inner ul li .cnt dl {display:flex;}
.company-inner ul li .cnt dl dt {padding-right:10px;color:#a1a1a1;}
.company-inner ul li .cnt dl dd {padding-left:10px; position: relative; color:#020202;}
.company-inner ul li .cnt dl dd:before {content:""; position: absolute; top:50%; left:0; width:1px; height:10px; background:#a1a1a1; margin-top:-5px;}
.company-inner .bg {position:absolute; z-index:-1; background-repeat:no-repeat; background-position: 50% 50%; background-size:contain; }
.company-inner .bg.bg1 {top:63px; left:0; width:718px; height: 524px; background-image: url('../img/sub/bg_company_1.png');}
.company-inner .bg.bg2 {bottom:0; left:0; width:960px; height: 322px; background-image: url('../img/sub/bg_company_2.png');}
.company-inner .bg.bg3 {top:0; right:0; width:519px; height: 508px; background-image: url('../img/sub/bg_company_3.png');}

:lang(en) .company-inner ul li h3 {height:calc(1.5em * 1 * 2);}
:lang(en) .company-inner ul li .txt {height:calc(1.5em * 1 * 3);}
:lang(en) .company-inner ul li .cnt {display:block;} 
:lang(en) .company-inner ul li .col-txt {padding-left: 0; margin-bottom:5px;}
:lang(en) .company-inner ul li .col-txt:last-child {margin-bottom:0;}

:lang(zh) .company-inner ul li h3 {height:calc(1.5em * 1 * 2);}

.business-inner {height:calc(100vh - 90px);}
.business-inner .biz-layout {display:flex;position:relative; height:100%; overflow:hidden;}
.business-inner .biz-info {width:30%; height:100%; padding:6% 4% 0;  transition: all 0.6s ease;}
.business-inner .title-zone {margin-bottom: 40px;}
.business-inner .title-zone h2 {font-size:50px; line-height:1.1em; color:#002156; font-weight: 700; margin-bottom:14px;}
.business-inner .title-zone p {font-size:22px; line-height:1.4em; color:#020202; font-weight: 700; opacity:.60;}
.business-inner .cnt {font-size:18px; line-height:1.4em; color:#020202; opacity:.80; margin-bottom:25px;}
.business-inner .cnt:last-child {margin-bottom:0;}
.business-inner .biz-cont {width:70%; height:100%; display:flex; overflow: hidden;}
.business-inner .biz-cont .biz-col {flex:1; will-change: flex; position: relative; transition: all 0.6s ease; overflow:hidden; opacity:0; transform: translateX(-100px);}
.business-inner .biz-cont .biz-col.animate {opacity:1; transform: translateX(0);}
.business-inner .biz-cont .biz-col a {display:block; height:100%; width:100%; padding:122px 50px; color:#fff;}
.business-inner .biz-cont .biz-col .content {position: relative; z-index:1;}
.business-inner .biz-cont .biz-col .num {font-size:30px; line-height:1.3em; font-weight: 500; margin-bottom:10px; transition: all 0.6s ease;}
.business-inner .biz-cont .biz-col h3 {font-size:40px; line-height:1.3em; font-weight: 700; transition: all 0.6s ease;}
.business-inner .biz-cont .biz-col .bg-image {position:absolute; top:0; left:0; width:0; height: 100%;  background-repeat: no-repeat; background-position: 50% 50%; background-size:cover; z-index:0;}
.business-inner .biz-cont .biz-col.animate .bg-image {width:100%;}
.business-inner .biz-cont .biz-col.biz01 .bg-image {background-image:url('../img/sub/bg_business_01.jpg'); transition: width .8s ease, left 0.2s ease;}
.business-inner .biz-cont .biz-col.biz02 .bg-image {background-image:url('../img/sub/bg_business_02.jpg'); transition: width 1.2s ease, left 0.3s ease;}
.business-inner .biz-cont .biz-col.biz03 .bg-image {background-image:url('../img/sub/bg_business_03.jpg'); transition: width 1.6s ease, left 0.4s ease;}
.business-inner .biz-cont .biz-col.hover .num {transform:scale(1.04);}

.business-inner .tab-content {position:absolute; top:0; left:0; width:100%; height:100%; transition: all 0.6s ease-out; transform:translateX(30%); opacity:0; background-repeat: no-repeat; background-position: 50% 50%; background-size:cover; z-index:-1;}
.business-inner .tab-content.tab-active {z-index:99; opacity:1; transform:translateX(0);}
.business-inner #page01.tab-content {background-image:url('../img/sub/bg_business_full_01.jpg');}
.business-inner #page02.tab-content {background-image:url('../img/sub/bg_business_full_02.jpg');}
.business-inner #page03.tab-content {background-image:url('../img/sub/bg_business_full_03.jpg');}

.business-inner .tab-inner {color:#fff; padding: 6% 4%;}
.business-inner .tab-inner .title {margin-bottom: 30px;}
.business-inner .tab-inner .title p {font-size:18px; line-height:1.4em; font-weight: 600; margin-bottom:10px;}
.business-inner .tab-inner .title h2 {font-size:80px; line-height:1.4em;font-weight: 700;}
.business-inner .tab-inner .cnt-info {padding-left: 30%;}
.business-inner .tab-inner .cnt-info .content {margin-bottom: 10%; max-width:600px; width:100%;}
.business-inner .tab-inner .cnt-info .content .cnt {font-size:20px; line-height:1.5em; margin-bottom:25px; color:#fff}
.business-inner .tab-inner .cnt-info .content .cnt:last-child {margin-bottom:0;}
.business-inner .tab-inner .cnt-info .mail-info .tit {position: relative; padding-left: 32px; font-size:22px; line-height:1.4em; font-weight: 600; margin-bottom:12px;}
.business-inner .tab-inner .cnt-info .mail-info .tit:before {content:""; position: absolute; top:6px; left:0; width:23px; height: 15px; background:url('../img/sub/ico_mail.png') 50% 50% no-repeat; background-size:contain;}
.business-inner .tab-inner .cnt-info .mail-info p {font-size:16px; line-height:1.4em;}
.business-inner .tab-close {position: absolute; bottom:14%; left:4%; font-size:16px; line-height:1.4em; font-weight: 600; color:#fff; padding-left: 50px; padding-bottom:10px; border-bottom: 1px solid #fff;}
.business-inner .tab-close:before {content:""; position:absolute; top:5px; left:0; width:13px; height: 11px; background:url('../img/sub/bt_back.png') 50% 50% no-repeat; background-size:contain;}

/* tab-active 애니메이션 - 순차적으로 왼쪽에서 나타나기 */
.business-inner .tab-content .tab-inner .title h2,
.business-inner .tab-content .tab-inner .title p,
.business-inner .tab-content .tab-inner .cnt-info .content .cnt,
.business-inner .tab-content .tab-inner .cnt-info .mail-info,
.business-inner .tab-content .tab-close {
	opacity: 0;
	transform: translateX(-80px);
	transition: all 0.6s ease;
}

.business-inner .tab-content.tab-active .tab-inner .title h2 {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.3s;
}

.business-inner .tab-content.tab-active .tab-inner .title p {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.3s;
}

.business-inner .tab-content.tab-active .tab-inner .cnt-info .content .cnt {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.6s;
}

.business-inner .tab-content.tab-active .tab-inner .cnt-info .mail-info {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.9s;
}

.business-inner .tab-content.tab-active .tab-close {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 1.2s;
}

.office-maps {height:100vh; background:#f4f4f4; padding:60px 0; overflow:hidden;}
.office-maps .inner {max-width:1460px; display:flex;}
.office-maps .map-col {width:calc(50% - 20px); height:calc(100vh - 120px); display:flex; align-items: center; justify-content: center; margin-left:20px; text-align:center; background:#fff; padding: 14px;}
.office-maps .map-col:first-child {margin-left:0;}
.office-maps .map-col .maps {position: relative; }
.office-maps .marker-btn {position:absolute; height:67px; display:flex; align-items: flex-end;}
.office-maps .marker-btn .point {display:block; width:35px; height: 38px;  background:url('../img/sub/mark.png') 50% 50% no-repeat; border:0;}
.office-maps .marker-btn.marker_btn1 {top:48.36%; left:36%;}
.office-maps .marker-btn.marker_btn2 {top:49.7%; left:44.65%;}
.office-maps .marker-btn.marker_btn3 {top:53.6%; left:39%;}
.office-maps .marker-btn.marker_btn4 {top:14.6%; left:2%;}

.office-maps .marker-btn.active .point {background-image:url('../img/sub/mark_on.png'); width:62px; height: 67px;}
.office-maps .title {position:absolute; cursor: pointer; width:140px; transition: all 0.6s ease; background:#f4f4f4; padding:0 3%; height:28px; display:flex; align-items: center; justify-content: center; align-content: center; border-radius: 28px; font-size:15px; line-height:1.3em; color:#51586a;}
.office-maps .title.tit_1 {top:52%; left:-20px; height:50px; border-radius:25px;}
.office-maps .title.tit_2 {top:54%; left:52.6%; }
.office-maps .title.tit_3 {top:61%; left:0;}
.office-maps .title.tit_4 {top:12%; left:0;}
.office-maps .title.active {background:#001a56; color:#fff; flex-wrap:wrap;}
.office-maps .title.active span {display:block; width:100%;}
.office-maps .title.tit_1.active {top:48%;}
.office-maps .title.tit_2.active {top:49%; left:57%}
.office-maps .title.tit_4.active {top:2%;}

:lang(en) .office-maps .title {width:160px; height:50px; border-radius: 25px;}
:lang(en) .office-maps .title.tit_1 {top:50%; left:-30px}
:lang(en) .office-maps .title.tit_4 {width:160px; height:28px; border-radius: 28px;}



:lang(zh) .office-maps .title {width:160px; height:50px; border-radius: 25px;}
:lang(zh) .office-maps .title.tit_1 {top:50%; left:-30px}
:lang(zh) .office-maps .title.tit_4 {width:160px; height:28px; border-radius: 28px;}



.office-maps .map-content {position:absolute;  max-width:403px; text-align:left; width:100%; background:#fff; padding:30px; z-index:20; box-shadow:5px 0 32px rgba(0,0,0,.17); display:none;}
.office-maps .map-content h3 {position: relative; padding-left: 14px; font-size:20px; line-height:1.4em; color:#020202;font-weight: 500; margin-bottom:20px;}
.office-maps .map-content h3:before {content:""; position:absolute; top:3px; left:0; width:4px; height: 20px; background:#002156;}
.office-maps .map-content dl {display:flex; margin-bottom:10px; font-size:15px; line-height:1.4em;}
.office-maps .map-content dl:last-child {margin-bottom:0;}
.office-maps .map-content dl dt {width:98px; font-weight: 600;}
.office-maps .map-content dl dd {flex:1 1 auto; min-width:0; width:1%; opacity:.90;}
.office-maps .map-content#map1 {top:50%; left:48%;}
.office-maps .map-content#map2 {top:58%; left:72%;}
.office-maps .map-content#map3 {top:60%; left:52%;}
.office-maps .map-content#map4 {top:24%; left:12%;}
.office-maps .map-content .map-close {position:absolute; top:26px; right:30px; width:20px; height:20px; opacity:1;}
.office-maps .map-content .map-close:before,
.office-maps .map-content .map-close:after {content:" "; position:absolute; top:50%; left:0; width:100%; height:1px; background:#666;}
.office-maps .map-content .map-close:before {transform:rotate(45deg);}
.office-maps .map-content .map-close:after {transform:rotate(-45deg);}


.dep1-company--fc #lnb,
.dep1-contact--fc #lnb {display:none;}


.about-inner {margin-bottom:100px; display:flex;}
.about-inner .pic {width:640px; margin-right: 110px; text-align:right}
.about-inner .info {flex:1 1 auto; min-width:0; width:1%;}
.about-inner .info .title {margin-bottom: 60px;}
.about-inner .info .title p {font-size:20px; line-height:1.4em; color:#020202;}
.about-inner .info .title .tit {font-size:48px; line-height:1.4em; color:#002156; font-weight: 600;}
.about-inner .info .cnt {margin-bottom:20px; font-size:15px; line-height:1.67em; color:#020202;}
.about-inner .info .cnt:last-child {margin-bottom:0;}

.doc-tit {font-size:30px ;line-height:1.4em; font-weight: 700; color:#020202; margin-bottom:25px;}

.org-inner .box {background:#f6f6f6; padding:100px 20px; text-align:center;}

:lang(en) .org-inner {display:none;}

.history-head {background:url('../img/sub/history_bg.jpg') 50% 50% no-repeat; background-size:cover; height:406px; display:flex; align-items: center; padding:20px 75px; color:#fff; margin-bottom:125px;}
.history-head dl dt {font-size:40px; line-height:1.4em;font-weight: 600; margin-bottom:12px;}
.history-head dl dd {font-size:20px; line-height:1.5em;}

.history {position:relative;}
.history ul {position: relative; display:flex; justify-content: flex-end; padding-bottom:30px;}
.history ul:after {content:""; position:absolute; top:30px; left:50%; margin-left:-.5px; width:1px; height:100%; background:#d7d7d7; z-index:-1;} 
.history ul:last-child {padding-bottom:0;}
.history ul li {width:50%; padding:0 80px; position:relative;}
.history ul li:before {content:""; position:absolute; top:30px; left:-5px; width:10px; height: 10px; background:#002156; border-radius: 100%;}
.history ul li .year {font-size:55px; line-height:1.4em; font-weight: 700; color:#002156; margin-bottom:26px;}
.history ul li dl dd {font-size:18px; line-height:1.4em; color:#020202; margin-bottom:10px;}
.history ul li dl dd:last-child {margin-bottom:0;}
.history ul:nth-child(even) {justify-content: flex-start;  text-align:right;}
.history ul:nth-child(even) li:before {left:auto; right:-5px;}
.history ul:last-child:after {display:none;}

/* contact */

.mailform-head {margin-bottom:40px; font-size:35px; line-height:1.3em; font-weight: 700; color:#020202;}
.required {color:#ce2222}
.mailform table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #292929;}
.mailform table tbody th {padding:12px 30px; vertical-align: middle; color:#020202; background:#e9ecf0; font-size:15px; font-weight:600; line-height:1.5em; border-bottom:1px solid rgba(140,146,157,.60);}
.mailform table tbody td {padding:12px 20px; vertical-align: middle; color:#292929; font-size:15px; font-weight:300; line-height:1.5em; border-bottom:1px solid rgba(140,146,157,.60);}
.mailform table tbody td.tel .input {width:calc(33% - 10px);}
.mailform .input {height:50px; width:100%; border:1px solid rgba(140,146,157,.60); background-color:#fff; color:#292929; font-size:15px;}
.mailform textarea.input {height:205px; padding:20px 20px; background-color:#fff; border:1px solid rgba(140,146,157,.60);}

.mailform .required {vertical-align:middle;}
.mailform .privacy_box--fc {margin-top:0;}
.mailform .privacy_box--fc {border:0; font-size:15px; line-height:1.4em; display:flex; color:#292929; min-height:96px; padding:30px 20px; background:#e9ecf0; margin-bottom:10px;}
.mailform .privacy_box--fc pre {font-family: "Pretendard", sans-serif !important;}
.mailform input[type="checkbox"] + label {font-size:15px; padding-left:28px; line-height:1.4em; padding-top:1px; color:#000; font-weight: 400;}
.mailform input[type="checkbox"] + label:before {content:""; top:0; background-color:#fff; width:20px; height:20px; border-radius:4px; border:1px solid #193767; background-position:50% 50%; background-repeat: no-repeat;}
.mailform input[type="checkbox"]:checked  + label:before {background-color:#193767;background-image:url('../img/bbs/checkbox_on.png');}
.mailform .captcha_box--fc {display:flex; align-items: center; margin-top:0;}
.mailform .captcha_box--fc a {border:0; margin: 0 10px;}
.mailform .captcha_box--fc input { width:100%; max-width:400px; height:50px; border:1px solid rgba(140,146,157,.60); color:#292929; font-size:15px; padding-left:20px;}

.filebox {position:relative; display:flex;}
.filebox label {order:2; width:185px; margin-left:10px; height:100%; background: #002156; color:#fff; text-align:center; font-size:1.2rem; line-height:50px; transition: .3s;}
.filebox label:hover {background:#002156; color:#fff;}
.filebox .upload-name {order:1;height:50px; background:#fff; border:1px solid rgba(140,146,157,.60);   width:100%; padding:0 20px 0; font-size:15px; line-height:1.4em;}
.mailform + .buttons {margin-top:60px;}

.buttons {margin:30px 0;}
.buttons:after {content:" "; display:block; clear:both;}
.buttons .cen {text-align:center;}
.buttons .cen .btn-pack {margin:0 2px;}
.buttons .fr {float:right;}
.buttons .fl {float:left;}
.buttons a {text-decoration:none;}
.buttons a,.buttons input {vertical-align:top;}
.buttons + .paginate {margin-top:20px;}

.btn-pack {display:inline-block !important; text-align:center !important; position:relative;margin:0;padding:0 10px;background:#f2f2f2;color:#151515;border:1px solid #151515;text-decoration:none !important;vertical-align:top;white-space:nowrap;cursor:pointer;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.btn-pack.form-submit {width:220px; height:60px; border:0; background:#002156; font-size:16px; line-height:60px; color:#fff;font-weight:500; padding:0 30px;}