/* Products - 상세 */
.detail-top{ height: var(--vh); background: var(--grayBg); }
.detail-top .text-box{ height: 100%; }
.detail-top .text-box > div{ height: 100%; }
.detail-top .flex-box{ height: 100%; display: flex; align-items: flex-end; padding-top: var(--headerH); }
.detail-top .left{ width: 560px; }

.detail-top .right{ width: calc(100% - 560px); height: 100%; padding-top: 35px; padding-left: 60px; }
.detail-top .right figure{ width: 100%; height: 100%; position: relative; }
.detail-top .right img{ max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#detail{ padding-top: 0; }
#detail .cloud{ background: #4D4F5B url("/img/sub/product/cloud_bg.jpg") no-repeat top center / cover; }
#detail .detail-tit{ margin-bottom: 60px; text-align: center; }
#detail .detail-tit h3{ --beforeSpacing: 20px; --afterSpacing: 0; font-size: 6.6rem; font-weight: 800; color: #111; }
#detail .detail-tit p{ font-size: 1.8rem; font-weight: 400; color: #333; margin-top: 10px; }

#detail .detail-tit h3.aos-animate{ animation: textSpacing 1s both; }
#detail .detail-tit p.aos-animate{ animation: textClip 1s both; }

#detail .detail-tab{ background: #000; position: sticky; top: 0; left: 0; z-index: 100; }
#detail .detail-tab ul{ display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden;}
#detail .detail-tab ul li{ width: calc(100% / 4); min-height: 65px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: 700; color: #fff; text-align: center; position: relative; padding: 10px; transition: color 0.5s; cursor: pointer; }
#detail .detail-tab ul li::after{ content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); position: absolute; bottom: -1px; left: 0; }
#detail .detail-tab ul li.on{ color: var(--mainColor); }

#detail .overview{ padding: 300px 0 130px; }
#detail .overview .figure-box{ padding: 0 400px; position: relative; }
#detail .overview .figure{ position: relative; }
#detail .overview .figure figure{ width: 100%; text-align: center; }
#detail .overview .figure figure img{ width: 100%; }

#detail .overview .button{ --button: 40px; --margin: 100px; position: absolute; }
#detail .overview .button button{ width: var(--button); height: var(--button); background: rgba(255, 134, 114, 0.3); border: 1px solid var(--mainColor); border-radius: 50%; position: relative; }
#detail .overview .button button::before{ content: ""; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; }
#detail .overview .button button span{ width: 12px; height: 12px; background: url("/img/sub/product/button_plus.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; }

#detail .overview .button .box{ width: 300px; padding: 30px 35px; background: #4D4F5B; border: 1px solid var(--mainColor); border-radius: 5px; box-shadow: 0px 0px 20px var(--mainColor); position: absolute; top: 50%; left: 0; transform: translateY(-50%); margin-left: calc(var(--button) + var(--margin)); pointer-events: none; opacity: 0; transition: opacity 0.5s; cursor: pointer; }
#detail .overview .button .box::before{ content: ""; width: var(--margin); height: 1px; background: var(--mainColor); position: absolute; top: 50%; left: calc(var(--margin) * -1); transform: translateY(-50%); }
#detail .overview .button .box dl *{ color: #fff; }
#detail .overview .button .box dl dt{ font-size: 2rem; font-weight: 700; margin-bottom: 20px; }
#detail .overview .button .box dl dt img{ vertical-align: middle; margin-right: 10px; }
#detail .overview .button .box dl dd{ font-size: 1.8rem; font-weight: 400; }

#detail .overview .button.left .box{ left: unset; right: 0; margin-left: 0; margin-right: calc(var(--button) + var(--margin)); }
#detail .overview .button.left .box::before{ left: unset; right: calc(var(--margin) * -1); }

#detail .overview .button.active{ z-index: 50; }
#detail .overview .button.active button::before{ width: 100%; height: 100%; }
#detail .overview .button.active button span{ opacity: 1; }
#detail .overview .button.active .box{ opacity: 1; pointer-events: auto; }

#detail .overview .popup{ position: absolute; top: 50%; left: 50%; z-index: 70; transform: translate(-50%, -50%); display: none; visibility: hidden; }
#detail .overview .popup .button{ top: 50% !important; left: 50% !important; right: unset !important; bottom: unset !important; transform: translate(-50%, -50%); }
#detail .overview .popup .button button{ display: none; }
#detail .overview .popup .button .box{ margin: 0 !important; position: relative; top: unset !important; right: unset !important; bottom: unset !important; left: unset !important; transform: translate(0) !important; }
#detail .overview .popup .button .box::before{ display: none; }


#detail .benefit{ padding: 200px 0 150px; }
#detail .benefit .detail-tit h3{ color: #fff; }
#detail .benefit .grid-box{ display: grid; grid-template-columns: repeat(4, 1fr); }
#detail .benefit .grid-box .item{ padding: 60px 40px; text-align: center; margin: 10px; position: relative; }
#detail .benefit .grid-box .item .icon img{ filter: brightness(3); -webkit-filter: brightness(3); transition: filter 0.5s; }
#detail .benefit .grid-box .item p{ font-size: 1.8rem; font-weight: 600; color: #fff; line-height: 1.6666; margin-top: 40px; position: relative; top: 0; transition: top 0.5s; }

#detail .benefit .grid-box .item::before, #detail .benefit .grid-box .item::after, #detail .benefit .grid-box .border::before, #detail .benefit .grid-box .border::after{ transition: transform 1s; }

#detail .benefit .grid-box .item::before, #detail .benefit .grid-box .item::after{ content: ""; width: calc(100% - 40px); height: 1px; background: #fff; position: absolute; left: 50%; transform: translateX(-50%) scale(0); }
#detail .benefit .grid-box .item::before{ top: 0; }
#detail .benefit .grid-box .item::after{ bottom: 0; }

#detail .benefit .grid-box .border::before, #detail .benefit .grid-box .border::after{ content: ""; width: 1px; height: calc(100% - 40px); background: #fff; position: absolute; top: 50%; transform: translateY(-50%) scale(0); }
#detail .benefit .grid-box .border::before{ left: 0; }
#detail .benefit .grid-box .border::after{ right: 0; }

#detail .benefit .grid-box .item.aos-animate::before, #detail .benefit .grid-box .item.aos-animate::after{ transform: translateX(-50%) scale(1); } 
#detail .benefit .grid-box .item.aos-animate .border::before, #detail .benefit .grid-box .item.aos-animate .border::after{ transform: translateY(-50%) scale(1); }


#detail .support{ overflow: hidden; }
#detail .support .flex-box{ display: flex; }
#detail .support .flex-box > div{ width: 50%; }

#detail .support .figure .img{ height: 100%; position: relative; padding-bottom: 66.667%; overflow: hidden; }
#detail .support .figure .img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#detail .support .text{ padding-left: 20px; }
#detail .support .text ul{ border-top: 1px solid #EEE; }
#detail .support .text ul li{ padding: 45px 30px; border-bottom: 1px solid #EEE; }
#detail .support .text ul li .box{ display: flex; align-items: center; padding-left: 0; transition: padding 0.5s; }
#detail .support .text ul li .icon{ width: 60px; height: 60px; }
#detail .support .text ul li p{ width: calc(100% - 60px); font-size: 1.8rem; font-weight: 400; color: #333; padding-left: 30px; }

#detail .support p.right{ font-size: 1.6rem; font-weight: 400; color: #666; text-align: right; margin-top: 20px; }


#detail .specific .table-box table{ min-width: 850px; }

@media screen and (hover: hover){
	#detail .overview .button button:hover::before{ width: 100%; height: 100%; }
	#detail .overview .button button:hover span{ opacity: 1; }

	#detail .benefit .grid-box .item:hover .icon img{ filter: unset; -webkit-filter: unset; }
	#detail .benefit .grid-box .item:hover p{ top: -10px; }

	#detail .support .text ul li:hover .box{ padding-left: 20px; }
}

@media screen and (max-width: 1700px){
	.detail-top .left{ width: 450px; }
	.detail-top .right{ width: calc(100% - 450px); }


	#detail .detail-tab ul li{ min-height: 60px; font-size: 1.7rem; }
	#detail .detail-tit{ margin-bottom: 40px; }
	#detail .detail-tit h3{ font-size: 5.5rem; }


	#detail .overview{ padding: 200px 0 130px; }
	#detail .overview .button .box{ padding: 20px 30px; }
	#detail .overview .button .box dl dt{ font-size: 1.9rem; margin-bottom: 10px; }
	#detail .overview .button .box dl dd{ font-size: 1.7rem; }


	#detail .benefit{ padding: 150px 0; }
	#detail .benefit .grid-box .item{ padding: 40px 30px; }
	#detail .benefit .grid-box .item p{ font-size: 1.7rem; margin-top: 30px; }


	#detail .support .text ul li{ padding: 30px 20px; }
}

@media screen and (max-width: 1600px){
	#detail br{ display: none; }


	#detail .overview .figure-box{ padding: 0 300px; }

	#detail .overview .button{ --margin: 50px; }
	#detail .overview .button .box{ width: 250px; }
}

@media screen and (max-width: 1400px){
	#detail .overview .figure-box{ padding: 0 100px; }
	#detail .overview .figure .box{ display: none; }

	#detail .overview .popup{  visibility: visible; }
}

@media screen and (max-width: 1280px){
	#detail .detail-tab ul li{ min-height: 60px; font-size: 1.6rem; }
	#detail .detail-tit{ margin-bottom: 30px; }
	#detail .detail-tit h3{ --beforeSpacing: 10px; font-size: 4.5rem; }
	#detail .detail-tit p{ font-size: 1.7rem; }


	#detail .overview{ padding: 150px 0 50px; }
	#detail .overview .button .box dl dt{ font-size: 1.8rem; }
	#detail .overview .button .box dl dd{ font-size: 1.6rem; }

	#detail .benefit{ padding: 100px 0; }
	#detail .benefit .grid-box .item{ padding: 30px 20px; }
	#detail .benefit .grid-box .item p{ font-size: 1.6rem; margin-top: 20px; }


	#detail .support .text ul li p{ font-size: 1.7rem; }
	#detail .support p.right{ font-size: 1.5rem; margin-top: 10px; }
}

@media screen and (max-width: 1200px){
	#detail .benefit .grid-box{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 1100px) and (min-height: 700px){
	.detail-top .flex-box{ flex-direction: column-reverse; }
	.detail-top .left{ width: 100%; }
	.detail-top .right{ width: 100%; height: auto; display: flex; flex: 1 0 auto; padding: 0 50px; }
}

@media screen and (max-width: 1000px){
	#detail .support .flex-box{ flex-direction: column; }
	#detail .support .flex-box > div{ width: 100%; }

	#detail .support .text{ padding-left: 0; padding-top: 30px; }
	#detail .support .text ul li{ padding: 20px; }
}

@media screen and (max-width: 900px){
	#detail .detail-tab ul li{ min-height: 55px; }
	#detail .detail-tit h3{ --beforeSpacing: 5px; font-size: 3.8rem; }

	#detail .overview .figure-box{ padding: 0; }
	#detail .overview .button{ --button: 30px; }
}

@media screen and (max-width: 800px){
	.detail-top .flex-box{ flex-direction: column-reverse; }
	.detail-top .left{ width: 100%; }
	.detail-top .right{ width: 100%; height: auto; display: flex; flex: 1 0 auto; padding: 0; }
}

@media screen and (max-width: 650px){
	#detail .detail-tab ul li{ width: calc(100% / 2); }
}

@media screen and (max-width: 600px){
	#detail .overview .figure .button{ transform: translate(-5px, -5px); }
}