/* cover */
.cover{ width: 100%; height: 100vh; display: flex; position: absolute; top: 0; left: 0; z-index: 100; }
.cover div{ width: calc((100% / 4) + 5px); height: 100%; background: #FFF; transform: scaleX(1); transform-origin: left; }
.cover > div:not(:last-of-type){ margin-right: -5px; }

/* intro */
#intro{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; }
#intro .cover{ display: flex; z-index: 10; }

#intro .txt{ position: absolute; top: 50%; right: 0; left: 0; z-index: 10; transform: translateY(-50%); text-align: center; opacity: 1; animation: introLeave 1s both; }
#intro h2{ font-size: 6.8rem; font-weight: 600; color: #111; letter-spacing: -0.02em; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); animation: introText 1s both; }
#intro h2 strong{ font-weight: inherit; color: var(--mainColor); }

#intro .txt-box .txt:nth-child(1){ animation-delay: 2s; }
#intro .txt-box .txt:nth-child(2){ animation-delay: 4s; }
#intro .txt-box .txt:nth-child(2) h2{ animation-delay: 2s; }

#intro.clear{ pointer-events: none; }
#intro.clear .cover > div{ animation: coverLeft 1s both; }

@media screen and (max-width: 540px){
	#intro h2{ font-size: 5rem; }
}

/* common */
.ptH{ padding-top: var(--headerH); }
.vertical{ height: 100vh; }
.bottom{ height: 100vh; display: flex; align-items: flex-end; padding-bottom: 60px; }
#fullpage .fp-auto-height{ position: relative; z-index: 10; }

@media screen and (max-height: 700px){
	.ptH{ padding-top: 0; }
	.bottom{ height: auto; padding-bottom: 0; }
}

@media screen and (max-width: 1200px){
	.ptH{ padding-top: 0; }
	.bottom{ height: auto; padding-bottom: 0; }
}

/* title-box */
.title-box *{ color: #FFF; }
.title-box h3{ font-size: 6.8rem; font-weight: 600; letter-spacing: -0.02em; }
.title-box span{ color: var(--mainColor); }
.title-box p{ font-size: 22px; font-weight: 300; letter-spacing: -0.02em; }
.title-box i{ font-style: normal; }

.title-box.black *{ color: #111; }
.title-box.black h3{ font-weight: 700; }

@media screen and (max-width: 1700px){
	.title-box p{ font-size: 20px; }
}

@media screen and (max-width: 1280px){
	.title-box p{ font-size: 18px; }
}

@media screen and (max-width: 700px){
	.title-box p{ font-size: 17px; }
}


/* navi */
#navi{ display: flex; flex-direction: column; align-items: center; position: fixed; top: 50%; right: 10px; z-index: 50; transform: translateY(-50%); opacity: 1; transition: opacity 0.3s; }
#navi button{ display: flex; justify-content: center; align-items: center; background: none; border: none; border-radius: 0; -webkit-border-radius: 0; padding: 20px; opacity: 0.2; transition: opacity 0.3s; }
#navi p{ font-family: var(--engFont); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; writing-mode: vertical-lr; }
#navi span{ color: #FFF; transition: opacity 0.3s, color 0.3s; }
#navi .idx{ opacity: 0.2; margin-bottom: 10px; }

#navi.scroll button{ opacity: 1; }
#navi.scroll span{ color: #111; }
#navi.scroll .idx{ color: #DDD; opacity: 1; }

#navi.opacity{ opacity: 0; pointer-events: none; }

@media screen and (max-height: 700px){
	#navi{ display: none; }
}

@media screen and (max-width: 1200px){
	#navi{ display: none; }
}


/* visual */
#visual{ position: relative; overflow: hidden; }
#visual .cover.animated{ pointer-events: none; }
#visual .cover.animated div{ animation: coverLeft 1s both; }

#visual .visual .bg{ --scale: scale(1.05); height: 100vh; transform: scale(1.05); animation: bgScale 1.5s 0.3s both; }
#visual .visual .bg01{ background: url("/img/main/visual01_02.jpg") no-repeat center center / cover; }
#visual .visual .bg02{ background: url("/img/main/visual02_01.jpg") no-repeat center center / cover; }
#visual .visual .bg03{ background: url("/img/main/visual03_01.jpg") no-repeat center center / cover; }

#visual .text-box{ position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 30px; }
#visual .text-box > div{ position: relative; }

#visual .text-box .text{ margin-bottom: 40px; }
#visual .text-box .text ul li:not(.animated){ display: none; }
#visual .text-box h2{ --transform: var(--aosPlus); font-size: 7.8rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1.4; transform: translateX(var(--aosPlus)); opacity: 0; }

#visual .visual.slick-active{ --scale: scale(1.1); animation: bgScale 1s both; }
#visual .text-box .text ul li.animated h2{ animation: transformX 1s both; }

#visual .slide-option{ display: flex; align-items: center; margin: -7px 0; }
#visual .slick-dots{ display: flex; }
#visual .slick-dots li{ width: 8px; height: 8px; background: #fff; opacity: 0.3; border-radius: 100px; margin-right: 15px; transition: width 0.3s, opacity 0.3s; }
#visual .slick-dots li.slick-active{ width: 40px; opacity: 1; }
#visual .slick-dots li button{ display: none; }
#visual .slide-option .btns, #visual .slide-option .autoplay{ display: flex; align-items: center; }
#visual .slide-option .autoplay{ position: relative; }
#visual .slide-option button{ height: 20px; background: none; border: none; padding: 0 7px; }
#visual .slide-option button img{ vertical-align: middle; }
#visual .slide-option button.play{ display: none; }

#visual .scrollDown{ display: flex; align-items: flex-end; position: absolute; bottom: 0; right: 20px; }
#visual .scrollDown span{ font-family: var(--engFont); font-size: 14px; font-weight: 700; color: #FFF; letter-spacing: -0.02em; }
#visual .scrollDown .icon{ width: 17px; height: 30px; border: 2px solid #FFF; border-radius: 100px; margin-left: 10px; position: relative; padding: 6px 0; }
#visual .scrollDown .icon::before{ content: ""; width: 3px; height: 3px; background: #FFF; border-radius: 50%; position: absolute; top: 6px; left: 50%; transform: translateX(-75%); animation: scrollDown 1.3s infinite; will-change: top, opacity; }

@media screen and (max-width: 700px){
	#visual .visual .bg{ height: var(--vh); }
	#visual .text-box h2{ font-size: 7rem; }
}


/* fade */
#fade{ position: relative; z-index: 10; }
#fade .sec{ height: 100vh; }
#fade .sec-title{ display: none; text-align: center; position: relative; z-index: 20; padding-bottom: 50px; }
#fade .sec-title h3 div{ display: inline-block; }
#fade .sec-title p{ padding-top: 15px; }
#fade .sticky-box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; }
#fade .sticky-box.opacity{ opacity: 0; }
#fade .sticky-box .sticky{ width: 100%; opacity: 1; position: sticky; top: 0; left: 0; }
#fade .sticky-box .sticky .vertical{ width: 100%; }

#fade .sticky-box .circle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s; }
#fade .sticky-box .circle.active{ opacity: 1; }
#fade .sticky-box .circle img{ display: inline-block; animation: rotate360 6s linear infinite; }

#fade .sticky-box.img{ z-index: -1; }
#fade .sticky-box .bg-box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; opacity: 1; }
#fade .sticky-box .bg-box::after{ content: ""; background: linear-gradient(140deg, #061D11 30%, #000000); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; opacity: 1; transition: opacity 1s; }
#fade .sticky-box .bg-box.aos-animate::after{ opacity: 0; }
#fade .sticky-box .bg-box .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.1); transition: transform 1s, opacity 1s; }
#fade .sticky-box .bg-box .bg::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; opacity: 0; }
#fade .sticky-box .bg-box.aos-animate .bg{ transform: scale(1); }
#fade .sticky-box .bg-box .bg:not(.active){ opacity: 0; }
#fade .sticky-box .bg-box .bg01{ background: url("/img/main/business_bg2.jpg") no-repeat center center / cover; }
#fade .sticky-box .bg-box .bg02{ background: url("/img/main/overview_bg.jpg") no-repeat center center / cover; }
#fade .sticky-box .bg-box .bg03{ background: url("/img/main/sustainable_bg_n.jpg") no-repeat center center / cover; }

#fade .sticky-box.text{ z-index: 50; transition: opacity 1s; pointer-events: none; }
#fade .sticky-box.text .vertical{ display: flex; flex-direction: column; justify-content: center; }
#fade .sticky-box .title-box{ width: 100%; text-align: center; position: relative; top: 0; transition: top 1s, transform 1s, opacity 1s; }
#fade .sticky-box .title-box.top{ top: calc(-50% + var(--headerH) + 30px); transform: translateY(50%); transition-delay: 1.2s; }
#fade .sticky-box .title-box h3{ display: flex; justify-content: center; }
#fade .sticky-box .title-box .rolling{ display: flex; flex-direction: column; align-items: center; }
#fade .sticky-box .title-box .rolling div{ width: 100%; position: relative; transition: transform 1s; }
#fade .sticky-box .title-box .rolling div > *:not(:first-child){ position: absolute; top: 0; left: 50%; }

#fade .sticky-box .title-box .span{ overflow: hidden; transition: width 1s; }
#fade .sticky-box .title-box .span div{ display: inline-block; }
#fade .sticky-box .title-box .span span{ display: inline-block; padding: 0 10px 0 20px; }

#fade .sticky-box .fade{ position: relative; transition: width 1s; }
#fade .sticky-box .fade em{ white-space: nowrap; opacity: 1; transition: opacity 1s; }
#fade .sticky-box .fade em:not(.active){ position: absolute; top: 0; left: 0; opacity: 0; }

#fade .sticky-box .p{ margin-top: 20px; overflow: hidden; }
#fade .sticky-box .p p{ width: 100%; }

@media screen and (max-height: 700px){
	#fade .sec{ min-height: 800px; height: auto; padding: 100px 0; }
	#fade .sec-title{ display: block; }

	#fade .sticky-box .bg-box .black::after{ opacity: 1; }
	#fade .sticky-box.text{ display: none; }
}

@media screen and (max-width: 1200px){
	#fade .sec{ min-height: 800px; height: 80vh; padding: 100px 0; }
	#fade .sec-title{ display: block; }

	#fade .sticky-box .bg-box .black::after{ opacity: 1; }
	#fade .sticky-box.text{ display: none; }
}

@media screen and (max-width: 900px){
	#fade .sec-title{ padding-bottom: 30px; }
}


/* business */
#business{ position: relative; overflow: hidden; }
#business .title-box i{ display: block; }

#business .bg-box{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#business .bg-box::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s; }
#business .bg-box.active::before{ opacity: 1; }
#business .bg-box > div{ width: 50%; height: 100%; position: absolute; top: 0; overflow: hidden; }
#business .bg-box .left{ left: 0; }
#business .bg-box .right{ right: 0; }

#business .bg-box > div::before{ content: ""; display: block; height: 100%; overflow: hidden; transform: scale(1); transition: clip-path 0.8s, transform 0.8s; }
#business .bg-box .left::before{ background: url("/img/main/business_left_01.jpg") no-repeat center center / cover; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); left: 0; }
#business .bg-box .right::before{ background: url("/img/main/business_right.jpg") no-repeat center center / cover; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
#business .bg-box > div.on::before{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform: scale(1.1); }

#business .flex-box{ display: flex; justify-content: center; }
#business .half{ width: 50%; height: 100vh; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 40px; position: relative; z-index: 10; }
#business .half a{ --size: 2.8rem; --hoverSize: 4.2rem; display: inline-block; font-size: var(--size); font-weight: 600; color: #FFF; letter-spacing: -0.02em; padding: 20px; opacity: 0.2; transition: font-size 0.5s, opacity 0.5s; }
#business .half a::after{ content: ""; display: inline-block; width: calc((var(--size) / 2) + 5px); height: calc((var(--size) / 2) + 5px); background: url("/img/main/target_blank.svg") no-repeat center center / contain; margin-left: 20px; vertical-align: middle; position: relative; top: -2px; transition: width 0.5s, height 0.5s; }

@media screen and (hover: hover){
	#business .half .link:hover + .bg::before{  }
	#business .half a:hover{ --size: var(--hoverSize); opacity: 1; }
}

@media screen and (max-height: 700px){
	#business{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
	#business .flex-box{ width: 100%; }
	#business .half{ height: auto; }
}

@media screen and (max-width: 1280px){
	#business .half a{ --size: 4.2rem; --hoverSize: 4.2rem; }
}

@media screen and (max-width: 1200px){
	#business{ min-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
	#business .bg-box > div{ width: 100%; }
	#business .bg-box > div::before{  }

	#business .flex-box{ width: 100%; }
	#business .half{ width: auto; height: auto; }
}

@media screen and (max-width: 900px){
	#business .half a::after{ width: 15px; height: 15px; margin-left: 10px; }
}


/* overview */
#overview{ overflow: hidden; }
#overview .flex-box{ width: 100%; display: flex; align-items: flex-end; text-align: center; position: relative; }
#overview .item{ width: calc(100% / 5); padding: 0 10px; }
#overview dl{ color: rgba(255, 255, 255, 0.2); letter-spacing: -0.02em; transition: color 0.5s; }
#overview dl dd{ font-size: 22px; font-weight: 600; padding-bottom: 35px; transition: font-size 0.8s;  position: relative; }
#overview dl dd::before{ content: ""; width: 9px; height: 9px; background: var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
#overview dl dd strong{ font-size: inherit; font-family: var(--engFont); font-weight: 500; transition: font-size 0.8s; }
#overview dl dt{ font-size: 20px; font-weight: 500; padding-top: 35px; }

#overview .item.on dl{ color: #fff; }
#overview .item.on dl dd{ font-size: 24px; }
#overview .item.on dl dd strong{ font-size: 6.8rem; }

#overview .bar{ width: 100vw; height: 1px; background: rgba(255, 255, 255, 0.2); position: absolute; bottom: 61px; left: 50%; transform: translateX(-50%); }
#overview .bar div{ width: 0; height: 100%; background: linear-gradient(to right, #003F1F, #00A550);
	animation-duration: 15s; animation-timing-function: linear; animation-iteration-count: infinite;
}
#overview .bar .mobile{ display: none; }
#overview.on .bar .pc{ animation-name: barWidth; }

@media screen and (max-height: 700px){
	#overview .item.on dl dd{ font-size: 22px; }
	#overview .item.on dl dd strong{ font-size: inherit; }

	#overview .bar .pc{ animation-name: barWidth; }
}

@media screen and (max-width: 1280px){
	#overview dl dd{ font-size: 20px; }
	#overview .item.on dl dd{ font-size: 22px; }
}

@media screen and (max-width: 1200px){
	#overview .item.on dl dd{ font-size: 20px; }
	#overview .item.on dl dd strong{ font-size: inherit; }

	#overview .bar .pc{ animation-name: barWidth; }
}

@media screen and (max-width: 800px){
	#overview .sec-title{ padding-bottom: 50px; }
	#overview .flex-box{ flex-direction: column; align-items: center; }
	
	#overview .bar{ width: 1px; height: calc(100% - 62px); top: 50%; bottom: unset; transform: translate(-50%, -50%); }
	#overview .bar .pc{ display: none; }
	#overview .bar .mobile{ display: block; }
	#overview .bar .mobile{ width: 100%; height: 0; animation-name: unset; }

	#overview .item{ width: 100%; }
	#overview .item:not(:last-of-type){ padding-bottom: 50px; }
	#overview .item:nth-of-type(odd){ padding-left: 50%; }
	#overview .item:nth-of-type(even){ padding-right: 50%; }
	#overview .item dl{ width: max-content; }
	#overview .item:nth-of-type(odd) dl{ padding-left: 40px; }
	#overview .item:nth-of-type(even) dl{ padding-right: 40px; margin-left: auto; }
	#overview .item dl dd{ padding-bottom: 10px; }
	#overview .item:nth-of-type(odd) dl dd::before{ left: -40px; }
	#overview .item:nth-of-type(even) dl dd::before{ left: calc(100% + 40px); }
	#overview .item dl dt{ padding-top: 0; }
}

@keyframes barWidth{
	0%{ width: 0; }
	100%{ width: 100%; }
}

@keyframes barHeight{
	0%{ height: 0; }
	100%{ height: 100%; }
}


/* sustainable */
#sustainable{ --delay: 1.2s; position: relative; z-index: 10; }
#sustainable::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s; z-index: -1; }
#sustainable.slick-active::before{ opacity: 1; transition-delay: var(--delay); }

#sustainable .flex-box{ width: 100%; height: 100vh; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: var(--headerH); }
#sustainable .item{ display: block; max-width: calc((100% - 60px) / 2); width: 800px; position: relative; transform: translateY(100%); opacity: 0; }
#sustainable .item:nth-of-type(odd){ margin-bottom: 150px; }
#sustainable .item:nth-of-type(even){ margin-top: 150px; }
#sustainable .item figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 65%; }
#sustainable .item figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#sustainable .item .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);  text-align: center; padding: 0 25px; opacity: 0; margin-top: var(--aosPlus); transition: margin 0.8s, opacity 0.8s; }
#sustainable .item dl *{ color: #FFF; letter-spacing: -0.02em; }
#sustainable .item dl dt{ font-size: 8.4rem; font-weight: 500; margin-bottom: 10px; }
/* #sustainable .item dl dt::after{ content: ""; display: inline-block; width: 35px; height: 35px; background: url("/img/main/target_blank.svg") no-repeat center center / contain; margin-left: 30px; vertical-align: middle; transform: translateY(-20%); } */
#sustainable .item dl dd{ font-size: 24px; font-weight: 400; }

#fade:not(.active) #sustainable.slick-active .item{ transform: translateY(100%); opacity: 0; }
#fade.active #sustainable.slick-active .item{ transform: translateY(0); opacity: 1; }

#sustainable.slick-active .item{ transform: translateY(0); opacity: 1; }
#sustainable.slick-active .item:nth-of-type(odd){ transition-delay: 1s; }
#sustainable.slick-active .item:nth-of-type(even){ transition-delay: 1.2s; }

@media screen and (hover: hover){
	#sustainable .item:hover img{ animation: filterScale 1.2s linear; }
	#sustainable .item:hover .text{ margin-top: 0; opacity: 1; }
}

@keyframes filterScale{ 
	0%{ transform: translate(-50%, -50%) scale(1); }
	40%{ transform: translate(-50%, -50%) scale(1.1); filter: invert(1); -webkit-filter: invert(1); }
	50%{ transform: translate(-50%, -50%) scale(1.1); filter: invert(1); -webkit-filter: invert(1); }
	100%{ transform: translate(-50%, -50%) scale(1); filter: invert(0); -webkit-filter: invert(0); }
}

@media screen and (max-height: 700px){
	#sustainable .flex-box{ height: auto; padding-top: 0; }
	#sustainable .item{ transform: translateY(var(--aosMinus)); }
	#sustainable .item.aos-animate{ transform: translateY(0); opacity: 1; }
	#sustainable .item .text{ margin-top: 0; opacity: 1; }
}

@media screen and (max-width: 1700px){
	#sustainable .item:nth-of-type(odd){ margin-bottom: 100px; }
	#sustainable .item:nth-of-type(even){ margin-top: 100px; }
	#sustainable .item dl dd{ font-size: 22px; }
}

@media screen and (max-width: 1280px){
	#sustainable .item:nth-of-type(odd){ margin-bottom: 50px; }
	#sustainable .item:nth-of-type(even){ margin-top: 50px; }
	#sustainable .item dl dt::after{ width: 25px; height: 25px; margin-left: 20px; }
	#sustainable .item dl dd{ font-size: 20px; }
}

@media screen and (max-width: 1200px){
	#fade .sec#sustainable{ min-height: auto; height: auto; }
	#sustainable .flex-box{ height: auto; padding-top: 0; }
	#sustainable .item{ max-width: calc((100% - 30px) / 2); transform: translateY(var(--aosMinus)); }
	#sustainable .item.aos-animate{ transform: translateY(0); opacity: 1; }
	#sustainable .item .text{ margin-top: 0; opacity: 1; }
}

@media screen and (max-width: 900px){
	#sustainable .item dl dt::after{ width: 20px; height: 20px; margin-left: 15px; }
	#sustainable .item dl dd{ font-size: 18px; }
}

@media screen and (max-width: 700px){
	#sustainable .item{ max-width: 100%; width: 100%; }
	#sustainable .item:nth-of-type(odd){ margin-bottom: 0; }
	#sustainable .item:nth-of-type(even){ margin-top: 0; }
	#sustainable .item:not(:last-of-type){ margin-bottom: 30px; }
}


/* news */
#news{ position: relative; z-index: 10; background: #fff; }
#news .title{ display: flex; align-items: center; margin-bottom: 80px; }
#news .tab-menu{ margin-left: 45px; }
#news .tab-menu ul{ display: flex; }
#news .tab-menu ul li{ position: relative; font-size: 20px; font-weight: 700; color: #DDD; letter-spacing: -0.02em; padding: 15px; cursor: pointer; }
#news .tab-menu ul li::after{ content: ""; width: 4px; height: 4px; background: #DDD; border-radius: 50%; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#news .tab-menu ul li:last-of-type::after{ display: none; }
#news .tab-menu ul li.on{ color: #111; }

#news .tab-content .tab:not(:first-of-type){ display: none; }

#news .news-wrap{ overflow: hidden; }
#news .news-wrap .slick-list{ margin-right: -40px; }
#news .news-wrap .slick-track{ margin: 0; }
#news .news{ margin-right: 40px; }
#news .news span{ font-family: var(--engFont); font-size: 18px; font-weight: 600; color: #DDD; letter-spacing: -0.02em; }
#news .news h6{ height: 3em; display: -webkit-box; font-size: 22px; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1.5; word-break: break-word; white-space: normal; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 20px 0; }
#news .news figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 72.73%; }
#news .news figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.5s; }

#news .slide-option{ margin-top: 60px; position: relative; z-index: 10; }
#news .slide-option .bar{ width: 100%; height: 2px; background: #E5E5E5; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%); }
#news .slide-option .bar div{ width: 0; height: 100%; background: #000; }
#news .slide-option .btns{ width: 100px; display: flex; justify-content: center; align-items: center; background: #fff; border: 2px solid #E5E5E5; border-radius: 100px; margin: 0 auto; }
#news .slide-option .btns button{ width: 20px; height: 40px; display: flex; justify-content: center; align-items: center; padding: 0; background: none; border: none; }
#news .slide-option .btns button img{ width: auto; height: auto; vertical-align: middle; }
#news .slide-option .autoplay .play{ display: none; }

@media screen and (hover: hover){
	#news .news figure:hover img{ transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-height: 700px){
	#news{ padding: 100px 0; }
}

@media screen and (max-width: 1700px){
	#news .title{ margin-bottom: 50px; }

	#news .news span{ font-size: 17px; }
	#news .news h6{ font-size: 20px; }

	#news .slide-option{ margin-top: 40px; }
	#news .slide-option .btns{ width: 90px; }
	#news .slide-option .btns button{ height: 35px; }
}

@media screen and (max-width: 1280px){
	#news .title{ margin-bottom: 30px; }
	#news .tab-menu{ margin-left: 20px; }
	#news .tab-menu ul li{ font-size: 18px; }

	#news .news span{ font-size: 16px; }
	#news .news h6{ font-size: 18px; margin: 10px 0; }

	#news .slide-option{ margin-top: 20px; }
	#news .slide-option .btns{ width: 80px; }
	#news .slide-option .btns button{ height: 30px; }
}

@media screen and (max-width: 1200px){
	#news{ padding: 80px 0; }
}

@media screen and (max-width: 1000px){
	#news .news-wrap .slick-list{ margin-right: -25px; }
	#news .news{ margin-right: 25px; }
}

@media screen and (max-width: 650px){
	#news .news-wrap{ width: calc(100% + 20px); }
	#news .news{ width: 300px; }
}