@charset "utf-8";

@media (max-width: 1400px) {

	#gnb {margin-left:50px;}
	#gnb>ul>li {padding:0 15px;}
	#gnb>ul>li>a {font-size:18px;}

	#header .btns {width:70px;}
	
	.submenu-bg .submenu li a {font-size:16px;}
	.submenu-bg .submenu li a span {font-size:14px;}
	
	.section02 .img-box {max-width:600px;}
}

@media (max-width: 1024px) {

	#header.hide {transform:translateY(0);}
	#gnb {display:none;}
	
	/* main-visual */
	.main-visual .txt-box .txt h2 {font-size:50px;}
	.main-visual .paging {bottom:60px;}
	.main-visual .paging ul li button {font-size:16px; padding:0 10px 20px; width:120px;}
	.main-visual .paging ul li button:before {height:3px;}
	.main-visual .paging ul li button:after {height:3px;}
	/* section */
	.sec-tit p {font-size:20px;}
	.sec-tit h3 {font-size:40px;}
	/* section01 */
	.section01 .tit-box {padding:100px 0 60px; display:block;}
	.section01 .sec-tit {max-width:none;}
	.section01 .tab-menu {margin-top:40px;}
	.section01 .tab-menu ul {display:flex; margin:0 -20px;}
	.section01 .tab-menu ul li {padding:0 20px;}
	.section01 .tab-menu ul li a {font-size:26px; padding-top:18px;}	
	.section01 .tab-menu ul li a:before {width:6px; height:6px; margin-left:-3px;}
	.section01 .tab-content {height:400px;}
	.section01 .tab-content .wrap {padding:60px 0;}
	.section01 .tab-content .col {display:block;}
	.section01 .tab-content .tit {margin-bottom:20px;}
	.section01 .tab-content .tit h4 {font-size:28px; margin-bottom:18px;}
	.section01 .tab-content .tit p {font-size:18px;}
	.section01 .tab-content .more a {width:180px; line-height:54px; padding:0 20px; font-size:16px;}
	.section01 .tab-content .more a:after {width:14px; height:14px; margin-top:-7px; right:20px;}
	/* section02 */
	.section02 {padding:100px 0;}
	.section02 .col {display:block;}
	.section02 .tit-box {width:100%; padding-top:0; padding-right:0; margin-bottom:60px;}
	.section02 .tit-box .sec-tit {margin-bottom:10px;}
	.section02 .tit-box .txt p {font-size:18px; margin-bottom:30px;}
	.section02 .tit-box .txt p strong {font-size:26px;}
	.section02 .tit-box .more a {width:180px; line-height:54px; padding:0 20px; font-size:16px;}
	.section02 .tit-box .more a:after {width:14px; height:14px; margin-top:-7px; right:20px;}
	.section02 .img-box {margin:0 0 0 auto; padding:50px 0;}
	.section02 .img-box .tt {position:absolute; z-index:-1;}
	.section02 .img-box .tt.top {left:-50px; top:-50px;}
	.section02 .img-box .tt.btm {right:-50px; bottom:-50px;}
	/* section03 */
	.section03 .txt-box {padding:50px 0;}
	.section03 .txt-box h3 {font-size:28px;}
	.section03 .col a {font-size:20px; padding:30px;}
	.section03 .col a:after {width:16px; height:16px; margin-top:-8px; right:30px;}
	
	/* footer */
	#footer {padding:60px 0;}
	.foot {display:block;}
	.foot-logo {max-width:none; margin-bottom:30px;}
	.foot-cnt {width:100%;}
	.foot-cnt .info {padding-bottom:25px; margin-bottom:25px;}
	.foot-cnt .info p {font-size:15px;}
	.foot-cnt .info p span {margin:0 4px;}
	.foot-cnt .info p br {display:none;}
	.foot-cnt .cnt {display:block;}
	.foot-cnt .cnt p {font-size:15px; margin-bottom:20px;}
	.foot-cnt .cnt ul li {padding-left:0; margin-right:20px;}
	.foot-cnt .cnt ul li a {font-size:15px;}
	
	.scroll-box {right:15px; bottom:60px; transform:translate(160px);}
	.scroll-box .scrolltop {width:50px; height:50px;}


}

