section{overflow: hidden;}

/* 01 sunny */
.sunny{--item_color:#e86d27;}
/* 02 diacore */
.diacore{--item_color:#B31E24;}
/* 03 virtue */
.virtue{--item_color:#020d4f;}
/* 04 pladuo */
.pladuo{--item_color:#2d0059;}
/* 05 vivaline */
.vivaline{--item_color:#780001;}
/* 06 vivaline */
.silshape{--item_color:#385c7e;}
/* 07 shemax */
.shemax{--item_color:#002f99;}
/* 06 silshpe */
.shemax{--item_color:#385C7F;}
/* 08  vivace*/
.vivace{--item_color:#c89857;}
/* 09 onix*/
.onix{--item_color:#e66b50;}
/* 10 af laser*/
.af_laser{--item_color:#7b25b2;}
/* 11 Lady VR */
.lady_vr{--item_color:#ce3e6e;}


._product{
	letter-spacing: -0.03em;
	font-family:'museo-sans';
	padding-top: calc(var(--headerH) + 20px);
	box-sizing: border-box;
}
/* --------- s_visual --------- */
.s_visual{
	margin-bottom: 100px;
	--border-radius:200px;
}
.s_visual .wrap{
	display: flex; align-items: flex-start; gap: 40px;
}
.s_visual .wrap > div{
	transition: transform 0.8s;
	transform: scale(1);
}
.s_visual .wrap > div::before {
	content:''; display: block;
	position: absolute; width: 100%; height: 100%;
	top: 0; padding: 0 10px;
	/* box-shadow: 0 0 0 1px tomato; */
}
.s_visual .wrap .left::before{left: 0;}
.s_visual .wrap .right::before{right: 0;}
.s_visual .wrap > div.small{transform: scale(0.9);}
.s_visual .wrap > div.big{transform: scale(1.1);}
.s_visual .wrap .left{transform-origin: 0% 0%;}
.s_visual .wrap .right{transform-origin: 100% 0%;}

.s_visual .imgBx{}
.s_visual .right .imgBx.n1{margin-bottom: 18px;}

.s_visual .imgBx div{margin-bottom: 8px;}
.s_visual .left .imgBx.n1 div{border-radius: var(--border-radius) 0 0 0; overflow: hidden;}
.s_visual .left .imgBx.n2 div{border-radius: 0 0 0 var(--border-radius); overflow: hidden;}
.s_visual .right .imgBx.n1 div{border-radius: 0 var(--border-radius) 0 0; overflow: hidden;}
.s_visual .right .imgBx.n2 div{border-radius: 0 0 var(--border-radius) 0; overflow: hidden;}

.s_visual .imgBx div img{
	width: 100%; height: 100%; object-fit: cover;
}
.s_visual .left .imgBx p{text-align: right;}
.s_visual .imgBx p{
	font-size: 20px;
}
.s_visual .txtBx{
	margin-top: 40px; margin-bottom: 60px;
}
.s_visual .txtBx div{overflow: hidden;}
.s_visual .txtBx small{
	display: block; font-size: 30px;
}
.s_visual .txtBx h1{
	font-size: 120px;  font-weight: 700; color: var(--item_color);
	padding-bottom: 0.08em;
}

.s_visual .wrap{}
.s_visual .mo{display: none;}

.s_visual .swiper{}
.s_visual .swiper-wrapper{}
.s_visual .swiper-slide{}
.s_visual .swiper-slide .imgBx{}
.s_visual .swiper-slide .imgBx::before {
	content:''; display: block; padding-bottom: calc(16/9*100%);
}
.s_visual .swiper-slide .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}
.s_visual .swiper-slide p{}

@media screen and (max-width:1600px) {
	.s_visual{--border-radius:calc(200/1600*100vw)}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s_visual .wrap{gap: 20px; align-items: stretch;}
	.s_visual .wrap > div::before{padding: 5px;}
	.s_visual .wrap .right{display: flex; flex-direction: column; justify-content: space-between;}

	.s_visual .imgBx p{font-size: 16px; }
	.s_visual .txtBx{margin-top: 20px; margin-bottom: 30px;}
	.s_visual .txtBx small{font-size: calc(30/1280*100vw); }
	.s_visual .txtBx h1{font-size: calc(120/1280*100vw); }
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s_visual{margin-bottom: 60px;}
	.s_visual .imgBx p{font-size: 14px; }
}
@media screen and (max-width:500px) {
	.s_visual{margin-bottom: 20px;}
	.s_visual{--border-radius:10px;}
	.s_visual .wrap{gap: 6px;}

	.s_visual .imgBx p{font-size: 10px; text-align: right; padding-right: 5px; box-sizing: border-box;}

	.s_visual .txtBx{margin-top: 20px; margin-bottom: 14px;}
	.s_visual .txtBx small{font-size: calc(22/500*100vw); margin-bottom: 6px;}
	.s_visual .txtBx h1{font-size: calc(60/500*100vw); }
}
@media screen and (max-width:320px) {}




/* --------- s_slide --------- */
.s_slide{overflow: hidden;}
.s_slide .wrap{}
.s_slide .wrap .txtBx{margin-bottom: 50px;}
.s_slide .wrap .txtBx div{overflow: hidden;}
.s_slide .wrap .txtBx div:nth-child(1){
	font-size: 40px; font-weight: 300;
}
.s_slide .wrap .txtBx div:nth-child(2){
	font-size: 100px; font-weight: 700; color: var(--item_color);
	padding-bottom: 0.08em; box-sizing: border-box;
}
.s_slide .wrap .txtBx div p{}
.s_slide .wrap .cont{
	box-sizing: border-box;
	position: relative;
	padding-top: 80px; padding-bottom: 60px;
}
.s_slide .wrap .cont .title,
.s_slide .wrap .cont .desc{pointer-events: none; position: relative; z-index: 2;}
.s_slide .wrap .cont .line{
	position: absolute; left: 50%; transform: translateX(-50%); width: 100vw;
	height: 1px; background-color: rgba(0,0,0,0.1); z-index: 3;
	transform-origin: left center;
}
.s_slide .wrap .cont .line.top{top: 0;}
.s_slide .wrap .cont .line.bottom{bottom: 0;}
.s_slide .wrap .cont .title{}
.s_slide .wrap .cont .title small{
	display: block; font-size: 20px; font-weight: 700; color: var(--red);
	margin-bottom: 1.2em; padding-left: 3px; box-sizing: border-box;
}
.s_slide .wrap .cont .title h3{
	font-size: 60px;  line-height: calc(70/60); font-weight: 700;
}
.s_slide .wrap .cont .controls{margin: 60px 0; display: flex; align-items: center; justify-content: flex-start; gap: 8px; position: relative; z-index: 2;}
.s_slide .wrap .cont .controls .swiper-pagination-bullet{width: 16px; height: 16px; margin: 0; transition: background 0.3s; background: #a5acb2; opacity: 1;}
.s_slide .wrap .cont .controls .swiper-pagination-bullet-active{background: var(--red);}
.s_slide .wrap .cont .desc{display: flex; justify-content: flex-end;}
.s_slide .wrap .cont .desc div{}
.s_slide .wrap .cont .desc h4{
	font-size: 50px;  font-weight: 700; line-height: calc(60/50);
	margin-bottom: 40px;
}
.s_slide .wrap .cont .desc small{
	color: var(--item_color); font-size: 30px;  font-weight: 700;
	display: block; margin-bottom: 1em;
}
.s_slide .wrap .cont .desc p{
	font-size: 22px;  line-height: calc(36/22);
	color: #818181;
}
.s_slide .wrap .cont .desc p span{display: inline-block; vertical-align: sub;}
.s_slide .wrap .cont .swiper{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	overflow: visible;
}
.s_slide .wrap .cont .swiper-wrapper{}

.s_slide .wrap .cont .swiper-slide{box-sizing: border-box;}
.s_slide .wrap .cont .swiper-slide img{
	transition: opacity 1s,transform 1s; opacity: 0; transform: scale(0.5);
}
.s_slide .wrap .cont .swiper-slide-active img{opacity: 1; transform: scale(1);}


@media screen and (max-width:1600px) {
	.s_slide .wrap .txtBx{display: none;}
	.s_slide .wrap .cont .swiper-slide img{max-height: 100%;}
}
@media screen and (max-width:1440px) {
	.s_slide .wrap .cont .title h3{font-size: max(calc(60/1440*100vw),26px); }

	.s_slide .wrap .cont .desc h4{font-size: 40px;}
	.s_slide .wrap .cont .desc small{font-size: 30px;}
	.s_slide .wrap .cont .desc p{font-size: 18px;}

	.s_slide .wrap .cont .controls{margin: 30px 0;}
	.s_slide .wrap .cont .swiper{position: unset; margin-bottom: 40px;}
	.s_slide .wrap .cont .swiper-slide{
		padding: 0 !important; position: relative;
		border: 1px solid #ddd; box-sizing: border-box; border-radius: 10px;
		display: flex; align-items: center; justify-content: center;
	}
	.s_slide .wrap .cont .swiper-slide::before {
		content:''; display: block; padding-bottom: calc(9/16*100%);
	}
	.s_slide .wrap .cont .swiper-slide img{
		opacity: 1; transform: scale(1); position: absolute;
		object-fit: contain; object-position: center; width: 90%; height: 90%;
	}
	.s_slide .wrap .cont .desc{justify-content: flex-start; max-width: 1020px;}
	.s_slide .wrap .cont .desc br{display: none;}
	.s_slide .wrap .cont .desc h4{font-size: 30px;}
	.s_slide .wrap .cont .desc small{font-size: 20px;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s_slide .wrap .cont .desc br{display: none;}
}
@media screen and (max-width:500px) {
	.s_slide .wrap .cont{padding-bottom: 60px;}
	.s_slide .wrap .cont .line.top{display: none;}

	.s_slide .wrap .cont .title small{font-size: 16px; margin-bottom: 10px;}

	.s_slide .wrap .cont .controls .swiper-pagination-bullet{width: 10px; height: 10px;}

	.s_slide .wrap .cont .desc h4{font-size: 20px; margin-bottom: 20px;}
	.s_slide .wrap .cont .desc small{font-size: 18px;}
	.s_slide .wrap .cont .desc p{font-size: 14px;}
}
@media screen and (max-width:320px) {}



/* --------- s_detail --------- */
.s_detail{
	position: relative;
	padding: 80px 0;
}
.s_detail .tab{
	position: absolute;
    left: 0;
	top: 50%; transform: translateY(-50%);
}
.s_detail .tab div{
	width: 42px;
    height: 300px;
    font-size: 20px;
    color: #fff;
    writing-mode: vertical-rl;
    border-radius: 0 50px 50px 0;
    background-color: #d8d7dc;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0.4em;
    box-sizing: border-box;
	transform: translateX(-110%);
}
.s_detail .tab.right div{
	transform: translateX(110%);
}
.s_detail .tab p{}


.s_detail .tab.right{
	left: unset; right: 0;
}
.s_detail .tab.right div{
	border-radius: 50px 0 0 50px;
	padding-right: unset; padding-left: 0.4em;
}
.s_detail .wrap{}
.s_detail .cont{}
.s_detail .title{}
.s_detail .title small{
	display: block;
    color: var(--red);
    font-weight: 700;
}
.s_detail .title h3{
	font-size: 60px;
    font-weight: 700;
    margin-top: 6px;
	line-height: 1.3;
}
.s_detail .title p{
	font-size: 22px;
	margin-top: 14px;
    font-weight: 300;
    color: #818181;
    line-height: calc(36 / 22);
}
.s_detail .tagBx{
	display: flex; flex-direction: column; align-items: flex-start;
}
.s_detail .tagBx h4{
	font-size: 30px;
    color: #fff;
    background-color: #000;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(172 / 30 * 1em);
    padding: calc(8 / 30 * 1em) 0.8em;
    box-sizing: border-box;
}
.s_detail .tagBx p{
	display: block;
	font-size: 24px;
    font-weight: 500;
    color: var(--red);
    line-height: calc(30 / 24);
    margin-top: 1em;
}
.s_detail .tagBx span{
	font-size: 20px;
	margin-top: 1em;
    font-weight: 300;
    line-height: calc(30 / 20);
    color: #818181;
    display: inline-block;
    max-width: 450px;
}

@media screen and (max-width:1700px) {
	.s_detail .cont{padding-left: 70px; box-sizing: border-box;}
	.s_detail .title h3 {font-size: 50px;}
	.s_detail .title p {font-size: 18px;}

	.s_detail .tagBx h4 {font-size: 22px;}
	.s_detail .tagBx p {font-size: 18px;}
	.s_detail .tagBx span {font-size: 16px;}
}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s_detail .tab{display: none;}
	.s_detail .cont{padding-left: 0;}
}
@media screen and (max-width:1024px) {
	.s_detail .title h3 {font-size: 32px;}
	.s_detail .title p {font-size: 16px;}
}
@media screen and (max-width:820px) {
	.s_detail .tagBx span {max-width: unset;}
}
@media screen and (max-width:500px) {
	.s_detail{padding: 60px 0;}
	.s_detail .title h3 {font-size: 26px;}
	.s_detail .title p {font-size: 14px;}

	.s_detail .tagBx h4 {font-size: 16px;}
	.s_detail .tagBx p {font-size: 16px;}
	.s_detail .tagBx span {font-size: 14px;}
}
@media screen and (max-width:320px) {}


/* --------- s_mechanism --------- */
.s_mechanism{
	padding: 120px 0; background-position: center; background-size: cover;
}
.s_mechanism .wrap{}
.s_mechanism .title{text-align: center; margin-bottom: 80px;}
.s_mechanism .title h3{
	font-size: 50px;font-weight: 700;text-align: center; overflow: hidden;
}
.s_mechanism .title p{font-size: 24px; font-weight: 300; line-height: calc(36/24);color: #818181; margin-top: 40px;}
.s_mechanism .cont .flexBx{display: flex; justify-content: center; flex-wrap: wrap;}
.s_mechanism .cont .box{}
.s_mechanism .cont .box .imgBx{border-radius: 20px; overflow: hidden;}
.s_mechanism .cont .txtBx {padding-left: 3px;box-sizing: border-box;max-width: 280px; margin-top: 24px;}
.s_mechanism .cont .txtBx em {font-size: 24px;font-weight: 500;color: var(--red);display: block;margin-bottom: 10px;}
.s_mechanism .cont .txtBx p {font-size: 20px;font-weight: 300;color: #818181;line-height: calc(30/20);}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s_mechanism .title{margin-bottom: 80px;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.s_mechanism{padding: 100px 0;}
	.s_mechanism .title{margin-bottom: 60px;}
	.s_mechanism .title h3{font-size: 40px;}
	.s_mechanism .title p{font-size: 18px; margin-top: 30px;}
}
@media screen and (max-width:500px) {
	.s_mechanism{padding: 80px 0;}
	.s_mechanism .title{margin-bottom: 40px;}
	.s_mechanism .title h3{font-size: 26px; }
	.s_mechanism .title p{font-size: 16px; margin-top: 20px;}
	.s_mechanism .cont .box .imgBx{border-radius: 10px;}
	.s_mechanism .cont .txtBx{margin-top: 16px;}
	.s_mechanism .cont .txtBx p{font-size: 14px; }
}
@media screen and (max-width:320px) {}


/* --------- s_info --------- */
.s_info{
	padding: 120px 0; background-size: cover; background-position: center;
}
.s_info .wrap{}
.s_info .wrap .title{
	margin-bottom: 80px; text-align: center;
}
.s_info .wrap .title h3{
	font-size: 40px; font-weight: 700; line-height: 1.4;
}
.s_info .wrap .title p{
	font-size: 24px; font-weight: 300; line-height: calc(36/24);color: #818181; margin-top: 40px;
}
.s_info .wrap .cont{}
.s_info .wrap .cont .flexBx{
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
.s_info .wrap .cont .flexBx .imgBx{}
.s_info .wrap .cont .flexBx .imgBx img{}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s_info .wrap .title{margin-bottom: 80px;}
}
@media screen and (max-width:1024px) {
    .s_info .wrap .title h3{font-size: 34px;}
}
@media screen and (max-width:820px) {
	.s_info{padding: 100px 0;}
	.s_info .wrap .title{margin-bottom: 60px;}
	.s_info .wrap .title h3{font-size: 30px;}
	.s_info .wrap .title p{font-size: 16px; margin-top: 30px;}
}
@media screen and (max-width:500px) {
	.s_info{padding: 80px 0;}
	.s_info .wrap .title{margin-bottom: 40px;}
	.s_info .wrap .title h3{font-size: 26px; }
	.s_info .wrap .title p{font-size: 14px; margin-top: 20px;}
}
@media screen and (max-width:320px) {}




/* --------- s_patent --------- */
.s_patent{
	padding: 90px 0;
	position: relative;
}
.s_patent .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;
}
.s_patent .bg div{
	width: 100%; height: 100%; background-position: center; background-size: cover;
}
.s_patent .wrap{
	text-align: center; color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.s_patent h3{
	font-size: 35px; line-height: calc(45/35); font-weight: 700;
	margin: 24px 0;
}
.s_patent .imgBx{}
.s_patent .imgBx img{width: 100%; object-fit: cover;}
.s_patent .imgBx.n1{
	width: 172px;
}
.s_patent .imgBx.n2{
	width: 80%; max-width: 480px; margin-bottom: 34px;
}
.s_patent p{
	font-size: 22px; font-weight: 300; line-height: calc(36/22);
}
.s_patent p span{
	display: inline-block;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s_patent h3{font-size: max(calc(35/1024*100vw),20px); max-width: 730px;}
	.s_patent h3 br{display: none;}
	.s_patent p{max-width: 700px;}
	.s_patent p br{display: none;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s_patent{padding: 80px 0;}
	.s_patent .imgBx.n1 img{width: 120px;}
	.s_patent p{font-size: 14px; }
}
@media screen and (max-width:320px) {}








/* --------- s_product --------- */
.s_product{
	padding-top: 42px; padding-bottom: 32px; position: relative;
	display: flex; align-items: center; justify-content: center;
}
.s_product .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
.s_product .bg div{
	width: 100%; height: 100%;
	background-position: center bottom; background-size: cover;
}
.s_product .ground{
	position: absolute; width: 100%; height: 100px;
	background-color: rgb(175 175 175 / 33%);
	left: 0; bottom: 0;
}

.s_product .wrap{
	position: relative; text-align: center;
}
.s_product .wrap .mobile_desc{
	display: none; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 14px; max-width: 780px; margin: 0 auto; margin-bottom: 40px;
}
.s_product .wrap .mobile_desc div{
	border-radius: 100px; background-color: #fff; display: flex; align-items: center; justify-content: center;
	padding: 0.7em 1.2em; font-size: 16px;font-weight: 500; text-align: center; line-height: 1.4;
	box-sizing: border-box; cursor: pointer;
	transition: background-color 0.5s,color 0.5s;
}
.s_product .wrap .mobile_desc div.on{
	background-color: var(--item_color); color: #fff;
}
.s_product .wrap .mobile_desc div p{}
.s_product .productArea{
	position: relative; max-width: 80%;
	display: inline-flex; align-items: center; justify-content: center;
}

.s_product .marquee{
	position: absolute;
	display: flex; align-items: center; justify-content: center;
}
.s_product .marquee div{
	font-size: 200px; font-weight: 700;
	display: flex; white-space: nowrap;
	position: absolute; color: #fff;
	top: 50%; transform: translateY(-50%);
}
.s_product .marquee p{
	animation: marquee forwards infinite 10s linear;
}

.s_product .productArea .imgBx{}
.s_product .productArea .imgBx .real{position: relative; z-index: 2; width: 100%;}
.s_product .productArea .imgBx .shadow{
	position: absolute; max-width: unset; max-height: unset;
}
.s_product .productArea .dotBx{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;
	z-index: 4;
}
.s_product .productArea .dotBx .dot{
	position: absolute; transform: translateX(-50%);
	cursor: pointer;
}
.s_product .productArea .dotBx .dot .circle{}
.s_product .productArea .dotBx .dot .circle p{
	display: flex; align-items: center; justify-content: center;
	width: calc(48/18*1em); height: calc(48/18*1em); border-radius: 50%;
	background-color: var(--item_color);
	font-family: 'Pretendard'; color: #fff;
	font-size: 18px; font-weight: 700;
	opacity: 0.5; position: relative; z-index: 2;
	transition: background-color 0.4s,opacity 0.4s,color 0.4s;
}
.s_product .productArea .dotBx .dot .circle:hover p{opacity: 1;}
.s_product .productArea .dotBx .dot .desc{
	background-color: var(--item_color); color: #fff;
	font-size: 24px; font-weight: 700;
	position: absolute; top: -10px; padding: 20px 30px; box-sizing: border-box;
	min-height: 68px; border-radius: 100px;
	white-space: nowrap; transform-origin: left center;
	transform: scaleX(0); transition: transform 0.4s;
	min-width: 8em;
}

.s_product .productArea .dotBx .dot .desc:not(.right){
	right: -10px; padding-right: 70px; transform-origin: right center;
}
.s_product .productArea .dotBx .dot .desc.right{
	left: -10px; padding-left: 70px;
}
.s_product .productArea .dotBx .dot .desc p{
	transform: translateY(0.1em);
}
.s_product .info{
	position: absolute; right: 0; bottom: 120px;
	font-size: 24px; font-weight: 700; letter-spacing: -0.025em;
}

@media screen and (min-width:1281px) {
	/* on */
	.s_product .productArea .dotBx .dot.on{z-index: 2;}
	.s_product .productArea .dotBx .dot.on .circle p{background-color: #fff; opacity: 1; color: #000;}
	.s_product .productArea .dotBx .dot.on .desc{transform: scaleX(1);}
}




@media screen and (max-width:1600px) {
	.s_product .info{display: none;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s_product .wrap .mobile_desc{display: flex;}
	.s_product .productArea .dotBx .dot.on .circle p{opacity: 1;}
}
@media screen and (max-width:1024px) {
	.s_product .marquee div{font-size: max(calc(200/1024*100vw),100px); }
	/* .s_product .productArea .imgBx .shadow{display: none;} */
}
@media screen and (max-width:820px) {
	.s_product .wrap .mobile_desc{gap: 10px;}
	.s_product .wrap .mobile_desc div{font-size: 14px; }
	.s_product .productArea .dotBx .dot .circle p{font-size: 16px; }
}
@media screen and (max-width:500px) {
	.s_product{padding-bottom: 30px; padding-top: 60px;}
	.s_product .wrap .mobile_desc{gap: 6px;}
	.s_product .wrap .mobile_desc div{font-size: 12px; }
	.s_product .productArea .dotBx .dot .circle p{font-size: 10px; }
}
@media screen and (max-width:320px) {}