@charset "utf-8";

@media (max-width: 1400px) {
/* main */	
	#mcnt1 .wrap1 .main-visual .item .tbx{padding: 30px;}
	#mcnt1 .wrap1 .main-visual .item .tbx h3{font-size: 28px; line-height: 1.5; word-break: keep-all; }
	#mcnt1 .wrap1 .main-visual .item .tbx strong{font-size: 20px; line-height: 1.5; margin-top: 15px; word-break: keep-all;}
	#mcnt1 .wrap1 .main-visual .item .tbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	#mcnt1 .wrap1 .main-visual .item .tbx br{display: none;}
	#mcnt1 .wrap1 .main-visual .owl-dots{right: 20px; bottom: 20px;}
	#mcnt2 .rbx .table-wrap table tr th{font-size: 16px; padding: 0 20px;}
	#mcnt5 ul > li a .tbx h3{font-size: 22px; line-height: 1.5;}
	#mcnt5 ul > li a .tbx p{font-size: 16px; line-height: 1.5;}	
}

@media (max-width: 1200px) {
	#header #gnb{margin-right: 20px;}
	#header #gnb > ul{gap:4vw}
	#header #gnb > ul > li > a{font-size: 16px;}

}

@media (max-width: 1024px) {
	
	.pc-mode{display: none !important;	}
	.mob-mode{display: block !important;}
	
	#gnb {display:none;}
/* main */
	#mcnt1{padding: 50px 0;}
	#mcnt1 .wrap1{flex-wrap:wrap; flex-direction: column;}
	#mcnt1 .wrap1 .main-visual{max-width:100%; width: 100%;}
	#mcnt1 .wrap1 .main-visual .item .tbx{padding: 50px 30px;}
	#mcnt1 .wrap1 > *{width: 100%;}
	#mcnt1 .wrap1 .cacao-bn > a{padding: 40px 30px;}
	#mcnt1 .wrap1 .cacao-bn > a .cacao-top{gap:10px;}
	#mcnt1 .wrap1 .cacao-bn > a .cacao-top p{font-size: 20px;}
	#mcnt1 .wrap1 .cacao-bn > a .cacao-bottom p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	#mcnt1 .wrap1 .cacao-bn > a .cacao-bottom p br{display: none;}
	#mcnt1 .wrap1 .mcnt1-col3{flex-direction: row; gap:15px}
	#mcnt1 .wrap1 .mcnt1-col3 > a{flex:1; height: auto;}
	#mcnt1 .wrap1 .mcnt1-col3 > a p{font-size: 18px; line-height: 1.5; word-break: keep-all;}
	#mcnt1 .wrap1 .mcnt1-col3 > a p br{display: none;}
	#mcnt-wrap{padding: 50px 0px;}
	#mcnt2{flex-direction: column; gap:40px;}
	#mcnt2 .lbx ul{flex-direction: row;}
	#mcnt2 .lbx h4{font-size: 22px; line-height: 1.5;}
	#mcnt2 .lbx ul > li{gap:25px; height: 50px; padding: 10px 10px;}
	#mcnt2 .lbx ul > li p{font-size: 16px;}
	#mcnt2 .lbx ul > li span{line-height: 1.1; font-size: 16px;}
	#mcnt2 .lbx ul > li span b{font-size: 22px; line-height: 1.1;}
	#mcnt3 h4{font-size: 22px; line-height: 1.5;}
	#mcnt3 .item > a:after{display: none;}
	#mcnt3 .item > a .tbx{gap:15px;}
	#mcnt3 .item > a .tbx h3{font-size: 24px; line-height: 1.5; word-break: keep-all;} 
	#mcnt3 .item > a .tbx p{font-size: 14px; line-height: 1.5; word-break: keep-all; }
	#mcnt3 .event-slide .num-box{top: -30px; right: 0;}
	#mcnt3 .item > a .tbx br{display: none;}
	#mcnt3 .item .text-box{gap:10px; margin-top: 20px;}
	#mcnt3 .item .text-box h3{font-size: 20px; line-height: 1.5; word-break: keep-all;}
	#mcnt3 .item .text-box p{font-size: 16px; line-height: 1.5;}
	#mcnt3 .item .text-box br{display: none;}	
	#mcnt4{padding: 50px 0; }
	#mcnt4 .tit h4{font-size: 22px; line-height: 1.5;}
	#mcnt4 .main-review-wrap{width: 100%; overflow-y: auto; padding-bottom: 20px;}
	#mcnt4 .main-review-wrap::-webkit-scrollbar {width: 5px; height: 5px;}
	#mcnt4 .main-review-wrap::-webkit-scrollbar-track {background-color: gray;}
	#mcnt4 .main-review-wrap::-webkit-scrollbar-thumb { background-color: skyblue;}
	#mcnt4 .main-review-wrap::-webkit-scrollbar-button {display: none;}
	#mcnt4 .main-review{width: max-content; overflow: hidden;}
	#mcnt4 .main-review > li{width: 40vw; }
	#mcnt4 .main-review > li a .overview strong{font-size: 18px; line-height: 1.5;}
	#mcnt4 .main-review > li a .tbx strong{font-size: 18px; line-height: 1.5;}
	#mcnt4 .main-review > li a .tbx p{font-size: 16px; line-height: 1.5;}
	#mcnt5 ul{flex-wrap:wrap; }
	#mcnt5 ul > li{flex:50%;}
	#mcnt5 ul > li figure img{width: 100%; height: 100%; object-fit:cover;}
	#mcnt5 .main-sns p{font-size: 22px; line-height: 1.5;}

	.footer-wrap{padding: 40px 0;}
	#footer{flex-direction: column-reverse; gap:20px}
	#footer .rbx{width: 100%;}
	#footer .lbx ul > li > a{font-size: 16px;}
	#footer .lbx ul > li:not(:last-child):after{margin: 0 10px;}
	#footer .lbx ol > li{font-size: 16px; gap:0 10px}
	
	
}

