/* common */
#fp-nav{ transition: opacity 0.3s; }  
#fp-nav.right{ top: 50%; left: 32px; pointer-events: none; }
#fp-nav ul{ margin-bottom: -34px; }
#fp-nav ul li:nth-of-type(6){ display: none; }
#fp-nav ul li:last-of-type{ display: none; }
#fp-nav ul li{ margin-bottom: 34px; cursor: pointer; }
#fp-nav ul li a, .fp-slidesNav ul li a{ pointer-events: auto; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{ display: inline-block; width: 6px; height: 6px; background: var(--mainColor); opacity: 0.3; margin: 0; position: relative; }
#fp-nav ul li a span::after, .fp-slidesNav ul li a span::after{ content: ""; width: 22px; height: 22px; border: 1px solid var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: all 0.3s; } 
#fp-nav ul li a.active span, .fp-slidesNav.active ul li a span{ width: 6px; height: 6px; opacity: 1; margin: 0; }
#fp-nav ul li a.active span::after, .fp-slidesNav.active ul li a span::after{ transform: translate(-50%, -50%) scale(1); } 

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{ width: 6px; height: 6px; margin: 0; }
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width: 6px; height: 6px; margin: 0; } 
/* #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ opacity: 1; }
#fp-nav ul li:hover a span::after, .fp-slidesNav ul li:hover a span::after{ transform: translate(-50%, -50%) scale(1); } */

#fp-nav.scroll ul li a span, .fp-slidesNav.scroll ul li a span{ background: #fff; }
#fp-nav.scroll ul li a span::after, .fp-slidesNav.scroll ul li a span::after{ border: 1px solid #fff; }

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

.title h4{ font-size: 6.2rem; font-weight: 700; }

@media screen and (max-width: 1820px){
	#fp-nav.right{ top: calc(100% - 50px); left: 20px; }
	#fp-nav ul{ display: flex; margin-bottom: 0; margin-right: -20px; }
	#fp-nav ul li{ margin-bottom: 0; margin-right: 20px; }
}

/* visual */
#visual .visual{ height: 100vh; position: relative; }
#visual .visual .video-box{ position: relative; }
#visual .visual video{ width: 100%; height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; -webkit-object-fit: cover; }
#visual .visual .text-box{ width: 100%; position: absolute; top: 45%; left: 50%; z-index: 10; transform: translate(-50%, -50%); text-align: center; color: #fff; }
#visual .visual .text-box p{ font-size: 2.2rem; font-weight: 300; overflow: hidden; }
#visual .visual .text-box h2{ font-family: var(--Poppins); font-size: 10rem; font-weight: 700; letter-spacing: -0.04em; margin-top: 10px; overflow: hidden; }
#visual .visual .text-box span{ display: inline-block; transform: translateY(100%); }

#visual .visual .img-box{ position: relative; }
#visual .visual img{ width: 100%; height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; -webkit-object-fit: cover; }

#visual .slick-dots{ position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); display: flex; /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */ }
#visual .slick-dots li{ width: 270px; display: flex; justify-content: center; align-items: center; cursor: pointer; padding: 17px 0; opacity: 0.3; transition: opacity 0.3s; position: relative; }
#visual .slick-dots li::before{ content: ""; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; }
#visual .slick-dots li::after{ content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); position: absolute; bottom: 0; left: 0; }
/* #visual .slick-dots li:not(:last-of-type){ margin-right: 65px; } */
#visual .slick-dots li button{ border: none; background: none; padding: 0; font-family: var(--Poppins); font-size: 1.2rem; font-weight: 500; color: #fff; margin-right: 15px; outline: none; }
#visual .slick-dots li span{ font-size: 2rem; font-weight: 600; color: #fff; }

#visual .visual.slick-active .text-box p span, #visual .visual.slick_now .text-box p span{ animation: text-lift 0.9s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: 0.3s; }
#visual .visual.slick-active .text-box h2 span, #visual .visual.slick_now .text-box h2 span{ animation: text-lift 0.9s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: 0.6s; }
#visual .slick-dots li.slick-active{ opacity: 1; }
#visual .slick-dots li.slick-active::before{ opacity: 1; }

@keyframes text-lift{
	0%{ transform: translateY(100%) }
	100%{ transform: translateY(0) }
} 

@media screen and (max-width: 1500px){
	#visual .visual .text-box h2{ font-size: 8.5rem; }
	#visual .visual .text-box p{ font-size: 2rem; }
	#visual .slick-dots li span{ font-size: 1.8rem; }

	.title h4{ font-size: 5.5rem; }
}

