@charset "utf-8";

@media (max-width: 1830px) {
	.quick {right:50px;}
	.scrolltop {right:50px;}
}

@media (max-width: 1430px) {
	#gnb>ul>li>a {font-size:18px; padding:0 30px;}
	
	.foot-logo {max-width:240px;}
}

@media (max-width: 1230px) {
	#gnb>ul>li>a {font-size:18px; padding:0 15px;}
	.sitemap-btn {width:60px;}
	.sitemap-btn span.st {width:30px;}
	.sitemap-btn span.nd {width:60px;}
	.sitemap-btn span.rd {width:30px; left:30px;}
	.sitemap-btn:hover span.st {left:30px;}
	.sitemap-btn:hover span.nd {width:30px; left:15px;}
	.sitemap-btn:hover span.rd {}
	
	
}

@media (max-width: 1024px) {
	#header {height:100px; position:absolute;}
	#header.hide {transform:translateY(0);}
	#gnb {display:none;}
	
	/* main */
	/* main-visual */
	.main-visual .txt-box h2 {font-size:50px;}
	.visual-btn {left:15px; bottom:60px;}
	.visual-btn .pro-bar {width:100px;}
	.visual-btn .paging {font-size:13px;}
	/* section */
	.section {padding:100px 0 140px;}
	.sec-tit h3 {font-size:44px;}
	.sec-tit p {font-size:20px; margin-top:22px;}
	.section .more {width:100px; height:100px;}
	.section .more a .arrow {width:40px; height:40px; margin-top:-20px; margin-left:-20px;}
	/* section01 */
	.section01 .sec-tit {margin-bottom:80px;}
	.section01 .col {margin:0 -15px 50px;}
	.section01 .col > div {padding:0 15px;}
	.section01 .col .txt-box .txt {padding-left:0;}
	.section01 .col .txt-box p {font-size:16px; margin-bottom:10px;}
	.section01 .col .txt-box h4 {font-size:28px; margin-bottom:26px;}
	.section01 .col .txt-box li {font-size:18px; padding-left:12px;}
	.section01 .col .txt-box li:before {width:4px; height:4px; top:14px;}
	.section01 .col:last-child .txt-box {padding-bottom:40px;}
	.section01 .more {position:absolute; bottom:-40px; left:15px;}
	/* section02 */
	.section02 {overflow:hidden;}
	.section02 .more {margin-top:0px; position:absolute; top:0; right:0;}
	.section02 .col {display:block;}
	.section02 .tit-box {max-width:none; padding-right:0; margin-bottom:60px;}
	.section02 .tit-box .tit {position:relative; top:0;}
	.section02 .cnt-box {margin:0 0 0 auto; max-width:880px; padding-top:40px;}
	.section02 .cnt-box .row:nth-child(odd) {margin-top:40px;}
	.section02 .cnt-box .row:nth-child(even) {margin-top:-40px;}
	.section02 .inner {height:auto; background:#fff;}
	.section02 .inner:hover {background:#fff;}
	.section02 .inner:hover .img-box .pic {padding-bottom:64.29%; opacity:1;}
	.section02 .inner .txt-box {padding:30px 20px;}
	.section02 .inner:hover .txt-box {padding:30px 20px;}
	.section02 .inner .txt-box h4 {font-size:24px;}
	.section02 .inner:hover .txt-box h4 {color:#000;}
	.section02 .inner .txt-box p {font-size:16px; color:#666; opacity:0.7; height:calc(1.7em * 1 * 4); margin-top:20px;}
	.section02 .inner:hover .txt-box p {margin-top:20px;}
	.section02 .inner .txt-box .date {font-size:14px; margin-top:20px;}
	.section02 .inner:hover .txt-box .date {color:#666; margin-top:20px;}
	.section02 .inner .mo {display:none;}
	/* section03 */
	.section03 {height:500px; padding:0;}
	.section03 .more {margin-right:20px;}
	.section03 .more:before {width:120px; height:120px; margin-top:-60px; margin-left:-60px;}
	/* footer */
	#footer {padding:50px 0;}
	.foot-col {display:block;}
	.foot-logo {max-width:none; margin-bottom:30px;}
	.foot-cnt {width:100%; padding-right:60px;}
	.foot-cnt .info {margin-bottom:24px; padding-bottom:24px;}
	.foot-cnt .info p {font-size:14px;}
	.foot-cnt .info span {margin:0 2px;}
	.foot-cnt .cnt p {font-size:14px;}
	.foot-cnt .cnt ul {margin:0 -10px;}
	.foot-cnt .cnt ul li {padding:0 10px;}
	.foot-cnt .cnt ul li:after {height:10px; margin-top:-5px;}
	.foot-cnt .cnt ul li a {font-size:14px;}
	
	
	.quick {width:50px; height:50px; right:15px; bottom:50px;}
	.quick:hover {padding:0; width:50px;}
	.quick:hover span {margin-right:0;}
	.quick p {display:none;}
	
	.scrolltop {right:15px; bottom:110px; width:50px; height:50px; transform:translateY(60px);}
	.scrolltop:before {display:none;}
	.scrolltop:after {content:''; width:50px; height:50px;}
	
	
	
	/* sub-visual */
	.sub-visual {height:500px; padding-top:100px;}
	.sub-visual h2 {font-size:50px;}
	/* sub common */
	.real-cont {padding:100px 0;}

	.doc-tit {margin-bottom:40px;}
	.doc-tit h3 {font-size:40px;}
	/* sub 01 */
	.about .img-box {margin:0; height:auto; padding:40px 30px; display:block;}
	.about .img-box p {font-size:16px; margin-bottom:20px;}
	.about .img-box h4 {font-size:28px;}
	.about .img-box .img {right:0; bottom:0; position:relative; display:block; width:300px; margin:0 0 0 auto;}
	.about .txt-box {margin-top:60px;}
	.about .txt-box p {font-size:18px; margin-bottom:30px;}
	.about .txt-box .txt {font-size:18px; margin-top:50px;}
	.about .txt-box .txt strong {font-size:24px; margin-left:16px;}
	/* sub 02 */
	.construction {margin-bottom:100px;}
	.construction .cnt {margin-bottom:100px;}
	.cnt-tit {margin-bottom:40px;}
	.cnt-tit p {font-size:16px;}
	.cnt-tit h4 {font-size:28px;}
	.construction .col {margin:0 -10px -50px;}
	.construction .col .row {padding:0 10px; margin-bottom:50px;}
	.construction .inner .img-box {border-radius:30px; margin-bottom:30px;}
	.construction .inner .txt-box p {font-size:20px;}
	.history .img-box {border-radius:30px;}
	.history .wrap {padding:80px 0 140px;}
	.history .wrap:after {left:240px; z-index:-1;}
	.history .col {margin-bottom:50px;}
	.history .year {max-width:240px; padding:0 30px;}
	.history .year:after {width:23px; height:23px; border:6px solid #fff; right:-12px; top:6px;}
	.history .year h4 {font-size:32px;}
	.history .txt-box {padding:10px 30px;}
	.history .txt-box li {font-size:16px;} 
	/* sub 04 */
	.contact {margin-bottom:100px;}
	.contact .txt-box {padding:40px 30px; border-radius:30px;}
	.contact .txt-box li {font-size:18px; padding-left:10px;}
	.contact .txt-box li:before {top:13px;}

	
}

@media (max-width: 640px) {	
	#header {height:80px;}
	/* main */
	/* main-visual */
	.main-visual .txt-box h2 {font-size:32px;}
	.visual-btn {bottom:40px;}
	.visual-btn .pro-bar {width:80px;}
	.visual-btn .paging {font-size:12px;}
	/* section */
	.section {padding:80px 0 100px;}
	.sec-tit h3 {font-size:28px;}
	.sec-tit p {font-size:16px; margin-top:18px;}
	.section .more {width:80px; height:80px;}
	.section .more a .arrow {width:30px; height:30px; margin-top:-15px; margin-left:-15px;}
	/* section01 */
	.section01 .sec-tit {margin-bottom:60px;}
	.section01 .col {margin:0 0 50px; display:block;}
	.section01 .col > div {width:100%; padding:0;}
	.section01 .col .img-box {margin-bottom:30px;}
	.section01 .col .txt-box p {font-size:14px;}
	.section01 .col .txt-box h4 {font-size:24px; margin-bottom:20px;}
	.section01 .col .txt-box li {font-size:16px; padding-left:10px;}
	.section01 .col .txt-box li:before {width:3px; height:3px; top:12px;}
	.section01 .col:last-child .txt-box {padding-bottom:0;}
	.section01 .more {position:relative; bottom:; left:0;}
	/* section02 */
	.section02 .tit-box {margin-bottom:40px;}
	.section02 .cnt-box {padding-top:0; margin:0 -10px; max-width:none; width:auto;}
	.section02 .cnt-box .row {margin-bottom:40px; width:50%; padding:0 10px;}
	.section02 .cnt-box .row:nth-child(odd) {margin-top:0;}
	.section02 .cnt-box .row:nth-child(even) {margin-top:0;}
	
	
	.section02 .inner .txt-box {padding:20px;}
	.section02 .inner:hover .txt-box {padding:20px;}
	.section02 .inner .txt-box h4 {font-size:20px;}
	.section02 .inner .txt-box p {font-size:14px; margin-top:12px;}
	.section02 .inner:hover .txt-box p {margin-top:12px;}
	.section02 .inner .txt-box .date {font-size:12px; margin-top:12px;}
	.section02 .inner:hover .txt-box .date {margin-top:12px;}
	/* section03 */
	.section03 {height:400px; padding:0;}
	.section03 .wrap {display:flex; flex-direction:column; justify-content:center; align-items:stretch;}
	.section03 .sec-tit {margin-bottom:40px;}
	.section03 .more {margin-right:0; margin:0 20px 0 auto;}
	.section03 .more:before {width:100px; height:100px; margin-top:-50px; margin-left:-50px;}
	/* footer */
	#footer {padding:30px 0;}
	.foot-logo { margin-bottom:20px; text-align:center;}
	.foot-cnt {padding-right:0;}
	.foot-cnt .info {margin-bottom:18px; padding-bottom:18px; text-align:center;}
	.foot-cnt .info p {font-size:12px;}
	.foot-cnt .info span {margin:0; display:none;}
	.foot-cnt .info br {display:block;}
	.foot-cnt .cnt {display:block; text-align:center;}
	.foot-cnt .cnt p {font-size:12px;}
	.foot-cnt .cnt ul {justify-content:center;}
	.foot-cnt .cnt ul li a {font-size:12px;}
	
	/* sub-visual */
	.sub-visual {height:350px; padding-top:80px;}
	.sub-visual h2 {font-size:38px;}
	/* sub common */
	.real-cont {padding:80px 0 100px;}

	.doc-tit {margin-bottom:28px;}
	.doc-tit h3 {font-size:28px;}
	/* sub 01 */
	.about .img-box {padding:30px 20px 10px;}
	.about .img-box .txt {margin-bottom:20px;}
	.about .img-box p {font-size:16px; margin-bottom:20px;}
	.about .img-box h4 {font-size:28px;}
	.about .img-box .img {width:200px; margin:0 0 0 auto;}
	.about .txt-box {margin-top:50px;}
	.about .txt-box p {font-size:16px; margin-bottom:20px;}
	.about .txt-box p br {display:none;}
	.about .txt-box .txt {font-size:16px; margin-top:30px;}
	.about .txt-box .txt strong {font-size:20px; margin-left:10px;}
	/* sub 02 */
	.construction {margin-bottom:80px;}
	.construction .cnt {margin-bottom:80px;}
	.cnt-tit {margin-bottom:30px;}
	.cnt-tit p {font-size:14px;}
	.cnt-tit h4 {font-size:24px;}
	.construction .col {margin:0 -10px -30px;}
	.construction .col .row {margin-bottom:30px; width:50%;}
	.construction .inner .img-box {border-radius:20px; margin-bottom:20px;}
	.construction .inner .txt-box p {font-size:16px;}
	.history .img-box {border-radius:20px;}
	.history .wrap {padding:60px 0 100px;}
	.history .wrap:after {left:10px; z-index:-1;}
	.history .col {margin-bottom:40px; display:block; padding:0 20px;}
	.history .year {max-width:none; padding:0 10px; margin-bottom:20px; text-align:left;}
	.history .year:after {width:15px; height:15px; border:3px solid #fff; right:auto; left:-17px; top:8px;}
	.history .year h4 {font-size:28px;}
	.history .txt-box {padding:0 10px; width:100%}
	.history .txt-box li {font-size:14px;} 
	/* sub 04 */
	.contact {margin-bottom:80px;}
	.contact .txt-box {padding:20px; border-radius:20px;}
	.contact .txt-box li {font-size:16px;}
	.contact .txt-box li:before {top:11px; width:3px; height:3px;}
	
	
}

@media (max-width: 400px) {
	.sub-visual {height:300px;}
	
	.construction .col .row {width:100%;}
}