@import url("common.css");
/* 공통 */
.wrapper {overflow: visible;}

.section_tit {margin-bottom: 60px;}
.section_tit h2 {font-size: 4.445rem; line-height: 105%; font-weight: 900; margin: 0 0 20px;}
.section_tit .subtit_box {display: flex; flex-direction: column; gap: 5px; justify-content: center;}

.cate_tab{margin: 0 auto 40px; overflow: visible;}
.cate_tab ul {width: fit-content; margin: 0 auto; display: flex;}
.cate_tab ul li{width: auto; margin: 0 7px 0 0;}
.cate_tab ul li button,
.cate_tab ul li a{display: block; border-radius:9999px; box-sizing:border-box; padding: 12px 24px; text-align:center; border:1px solid var(--border); transition:all .3s; color: var(--light); -webkit-user-drag: none; user-drag: none;}
.cate_tab ul li button:hover,
.cate_tab ul li a:hover{color:var(--main); border-color:var(--main);}
.cate_tab ul li.hover button,
.cate_tab ul li.hover a{background:var(--main) !important; border-color:var(--main) !important; color:var(--white) !important; font-weight: 600;}

/* Visual */
#visual{width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg::before {content: ''; position: absolute; left: 0; top:0; width: 100%; height: 100%; opacity: 0.3; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 15%, rgba(0, 0, 0, 0.20) 70%, #000 100%); z-index: 1;}
#visual .visual_in .roll .v_bg::after {content: ''; position: absolute; left: 0; top:0; width: 100%; height: 100%; opacity: 0.5; background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); z-index: 2;}

#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%;}

#visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.1); transition: transform 3s ease;}

#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000;}

#visual .visual_in .roll h2 {font-size: 4.111rem; line-height: 102.702%; color: var(--white); font-weight: 900;}

#visual .scroll_down {position: absolute; right: 50px; top: 50%; transform: translateY(-50%); z-index: 1000; width: 3px; height: 120px; background: rgba(255, 255, 255, 0.2); overflow: hidden;}
#visual .scroll_down::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 30px; background: var(--white); transform: translateY(-100%); animation: scrollDown 1.2s linear infinite;}

#visual .slick-dots {position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; gap: 24px; font-size: 0; align-items: center;}
#visual .slick-dots button {font-size: 0; width: 12px; height: 12px; display: flex; border: 1px solid var(--white); border-radius: 50%; align-items: center; justify-content: center; transition: all 0.3s ease; opacity: 0.3; border-color: transparent;}
#visual .slick-dots button::after {content: ""; display: flex; width: 10px; height: 10px; background: var(--white); border-radius: 50%; transition: all 0.3s ease;}
#visual .slick-dots button:hover {opacity: 1;}
#visual .slick-dots .slick-active button {opacity: 1; border-color: var(--white); width: 22px; height: 22px;}
#visual .slick-dots .slick-active button::after {width: 6px; height: 6px;}

@keyframes scrollDown {
    0% {transform: translateY(-100%);}
    20% {transform: translateY(0);}
    40% {transform: translateY(0);}
    100% {transform: translateY(400%);}
}



/* 버전 1 */
#visual .visual_in .roll.ver1 .v_txt h2,
#visual .visual_in .roll.ver1 .v_txt p {transform: translateY(100px); opacity: 0; transition: all 1s ease;}

#visual .visual_in .roll.action.ver1 .v_txt h2,
#visual .visual_in .roll.action.ver1 .v_txt p {transform: translateY(0); opacity: 1;}

#visual .visual_in .roll.ver1 .v_txt p:first-of-type {transition-delay: 0.3s;}
#visual .visual_in .roll.ver1 .v_txt p:last-of-type {transition-delay: 0.6s;}

#visual .visual_in .roll.ver1 .v_txt p.subtit {font-size: 1.444rem; line-height: 146.153%; letter-spacing: -0.04em; font-weight: 600; margin: 15px 0;}
#visual .visual_in .roll.ver1 .v_txt p {font-size: 1.111rem; line-height: 170%; letter-spacing: -0.04em;}

