@import url("common.css");
.container {overflow: hidden;}

/* Visual */
#visual {position: relative; width: 95%; overflow: hidden; height: 840px; margin-top: 110px; max-width: 1820px; margin-left: auto; margin-right: auto; border-radius: 30px; overflow: hidden;}
#visual .visual_in {position: relative; width: 100%; height: 100%;}
#visual .visual_in .roll {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: right 0 center; background-repeat: no-repeat; transform: scale(1.1); transition:all 3s ease;}
#visual .visual_in .roll .v_bg .bg_mo {display: none;}

#visual .visual_in .roll .v_txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999;}
#visual .visual_in .roll .v_txt h3 {margin-bottom: 20px; transform: translateY(100px); opacity: 0; transition:all 1s ease; transition-delay: 0.3s;}
#visual .visual_in .roll .v_txt h3 b {font-weight: 800; line-height: inherit; letter-spacing: inherit;}
#visual .visual_in .roll .v_txt .fs20_wrap {transform: translateY(100px); opacity: 0; transition:all 1s ease; transition-delay: 0.5s;}

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


#visual .visual_util {position: absolute; bottom: 100px; left: 50%; z-index: 1000; transform: translate(-50%, 0); animation: fadeIn 1s ease forwards; animation-delay: 1s; opacity: 0;}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#visual .visual_util .visual_arrows {display: flex; gap: 5px;}
#visual .visual_util .visual_arrows a {display: flex; align-items: center; justify-content: center; width: 70px; aspect-ratio: 1/1; border: 1px solid rgba(34, 34, 34, 0.5); border-radius: 50%; color: var(--black);}
#visual .visual_util .visual_arrows a:hover {border-color: var(--green); background-color: var(--green); color: var(--white);}
#visual .visual_util .visual_arrows a::before {font-size: 28px;}
#visual .visual_util .visual_arrows a.prev::before {content: "\e5c4";}
#visual .visual_util .visual_arrows a.next::before {content: "\e5c8";}

/* About */
#about .about_top {display: flex; gap: 60px; justify-content: space-between; margin-bottom: 60px;}
#about .about_top > * {flex: 1;}

#about .imgbox img {border-radius: 30px; max-width: 100%; min-height: 260px; object-fit: cover;}
#about .imgbox a {width: 130px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); background: linear-gradient(180deg, #8BB54D 0%, #0C5C6B 100%); aspect-ratio: 1/1; margin: -65px auto 0; position: relative; z-index: 2;}
#about .imgbox a::before {content: '\f8ce'; font-size: 60px; transition: var(--transition); position: relative; z-index: 2;}
#about .imgbox a::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 50%; background: linear-gradient(180deg, #8BB54D 0%, #0C5C6B 100%); transform: scale(0); transition: var(--transition); opacity: 0;}

#about .imgbox a:hover::after {transform: scale(1); opacity: 1;}
#about .imgbox a:hover::before {transform: rotate(45deg);}

/* Sample */
#sample {padding: 120px 0; overflow: hidden;}
#sample .sample_roll_wrap {margin-top: 60px;}
#sample .sample_roll_wrap .swiper {overflow: visible;}
#sample .sample_roll_wrap .swiper-slide {height: auto;}
#sample .sample_roll_wrap .sample_card {position: relative;}
#sample .sample_roll_wrap .sample_card .imgbox {position: relative; width: 100%; height: 520px; border-radius: 30px; overflow: hidden;}
#sample .sample_roll_wrap .sample_card .imgbox img {width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
#sample .sample_roll_wrap .sample_card .imgbox img.img_mo {display: none;}

@media all and (min-width:681px){
#sample .sample_roll_wrap .sample_card .txtbox {background: none !important;}
}

#sample .sample_roll_wrap .sample_card .txtbox {position: absolute; left: 0; top: 0; padding: 50px 40px; width: 100%;}
#sample .sample_roll_wrap .sample_card .txtbox h5 {margin-bottom: 15px;}
#sample .sample_roll_wrap .sample_card .txtbox p.fs18 {margin-bottom: 20px;}
#sample .sample_roll_wrap .sample_card h4 {margin-top: 20px; font-size: 1.333rem; line-height: 150%; letter-spacing: var(--letter-spacing-heading); transition: var(--transition);}