@media screen and (max-width: 1200px){
	#visual .visual .text-box h2{ font-size: 7rem; }
	#visual .slick-dots li{ width: 240px; }

	.title h4{ font-size: 4.5rem; }
}

@media screen and (max-width: 1050px){
	#visual .slick-dots{ width: calc(100% - 40px); flex-wrap: wrap; gap: 10px 0; }
	#visual .slick-dots li{ width: 50%; }
}

@media screen and (max-width: 700px){
	#visual .visual .text-box h2{ font-size: 6rem; }
	#visual .visual .text-box p{ font-size: 1.8rem; padding: 0; }
	#visual .visual .text-box p br{ display: none; }
	#visual .slick-dots{ bottom: 20%; /* width: calc(100vw - 80px); */ }
	#visual .slick-dots li{ /* width: auto; */ padding: 15px 10px; }
	#visual .slick-dots li:not(:last-of-type){ margin-right: 0; }
	#visual .slick-dots li span{ font-size: 1.6rem; }
}

@media screen and (max-width: 500px){
	#visual .slick-dots {bottom: 20%; justify-content: space-between;}
	#visual .slick-dots li span {font-size: 1.5rem;}
}

/* type */
#type{ overflow: hidden; }
#type .inner{ max-width: 1720px; width: 100%; margin: 0 auto; }
#type .type-wrap{ padding-top: 25px; }
#type .type-wrap .slick-list{ overflow: visible; }
#type .type-wrap .slick-track{ display: flex; align-items: center; }
#type .flex-box{ display: flex; align-items: center; }
#type .type{ overflow: hidden; }
#type .type figure{ width: 46.5%; }

#type .type .text-box{ width: 53.5%; padding: 0 70px; }
#type .type ul{ max-width: max-content; display: flex; flex-wrap: wrap; gap: 15px 0; margin-left: -35px; padding-right: 100px; }
#type .type ul li{ /* font-size: 2.4rem; */ width: max-content; font-size: 2rem; font-weight: 400; color: #aaa; padding: 6px 35px; position: relative; cursor: pointer; }
#type .type ul li::after{ content: ""; width: 5px; height: 5px; background: #aaa; border-radius: 50%; position: absolute; top: 50%; right: -2px; transform: translateY(-50%); }
#type .type ul li:nth-of-type(2n)::after{ display: none; }
#type .type ul li:last-of-type::after{ display: none; }

#type .type ul li.active{ font-weight: 600; color: var(--mainColor); }
#type .type ul li.active::before{ content: ""; width: calc(100% - 70px); height:  4px; background: var(--mainColor); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

#type .type .text-box div{ position: relative; left: -60px; opacity: 0; transition: all 1s; transition-delay: 0.8s; }
#type .type .text-box div:not(.tab-menu){ padding-top: 70px; transition-delay: 1.1s; }
#type .type span{ font-size: 2.1rem; font-weight: 400; color: #777; }
#type .type h3{ font-family: var(--Poppins); font-size: 6rem; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: -0.04em; margin: 7px 0 35px; }
#type .type h3 span{ font-size: 3rem; font-weight: 700; color: #111; margin-left: 17px; }
#type .type p{ font-size: 1.6rem; font-weight: 300; color: #777; line-height: 1.8; padding-bottom: 70px; }

#type .type a{ display: inline-block; font-family: var(--Poppins); font-size: 1.4rem; font-weight: 500; color: #111; position: relative; overflow: hidden; padding: 5px 0; padding-right: 30px; }
#type .type a img{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#type .type a::before, #type .type a::after{ content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; transition: all 0.3s; transition-delay: 0.3s; }
#type .type a::before{ background: #111; transform: scaleX(1); transform-origin: right; }
#type .type a::after{ background: #111; transform: scaleX(0); transform-origin: left; z-index: -1; transition-delay: unset; }

#type .type.slick-active .text-box div{ left: 0; opacity: 1; }
#type .type.slick_now .text-box div{ left: 0; opacity: 1; }
#type .type a:hover::before{ transform: scaleX(0); transition-delay: unset; }
#type .type a:hover::after{ transform: scaleX(1); transition-delay: 0.3s; }

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

@media screen and (max-width: 1820px){
	#type .inner{ padding: 0 50px; }  
}

@media screen and (max-width: 1620px){
	#type .type ul{ padding-right: 0; }

	#type .type .text-box{ padding: 0 50px; }
	#type .type .text-box div:not(.tab-menu){ padding-top: 40px; }
	#type .type p{ padding-bottom: 50px; }
	#type .type p br{ display: none; }
}

