@charset "utf-8";

.main-visual {height:100vh; position:relative;}
.main-visual .origin {height:100vh; position:relative;}
.main-visual .origin .item {position:absolute; top:0; left:0; height:100vh; z-index:-1;}
.main-visual .origin .item .secting-img {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.main-visual .origin .item.slick-active .secting-img {transform:scale(1.02); transition:all 4.5s;}
.main-visual .origin .item .secting-img01 {background-image:url('../img/main/main-visual01.jpg');}
.main-visual .origin .item .secting-img02 {background-image:url('../img/main/main-visual02.jpg');}
.main-visual .origin .item .secting-img03 {background-image:url('../img/main/main-visual03.jpg');}
.main-visual .origin .item .secting-img04 {background-image:url('../img/main/main-visual03.jpg');}
.main-visual .thumb {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .thumb .wrap {display:flex; flex-direction:column; justify-content:center; height:100vh; padding-top:120px;}
.main-visual .txt-box {margin-bottom:90px;}
.main-visual .txt-box span {font-size:20px; display:block; line-height:1.5em; margin-bottom:14px; font-family:'Montserrat'; color:#e8ca8b;}
.main-visual .txt-box h2 {font-size:65px; line-height:1.2em; color:#054277; margin-bottom:44px;}
.main-visual .txt-box p {font-size:28px; line-height:1.3em; color:#1b3058;}
.main-visual .slick-active .txt-box span {animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both;}
.main-visual .slick-active .txt-box h2 {animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both .2s;}
.main-visual .slick-active .txt-box p {animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both .4s;}
@keyframes text-focus-in{0%{filter:blur(20px);opacity:0;transform:translateX(10%);}100%{filter:blur(0);opacity:1};transform:translateX(0);}
.main-visual .main-btns {width:200px; position:relative; padding:0 20px; display:flex; justify-content:center; align-items:center;}
.main-visual .main-btns .slick-arrow {position:absolute; width:10px; height:18px; top:50%; margin-top:-9px; background-color:transparent; background-repeat:no-repeat; font-size:0; border:0; transition:all 0.6s;}
.main-visual .main-btns .slick-prev {background-image:url('../img/main/visual-prev.png'); left:0;}
.main-visual .main-btns .slick-next {background-image:url('../img/main/visual-next.png'); right:0;}
.main-visual .main-btns .slick-prev:hover {background-image:url('../img/main/visual-prev-on.png');}
.main-visual .main-btns .slick-next:hover {background-image:url('../img/main/visual-next-on.png');}
.main-visual .main-btns .slick-dots {display:flex;}
.main-visual .main-btns .slick-dots li {padding:0 10px;}
.main-visual .main-btns .slick-dots li button {display:block; font-size:0; background:#8d8d8d; width:6px; height:6px; border-radius:50%; border:0; position:relative; transition:all 0.6s;}
.main-visual .main-btns .slick-dots li.slick-active button {background:transparent;}
.main-visual .main-btns .slick-dots li button:after {content:''; width:12px; height:12px; background:transparent; border:3px solid #121c2e; border-radius:50%; position:absolute; top:50%; left:50%; margin-top:-6px; margin-left:-6px; opacity:0; transition:all 0.6s;}
.main-visual .main-btns .slick-dots li.slick-active button:after {opacity:1;}
.main-visual .playing {width:14px; height:14px; position:relative; margin-left:10px;}
.main-visual .playing .btnw {width:100%; height:100%; background-repeat:no-repeat; background-size:auto; background-position:center center; cursor:pointer; position:absolute; top:0; left:0; z-index:15;}
.main-visual .playing .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .playing .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .playing .btnw.bt-play {display:none;}
.main-visual .scrolldown {position:absolute; right:100px; bottom:40px; z-index:11; animation:shake-vertical 1s linear infinite both;}
@keyframes shake-vertical{0%{transform:translateY(0)}50%{transform:translateY(12px)}100%{transform:translateY(0)}}
/* section */
.section {padding:150px 0 170px; position:relative; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.sec-tit {margin-bottom:64px;}
.sec-tit.tac {text-align:center;}
.sec-tit h3 {font-size:60px; font-family:'Montserrat'; color:#2e3d69; line-height:1.2em; margin-bottom:30px;}
.sec-tit p {font-size:20px; line-height:1.6em; color:#7d7d7d;}
.sec-txt {position:absolute; bottom:0; left:0;}
.sec-tit .more a {font-size:18px; line-height:1.7em; color:#666; font-family:'Montserrat'; display:inline-block; padding-right:18px; padding-left:0; transition:all 0.6s; position:relative;}
.sec-tit .more a:after {content:''; width:8px; height:14px; background:url('../img/main/sec-more.png') no-repeat; background-size:cover; position:absolute; right:0; top:50%; margin-top:-7px; transition:all 0.6s;}
.sec-tit .more a:hover:after {transform:translateX(8px)}
/* section01 */
.section01 {background-color:#f0f0f0;}
.section01 .col {display:flex; margin:0 -15px;}
.section01 .row {margin:0 15px; width:100%;}
.section01 .img-box {max-width:560px;}
.section01 .txt-box {max-width:410px;}
.section01 .inner {padding:94px 80px; color:#fff; border-radius:15px; height:100%; width:100%; position:relative; overflow:hidden;}
.section01 .inner .backdro {background:url('../img/main/sec-img.jpg') center center no-repeat; background-size:cover; transition:all 0.6s; position:absolute; width:100%; height:100%; top:0; left:0; z-index:-1;}
.section01 .inner:hover .backdro {transform:scale(1.08);}
.section01 .inner h4 {font-size:39px; line-height:1.4em; font-weight:500;}
.section01 .txt-box a {display:flex; padding:46px 50px; flex-direction:column; justify-content:flex-end; height:230px; margin-bottom:30px; border-radius:15px; overflow:hidden; position:relative; z-index:1;}
.section01 .txt-box a:last-child {margin-bottom:0;}
.section01 .txt-box a:before,
.section01 .txt-box a:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; transition:all 0.6s;}
.section01 .txt-box a:before {background:#fff; z-index:-2;}
.section01 .txt-box a:after {content:''; background:url('../img/main/sec-link.jpg') center center no-repeat; z-index:-1; opacity:0; transform:scale(1.6)}
.section01 .txt-box a:hover:after {opacity:1; transform:scale(1);}
.section01 .txt-box a h5 {font-size:26px; line-height:1.3em; color:#000; font-weight:600; margin-bottom:16px; transition:all 0.6s;}
.section01 .txt-box a p {font-size:16px; line-height:1.6em; color:#666; transition:all 0.6s;}
.section01 .txt-box a:hover h5,
.section01 .txt-box a:hover p {color:#fff;}
.section01 .txt-box a .icon {width:54px; height:54px; position:absolute; top:40px; right:40px; background-repeat:no-repeat; background-size:cover; transition:all 0.6s;}
.section01 .txt-box a .icon01 {background-image:url('../img/main/sec01-icon01.png');}
.section01 .txt-box a .icon02 {background-image:url('../img/main/sec01-icon02.png');}
.section01 .txt-box a .icon03 {background-image:url('../img/main/sec01-icon03.png');}
.section01 .txt-box a .icon04 {background-image:url('../img/main/sec01-icon04.png');}
.section01 .txt-box a:hover .icon01 {background-image:url('../img/main/sec01-icon01-on.png');}
.section01 .txt-box a:hover .icon02 {background-image:url('../img/main/sec01-icon02-on.png');}
.section01 .txt-box a:hover .icon03 {background-image:url('../img/main/sec01-icon03-on.png');}
.section01 .txt-box a:hover .icon04 {background-image:url('../img/main/sec01-icon04-on.png');}
/* section02 */
.section02 {background-image:url('../img/main/sec02bg.jpg');}
.section02 .col {display:flex; height:540px;}
.section02 .sec-tit {max-width:500px; width:100%; padding-top:54px;}
.section02 .sec-tit h3 {color:#fff;}
.section02 .sec-tit p {color:#fff;}
.section02 .sec-tit .sec02-arrow {display:flex; margin-top:50px;}
.section02 .sec-tit .sec02-arrow> div {width:55px; height:55px; border-radius:5px; background:transparent; border:1px solid rgba(255,255,255,0.3); margin-right:10px; cursor:pointer; transition:all 0.6s; display:flex; justify-content:center; align-items:center;}
.section02 .sec-tit .sec02-arrow> div:hover {border-color:#fff;} 
.section02 .sec-tit .sec02-arrow> div img {opacity:0.8; transition:all 0.6s;}
.section02 .sec-tit .sec02-arrow> div:hover img {opacity:1;}
.section02 .row {width:1%; flex:1 1 auto; position:relative;}
.section02 .slide {width:1470px; position:absolute; top:0; left:0; height:100%; overflow:hidden;}
.section02 .swiper-wrapper {margin:0 -20px;}
.section02 .swiper-slide {padding:0 20px;}
.section02 .swiper-slide a {display:block;}
.section02 .swiper-slide a .img-box {overflow:hidden; border-radius:15px;}
.section02 .swiper-slide a p {font-size:26px; font-weight:500; text-align:center; line-height:1.3em; margin-top:40px; transition:all 0.6s; color:#fff;}
.section02 .swiper-slide a:hover p {color:#816577;}
.section02  .swiper-pagination {height:4px; width:1180px; background:#fff; position:absolute; bottom:0; left:0;}
.section02  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#816577;}
/* section03 */
.section03 {position:relative;}
.section03:before {content:''; width:50%; height:100%; position:absolute; right:0; top:0; background:#f9f9f9;}
.section03 .col {display:flex;}
.section03 .sec-tit {width:100%; max-width:500px; padding-top:36px;}
.section03 .sec-tit .more {margin-top:30px;}
.section03 .img-box {width:1%; flex:1 1 auto;}
.section03 .img-box a {display:block; height:510px; border-radius:10px; font-size:32px; line-height:1.3em; font-weight:500; padding:74px 80px; display:flex; align-items:flex-end; color:#fff; overflow:hidden; position:relative;background:url('../img/main/sec03.jpg') center center no-repeat; background-size:cover; transition:all 0.6s; overflow:hidden;}
.section03 .img-box .backd {position:absolute; bottom:0; left:0; width:100%; height:50%; opacity:0; background: linear-gradient(to top, rgba(181,152,90,.9) 0%, rgba(0,0,0,0) 60%); transition:all 1s;}
.section03 .img-box:hover .backd {height:100%; opacity:.9;}
.section03 .img-box p {position:relative; z-index:11;}
/* section04 */
/* .section04 {background-image:url('../img/main/sec04bg.jpg');} */
.section04 .sec-tit {margin-bottom:0; text-align:center;}
.section04 .sec-tit .more {margin-top:12px; text-align:right;}
.section04 .items {margin:0 -20px;}
.section04 .item {padding:0 20px;}
.section04 .slick-list {padding:20px 0;}
.section04 .inner {display:block; padding-top:20px; transition:all 0.6s;}
.section04 .inner:hover {padding-top:0;}
.section04 .inner .img-box {overflow:hidden; transition:all 0.6s; margin-bottom:20px; border-radius:10px;}
.section04 .inner:hover .img-box {box-shadow:5px 5px 10px 5px rgba(0,0,0,0.16);}
.section04 .inner .img-box .pic {position:relative; height:0; padding-bottom:81.818%; overflow:hidden; transition:all 0.6s;}
.section04 .inner:hover .img-box .pic {transform:scale(1.1);}
.section04 .inner .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.section04 .inner .txt-box {padding:0 10px;}
.section04 .inner .txt-box h4 {font-size:18px; margin-bottom:20px; font-weight:400; line-height:1.6em; color:#666; transition:all 0.6s; height:calc(1.6em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.section04 .inner:hover .txt-box h4 {color:#b5985a;}
.section04 .inner .txt-box p {font-size:14px; line-height:1.8em; color:#888; position:relative; font-family:'Montserrat'; padding-left:18px;}
.section04 .inner .txt-box p:before {content:''; width:12px; height:12px; background:url('../img/main/sec04-date.png') no-repeat; position:absolute; top:50%; margin-top:-8px; left:0;}
.section04 .sec-tit p { margin-bottom:25px}


.section04 .slick-arrow {width:44px; height:64px; position:absolute; top:50%; margin-top:-32px; font-size:0; border:0; background-color:transparent; background-repeat:no-repeat; cursor:pointer; z-index:11; transition:all 0.6s;}
.section04 .slick-prev {background-image:url('../img/main/sec04-prev.png'); left:-50px; background-position:right center;}
.section04 .slick-next {background-image:url('../img/main/sec04-next.png'); right:-50px; background-position:left center;}
.section04 .slick-prev:hover {background-position:left center;} 
.section04 .slick-next:hover {background-position:right center;}