@charset "utf-8";
#mv_wrap {}
#mv {width: 170vw; border-radius: 0 0; overflow: hidden; transform: translateX(-35vw);}
#mv .mv_box {width: 100vw; position: relative; transform:translateX(35vw) }
#mv .mv_list_wrap { margin-bottom: 0;}
#mv .mv_list_wrap .mv_list {position: relative; overflow: hidden; }
#mv .mv_list_wrap .mv_list .visual { width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;transform: scale(1.15); background-image: url('/assets/images/main/mv1.jpg');}
#mv .mv_list_wrap .mv_list.slick-active .visual { animation:mvBgScale 3.5s forwards; }
#mv .mv_list_wrap .mv_list1 .visual {background-image: url('/assets/images/main/mv1.jpg');}
#mv .mv_list_wrap .mv_list2 .visual {background-image: url('/assets/images/main/mv2.jpg');}
#mv .mv_list_wrap .mv_list3 .visual {background-image: url('/assets/images/main/mv3.jpg');}
#mv .mv_list_wrap .mv_list4 .visual {background-image: url('/assets/images/main/mv4.jpg');}

#mv .mv_list_wrap .mv_list .txt_wrap {position:absolute;/* left: 38%; */top:50%;width: 100%;text-align: center;transform:translateY(-50%);/* margin-left: 130px; *//*overflow: hidden;*/}
#mv .mv_list_wrap .mv_list .txt_wrap h3 {letter-spacing:0; color: #fff;}
#mv .mv_list_wrap .mv_list .txt_wrap p {color: #fff; letter-spacing:1px}
#mv .mv_list_wrap .mv_list.slick-active .txt_wrap h3 { animation:mvTxt 1.3s 1s forwards; opacity: 0; transform:translateX(50px) scale(1.1);filter:blur(5px);  }
#mv .mv_list_wrap .mv_list.slick-active .txt_wrap p { animation:mvTxt 1.7s 1.3s forwards; opacity: 0; transform:translateY(50px) scale(1.1); filter:blur(5px); }

#mv .mv_list_wrap .mv_list .txt_wrap1 {position: absolute;left:0;top:35%;transform: translateY(0);margin-left: 0;/*overflow: hidden;*/text-align: center;margin: 0 auto;width: -webkit-fill-available;}
#mv .mv_list_wrap .mv_list .txt_wrap1 h3 {letter-spacing: 0; color: #fff; margin-bottom:50px;  }
#mv .mv_list_wrap .mv_list .txt_wrap1 p {color: #fff;  letter-spacing:50px;}
#mv .mv_list_wrap .mv_list.slick-active .txt_wrap1 h3 { animation:mvTxt 0.7s 0.3s forwards; opacity: 0;  transform:translateY(50px) scale(1.1);filter:blur(5px); }
#mv .mv_list_wrap .mv_list.slick-active .txt_wrap1 p { animation:mvTxt 0.7s 0.5s forwards; opacity: 0;  transform:translateY(50px) scale(1.1); filter:blur(5px);}
#mv .mv_list_wrap .mv_list.slick-active .more {padding:15px 50px; text-align:center; border:1px solid #fff; color:#fff; border-radius:50px; transition:.25s;  margin:50px auto 0; animation:mvTxt 0.7s 0.3s forwards; opacity: 0;  transform:translateY(50px) scale(1.1);filter:blur(5px); position:relative; }
#mv .mv_list_wrap .mv_list.slick-active .more:hover { bbackground-color: #896e60;  border:1px solid #896e60; }

#mv .slick-slide img { display: inline-block;}

#mv .slider_arrow_wrap {display: flex;align-items:center;position: absolute; bottom: 150px; left: 50%; transform:translateX(-50%);}
#mv .slider_arrow_wrap button {background: none; border: none; font-family: 'Italiana', sans-serif; font-size: 14px; color: #fff;position: relative; letter-spacing:1px;}
#mv .slider_arrow_wrap button:after {content:''; display: block; width: 45px; height: 1px; background-color: #fff;position: absolute; top: 50%; }
#mv .slider_arrow_wrap .prev { padding-right: 70px; }
#mv .slider_arrow_wrap .next { padding-left: 70px; }
#mv .slider_arrow_wrap .prev:after {right: 0;}
#mv .slider_arrow_wrap .next:after {left: 0;}
#mv .slider_arrow_wrap .center-deco{width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;}
#mv .slider_arrow_wrap .center-deco .center-cir{display: block; width: 6px; height: 6px; background-color: white; border-radius: 50%;}


