@import url("common.css");
/* 섹션 공통 타이틀 (cate + h3) */
.sec_title {margin: 0 0 30px;}
.sec_title .cate {margin: 0 0 15px;}

/* Visual */
#visual {position: relative; width: 100%; height: var(--vh);}
#visual .visual_in {height: 100%;}
#visual .visual_in .roll {height: 100%; position: relative;}

#visual .visual_in .roll .v_bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: var(--bk000);}
#visual .visual_in .roll .v_bg::before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 24.21%), linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 44.04%), linear-gradient(0deg, rgba(26, 34, 127, 0.05) 0%, rgba(26, 34, 127, 0.05) 100%);}
#visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.1); transition: transform 3s ease; opacity: 0.8;}
#visual .visual_in .roll .v_bg .bg.bg_mo {display: none;}

#visual .visual_in .roll .v_txt {position: absolute; z-index: 3; left: 50%; bottom: 145px; transform: translateX(-50%);}
#visual .visual_in .roll .v_txt h2 {font-weight: 200; margin: 0 0 30px; text-wrap: balance;}
#visual .visual_in .roll .v_txt h2 b {line-height:inherit; font-weight: 700;}

#visual .v_txt > * {transform: translateY(100px); opacity: 0; transition: all 1.5s ease;}
#visual .v_txt h2 {transition-delay: 0.3s;}
#visual .v_txt p {transition-delay: 0.6s;}

#visual .slick-slide.action .v_bg .bg {transform: scale(1);}
#visual .slick-slide.action .v_txt > * {transform: translateY(0); opacity: 1;}

#visual .visual_bottom {position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; justify-content: space-between; z-index: 1000;}

#visual .visual_bottom .visual_util_in {display: flex; align-items: center; gap: 15px; position: relative; padding: 0 40px;}
#visual .visual_bottom .visual_util_in .visual_arrows {position: absolute; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; height: 100%;}

#visual .visual_bottom .visual_util_in .visual_arrows button {display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; opacity: 0.5; transition: opacity 0.3s;}
#visual .visual_bottom .visual_util_in .visual_arrows button:hover {opacity: 1;}

#visual .visual_bottom .visual_util_in .visual_arrows .visual_prev::before {content: "\e5cb"; font-size: 24px;}
#visual .visual_bottom .visual_util_in .visual_arrows .visual_next::before {content: "\e5cc"; font-size: 24px;}

#visual .visual_bottom .visual_util_in .visual_number {display: flex; align-items: center; gap: 15px; position: relative;}

#visual .scr_down {display: flex; gap: 3px; color: var(--white);}
#visual .scr_down:hover {opacity: .5;}
#visual .scr_down .scr_arrow {position: relative; width: 22px; overflow: hidden; flex-shrink: 0;}
#visual .scr_down .scr_arrow::before {content: "\eac9"; font-size: 22px; line-height: 1; display: block; animation: scr_arrow_down 2s ease-in-out infinite;}
#visual .scr_down .scr_mouse {display: flex;}

@keyframes scr_arrow_down {
    0% {transform: rotate(90deg) translateX(-35px); opacity: 0;}
    30% {transform: rotate(90deg) translateX(0); opacity: 1;}
    50% {transform: rotate(90deg) translateX(0); opacity: 1;}
    80% {transform: rotate(90deg) translateX(35px); opacity: 0;}
    100% {transform: rotate(90deg) translateX(35px); opacity: 0;}
}


/* About */
#about {overflow: hidden;}
#about .about_in {display: flex; align-items: center; gap: 60px;}
#about .about_img {display: flex; flex-shrink: 0; width: 50%; max-width: 795px;}
#about .about_img img {width: 100%; height: auto;}
#about .about_txt {flex: 1; min-width: 0;}
#about .about_txt .desc {margin: 0 0 50px;}