@media screen and (max-width: 1500px){
	#type .type ul{ gap: 10px 0; }
	#type .type ul li{ font-size: 1.8rem; }
	#type .type span{ font-size: 2rem; }
	#type .type h3{ font-size: 5rem; }
	#type .type h3 span{ font-size: 2.5rem; }
}

@media screen and (max-width: 1200px){
	#type{ padding: 100px 0; overflow: hidden; }
	#type .type-wrap{ padding-top: 0; }
	#type .type ul{ margin-left: -15px; }
	#type .type ul li{ padding: 6px 15px; }
	#type .type ul li.active::before{ width: calc(100% - 30px); }
	#type .type .text-box div:not(.tab-menu){ padding-top: 40px; }
	#type .type p{ padding-bottom: 30px; }
	#type .type h3{ margin-bottom: 30px; }
}

@media screen and (max-width: 1150px){
	#type .flex-box{ flex-direction: column; }
	#type .type-wrap .slick-list{ margin-right: -30px; }
	#type .type-wrap .slick-track{ align-items: flex-start; }
	#type .type{ margin-right: 30px; }
	#type .type figure{ max-width: 800px; width: 100%; }
	#type .type .text-box{ width: 100%; padding: 0; padding-top: 50px; }
}

@media screen and (max-width: 800px){
	#type .type ul li{ font-size: 1.6rem; }
	#type .type span{ font-size: 1.8rem; }
	#type .type .text-box div:not(.tab-menu){ padding-top: 30px; }  
	#type .type h3{ font-size: 3rem; margin-bottom: 10px; }
	#type .type h3 span{ font-size: 2.2rem; }
}


/* company */
#company{ overflow: hidden; }
#company .bg{ height: 100vh; background: url("/img/main/company_bg.jpg") no-repeat center center / cover; position: relative; }

#company .position{ width: 100%; height: 100%; }
#company .position.relative{ position: relative; }
#company .text-box{ width: 100%; text-align: center; width: 100%;  color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#company .text-box h4{ font-size: 5.4rem; font-weight: 300; line-height: 1.4851; }
#company .text-box h4 span{ font-weight: 700; }
#company .text-box p{ font-size: 2rem; font-weight: 200; line-height: 1.8; opacity: 0.8; margin-top: 100px; }
#company .position > span{ display: inline-block; font-family: var(--Poppins); font-size: 1.4rem; font-weight: 500; color: #fff; padding-bottom: 50px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#company .position > span::after{ content: ""; width: 1px; height: 40px; background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

#company .absolute{ height: calc(100vh + 1px); background: #fff; position: absolute; top: calc(50% - 1px); left: 50%; transform: translate(-50%, -50%); overflow: hidden;/* transition: all 0.8s; */ }
#company .absolute .text-box{ height: 100vh; background: url("/img/main/comapny_symbol.png") no-repeat center center; color: #111; display: flex; flex-direction: column; justify-content: center; align-items: center;  /* transition: all 0.8s; */ } 
#company .absolute .text-box h4 span em{ color: var(--mainColor); }
#company .absolute .text-box p{ opacity: 0; pointer-events: none; }
#company .position.absolute > span{ color: var(--mainColor); z-index: 20; /* transition: all 0.8s; */ }
#company .position.absolute > span::after{ background: var(--mainColor); }

@media screen and (max-height: 800px){
	#company .bg{ min-height: 100vh; height: 800px; }
}

@media screen and (max-width: 1500px){
	#company .text-box p br{ display: none; }
	#company .text-box h4{ font-size: 4.8rem; }
	#company .text-box p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1200px){
	#company{ overflow: visible; position: relative; z-index: -5; }
	#company .absolute .text-box{ width: calc(100% + 1px); height: calc(100% + 1px); left: -1px; margin-left: 1px; }
	#company .text-box h4{ font-size: 4rem; }
	#company .text-box p{ margin-top: 70px; } 
}

@media screen and (max-width: 800px){
	#company .text-box h4{ font-size: 3rem; }
	#company .text-box h4 br{ display: none; }
	#company .text-box p{ font-size: 1.6rem; margin-top: 40px; }
}


/* product */
#product{ background: #191919 url("/img/main/product_bg.png") no-repeat bottom right -60px / auto; overflow: hidden; }
#product .title{ color: #fff; padding-top: 150px; }
#product .title p{ font-size: 1.8rem; font-weight: 300; color: #ccc; line-height: 1.8555; margin-top: 40px; }