@media (max-width: 640px) {
	#header {height:80px;}
	#header .sitelogo a {height:50px; margin-top:-25px;}
	#header .sitelogo a img {height:100%;}
	
	/* main-visual */
	.main-visual .item {height:calc(100vh - 80px); margin-top:80px; position:relative;}
	.main-visual .txt-box .txt h2 {font-size:32px;}
	.main-visual .paging {bottom:40px;}
	.main-visual .paging ul li button {font-size:14px; padding:0 0 10px; width:80px;}
	/* section */
	.sec-tit p {font-size:16px;}
	.sec-tit h3 {font-size:28px;}
	/* section01 */
	.section01 .tit-box {padding:80px 0 40px;}
	.section01 .tab-menu {margin-top:30px;}
	.section01 .tab-menu ul {margin:0 0 -8px; display:block;}
	.section01 .tab-menu ul li {padding:0; width:100%; margin-bottom:8px;}
	.section01 .tab-menu ul li a {font-size:20px; padding-top:0;}
	.section01 .tab-menu ul li.active a {padding-left:12px;}
	.section01 .tab-menu ul li a:before {width:4px; height:4px; margin-left:0; top:50%; left:0; margin-top:-2px;}
	.section01 .tab-menu ul li.active a:before {top:50%;}
	.section01 .tab-content {height:300px;}
	.section01 .tab-content .wrap {padding:30px 0;}
	.section01 .tab-content .tit h4 {font-size:24px; margin-bottom:12px;}
	.section01 .tab-content .tit p {font-size:16px;}
	.section01 .tab-content .more a {width:140px; line-height:40px; padding:0 15px; font-size:14px;}
	.section01 .tab-content .more a:after {width:12px; height:12px; margin-top:-6px; right:15px;}
	/* section02 */
	.section02 {padding:60px 0 100px;}
	.section02 .tit-box .txt p {font-size:16px; margin-bottom:20px;}
	.section02 .tit-box .txt p strong {font-size:20px;}
	.section02 .tit-box .more a {width:140px; line-height:40px; padding:0 15px; font-size:14px;}
	.section02 .tit-box .more a:after {width:12px; height:12px; margin-top:-6px; right:15px;}
	.section02 .img-box {padding:50px 0;}
	/* section03 */
	.section03 .txt-box {padding:30px 15px;}
	.section03 .txt-box h3 {font-size:24px;}
	.section03 .contain {padding:0;}
	.section03 .col a {font-size:16px; padding:20px 15px;}
	.section03 .col a:after {width:14px; height:14px; margin-top:-7px; right:15px;}
	/* footer */
	#footer {padding:30px 0;}
	.foot-logo {margin-bottom:20px;}
	.foot-cnt .info {padding-bottom:20px; margin-bottom:20px;}
	.foot-cnt .info p {font-size:14px;}
	.foot-cnt .info p span {margin:0; display:none;}
	.foot-cnt .info p br {display:block;}
	.foot-cnt .cnt p {font-size:14px;}
	.foot-cnt .cnt ul li a {font-size:14px;}
	
	.scroll-box {bottom:30px;}
	.scroll-box .scrolltop {width:40px; height:40px;}
	
}

@media (max-width: 400px) {
	.section01 .tab-content .tit p br {display:none;}
	
	.section02 .img-box .tt.top {width:80%; top:0; left:-15px;}
	.section02 .img-box .tt.btm {width:75%; bottom:0; right:-15px;}	
	.section02 .img-box .tt.top img {width:100%;}
	.section02 .img-box .tt.btm img {width:100%;}
}