@charset "utf-8";

@media (max-width: 1600px) {
	
}

@media (max-width: 1400px) {
	.s1_1 article .txt p br {display: none;}
}

@media (max-width: 1200px){
	.s1_2 .arti01 ul li dl dd {font-size: 20px;}
	.s1_2 .arti04 ul li dl dt {font-size: 20px; max-width: 200px;}
	.s1_2 .arti04 ul li dl dd p {font-size: 20px;}
	
	.s1_5 .ci figure img {width: 80%;}
	.s1_5 .color {gap: 50px;}
	.s1_5 .color .palette .code dl dd {padding: 10px 0 0; gap: 5px;}
	.s1_5 .color .palette .code dl dd p {font-size: 20px;}
}

@media (max-width: 1024px) {
	.s1_1 article .txt h4 {font-size: 30px;}
	.s1_1 article .txt p {font-size: 20px;}
	.s1_1 article .txt p > strong {font-size: 22px;}
	.s1_1 article .figure-box {max-width: 350px;}
	.s1_1 article .txt dl dd {font-size: 24px;}
	
	.s1_2 .arti01 ul {gap: 16px;}
	.s1_2 .arti01 ul li {flex: 0 0 calc(50% - 8px);}
	.s1_2 .arti01 ul li dl {padding: 40px 20px;}
	.s1_2 .arti01 ul li dl dd {font-size: 18px;}
	.s1_2 .arti01 ul li dl dd br.mo {display: block;}
	
	.s1_2 .cnt .txt p {font-size: 20px;}
	
	.s1_2 .arti04 ul {gap: 10px;}
	.s1_2 .arti04 ul li dl dt {font-size: 18px; padding: 12px 5px; max-width: 170px;}
	.s1_2 .arti04 ul li dl dd {padding: 0 15px;}
	.s1_2 .arti04 ul li dl dd p {font-size: 18px;}
	
	.s1_4 article ul li {flex: 0 0 calc(33.333% - 14px);}
	
	.s1_5 .color {flex-wrap: wrap;}
	.s1_5 .color .palette {width: 100%;}
	.s1_5 .bg h4 {font-size: 45px;}
	
	.s1_6 .map-info .info dl dt {font-size: 20px;}
	.s1_6 .map-info .info dl dd {font-size: 20px;}
	
	.s2 .feature .txt p {font-size: 20px;}
	.s2 .others ul {flex-wrap: wrap;}
	.s2 .others ul li {flex: 0 0 calc(33.333% - 14px);}
	.s2 .others ul li a h5 {font-size: 24px;}
	
	#bo_cate ul li a {font-size: 18px;}
}

@media (max-width: 800px){
	.s1_2 .arti04 ul li dl dt {font-size: 16px;}
	.s1_2 .arti04 ul li dl dt > i {font-size: 14px;}
	.s1_2 .arti04 ul li dl dd p {font-size: 16px;}
	
	.s1_5 .color .palette .code span {width: 70px; height: 70px;}
	
}