#product ul{ display: flex; flex-wrap: wrap; margin-top: 60px; }
#product ul li{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc(100% / 4); height: 205px; text-align: center; border-radius: 20px; overflow: hidden; position: relative; }
#product ul li::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor) url("/img/main/product_hover_bg.png") no-repeat bottom right / cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }
#product ul li figure{ position: relative; }
#product ul li img{ transition: all 0.5s; }
#product ul li .hover{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }
#product ul li h5{ font-size: 2.0rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-top: 30px; position: relative; }
#product ul li h5 span{ transition: all 0.5s; }
#product ul li h5::after{ content: attr(data-text); width: 100%; color: rgba(255, 255, 255, 1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }
#product ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#product ul li:hover::before{ opacity: 1; }
#product ul li:hover .default{ opacity: 0; }
#product ul li:hover .hover{ opacity: 1; }
#product ul li:hover h5 span{ opacity: 0; }
#product ul li:hover h5::after{ opacity: 1; }

@media screen and (max-height: 800px){
	#product{ padding: 100px 0; }
	#product .title{ padding-top: 0; }
}

@media screen and (max-width: 1720px){
	#product .title{ padding-top: 100px; }
	#product ul{ margin-top: 40px; }
	#product ul li{ height: 200px; }
}
@media screen and (max-width: 1600px){
	#product {
		background: #333333 url(/img/main/product_bg_1600.png) no-repeat bottom right -60px / auto;
		overflow: hidden;
	}
	
	#product .title p{ margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#product{ background-position: bottom 50px right -60px; } 
	#product{ padding-bottom: 100px; }
	#product .title p{ font-size: 1.6rem; }

	#product ul li{ width: calc(100% / 4); height: 180px; } 
	#product ul li h5{ font-size: 1.6rem; }
}

@media screen and (max-width: 1000px){
	#product .title p br{ display: none; }
}

@media screen and (max-width: 900px){
	#product ul li{ width: calc(100% / 3); height: 160px; } 
}

@media screen and (max-width: 600px){
	#product ul li{ width: calc(100% / 2); height: 150px; } 
}


/* center */ 
#center{ overflow: hidden; } 
#center .title{ display: flex; align-items: flex-end; }
#center .title h4{ color: #111; }
#center .title ul{ display: flex; margin-bottom: 10px; margin-left: 24px; }
#center .title ul li{ font-size: 2rem; font-weight: 700; color: #ccc; padding: 0 21px; position: relative; cursor: pointer; }
#center .title ul li::after{ content: ""; width: 2px; height: 15px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#center .title ul li:last-of-type::after{ display: none; }
#center .title ul li.active{ color: var(--mainColor); }
#center .tab-content .tab{ position: relative; padding-top: 60px; }
#center .tab-content .tab:not(:first-of-type){ display: none; }

#center .slide-info{ display: flex; justify-content: flex-end; align-items: center; pointer-events: none; position: absolute; top: 20px; right: 0; transform: translateY(-100%); }
#center .slide-info .progress{ width: 150px; height: 2px; background: #eee; }
#center .slide-info .progress .bar{ width: 0; height: 100%; background: #000; }
#center .slide-info ul{ display: flex; margin-left: 15px; pointer-events: auto; }
#center .slide-info ul li{ position: relative; }
#center .slide-info ul li::after{ content: ""; width: 1px; height: 10px; background: #ddd; position: absolute; top: calc(50% - 3px); right: 0; transform: translateY(-50%); }
#center .slide-info ul li:last-of-type::after{ display: none; }
#center .slide-info button{ border: none; background: none; padding: 15px; position: relative; }
#center .slide-info button img{ transition: all 0.3s; }
#center .slide-info button .hover{ position: absolute; top: calc(50% - 2px); left: 50%; transform: translate(-50%, -50%); opacity: 0; }
#center .slide-info button:hover .default{ opacity: 0; }
#center .slide-info button:hover .hover{ opacity: 1; }

#center .center-wrap{ width: calc(1500px + ((100vw - 1500px) / 2)); overflow: hidden; }
#center .center-wrap .slick-list{ margin-right: -30px; overflow: visible; }
#center .center{ max-width: 440px; width: 100%; margin-right: 30px; position: relative; }
#center .center figure{ width: 100%; height:340px; position: relative; overflow: hidden; padding-bottom: 73%; border-radius: 20px; transition: all 0.5s; }
#center .center figure img{ width: 100%; height:340px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#center .center .text-box{ overflow: hidden; }
#center .center h6{ width: 100%; font-size: 2.4rem; font-weight: 500; color: #333; padding: 30px 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#center .center ul{ display: flex; margin-left: -15px; }
#center .center ul li{ font-size: 1.5rem; font-weight: 500; padding: 0 15px; position: relative; }
#center .center ul li.category{ color: var(--mainColor); }
#center .center ul li.date{ color: #aaa; }
#center .center ul li::before{ content: ""; width: 1px; height: 15px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#center .center ul li:last-of-type::before{ display: none; }
#center .center a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#center .center:hover figure{ border-radius: 80px; }

