@charset "utf-8";

#visual-slider {overflow: hidden;}
#visual-slider .inner {position: relative; max-width: 1920px;}
#visual-slider img {object-fit: cover; object-position: center;height: 959px;}
#visual-slider ul li {position: relative;}
#visual-slider .text-box {position: absolute; left: 80px; top: 374px; letter-spacing: -.05em; color: #fff; z-index: 1;}
#visual-slider .text-box h2 {margin-bottom: 37px; font-size: 60px; line-height: 1.2; letter-spacing: -.05em; font-family: "Gmarket Medium";}
#visual-slider .text-box h2 span {display: block; font-size: 60px; font-family: "Gmarket Bold";}
#visual-slider .text-box p {width: 500px; font-size: 25px; line-height: 1.4; font-family: "Noto Medium"; letter-spacing: -.05em;}
#visual-slider .slick-custom-wrap {position: absolute; min-width: 758px; top: 780px; left: 0;}
#visual-slider .slick-custom-wrap::before {content: ""; position: absolute; left: 0; top: 50%; margin-top: -.5px; width: 686px; height: 1px; background-color:#fff;}
#visual-slider .slick-custom-wrap > div {display: flex; align-items: center; margin-left: 700px;}
#visual-slider .slick-custom-wrap .paging ul {display: flex; align-items: center;}
#visual-slider .slick-custom-wrap .paging li {width: 15px; height: 15px; margin-right: 5px; border: 1px solid #fff; border-radius: 50%;}
#visual-slider .slick-custom-wrap .paging li:last-child {margin-right: 9px;}
#visual-slider .slick-custom-wrap .paging li button {width: 100%;height: 100%; text-indent: -9999px;}
#visual-slider .slick-custom-wrap .paging li.slick-active {width: 18px; height: 18px; background-color:#fff;}
#visual-slider .slick-custom-wrap .slick-stop {width: 8px; height: 11px; background-image: url('../images/pause-icon-white.png'); background-repeat: no-repeat; background-position: center; background-size: contain;}
#visual-slider .slick-custom-wrap .slick-start {display: none; width: 9px; height: 12px; background-image: url('../images/play-icon-white.png'); background-repeat: no-repeat; background-position: center; background-size: cover;}

/* keyframes */
#visual-slider img {animation-name: mainVisualScale; animation-duration: 5s; animation-fill-mode: forwards; transform: scale(1.2);}
#visual-slider .text-box h2 {animation-name: text_1; animation-duration: 2s; animation-fill-mode: forwards; opacity: 0; transform: translateY(-50px); opacity: 0;}
#visual-slider .text-box p {animation-name: text_2; animation-duration: 2s; animation-fill-mode: forwards; opacity: 0; transform: translateY(50px);}
#visual-slider .slick-custom-wrap {opacity: 0; animation-name: text_3; animation-duration: 2s; animation-fill-mode: forwards;}

@keyframes mainVisualScale{
	0%{}
	100%{transform: scale(1);}
}
@keyframes text_1{
	0%{}
	100%{opacity: 1; transform: translateY(0px);}
}
@keyframes text_2{
	0%{}
	100%{opacity: 1; transform: translateY(0px);}
}
@keyframes text_3{
	0%{}
	100%{opacity: 1;}
}
@media (max-width: 1600px) {
	#visual-slider .inner{padding-left: 0 !important; padding-right: 0 !important;}
}
@media (max-width: 1260px) {
	#visual-slider .text-box h2 span {font-size: 48px;}
	#visual-slider .slick-arrow {width: 70px; height: 65px;}
}
@media (max-width: 1023px) {
	#visual-slider .text-box {width: calc(100% - 60px); top: 300px; left: 30px;}
	#visual-slider .text-box h2 {font-size: 40px; width: 400px;}
	#visual-slider .text-box h2 span {font-size: 40px;}
	#visual-slider .text-box p {font-size: 18px;width: 366px;}
	#visual-slider img {height: 800px;}
	#visual-slider .slick-custom-wrap > div {margin-left: 410px;}
	#visual-slider .slick-custom-wrap::before {width: 400px;}
	#visual-slider .slick-custom-wrap {top: 650px; left: 35px; min-width: auto;}
}
@media (max-width: 768px) {
	#visual-slider .text-box {top: 230px;}
	#visual-slider .text-box h2 {font-size: 35px; margin-bottom: 20px;}
	#visual-slider .text-box h2 span {font-size: 35px;}

	#visual-slider img {height: 600px;}
	#visual-slider .slick-custom-wrap {top: 510px;}
	#visual-slider .slick-custom-wrap::before {width: 120px;}
	#visual-slider .slick-custom-wrap > div {margin-left: 150px;}
	#visual-slider .slick-custom-wrap .paging li {width: 10px; height: 10px;}
	#visual-slider .slick-custom-wrap .paging li.slick-active {width: 12px; height: 12px;}
}
@media (max-width: 500px) {
	/*#visual-slider .text-box h2 {font-size: 28px;}
	#visual-slider .text-box h2 span {font-size: 28px;}
	#visual-slider .text-box p {width: 90%;}*/
}