/* 버전 2 */
#visual .visual_in .roll.ver2 .v_txt {display: flex; align-items: center; gap: 70px;}
#visual .visual_in .roll.ver2 .v_txt_img {width: 50%; max-width: 695px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; transform: translateX(-100px); opacity: 0; transition: all 1s ease;}
#visual .visual_in .roll.ver2 .v_txt img {max-width: 100%; filter: drop-shadow(30px 30px 70px rgba(0, 0, 0, 0.18));}
#visual .visual_in .roll.ver2 .v_txt_wrap {transform: translateX(100px); opacity: 0; transition: all 1s ease;}
#visual .visual_in .roll.ver2 .v_txt ul {display: flex; flex-direction: column; gap: 4px; margin: 25px 0 0;}
#visual .visual_in .roll.ver2 .v_txt ul li {font-size: 1.111rem; line-height: 170%; letter-spacing: -0.04em; display: flex; gap: 8px; color: var(--basicW);}
#visual .visual_in .roll.ver2 .v_txt ul li::before {font-size: 20px; content: "\ef76"; color: var(--white); font-variation-settings: 'FILL'1; line-height: 34px; font-family: var(--icon); font-weight: 400;}
#visual .visual_in .roll.ver2 .v_txt p.subtit {font-size: 1.444rem; line-height: 146.153%; letter-spacing: -0.04em; margin: 25px 0 0; font-weight: 300;}

#visual .visual_in .roll.ver2 .v_txt p.subtit b {font-weight: 600;}

#visual .visual_in .roll.action.ver2 .v_txt_img,
#visual .visual_in .roll.action.ver2 .v_txt_wrap {transform: translateX(0); opacity: 1;}

/* PRODUCTS */
#products {overflow: hidden;}
#products .products_swiper_cont {display: none;}
#products .products_swiper_cont.is_active {display: block;}
#products .product_swiper {overflow: visible;}
#products .products_card {padding: 20px 20px 45px 20px; background: var(--grayBg); border-radius: 30px; display: block; border: 1px solid transparent;}
#products .products_card .imgbox {aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; max-width: 320px; margin: 0 auto 20px;}
#products .products_card .imgbox img {max-width: 100%; max-height: 100%; object-fit: cover;}
#products .products_card .txtbox {text-align: center;}
#products .products_card .txtbox .catname {margin: 0 0 4px; color: rgba(16, 16, 16, 0.5);}
#products .products_card .txtbox .prdname {transition:all .3s ease;}

#products .products_card:hover {background: var(--white); border-color: var(--main); box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.06);}
#products .products_card:hover .txtbox .prdname {color: var(--main);}

#products .product_util {margin-top: 60px; display: flex; align-items: center; gap: 50px;}
#products .product_progress {flex: 1; height: 3px; background: rgba(16, 16, 16, 0.07); border-radius: 9999px; overflow: hidden;}
#products .product_progress_bar {display: block; width: 0; height: 100%; background: var(--main); border-radius: 9999px; transition: width 0.5s ease;}
#products .product_pager {display: flex; align-items: center; flex-shrink: 0;}
#products .product_pager .current {font-weight: 900; color: var(--black);}
#products .product_pager .sep {color: var(--light); margin: 0 3px 0 8px;}
#products .product_pager .total {color: var(--light)}
#products .product_nav {display: flex; align-items: center; gap: 4px; flex-shrink: 0;}
#products .product_nav button {display: flex; width: 55px; height: 55px; border: 1px solid var(--border); border-radius: 50%; align-items: center; justify-content: center; background: var(--white); transition: all 0.3s ease; color: var(--black);}
#products .product_nav button::before {font-size: 28px; font-variation-settings: 'wght' 300;}
#products .product_nav .product_prev::before {content: '\ef7d';}
#products .product_nav .product_next::before {content: '\e941';}
#products .product_nav button:hover {border-color: var(--main);}
#products .product_nav button:hover::before {color: var(--main);}
#products .product_nav button.swiper-button-disabled {opacity: 0.35; pointer-events: none;}

