@import url("common.css");
/* 공통 */
.tit_wrap h2 {color: var(--black); text-align: center; font-family: var(--eng); font-size: 2.25rem; font-weight: 300; line-height: 133.333%; letter-spacing: 0.45px; text-transform: uppercase;}
.tit_wrap p.fs22 {text-align:center; font-weight:600; color:var(--black);}
.tit_wrap .dots {display:flex; gap:5px; justify-content:center}
.tit_wrap .dots span {background:var(--main); aspect-ratio:1/1; width:4px; border-radius:50%}

.marb40 {margin-bottom:40px}
.marb45 {margin-bottom:45px}
.marb50 {margin-bottom:50px}
.marb55 {margin-bottom:55px}

/* Visual */
#visual {width:100%; height:var(--vh); position:relative}
#visual .visual_in {position:relative; width:100%; height:100%}
#visual .roll {width:100%; height:var(--vh);}
#visual .roll .v_in {position:Absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:10; max-width:1590px; height:100%;}
#visual .roll .v_in .v_in_flex {display:flex; align-items:center; position:absolute; left:0; bottom:38px}
#visual .roll .v_in .v_txt {display:flex; gap:10px; align-items:center; transform:translateY(60px); opacity:0; transition:all .6s 0.3s linear;}
#visual .roll .v_in .v_txt span.cat {color:var(--white); opacity:0.7}
#visual .roll .v_in .v_txt .roll_tit {color:var(--white); font-weight:600;}

#visual .roll .v_in .scroll_down {display:flex; align-items:center; gap:17px; position:absolute; right:0; top:50%; transform:translate(40%, -50%) rotate(-90deg); flex-direction:row-reverse;}
#visual .roll .v_in .scroll_down .txt {color: var(--white); font-size: 15px; line-height: 133.333%; letter-spacing: 0.75px; text-transform: uppercase;}
#visual .roll .v_in .scroll_down .bar {width:50px; height:1px; background:rgba(255,255,255,0.3); display:block; position:relative}
#visual .roll .v_in .scroll_down .bar .active {position:absolute; top:0; left:0; width:100%; height:100%; background:var(--white); transform-origin:left; transform:scaleX(0)}

@keyframes bar_active {
0%{transform:scaleX(0)}
100%{transform:scaleX(1)}
}

#visual .roll .v_bg {width:100%; height:100%; position:absolute; top:0; left:0; background-size:cover; background-position:center; background-repeat:no-repeat; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .roll .v_bg.v_bg_m {display:none}

#visual .roll.action .v_in .v_txt {transform:translateY(0); opacity:1;}
#visual .roll.action .v_in .scroll_down .bar .active {animation:bar_active 6s linear;}
#visual .roll.action .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}


#visual .slick_pagination_wrap {display:flex; position:absolute; padding:3px 0; bottom:38px; left:50%; transform:translateX(-50%); z-index:99999; max-width:1590px; justify-content:flex-end; align-items:center; gap:15px}

#visual .slick_pagination_wrap .my-dots .slick-dots {display:flex; gap:12px;}
#visual .slick_pagination_wrap .my-dots button {font-size:0; border:0; background:rgba(255,255,255,0.3); width:10px; aspect-ratio:1/1; display:flex; border-radius:50%; cursor:pointer; padding:0; margin:0;}
#visual .slick_pagination_wrap .my-dots .slick-active button {background:var(--main);}


#visual .slick_btn_wrap {display:flex; gap:10px; position:relative;}
#visual .slick_btn_wrap .slick_btn {display:flex; align-items:center; justify-content:center; cursor:pointer}
#visual .slick_btn_wrap .slick_btn::before {content:"\e5e1"; font-family:var(--icon); font-size:30px; line-height:1; font-weight:200; color:var(--white);}
#visual .slick_btn_wrap .slick_btn.prev {transform:rotate(180deg) translateY(1px)}
/* #visual .slick_btn_wrap .slick_btn.prev::before {content:"\e5e0";} */



/* Project */
#project {padding-top:180px}
#project .project_header {position:relative;}
#project .project_header .tit_wrap h2 {margin-bottom:15px}
#project .project_header .tit_btn_container {position:relative;}

#project .swiper_btn_wrap {position:absolute;display:flex; justify-content:space-between; width:100%; left:0; top:17px}
#project .swiper_btn_wrap .swiper_btn {display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.3; transition:all 0.3s linear}
#project .swiper_btn_wrap .swiper_btn::before {content:"\e5e1"; font-family:var(--icon); font-size:45px; line-height:1; font-weight:200; color:var(--black); opacity:0.8}
#project .swiper_btn_wrap .swiper_btn.prev {transform:rotate(180deg)}

