@charset "utf-8";

@media (max-width: 1600px) {
	.btn-scroll-top {right: 15px;}
}

@media (max-width: 1200px) {
	/* header */
	#header .logo img {width: 340px;}
	#gnb {margin-left: 300px;}

	.quick-top-item {flex: 1; padding: 60px 40px;}
	.quick-bottom-item-inner {padding: 32px 40px;} 

	/* footer */
	#footer .company-info-wrap {flex-direction: column; align-items: flex-start;}
	#footer .company-info {width: 100%; flex: auto;}
}

@media (max-width: 1024px) {
	/* header */
	#header {height:100px;}
	#header .logo img {width: 280px;}

	#gnb {display:none;}

	.main-visual {margin-top: 100px;}
	.main-visual .item {height: 600px;}
	.main-visual .text-box {top: 50%; transform: translate(-50%,-50%);}
	.main-visual .text-box h2 {font-size: 44px; margin-bottom: 20px;}
	.main-visual .text-box p {font-size: 16px;}
	.main-visual .controler {bottom: 40px;}

	.main-quick {margin-top: 80px; padding-bottom: 80px;}
	.main-quick-top {margin-bottom: 30px;}
	.quick-top-item {padding: 40px 30px;}
	.quick-top-item .content h3 {font-size: 26px;}
	.quick-top-item .content p {font-size: 16px;}
	.quick-top-item .content a {font-size: 16px; padding: 10px 30px;} 
	.quick-top-item .icon {max-width: 100px;}

	.main-quick-bottom {gap: 30px;}
	.quick-bottom-item-inner {padding: 32px 30px;} 
	.quick-bottom-item .content .title {margin-bottom: 15px;}
	.quick-bottom-item .content .title h3 {font-size: 22px;}
	.quick-bottom-item:nth-child(2) .content .title h3 {font-size: 26px;}
	.quick-bottom-item .content .title.flex p {font-size: 16px;}
	.quick-bottom-item .content .tel {font-size: 30px;} 
	.quick-bottom-item .icon {max-width: 100px;}

	.main-board {padding: 80px 0;}
	.main-board-items {flex-direction: column; gap: 50px;}
	.main-board-item {width: 100%;}
	.main-notice-title {margin-bottom: 12px;}
	.main-notice-title h3 {font-size: 22px;}
	.main-notice-title a .text {font-size: 15px;}
	.main-notice-cont a {gap: 20px; padding: 18px 10px;}
	.main-notice-cont .title {font-size: 16px;}
	.main-notice-cont .date {font-size: 15px;}

	.main-gallery-items {margin: 0 -10px;}
	.main-gallery-item {padding: 0 10px;}
	.main-gallery-item .thumb {margin-bottom: 20px;}
	.main-gallery-item .title h4 {font-size: 18px;}

	/* footer */
	#footer {padding: 50px 0;}
	#footer .container {gap: 60px;}
	#footer .logo {max-width: 210px;}
	#footer .company-info-wrap {gap: 10px 20px;}
	#footer .company-info {font-size: 16px;}
	#footer .company-info .contact {margin-bottom: 15px;}
	#footer .contact {gap: 20px;}
	#footer .company-terms {gap: 0 20px;}
	#footer .company-terms a {font-size: 16px;}

	.btn-scroll-top {bottom: 60px; width: 60px; height: 60px;}
}

@media (max-width: 768px) {
	/* header */
	#header {height:80px;}
	#header .logo img {width: 240px;}

	.main-visual {margin-top: 80px;}
	.main-visual .item {height: 500px;}
	.main-visual .item:nth-child(1) .img-box {background-image: url('../img/main/main-visual01-mo.jpg');}
	.main-visual .item:nth-child(2) .img-box {background-image: url('../img/main/main-visual02-mo.jpg');}
	.main-visual .item:nth-child(3) .img-box {background-image: url('../img/main/main-visual03-mo.jpg');}
	.main-visual .text-box h2 {font-size: 32px;}
	.main-visual .text-box p {font-size: 16px;}

	.main-quick {margin-top: 60px; padding-bottom: 60px;}
	.main-quick-top {flex-direction: column; margin-bottom: 20px;}
	.main-quick-top:after {display: none;}
	.quick-top-item {padding: 0 20px;}
	.quick-top-item:first-child .quick-top-item-inner {border-bottom: 1px solid rgba(1, 1, 1, 0.10);}
	.quick-top-item-inner {padding: 30px 0; gap: 10px;}
	.quick-top-item .content h3 {font-size: 22px;}
	.quick-top-item .icon {max-width: 70px;}

	.main-quick-bottom {flex-direction: column; gap: 20px;}
	.quick-bottom-item-inner {padding: 30px 20px;} 
	.quick-bottom-item .content .title h3 {font-size: 22px;}
	.quick-bottom-item .content .tel {font-size: 28px;} 
	.quick-bottom-item .icon {max-width: 70px;}

	.main-board {padding: 60px 0 70px;}
	.main-notice-cont a {gap: 5px;}

	/* footer */
	#footer {padding: 40px 0; text-align: center;}
	#footer .container {flex-direction: column; gap: 30px;}
	#footer .logo {margin: 0 auto;}
	#footer .company-info-wrap {width: 100%; flex: auto;}
	#footer .company-info {font-size: 15px;}
	#footer .contact {justify-content: center;}
	#footer .company-terms {margin: 0 auto;}
	#footer .company-terms a {font-size: 15px;}

	.btn-scroll-top {width: 50px; height: 50px;}
}