@keyframes mvBgScale {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes mvTxt {
    0% {
        /* transform:translateY(50px); */
        opacity:0;
				transform:translateY(50px) scale(1.1);
				filter:blur(5);
    }
    100% {
        /* transform:translateY(0); */
        opacity:1;
				transform:translateY(0) scale(1);
				filter:blur(0);
    }
}

.bar_txt{border-bottom:1px solid #dfdfdf; padding-bottom:40px}

.pl20{padding-left:20px}
.pl15{padding-left:15px}


.main-field-con{margin-top: 4rem; position: relative; z-index: 1;}
.main-field-list{margin: 0 -0.2rem; display: flex; flex-wrap:wrap;}
.main-field-item{margin: 0 0.2rem; width: calc(16.6666666% - 0.4rem); position: relative; overflow: hidden; border-radius: 1.5rem;}
.main-field-item a{width: 100%;gap: 20px;height: 25rem;display: flex;flex-direction: column;justify-content: space-between;border-radius: 1.5rem;box-sizing: border-box;transition:var(--transition-custom);overflow: hidden;}
.main-field-txt{padding: 10% 12.65% 0; position: relative;}
.main-field-txt h5{padding-right: 3rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: var(--font-color);}
.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35; letter-spacing: -0.05em; font-weight: 300; color: var(--font-color); opacity: 0.4;}
.main-field-img{margin-top: 2rem; padding-bottom: 5.5rem;}
.main-field-img span{position: relative; width: 100%; height: 0; padding-top: 61.77%; display: block;}

.main-field-item .btn-svg-box{opacity: 0.1;}
.main-field-item .btn-svg-box .btn-svg{left: auto; right: 0rem; bottom: auto; top: -6rem; height: 130%; transition: right .3s cubic-bezier(.55,.09,.68,.53) 0s, top .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
.main-field-item .btn-point {bottom: auto; left: auto; top: 0.5rem; right: 0.5rem; width: 5rem; height: 5rem; transform: translate(50%,-50%);}
.main-field-item .btn-point i{font-size: 2.2rem;}

@media all and (min-width:801px){
	.main-field-item a:hover .btn-svg-box{opacity: 1;}
	.main-field-item a:hover .main-field-txt{color:#fff}
	.main-field-item a:hover .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-field-item a:hover .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-field-item a:hover .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 130%;}
	.main-field-item a:hover .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
}
@media all and (max-width:1280px){
	.main-field-txt h5{padding-right: 4rem; font-size: 3rem;}
}
@media all and (max-width:800px){
	#mainFieldCon{padding: 13rem 0 7.5rem;}
	
	.main-field-con{margin: 2rem auto 0;}
	.main-field-list{margin: -0.2rem; display: flex; flex-wrap:wrap;}
	.main-field-item{margin: 0.2rem; width: calc(50% - 0.4rem); border-radius: 1.5rem; overflow: hidden; background-color: rgb(35 195 245 / 10%);}
	.main-field-item a{width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; transition:var(--transition-custom);}
	.main-field-txt{padding: 2rem 1rem 0;}
	.main-field-txt h5{padding-right: 0; font-size: 1.4rem; line-height: 1.3;}
	.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35;}
	.main-field-img{margin-top: 2rem; padding-bottom: 2.5rem;}

	.main-field-item .btn-point {width: 6rem; height: 6rem; transform: translate(50%,-50%);}
	.main-field-item .btn-point i{font-size: 3.2rem;}

	.main-field-item a .btn-svg-box{opacity: 1; display: none;}
	.main-field-item a .btn-svg-box .morph-svg-show{visibility: visible !important;}
	.main-field-item a .btn-svg-box .morph-svg-round{visibility: hidden !important;}
	.main-field-item a .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; /* height: 104%; */ height: 150%;}
	.main-field-item a .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s; visibility: hidden;}
}

