@charset "utf-8";

@import url('default.css'); /* 기본설정 */
@import url('layout.css'); /* 사이트 세부설정 */

#main .wrap { width: 72%; }

.visual_sect { position: relative; width: 100%; height: 100vh; }
.visual_sect .swiper-container, .visual_sect .swiper-wrapper, .visual_sect .swiper-slide { height:100%; position:relative; overflow: hidden}
.visual_sect .swiper-slide .bg_img { position:absolute; left:0; top:0; width:100%;height: 100%; transform: scale(1.1) ;transition: transform 1.5s ease-in-out; }
.visual_sect .swiper-slide-active .bg_img{ transform: scale(1); }
.visual_sect .swiper-slide .bg_img img { width:100%; height:100%;  object-fit: cover; object-position: center;}
.visual_sect .tit_box { position: absolute; bottom: 155px; left: 50%; width: 1460px; margin-left: -730px; font-family: "SUIT"; font-size: 20px; font-weight: 600; color: #fff; line-height: 29px; z-index: 3; }

.visual_sect .swiper-button-prev { position: absolute; top: 50%; left: 110px; transform: translatey(-50%); z-index: 999; }
.visual_sect .swiper-button-prev a { display: block; width: 60px; font-family: "SUIT"; font-size: 24px; font-weight: 300; color: #fff; line-height: 60px; text-align: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); }
.visual_sect .swiper-button-prev a:hover { color: #020202; background: rgba(255,255,255,1); }
.visual_sect .swiper-button-next { position: absolute; top: 50%; right: 110px; transform: translatey(-50%); z-index: 999; }
.visual_sect .swiper-button-next a { display: block; width: 60px; font-family: "SUIT"; font-size: 24px; font-weight: 300; color: #fff; line-height: 60px; text-align: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); }
.visual_sect .swiper-button-next a:hover { color: #020202; background: rgba(255,255,255,1); }

.visual_sect .pagination { position: absolute; bottom: 60px; left: 50%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; max-width: 1300px; transform: translatex(-50%); z-index: 3; }
.visual_sect .pagination span { position: relative; width: calc((100% - 100px) / 6); aspect-ratio: 10/7; margin: 0 !important; border-radius: 10px; transition: all 0.3s; cursor: pointer; }
.visual_sect .pagination span:nth-child(1) { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.visual_sect .pagination span:nth-child(2) { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.visual_sect .pagination span:nth-child(3) { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.visual_sect .pagination span:nth-child(4) { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.visual_sect .pagination span:nth-child(5) { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.visual_sect .pagination span:nth-child(6) { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.visual_sect .pagination span:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index: 22; }
.visual_sect .pagination span:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background-color: rgba(0,0,0,0.4); z-index: 11; }
.visual_sect .pagination span.swiper-pagination-bullet-active:before { border: 2px solid #9a75e6; }
.visual_sect .pagination span.swiper-pagination-bullet-active:after { background-color: rgba(0,0,0,0); }
.visual_sect .shadow { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url('../images/main/visual_shadow.png') repeat-x left top; background-size: 10px 100%; z-index: 2; }
.visual_sect .dark { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1; }

 h2 { margin-top: 145px; font-size: 50px; font-weight: 800; color: #000; line-height: 59px; text-align: center; }
 h2 span { color: #5336ab; }
.desc_txt { margin-top: 25px; font-size: 22px; font-weight: 500; color: #656979; line-height: 33px; text-align: center; }

.led-display { padding: 150px 120px; background-color: #080808; }
.led-display .display { display: flex; flex-wrap: wrap; gap: 60px; }
.led-display .display li { width: calc((100% - 60px) / 2); height: 498px; padding: 65px 0 0 80px; border-radius: 10px; border: 1px solid #454545; background: url('../images/main/display_bg2.jpg') no-repeat right top; }
.led-display .display li:first-child { background: url('../images/main/display_bg1.jpg') no-repeat right top; }
.led-display .display li h2 { margin-top: 0; color: #fff; text-align: left; }
.led-display .display li h2 small { display: block; font-size: 35px; font-weight: 500; color: #e9b7f4; line-height: 44px; }
.led-display .display li .txt { height: 120px; margin-top: 40px; font-size: 16px; color: rgba(255,255,255,0.9); line-height: 30px; }

.cm-btn { position: relative; display: flex; align-items:center; justify-content: space-between; width: 180px; height: 45px; margin-top: 45px; padding: 0 20px; box-sizing:border-box; border-radius: 5px; border: 1px solid rgba(255,255,255,0.4); background: #000; overflow:hidden; transition: all 0.8s ease-in-out; will-change: opacity, transform; transition: all ease-out .3s 0.3s; }
.cm-btn .btn-txt { position: relative; font-size: 16px; font-weight: 300; color: #fff; line-height: 43px; z-index:1; transition: all 0.4s ease-in-out; }
.cm-btn .btn-icon { position: relative; display: flex; align-items:center; justify-content:center; transition: all 0.4s ease-in-out; }
.cm-btn .btn-icon:before{ position: absolute; content:''; width:100%; height:100%; border-radius:50%; background: #5336ab; transition: all 0.4s ease-in-out, background 0.4s ease-in-out;}
.cm-btn .btn-icon img { position: relative; z-index: 1; }
.cm-btn:hover { border: 1px solid #5336ab; }
.cm-btn:hover .btn-icon:before { transform:scale(20) }

.partner { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 95px; }
.partner li { width: calc((100% - 100px) / 6); padding-top: 25px; text-align: center; border-radius: 20px; border: 1px solid #f2f2f7; background-color: #fff; box-shadow: 0 0 10px #f2f2f7; }
.partner li .icon { font-size: 0; line-height: 0; }
.partner li .number { margin-top: 20px; font-size: 20px; font-weight: 800; color: #5336ab; line-height: 27px; }
.partner li .tit { margin-top: 15px; font-size: 20px; font-weight: 700; color: #000; line-height: 29px; }
.partner li .txt { margin: 15px 20px 45px 20px; font-size: 17px; font-weight: 500; color: #333; line-height: 28px; }

.total-bg { margin-top: 80px; padding: 45px 5%; border-radius: 20px; background: url('../images/main/total_bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.total-bg .total { display: flex; flex-wrap: wrap; }
.total-bg .total li { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; width: 25%; text-align: center; }
.total-bg .total li:before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 68px; background: rgba(255,255,255,0.15); }
.total-bg .total li:first-child:before { display: none; }
.total-bg .total li .icon { font-size: 0; line-height: 0; }
.total-bg .total li .numbers-container { min-width: 100px; font-size: 18px; font-weight: 500; color: #fff; line-height: 27px; text-align: left; }
.total-bg .total li .numbers-container strong { display: block; margin-bottom: 6px; font-size: 30px; font-weight: 700; color: #fff; line-height: 35px; }

.project-list { display: flex; flex-wrap: wrap; gap: 70px; margin-top: 95px; }
.project-list li { width: calc((100% - 140px) / 3);  text-align: center; }
.project-list li a { display: block; }
.project-list li a .img { overflow: hidden; font-size: 0; line-height: 0; border-radius: 20px; }
.project-list li a .img img { width: 100%; aspect-ratio: 10/7; object-fit: cover; transition: transform .5s; }
.project-list li a:hover .img img { transform: scale(1.05); }
.project-list li a .tit { margin-top: 25px; font-size: 20px; font-weight: 600; color: #222; line-height: 29px; }

@media screen and (max-width: 1920px) {

	#main .wrap { width: 1400px; }
}

@media screen and (max-width: 1400px) {
	.wrap { width: 1280px; margin: 0 auto; }

	#main .wrap { width: 1280px; }

	.visual_sect .pagination { gap: 10px; max-width: 1280px; }
	.visual_sect .pagination span { width: calc((100% - 50px) / 6); }

	.led-display { padding: 150px 80px; }

	.partner li { width: calc((100% - 40px) / 3); }

	.project-list { gap: 40px; }
	.project-list li { width: calc((100% - 80px) / 3); }
}

@media screen and (max-width: 1280px) {
	.wrap { width: 980px; margin: 0 auto; }

	#main .wrap { width: 980px; }

	.visual_sect .pagination { max-width: 980px; }

	.led-display { padding: 150px 0; }
	.led-display .display { width: 980px; margin: 0 auto; }
	.led-display .display li { width: 100%; }
}

@media screen and (max-width: 980px) {
	.wrap { width: 750px; margin: 0 auto; }

	#main .wrap { width: 750px; }

	.visual_sect .pagination { max-width: 750px; }

	.led-display .display { width: 750px; }

	.total-bg { padding: 45px 2%; }
	.total-bg .total { display: flex; flex-wrap: wrap; }
	.total-bg .total li { gap: 0; text-align: center; }
	.total-bg .total li:before { width: 1px; height: 162px; }
	.total-bg .total li .icon { width: 100%; }
	.total-bg .total li .numbers-container { min-width: auto; width: 100%; margin-top: 35px; text-align: center; }
}

@media screen and (max-width: 768px) {
	.wrap { width: auto; margin: 0 20px; }

	#main .wrap { width: auto; }

	.visual_sect .swiper-button-prev { left: 20px; }
	.visual_sect .swiper-button-prev a { width: 40px; font-size: 17px; line-height: 40px; }
	.visual_sect .swiper-button-next { right: 20px; }
	.visual_sect .swiper-button-next a { width: 40px; font-size: 17px; line-height: 40px; }

	.visual_sect .pagination { bottom: 100px; left: 20px; right: 20px; gap: 6px; width: calc(100% - 40px); max-width: auto; transform: translatex(0); }
	.visual_sect .pagination span { width: calc((100% - 30px) / 6); border-radius: 5px; }
	.visual_sect .pagination span:before { border-radius: 5px; }
	.visual_sect .pagination span:after { border-radius: 5px; }

	 h2 { margin-top: 75px; font-size: 28px; line-height: 37px; }
	.desc_txt { margin-top: 15px; font-size: 15px; line-height: 24px; }

	.led-display { padding: 0 20px 60px 20px; }
	.led-display .display { width: auto; gap: 20px; }
	.led-display .display li { height: 298px; padding: 35px 0 0 30px; border-radius: 5px; background-size: auto 100%; }
	.led-display .display li:first-child { background-size: auto 100%; }
	.led-display .display li h2 small { font-size: 22px; line-height: 31px; }
	.led-display .display li .txt { height: 80px; margin-top: 20px; font-size: 13px; line-height: 20px; }

	.cm-btn { width: 150px; height: 38px; margin-top: 25px; padding: 0 15px; }
	.cm-btn .btn-txt { font-size: 13px; line-height: 36px; }
	.cm-btn .btn-icon img { height: 18px; }

	.partner { gap: 10px; margin-top: 45px; }
	.partner li { width: calc((100% - 10px) / 2); padding-top: 20px; border-radius: 10px; }
	.partner li .icon img { height: 60px; }
	.partner li .number { margin-top: 10px; font-size: 16px; line-height: 25px; }
	.partner li .tit { margin-top: 5px; font-size: 15px; line-height: 24px; }
	.partner li .txt { margin: 5px 15px 25px 15px; font-size: 13px; line-height: 20px; }

	.total-bg { margin-top: 50px; border-radius: 10px; }
	.total-bg .total { gap: 30px; }
	.total-bg .total li { width: calc((100% - 30px) / 2); }
	.total-bg .total li:before { left: -15px; height: 110px; }
	.total-bg .total li:first-child:before { display: none; }
	.total-bg .total li .icon img { height: 36px; }
	.total-bg .total li .numbers-container { margin-top: 20px; font-size: 13px; line-height: 22px; }
	.total-bg .total li .numbers-container strong { font-size: 22px; line-height: 29px; }

	.project-list { gap: 25px 20px; margin-top: 45px; }
	.project-list li { width: calc((100% - 20px) / 2); }
	.project-list li a .img { border-radius: 10px; }
	.project-list li a .tit { margin-top: 10px; font-size: 14px; line-height: 21px; }
}

@media screen and (max-width: 480px) {
	.wrap { width: auto; margin: 0 20px; }

}