/* About */
#about {position: relative; overflow: hidden;}
#about::before {content: ''; width: 50%; max-width: 715px; height: 100%; position: absolute; right: 0; top: 0; background: var(--main);} 
#about::after {content: ''; width: 718px; aspect-ratio: 718 / 507; background: url('/img/about_ci.svg'); position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%);}
#about .about_in {display: flex; align-items: center;}
#about .imgbox {flex-shrink: 0; width: 65%; flex-shrink: 0; max-width: 1200px; aspect-ratio: 1204/678; z-index: 2; overflow: hidden; border-radius: 30px 0 0 30px; box-shadow: -30px 0 30px 0 rgba(0, 0, 0, 0.08);}
#about .imgbox .jarallax {width: 100%; height: 100%;}
#about .txtbox {flex: 1; padding: 0 50px 0 calc((100% - 1530px) / 2); z-index: 2; position: relative;}

/* Notice */
#notice li:first-child .notice_card {border-top: 1px solid var(--border);}
#notice .notice_card {padding: 30px 20px 30px 30px; display: flex; align-items: center; border-bottom: 1px solid var(--border);}
#notice .notice_card .imgbox {width: 260px; flex-shrink: 0; aspect-ratio: 1/1; border-radius: 30px; overflow: hidden; margin-right: 50px;}
#notice .notice_card .imgbox img {width: 100%; height: 100%; object-fit: cover;}
#notice .notice_card .txtbox {flex: 1; padding-right: 130px;}
#notice .notice_card .txtbox .date {margin: 0 0 10px; display: flex; color: var(--light); letter-spacing: 0; align-items: center; gap: 5px;}
#notice .notice_card .txtbox .date::before {content: '\ebcc'; font-size: 20px;}
#notice .notice_card .txtbox h3 {margin: 0 0 20px; transition: all 0.3s ease;}
#notice .notice_card .notice_card_icon {display: flex; width: 58px; aspect-ratio: 1/1; border: 1px solid var(--main); align-items: center; justify-content: center; border-radius: 50%; position: relative; z-index: 2; overflow: hidden; transition: all 0.3s ease;}
#notice .notice_card .notice_card_icon::before {content: '\e315'; font-size: 28px; position: relative; z-index: 2;}
#notice .notice_card .notice_card_icon::after {position: absolute; right: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(90deg, #92C83E 0%, #2360A1 100%); content: ''; transform: translateX(-100%); transition: all 0.3s ease;}

#notice .notice_card:hover {background: var(--grayBg); padding: 30px 40px 30px 50px;}
#notice .notice_card:hover h3 {color: var(--main);}
#notice .notice_card:hover .notice_card_icon {border-color: transparent; color: var(--white);}
#notice .notice_card:hover .notice_card_icon::after {transform: translateX(0);}

/* Direction */
#direction .location_cont_list {position: relative;}
#direction .location_cont_list li {position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none;}
#direction .location_cont_list li.is_active {position: relative; opacity: 1; visibility: visible; pointer-events: auto; z-index: 2;}
#direction .location_cont_list li address {padding: 15px 30px; display: flex; gap: 6px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.09); border-radius: 9999px; backdrop-filter: blur(10px); position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 10; max-width: calc(100% - 10px); white-space: nowrap;}
#direction .location_cont_list li address::before {content: '\e0c8'; font-size: 24px; line-height: 32px;}
#direction .location_cont_list li .mapbox .root_daum_roughmap_landing {width:100% !important; height:560px; overflow:hidden;}
#direction .location_cont_list li .mapbox .wrap_map {height:100% !important; width: 100%;}
#direction .location_cont_list li .mapbox .root_daum_roughmap .wrap_controllers, .location-content figure .root_daum_roughmap .cont {display:none;} 
#direction .location_cont_list li .mapbox .root_daum_roughmap_landing .map_border {display:none;}