#project .swiper_btn_wrap .swiper_btn:hover {opacity:1}

#project .project_list a {display:flex; aspect-ratio:480 / 335; background-size:cover; background-position:center; background-repeat:no-repeat; padding:18px 20px; align-items:flex-end; color:var(--white);}
#project .project_list a > .fs18 {transition:inherit}
#project .project_list a .back {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; opacity:0; transition:inherit; padding:15px}
#project .project_list a .back > * {position:relative; z-index:2}
#project .project_list a .back::before {position:absolute; top:0; left:0; width:100%; height:100%; opacity: 0.7; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -58.05%, #000 100%); content:""; z-index:0}
#project .project_list a .back .fs22 {font-weight:600; text-align:center}
#project .project_list a .back i {font-style:normal; display:flex}
#project .project_list a .back i::before {font-family:var(--icon); font-size:24px; line-height:1; content:"\f1df"; font-weight:200}

#project .project_list a:hover .back {opacity:1}
#project .project_list a:hover > p.fs18 {opacity:0}

#project .morebtn_wrap {display:flex; justify-content:center; gap:15px; margin-top:55px}

/* Service */
#service {}
#service .tit_wrap p.fs22 {margin:10px 0 30px; text-wrap:balance}

#service {}
#service .service_list {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:30px}
#service .service_list li a{padding:40px; position:relative; display:block; height:100%}
#service .service_list li a::before {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid var(--border); content:""; transition:inherit}
#service .service_list li a .imgbox {margin-bottom:30px}
#service .service_list li a .imgbox img {width:100%; height:auto}
#service .service_list li a .tbox h3 {font-weight:400; color:var(--black); margin-bottom:5px}
#service .service_list li a .tbox p.fs16 {color:var(--black); opacity:0.6}

#service .service_list li a:hover::before {border-color:var(--main);}

/* About */
#about {}
#about .about_in {display:flex; gap:70px; align-items:center; padding:40px; border:1px solid var(--border);}
#about .about_in .imgbox {max-width:635px; width:50%; flex-shrink:0}
#about .about_in .imgbox img {width:100%; height:auto}
#about .about_in .tbox .tit_wrap h2 {text-align:left; margin-bottom:20px;}
#about .about_in .tbox .tit_wrap .dots {justify-content:flex-start; margin-bottom:20px;}
#about .about_in .tbox .fs18 {color:var(--black); white-space:nowrap}
#about .about_in .tbox .fs18:not(.black_txt) {opacity:0.5; margin-top:5px}

/* Notice */
#notice {}
#notice .tit_wrap h2 {margin-bottom:15px}
#notice .notice_list {display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:30px}
#notice .notice_list li a {display:flex; gap:30px; align-items:center; padding:20px; border:1px solid var(--border); height:100%}
#notice .notice_list li a .imgbox {max-width:250px; width:50%; aspect-ratio:250 / 178; overflow:hidden; flex-shrink:0}
#notice .notice_list li a .imgbox img {width:100%; height:100%; display:block; object-fit:cover; transition:all 0.3s linear}
#notice .notice_list li a .tbox .cat {display:block; color:var(--main);}
#notice .notice_list li a .tbox h3 {color:var(--black); margin-bottom:13px; font-weight:400; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow:ellipsis; overflow:hidden;}
#notice .notice_list li a .tbox .date {color: #222; font-size: 16px; line-height: 175%; color:rgba(34,34,34,0.4); display:flex; align-items:center; gap:4px}
#notice .notice_list li a .tbox .date i {font-style:normal; display:flex; color:rgba(34,34,34,0.5)}
#notice .notice_list li a .tbox .date i::before {font-family:var(--icon); font-size:18px; line-height:1; content:"\ebcc"; font-weight:400}

#notice .notice_list li a:hover .imgbox img {transform:scale(1.1)}
#notice .notice_list li a:hover {border-color:var(--main)}

#notice .morebtn_wrap {display:flex; justify-content:center}


/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* Service */
#service .service_list li a .tbox p.fs16 br {display:none}
#service .service_list li a {padding:30px;}

/* About */
#about .about_in .tbox .fs18 br {display:none}
#about .about_in .tbox .fs18 {white-space:wrap}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 공통 */
.marb40 {margin-bottom:30px}

/* Project */
#project .project_list a {padding:15px}
#project .project_list a .back .fs22 {font-size:20px}