#sample .sample_roll_wrap .pagination {display: flex; justify-content: center; gap: 10px; margin-top: 30px;}
#sample .sample_roll_wrap .pagination span {margin: 0; background-color: #d9d9d9; border: 3px solid var(--white); opacity: 1; width: 15px; height: 15px;}
#sample .sample_roll_wrap .pagination span.swiper-pagination-bullet-active {background-color: var(--green); border-color: var(--green);}

#sample .sample_roll_wrap .sample_card:hover .imgbox img {transform: scale(1.05);}
#sample .sample_roll_wrap .sample_card:hover h4 {color: var(--green2);}


/* News */
#news .news_top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px;}

#news .news_card {padding: 50px 40px; border-radius: 30px; background-color: var(--grayBg); display: block;}
#news .news_card h4 {margin-bottom: 15px; min-height: 2lh; transition: all 0.3s linear;}
#news .news_card p.fs18 {min-height: 2lh; margin-bottom: 30px; transition: all 0.3s linear;}
#news .news_card .date {display: flex; align-items: center; gap: 5px; opacity: 0.7; transition: all 0.3s linear;}
#news .news_card .date::before {font-size: 22px; content: '\ebcc';}

#news .news_card:hover {background-color: var(--green);}
#news .news_card:hover h4 {color: var(--white);}
#news .news_card:hover p.fs18 {color: var(--white); opacity: 0.8;}
#news .news_card:hover .date {color: var(--white);}


#news .news_swiper_util {display: flex; gap: 30px; align-items: center; margin-top: 40px;}

#news .news_swiper_util .progress_bar {flex: 1; height: 4px; background-color: #C4C4C4; position: relative; border-radius: 9999px; overflow: hidden;}
#news .news_swiper_util .progress_bar .bar {position: absolute; left: 0; top: 0; width: 0; height: 4px; background: linear-gradient(90deg, #8BB54D 0.67%, #0C5C6B 100%); transition: width .4s ease; border-radius: 9999px;}
#news .news_swiper_util .progress_bar .bar.is-dragging {transition: none;}

#news .news_swiper_util .arrows {display: flex; gap: 5px;}
#news .news_swiper_util .arrows a {display: flex; align-items: center; justify-content: center; width: 70px; aspect-ratio: 1/1; border: 1px solid rgba(34, 34, 34, 0.5); border-radius: 50%; color: var(--black);}
#news .news_swiper_util .arrows a:hover {border-color: var(--green); background-color: var(--green); color: var(--white);}
#news .news_swiper_util .arrows a::before {font-size: 28px;}
#news .news_swiper_util .arrows a.prev::before {content: "\e5c4";}
#news .news_swiper_util .arrows a.next::before {content: "\e5c8";}

/* Inquiry */
#inquiry {}
#inquiry .inquiry_in {padding: 130px 30px; border-radius: 30px; background: url('/img/inquiry_bg.jpg') no-repeat center center / cover;}
#inquiry .inquiry_in .txtbox h2 {margin-bottom: 20px;}
#inquiry .inquiry_in .txtbox h2 span {line-height: inherit;}
#inquiry .inquiry_in .txtbox .more_btn_wrap {display: flex; justify-content: center; margin-top: 50px;}


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

}

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


}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* About */
#about .about_top {flex-direction: column; gap: 30px; margin-bottom: 30px;}
#about .about_top > * {flex: auto; width: 100%;}

#about .imgbox a {width: 100px; margin-top: -50px;}
#about .imgbox a::before {font-size: 45px;}

/* Sample */
#sample .sample_roll_wrap .sample_card .imgbox {height: 400px;}
#sample .sample_roll_wrap .sample_card .txtbox {padding: 35px 30px;}

/* News */
#news .news_card {padding: 40px 30px;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* Visual */
#visual {width: 90%; border-radius: 20px; margin-top: 96px;}
#visual .visual_util {bottom: 60px;}
#visual .visual_util .visual_arrows {justify-content: center;}
#visual .visual_util .visual_arrows a {width: 50px;}
#visual .visual_util .visual_arrows a::before {font-size: 24px;}