/* Inquiry */
#inquiry {background: url('/img/inquiry_bg.jpg') center / cover no-repeat;}
#inquiry .inquiry_in {display: flex; gap: 30px; align-items: flex-start;}
#inquiry .txtbox {width: 40%; max-width: 620px; position: sticky; top: 30px;}
#inquiry .txtbox .section_tit {margin-bottom: 40px;}
#inquiry .txtbox .inquiry_call {display: flex; gap: 5px; align-items: center; margin-bottom: 20px;}
#inquiry .txtbox .inquiry_call dt {display: flex;}
#inquiry .txtbox .inquiry_call dt::before {font-size: 30px; content: '\e0b0'; color: var(--white);}
#inquiry .txtbox .inquiry_call dd {font-size: 2rem; line-height: 138.889%; font-weight: 900;}
#inquiry .txtbox .inquiry_logo {display: flex; justify-content: center;}
#inquiry .txtbox .inquiry_logo img {max-width: 100%;}

#inquiry .formbox {flex: 1;}

/*******************************************************************************
    @media ~1700px
*******************************************************************************/
@media all and (max-width:1700px){
#about .txtbox {padding-left: 5%;}
#about .txtbox br {display: none;}
}

/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* Visual */
#visual .visual_in .roll br {display: none;}

/* 버전 3 */
#visual .visual_in .roll.ver3 .v_txt h2 br {display: block;}

/* Notice */
#notice .notice_card .txtbox {padding-right: 80px;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 공통 */
.section_tit h2 {font-size: 3.5rem;}
    
/* Visual */
#visual .visual_in .roll h2 {font-size: 3.2rem;}

#visual .scroll_down {right: 2%;}

/* 버전 1 */
#visual .visual_in .roll.ver1 .v_txt p.subtit {font-size: 1.2rem;}

/* 버전 2 */
#visual .visual_in .roll.ver2 .v_txt {gap: 50px;}
#visual .visual_in .roll.ver2 .v_txt_img {width: 45%;}
#visual .visual_in .roll.ver2 .v_txt p.subtit {font-size: 1.2rem;}

/* Product */
#products .product_util {gap: 30px;}

/* About */
#about .about_in {align-items: flex-start;}

/* Notice */
#notice .notice_card .imgbox {margin-right: 35px; width: 200px;}
#notice .notice_card .txtbox {padding-right: 50px;}

/* Iqnuiry */
#inquiry .txtbox br {display: none;}
}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.section_tit {margin-bottom: 40px;}
.section_tit h2 {font-size: 3.2rem;}

.cate_tab ul li button,
.cate_tab ul li a {padding: 8px 20px;}

/* Visual */
#visual .visual_in .roll h2 {font-size: 2.9rem;}

#visual .scroll_down {display: none;}

/* 버전 1 */
#visual .visual_in .roll.ver1 .v_txt p.subtit {margin: 10px 0;}

/* 버전 2 */
#visual .visual_in .roll.ver2 .v_txt {gap: 30px;}
#visual .visual_in .roll.ver2 .v_txt ul {margin: 15px 0 0; gap: 2px;}
#visual .visual_in .roll.ver2 .v_txt ul li {gap: 6px;}
#visual .visual_in .roll.ver2 .v_txt ul li::before {line-height: 30px;}

/* PRODUCTS */
#products .products_card {padding: 15px 15px 35px 15px;}

#products .product_util {margin-top: 30px;}
#products .product_nav button {width: 45px; height: 45px;}
#products .product_nav button::before {font-size: 22px;}

/* About */
#about::after {display: none;}
#about::before {display: none;}
#about .about_in {flex-direction: column; gap: 30px;}

