@charset "utf-8";

.main-visual {position: relative; width: 100%; height: 100vh;}
.main-visual .origin .item {position: relative; width: 100%; height: 100vh;} 
.main-visual .item .img-box {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.main-visual .item.slick-active .img-box {transform: scale(1.08); transition: all 5s;}
.main-visual .thumb {position:absolute; max-width:1530px; width:100%; padding:0 15px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top: 35px;}
.main-visual .thumb .item {position: relative;}
.main-visual .item .text-box h2 {font-family: 'Poppins', sans-serif; font-size: 70px; font-weight: 700; line-height: 1.3em; color: #fff; margin-bottom: 30px;}
.main-visual .item .text-box p {font-size: 26px; line-height: 1.6em; color: #fff; margin-bottom: 72px;}
.main-visual .item.slick-active .text-box h2 {animation: text-up 1.4s both 0.5s;} 
.main-visual .item.slick-active .text-box p {animation: text-up 1.4s both 0.7s;}
@keyframes text-up {0% {transform: translateY(50px); opacity: 0;} 100% {transform: translateY(0px); opacity: 1;}}

.main-visual .controler-wrap {display: flex; align-items: center;}
.main-visual .controler {margin-right: 28px;}
.main-visual .controler button {display: block; width: 60px; height: 60px; border: 1px solid #fff; background: none; font-size: 0; transition: all 0.5s;}
.main-visual .controler .btn-stop {background-image: url('../img/main/main_visual_btn_stop.png'); background-repeat: no-repeat; background-position: center center;}
.main-visual .controler .btn-play {background-image: url('../img/main/main_visual_btn_play.png'); background-repeat: no-repeat; background-position: center center; display: none;}
.main-visual .controler button:hover {background-color: rgba(255,255,255,0.2);}
.main-visual .paging ul {display: flex; margin: 0 -17px;}
.main-visual .paging ul li {position: relative; padding: 0 17px; transition: all 0.6s;}
.main-visual .paging ul li.slick-active {padding-right: 83px;}
.main-visual .paging ul li:after {content: ''; width: 0; height: 1px; background: #fff; position: absolute; top: 50%; right: 4px; opacity: 0; transition: all 0.6s;}
.main-visual .paging ul li.slick-active:after {width: 60px; opacity: 1;}
.main-visual .paging ul li button {display: block; font-size: 14px; font-weight: 600; color: #fff; opacity: 0.5; border: 0; background: none; cursor: pointer;}
.main-visual .paging ul li button:before {content: '0';}
.main-visual .paging ul li.slick-active button {opacity: 1;}

.main-visual .scroll-down {position: absolute; bottom: 80px; left: 50%; margin-left: -15px;}
.main-visual .scroll-down img {display: block; animation: bounce 1.2s ease-in-out infinite both;}
@keyframes bounce {0%,100% {transform: translateY(0)} 50% {transform: translateY(8px)};}

/* section01 */
.sec01 {padding: 130px 0 150px;}
.sec01 .item {display: flex; align-items: center; margin-bottom: 120px;}
.sec01 .item:nth-child(even) {flex-direction: row-reverse;}
.sec01 .item:last-child {margin-bottom: 0;}
.sec01 .item > div {width: 50%;}
.sec01 .item .img-box {opacity: 0;}
.sec01 .item:nth-child(even) .img-box {text-align: right;}
.sec01 .item:nth-child(odd) .text-box {padding-left: 120px; padding-right: 20px;}
.sec01 .item:nth-child(even) .text-box {padding-right: 170px;}
.sec01 .item .text-box b {opacity: 0; display: block; font-size: 24px; font-weight: 700; line-height: 1.3em; color: #00345e; margin-bottom: 24px;}
.sec01 .item .text-box h3 {opacity: 0; font-family: 'poppins'; font-size: 56px; font-weight: 700; line-height: 1em; margin-bottom: 34px;}
.sec01 .item .text-box p {opacity: 0; font-size: 22px; line-height: 1.6em; color: #666; margin-bottom: 52px;}
.sec01 .item .text-box a {opacity: 0; position: relative; display: block; width: 200px; font-family: 'poppins'; font-size: 18px; font-weight: 500; line-height: 65px; color: #fff; background: #00345e; padding: 0 30px; transition: all 0.4s;}
.sec01 .item .text-box a:hover {background: #c0d72e;}
.sec01 .item .text-box a:after {position: absolute; top: 50%; margin-top: -5px; right: 30px; content: ''; width: 10px; height: 10px; background: url('../img/main/btn_viewmore.png') no-repeat right center; transition: all 0.3s;}
.sec01 .item .text-box a:hover:after {right: 25px;}
.sec01 .item.active .img-box {animation: appear 1.3s both 0.2s;} 
.sec01 .item.active .text-box b {animation: appear 1.3s both 0.3s;} 
.sec01 .item.active .text-box h3 {animation: appear 1.3s both 0.4s;} 
.sec01 .item.active .text-box p {animation: appear 1.3s both 0.5s;} 
.sec01 .item.active .text-box a {animation: appear 1.3s both 0.6s;} 
@keyframes appear{from {opacity: 0;} to{opacity: 1;}}

/* section02 */
.sec02 .items {display: flex;}
.sec02 .item {width: 50%;}
.sec02 .item a {/* opacity: 0;  */position: relative; display: flex; flex-direction: column; justify-content: center; height: 450px; background-repeat: no-repeat; background-position: center center; background-size: cover;} 
.sec02 .item:nth-child(1) a {background-image: url('../img/main/sec02_img01.jpg');} 
.sec02 .item:nth-child(2) a {background-image: url('../img/main/sec02_img02.jpg');} 
.sec02 .item a:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transition: all 0.5s; z-index: 1;}
.sec02 .item:nth-child(1) a:before {background: #c0d72e;}
.sec02 .item:nth-child(2) a:before {background: #00345e;}
.sec02 .item:nth-child(1) a:hover:before {opacity: 0.8;}
.sec02 .item:nth-child(2) a:hover:before {opacity: 0.9;}
.sec02 .item .text-box {position: relative; text-align: center; z-index: 2;}
.sec02 .item .text-box h3 {font-size: 50px; font-weight: 700; line-height: 1.3em; color: #fff; margin-bottom: 15px;}
.sec02 .item .text-box p {font-size: 22px; line-height: 1.6em; color: #fff;}
/* .sec02.active .item a {animation: appear 1.3s both 0.3s;} 
.sec02.active .item .text-box h3 {animation: appear-up 1.3s both 0.6s;} 
.sec02.active .item .text-box p {animation: appear-up 1.3s both 0.9s;}

@keyframes appear-up {from {opacity: 0; transform: translateY(30px);} to{opacity: 1; transform: translateY(0);}} */