#visual .fs20_wrap br {display: none;}

#visual .visual_in .roll .v_txt {top: 60px; transform: translate(-50%, 0); width: 100%; padding: 0 20px;}

#visual .visual_in .roll .v_bg .bg_mo {display: block;}
#visual .visual_in .roll .v_bg:has(.bg_mo) .bg:not(.bg_mo) {display: none;}

/* About */
#about .imgbox a {width: 80px; margin-top: -40px;}
#about .imgbox a::before {font-size: 35px;}

/* Sample */
#sample {padding: 60px 0;}
#sample .sample_roll_wrap {margin-top: 30px;}
#sample .sample_roll_wrap .sample_card .imgbox {border-radius: 15px;}
#sample .sample_roll_wrap .sample_card .txtbox {padding: 30px 25px;}
#sample .sample_roll_wrap .sample_card .txtbox h5 {margin-bottom: 8px;}
#sample .sample_roll_wrap .sample_card .txtbox p.fs18 {margin-bottom: 10px;}
#sample .sample_roll_wrap .sample_card h4 {font-size: 1.14rem; margin-top: 15px;}

/* News */
#news .news_top {margin-bottom: 30px;}

#news .news_card {padding: 30px 25px; border-radius: 15px;}
#news .news_card h4 {margin-bottom: 8px;}
#news .news_card p.fs18 {margin-bottom: 15px;}
#news .news_card .date::before {font-size: 20px;}

#news .news_swiper_util {gap: 15px;}
#news .news_swiper_util .progress_bar {height: 3px;}
#news .news_swiper_util .progress_bar .bar {height: 3px;}

#news .news_swiper_util .arrows {gap: 2px;}
#news .news_swiper_util .arrows a {width: 50px;}
#news .news_swiper_util .arrows a::before {font-size: 24px;}

/* Inquiry */
#inquiry .inquiry_in .txtbox h2 {margin-bottom: 15px;}
#inquiry .inquiry_in .txtbox .more_btn_wrap {margin-top: 35px;}
#inquiry .inquiry_in {padding: 100px 20px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Visual */
#visual {margin-top: 60px;}
#visual .visual_util {bottom: 30px;}
#visual .visual_util .visual_arrows a {width: 40px;}
#visual .visual_util .visual_arrows a::before {font-size: 20px;}

/* About */
#about .about_top h2 {text-wrap: balance;}
#about .about_top h2 br {display: none;}
#about .imgbox a {width: 65px; margin-top: -32px;}
#about .imgbox a::before {font-size: 30px;}

/* Sample */
#sample .sample_roll_wrap .sample_card {display: flex; flex-direction: column; height: 100%;}
#sample .sample_roll_wrap .sample_card br {display: none;}
#sample .sample_roll_wrap .sample_card .imgbox {height: auto; aspect-ratio: 1/1; border-radius: 15px 15px 0 0; width: 100%;}
#sample .sample_roll_wrap .sample_card .imgbox img:not(.img_mo) {display: none;}
#sample .sample_roll_wrap .sample_card .imgbox img.img_mo {display: block;}
#sample .sample_roll_wrap .sample_card .txtbox {position: relative; border-radius: 0 0 15px 15px; padding-top: 0; flex: 1;}

/* News */
#news .news_card {padding: 25px 20px;}
#news .news_card .date {font-size: 13px;}
#news .news_card .date::before {font-size: 16px;} 

#news .news_swiper_util .arrows a {width: 35px;}
#news .news_swiper_util .arrows a::before {font-size: 20px;}

/* Inquiry */
#inquiry .inquiry_in {padding: 60px 20px;}
#inquiry .inquiry_in .txtbox h2 {margin-bottom: 10px;}
#inquiry .inquiry_in .txtbox .more_btn_wrap {margin-top: 25px;}
}

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

/*******************************************************************************
    @media 400px
*******************************************************************************/
@media all and (max-width:400px){
/* Visual */
#visual .visual_in .roll .v_txt {top: 50px;}
#visual .visual_in .roll .v_txt h3 br {display: none;}
}