/* inmode */

/* s_inmode */
.s_inmode{background-color: #7b9190; background-color: #a5b1b0; position: relative; overflow: hidden;}
.s_inmode .wrap{margin-top: 160px;}
.s_inmode h2{color: #fff; font-size: 120px; letter-spacing: -0.03em; display: flex; justify-content: flex-end;}
.s_inmode h2 b{display: flex; font-weight: 500; margin-right: 0.2em;}
.s_inmode h2 p{display: flex; font-weight: 200;}
.s_inmode h2{}
.s_inmode .pinBx{
	/* border: 1px solid tomato; */
	width: 100%; height: calc( var(--vh, 1vh) * 100 ); position: relative;
	display: flex; justify-content: center; align-items: center;
}
.s_inmode .pinBx ._imgBx.bg{position: absolute;}
.s_inmode .pinBx ._imgBx.bg.n1{left: 0; bottom: 0; transform: translateY(10%);  height: calc(996/920* var(--vh, 1vh) * 100 );}
.s_inmode .pinBx ._imgBx.bg.n2{opacity: .07; height: calc(460/920* var(--vh, 1vh) * 100 );}
.s_inmode .cardBx{
	padding-top: 0px; transform: rotate(-90deg);
	width: 180%; width: calc(3000/920* var(--vh, 1vh) * 100 ); flex-shrink: 0;
	border-radius: 50%; position: absolute; top: calc(( (var(--vh, 1vh) * 100)  - (600/920* var(--vh, 1vh) * 100 )) / 2);
	display: flex; align-items: flex-start; justify-content: center;
}
.s_inmode .cardBx::before {
	content:''; display: block; padding-bottom: 100%;
}
.s_inmode .cardBx .card{
	position: absolute; width: calc((430/3000*100) * 1%); height: 50%;
	transform-origin: center bottom;
}


/* 외각선보기 */
/* .s_inmode .pinBx{border: 1px solid tomato; box-sizing: border-box;}
.s_inmode .cardBx{border: 1px solid tomato; box-sizing: border-box;}
.s_inmode .cardBx .card{border: 1px solid #000; box-sizing: border-box;} */



/* 각도 */
.s_inmode .cardBx .card:nth-child(1){transform: rotate(0deg);}
.s_inmode .cardBx .card:nth-child(2){transform: rotate(30deg);}
.s_inmode .cardBx .card:nth-child(3){transform: rotate(60deg);}
.s_inmode .cardBx .card:nth-child(4){transform: rotate(90deg);}

.s_inmode .cardBx .card > div{
	background-color: #fff; border-radius: var(--border-radius); position: relative;
	box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.1); top: 0;
	display: flex; align-items: center; justify-content: center;
}
.s_inmode .cardBx .card:not(.last) > div{overflow: hidden; cursor: pointer;}

.s_inmode .cardBx .card:last-child > div{
	box-shadow: none; background-color: #262828;
}
.s_inmode .cardBx .card:last-child .bgBx{
	position: absolute; z-index: -1; background-color: #262828; border-radius: var(--border-radius);
	width: 100%; height: 100%; pointer-events: none;
	box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.1);
}
.s_inmode .cardBx .card ._imgBx{
	position: relative; width: 100%;
	display: flex; align-items: center; justify-content: center;
}
.s_inmode .cardBx .card ._imgBx::before {
	content:''; display: block; padding-bottom: calc(601/431*100%);
}
.s_inmode .cardBx .card ._imgBx img{position: absolute; width: 100%; height: 100%; object-fit: contain;}
.s_inmode .cardBx .card ._imgBx img.n2{opacity: 0; transition: opacity .3s;}
.s_inmode .cardBx .card ._imgBx img.maxWidth{max-width: min(220px,60%);}
html.pc .s_inmode .cardBx .card:hover ._imgBx.img img.n2{opacity: 1;}
.s_inmode .cardBx .card ._imgBx.txt{
	position: absolute; left: calc(40/920* var(--vh, 1vh) * 100 ); bottom: calc(30/920* var(--vh, 1vh) * 100 );  height: calc(40/920* var(--vh, 1vh) * 100 );
}
.s_inmode .cardBx .card ._imgBx.txt img{}


/* 로고 높이 개별 */
.s_inmode .cardBx .card:nth-child(3) ._imgBx.txt{height: calc(25/920* var(--vh, 1vh) * 100 );}
.s_inmode .cardBx .card:nth-child(4) ._imgBx.txt{height: calc(25/920* var(--vh, 1vh) * 100 ); left: unset; bottom: unset;}

