@import url("layout.css");
/*-------------------------------------------------
Author : SY,CHo
Create date : 2019. 10. 01.
-------------------------------------------------*/

body {line-height: 1;}

#wrap {position: relative; overflow: hidden;}
#wrap:before {position: absolute; top: 12.5rem; left: 0; width: 100%; height: 36.5rem; background-color: #efefef; content: "";}

/* VISUAL */
#visual {position: relative; width: 100%; height: 32rem; text-align: center; font-family: 'Noto Sans KR'; color: #fff; overflow: hidden;}
#visual .container {position: relative; display: inline-block; width: auto; max-width: 100%; height: 100%;}
#visual .link {position: absolute; top: 0; right: 0; width: 385px; height: 100%; overflow: hidden;}
#visual .link > li {float: left; width: 100%; height: 25%;}
#visual .link > li + li {margin-top: 1px;}
#visual .link > li a {display: block; padding: 3rem 3rem; width: 100%; height: 100%; text-align: left; font-size: 0.9rem; background-color: rgba(106,87,78,0.85); transition: all .2s ease; -webkit-transition: all .2s ease;}
#visual .link > li a strong {position: relative; display: inline-block; margin-bottom: 0.15rem; padding-right: 0.5rem; font-weight: 800;}
#visual .link > li a strong:before {position: absolute; top: 0.15rem; right: 1.5rem; font-family: 'xeicon'; font-size: 1rem; content: "\eb36"; opacity: 0; transition: all .2s ease .2s; -webkit-transition: all .2s ease .2s;}
#visual .link > li a strong:after {position: absolute; top: -0.25rem; right: 0; width: 4px; height: 4px; background-color: #fff; border-radius: 50%; content: ""; transition: all .2s ease; -webkit-transition: all .2s ease;}
#visual .link > li a span {display: block;}
#visual .link > li a p {padding-left: 0.5rem; opacity: 0.1;}
#visual .link > li a:hover {background-color: rgba(172,87,42,0.8);}
#visual .link > li a:hover strong:before {right: 0.5rem; opacity: 1;}
#visual .link > li a:hover strong {display: block;}
#visual .link > li a:hover strong:after {position: absolute; top: 0; right: 0; width: 24px; height: 24px; background-color: rgba(255,255,255,0.3); content: "";}

#visual .text-box {position: absolute; top: 7.5rem; left: 4.5rem; text-align: left;}
#visual .text-box .line1 {margin-bottom: 1rem; font-size: 3.35rem;}
#visual .text-box .line2 {font-size: 1.9rem;}