/* Service */
#service .service_in {display: flex; align-items: flex-start; gap: 30px;}
#service .sec_title {position: sticky; top: 140px; flex: 1; margin-bottom: 0;}
#service .bann_list {width: 60%; max-width: 916px;}
#service .bann_list li + li {margin-top: 30px;}
#service .bann_list a {display: block; position: relative; overflow: hidden; aspect-ratio: 916 / 611;}
#service .bann_list .img {position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;}
#service .bann_list .img::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.52%, rgba(0, 0, 0, 0.90) 100%);}
#service .bann_list .img img {width: 100%; height: 100%; object-fit: cover; display: block;}
#service .bann_list .txt {position: absolute; left: 0; bottom: 0; z-index: 2; padding: 50px; width: 100%; padding-right: 140px;}
#service .bann_list .txt .num {display: block; margin: 0 0 5px;}
#service .bann_list .icon {position: absolute; right: 50px; bottom: 50px; z-index: 2; width: 60px; aspect-ratio: 1/1; border: 1px solid var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--white); transition: border-color 0.4s ease;}
#service .bann_list .icon::before {content: "\e5c8"; font-size: 30px; position: relative; z-index: 1;}
#service .bann_list .icon::after {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; background-color: var(--main); transform: scale(0); transition: transform 0.4s ease; z-index: 0;}
#service .bann_list a:hover .icon {border-color: var(--main);}
#service .bann_list a:hover .icon::after {transform: scale(1);}


/* Location */
#location {overflow: hidden;}
#location .mapbox .root_daum_roughmap_landing {width:100% !important; height:600px; overflow:hidden;}
#location .mapbox .wrap_map {height:100% !important; width:100%;}
#location .mapbox .root_daum_roughmap .wrap_controllers, #location .mapbox .root_daum_roughmap .cont {display:none;}
#location .mapbox .root_daum_roughmap_landing .map_border {display:none;}

#location .location_in {display: flex; align-items: center; gap: 60px; position: relative;}
#location .map_area {width: 60%; max-width: 914px; flex-shrink: 0;}
#location .mapbox {width: 100%; height: 600px; border: 1px solid var(--border);}
#location .location_txt {flex: 1; position: relative; z-index: 1;}
#location .info_list {margin: 0 0 50px;}
#location .info_list li {display: flex; align-items: flex-start; gap: 8px;}
#location .info_list li + li {margin-top: 7px;}
#location .info_list .icon {flex-shrink: 0; height: calc(1em * 166.667 / 100); font-size: 1rem; display: flex; align-items: center; justify-content: center;}
#location .info_list .icon::before {font-size: 24px; line-height: 1;}
#location .info_list .info_addr .icon::before {content: "\e0c8";}
#location .info_list .info_email .icon::before {content: "\e158";}
#location .map_btn {display: flex; gap: 4px;}
#location .map_btn a {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 0; padding: 13px 30px; border-radius: 9999px; border: 1px solid; box-sizing: border-box; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
#location .map_btn a > span:not(.map_btn_img) {white-space: nowrap;}
#location .map_btn .map_btn_img {display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;}
#location .map_btn .map_btn_img img {display: block; transition: opacity 0.3s ease;}
#location .map_btn .map_btn_img img:last-child {opacity: 0; position: absolute; left: 0; top: 0;}
#location .map_btn a:hover .map_btn_img img:first-child {opacity: 0;}
#location .map_btn a:hover .map_btn_img img:last-child {opacity: 1;}
#location .map_btn a.naver {background-color: #10D265; border-color: #10D265; color: var(--white);}
#location .map_btn a.kakao {background-color: #FEDA0D; border-color: #FEDA0D; color: var(--black);}
#location .map_btn a.naver:hover {background-color: var(--white); color: #10D265;}
#location .map_btn a.kakao:hover {background-color: var(--black); color: #FEDA0D; border-color: var(--black);}


/*******************************************************************************
    @media 1766px
*******************************************************************************/
@media all and (max-width:1766px){
}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* location */
#location br {display: none;}
}

/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* about */
#about br {display: none;}