#mainCustomerCon{padding-top:160px}
.cl_box{border:1px solid #dfdfdf}
#update .title-box{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; position: relative; padding-bottom: 7px; margin-bottom: 40px; }
#update .title-box::after{ content: ""; width: 100%; height: 1px; background: #111; position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 1.5s; }
#update .title-box.aos-animate::after{ transform: scale(1); }
#update .title-box a{ margin-right: -10px; margin-bottom: -10px; }

#update .flex-box{ display: flex;}
#update .btns{ width: 240px; display: flex; }
#update .btns button{ width: 70px; height: 70px; background: #FFF; border: 1px solid #DDD; border-radius: 50%; overflow: hidden; position: relative; transition: background 0.5s, border 0.5s; }
#update .btns button:not(:last-of-type){ margin-right: 8px; }
#update .btns button::before,
#update .btns button::after{ content: ""; width: 30px; height: 30px; filter: invert(0); -webkit-filter: invert(0); position: absolute; top: 50%; transition: left 0.5s, transform 0.5s, filter 0.5s; }

#update .btns button.prev::before,
#update .btns button.prev::after{ background: url("/assets/images/main/prev_icon.svg") no-repeat center center / contain; }
#update .btns button.prev::before{ left: 100%; transform: translate(100%, -50%); }
#update .btns button.prev::after{ left: 50%; transform: translate(-50%, -50%); }

#update .btns button.next::before,
#update .btns button.next::after{ background: url("/assets/images/main/next_icon.svg") no-repeat center center / contain; }
#update .btns button.next::before{ left: 0; transform: translate(-100%, -50%); }
#update .btns button.next::after{ left: 50%; transform: translate(-50%, -50%); }

#update .content{ width: calc(100% - 240px); }
#update .update-wrap .slick-track{ margin: 0; }
#update .update-wrap .slick-list{ margin-right: -40px; }
#update .update{ margin-right: 40px; }
#update .update.slick-cloned{ opacity: 1; transform: unset; transition: unset; }
#update .update figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 133.335%; border-radius: 0; transition: border-radius 0.7s; }
#update .update figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.7s; }
#update .update h6{ display: -webkit-box; height: 3.2em; font-size: 20px; font-weight: 500; color: #222; letter-spacing: -0.02em; line-height: 1.6; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 20px; }

@media screen and (hover: hover){
	#update .btns button:hover{ background: #111; border: 1px solid #111; }
	#update .btns button:hover::before,
	#update .btns button:hover::after{ filter: invert(1); -webkit-filter: invert(1); }

	#update .btns button.prev:hover::before{ left: 50%; transform: translate(-50%, -50%); }
	#update .btns button.prev:hover::after{ left: 0; transform: translate(-100%, -50%); }

	#update .btns button.next:hover::before{ left: 50%; transform: translate(-50%, -50%); }
	#update .btns button.next:hover::after{ left: 100%; transform: translate(100%, -50%); }

	#update .update:hover figure{ border-radius: 40px; }
	#update .update:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-width: 1800px){
	#update{ padding: 170px 0 120px; }
	#update .btns button{ width: 60px; height: 60px; }

	#update .update h6{ font-size: 18px; }
}

@media screen and (max-width: 1400px){
	#update{ padding: 120px 0 100px; }
	#update .btns{ width: 200px; }

	#update .content{ width: calc(100% - 200px); }
	#update .update-wrap .slick-list{ margin-right: -20px; }
	#update .update{ margin-right: 20px; }
}

@media screen and (max-width: 1280px){
	#update{ padding: 80px 0 100px; }
	#update .btns{ width: 170px; }
	#update .btns button{ width: 50px; height: 50px; }

	#update .content{ width: calc(100% - 170px); }
	#update .update h6{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 700px){
	#update .flex-box{ flex-direction: column-reverse; }

	#update .btns{ justify-content: flex-end; width: 100%; margin-top: 20px; }

	#update .content{ width: 100%; }
	#update .update{ width: 250px; }
}


@media all and (max-width:1800px){
}
@media all and (max-width:1430px){
	
}
@media all and (max-width:1230px){

}


@media all and (max-width:980px){
}


@media all and (max-width:820px){

#mv_wrap .mv_list_wrap .mv_list .visual {width: 100%;height: 100%;background-repeat: no-repeat;background-position: 35% 50%;background-size: cover;transform: scale(1.15);}
#mv_wrap .mv_list_wrap .mv_list1 .visual {background-image: url('/assets/images/main/mv1.jpg'); background-position:65% 50%;}
#mv_wrap .mv_list_wrap .mv_list2 .visual {background-image: url('/assets/images/main/mv2.jpg'); background-position:80% 50%;}
#mv_wrap .mv_list_wrap .mv_list3 .visual {background-image: url('/assets/images/main/mv3.jpg'); background-position:50% 50%;}
#mv_wrap .mv_list_wrap .mv_list4 .visual {background-image: url('/assets/images/main/mv4_m.jpg'); background-position:65% 50%;}

#mv .mv_list_wrap .mv_list .txt_wrap {position:absolute;left: 0;top:45%;transform: translateY(-60%);}
#mv .mv_list_wrap .mv_list .txt_wrap p {color: #fff;text-transform: uppercase}
#mv .mv_list_wrap .mv_list .txt_wrap .logo img { width:55%;}
#mv .slider_arrow_wrap {;bottom: 120px;}

#mv .slider_arrow_wrap {display: flex;align-items:center;/* position: absolute; *//* bottom: 120px; *//* left: 20px; *//* transform: translateX(7%); */scale: 1;width: 100%;justify-content: center;margin: 0 auto;}

#mv .slider_arrow_wrap button {background: none; border: none; font-family: 'Italiana', sans-serif; font-size: 14px; color: #fff;position: relative; letter-spacing:1px;}
#mv .slider_arrow_wrap button:after {content:'';display: block;width: 30px;height: 1px;background-color: #fff;position: absolute;top: 50%;}
#mv .slider_arrow_wrap .prev {padding-right: 38px;}
#mv .slider_arrow_wrap .next {padding-left: 38px;}
#mv .slider_arrow_wrap .prev:after {right: 0;}
#mv .slider_arrow_wrap .next:after {left: 0;}
#mv .slider_arrow_wrap .center-deco{width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;}


#mv_wrap .slider_navi {position: absolute;bottom: 20%;right: 50%;margin-right: -155px;z-index: 1;display: flex;align-items:center;scale: .7;}

#mv .more{width:185px; font-family: 'Italiana', sans-serif; height: 45px; margin: 30px auto 0; float: none; /*border:1px solid #222;*/ box-sizing:border-box; cursor: pointer; background:linear-gradient(to right, #d37f74 40%, transparent 0%); background-size:400% 100%; background-position: right bottom; transition:all 0.75s ease-out; border-radius:300px;  background-color: transparent; border:1px solid #fff;}
.logo_m img{width:80%}

.breeft-wrap{display:block}
.breeft-animate .breeft-img-box img{border-radius:40px}
.breeft-wrap{padding:30px 0 0 0}
.bar_txt{padding-bottom:20px;}
.breeft-text-box{margin-left:0; margin-top:30px}
.breeft-btn{width:163px}


.business_area{padding:80px 0;}
.business_area .shape{top:20px;}
.business_area .main-product-slider .swiper-slide{width:74vw;}
.business_area .section-pin{padding-top: 30px;}
.business_area .main-product-slider .block{padding:20px;}
.business_area .main-product-slider .title{font-size: 24px; margin:4px 0 10px;}
.business_area .main-product-slider .text{font-size: 14px;}
.business_area .main-product-slider .chip{font-size: 14px;}
.business_area .main-product-slider .more .icon{width: 50px; height: 50px; margin-bottom: 10px;}

.breeft-btn::before{width:40px; padding-top:20px}

#mainCustomerCon{padding-top:80px}

}


@media all and (max-width:520px){
	
}