@charset "utf-8";

@media (max-width: 1600px) {
	/* m-visual */
	.controls {left: 15px;}
}

@media (max-width: 1200px) {
	/* m-visual */
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 65px; line-height: 72px;}

}

@media (max-width: 1024px) {
	/* m-visual */
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 50px; line-height: 60px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 20px;}

	/* 공통 */
	.section-header h3 {font-size: 45px; padding-top: 30px; line-height: 52px;}
	.section-header p {padding-top: 25px;}

	/* sec2 */
	.sec2 .cnt .r-box > div {padding: 80px 20px 65px;}
	.sec2 .cnt .r-box > div::before {width: 80px; height: 80px; background-size: 80px auto; right: 20px;}
	.sec2 .cnt .r-box > div h5 {font-size: 30px;}
	.sec2 .cnt .l-box .consignment h5 {font-size: 30px;}

	/* sec3 */
	.sec3 {flex-wrap: wrap;}
	.sec3 .community {width: 100%; padding: 80px 0;}
	.sec3 .community .container {max-width: 700px !important;}
	.sec3 .right {width: 100%;}
	.sec3 .right .container {max-width: 700px !important;}
	.sec3 .right .container .item {padding: 50px 0;}


}

@media (max-width: 768px) {
	/* m-visual */
	.m-visual .visual {height: 100vh;}
	.m-visual .visual::after {display: none;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {font-size: 40px; line-height: 50px; top: 180px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 230px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p {font-size: 18px; line-height: 30px; top: 300px; width: 100%; padding-right: 15px;}
	.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 350px;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container p > br.mo {display: block;}
	.m-visual .visual .swiper-wrapper .swiper-slide .container a {top: 450px; font-size: 16px; max-width: 150px; line-height: 50px; padding: 0 15px; background-position: calc(100% - 15px) 50%;}

	.scroll-box {width: 60px; height: 180px;}
	.scroll-box > small {top: 20px;}
	.scroll-box > button {bottom: 20px;}

	/* 공통 */
	section {padding: 80px 0 100px;}
	.section-header h3 {font-size: 35px; padding-top: 20px; line-height: 42px;}
	.section-header span {font-size: 22px;}
	.sec3 .right .container .item .section-header span {font-size: 20px;}

	/* sec2 */
	.sec2 .cnt {flex-wrap: wrap;}
	.sec2 .cnt .r-box {max-width: 100%; margin-right: 0;}
	.sec2 .cnt .l-box {max-width: 100%; margin-top: 40px;}
	.sec2 .cnt .l-box .consignment {padding: 35px 20px 35px;}
	.sec2 .cnt .l-box .consignment p {padding-top: 25px;}
	.sec2 .cnt .l-box .consignment a {margin-top: 40px;}
	
	/* sec3 */
	.sec3 .community {padding: 50px 0;}
	.sec3 .right .container .item .cnt {margin-top: 25px;}
	.sec3 .right .container .item .cnt .txt h4 {font-size: 24px;}
	.sec3 .right .container .item .cnt .date {margin-top: 50px;}

	/* sec4 */
	.sec4 .cnt {margin-top: 40px; height: 250px;}
}

@media(max-width: 480px){
	/* m-visual */
	.m-visual .visual {height: 90vh;}

	/* 공통 */
	.section-header h3 {font-size: 24px; line-height: 35px;}
	.section-header h3 > .mo {display: block;}
	.section-header span {font-size: 18px;}

	/* sec2 */
	.sec2 .cnt .r-box > a {padding: 40px 20px 35px;}
	.sec2 .cnt .r-box > a::before {width: 70px; height: 70px; background-size: 70px auto; top: 20px; right: 20px;}
	.sec2 .cnt .r-box > a h5 {font-size: 24px;}
	.sec2 .cnt .r-box > a p {font-size: 16px;}
	.sec2 .cnt .l-box .consignment h5 {font-size: 24px;}
	.sec2 .cnt .l-box .consignment p {font-size: 16px;}
	.sec2 .cnt .l-box .consignment a {font-size: 14px; margin-top: 20px;}

	/* sec3 */
	.sec3 .right .container .item {padding: 30px 0;}
	.sec3 .right .container .item .section-header span {font-size: 18px;}
	.sec3 .right .container .item .cnt .txt h4 {font-size: 20px;}
	.sec3 .right .container .item .cnt .txt p {font-size: 16px; padding-top: 15px;}
	.sec3 .right .container .item .cnt .date span {font-size: 14px;}
	.sec3 .right .container .item .cnt .date a {font-size: 14px;}

	/* sec4 */
	.sec4 .cnt {height: 200px;}
	.sec4 .cnt .txt {max-width: 220px;}
	.sec4 .cnt .txt p {font-size: 22px;}
	.sec4 .cnt .txt i {width: 40px;}
	.sec4 .cnt .txt i::before {width: 60px; height: 60px;}

}

@media(max-width: 360px){
	/* m-visual */
	.m-visual .visual {height: 100vh;}
}