@charset "utf-8";

@media (max-width: 1700px) {
	.main-visual .paging {left: 20px;}
	.main-visual .scroll-down {right: 30px;}
	/* section02 */
	.section02 .img-box .img01 {top: 50px; right: 200px;}
	.section02 .img-box .img02 {top: 175px; left: -140px; width: 35vw;}
	.section02 .img-box .img03 {bottom: 0; right: 0; width: 23vw;}
	.section02 .img-box .img04 {bottom: 0; left: 250px;}
	/* footer */
	.scrolltop {width:72px; height:72px;}
	html.scroll-fade .scrolltop {right: 30px;}
}

@media (max-width: 1400px) {
	/* header */
	#gnb>ul>li {padding:0 45px;}
	/* section01 */
	.section01 {height: 800px;} 
	/* section02 */
	.section02 {height: 800px;}
	.section02 .img-box .img01 {top: 50px; right: 120px; width: 20vw;}
	.section02 .img-box .img02 {top: 175px; left: -140px; width: 35vw;}
	.section02 .img-box .img03 {bottom: 0; right: 0; width: 23vw;}
	.section02 .img-box .img04 {bottom: 0; left: 250px; width: 20vw;}
	/* section03 */
	.section03 {height: 800px;}
	.section03 .box a {width: 300px; height: 300px;}
	/* section04 */
	.section04 .cont {padding: 0px 60px;}
}

@media (max-width: 1200px) {
	/* header */
	#gnb>ul>li {padding:0 35px;}
	.btn-shop {right: 100px;}
	/* section01 */
	.section01 {height: 700px;} 
	/* section02 */
	.section02 {height: 750px;}
	.section02 .img-box .img01 {top: 50px; right: 80px; width: 20vw;}
	.section02 .img-box .img02 {top: 175px; left: -140px; width: 35vw;}
	.section02 .img-box .img03 {bottom: 0; right: 0; width: 23vw;}
	.section02 .img-box .img04 {bottom: 0; left: 160px; width: 20vw;}
	/* section03 */
	.section03 {height: 750px;}
	.section03 .box {padding: 0 15px;}
	.section03 .box a {width: 300px; height: 300px;}
}

@media (max-width: 1024px) {
	/* header */
	#header {height:80px;}
	#header.hide {transform:translateY(0);}
	#gnb {display:none;}
	.btn-shop {top: 18px; right: 100px;}
	.btn-shop a {width: 100px; height: 40px; font-size: 15px; line-height: 38px; padding-left: 28px;}
	.btn-shop a:before {left: 18px;}
	/* main */
	.main-visual .item .text-box h2 {font-size: 60px;}
	.main-visual .paging {bottom: 60px; left: 20px;}
	.main-visual .slick-dots li {width: 80px; font-size: 15px; padding-bottom: 10px;}
	.main-visual .scroll-down {bottom: 60px; right: 30px;}
	/* section01 */
	.section01 {height: 600px;}
	.section01 .text-box {padding-bottom: 150px; }
	.section01 .box a:hover .text-box {padding-bottom: 100px;}
	.section01 .text-box p {font-size: 34px;}
	.btn-more {width: 180px; height: 65px; font-size: 18px; line-height: 63px; padding: 0 30px;}
	.btn-more:after {right: 30px;}
	.section01 .btn-more {margin: 40px auto 0;}
	/* section02 */
	.section02 {height: 600px;}
	.section02 .text-box h3 {font-size: 50px; margin-bottom: 30px;}
	.section02 .text-box p {font-size: 20px; margin-bottom: 55px;}
	.section02 .img-box .img01 {top: 30px; right: 40px; width: 20vw;}
	.section02 .img-box .img02 {top: 150px; left: -140px; width: 35vw;}
	.section02 .img-box .img03 {bottom: 0; right: 0; width: 23vw;}
	.section02 .img-box .img04 {bottom: 0; left: 100px; width: 20vw;}
	/* section03 */
	.section03 {height: 650px;}
	.section03 h3 {font-size: 38px; margin-bottom: 50px;}
	.section03 .box {padding: 0 10px;}
	.section03 .box a {width: 230px; height: 230px;}
	.section03 .box .text-box {transform: translateY(40px);}
	.section03 .box .icon {width: 60px; height: 60px; background-size: 60px auto; margin: 0 auto 12px; opacity: 0.7;}
	.section03 .box h4 {font-size: 24px; opacity: 0.7;}
	.section03 .box .arrow {opacity: 0; width: 46px; height: 46px; margin: 18px auto 0;}
	/* section04 */
	.section04 {padding: 80px 0 90px;}
	.section04 .cont {height: 450px; padding: 0 40px;}
	.section04 .cont .flex {display: block;}
	.section04 .cont .text-box h3 {padding-right: 24px; font-size: 50px; margin-bottom: 15px;}
	.section04 .cont .text-box h3:after {bottom: 8px;}
	.section04 .cont .text-box p {font-size: 20px;}
	.section04 .cont .btn-more {margin: 30px 0 0 auto;}
	/* footer */
	#footer {padding:60px 0 50px;}
	.footer-top {padding-bottom: 30px; margin-bottom: 25px;}
	.footer-top ul {display: flex;}
	.footer-top ul li a {width: 170px; height: 38px; font-size: 15px; line-height: 38px; padding: 0 20px;}
	.footer-bottom {font-size: 15px;}
	.footer-bottom .info {margin-bottom: 25px;}
	.footer-bottom ul {flex-wrap: wrap;}
	.footer-bottom ul li:after {margin-top: -6px; height: 12px;}
	.scrolltop {width:60px; height:60px;}
	html.scroll-fade .scrolltop {right: 15px;}
}

