@charset "utf-8";

.main {width:100%; height:860px; padding-top:210px;}

.main .visual {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;}
.main .visual .item {height:860px;}
.main .visual .item .secting-img {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; z-index:-1;} 



.main .col {display:flex; max-width:1470px; width:100%; padding:0 15px; margin:0 auto; align-items:flex-end;}
.main .origin {width:1%; flex:1 1 auto; color:#fff; padding-right:20px;}

.main .origin h2 {font-size:70px; font-weight:400; line-height:1.2em; margin-bottom:54px; letter-spacing:-.05em;}
.main .origin .item {height:510px; padding-bottom:100px; display:flex; flex-direction:column; justify-content:flex-end;}
.main .origin .item.slick-active h2 {animation:text-focus-in .6s cubic-bezier(.55,.085,.68,.53) both;}
@keyframes text-focus-in{0%{filter:blur(10px);opacity:0}100%{filter:blur(0);opacity:1}}
.main .origin ul {display:flex; flex-wrap:wrap; margin:0 -5px;}
.main .origin ul li {padding:0 5px; margin-bottom:10px; opacity:0;}
.main .origin ul li a {display:block; width:200px; min-height:80px; padding:15px 15px; border:1px solid rgba(255,255,255,0.5); border-radius:5px; font-size:16px; line-height:1.5em; color:#fff; transition:all 0.6s;}
.main .origin ul li a:hover {border-color:#317ef1; background:#317ef1;}
.main .origin .item.slick-active ul li {animation:slide-top .6s cubic-bezier(.25,.46,.45,.94) both;}
.main .origin .item.slick-active ul li:nth-child(1) {animation-delay:0.4s;}
.main .origin .item.slick-active ul li:nth-child(2) {animation-delay:0.5s;}
.main .origin .item.slick-active ul li:nth-child(3) {animation-delay:0.6s;}
.main .origin .item.slick-active ul li:nth-child(4) {animation-delay:0.7s;}
.main .origin .item.slick-active ul li:nth-child(5) {animation-delay:0.8s;}
.main .origin .item.slick-active ul li:nth-child(6) {animation-delay:0.9s;}
@keyframes slide-top{0%{transform:translateY(100px);opacity:0;}100%{transform:translateY(0);opacity:1;}}

.main .thumb {max-width:576px; width:100%;}
.main .thumb .items {margin-bottom:40px; border-radius:15px; overflow:hidden;}
.main .thumb .main-btns {display:flex; justify-content:space-between;}
.main .thumb .slick-arrow {width:55px; height:55px; margin-left:10px; background-size:20px; background-color:rgba(255,255,255,0.3); border-radius:50%; z-index:1; position:relative; background-repeat:no-repeat; background-position:center center; cursor:pointer; font-size:0; border:0; transition:all 0.6s; animation:roll-in-right 1s ease-out both;}
@keyframes roll-in-right{0%{transform:translateX(400px) rotate(720deg);opacity:0}100%{transform:translateX(0) rotate(0deg);opacity:1}}
.main .thumb .slick-arrow:hover {background-color:#2b2e3a;}
.main .thumb .slick-prev {background-image:url('../img/main/main-prev.png');}
.main .thumb .slick-next {background-image:url('../img/main/main-next.png'); animation-delay:0.2s;}
.main .thumb .slick-prev:hover {background-image:url('../img/main/main-prev-on.png');}
.main .thumb .slick-next:hover {background-image:url('../img/main/main-next-on.png');}
.main .custom_paging {}
.main .custom_paging li {display:none; transition:all 0.6s;}
.main .custom_paging li.slick-active {display:block;}
.main .custom_paging span {display:inline-block; color:#fff; font-weight:600; line-height:55px;}
.main .custom_paging .count {font-size:24px; position:relative; padding-right:50px; margin-right:15px;}
.main .custom_paging .count:after{content:''; height:1px; position:absolute; top:50%; right:0; width:40px; background:rgba(255,255,255,0.3);}
.main .custom_paging .num {font-size:15px; opacity:0.3;}