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

/* ========================================== 공통 */
#wrap {min-height: 100vh; background: #3f4044;}
#container {padding: 2.5rem 0 4.5rem; background: #fff;}
.section {position: relative;}
.section:after {clear: both; display: block; width: 100%; content: "";}
.section .group {float: left;}
img {max-width: 100%;}

.bx-controls a {position: relative; display: inline-block; width: 1.7rem; height: 1.7rem; line-height: 1.6rem; color: transparent;  border: 1px solid #dbdcec; overflow: hidden;}
.bx-controls a:after {position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-family: 'xeicon'; font-size: 1rem; color: #222;}
.bx-next {margin-left: -1px;}
.bx-prev:after {content: "\e93c";}
.bx-next:after {content: "\e93f";}

#sns {display: none;}

/* ========================================== 비주얼 */
#section01 .container {position: relative; height: 22.5rem;}

#section01 .group.left {width: calc(100% - 435px); height: 22.5rem;}
#section01 .group.right {margin-left: 20px; width: 415px;}

#visualList {height: 100%;}
#visualList li {height: 100%;}
#visualList li .img img {height: 100%;}

#visual {position: relative; height: 100%;}
#visual .bx-controls {position: absolute; bottom: 3rem; left: 3rem; display: inline-block; width: 6rem; height: 3rem; z-index: 1;}
#visual .bx-controls a {float: left; display: inline-block; width: 20px; height: 3rem; line-height: 3rem; border: none; overflow: hidden;}
#visual .bx-controls a.bx-next {float: right;}
#visual .bx-controls a:after {color: #fff;}
#pagerShort {position: absolute; bottom: 3rem; left: 4.5rem; padding-top: 1.5rem; width: 3rem; height: 3rem; text-align: right; font-size: 0.6rem; color: rgba(255,255,255,0.4);}
#pagerShort .now {position: absolute; top: 0; left: 0; font-size: 1.6rem; color: rgba(255,255,255,1); letter-spacing: -0.1em;}

.icons {position: absolute; top: 50%; background: url(/_eng/img/main/icons.png) no-repeat; border-radius: 50%; content: "";}

#section01 .box2 {position: relative; padding: 1.5rem 1rem; height: 7.75rem; border-top: 1px solid #eceef2; border-bottom: 1px solid #eceef2;}
#section01 .box2 a {display: block;}
#section01 .box2 h2 {margin-bottom: 0.75rem; font-size: 1.1rem; font-weight: 700;}
#section01 .box2 .icons {right: 0.5rem; margin-top: -2.75rem; width: 5.5rem; height: 5.5rem; background-color: #f9f9fb; background-position: 0 0;}

#section01 .box3 {position: relative; margin-top: 1.7rem;}
#section01 .box3 h2 {margin-bottom: 0.5rem;}
#section01 .box3 .bx-viewport {height: 215px !important;}
#section01 .box3 .bx-controls {position: absolute; top: 0; right: 0;}
#section01 .box3 .bx-controls-direction,
#section01 .box3 .bx-pager {float: left;}
#section01 .box3 .bx-pager {margin-left: 0.5rem; padding: 0 0.75rem; line-height: 1.6rem; border: 1px solid #dbdcec;}

#section02 {margin-top: 1rem;}
#section02 ul {overflow: hidden;}
#section02 li {float: left; width: 20.7rem; font-size: 1rem; color: #fff;}
#section02 li:nth-of-type(1) {background-color: #4e6acd;}
#section02 li:nth-of-type(2) {background-color: #70799a;}
#section02 li:nth-of-type(3) {background-color: #1b9d88;}
#section02 li + li {margin-left: 0.9rem;}
#section02 li a {position: relative; display: table; width: 100%;}
#section02 li span {display: table-cell; padding: 1.5rem; height: 6.5rem; vertical-align: middle;  line-height: 1.2;  font-size: 1.1rem; font-weight: 500;}
#section02 .icons {right: 0.5rem; margin-top: -2.35rem; width: 4.7rem; height: 4.7rem; background-color: rgba(255,255,255,0.1);}
#section02 .icons.icon1 {background-position: -110px 0;}
#section02 .icons.icon2 {background-position: -204px 0;}
#section02 .icons.icon3 {background-position: -298px 0;}

@media screen and (max-width: 1320px){
	#section02 li {width: 32%;}
	#section02 li + li {margin-left: 2%;}
}
@media screen and (max-width: 1100px){
	#container {padding: 0 0 1rem;}
	.section .group {float: none;}

	#section01 {padding-top: 1rem;}
	#section01 .container {height: auto;}

	#section01 .group.left {width: 100%; height: auto;}
	#section01 .group.right {margin-top: 1rem; margin-left: 0; width: 100%;}

	#section01.active .quickLink p a {height: 55px; line-height: 55px;}
	#section01.active #quickMore {height: auto;}

	#visualList li a {position: relative; height: auto;}
	#visualList li .img,
	#visualList li .img img {width: 100%;}
	#visual .bx-controls,
	#pagerShort {bottom: 1.5rem;}

	#section01 .box3 .bx-viewport {height: auto !important; text-align: center;}
	#section01 .box3 img {width: 100%;}

	#section02 li {float: none; width: 100%;}
	#section02 li + li {margin-top: 0.5rem; margin-left: 0;}
}
@media screen and (max-width: 414px){
	#section01 .box2 h2 {font-size: 0.9rem;}
}