@charset "UTF-8";
/*-------------------------------------------------
title       : 메인 반응형
Create date : 2020-02-14
-------------------------------------------------*/

@media screen and (max-height: 935px) {
	#section0 {padding:4rem 8.559%}
	#visual-bg .bx-controls {top:8rem}
}

@media screen and (max-width:1700px) {
	.foot-wrap {padding:3.5rem 3rem 6rem}
}

@media screen and (max-width:1400px) {
	#fp-nav.fp-right {left:32rem}
	.section {padding:8.5rem 7rem}
	
	#visual .bx-wrapper img {max-width:90%; float:right}
	#visual-bg .bx-controls {left:7rem}
	
	#section2 .gallery:before, #section2 .tel-wrap:before {left:-10rem}
	
}

@media screen and (max-width:1260px) {
	.section {height:auto !important; overflow:hidden; position:relative; padding:5rem 7rem}

	#visual-bg .bx-controls {top:7rem}
	#section0 .title {margin-top:9rem}
	
	#section1 .latest {width:55%}
	#section1 .group .conBox li {height:9.5rem; width:100%}
	#section1 .group .conBox li a {padding:2rem 3rem}
	#section1 .group .conBox li a .title {margin-bottom:0}
	#section1 .group .conBox li a .con {display:none}
	#section1 .popup-wrap {width:40%; max-width:100%}
	#section1 .calendar h2 {float:none; width:100%; border-right:none; border-bottom:1px solid rgba(255,255,255,0.3); padding-right:0; padding-bottom:2.5rem}
	#section1 .calendar h2 span {display:none}
	#section1 .calendar .scrollbar {height:20rem; width:100%; position:relative; left:0; padding-top:2rem}
	#section1 .calendar .btn {left:auto; bottom:auto; right:2.5rem; top:3.5rem}
}

	
@media screen and (max-width:1000px) {
	#section0 .quick-wrap {margin-left:0; width:100%; overflow-x:scroll; padding-bottom:1rem}
	#section0 .quick {min-width:130rem}
	#section0 .quick-wrap li {display:inline; margin:0 3rem 0 0; width:60px}
	#section0 .quick-wrap i {margin-bottom:0.5rem}
	#section0 .quick-wrap img {margin:0 auto; width:70%}
	#section0 .quick-wrap a span {word-break:keep-all; display:block; line-height:1.3}
	
	#section2 .tel-wrap li {width:33.3%}
}

@media screen and (max-width:767px) { 
	.section {padding:4rem 3rem}
	
	#visual-bg .bx-pager {margin-right:1rem}
	#visual-bg .bx-controls {left:3rem; top:5rem}
	
	#section0 {padding:5rem 3rem 7rem}
	#section0 .title {margin-top:5.5rem; padding-right:50%}
	#section0 .title .s-tt {font-size:3rem}
	#section0 .gice-news {width:100%; max-width:100%; margin-bottom:2rem}
	
	#section1 .latest {width:45%}
	#section1 .popup-wrap {width:50%}
	#section1 .popup-wrap .bx-viewport {height:330px !important}
	
	#section2 .gallery {margin-bottom:3rem}
	#section2 .gallery .bx-controls {right:4.4rem; top:-6.7rem}
	#section2 .gallery .bx-controls a {width:35px; height:35px; line-height:35px; margin-right:2px}
	#section2 .gallery .more {width:35px; height:35px; line-height:35px}
	#section2 .tel-wrap h2 {position:relative; margin-bottom:0}
	#section2 .tel-wrap h2:after {content:''; background-color:#2c3787; border-radius:100%; color:#fff; font-family:'xeicon'; font-size:1.7rem; width:20px; height:20px; text-align:center; position:absolute; right:0; top:6px; transition:all .3s}
	#section2 .tel-wrap .list {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0}
	#section2 .tel-wrap li {width:100%}
	#section2 .tel-wrap span {display:inline-block; vertical-align:middle}
	#section2 .tel-wrap.active h2:after {-webkit-transform:rotate(180deg); transform:rotate(180deg)}
	#section2 .tel-wrap.active .list {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1; -webkit-transition:all .3s; transition:all .3s; margin-top:1rem}
}

@media screen and (max-width:640px) { 
	#section0 .title .s-tt {font-size:2rem}
	
	#section1 {background-size:cover}
	#section1 .latest {width:100%; height:51rem}
	#section1 .popup-wrap {width:100%}
	#section1 .popup-wrap .bx-viewport {height:100% !important}
	#section1 .popup-wrap img {width:100% !important}
       .layer-popup,.popup_cont,.popup_cont a img {width:100% !important; height: auto !important}
}

@media screen and (max-width:480px) { 
	#section2 .gallery .bx-wrapper {max-width:100% !important}
}