@media (max-width: 768px) {
	/* header */
	#header {height:60px;}
	#header .sitelogo a {background-size: 100px auto; background-position: left center;}
	.btn-shop {top: 10px;}
	/* main */
	.main-visual .item .text-box h2 {font-size: 45px;}
	.main-visual .slick-dots li {width: 70px;}
	/* section01 */
	.section01 {height: auto;}
	.section01 .wrap {display: block; height: 100%;}
	.section01 .box {width: 100%; height: 250px; flex: unset;}
	.section01 .box:after {top: auto; bottom: 0; right: auto; left: 0; width: 100%; height: 1px;}
	.section01 .box:last-child:after {display: none;}
	.section01 .img-box {width: 100%;}
	.section01 .box a:hover .img-box img {transform: scale(1.1);}
	.section01 .text-box {transform: translateY(0); padding-bottom: 60px;}
	.section01 .box a:hover .text-box {padding-bottom: 60px;}
	.section01 .text-box p {font-size: 28px;}
	.btn-more {width: 160px; height: 55px; font-size: 16px; line-height: 53px; padding: 0 25px;}
	.btn-more:after {right: 25px;}
	.section01 .btn-more {opacity: 1; margin: 20px auto 0;}
	/* section02 */
	.section02 {height: 500px;}
	.section02 .text-box h3 {font-size: 30px; margin-bottom: 20px;}
	.section02 .text-box p {font-size: 16px; margin-bottom: 40px;}
	.section02 .img-box .img01 {top: 30px; right: 40px; width: 21vw;}
	.section02 .img-box .img02 {top: 100px; left: -140px; width: 38vw;}
	.section02 .img-box .img03 {bottom: 0; right: 0; width: 26vw;}
	.section02 .img-box .img04 {bottom: 0; left: 100px; width: 23vw;}
	/* section03 */
	.section03 {height: auto; padding: 100px 0 60px;}
	.section03 h3 {font-size: 30px; margin-bottom: 40px;}
	.section03 .wrap {flex-wrap: wrap;}
	.section03 .box {padding: 10px;}
	.section03 .box a {width: 210px; height: 210px;}
	.section03 .box .text-box {transform: translateY(0);}
	.section03 .box .icon {width: 54px; height: 54px; background-size: 54px auto; margin: 0 auto 12px; opacity: 1;}
	.section03 .box h4 {font-size: 20px; opacity: 1;}
	.section03 .box .arrow {opacity: 1; width: 42px; height: 42px; margin: 18px auto 0; border: 1px solid #fff; background: url('../img/main/icon_arrow_white.png') no-repeat center center rgba(255,255,255,0.1);}
	.section03 .box a:hover .arrow {background: url('../img/main/section03_icon_arrow.png') no-repeat center center #fff; transition-delay: 0s;} 
	/* section04 */
	.section04 {padding: 70px 0 80px;}
	.section04 .cont {height: 360px; padding: 0 30px;}
	.section04 .cont .text-box h3 {padding-right: 16px; font-size: 38px; margin-bottom: 15px;}
	.section04 .cont .text-box h3:after {bottom: 5px; width: 8px; height: 8px;}
	.section04 .cont .text-box p {font-size: 18px;}
	.section04 .cont .btn-more {margin: 25px 0 0 auto;}
	/* footer */
	#footer {padding:50px 0 40px;}
	.footer-top {display: block; padding-bottom: 25px; margin-bottom: 20px;}
	.footer-top .logo {text-align: center; margin-bottom: 25px;}
	.footer-top .logo img {width: 130px;}
	.footer-top ul {justify-content: center;}
	.footer-top ul li a {width: 150px; height: 36px; font-size: 14px; line-height: 36px; padding: 0 20px;}
	.footer-bottom {font-size: 14px; text-align: center;}
	.footer-bottom .info {margin-bottom: 15px;}
	.footer-bottom ul {flex-wrap: wrap; justify-content: center;}
	.footer-bottom ul li:after {margin-top: -6px; height: 12px;}
	.scrolltop {width:60px; height:60px;}
	html.scroll-fade .scrolltop {right: 15px;}
}

@media (max-width: 480px) {
	/* main */
	.main-visual .item .text-box h2 {font-size: 34px;}
	/* section02 */
	.section02 .img-box .img01 {top: 30px; right: 40px; width: 22vw;}
	.section02 .img-box .img02 {top: 70px; left: -60px; width: 38vw;}
	.section02 .img-box .img03 {bottom: 0; right: 0; width: 28vw;}
	.section02 .img-box .img04 {bottom: 0; left: 60px; width: 23vw;}
	/* section04 */
	.section04 .cont {padding: 0 15px;}
}