#about .txtbox {width: 90%; padding: 0; margin: 0 auto;}
#about .txtbox::after {content: ''; width: 40%; aspect-ratio: 718 / 507; background: url('/img/about_ci.svg') center / cover no-repeat; display: block; position: relative; z-index: 2; margin-left: auto; margin-top: -37px;}
#about .imgbox { border-radius: 0; position: relative; padding: 0 5%; width: 100%; overflow: visible; box-shadow: none;}
#about .imgbox .jarallax {border-radius: 15px; box-shadow: -30px 0 30px 0 rgba(0, 0, 0, 0.08); overflow: hidden;}
#about .imgbox::before {content: ''; width: 100%; height: 75%; background: var(--main); position: absolute; left: 0; bottom: -100px;}

/* Notice */
#notice .notice_card {padding: 20px 15px 20px 20px;}
#notice .notice_card .imgbox {width: 180px; border-radius: 15px; margin-right: 25px;}
#notice .notice_card .txtbox {padding-right: 30px;}
#notice .notice_card .txtbox .date {margin: 0 0 5px;}
#notice .notice_card .txtbox .date::before {font-size: 18px;}
#notice .notice_card .txtbox h3 {margin: 0 0 10px;}
#notice .notice_card .notice_card_icon {width: 50px;}
#notice .notice_card .notice_card_icon::before {font-size: 24px;}

#notice .notice_card:hover {background: var(--grayBg); padding: 20px 30px 20px 40px;}

/* Direction */
#direction .location_cont_list li address {padding: 10px 20px; bottom: 30px;}
#direction .location_cont_list li address::before {line-height: 29px; font-size: 20px;}

/* Inquiry */
#inquiry .inquiry_in {gap: 20px; flex-direction: column;}
#inquiry .txtbox {position: static; width: 100%; max-width: 100%;}
#inquiry .txtbox .section_tit {margin-bottom: 20px;}
#inquiry .txtbox .inquiry_call dd {font-size: 1.7rem;}
#inquiry .txtbox .inquiry_call dt::before {font-size: 26px;}

#inquiry .txtbox .inquiry_logo {justify-content: flex-end;}
#inquiry .txtbox .inquiry_logo img {width: 116px;}

#inquiry .formbox {flex:auto; width: 100%;}

/* Direction */
#direction .location_cont_list li .mapbox .root_daum_roughmap_landing {height: 400px;}
}

/*******************************************************************************
    @media ~768px
*******************************************************************************/
@media all and (max-width:768px){
/* Visual */
#visual .visual_in .roll.ver2 .v_txt {flex-direction: column; align-items: center;}

#visual .visual_in .roll.ver2 .v_txt_img {width: 100%;}
#visual .visual_in .roll.ver2 .v_txt_wrap {width: 100%;}

}

/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.section_tit {margin-bottom: 30px;}
.section_tit h2 {margin: 0 0 10px;}
    
/* Visual */

/* 버전 2 */
#visual .visual_in .roll.ver2 .v_txt ul li::before {line-height: 26px; font-size: 16px;}

/* PRODUCTS */
#products .products_card {padding: 10px 10px 25px 10px; border-radius: 20px;}

#products .product_nav button {width: 40px; height: 40px;}
#products .product_nav button::before {font-size: 20px;}

/* Notice */
#notice .notice_card {flex-direction: column; gap: 30px;}

#notice .notice_card .notice_card_icon {display: none;}
#notice .notice_card .imgbox {width: 100%; border-radius: 10px; margin-right: 0;}
#notice .notice_card .txtbox .date::before {font-size: 16px;}

/* Direction */
#direction .location_cont_list li .mapbox .root_daum_roughmap_landing {height: 280px;}
#direction .location_cont_list li address {gap: 3px;}
#direction .location_cont_list li address::before {line-height: 24px; font-size: 18px;}
}

/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
/* Direction */
#direction .location_cont_list li address {white-space: normal; flex-direction: column; width: 100%; align-items: center; text-align: center;}
#direction .location_cont_list li address::before {line-height: 1;}
}

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