@charset "utf-8";


@media(max-width: 1600px){
	.m-visual .visual .container .main_txt {left: 50%; transform: translateX(-50%);}
}

@media(max-width: 1500px){
	.m-visual .visual .container .sub_txt {left: 15px;}
	.sec4 .logo > small {right: 20px;}	
}

@media(max-width: 1400px){
	.m-visual .visual .container .main_txt {transform: translateX(-50%) scale(0.7);}
	
	

}

@media(max-width: 1024px){
	.m-visual .visual .container .main_txt {transform: translateX(-50%) scale(0.5);}
	.m-visual .visual .container .sub_txt p {font-size: 25px;}
	.m-visual .visual .container .sub_txt span {font-size: 35px;}

	.sec4 .logo ul li img {max-width: 80%;}
	.sec4 .logo > small {font-size: 16px;}
	
}

@media(max-width: 768px){
	.m-visual .visual .container .main_txt {transform: translateX(-50%) scale(0.38);}
	.m-visual .visual .container .sub_txt {top: 540px;}
	.m-visual .visual .container .sub_txt p {font-size: 20px;}
	.m-visual .visual .container .sub_txt span {font-size: 30px;}
	
	.sec2 h3 {font-size: 50px; background-size: 350px auto;}
	.sec2 .w_selldy {padding-top: 150px;}
	.sec2 .w_selldy > ul {width: calc(100% + 20px); margin:0 -10px;}
	.sec2 .w_selldy > ul li {padding: 0 10px; max-width: 300px;}
	
	.section-header span {font-size: 24px; margin-bottom: 20px;}
	.section-header h3 {font-size: 40px;}
	.sec3 .tier {margin-top: 80px;}
	.sec3 .tier .inner > h4 {font-size: 80px;}
	.sec3 .tier .inner dl dt {font-size: 24px;}
	.sec3 .tier .inner dl dd {font-size: 16px;}
	.sec3 .tier .inner > p {font-size: 18px;}
	.sec3 .tier .inner .banner {margin-top: 30px; max-width: 400px;}
	.sec3 .tier .inner .banner.open ul {max-height: 350px;}
	.sec3 .tier02 .inner .banner ul {transition: all .6s ease-out;}
	.sec3 .tier02 .inner .banner.open ul {max-height: 600px;}
	.sec3 .tier03 .inner .banner ul {transition: all .8s ease-out;}
	.sec3 .tier03 .inner .banner.open ul {max-height: 920px;}
	.sec3 .tier04 .inner .banner.open ul {max-height: 500px;}
	.sec3 .tier .inner .banner ul li {width: 100%;}
	.sec3 .tier .inner .banner ul li ~ li {margin-top: 15px;}
	.sec3 .tier .inner .banner ul li p {padding-left: 80px; padding-right: 10px; background-position: 30px 50%; background-size: 30px auto;}
	
	.slick-slide.tier01 .inner .more {display: block;}
	
	.sec4 {padding: 80px 0 100px; background-position: 10% 50%;}
	.sec4 .logo-banner {margin-top: 60px;}
	.sec4 .logo ~ .logo {margin-top: 20px;}
	.sec4 .logo > small br.mo {display: block;}
	
	.simply-scroll {height: auto !important;}
	.simply-scroll .simply-scroll-list .thumb_slide {margin: 0 10px;}
	.simply-scroll .simply-scroll-list .thumb_slide img {width: 100% !important;}
	
	.sec5 {padding: 80px 0 100px;}
	
	
	.popup_wrap .popup {padding: 0 60px 0 15px; gap: 15px;}
	.popup_wrap .popup .btns .pop_close {width: 56px; height: 56px;}
	.popup_wrap .popup .btns > a {width: 56px; height: 56px;}
	.popup_wrap .popup .btns > a::after {left: 12px; background-size: 100px auto; width: 100px;}
	.popup_wrap .popup .btns > a:hover::after {left: 5px;}
}

@media(max-width: 480px){
	.m-visual .visual {height: 830px;}
	.m-visual .visual .container .main_txt {transform: translateX(-50%) scale(0.35); top: 205px;}
	.m-visual .visual .container .main_txt span {left: 70%;}
	.m-visual .visual .container p.f300 {padding-right: 0;}
	.m-visual .visual .container p.f300::after {font-size: 30px; width: 155%; line-height: 1.3; top: -65px;}
	.m-visual .visual .container .sub_txt {top: 440px; left: 50%; transform: translateX(-50%); width: max-content;}
	.m-visual .visual .container .sub_txt p {font-size: 20px;}
	.m-visual .visual .container .sub_txt span {font-size: 30px;}
	
	.sec2 {padding: 100px 0;}
	.sec2 h3 {font-size: 40px; background-size: 260px auto;}
	.sec2 .w_selldy {padding-top: 40px; overflow: auto; -webkit-overflow-scrolling: touch;}
	.sec2 .w_selldy::-webkit-scrollbar {height: 3px;}
	.sec2 .w_selldy::-webkit-scrollbar-thumb {background-color: #fff;}
	/* .sec2 .w_selldy > ul {flex-wrap: wrap;} */ 
	/* .sec2 .w_selldy > ul li {max-width: 250px;} */
	.sec2 .w_selldy > ul {padding-bottom: 5px; width: calc(100% + 10px); margin: 0 -5px;}
	.sec2 .w_selldy > ul li {max-width: 100%; width: 50%; transform: none !important; padding: 0 5px;}
	
	.section-header span {font-size: 20px; margin-bottom: 10px;}
	.section-header h3 {font-size: 30px;}
	.sec3 {height: auto; padding: 80px 0;}
	.sec3 .tier {margin-top: 40px; overflow: hidden; margin-bottom: 20px;}
	.sec3 .tier .inner > h4 {font-size: 50px;}
	.sec3 .tier .inner dl {margin-top: 20px;}
	.sec3 .tier .inner dl dt {font-size: 20px;}
	.sec3 .tier .inner .banner {margin-top: 20px;}
	.sec3 .tier .inner .banner ul {width: calc(100% + 10px); margin: 0 -5px;}
	.sec3 .tier .inner .banner ul li {padding: 0 5px;}
	/* .sec3 .tier .inner .banner ul li p {padding-left: 55px; padding-right: 0; background-size: 34px auto; background-position: 10px 50%;} */
	.sec3 .note {display: block;}
	
	.sec3 .tier .inner dl dt {padding-left: 35px;}
	.sec3 .tier .inner dl dt::before {width: 30px; height: 29px; background-size: 30px auto;}
	
	.sec4 .logo-banner {margin-top: 40px;}
	.sec4 .logo {height: 70px;}
	.sec4 .logo > small {font-size: 12px; right: 15px}
	
	.sec5 .inner {height: 267px;}
	.thumb_wrap .thumb_slide {margin: 0 10px;}
	

	.popup_wrap .popup {flex-wrap: wrap; padding: 0 15px; max-height: calc(100dvh - 80px);}
	.popup_wrap .popup .btns {display: flex; gap: 20px; margin: 0 auto;}
	.popup_wrap .popup .btns > a {margin-top: 0;}
	
}