@media (max-width: 768px) {
	.page-header .container h2 {font-size: 55px;}

	.lnb {border-bottom: 0; z-index: 5;}
	.lnb .container {padding: 0;}
	.lnb .btn-drop {display: block; width: 100%; height: 60px; padding: 0 15px; background-color: #fec302; color: #fff; font-size: 18px; position: relative; text-align: left; font-weight: 600;}
	.lnb .btn-drop::after {position: absolute; content:''; width: 9px; height: 5px; top: 50%; right: 15px; transform: translateY(-50%); background:url(../images/sub/btn-drop.png) 50% 50% no-repeat; background-size: auto; transition: all  .2s linear;}
	.lnb ul {position: absolute; top: 100%; left: 0; width: 100%; display: block; background-color: #fff; box-shadow: 0px 5px 10px rgba(0,0,0,0.05); display: none;}
	.lnb ul li {width: 100%;}
	.lnb ul li::after {display: none;}
	.lnb ul li ~ li {border-top: 1px solid #ddd; }
	.lnb ul li a {font-size: 18px; line-height: 49px; padding: 0 15px; text-align: left;}
	.lnb ul li a::after {display: none;}
	.lnb ul li.active a {color: #fec302; font-weight: 500;}
	.lnb.on .btn-drop::after {transform: translateY(-50%) rotate(180deg);}
	.lnb.on ul {display: block;}


	.real-cont {padding: 100px 0 120px;}
	section {padding: 100px 0 120px;}
	.section-header h3 {font-size: 35px;}
	.section-header p {font-size: 20px;}
	
	.article-header h5 {font-size: 30px;}

	.s1_1 article {padding-bottom: 120px;}
	.s1_1 article .greeting {flex-wrap: wrap; position: relative;}
	.s1_1 article .figure-box {display: none;}
	.s1_1 article .txt {width: 100%;}
	.s1_1 article .txt h4 {font-size: 24px;}
	.s1_1 article .txt p {margin-top: 60px; font-size: 18px;}
	.s1_1 article .txt p > strong {font-size: 20px;}
	.s1_1 article .txt dl dt {font-size: 18px;}
	.s1_1 article .txt dl dd {font-size: 20px;}
	
	.s1_2 article {margin-top: 60px;}
	.s1_2 .arti01 ul li dl {padding: 20px;}
	.s1_2 .arti01 ul li dl dt {font-size: 18px;}
	.s1_2 .arti01 ul li dl dd {font-size: 16px;}
	
	.s1_2 .cnt .txt p {font-size: 18px;}
	.s1_2 .cnt .txt p::before {top: 12px;}
	
	.s1_2 .arti04 ul li {flex: 100%;}
	
	.s1_4 article {margin-top: 60px;}
	.s1_4 article ul {gap: 10px;}
	.s1_4 article ul li {flex: 0 0 calc(33.3333% - 7px);}
	
	.s1_5 .ci {margin-top: 60px; flex-wrap: wrap;}
	.s1_5 .ci figure {height: 180px; flex: 100%;}
	.s1_5 .color .palette .code {flex-wrap: wrap;}
	.s1_5 .color .palette .code span {margin-right: 0;}
	.s1_5 .color .palette .code dl dt {font-size: 18px; padding: 0 0 10px;}
	.s1_5 .color .palette .code dl dd {flex-wrap: wrap;}
	.s1_5 .color .palette .code dl dd p {font-size: 18px; width: auto;}
	.s1_5 .bg {height: 300px;}
	.s1_5 .bg h4 {font-size: 35px;}
	.s1_5 .bg h4 > span {font-size: 26px;}
	
	.s1_6 h5 {margin-top: 60px; font-size: 26px;}
	.s1_6 .map-info {flex-wrap: wrap; padding: 0;}
	.s1_6 .map-info .info {width: 100%;}
	.s1_6 .map-info .btn-area {margin-left: auto; justify-content: right;}
	.s1_6 .map-info .btn-area a {width: 70px; height: 70px;}
	.s1_6 .map-info .info dl dt {font-size: 18px;}
	.s1_6 .map-info .info dl dd {font-size: 18px;}
	
	.s2 .box h4 {font-size: 26px;}
	.s2 .feature .txt p {font-size: 18px;}
	.s2 .keyword ul li {font-size: 18px; padding: 0 15px; line-height: 52px;}
	
	.s2 .others {margin-top: 100px; padding-top: 100px; padding-bottom: 120px;}
	.s2 .others ul li {flex: 0 0 calc(50% - 10px); height: 300px;}
	.s2 .others ul li a h5 {font-size: 20px;}
	.s2 .flow-wrap h3 {font-size: 100px;}
	
	.inquiry-required p {font-size: 16px;}
	
	
	#bo_cate ul {flex-wrap: wrap; gap: 10px 0;}
	#bo_cate ul li {padding: 0 10px;}
	#bo_cate ul li a {font-size: 16px;}
}

@media (max-width: 480px) {
	.page-header {height: 450px;}
	.page-header.type3, .page-header.type4 {height: 400px;}
	.page-header .container h2 {font-size: 40px;}
	
	.lnb .btn-drop {height: 50px;}
	
	.section-header h3 {font-size: 28px;}
	.section-header p {font-size: 18px;}
	
	.article-header h5 {font-size: 24px;}
	
	.s1_1 article::before {height: 800px;}
	.s1_1 article .txt h4 {font-size: 22px;}
	.s1_1 article .txt p {font-size: 16px; margin-top: 30px;}
	.s1_1 article .txt p ~ p {margin-top: 20px;}
	.s1_1 article .txt p > strong {font-size: 18px;}
	.s1_1 article .txt dl {margin-top: 50px;}
	
	.s1_2 .arti01 ul li {flex: 100%;}
	.s1_2 .arti01 ul li dl dd {min-height: auto;}
	.s1_2 .cnt .txt p {font-size: 16px;}
	
	.s1_2 .arti04 ul li dl dt {max-width: 120px; flex-direction: column;}
	
	.s1_4 article ul li {flex: 0 0 calc(50% - 5px);}
	.s1_5 .color .palette .code dl {width: 100%;}
	.s1_5 .color .palette .code dl dd {justify-content: left; gap: 15px;}
	.s1_5 .color .palette .code dl dd p {flex: none;}
	
	.s1_5 .ci figure {height: 120px;}
	.s1_5 .bg h4 {font-size: 30px;}
	
	.s1_6 h5 {font-size: 22px;}
	.s1_6 .map {height: 300px;}
	.s1_6 .map-info .info dl dt, .s1_6 .map-info .info dl dd {font-size: 16px;}
	.s1_6 .map-info .btn-area a {width: 60px; height: 60px;}
	
	.s2 .feature .txt p {font-size: 16px; padding-left: 15px;}
	.s2 .feature .txt p::before {top: 10px;}
	.s2 .keyword ul li {font-size: 16px; line-height: 46px;}
	.s2 .others ul li {/* flex: 100%; */ height: 200px;}
	.s2 .others ul li a {padding: 40px 20px;}
	
	
	.gallery-list ul li a .thumb {border-radius: 10px;}
}