@import url("layout.css");
/*-------------------------------------------------
Author : SY,CHo
Create date : 2020. 03. 23.

YHY : 2011202 웹접근성 명도대비 수정
-------------------------------------------------*/

/* ========================================== LAYOUT */
#wrap {line-height: 1;}

.fontTitillium {font-family: 'Titillium Web'; font-weight: normal;}
.fontTitillium em {font-weight: 300;}

/* ========================================== 공통 */
.section {position: relative;}
.section .container:after {clear: both; display: block; content: "";}
.section h2 {margin-bottom: 1rem; line-height: 1.3; font-size: 2.3rem; font-weight: 600; color: #333;}
.decoText {line-height: 1.5; font-size: 1rem; color: #828282;}
.btnMore {position: relative; display: inline-block; padding: 0.75rem 4.5rem 0 0; height: 4.25rem; font-size: 0.7rem; font-weight: 200; color: #fff;}
.btnMore:after {position: absolute; top: 0; right: 0; width: 4.25rem; height: 4.25rem; line-height: 3.45rem; text-align: center; font-size: 2rem; border: 0.4rem solid rgba(255,255,255,0.4); border-radius: 50%; content: "+"; transform: rotate(0); -webkit-transform: rotate(0); transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.btnMore:before {position: absolute; top: 2.125rem; right: 4.25rem; width: 0; height: 1px; background: #cecece; content: ""; transition: all 0.5s ease 0.25s; -webkit-transition: all 0.5s ease 0.25s;}
/* ACTIVE */
.section.active .btnMore:after {transform: rotate(180deg); -webkit-transform: rotate(180deg); transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section.active .btnMore:before {width: 1000%;}

/*팝업버튼*/
.popbtn a.hash { position:absolute; top:0; right:50%; margin-right:-800px; display: block; padding: 0.8rem; width:80px; height:85px; text-align: center; font-size: 0.7rem; color: #fff; font-family: 'Titillium Web', sans-serif; line-height:2; background:rgba(0,0,0,0.5); overflow:hidden; float:right; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; }
.popbtn a.hash:hover { background:rgba(0, 0, 0, 0.8); }

 a:focus {outline-offset: -2px;}  /*221027*/

/* 비주얼 */
#section1 h2 {font-size: 3rem;}
#section1 .decoText {font-size: 1.5rem;}
#section1 > img {width: 100%; transform: scale(1.1); -webkit-transform: scale(1.1); transition: all 5s ease; -webkit-transition: all 5s ease;}
#section1 .textBox {position: absolute; top: 50%; left: 50%; padding: 3rem; text-align: center; color: #fff; white-space: nowrap; opacity: 0; overflow: hidden; transform: translate(-50%, -90%); -webkit-transform: translate(-50%, -90%); transition: all 0.5s; -webkit-transition: all 0.5s;}
#section1 h2,
#section1 .decoText {color: #fff;}
#section1 .decoText {font-weight: 100;}
#section1 .bar {position: absolute; display: inline-block; background: #0061ae; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
#section1 .bar1 {right: 43%; bottom: 85%; width: 8px; height: 0;}
#section1 .bar2 {top: 0; left: 57%; width: 0; height: 8px;}
#section1 .bar3 {top: 0; right: 0; width: 8px; height: 0;}
#section1 .bar4 {right: 0; bottom: 0; width: 0; height: 8px;}
#section1 .bar5 {right: 43%; bottom: 0; width: 8px; height: 0;}
#section1 .scrollDown {position: absolute;bottom: 7rem;left: 0;padding-bottom: 1.25rem;width: 100%;text-align: center;font-size: 1rem;color: #111;white-space: nowrap;opacity: 0;transform: translateY(-50px);-webkit-transform: translateY(-50px);transition: all 0.25s;-webkit-transition: all 0.25s;font-weight: bold;}
#section1 .scrollDown span {position: absolute; top: 1rem; left: 50%; display: inline-block; margin-left: -7.5px; width: 15px; height: 15px; background: #fff; border: 4px solid #3aa7b0; border-radius: 50%; opacity: 0; transform: scale(3); -webkit-transform: scale(3); transition: all 0.5s; -webkit-transition: all 0.5s;}
#section1 .scrollDown span:before {position: absolute; top: 0; left: 50%; width: 1px; height: 0; background: #fff; content: ""; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s;}
/* ACTIVE */
#section1.active > img {transform: scale(1); -webkit-transform: scale(1);}
#section1.active .textBox {opacity: 1;transform: translate(-50%, -100%);-webkit-transform: translate(-50%, -100%);transition-delay: 1.5s;-webkit-transition-delay: 1.5s;text-shadow: 2px 3px 6px black;} /*211028 접근성 수정*/
#section1.active .bar1 {height: 15%; transition-delay: 2.25s; -webkit-transition-delay: 2.25s;}
#section1.active .bar2 {width: 43%;  transition-delay: 2.5s;  -webkit-transition-delay: 2.5s;}
#section1.active .bar3 {height: 100%;transition-delay: 2.75s; -webkit-transition-delay: 2.75s;}
#section1.active .bar4 {width: 43%;  transition-delay: 3s; -webkit-transition-delay: 3s;}
#section1.active .bar5 {height: 15%; transition-delay: 3.25s; -webkit-transition-delay: 3.25s;}
#section1.active .effectText em:nth-of-type(1)  {animation: bounceText 0.25s ease 4.02s; -webkit-animation: bounceText 0.25s ease 4.02s;}
#section1.active .effectText em:nth-of-type(2)  {animation: bounceText 0.25s ease 4.04s; -webkit-animation: bounceText 0.25s ease 4.04s;}
#section1.active .effectText em:nth-of-type(3)  {animation: bounceText 0.25s ease 4.06s; -webkit-animation: bounceText 0.25s ease 4.06s;}
#section1.active .effectText em:nth-of-type(4)  {animation: bounceText 0.25s ease 4.08s; -webkit-animation: bounceText 0.25s ease 4.08s;}
#section1.active .effectText em:nth-of-type(5)  {animation: bounceText 0.25s ease 4.1s;  -webkit-animation: bounceText 0.25s ease 4.1s; }
#section1.active .effectText em:nth-of-type(6)  {animation: bounceText 0.25s ease 4.12s; -webkit-animation: bounceText 0.25s ease 4.12s;}
#section1.active .effectText em:nth-of-type(7)  {animation: bounceText 0.25s ease 4.14s; -webkit-animation: bounceText 0.25s ease 4.14s;}
#section1.active .effectText em:nth-of-type(8)  {animation: bounceText 0.25s ease 4.16s; -webkit-animation: bounceText 0.25s ease 4.16s;}
#section1.active .effectText em:nth-of-type(9)  {animation: bounceText 0.25s ease 4.18s; -webkit-animation: bounceText 0.25s ease 4.18s;}
#section1.active .effectText em:nth-of-type(10) {animation: bounceText 0.25s ease 4.2s;  -webkit-animation: bounceText 0.25s ease 4.2s; }
#section1.active .effectText em:nth-of-type(11) {animation: bounceText 0.25s ease 4.22s; -webkit-animation: bounceText 0.25s ease 4.22s;}
#section1.active .effectText em:nth-of-type(12) {animation: bounceText 0.25s ease 4.24s; -webkit-animation: bounceText 0.25s ease 4.24s;}
#section1.active .effectText em:nth-of-type(13) {animation: bounceText 0.25s ease 4.26s; -webkit-animation: bounceText 0.25s ease 4.26s;}
#section1.active .effectText em:nth-of-type(14) {animation: bounceText 0.25s ease 4.28s; -webkit-animation: bounceText 0.25s ease 4.28s;}
#section1.active .effectText em:nth-of-type(15) {animation: bounceText 0.25s ease 4.3s;  -webkit-animation: bounceText 0.25s ease 4.3s; }
#section1.active .effectText em:nth-of-type(16) {animation: bounceText 0.25s ease 4.32s; -webkit-animation: bounceText 0.25s ease 4.32s;}
#section1.active .effectText em:nth-of-type(17) {animation: bounceText 0.25s ease 4.34s; -webkit-animation: bounceText 0.25s ease 4.34s;}
#section1.active .effectText em:nth-of-type(18) {animation: bounceText 0.25s ease 4.36s; -webkit-animation: bounceText 0.25s ease 4.36s;}
#section1.active .effectText em:nth-of-type(19) {animation: bounceText 0.25s ease 4.38s; -webkit-animation: bounceText 0.25s ease 4.38s;}
#section1.active .effectText em:nth-of-type(20) {animation: bounceText 0.25s ease 4.4s;  -webkit-animation: bounceText 0.25s ease 4.4s; }
#section1.active .effectText em:nth-of-type(21) {animation: bounceText 0.25s ease 4.42s; -webkit-animation: bounceText 0.25s ease 4.42s;}
#section1.active .effectText em:nth-of-type(22) {animation: bounceText 0.25s ease 4.44s; -webkit-animation: bounceText 0.25s ease 4.44s;}
#section1.active .effectText em:nth-of-type(23) {animation: bounceText 0.25s ease 4.46s; -webkit-animation: bounceText 0.25s ease 4.46s;}
#section1.active .effectText em:nth-of-type(24) {animation: bounceText 0.25s ease 4.48s; -webkit-animation: bounceText 0.25s ease 4.48s;}
#section1.active .effectText em:nth-of-type(25) {animation: bounceText 0.25s ease 4.5s;  -webkit-animation: bounceText 0.25s ease 4.5s; }
#section1.active .effectText em:nth-of-type(26) {animation: bounceText 0.25s ease 4.52s; -webkit-animation: bounceText 0.25s ease 4.52s;}
#section1.active .effectText em:nth-of-type(27) {animation: bounceText 0.25s ease 4.54s; -webkit-animation: bounceText 0.25s ease 4.54s;}
#section1.active .effectText em:nth-of-type(28) {animation: bounceText 0.25s ease 4.56s; -webkit-animation: bounceText 0.25s ease 4.56s;}
#section1.active .effectText em:nth-of-type(29) {animation: bounceText 0.25s ease 4.58s; -webkit-animation: bounceText 0.25s ease 4.58s;}
#section1.active .effectText em:nth-of-type(30) {animation: bounceText 0.25s ease 4.6s;  -webkit-animation: bounceText 0.25s ease 4.6s; }
#section1.active .effectText em:nth-of-type(31) {animation: bounceText 0.25s ease 4.62s; -webkit-animation: bounceText 0.25s ease 4.62s;}
#section1.active .effectText em:nth-of-type(32) {animation: bounceText 0.25s ease 4.64s; -webkit-animation: bounceText 0.25s ease 4.64s;}
#section1.active .effectText em:nth-of-type(33) {animation: bounceText 0.25s ease 4.66s; -webkit-animation: bounceText 0.25s ease 4.66s;}
#section1.active .effectText em:nth-of-type(34) {animation: bounceText 0.25s ease 4.68s; -webkit-animation: bounceText 0.25s ease 4.68s;}
#section1.active .effectText em:nth-of-type(35) {animation: bounceText 0.25s ease 4.7s;  -webkit-animation: bounceText 0.25s ease 4.7s; }
#section1.active .effectText em:nth-of-type(36) {animation: bounceText 0.25s ease 4.72s; -webkit-animation: bounceText 0.25s ease 4.72s;}
#section1.active .effectText em:nth-of-type(37) {animation: bounceText 0.25s ease 4.74s; -webkit-animation: bounceText 0.25s ease 4.74s;}
#section1.active .effectText em:nth-of-type(38) {animation: bounceText 0.25s ease 4.76s; -webkit-animation: bounceText 0.25s ease 4.76s;}
#section1.active .effectText em:nth-of-type(39) {animation: bounceText 0.25s ease 4.78s; -webkit-animation: bounceText 0.25s ease 4.78s;}
#section1.active .effectText em:nth-of-type(40) {animation: bounceText 0.25s ease 4.8s;  -webkit-animation: bounceText 0.25s ease 4.8s; }
#section1.active .effectText em:nth-of-type(41) {animation: bounceText 0.25s ease 4.82s; -webkit-animation: bounceText 0.25s ease 4.82s;}
#section1.active .effectText em:nth-of-type(42) {animation: bounceText 0.25s ease 4.84s; -webkit-animation: bounceText 0.25s ease 4.84s;}
#section1.active .effectText em:nth-of-type(43) {animation: bounceText 0.25s ease 4.86s; -webkit-animation: bounceText 0.25s ease 4.86s;}
#section1.active .effectText em:nth-of-type(44) {animation: bounceText 0.25s ease 4.88s; -webkit-animation: bounceText 0.25s ease 4.88s;}
#section1.active .effectText em:nth-of-type(45) {animation: bounceText 0.25s ease 4.9s;  -webkit-animation: bounceText 0.25s ease 4.9s; }
#section1.active .scrollDown {opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); transition-delay: 5s; -webkit-transition-delay: 5s;}
#section1.active .scrollDown span {opacity: 1; transform: scale(1); -webkit-transform: scale(1); transition-delay: 5.25s; -webkit-transition-delay: 5.25s;}
#section1.active .scrollDown span:before {opacity: 1; height: 8.5rem; transition-delay: 5.5s; -webkit-transition-delay: 5.5s;}

/* NEWS */
#section2 {padding: 5.5rem 0; transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
#section2 .container {position: relative;}
#section2 .image {float: left; width: 50%;}
#section2 .image img {width: 100%;}
#section2 .newsBox {position: relative; float: left; margin-left: 5%; width: 45%;}
#section2 .newsBox h2 {margin-bottom: 0; line-height: 4.25rem;}
#section2 .btnMore {position: absolute; top: 0; right: 0; display: block; width: calc(100% - 250px); text-align: right; color: #a3a3a3;}
#section2 .btnMore:after {border-color: #cecece;}
#section2 .listType01 {margin-top: 1.25rem;}
#section2 .listType01 li {padding: 0.75rem 0; border-bottom: 1px solid #dbdbdb;}
#section2 .listType01 li a {position: relative; display: block; padding-right: 6rem; height: 1.5rem; line-height: 1.5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#section2 .listType01 li a .new {display: inline-block; margin-right: 0.5rem; width: 1.5rem; height: 1.5rem; text-align: center; color: #fff; background: #0061ae; border-radius: 50%;}
#section2 .listType01 li a .date {position: absolute; top: 0; right: 0; color: #7a7a7a;}
/* ACTIVE */
#section2.active {padding: 4.5rem 0;}
#section2.active .btnMore:before {width: 100%;}

/* OVERVIEW */
#section3 {overflow: hidden;}
#section3 h2 {font-size: 1.6rem; color: #010101;}
#section3 .decoText {font-size: 0.8rem; color: #666;}
#section3 .boxDiv {position: relative; float: left; width: 50%;}
#section3 .boxDiv .image {display: block;}
#section3 .boxDiv img {width: 100%;}
#section3 .innerBox {position: absolute; display: flex; padding: 1rem 1.5rem; width: 50%; height: 100%; text-align: center; justify-content: center; align-items: center; background: #fff; overflow: hidden; transition: all 0.35s ease; -webkit-transition: all 0.35s ease; z-index: 1;}
#section3 .box1 .innerBox {bottom: 0; left: 0; height: 50%; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 97% 50%, 100% 52%, 100% 100%, 0 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 97% 50%, 100% 52%, 100% 100%, 0 100%);}
#section3 .box2 .innerBox {top: 0;left: 0;color: #fff;background: #0078D5;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 97% 50%, 100% 52%, 100% 100%, 0 100%);clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 97% 50%, 100% 52%, 100% 100%, 0 100%);}/* 251121웹접근성 수정  */
#section3 .box2 h2,
#section3 .box2 .decoText {color: #111;}
#section3 .box3 .innerBox {top: 0; right: 0; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 52%, 3% 50%, 0 48%, 0 0)); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 52%, 3% 50%, 0 48%, 0 0);}
#section3 .innerBox span {display: block; margin-top: 1.5rem; font-size: 2rem; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
/* HOVER */
#section3 .innerBox:hover {width: 60%;}
#section3 .innerBox:hover span {font-size: 3rem;}

/* SOCIAL CONTRIBUTION ACTIVITIES */
#section4 {padding: 6rem 0 5rem; color: #fff; background: url(/images/web/english/main/bgSection4.jpg) no-repeat center top; background-size: cover; background-attachment: fixed; transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
#section4 .container {position: relative;}
#section4 .boxDiv {float: left; width: 50%;}
#section4 .box2 {position: relative; margin-left: 5%; width: 45%;}
#section4 .box2:after {position: absolute; top: -2.5rem; right: 2rem; width: 4px; height: 0; background: rgba(255,255,255,0.5); content: ""; transition: all 0.35s ease 0.35s; -webkit-transition: all 0.5s ease 0.35s;}
#section4 .btnMore {margin: 4rem 0 0 8rem;}
#section4 .btnMore:before {background: rgba(255,255,255,0.4);}
#section4 h2,
#section4 .decoText {color: #fff;}
#section4 .listType01 > li {position: relative; padding: 2rem 2.5rem 3.5rem; background: #0061ae url(/images/web/english/main/bgSection4-2.png) no-repeat right bottom; -webkit-clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0 85%, 0 0); clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0 85%, 0 0);}
#section4 .listType01 > li p {margin-bottom: 1.5rem; font-size: 1.6rem;}
#section4 .listType01 > li p em {margin-right: 1rem; vertical-align: middle; font-size: 3.5rem; font-weight: 700;}
#section4 .listType01 > li ul li {position: relative; padding-left: 1rem; line-height: 1.5rem;}
#section4 .listType01 > li ul li:after {position: absolute; top: 13px; left: 0; width: 7px; height: 7px; background: #fff; border-radius: 50%; content: "";}
#section4 .bx-controls {line-height: 3rem; text-align: right; overflow: hidden;}
#section4 .bx-controls-direction {float: right; margin-left: 0.7rem; overflow: hidden;}
#section4 .bx-controls a {float: left; position: relative; display: inline-block; width: 1.5rem; color: transparent; overflow: hidden;}
#section4 .bx-controls a:after {position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-family: 'xeicon'; font-size: 1.5rem; color: #fff;}
#section4 .bx-next {margin-left: 0.5rem;}
#section4 .bx-prev:after {content: "\e908";}
#section4 .bx-next:after {content: "\e90b";}
#section4 .bx-pager {font-size: 0.9rem;}
/* ACTIVE */
#section4.active {padding: 5rem 0 4rem;}
#section4.active .box2:after {height: 4.5rem;}

/* HIGHTLIGHTS */
#section5 {padding-top: 5rem;}
#section5 .container {position: relative; height: 21rem;}
#section5 h2 {color: #000;}
#section5 .decoText {margin-bottom: 5rem;}
#section5 .boxDiv {position: absolute; top: 0; left: 0; padding-left: 29rem; width: 150%; height: 100%; overflow: hidden;}
#section5 .boxDiv:before {position: absolute; bottom: 0; left: 0; width: 100%; height: 270px; background: url(/images/web/english/main/bgSection5.jpg) no-repeat left bottom; background-size: 200% 150%; overflow: hidden; content: ""; transition: all 5s ease; -webkit-transition: all 5s ease;}
#section5 .btnMore {float: left; margin: 0 0 0 4rem;} /* 201217 수정 */
#section5 .btnSlick {float: left; position: relative; display: inline-block; margin-left: 0.75rem; width: 4.25rem; height: 4.25rem; line-height: 3.45rem; text-align: center; font-size: 2rem; color: #fff; border: 0.4rem solid rgba(255,255,255,0.4); border-radius: 50%;}
#section5 .btnPlay { display:none; } /* 201217 추가 */
#section5 .bx-wrapper {max-width: 100% !important;}
#section5 .listType01 > li {float: left; width: 380px;}
#section5 .listType01 > li a {display: block;}
#section5 .listType01 > li a img {transform: scale(1.1); -webkit-transform: scale(1.1); transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
#section5 .listType01 > li .image {display: block; height: 265px; overflow: hidden;}
#section5 .listType01 > li .title {margin-top: 1.25rem; line-height: 1.5; font-size: 0.85rem; color: #fff;}
/* HOVER 201217 수정 */
#section5 .listType01 > li a:hover img,
#section5 .listType01 > li a:focus img {transform: scale(1); -webkit-transform: scale(1);}
#section5 .listType01 > li a:focus {border: 2px solid; outline-offset: 1px;}  /*221027*/
/* ACTIVE */
#section5.active .boxDiv:before {background-size: 100% 100%;}

/* 애니메이션, EFFACT */
/* 섹션2, 섹션3 */
.imgEffact {position: relative;}
/* .imgEffact:before {position: absolute; top: 0; left: 0; height: 100%; background: rgba(255,255,255,0.1); content: "";} */
.imgEffact:after {position: absolute; top: 0; right: 0; height: 100%; background: rgba(0,0,0,0.1); content: ""; z-index: 1;}

/* .section.active .imgEffact:before {opacity: 1; animation: revealLTR 1s ease; -webkit-animation: revealLTR 1s ease;} */
.section.active .imgEffact:after {opacity: 1; animation: revealRTL 1s ease 0.5s; -webkit-animation: revealRTL 1s ease 0.5s;}
/* .section.active .imgEffact02:before, */
.section.active .imgEffact02:after {animation-delay: 1s; -webkit-animation-delay: 1s;}
/* .section.active .imgEffact03:before, */ 
.section.active .imgEffact03:after {animation-delay: 2s; -webkit-animation-delay: 2s;}

@-webkit-keyframes bounceText {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}
@keyframes bounceText {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}
@-webkit-keyframes revealRTL {
	0% {width: 0; right: 0;}
	65% {width: 100%; right: 0;}
	100% {width: 0; right: 100%;}
}
@keyframes revealRTL {
	0% {width: 0; right: 0;}
	65% {width: 100%; right: 0;}
	100% {width: 0; right: 100%;}
}
@-webkit-keyframes revealLTR {
	0% {width: 0; left: 0;}
	65% {width: 100%; left: 0;}
	100% {width: 0; left: 100%;}
}
@keyframes revealLTR {
	0% {width: 0; left: 0;}
	65% {width: 100%; left: 0;}
	100% {width: 0; left: 100%;}
}

/* Layer popup 슬라이드 */
.LayerPopupList {position: relative; display: inline-block; margin: 2.5rem auto; padding: 0 3rem;}
#popupList {overflow: hidden;}
#popupList li {float: left; width: 360px !important; height: 393px;}
#popupList a {display: block; width: 347px; height: 100%; text-align: center; background: #fff;}
#popupList a img {width: 100%; height: 100%;}

.layerPopup .bx-controls-direction > a {position: absolute; top: 50%; display: block; margin-top: -1rem; width: 2rem; height: 2rem; color: transparent; overflow: hidden;}
.layerPopup .bx-controls-direction > a:before {position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; line-height:2rem; text-align: center; font-family: 'xeicon'; font-size: 2rem; color: #fff; text-shadow: 3px 3px 3px rgba(0,0,0,0.5);}
.layerPopup .bx-prev {left: 0;}
.layerPopup .bx-prev:before {content: '\e93b';}
.layerPopup .bx-next {right: 0;}
.layerPopup .bx-next:before {content: '\e93e';}

.layerPopup .pagerShort {position: absolute; top: -5.25rem; left: 50%; margin-left: 7rem; padding-top: 0; width: 3.25rem; height: 3.25rem; line-height: 3.25rem; text-align: center; font-family: 'Titillium Web', sans-serif; font-size: 0.9rem; color: #fff; letter-spacing: -0.05em; border-radius: 50%;
background: rgb(0,111,186);
background: -moz-linear-gradient(left,  rgba(0,111,186,1) 0%, rgba(23,167,219,1) 100%);
background: -webkit-linear-gradient(left,  rgba(0,111,186,1) 0%,rgba(23,167,219,1) 100%);
background: linear-gradient(to right,  rgba(0,111,186,1) 0%,rgba(23,167,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fba', endColorstr='#17a7db',GradientType=1 );
}
.pagerShort .total {color: inherit;}
.pagerShort .now {color: #ffd65d;}

.layerPopup .closeWrap a {display: inline-block; margin: 0 0.25rem; padding: 0 1.5rem; line-height: 2rem; border-radius: 1rem; background: #000;}
.layerPopup .closeWrap a i {margin-left: 1rem;}

/* 반응형 */
@media screen and (max-width: 1920px){
	/* 비주얼 */
	#section1 .textBox {padding: 2rem;}
	#section1 h2 {font-size: 2.5rem; margin-bottom: 0.5rem;}
	#section1 .decoText {font-size: 1.25rem;}
}

@media screen and (max-width: 1640px){

	/* 팝업버튼 */
	.popbtn a.hash{ top:100px; right:0; margin-right:0; }
}

@media screen and (max-width: 1600px){
	#section1.active .textBox {transform: translate(-50%, -90%);-webkit-transform: translate(-50%, -90%);}
}
@media screen and (max-width: 1400px){
	.container {padding: 0 2rem;}

	/* 공통 */
	.section h2 {line-height: 1.3; font-size: 1.8rem;}
	.decoText {font-size: 1.25rem;}

	/* 비주얼 */
	#section1 .scrollDown {display: none;}
	#section1 h2 {margin-bottom: 0;}

	/* NEWS */
	#section2 {padding: 3.5rem 0;}
	#section2 .newsBox h2 {margin-bottom: 0;}
	#section2 .listType01 {margin-top: 1.25rem;}
	/* ACTIVE */
	#section2.active {padding: 2.5rem 0;}

	/* OVERVIEW */
	#section3 h2 {font-size: 1.35rem; white-space: nowrap;}
	#section3 .decoText {word-break: break-word;}
	#section3 .decoText br {display: none;}
	#section3 .innerBox span {margin-top: 0;}

	/* SOCIAL CONTRIBUTION ACTIVITIES */
	#section4 {padding: 4rem 0;}
	#section4 .bx-controls {line-height: 2.5rem;}
	/* ACTIVE */
	#section4.active {padding: 3rem 0;}

	/* HIGHTLIGHTS */
	#section5 .decoText span {display: block;}
	#section5 .boxDiv:before {height: 240px;}
}

@media screen and (max-width: 1280px){
	
	/* 팝업버튼 */
	.popbtn a.hash{ top:140px; }

}
@media screen and (max-width: 1024px){
	/* 공통 */
	.section h2 {margin-bottom: 0.5rem; font-size: 1.75rem;}
	.decoText {font-size: 0.9rem;}
	.btnMore {padding: 0.75rem 4rem 0 0; height: 3.55rem;}
	.btnMore:after {width: 3.5rem; height: 3.5rem; line-height: 2.7rem;}
	.btnMore:before {right: 3.5rem;}
	
	/* 팝업버튼 */
	.popbtn a.hash{ display:none; }

	/* 비주얼 */
	#section1 {position: relative; height: 25rem;}
	#section1 > img {position: absolute; top: 0; left: 50%; width: auto; height: 100%; transform: translateX(-50%) scale(1.1); -webkit-transform: translateX(-50%) scale(1.1);}
	#section1 h2 {font-size: 2rem;}
	#section1 .decoText {font-size: 1.25rem;}
	/* ACTIVE */
	#section1.active .textBox {transform: translate(-50%, -70%);-webkit-transform: translate(-50%, -70%);}
	#section1.active > img {transform: translateX(-50%) scale(1); -webkit-transform: translateX(-50%) scale(1);}

	/* NEWS */
	#section2 .image {display: none;}
	#section2 .newsBox {float: none; margin-left: 0; width: 100%;}
	#section2 .btnMore {width: calc(100% - 180px);}

	/* OVERVIEW */
	#section3 .boxDiv {float: none; width: 100%;}

	/* SOCIAL CONTRIBUTION ACTIVITIES */
	#section4 {padding: 3rem 0;}
	#section4 .bx-controls {line-height: 2rem;}
	#section4 .btnMore {margin-top: 3rem;}
	#section4 .listType01 > li {padding: 2.5rem 2.5rem 4.5rem; -webkit-clip-path: polygon(100% 0, 100% 100%, 5% 100%, 0 85%, 0 0); clip-path: polygon(100% 0, 100% 100%, 5% 100%, 0 85%, 0 0);}
	#section4 .listType01 > li ul li {height: 1.5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
	#section4 .listType01 > li p {font-size: 1.25rem;}
	#section4 .listType01 > li p em {font-size: 2.5rem;}
	#section4 .boxDiv {float: none; width: 100%;}
	#section4 .box2 {margin-top: 2rem; margin-left: 0; width: 100%;}
	/* ACTIVE */
	#section4.active {padding: 2rem 0;}

	/* HIGHTLIGHTS 201217 수정 */
	#section5 {padding-top: 2rem;}
	#section5 .boxDiv {padding-left: 20rem;}
	#section5 .btnMore {margin-left: -1rem;}
	#section5 .btnMore:before { right:2.8rem; }
	#section5 .btnMore:after {width: 3rem;height: 3rem;line-height: 1.8rem; }
	#section5 .btnSlick {width: 3rem;height: 3rem;line-height: 2.4rem;font-size: 1.15rem; margin-left:0.3rem; }

}
@media screen and (max-width: 900px){
	/* HIGHTLIGHTS */
	#section5 .boxDiv {width: 100%;}
	#section5 .boxDiv .bx-wrapper {float: right; display: inline-block; margin-right: 2rem; width: 380px;}
}
@media screen and (max-width: 768px){
	/* OVERVIEW */
	#section3 .innerBox {position: relative; width: 100%;}
	#section3 .box1 .innerBox,
	#section3 .box2 .innerBox {-webkit-clip-path: none;clip-path: none;}
	#section3 .inNin {margin: 0 auto; max-width: 320px;}
}
@media screen and (max-width: 640px){
	/* HIGHTLIGHTS */
	#section5 .container {height: 34rem;}
	#section5 .decoText {margin-bottom: 4rem;}
	#section5 .decoText span {display: inline;}
	#section5 .boxDiv {padding: 13rem 1rem 0; text-align: center;}
	#section5 .boxDiv:before {height: calc(100% - 6rem);}
	#section5 .boxDiv .bx-wrapper {float: none; margin: 0 auto;}
	#section5 .listType01 > li .title {text-align: left;}
}
@media screen and (max-width: 600px){
	/* 비주얼 */
	#section1 h2 {font-size: 1.8rem;}
	#section1 .decoText {font-size: 1.15rem;}
}
@media screen and (max-width: 480px){
	.container {padding: 0 1rem;}
	/* 비주얼 */
	#section1 h2 {font-size: 1.5rem;}
	#section1 .decoText {font-size: 1rem;}

	/* OVERVIEW */
	#section3 .boxDiv {float: none; width: 100%;}

	/* SOCIAL CONTRIBUTION ACTIVITIES */
	#section4 .listType01 > li {padding: 1.5rem 1.5rem 2.5rem; -webkit-clip-path: polygon(100% 0, 100% 100%, 20% 100%, 0 80%, 0 0); clip-path: polygon(100% 0, 100% 100%, 20% 100%, 0 80%, 0 0);}

	/* SOCIAL CONTRIBUTION ACTIVITIES */
	#section4 {padding: 3rem 0;}
	#section4 .bx-controls {line-height: 2rem;}
	#section4 .btnMore {margin-top: 1rem;}

	/* HIGHTLIGHTS */
	#section5 .decoText {margin-bottom: 3rem;}
	#section5 .boxDiv {padding: 14rem 1rem 0;}
	#section5 .boxDiv:before {height: calc(100% - 5.5rem);}
	#section5 .btnMore { margin-left:1rem; } /* 201217 추가 */
}
@media screen and (max-width: 414px){
	/* 공통 */
	.section h2 {font-size: 1.35rem;}
	.decoText {font-size: 0.8rem;}
	.btnMore {padding: 0.25rem 3rem 0 0; height: 2.5rem;}
	.btnMore:after {width: 2.5rem; height: 2.5rem; line-height: 1.9rem; font-size: 1.5rem; border: 0.3rem solid rgba(255,255,255,0.4);}
	.btnMore:before {top: 1.25rem; right: 2.5rem;}

	/* 비주얼 */
	#section1 {height: 20rem;}
	#section1 h2 {font-size: 1.25rem;}
	#section1 .decoText {font-size: 0.8rem;}
	#section1 .textBox {padding: 2rem 1rem;}
	#section1 .bar1,
	#section1 .bar3,
	#section1 .bar5 {width: 4px;}
	#section1 .bar2,
	#section1 .bar4 {height: 4px;}

	/* NEWS */
	#section2 .newsBox h2 {line-height: 2.5rem;}
	#section2 .btnMore {width: calc(100% - 150px);}

	/* SOCIAL CONTRIBUTION ACTIVITIES */
	#section4 .box2:after {right: 1rem; width: 2px;}
	#section4 .decoText br {display: none;}
	#section4 .listType01 > li p {font-size: 1rem;}
	#section4 .listType01 > li p em {vertical-align: inherit; font-size: 1.5rem;}

	/* HIGHTLIGHTS */
	#section5 .container {height: 31rem;}
	#section5 .boxDiv {padding: 10rem 1rem 0;}
	#section5 .boxDiv:before {height: calc(100% - 5rem);}
	#section5 .btnSlick {width: 2.5rem; height: 2.5rem; line-height: 1.9rem; font-size: 1rem; border: 0.3rem solid rgba(255,255,255,0.4);}
	#section5 .btnMore:after { width: 2.5rem; height: 2.5rem; line-height: 1.9rem; }/* 201217 추가 */
	#section5 .btnMore:before { right:2.5rem; }/* 201217 추가 */
}
@media screen and (max-width: 320px){
	#section5 .decoText {margin-bottom: 2rem;}
	#section5 .boxDiv:before {height: calc(100% - 5.5rem);}
}