#center .tab-content .tab3 .center{ cursor: pointer; }  
#center .tab-content .tab3 .center figure{ padding-bottom: 55%; }
#center .tab-content .tab3 a{ position: static; }

/* 홍보센터 - 홍보영상 (팝업) */
.popup-box{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 300; background: rgba(0, 0, 0, 0.95); display: flex; justify-content: center; align-items: center; display: none; }
.popup-box .close{ width: 30px; height: 30px; border: none; background: none; margin-bottom: 34px; }
.popup-box .video-box{ width: 1000px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.popup-box .iframe{ width: 100%; position: relative; overflow: hidden; padding-bottom: 56.25%; }
.popup-box .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

@media screen and (max-width: 1500px){
	#center .center h6{ font-size: 2.2rem; padding: 20px 0; }
}

@media screen and (max-width: 1200px){
	#center{ padding: 90px 0 100px; overflow: hidden; }
	#center .title ul{ margin-bottom: 5px; }
	#center .title ul li{ font-size: 1.8rem; }
	#center .slide-info{ transform: translateY(-62%); }

	#center .center h6{ font-size: 1.6rem; padding: 15px 0; }

	/* 홍보센터 - 홍보영상 (팝업) */
	.popup-box .video-box{ width: 85%; }
}

@media screen and (max-width: 900px){
	#center .title{ flex-direction: column; align-items: flex-start; }
	#center .title ul{ margin-left: -20px; margin-top: 15px; }
	#center .title ul li{ padding: 0 20px; }

	#center .slide-info{ margin-top: 10px; }
	#center .center {
		max-width: calc((70vw - 100px) - 100px);
	}
	#center .center figure {
	    height: 240px;
	}
	#center .center figure img {
		height: 240px;
	}
}

@media screen and (max-width: 600px){
	#center .center{ max-width: calc((100vw - 100px) - 100px); }
}

@media screen and (max-width: 567px){
	#center .title ul{ flex-wrap: wrap; gap: 15px 0; margin-left: -15px; }
	#center .title ul li{ padding: 0 15px; }
	#center .title ul li:nth-of-type(2n)::after{ display: none; }
}


/* banner */
#banner{ background: #f8f8f8; padding: 60px 0 55px; overflow: hidden; }
#banner .flex-box{ display: flex; justify-content: space-between; align-items: center; }  
#banner .text-box h5{ font-size: 3.2rem; font-weight: 600; color: #111; margin-bottom: 15px; }
#banner .text-box p{ font-size: 1.8rem; font-weight: 300; color: #555; line-height: 1.5777; }

#banner .support-list ul{ display: flex; text-align: center; } 
#banner .support-list ul li{ display: flex; flex-direction: column; align-items: center; padding: 0 35px; position: relative; }
#banner .support-list ul li span{ display: inline-block; font-size: 1.7rem; font-weight: 600; color: #333; margin-top: 30px; }
#banner .support-list ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

@media screen and (max-width: 1500px){
	#banner .text-box h5{ font-size: 3rem; }
}

@media screen and (max-width: 1200px){
	#banner .flex-box{ flex-direction: column; align-items: flex-start; }
	#banner .support-list{ width: 100%; margin-top: 40px; }
	#banner .support-list ul{ justify-content: space-evenly;}
}

@media screen and (max-width: 900px){
	#banner .support-list ul{ flex-wrap: wrap; justify-content: flex-start; margin-bottom: -40px; }
	#banner .support-list ul li{ width: calc(100% / 4); margin-bottom: 40px; }
}

@media screen and (max-width: 700px){
	#banner{ padding: 60px 0 65px; }
	#banner .support-list ul li{ width: calc(100% / 3); }
	#banner .support-list ul li span{ margin-top: 20px; }
}

@media screen and (max-width: 550px){
	#banner .support-list ul li{ padding: 0; }
	#center .center {
		max-width: calc((100vw - 100px) - 100px);
	}
	#center .center figure {
	    height: 180px;
		border-radius: 10px;
	}
	#center .center:hover figure{ 
		border-radius: 50px; 
	}
	#center .center figure img {
		height: 180px;
	}
}