@media (max-width: 640px) {
/* main */
	#mcnt1 .wrap1 .main-visual .item .tbx{padding: 50px 30px;}
	#mcnt1 .wrap1 .main-visual .item .tbx h3{font-size: 24px;}
	#mcnt1 .wrap1 .mcnt1-col3{flex-direction: column;}
	#mcnt2 .rbx{width: 100%;}
	#mcnt2 .rbx .more{right: -4px;}
	#mcnt2 .rbx .table-wrap{width: 100%; overflow-x: auto;}
	#mcnt2 .rbx .table-wrap table{width: 650px; overflow-x: auto;}
	#mcnt4 .main-review > li{width: 60vw; }
	#mcnt4 .main-review > li a figure img{width: 100%; height: 100%; object-fit:cover;}
	#mcnt5 ul > li{flex:100%;}
	
	#mcnt5 ul > li{
	 a .tbx{background: rgba(38, 171, 241, 0.80);   scale:1;}
	 a .tbx h3{ text-shadow: none; translate:0 0px;}
	 a .tbx p{opacity: 1;}
	}
	
	#mcnt5 .main-sns{height: auto; padding: 20px; flex-direction: column; gap:20px;} 
	#mcnt5 .main-sns ol{gap:15px;}
	#mcnt5 .main-sns ol > li > a img{ max-width:40px;}
	
}

@media (max-width: 480px) {
/* main */
	#mcnt1 .wrap1 .main-visual .item{height: 100vw; }
	#mcnt1 .wrap1 .main-visual .item figure{height: 100%;}
	#mcnt1 .wrap1 .main-visual .item figure img{width: 100%; height: 100%; object-fit:cover;}
	#mcnt1 .wrap1 .main-visual .item .tbx p.mt32{margin-top: 15px;}
	#footer .lbx ol > li{word-break: keep-all;}
	#footer .lbx ol > li br{display: none;}
/* footer */
	#footer .rbx img{width: 150px;}
	#footer .lbx ul{margin-bottom: 10px;}
	#footer .lbx ol > li.copy{margin-top: 3px;}
}