/* 초기화 */
#visual .text-box {transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.5s ease; -webkit-transition: all 0.5s ease;}
#visual .text-box em{margin-left: -10px; opacity: 0; visibility: hidden; transition: all 0.025s ease; -webkit-transition: all 0.025s ease;}
/* active */
#visual.active .text-box {opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}
#visual.active .text-box em{margin-left: 0; opacity: 1; visibility: visible;}
#visual.active .text-box p em:nth-of-type(1){transition-delay: 0.5s; -webkit-transition-delay: 0.5s;}
#visual.active .text-box em:nth-of-type(2){transition-delay: 0.515s; -webkit-transition-delay: 0.515s;}
#visual.active .text-box em:nth-of-type(3){transition-delay: 0.53s; -webkit-transition-delay: 0.53s;}
#visual.active .text-box em:nth-of-type(4){transition-delay: 0.545s; -webkit-transition-delay: 0.545s;}
#visual.active .text-box em:nth-of-type(5){transition-delay: 0.56s; -webkit-transition-delay: 0.56s;}
#visual.active .text-box em:nth-of-type(6){transition-delay: 0.575s; -webkit-transition-delay: 0.575s;}
#visual.active .text-box em:nth-of-type(7){transition-delay: 0.59s; -webkit-transition-delay: 0.59s;}
#visual.active .text-box em:nth-of-type(8){transition-delay: 0.605s; -webkit-transition-delay: 0.605s;}
#visual.active .text-box em:nth-of-type(9){transition-delay: 0.62s; -webkit-transition-delay: 0.62s;}
#visual.active .text-box em:nth-of-type(10){transition-delay: 0.635s; -webkit-transition-delay: 0.635s;}
#visual.active .text-box em:nth-of-type(11){transition-delay: 0.65s; -webkit-transition-delay: 0.65s;}
#visual.active .text-box em:nth-of-type(12){transition-delay: 0.665s; -webkit-transition-delay: 0.665s;}
#visual.active .text-box em:nth-of-type(13){transition-delay: 0.68s; -webkit-transition-delay: 0.68s;}
#visual.active .text-box em:nth-of-type(14){transition-delay: 0.695s; -webkit-transition-delay: 0.695s;}
#visual.active .text-box em:nth-of-type(15){transition-delay: 0.71s; -webkit-transition-delay: 0.71s;}
#visual.active .text-box em:nth-of-type(16){transition-delay: 0.725s; -webkit-transition-delay: 0.725s;}
#visual.active .text-box em:nth-of-type(17){transition-delay: 0.74s; -webkit-transition-delay: 0.74s;}
#visual.active .text-box em:nth-of-type(18){transition-delay: 0.755s; -webkit-transition-delay: 0.755s;}
#visual.active .text-box em:nth-of-type(19){transition-delay: 0.77s; -webkit-transition-delay: 0.77s;}
#visual.active .text-box em:nth-of-type(20){transition-delay: 0.785s; -webkit-transition-delay: 0.785s;}
#visual.active .text-box em:nth-of-type(21){transition-delay: 0.8s; -webkit-transition-delay: 0.8s;}
#visual.active .text-box em:nth-of-type(22){transition-delay: 0.815s; -webkit-transition-delay: 0.815s;}
#visual.active .text-box em:nth-of-type(23){transition-delay: 0.83s; -webkit-transition-delay: 0.83s;}
#visual.active .text-box em:nth-of-type(24){transition-delay: 0.845s; -webkit-transition-delay: 0.845s;}
#visual.active .text-box em:nth-of-type(25){transition-delay: 0.86s; -webkit-transition-delay: 0.86s;}
#visual.active .text-box em:nth-of-type(26){transition-delay: 0.875s; -webkit-transition-delay: 0.875s;}
#visual.active .text-box em:nth-of-type(27){transition-delay: 0.89s; -webkit-transition-delay: 0.89s;}
#visual.active .text-box em:nth-of-type(28){transition-delay: 0.905s; -webkit-transition-delay: 0.905s;}
#visual.active .text-box em:nth-of-type(29){transition-delay: 0.92s; -webkit-transition-delay: 0.92s;}
#visual.active .text-box em:nth-of-type(30){transition-delay: 0.935s; -webkit-transition-delay: 0.935s;}