.s_inmode .cardDesc{
    position: relative;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0 100px;
}
.s_inmode .cardDesc > div{overflow: hidden;}

.s_inmode .cardDesc p{
    font-size: 17px;
    line-height: calc(30/17);
    font-weight: 300;
    font-family: 'GmarketSans';
    letter-spacing: -0.025em;
    color: #000;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s_inmode h2{font-size: max(calc(120/1440*100vw),40px);}
	.s_inmode .pinBx ._imgBx.bg.n1{display: none;}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s_inmode .wrap{margin-top: 100px;}
    .s_inmode .cardDesc p{font-size: clamp(14px, 14/820*100vw, 17px);}
}
@media screen and (max-width:820px) {
    .s_inmode .cardDesc{width: 90%;}
    .s_inmode .cardDesc p br{display: none;}
}
@media screen and (max-width:500px) {
	.s_inmode .wrap{margin-top: 80px;}

	/* .s_inmode .cardBx{transform: rotate(-114deg);}
	.s_inmode .cardBx .card:nth-child(2){transform: rotate(38deg);}
	.s_inmode .cardBx .card:nth-child(3){transform: rotate(76deg);}
	.s_inmode .cardBx .card:nth-child(4){transform: rotate(114deg);} */
}
@media screen and (max-width:320px) {}


/* 세로가 길경우 */
@media (orientation: Portrait){
	.s_inmode .cardBx{
		width: 400vw;
		top: calc(( (var(--vh, 1vh) * 100)  - (470/920* var(--vh, 1vh) * 100 )) / 2);
	}
}
@media (orientation: Portrait) and (max-width:1600px){}
@media (orientation: Portrait) and (max-width:1440px){}
@media (orientation: Portrait) and (max-width:1280px){
	/* .s_inmode .cardBx{top: calc((( var(--vh, 1vh) * 100 ) - (420/920* var(--vh, 1vh) * 100 )) / 2); width: calc(2100/920* var(--vh, 1vh) * 100 );} */
	/* .s_inmode .cardBx .card > div{width: calc(370/920* var(--vh, 1vh) * 100 ); max-width: 70vw;} */
}
@media (orientation: Portrait) and (max-width:1024px){
    .s_inmode .pinBx ._imgBx.bg.n2{height: auto; width: 80vw;}
}
@media (orientation: Portrait) and (max-width:820px){}
@media (orientation: Portrait) and (max-width:500px){
	.s_inmode .cardBx{
		width: 500vw;
		top: calc(( (var(--vh, 1vh) * 100)  - (380/920* var(--vh, 1vh) * 100 )) / 2);
	}
}



/* 세로가 길경우 */
@media (orientation: Portrait){
	.s_inmode .next ._imgBx.bg{height: 60%;}
    .s_inmode .hexagonBx {width: 95vw;}
    .s_inmode .hexagon .con{font-size: max(calc(38/1920*100vw),12px);}
}
@media (orientation: Portrait) and (max-width:1600px){}
@media (orientation: Portrait) and (max-width:1440px){}
@media (orientation: Portrait) and (max-width:1280px){}
@media (orientation: Portrait) and (max-width:1280px){}
@media (orientation: Portrait) and (max-width:1024px){}
@media (orientation: Portrait) and (max-width:820px){
    .s_inmode .hexagon{width: calc(350/850*100%);}

    .s_inmode .hexagon.n1{transform: translate(0%, -65%);}
    .s_inmode .hexagon.n2{transform: translate(72%, 64%);}
    .s_inmode .hexagon.n3{transform: translate(-72%, 64%);}

    .s_inmode .hexagonBx .line div{width: calc(14% - 20px);}
    .s_inmode .hexagonBx .line .n1{left: 30%;top: 49.6%;transform: rotate(-52deg);}
    .s_inmode .hexagonBx .line .n2{right: 30%;top: 49.6%;transform: rotate(52deg);}
    .s_inmode .hexagonBx .line .n3{bottom: 21.5%;width: calc(18% - 20px);}
	.s_inmode .hexagon .con p br{display: none;}
}
@media (orientation: Portrait) and (max-width:500px){
    .s_inmode .hexagonBx .line div{height: 1px;  background: repeating-linear-gradient(to right, #fff,#fff 2px,transparent 2px,transparent 4px);}
    .s_inmode .hexagon .con{font-size: max(calc(15/500*100vw),10px);}
    .s_inmode .hexagon .con img{height: 1.9em;margin-bottom: .4em;}
    .s_inmode .hexagon.n3 .con img{height: 1em; margin-bottom: 1em;}
}