/* Service */
#service .service_list li a .imgbox {margin-bottom:20px}
#service .service_list li a {padding:25px;}
#service .service_list {grid-gap:15px}
#service .tit_wrap p.fs22 {margin:5px 0 25px}

/* About */
#about .about_in {gap:40px; padding:25px}
#about .about_in .tbox .tit_wrap h2 {margin-bottom:15px; text-wrap:balance;}
#about .about_in .tbox .tit_wrap .dots {margin-bottom:15px}

/* Notice */
#notice .notice_list {grid-gap:15px}
#notice .notice_list li a {gap:20px; padding:15px}
#notice .notice_list li a .tbox h3 {-webkit-line-clamp:2}
}


/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.tit_wrap h2 {}
.marb45 {margin-bottom:30px}
.marb50 {margin-bottom:30px}
.marb40 {margin-bottom:25px}


/* Visual */
#visual .roll .v_in .v_txt span.cat {font-size:16px; line-height:175%;}
#visual .roll .v_in .v_txt .roll_tit {font-size:20px; line-height:170%;}
#visual .slick_btn_wrap {gap:8px}
#visual .slick_btn_wrap .slick_btn::before {font-size:26px}

/* Project */
#project {padding-top:120px}
#project .project_list a > .fs18 {font-size:15px}
#project .project_list a .back {gap:10px}
#project .project_list a .back .fs22 {font-size:18px}


#project .swiper_btn_wrap {top:50%; transform:translateY(-50%)}
#project .swiper_btn_wrap .swiper_btn::before {font-size:35px}

#project .morebtn_wrap {gap:4px; margin-top:30px}

/* Service */
#service .service_list li a .imgbox {margin-bottom:10px}
#service .service_list li a {padding:20px;}
#service .service_list {grid-gap:10px} 
#service .service_list li a .tbox h3 {font-size:18px; line-height: 200%; letter-spacing: -0.8px; margin-bottom:0}

/* About */
#about .about_in {display:block; border:0; padding:0}
#about .about_in .imgbox {max-width:100%; width:100%; margin-bottom:30px}
#about .about_in .tbox {text-align:center}
#about .about_in .tbox .tit_wrap h2 {text-align:center}
#about .about_in .tbox .tit_wrap .dots {justify-content:center}
#about .about_in .tbox .fs18.black_txt {font-size:16px; line-height: 175%; letter-spacing: -0.48px;}
#about .about_in .tbox .morebtn {margin:0 auto}

/* Notice */
#notice .tit_wrap {margin-bottom:40px}
#notice .notice_list {grid-template-columns: repeat(1, 1fr); margin-bottom:30px; grid-gap:10px}
#notice .notice_list li a .tbox h3 {font-size:15px;}
#notice .notice_list li a .tbox .date {font-size:14px; line-height:24px}
#notice .notice_list li a .tbox .date i::before {font-size:16px;}
}
/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* Service */
#service .service_list {grid-template-columns:repeat(1,1fr);}
#service .service_list li a .tbox h3 {font-size:16px}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.tit_wrap h2 {font-size: 30px; line-height: 140%; letter-spacing: 0.3px;}

/* Visual */
#visual .roll .v_in .v_in_flex {bottom:69px}
#visual .roll .v_in .v_txt {display:block}
#visual .roll .v_bg.v_bg_m {display:block}

#visual .slick_pagination_wrap {justify-content:flex-start; bottom:35px}
#visual .slick_btn_wrap .slick_btn::before {font-size:24px;}
#visual .slick_btn_wrap .slick_btn.prev {transform:rotate(180deg) translateY(-1px)}

/* Project */
#project {padding-top:80px}
#project .tit_wrap h2 {padding:0 40px}
#project .project_list li.swiper-slide {width:calc(100% - 50px); transform:translateX(25px)}
#visual .slick_btn_wrap {top:0}
#project .swiper_btn_wrap .swiper_btn::before {font-size:30px}

/* Notice */
#notice .notice_list {margin-bottom:5px; grid-gap:5px}
#notice .notice_list li a .imgbox {display:none}
#notice .notice_list li a .tbox {display:flex; align-items:center; width:100%}
#notice .notice_list li a .tbox .cat {margin-right:8px}
#notice .notice_list li a .tbox h3 {margin-bottom:0; flex:1; font-size:14px; -webkit-line-clamp: 1}
#notice .notice_list li a .tbox .date i::before {font-size:14px}
}

/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){
#project .morebtn_wrap {flex-direction:column; align-items:center}
}