/* service */
#service .bann_list .txt {padding: 30px; padding-right: 110px;}
#service .bann_list .icon {bottom: 30px; right: 30px; width: 50px;}
#service .bann_list .icon::before {font-size: 24px;}

/* location */
#location .location_in {gap: 45px;}
#location .mapbox,
#location .mapbox .root_daum_roughmap_landing {height: 500px;}
#location .map_btn a {padding: 10px 20px;}
}

/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* 섹션 공통 타이틀 */
.sec_title {margin-bottom: 20px;}
.sec_title .cate {margin-bottom: 5px;}

/* visual */
#visual .visual_in .roll .v_txt h2 {margin-bottom: 20px;}

#visual .visual_bottom {bottom: 40px;}
#visual .visual_bottom .visual_util_in {padding: 0 35px;}
#visual .visual_bottom .visual_util_in .visual_number {gap: 12px;}
#visual .visual_bottom .visual_util_in .visual_arrows .visual_next::before,
#visual .visual_bottom .visual_util_in .visual_arrows .visual_prev::before{font-size: 22px;}
#visual .scr_down .scr_mouse img {width: 20px;}
#visual .scr_down .scr_arrow {width: 18px;}
#visual .scr_down .scr_arrow::before {font-size: 18px;}

@keyframes scr_arrow_down {
    0% {transform: rotate(90deg) translateX(-28px); opacity: 0;}
    30% {transform: rotate(90deg) translateX(0); opacity: 1;}
    50% {transform: rotate(90deg) translateX(0); opacity: 1;}
    80% {transform: rotate(90deg) translateX(28px); opacity: 0;}
    100% {transform: rotate(90deg) translateX(28px); opacity: 0;}
}

/* about */
#about .about_in {align-items: flex-start; gap: 45px;}
#about .about_txt .desc {margin-bottom: 30px; line-height: 160%;}

/* location */
#location .location_in {flex-direction: column; align-items: stretch; gap: 40px;}
#location .map_area {width: 100%; max-width: 100%;}
#location .mapbox,
#location .mapbox .root_daum_roughmap_landing {height: 400px;}
#location .info_list {margin-bottom: 30px;}
#location .info_list .icon::before {font-size: 20px;}
}

/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* service */
#service .service_in {flex-wrap: wrap;}
#service .sec_title {width: 100%; max-width: 100%; flex: initial; position: static;}
#service .sec_title br {display: none;}
#service .bann_list {width: 100%; max-width: 100%;}
#service .bann_list li + li {margin-top: 15px;}
}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* visual */
#visual br {display: none;}
#visual .visual_in .roll .v_bg .bg {opacity: 0.7;}
#visual .visual_in .roll .v_bg:has(.bg_mo) .bg:not(.bg_mo) {display: none;}
#visual .visual_in .roll .v_bg .bg.bg_mo {display: block;}

#visual .visual_in .roll .v_txt {bottom: auto; top: 50%; transform: translateX(-50%) translateY(-50%); text-align: center;}
#visual .visual_in .roll .v_txt h2 {margin-bottom: 10px;}

/* about */
#about .about_in {flex-wrap: wrap; gap: 30px;}
#about .about_img,
#about .about_txt {width: 100%; max-width: 100%; flex: initial;}

/* service */
#service .bann_list .txt {padding: 25px 20px; padding-right: 80px;}
#service .bann_list li + li {margin-top: 10px;}
#service .bann_list .icon {bottom: 25px; right: 20px; width: 40px;}
#service .bann_list .icon::before {font-size: 20px;}

/* location */
#location .location_in {gap: 30px;}
#location .mapbox,
#location .mapbox .root_daum_roughmap_landing {height: 280px;}
#location .info_list {margin-bottom: 25px;}
#location .info_list li {gap: 5px;}
#location .info_list li + li {margin-top: 5px;}
#location .info_list .icon::before {font-size: 18px;}
#location .map_btn {width: 100%;}
#location .map_btn li {width: 50%;}
#location .map_btn a {gap: 8px; padding: 8px;}
}