/**
* OLYM Cascading Style Sheets
* File Name : main.css
* Description : 메인 스타일시트
* Author : Web business Team
* Email : odesign@olym.co.kr
* Date : 2025.06.20
* Update : 2025.06.20
* Copyright(c) 2025 OLYM Communications. All Rights Reserved.
*/


/* common */
.fx {display:flex;}


/* title */
.main_tt_box.fx {align-items:flex-end;justify-content:space-between;}
h2 {font-size:36px;color:#000;font-weight:900;}
.main_tt_box span a {color:#000;}


/* main img */
.main {height:660px;}
.main .swiper { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }
.main .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.main .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* main visual */
.main_visual {position:relative;}
.main_visual .main_txt_box {position:absolute;display:inline-block;content:"";right:0;top:0;height:100%;width:30%;border-radius:130px 0 0 0;box-sizing:border-box;padding:5%;display:flex;flex-direction:column;justify-content:center;backdrop-filter:blur(10px);}
.main_visual .main_txt_box h2 {text-align:left;font-size:48px;color:#fff;line-height:1.2em;}
.main_visual .main_txt_box p {text-align:left;color:#fff;font-size:24px;font-weight:700; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:80px 0 40px 0; }
.main_visual .main_txt_box span {text-align:left;color:#fff;display:block;font-size:24px;color:rgba(255,255,255,0.5);}
.main_arrow_box {position:absolute;display:inline-block;width:130px;right:30px;bottom:30px;}
.main_arrow_box .swiper-button-next {width:42px !important;height:12px !important;background:url('/project/design/main/bg_next_arrow.png')no-repeat center; font-size:0; text-indent:-9999px;transform: translateX(0); transition: all .3s ease;}
.main_arrow_box .swiper-button-prev {width:42px !important;height:12px !important;background:url('/project/design/main/bg_prev_arrow.png')no-repeat center; font-size:0; text-indent:-9999px;transform: translateX(0); transition: all .3s ease;}
.main_arrow_box .swiper-button-next:hover {transform: translateX(10px);}
.main_arrow_box .swiper-button-prev:hover {transform: translateX(-10px);}
.swiper-pagination1 {left:auto !important;right:10px !important;width:50px !important;flex-direction:column;position:absolute;z-index:1000 !important;top:50% !important;transform:translate(0,-50%);bottom:auto !important;}
.swiper-pagination1 .swiper-pagination-bullet {display:block;margin:20px !important;width:10px !important;height:10px !important;background:#fff !important;}
.swiper-pagination1 .swiper-pagination-bullet-active {background:#fff;}



/*진행중인프로젝트&지역소식*/
.recu_project {position:relative;margin:80px 0;}
.recu_project:before {position:absolute;display:inline-block;content:"";width:188px;height:187px;background:url("/project/design/main/arch_obj1.png") no-repeat center;left:13%;top:100px;animation:arch_obj1 28s linear infinite;}
.recu_project:after {position:absolute;display:inline-block;content:"";width:853px;height:396px;background:url("/project/design/main/arch_obj2.png") no-repeat center;left:6%;top:60px;z-index:-1;}
.recu_project .main_tt_box {margin-bottom:80px;position:relative;}

@keyframes arch_obj1 {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(-360deg)}
}

.recu_project .swiper {
  width: 100%;
  height: 100%;
padding-bottom:120px !important;
}

.recu_project .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  flex-direction:column;
}

.recu_project .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recu_project h3 {font-size:20px;color:#222;font-weight:700;
	white-space:normal;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin:10px 0 20px 0;
	word-break:normal;
}
.recu_project .date {color:#888;
	white-space:normal;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.swiper-horizontal>.swiper-scrollbar {bottom:0 !important;width:73% !important;left:13.5% !important;height:2px !important;}

.recu_project .swiper-slide a {overflow:hidden;width:100% !important;height:100% !important;position:relative;display:table-cell;vertical-align:middle;text-align:center;border:1px solid #f4f4f4;box-sizing:border-box;}
.recu_project .swiper-slide a img {width:100% !important;height:430px !important;max-width:100% !important;max-height:100% !important;transform:scale(100%);transform-original:center;transition:all .3s ease;}
.recu_project .swiper-slide a:hover img {transform: scale(110%);}




@media all and (max-width:1680px) {
.recu_project .swiper-slide a img {height:375px !important;}
}

@media all and (max-width:1400px) {
.recu_project .swiper-slide a img {height:304px !important;}
}

@media all and (max-width:1280px) {
.recu_project .swiper-slide a img {height:345px !important;}
}

@media all and (max-width:1024px) {
.recu_project .swiper-slide a img {height:327px !important;}
}

@media all and (max-width:800px) {
.recu_project .swiper-slide a img {height:415px !important;}
}

@media all and (max-width:768px) {
.recu_project .swiper-slide a img {height:388px !important;}
}

@media all and (max-width:700px) {
.recu_project .swiper-slide a img {height:360px !important;}
}

@media all and (max-width:600px) {
.recu_project .swiper-slide a img {height:306px !important;}
}

@media all and (max-width:500px) {
.recu_project .swiper-slide a img {height:252px !important;}
}

@media all and (max-width:414px) {
.recu_project .swiper-slide a img {height:195px !important;}
}

@media all and (max-width:375px) {
.recu_project .swiper-slide a img {height:184px !important;}
}

@media all and (max-width:360px) {
.recu_project .swiper-slide a img {height:167px !important;}
}

@media all and (max-width:320px) {
.recu_project .swiper-slide a img {height:153px !important;}
}



/*탭*/
.recu_project .tab {margin-bottom:50px;position:relative;}
.recu_project .tab button {position:relative;background:none;border:none;cursor: pointer;transition: 0.3s;outline: none;font-size:36px;font-weight:900;color:#000;font-family:'Pretendard';padding:0;padding-right:40px;margin-right:5px;}
.recu_project .tab button:first-of-type:after {position:absolute;content:"ㆍ";right:0;}
.recu_project .tab span a {color:#000;position:absolute;right:0;bottom:0;}
.recu_project .tabcontent {animation: fadeEffect 1s; }

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.recu_project span.cate {text-align:left !important;display:inline-block;width:100%;margin-top:30px;font-family: 'S-CoreDream-5Medium';position:relative;padding-left:8px;font-size:15px;}
.recu_project span.cate:before {position:absolute;display:inline-block;content:"";width:8px;height:8px;border-radius:8px;left:0;}
.recu_project span.cate.prog:before {background:#3cb3ca;}
.recu_project span.cate.loca:before {background:#f1c220;}
.recu_project span.cate.prog {color:#3cb3ca;}
.recu_project span.cate.loca {color:#f1c220;}

/*커뮤니티*/
.community {background:#f9f9f9;padding:120px 0;box-sizing:border-box;}
.community .comm_notice ul {gap:40px;margin-top:40px;}
.community .comm_notice ul li {border-top:2px solid #000;padding-top:50px;flex:1;}
.community .comm_notice ul li h3 {
	white-space:normal;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-bottom:20px;
}
.community .comm_notice ul li h3 a {color:#222;font-size:20px;font-weight:700;line-height:1.5em;}
.community .comm_notice ul li span {color:#888;}

.community .comm_news {margin-top:80px;}
.community .comm_news ul {gap:40px;margin-top:40px;}
.community .comm_news ul li {border-top:2px solid #000;padding-top:50px;flex:1;gap:50px;width:50%;}
.community .comm_news ul li h3 {
	white-space:normal;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-bottom:20px;
}
.community .comm_news ul li p {
	white-space:normal;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-bottom:20px;
	font-size:1.125em;
	color:#888;
}
.community .comm_news ul li h3 a {color:#222;font-size:20px;font-weight:700;}
.community .comm_news ul li span {color:#888;}
.community .comm_news .photo span {overflow:hidden;width:240px;height:160px;position:relative;display:table-cell;vertical-align:middle;text-align:center;}
.community .comm_news .photo img {width:240px;height:160px;max-height:160px;transform:scale(100%);transform-original:center;transition:all .3s ease;}
.community .comm_news .photo:hover img {transform: scale(120%);}
.community .comm_news .txt {margin-top:15px;}





/*문화아카이빙*/
.arch_box {position:relative;overflow:hidden !important;}
.arch_box:after {position:absolute;display:inline-block;content:"";background:url("/project/design/main/arch_obj3.png") no-repeat center;width:376px;height:377px;right:-10%;top:35px;animation:arch_obj1 28s linear infinite;overflow:hidden !important;z-index:-1;}
.archiving {padding:120px 0;}
.archiving:after {position:absolute;display:inline-block;content:"";left:50%;transform:translate(-50%,0);top:auto;bottom:40px;background:url("/project/design/main/bg_archiving.png") no-repeat center;width:1319px;height:41px;}
.arch {gap:35px;}
.arch .tit {position:relative;font-family: 'S-CoreDream-5Medium';color:#222;padding-right:8px;}
.arch .tit:before {position:absolute;display:inline-block;content:"";width:8px;height:8px;border-radius:8px;left:-8px;}
.arch .tit.first:before {background:#f1c220;}
.arch .tit.second:before {background:#3cb3ca;}
.arch .tit.third:before {background:#d51165;}
.arch .num {font-family: 'S-CoreDream-9Black'; color:#222;font-size:25px;}

.archiving .cate {flex-wrap:wrap;gap:40px;box-sizing:border-box;margin-top:40px;}
.archiving .cate div {flex-basis:calc(50% - 20px);box-sizing:border-box;height:250px;border-radius:60px 0 0 0;overflow:hidden;}
.archiving .cate div a {display:inline-block;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;border-radius:60px 0 0 0;padding-left:70px;}
.archiving .cate div a:hover {backdrop-filter:blur(10px);}
.archiving .cate div.bg1 {background:url("/project/design/main/bg_arch1.jpg") no-repeat center;}
.archiving .cate div.bg2 {background:url("/project/design/main/bg_arch2.jpg") no-repeat center;}
.archiving .cate div.bg3 {background:url("/project/design/main/bg_arch3.jpg") no-repeat center;}
.archiving .cate div.bg4 {background:url("/project/design/main/bg_arch4.jpg") no-repeat center;}
.archiving .cate div a h3 {font-size:36px;font-weight:900;color:#222;transition:.3s all ease;}
.archiving .cate div a:hover h3 {transform:translateX(30px);transition:.3s all ease;}
.archiving .cate div a i {opacity:0;transition:.3s all ease;font-size:40px;color:#222;position:relative;top:-1px;}
.archiving .cate div a:hover i {transform:translateX(35px);transition:.3s all ease;display:block !important;transition-delay:.2s;opacity:1;}







@media all and (max-width:1400px) {
.main {height:auto;}
.recu_project:after {left:2.5%;}
.main_tt_box.wrap_box {width:100%;}
.recu_project .main_tt_box.wrap_box {width:95%;}
}



@media all and (max-width:1279px) {
.main_visual .main_txt_box h2 {font-size:36px;}
.main_visual .main_txt_box p {font-size:18px;margin:40px 0 20px 0;}
.main_visual .main_txt_box span {font-size:18px;}
.archiving:after {zoom:0.7;}
.recu_project:after {zoom:0.85;}
.swiper-horizontal>.swiper-scrollbar {width:95% !important;left:2.5% !important;}
h2 {font-size:30px;}
.archiving .cate div a h3 {font-size:30px;}
.arch_box:after {zoom:0.85;}
}



@media all and (max-width:1023px) {
h2 {font-size:24px;}
.main_visual .main_txt_box h2 {font-size:26px;}
.main_visual .main_txt_box p {font-size:15px;margin:20px 0;}
.main_visual .main_txt_box span {font-size:15px;line-height:1.2em;}
.recu_project:after {zoom:0.75;}
.recu_project:before {zoom:0.75;}
.main_tt_box span.more a {font-size:15px;}
.recu_project h3 {font-size:18px;}
.recu_project span.cate {font-size:14px;}
.recu_project .date {font-size:15px;}
.community .comm_notice ul {flex-wrap:wrap;}
.community .comm_notice ul li {width:calc(50% - 20px);flex:auto;}
.community .comm_notice ul li h3 a {font-size:18px;}
.community .comm_notice ul li span {font-size:15px;}
.community .comm_news ul li h3 a {font-size:18px;}
.community .comm_news ul li p {font-size:1em;}
.community .comm_news ul li span {font-size:15px;}
.community .comm_news ul li {flex-direction:column;align-items:center;}
.archiving .cate div a h3 {font-size:24px;}
}



@media all and (max-width:820px) {
.community .comm_notice ul {gap:0;}
.community .comm_notice ul li {width:100%;margin-bottom:20px;padding-top:20px;}
.community .comm_notice ul li h3 a {font-size:16px;}
.community .comm_notice ul li h3 {margin-bottom:10px;}
.community .comm_news ul {flex-wrap:wrap;}
.community .comm_news ul li {width:100%;flex:auto;}
.archiving .cate div {flex-basis:100%;}
.archiving .cate div.bg1, .archiving .cate div.bg2, .archiving .cate div.bg3, .archiving .cate div.bg4 {background-size:cover;}
.arch .tit {font-size:13px;}
.arch .num {font-size:20px;}
.community .comm_notice ul, .community .comm_news ul, .archiving .cate {margin-top:30px;}
.archiving .cate {gap:30px;}
.archiving:after {zoom:0.55;}
.arch_box:after {zoom:0.65;}
.main_visual .main_txt_box {border-radius:80px 0 0 0;}
.recu_project {margin:60px 0;}
.recu_project .swiper {padding-bottom:40px !important;}
.recu_project .main_tt_box {margin-bottom:40px;}
.community {padding:60px 0;}
.community .comm_news {margin-top:60px;}
.archiving {padding:60px 0;}
.archiving .cate div {height:200px;border-radius:40px 0 0 0;}
.archiving .cate div a h3 {font-size:20px;}
h2 {font-size:20px;}
.arch .num {font-size:16px;}
.main_tt_box span.more a {font-size:13px;}
.community .comm_news ul li p {font-size:15px;margin-bottom:10px;}
.community .comm_news ul li span {font-size:14px;}
.community .comm_news ul li h3 {margin-bottom:10px;}
.community .comm_news ul li {gap:30px;padding-top:30px;}
.community .comm_news .txt {margin-top:0;}
.recu_project .date {font-size:14px;}
.community .comm_notice ul li span {font-size:14px;}
.recu_project h3 {font-size:16px;}
.recu_project span.cate {font-size:13px;}
}


@media all and (max-width:700px) {
.main_visual .main_txt_box {position:relative;width:100%;height:auto;border-radius:0;}
.main_visual .main_txt_box h2 {font-size:20px;}
.main_visual .main_txt_box p {margin:10px 0;}
}


@media all and (max-width:420px) {
.archiving .cate div {height:130px;border-radius:40px 0 0 0;}
.archiving .cate {gap:20px;}
.archiving .cate div a {padding-left:40px;}
.archiving .main_tt_box {flex-direction:column;align-items:flex-start;}
.archiving .main_tt_box ul {padding-left:2.5%;margin-top:10px;}
.community .comm_notice ul, .community .comm_news ul, .archiving .cate {margin-top:20px;}
.archiving:after {zoom:0.45;}
.arch_box:after {zoom:0.45;right:-20%;top:80px;}
.main_arrow_box {bottom:3%;}
.main_visual .main_txt_box {padding:30px;}
.recu_project .main_tt_box {margin-bottom:30px;}
}