.section01 {position: relative; margin-top: 2.5rem; height: 135px;}
.section01:before {position: absolute; top: 0; left: 0; width: 80%; height: 100%; background-color: #fff; content: "";}
.section01 .container {position: relative; padding: 2rem 0; height: 100%;}
.section01 h2 {float: left; display: inline-block; width: 10rem; font-size: 1.5rem;}
.section01 h2 strong {font-weight: 700;}
.newsWrap {float: left; width: calc(100% - 10rem);}
.newsWrap li {float: left;}
.newsWrap li a {position: relative; display: block; padding-left: 3.5rem; color: #343434;}
.newsWrap li a span {position: absolute; top: 0; left: 0; width: 2.4rem; height: 100%; line-height: 1.7; text-align: center; font-size: 1.2rem; font-weight: 500; color: #fff; background: #d1ccca;}
.newsWrap li a strong {display: block; margin-bottom: 0.5rem; font-style: italic;}
.newsWrap li a p {font-size: 0.9rem;}
.newsWrap li.active a {color: #a34a1f; font-style: italic;}
.newsWrap li.active a span {background: #d66d36;}

.section01 .bx-controls {position: absolute; bottom: 0; left: 0; width: 100%; height: 22px;}
.section01 .bx-controls:before {position: absolute; top: 16px; left: 0; width: 100%; height: 1px; background: #f4f3f3; content: "";}
.section01 .bx-controls a {position: relative; width: 48px; height: 16px; color: transparent; border-bottom: 1px solid #c4c0bf; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section01 .bx-controls .bx-prev {float: left;}
.section01 .bx-controls .bx-next {float: right;}
.section01 .bx-controls a:before {position: absolute; bottom: -6px; width: 11px; height: 11px; background: rgba(0,0,0,0.1); border-radius: 50%; content: ""; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section01 .bx-controls a.bx-prev:before {left: -4px;}
.section01 .bx-controls a.bx-next:before {right: -4px;}
.section01 .bx-controls a:after {position: absolute; top: 0; width: 1px; height: 100%; background: #c4c0bf; content: ""; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section01 .bx-controls a.bx-prev:after {left: 8px; transform: skewX(-45deg); -webkit-transform: skewX(-45deg);}
.section01 .bx-controls a.bx-next:after {right: 8px; transform: skewX(45deg); -webkit-transform: skewX(45deg);}

.section01 .bx-controls a.bx-next,
.section01 .bx-controls a:hover {border-bottom-color: #3c3c3c;}
.section01 .bx-controls a.bx-next:before,
.section01 .bx-controls a:hover:before {background: rgba(255,180,0,0.2);}
.section01 .bx-controls a.bx-next:after,
.section01 .bx-controls a:hover:after {background: #3c3c3c;}

.section02 {margin-top: 3.5rem; height: 25rem;}
.section02 .container {}
.section02 h2 {position: relative; text-align: center; font-size: 1.5rem; font-weight: 700; color: #1b1b1b;}
.section02 h2:before {position: absolute; top: -15px; left: 0; width: 100%; font-size: 1.2rem; font-weight: 400; font-family: 'Daehan'; color: #efefef; content: "Careers"; z-index: -1;}

.tabWrap {position: relative; margin-top: 1rem; height: 23rem; text-align: center;}
.tabWrap .tab {display: inline-block; margin: 0 auto;}
.tabWrap .tab > li {float: left;}
.tabWrap .tab > li > a {position: relative; display: inline-block; margin: 0 1rem; padding: 0 0.5rem; height: 1.5rem; line-height: 1.5rem; color: #5f5f5f;}
.tabWrap .tab > li > a:before {position: absolute; bottom: 0; left: 0; width: 0; height: 0.5rem; background: #ffde9f; content: ""; z-index: -1; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}

.tabData {position: absolute; top: 3.5rem; left: 0; display: none; text-align: left; z-index: 1;}
.tabData .slick-list {overflow: hidden;}
.tabData .box {float: left; margin-right: 1rem;}
.tabData .box a {position: relative; display: block; padding: 2rem; width: 310px; background: #fff; border: 7px solid #e6e6e6; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.tabData .box .line1 {color: #d95627; font-weight: 400; font-style: italic;}
.tabData .box .line2 {display: block; margin-top: 1rem; height: 5rem; line-height: 1.75; font-size: 0.9rem; color: #2f2f2f; overflow: hidden;}
.tabData .box .line3 {display: block; margin-top: 3rem;}
.tabData .box .line3:before {display: inline-block; margin-right: 0.25rem; font-family: 'xeicon'; content: "\ea2c";}
.tabData .box .line4 {position: absolute; bottom: 0; left: 0; padding: 0 2rem; width: 100%; height: 0; line-height: 1.75; color: #fff; background: url(../../images/korean/main/pattern.png) repeat left top; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.tabData .box .line4:after {position: absolute; bottom: 1.5rem; left: 50%; margin-left: -1.35rem; width: 2.7rem; height: 2.7rem; line-height: 2.6rem; text-align: center; font-family: 'xeicon'; font-size: 2rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; content: "\e913"; opacity: 0; transition: all 0.25s ease 0.25s; -webkit-transition: all 0.25s ease 0.25s;}
.tabData .box a:hover {border-color: #fff;}
.tabData .box a:hover .line4 {padding: 2rem; height: 100%;}
.tabData .box a:hover .line4:after {opacity: 1;}

.btnWrap {position: absolute; left: 0; bottom: 0; display: none; width: 100%; height: 2rem; overflow: hidden;}
.btnWrap:before {position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #dedad4; content: "";}

.btnWrap a {position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; color: transparent; background: #fff; border-radius: 50%; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.btnWrap a:before {position: absolute; top: 0; left: 0; width: 100%; height: 1.5rem; line-height: 1.5rem; text-align: center; font-family: 'xeicon'; font-size: 1rem; color: #b9b5b0; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.btnWrap a.prev:before {content: "\e906";}
.btnWrap a.next:before {content: "\e907";}
.btnWrap a.next,
.btnWrap a:hover {background: #707070;}
.btnWrap a.next:before,
.btnWrap a:hover:before {color: #fff;}

.btnWrap .more {float: left; width: 2rem; height: 2rem; border: 1px solid #dedad4;}
.btnWrap .more:before {height: 2rem; line-height: 1.9rem; content: "\e913";}
.btnInner {float: right; position: relative; display: inline-block; padding: 0.25rem; height: 2rem; line-height: 1.4rem; border-radius: 1rem; background: #fff; border: 1px solid #dedad4;}
.btnInner a,
.btnInner .pager {float: left; display: inline-block;}
.btnInner .pager {margin: 0 0.5rem; color: #b3b3b3;}
.btnInner .pager em {color: #e2a125;}

/* 탭 - active */
.tabWrap .tab > li > a:hover,
.tabWrap .tab > li.active > a {color: #2f2f2f;}
.tabWrap .tab > li > a:hover:before,
.tabWrap .tab > li.active > a:before {width: 100%;}
.tabWrap .tab > li.active .tabData,
.tabWrap .tab > li.active .btnWrap {display: block;}

.section03 {padding: 5rem 0; background: url(../../images/korean/main/section03.gif) no-repeat center bottom; background-size: 100% auto; overflow: hidden;}
.section03 h2 {margin-bottom: 1rem; font-size: 1rem; color: #111;}
.section03 .left,
.section03 .box {float: left;}
.section03 .left {width: 15.5rem;}
.section03 .box01 {padding: 1.5rem; width: 100%; height: 14.5rem; background: #e1d9cc;}
.section03 .box01 h2 {margin-bottom: 1.5rem;}
.formatWrap {position: relative; padding: 0 3rem; height: 8.5rem;}
.formatWrap .list > li {text-align: center;}
.formatWrap .list > li .img {height: 6.5rem;}
.formatWrap .list > li .title {margin-top: 0.75rem; height: 1rem; color: #3f3f3f; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.formatWrap .bx-controls a {position: absolute; top: 2.75rem; display: inline-block; padding-left: 2rem; width: 2rem; height: 2rem; background: rgba(255,255,255,0.4); border-radius: 50%; overflow: hidden;}
.formatWrap .bx-controls a:after {position: absolute; top: 0; left: 0; width: 100%; line-height: 2rem; text-align: center; font-family: 'xeicon'; font-size: 1rem;}
.formatWrap .bx-prev {left: 0;}
.formatWrap .bx-next {right: 0;}
.formatWrap .bx-prev:after {content: "\e93b";}
.formatWrap .bx-next:after {content: "\e93e";}
.formatWrap a.bx-next,
.formatWrap a:hover {background: #fff;}

.section03 .box02 {margin-top: 1rem; padding: 1.5rem; width: 100%; height: 12rem; color: #fff; background: #86756c url(../../images/korean/main/section03_box02.png) no-repeat 85% 80%;}
.section03 .box02 h2 {color: inherit;}
.section03 .box02 .txt {line-height: 1.5;}
.section03 .box02 .link {margin-top: 3rem; line-height: 1rem;}
.section03 .box02 .link:before {display: inline-block; margin-right: 0.25rem; width: 1rem; height: 1rem; text-align: center; font-family: 'xeicon'; font-size: 0.7rem; color: #86756c; border-radius: 50%; background: rgba(255,255,255,0.5); content: "\e90b";}

.section03 .box03 {margin-left: 1rem; width: calc(100% - 33rem); height: 27.75rem;}
.section03 .box03 a {position: relative; display: block;}
.section03 .box03 a:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34,34,34,0.75); content: "";}
.section03 .box03 a > img {width: 100%; height: 100%}
.section03 .box03 p {position: absolute; left: 0; width: 100%; text-align: center; color: #fff; z-index: 1;}
.section03 .box03 .title {top: 43%;}
.section03 .box03 .play {top: 49%;}
.section03 .box03 .more {bottom: 9%; opacity: 0.5;}
.section03 .box03 span {position: absolute; left: 50%; width: 1px; background: rgba(255,255,255,0.2); z-index: 1;}
.section03 .box03 .bar01 {top: 0; height: 40%;}
.section03 .box03 .bar02 {bottom: 0; height: 6%;}

.section03 .box04 {margin-left: 1rem; width: 15.5rem; height: 27.75rem; background: #efc561;}
.section03 .box04 h2 {margin-bottom: 0; padding: 1.5rem 1.5rem 0.5rem;}
.section03 .box04 li a {position: relative; display: block; padding-left: 4.5rem; width: 100%; height: 4rem; line-height: 4rem;}
.section03 .box04 li a:before {position: absolute; top: 1.25rem; left: 2rem; width: 32px; height: 32px; background: url(../../images/korean/main/icon01.png) no-repeat; content: "";}
.section03 .box04 li a:after {position: absolute; top: -1rem; left: 1rem; padding-right: 2.5rem; width: 100%; height: 100%; line-height: 2.2; text-align: right; font-family: 'xeicon'; font-size: 1.5rem; color: #fff; border: 6px solid rgb(255, 255, 255); box-shadow: 0px 1px 5px 0px rgba(18, 18, 18, 0.26); content: "\e93f"; opacity: 0;}
.section03 .box04 li:nth-child(1) a:before {background-position: 0 0;}
.section03 .box04 li:nth-child(2) a:before {background-position: 0 -32px;}
.section03 .box04 li:nth-child(3) a:before {background-position: 0 -64px;}
.section03 .box04 li:nth-child(4) a:before {background-position: 0 -96px;}
.section03 .box04 li:nth-child(5) a:before {background-position: 0 -128px;}
.section03 .box04 li:nth-child(6) a:before {background-position: 0 -160px;}

.section03 .box04 li a:hover:after {top: 0; opacity: 1; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}

/* 초기화 */
.box {opacity: 0; transform: translateY(100px); -webkit-transform: translateY(100px); transition: all .25s ease; -webkit-transition: all .25s ease;}
.section01:before {width: 0; background: #fff; transition: all .25s ease; -webkit-transition: all .25s ease;}
/* ACTIVE */
.section.active .box {opacity: 1; transform: translateY(0); -webkit-transform: translateY(0);}
.section.active .box01 {transition-delay: .25s; -webkit-transition-delay: .25s;}
.section.active .box02 {transition-delay: .5s; -webkit-transition-delay: .5s;}
.section.active .box03 {transition-delay: .75s; -webkit-transition-delay: .75s;}
.section.active .box04 {transition-delay: 1s; -webkit-transition-delay: 1s;}
.section01.active:before {width: 80%;}

@media screen and (max-width: 1300px) {
	.section .container {padding: 0 1rem;}

	.section01.active:before {width: 100%;}
	.section01 .container {padding: 2rem 1rem;}
	.section01 .bx-controls {padding: 0 1rem;}

	.section03 .box03 a {height: 100%;}
}

@media screen and (max-width: 1170px){
	#visual {height: auto;}

	#visual .link {top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: auto;}
	#visual .link > li {float: left; width: 50%; height: 15%;}
	#visual .link > li {margin-top: 1px;}
	#visual .link > li:nth-child(2n) {margin-left: 1px; width: calc(50% - 1px);} 
	#visual .link > li a {padding: 1rem; width: 100%; height: 4rem;}
}

@media screen and (max-width: 1000px) {
	.section03 .left {width: 49%;}
	.section03 .box03 {display: none;}
	.section03 .box04 {margin-left: 2%; width: 49%;}
}

@media screen and (max-width: 800px) {
	#visual .container > img {position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
	#visual .text-box {left: 0; padding: 0 1rem; width: 100%; line-height: 1.2; text-align: center;}
	#visual .text-box .line1 {font-size: 2rem;}
	#visual .text-box .line2 {font-size: 1.2rem;}

	.section01 {height: auto;}
	.section01 .container {padding: 2rem 1rem 3rem;}
	.section01 h2 {float: none; width: 100%;}
	.newsWrap {float: none; margin-top: 1rem; width: 100%;}

	.tabWrap .tab > li > a {margin: 0;}
}

@media screen and (max-width: 600px) {
	#visual .text-box .line1 {font-size: 1.4rem;}
	#visual .text-box .line2 {font-size: 1rem;}

	.section01 {margin-top: 1rem;}

	.section02 {margin-top: 1.5rem; height: auto;}
	.tabWrap {margin-top: 1rem; height: 21rem;}
	.tabData {top: 2.5rem;}

	.section03 {padding: 1.5rem 0;}
	.section03 .left {width: 100%;}
	.section03 .box04 {margin-top: 1rem; margin-left: 0; width: 100%;}
}