*{ box-sizing: border-box; }
figure{ display: inline-block; margin: 0; }
select::-ms-expand { display: none; }
select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
	outline: none;
}
input{ outline: none; border: none; }
input[type="submit"],input[type="button"], input[type="file"],
input[type="text"], button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0;-webkit-border-radius: 0; -moz-border-radius: 0; }
input[type="checkbox"]{ padding: 0 !important; }


/* paging 변수 */
.paging{ display: flex; justify-content: center; align-items: center; margin-top: 100px; }
.paging a{ width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; background: none; border: none; border-radius: 50%; font-size: 19px; font-weight: 500; color: #111; }

.paging .arr a:not(:last-of-type){ margin-right: 5px; }
.paging .arr a i{ display: inline-flex; vertical-align: middle; transform: unset !important; }
.paging .arr a i:not(:last-of-type){ margin-right: 1px; }
.paging .arr a i::before{ content: ""; display: inline-block; width: 6px; height: 10px; }
.paging .arr a i.xi-angle-left-min::before{ background: url("/img/board/paging_prev.svg") no-repeat center center / contain; }
.paging .arr a i.xi-angle-right-min::before{ background: url("/img/board/paging_next.svg") no-repeat center center / contain; }

.paging ul li:not(:last-of-type){ margin-right: 5px; }
.paging ul li.on a{ background: transparent; border: 2px solid var(--mainColor); color: var(--mainColor); }

@media screen and (max-width: 1700px){
	.paging{ margin-top: 70px; }
	.paging a{ width: 40px; height: 40px; font-size: 17px; }
}

@media screen and (max-width: 1280px){
	.paging{ margin-top: 40px; }
	.paging a{ width: 35px; height: 35px; font-size: 16px; }
}

@media screen and (max-width: 900px){
	.paging a{ width: 30px; height: 30px; }

	.paging .arr a:not(:last-of-type){ margin-right: 0; }
	.paging ul li:not(:last-of-type){ margin-right: 0; }
}


/* 팝업 */
.popup-box{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
.popup-box .blank{ width: 100%; height: 100%; }
.popup-box .inner{ width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.popup-box .close{ background: none; border: none; padding: 15px; margin: -15px; position: absolute; top: 30px; right: 30px; }
.popup-box .close i{ display: inline-block; width: 16px; height: 16px; background: url("/img/sub/icon_close.svg") no-repeat center center / contain; }

@media screen and (max-width: 1280px){
	.popup-box .close{ top: 25px; right: 25px; }
}



/* 검색창 변수 */
.search-box{
	--height: 70px;
	--select: 310px;
	--input: 640px;
	--padding: 30px;
}

.search-box{ display: flex; flex-wrap: wrap; margin-bottom: 60px; position: relative; z-index: 200; }
.search-box *{ font-size: 17px; font-weight: 300; color: #555; text-align: left; }
.search-box .flex{ display: flex; }

.search-box .custom-select{ width: var(--select); position: relative; z-index: 10; cursor: pointer; }
.search-box .custom-select button{ width: 100%; height: var(--height); background: var(--grayBg); border: 1px solid var(--grayBg); border-radius: 100px; padding: 0 var(--padding); padding-right: calc((var(--padding) * 2) + 10px); position: relative; }
.search-box .custom-select button::after{ content: ""; width: 10px; height: 100%; background: url("/img/board/search_arrow.svg") no-repeat center center / contain; position: absolute; top: 0; right: var(--padding); }
.search-box .custom-select ul{ display: none; background: #FFF; border: 1px solid #E5E5E5; border-top: none; border-radius: 0 0 30px 30px; position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; }
.search-box .custom-select ul li{ border-top: 1px solid #E5E5E5; }
.search-box .custom-select ul li a{ min-height: 50px; display: flex; align-items: center; padding: 10px var(--padding); }
.search-box .custom-select ul li a *{ color: inherit; }
.search-box .custom-select sup{ display: inline-block; font-size: small; vertical-align: super; margin-top: -0.3em; }

.search-box .custom-select.on button{ background: #FFF; border-color: #E5E5E5; border-bottom: none; border-radius: 30px 30px 0 0; }
.search-box .custom-select.on button::after{ transform: scaleY(-1); }


.search-box .input{ max-width: calc(100% - var(--select) - 10px); width: var(--input); position: relative; margin-left: auto; }
.search-box .input input{ width: 100%; height: var(--height); background: var(--grayBg); border-radius: 100px; -webkit-border-radius: 100px; padding: 0 var(--padding); padding-right: calc((var(--padding) * 2) + 17px); }
.search-box .input input::placeholder{ color: #CCC; }
.search-box .input button{ width: calc((var(--padding) * 2) + 17px); height: var(--height); background: none; border: none; padding: 0; position: absolute; top: 0; right: 0; }
.search-box .input button i{ display: block; height: 18px; background: url("/img/board/search_icon.svg") no-repeat center center / contain; }


/* two */
.search-box.two .custom-select{ margin-left: 10px; }
.search-box.two .custom-select:first-of-type{ margin-left: 0; }
.search-box.two .input{ max-width: calc(100% - (var(--select) * 2) - 20px); }


/* view-select */
.view-select{ width: 195px; height: 50px; margin-top: -40px; margin-bottom: 60px; margin-left: auto; position: relative; z-index: 100; cursor: pointer; }
.view-select *{ font-size: 15px; font-weight: 300; color: #555; }
.view-select button{ width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; background: #FFF; border: 1px solid #E5E5E5; border-radius: 100px; padding: 0 20px; position: relative; }
.view-select button::after{ content: ""; width: 10px; height: 100%; background: url("/img/board/search_arrow.svg") no-repeat center center / contain; position: absolute; top: 0; right: 20px; }
.view-select ul{ width: 100%; display: none; background: #FFF; border: 1px solid #E5E5E5; border-radius: 0 0 25px 25px; border-top: 0; position: absolute; top: calc(100% - 1px); left: 0; overflow: hidden; }
.view-select ul li{ border-top: 1px solid #E5E5E5; }
.view-select ul li a{ display: block; background: transparent; padding: 15px 20px; }

.view-select.on button{ border-radius: 25px 25px 0 0; }
.view-select.on button::after{ transform: scaleY(-1); }

@media screen and (hover: hover) and (pointer: fine){
	.search-box .custom-select ul li:hover a{ background: var(--mainColor); color: #FFF; }

	/* view-select */
	.view-select ul li:hover a{ background: var(--mainColor); color: #FFF; }
}

@media screen and (max-width: 1700px){
	.search-box{
		--height: 60px;
		--select: 270px;
		--input: 600px;
		--padding: 25px;
	}
	.search-box{ margin-bottom: 40px; }
	.search-box .custom-select ul li a{ min-height: 45px; }

	/* view-select */
	.view-select{ margin-top: -20px; margin-bottom: 40px; }
}

@media screen and (max-width: 1280px){
	.search-box{
		--height: 55px;
		--select: 200px;
		--padding: 20px;
	}
	.search-box{ margin-bottom: 25px; }
	.search-box *{ font-size: 16px; }
	.search-box .custom-select ul{ border-radius: 0 0 25px 25px; }
	.search-box .custom-select ul li a{ min-height: 40px; }

	.search-box .custom-select.on button{ border-radius: 25px 25px 0 0; }

	/* view-select */
	.view-select{ margin-top: -15px; margin-bottom: 25px; }
}

@media screen and (max-width: 900px){
	/* two */
	.search-box.two{ flex-wrap: wrap; }
	.search-box.two .custom-select{ width: calc((100% - 10px) / 2); margin-bottom: 10px; }
	.search-box.two .input{ max-width: 100%; width: 100%; }

	/* view-select */
	.view-select{ width: calc((100% - 10px) / 2); height: 45px; }
	.view-select ul{ border-radius: 0 0 20px 20px; }
	.view-select ul li a{ padding-block: 12px; }
	.view-select.on button{ border-radius: 20px 20px 0 0; }
}

@media screen and (max-width: 700px){
	.search-box .custom-select,
	.search-box .input{ max-width: 100%; width: 100%; }
	.search-box .custom-select{ margin-bottom: 10px; }
}

@media screen and (max-width: 499px){
	.search-box *{ font-size: 18px; }

	/* view-select */
	.view-select{ height: 50px; }
	.view-select *{ font-size: 17px; }
}


/* 이미지 게시판 */
.img-board{
	--gapB: 60px; 
	--gapR: 20px; 
	--line: 5; 
}
.img-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
.img-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); }
.img-board .item:nth-of-type(5n){ margin-right: 0; }
.img-board .item figure{ display: block; border: 1px solid #E5E5E5; border-radius: 10px; padding-bottom: 99%; position: relative; overflow: hidden; }
.img-board .item figure img{ object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.img-board .item h6{ font-size: 20px; font-weight: 500; color: #111; margin: 30px 0 10px; word-break: break-all; }
.img-board .item p{ font-size: 17px; font-weight: 300; color: #555; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10px; }
.img-board .item span{ font-size: 17px; font-weight: 400; color: #CCC; }

/* type02 */
.img-board.type02 .item figure{ padding-bottom: 139.585%; }

/* type03 */
.img-board.type03{
	--line: 3;
}
.img-board.type03 .item:nth-of-type(5n){ margin-right: var(--gapR); }
.img-board.type03 .item:nth-of-type(3n){ margin-right: 0; }
.img-board.type03 .item figure{ border: none; padding-bottom: 56.13%; }
.img-board.type03 .item h6{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }


@media screen and (max-width: 1700px){
	.img-board .item h6{ font-size: 19px; margin-top: 20px; }
	.img-board .item p{ font-size: 16px; }
	.img-board .item span{ font-size: 16px; }
}

@media screen and (max-width: 1280px){
	.img-board{
		--gapB: 40px; 
	}
	.img-board .item h6{ font-size: 17px; margin-top: 10px; }
	.img-board .item p{ font-size: 15px; }
	.img-board .item span{ font-size: 15px; }
}

@media screen and (max-width: 1200px){
	.img-board{
		--line: 4; 
	}
	.img-board .item:nth-of-type(5n){ margin-right: var(--gapR); }
	.img-board .item:nth-of-type(4n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	.img-board{
		--line: 3; 
	}
	.img-board .item:nth-of-type(4n){ margin-right: var(--gapR); }
	.img-board .item:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 700px){
	.img-board{
		--line: 2; 
	}
	.img-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.img-board .item:nth-of-type(2n){ margin-right: 0; }

	/* type03 */
	.img-board.type03{
		--line: 2;
	}
	.img-board.type03 .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.img-board.type03 .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 499px){
	.img-board .item h6{ font-size: 19px; }
	.img-board .item p{ font-size: 17px; }
	.img-board .item span{ font-size: 17px; }
}


/* 비디오 게시판 */
.video-board{
	--gapB: 60px; 
	--gapR: 20px; 
	--line: 3; 
}
.video-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
.video-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); cursor: pointer; }
.video-board .item:nth-of-type(3n){ margin-right: 0; }
.video-board .item figure{ display: block; border: 1px solid #E5E5E5; border-radius: 10px; padding-bottom: 55.7%; position: relative; overflow: hidden; }
.video-board .item figure img{ width: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.video-board .item h6{ font-size: 20px; font-weight: 500; color: #111; margin-top: 30px; word-break: break-all; }

/* popup - video */
.popup-box.video .inner{ max-width: 1000px; }
.popup-box.video .iframe{ padding-bottom: 56.26%; position: relative; }
.popup-box.video .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
	.video-board .item h6{ font-size: 19px; margin-top: 20px; }
}

@media screen and (max-width: 1280px){
	.video-board{
		--gapB: 40px; 
	}
	.video-board .item h6{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 700px){
	.video-board{
		--line: 2; 
	}
	.video-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.video-board .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 499px){
	.video-board .item h6{ font-size: 19px; }
}



/* 인증 게시판 */
.certify-board{ 
	--gapB: 38px; 
	--gapR: 38px; 
	--line: 5; 
}
.certify-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
.certify-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); cursor: pointer; }
.certify-board .item:nth-of-type(5n){ margin-right: 0; }
.certify-board .item figure{ display: block; border: 1px solid #E0E0E0; border-radius: 10px; padding-bottom: 121%; position: relative; overflow: hidden; }
.certify-board .item figure img{ height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.4s; }
.certify-board .item h6{ font-size: 18px; font-weight: 500; color: #000; text-align: center; margin-top: 20px; word-break: break-all; }

/* 인증 팝업 */
.popup-box.certify .inner{ max-width: 550px; }
.popup-box.certify figure{ display: block; position: relative; padding-bottom: 133.457%; overflow: hidden; }
.popup-box.certify figure img{ height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (hover: hover) and (pointer: fine){
	.certify-board .item:hover figure img{ transform: translate(-50%, -50%) scale(1.3); }
}

@media screen and (max-width: 1700px){
	.certify-board .item h6{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
	.certify-board .item h6{ font-size: 16px; margin-top: 10px; }
}

@media screen and (max-width: 1200px){
	.certify-board{ 
		--gapR: 30px; 
		--line: 4; 
	}
	.certify-board .item:nth-of-type(5n){ margin-right: var(--gapR); }
	.certify-board .item:nth-of-type(4n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	.certify-board{ 
		--gapR: 20px; 
		--line: 3; 
	}
	.certify-board .item:nth-of-type(4n){ margin-right: var(--gapR); }
	.certify-board .item:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 650px){
	.certify-board{ 
		--line: 2; 
	}
	.certify-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.certify-board .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 499px){
	.certify-board .item h6{ font-size: 18px; }
}


/* Products - 리스트 */
.prod-board{ 
	--gapB: 25px; 
	--gapR: 25px; 
	--line: 3; 
}
.prod-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
.prod-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); background: var(--grayBg); border: 2px solid var(--grayBg); border-radius: 10px; text-align: center; margin-right: var(--gapR); margin-bottom: var(--gapB); transition: background 0.4s, border-color 0.4s; }
.prod-board .item:nth-of-type(3n){ margin-right: 0; }
.prod-board .item a{ height: 100%; display: flex; flex-direction: column; padding: 20px; }
.prod-board .item .txt{ flex: 1 0 auto; margin: 40px 0; position: relative; }
.prod-board .item .txt h2{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.prod-board .item .txt p{ font-size: 18px; font-weight: 200; color: #333; }

.prod-board .item .img{ position: relative; }
.prod-board .item .img figure{ display: block; padding-bottom: 67.57%; position: relative; overflow: hidden; }
.prod-board .item .img figure img{ width: auto; max-height: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.4s; }
.prod-board .item .img i{ width: 70px; height: 70px; display: flex; flex-direction: column; justify-content: center; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s; }
.prod-board .item .img i::before{ content: ""; height: 14px; display: block; background: url("/img/sub/products/icon_plus.svg") no-repeat center center / contain; }

.prod-board .item .bi{ margin-bottom: 20px; }
.prod-board .item .bi img{ width: 100%; max-height: 27px; }

.prod-board .item .certify{ background: #FFF; border-radius: 5px; }
.prod-board .item .certify ul{ display: flex; justify-content: center; align-items: center; }
.prod-board .item .certify ul li:not(:last-of-type){ margin-right: 5px; }
.prod-board .item .certify ul li img{ width: 60px; }

@media screen and (hover: hover) and (pointer: fine){
	.prod-board .item:hover{ background: #FFF; border-color: var(--mainColor); }
	.prod-board .item:hover .img figure img{ transform: translate(-50%, -50%) scale(1.07); }
	.prod-board .item:hover .img i{ transform: translate(-50%, -50%) scale(1); }
}

@media screen and (max-width: 1700px){
	.prod-board .item .img i{ width: 60px; height: 60px; }

	.prod-board .item .txt{ margin: 30px 0; }
	.prod-board .item .txt p{ font-size: 17px; }

	.prod-board .item .bi{ margin-bottom: 15px; }
	.prod-board .item .bi img{ max-height: 24px; }
}

@media screen and (max-width: 1280px){
	.prod-board .item .img i{ width: 50px; height: 50px; }
	.prod-board .item .img i::before{ height: 12px; }

	.prod-board .item .txt{ margin: 25px 0; }
	.prod-board .item .txt p{ font-size: 16px; }

	.prod-board .item .bi{ margin-bottom: 10px; }
}

@media screen and (max-width: 1000px){
	.prod-board{ 
		--gapB: 15px; 
		--gapR: 15px; 
	}
}

@media screen and (max-width: 950px){
	.prod-board{ 
		--line: 2; 
	}
	.prod-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.prod-board .item:nth-of-type(2n){ margin-right: 0; }
	.prod-board .item a{ padding: 15px; }
}

@media screen and (max-width: 650px){
	.prod-board{ 
		--gapB: 25px; 
	}
	.prod-board .item{ width: 100%; margin-right: 0 !important; }
}

@media screen and (max-width: 499px){
	.prod-board .item .bi img{ max-height: 26px; }
	.prod-board .item .txt p{ font-size: 18px; }
}


/* Products - 상세 */
#detail{ padding-top: 0; }
#detail .mt{ margin-top: 15px; }
#detail .mb{ margin-bottom: 40px; }
#detail .tc{ text-align: center; }
#detail .base{ font-size: 19px; font-weight: 300; color: #333; line-height: 1.5; letter-spacing: 0; }
#detail .detail-list{ margin-top: 70px; text-align: center; }
#detail .detail-top{ background: var(--grayBg2); padding: 105px 0; }
#detail .detail-top .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); align-items: flex-start; }


#detail .detail-top .img{ display: grid; grid-template-columns: 19.5% 80.5%; align-items: flex-start; padding-right: 75px; }
#detail .detail-top .img .left{ order: 2; padding-left: 40px; }
#detail .detail-top .img .right{ display: flex; flex-direction: column; margin: -20px 0; }
#detail .detail-top .img figure{ display: block; padding-bottom: 67.5%; position: relative; overflow: hidden; }
#detail .detail-top .img figure img{ max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#detail .detail-top .iframe{ width: 100%; height: 100%; border-radius: 10px; overflow: hidden; position: absolute; top: 50%; left: 50%; z-index: 100; transform: translate(-50%, -50%); }
#detail .detail-top .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .detail-top .iframe + figure img{ width: 100%; max-height: unset; }

#detail .detail-top .img button{ width: 100%; background: none; border: none; padding: 20px 0; }
#detail .detail-top .img button i{ display: block; height: 10px; }
#detail .detail-top .img .prev i{ background: url("/img/sub/products/icon_prev.svg") no-repeat center center / contain; }
#detail .detail-top .img .next i{ background: url("/img/sub/products/icon_next.svg") no-repeat center center / contain; }

#detail .detail-top .slick-slide{ position: relative; }
#detail .detail-top .img .big{ border-radius: 10px; overflow: hidden; }
#detail .detail-top .img .small-wrap{ flex: 1 0 auto; margin: 5px 0; }
#detail .detail-top .img .small-wrap .slick-list{ margin-bottom: -10px; }
#detail .detail-top .img .small{ background: #FFF; border: 2px solid transparent; border-radius: 10px; overflow: hidden; margin-bottom: 10px; cursor: pointer; }
#detail .detail-top .img .small.slick-current{ border-color: var(--mainColor); }
#detail .detail-top .img .small.current{ border-color: var(--mainColor); }



#detail .detail-top .txt{ padding-left: 25px; position: relative; }
#detail .detail-top .txt .bi img{ width: auto; max-height: 55px; }
#detail .detail-top .txt .bi em{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#detail .detail-top dl{ padding: 60px 0; }
#detail .detail-top dl dt{ font-size: 23px; font-weight: 500; color: #111; margin-bottom: 30px; }
#detail .detail-top dl dd{ font-size: 19px; font-weight: 200; color: #333; line-height: 1.7; }
#detail .detail-top dl dd strong{ font-weight: 500; }
#detail .detail-top .certify{ position: absolute; top: 0; right: 0; transform: translateY(-100%); }
#detail .detail-top .certify ul{ display: inline-flex; background: #FFF; border-radius: 5px; padding: 0 5px; }
#detail .detail-top .certify ul li:not(:last-of-type){ margin-right: 5px; }
#detail .detail-top .certify ul li img{ height: 80px; }
#detail .detail-top .btn{ display: flex; justify-content: space-between; }
#detail .detail-top .btn > *{ width: calc((100% - 10px) / 2); min-height: 65px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border: none; border-radius: 10px; font-size: 19px; font-weight: 400; color: #FFF; text-align: center; outline: none; }
#detail .detail-top .btn .gray{ background: #6B6C6D; }
#detail .detail-top .btn i{ display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; }
#detail .detail-top .btn .inquiry i{ background: url("/img/sub/products/icon_inquiry.svg") no-repeat center center / contain; }
#detail .detail-top .btn .cart i{ background: url("/img/sub/products/icon_cart.svg") no-repeat center center / contain; }


#detail .detail-bottom{ position: relative; }
#detail .detail-bottom section:not(:first-of-type){ display: none; }
#detail .detail-bottom section *{ letter-spacing: 0; }
#detail .detail-bottom .pt{ padding-top: 150px; }
#detail .detail-bottom h4{ font-size: 36px; font-weight: 500; color: #111; text-align: center; margin-bottom: 50px; }
#detail .detail-bottom h5{ font-size: 32px; font-weight: 500; color: #111; line-height: 1.5; }

#detail .tab-menu{
	--top: 35px;
}
#detail .tab-menu{ display: block !important; padding-top: var(--top); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; pointer-events: none; }
#detail .tab-menu > div{ max-width: 1300px; width: 100%; height: 100%; padding: 0 10px; }
#detail .tab-menu ul{ --on: 0; display: flex; background: #6B6C6D; border-radius: 100px; position: sticky; top: calc(var(--headerH) + 20px); left: 0; pointer-events: auto; }
#detail .tab-menu ul::before{ content: ""; width: calc(100% / var(--length)); height: 100%; background: var(--mainColor); border-radius: 100px; position: absolute; top: 0; left: 0; transform: translateX(calc(var(--on) * 100%)); transition: transform 0.4s; }
#detail .tab-menu ul li{ width: 20%; flex: 1 0 auto; position: relative; z-index: 10; }
#detail .tab-menu ul li button{ width: 100%; min-height: 45px; background: transparent; border: none; font-size: 16px; font-weight: 300; color: #FFF; text-align: center; }
#detail .tab-menu ul li.on button{ font-weight: 500; }


/* Feature */
#detail .feature{
	--ptb: 70px;
}
#detail .feature{ overflow: hidden; }
#detail .feature > div{ opacity: 1 !important; }
#detail .feature figure.border{ display: block; background: #FFF; border: 1px solid var(--borderC); border-radius: 10px; padding: 50px; text-align: center; }

#detail .feature .key{ background: url("/img/sub/products/keyfeature_bg.jpg") no-repeat center center / cover; }
#detail .feature .key .grid-box{ display: grid; grid-template-columns: 380px calc(100% - 380px); opacity: 0; transform: translateY(var(--aosP)); transition: opacity var(--aosT), transform var(--aosT); }
#detail .feature .key h5{ color: #FFF; }
#detail .feature .key ul{ display: grid; grid-template-columns: repeat(2, 50%); margin: 0 -7px; margin-bottom: -15px; }
#detail .feature .key ul li{ font-size: 20px; font-weight: 200; color: #FFF; line-height: 1.5; padding-left: 28px; position: relative; margin: 0 7px; margin-bottom: 15px; }
#detail .feature .key ul li::before{ content: ""; width: 13px; height: 1.5em; background: url("/img/sub/products/icon_list_check.svg") no-repeat center center / contain; position: absolute; top: 0; left: 0; }

#detail .feature .sec{ padding: var(--ptb) 0; }
#detail .feature .sec .flex-box{ display: flex; }
#detail .feature .sec .flex-box > div{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }
#detail .feature .sec .img{ width: 50%; padding-inline: 40px; }
#detail .feature .sec .txt{ width: 50%; padding-inline: 10px; transform: translateY(var(--aosP)) }
#detail .feature .sec .txt > *:not(:last-child){ margin-bottom: 30px; }
#detail .feature .sec .txt dt{ font-size: 21px; font-weight: 500; color: #333; margin-bottom: 10px; } 
#detail .feature .sec .txt dd, 
#detail .feature .sec .txt p{ font-size: 19px; font-weight: 300; color: #333; line-height: 1.5; letter-spacing: 0; }
#detail .feature .sec .txt p::before{ content: ""; width: 20px; height: 3px; display: block; margin-right: auto; background: var(--mainColor); margin-bottom: 15px; }
#detail .feature .sec .txt strong{ font-weight: 500; }

#detail .feature .sec .txt ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -7px; margin-top: 40px; text-align: center; }
#detail .feature .sec .txt ul li{ margin: 7px; }
#detail .feature .sec .txt ul li span{ display: block; font-size: 16px; font-weight: 500; color: #333; margin-top: 15px; }

#detail .feature .sec:nth-of-type(odd) .flex-box{ flex-direction: row-reverse; }
#detail .feature .sec:nth-of-type(odd) .img{ text-align: right; padding-right: 0; transform: translateX(var(--aosP)); } 
#detail .feature .sec:nth-of-type(odd) .txt{ padding-left: 0; }

#detail .feature .sec:nth-of-type(even){ background: var(--grayBg2); }
#detail .feature .sec:nth-of-type(even) .img{ padding-left: 0; transform: translateX(var(--aosM)); }
#detail .feature .sec:nth-of-type(even) .txt{ padding-right: 0; }
#detail .feature .sec:nth-of-type(even) .tech .table-box thead th{ background: #F1F1F1; }

#detail .feature .key.aos-animate .grid-box{ opacity: 1; transform: translateY(0); }
#detail .feature .sec.aos-animate .img{ opacity: 1; transform: translateX(0) !important; }
#detail .feature .sec.aos-animate .txt{ opacity: 1; transform: translateY(0); }


#detail .feature .gallery .grid{ display: grid; grid-template-columns: repeat(2, 50%); margin: -30px; }
#detail .feature .gallery .block{ grid-column: auto / span 2; }
#detail .feature .gallery .item{ display: flex; flex-direction: column; background: #FFF; border-radius: 10px; padding: 50px; margin: 30px; }
#detail .feature .sec:nth-of-type(odd) .gallery .item{ border: 1px solid var(--borderC); }
#detail .feature .gallery .item p{ font-size: 24px; font-weight: 500; color: #333; margin-bottom: 25px; }
#detail .feature .gallery .item figure{ flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } 
#detail .feature .gallery .item ul{ display: flex; }

#detail .feature .gallery .grid03{ grid-template-columns: repeat(3, calc(100% / 3)); }
#detail .feature .gallery .grid03 .block{ grid-column: auto / span 3; }
#detail .feature .gallery .grid03 .block2{ grid-column: auto / span 2; }



/* Tech Specs */
#detail .tech .sec:not(:last-of-type){ padding-bottom: 140px; }

#detail .tech .table-box{ padding-bottom: 15px; overflow-x: auto; overflow-y: clip; }
#detail .tech .table-box.tc{ text-align: center; }
#detail .tech .table-box *{ font-size: 17px; line-height: 1.5; }
#detail .tech .table-box table{ background: #FFF; border-top: 2px solid #000; }
#detail .tech .table-box colgroup col{ width: 100%; }
#detail .tech .table-box colgroup .th{ width: 240px; }
#detail .tech .table-box tr > *:last-child{ border-right: none !important; }
#detail .tech .table-box th,
#detail .tech .table-box td{ border: 1px solid var(--borderC); border-left: none; padding: 25px 30px; }
#detail .tech .table-box th{ background: var(--grayBg); font-weight: 500; color: #111; }
#detail .tech .table-box td{ font-weight: 200; color: #333; }

#detail .tech .table-box thead + tbody th{ background: transparent; }


/* Downloads */
#detail .download .download-board li{ position: relative; }
#detail .download .download-board li:not(:last-of-type){ margin-bottom: 10px; }
#detail .download .download-board li::after{ content: ""; width: 100%; height: 100%; border: 2px solid var(--mainColor); border-radius: 10px; position: absolute; top: 0; left: 0; opacity: 0; box-sizing: border-box; pointer-events: none; transition: opacity 0.3s; }
#detail .download .download-board li a{ display: grid; grid-template-columns: calc(100% - 75px) 75px; align-items: center; border: 1px solid var(--borderC); border-radius: 10px; padding: 40px 60px; }
#detail .download .download-board .txt{ padding-right: 40px; }
#detail .download .download-board .txt h6{ font-size: 22px; font-weight: 500; color: #111; margin-bottom: 23px; }
#detail .download .download-board .txt p{ font-size: 16px; font-weight: 400; color: #CCC; }
#detail .download .download-board i{ display: block; background: var(--grayBg); border-radius: 50%; padding-bottom: 100%; position: relative; transition: background 0.3s; }
#detail .download .download-board i::before{ content: ""; display: block; width: 100%; height: 19px; background: url("/img/sub/products/icon_link.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: filter 0.3s; }
#detail .download .download-board .popup i::before{ background-image: url("/img/sub/products/icon_download.svg"); }

#detail .download .more{ text-align: center; margin-top: -25px; position: relative; z-index: 10; pointer-events: none; }
#detail .download .more::before{ content: ""; width: 100%; height: 157px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%); position: absolute; top: calc(50% + 2px); left: 0; z-index: -1; transform: translateY(-100%); }
#detail .download .more::after{ content: ""; width: 100%; height: 5px; background: #FFF; position: absolute; top: calc(50% - 2px); left: 0; z-index: -1; transform: translateY(-50%); }
#detail .download .more button{ width: 50px; height: 50px; background: #FFF; border: 2px solid var(--borderC); border-radius: 50%; pointer-events: auto; }
#detail .download .more button i{ display: block; height: 12px; background: url("/img/sub/products/icon_more.svg") no-repeat center center / contain; }


/* video-board */
#detail .video-board{ 
	--gapR: 25px;
	--gapB: 70px;
	--line: 3;
}
#detail .video-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
#detail .video-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); position: relative; cursor: pointer; }
#detail .video-board .item:nth-of-type(3n){ margin-right: 0; }

#detail .video-board .thumb{ position: relative; }
#detail .video-board .thumb figure{ display: block; padding-bottom: 56.26%; border-radius: 10px; position: relative; overflow: hidden; }
#detail .video-board .thumb figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .video-board .thumb i{ width: 50px; height: 50px; display: flex; flex-direction: column; justify-content: center; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .video-board .thumb i::before{ content: ""; display: block; height: 8px; background: url("/img/sub/products/icon_play.svg") no-repeat center center / contain; }

#detail .video-board .player{ display: none; border-radius: 10px; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#detail .video-board .player iframe{ width: 100%; height: 100%; }

#detail .video-board .txt h6{ font-size: 23px; font-weight: 500; color: #111; margin-bottom: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 30px 0 20px; }
#detail .video-board .txt p{ height: 4.5em; display: -webkit-box; font-size: 17px; font-weight: 200; color: #333; line-height: 1.5; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


@media screen and (hover: hover) and (pointer: fine){
	#detail .tab-menu ul:hover::before{ transform: translateX(calc(var(--idx) * 100%)); }

	/* Downloads */
	#detail .download .download-board li:hover::after{ opacity: 1; }
	#detail .download .download-board li:hover i{ background: var(--mainColor); }
	#detail .download .download-board li:hover i::before{ filter: brightness(3); -webkit-filter: brightness(3); }
}

@media screen and (max-width: 1700px){
	#detail .mb{ margin-bottom: 30px; }
	#detail .base{ font-size: 18px; }

	#detail .detail-top{ padding: 80px 0; }
	#detail .detail-top .txt .bi img{ max-height: 45px; }
	#detail .detail-top dl{ padding: 40px 0; }
	#detail .detail-top dl dt{ font-size: 21px; margin-bottom: 20px; }
	#detail .detail-top dl dd{ font-size: 18px; }
	#detail .detail-top .btn > *{ min-height: 60px; font-size: 18px; }

	#detail .detail-bottom h4{ font-size: 32px; margin-bottom: 35px; }
	#detail .detail-bottom h5{ font-size: 28px; }

	#detail .tab-menu ul li button{ font-size: 15px; }


	/* Feature */
	#detail .feature figure.border{ padding: 35px; }

	#detail .feature .key .grid-box{ grid-template-columns: 300px calc(100% - 300px); }
	#detail .feature .key ul li{ font-size: 18px; }

	#detail .feature .sec .txt dt{ font-size: 19px; } 
	#detail .feature .sec .txt dd, 
	#detail .feature .sec .txt p{ font-size: 18px; }

	#detail .feature .gallery .item{ padding: 35px; }
	#detail .feature .gallery .item p{ font-size: 22px; }


	/* Tech Specs */
	#detail .tech .sec:not(:last-of-type){ padding-bottom: 100px; }
	#detail .tech .table-box colgroup .th{ width: 200px; }
	#detail .tech .table-box th,
	#detail .tech .table-box td{ padding: 20px 25px; }


	/* Downloads */
	#detail .download .download-board li a{ grid-template-columns: calc(100% - 65px) 65px; padding: 30px 50px; }
	#detail .download .download-board .txt h6{ font-size: 20px; }

	#detail .download .more{ margin-top: -22px; }
	#detail .download .more::before{ height: 131px; }
	#detail .download .more button{ width: 45px; height: 45px; }

	
	/* video-board */
	#detail .video-board .txt h6{ font-size: 21px; margin: 25px 0 15px; }
}

@media screen and (max-width: 1280px){
	#detail .mt{ margin-top: 10px; }
	#detail .mb{ margin-bottom: 20px; }
	#detail .base{ font-size: 17px; }

	#detail .detail-top .img{ padding-right: 30px; }
	#detail .detail-top .txt{ padding-left: 0; }
	#detail .detail-top .txt .bi img{ max-height: 35px; }
	#detail .detail-top dl{ padding: 30px 0; }
	#detail .detail-top dl dt{ font-size: 20px; margin-bottom: 10px; }
	#detail .detail-top dl dd{ font-size: 17px; }
	#detail .detail-top .certify{ margin-bottom: 30px; position: relative; top: unset; transform: unset; }
	#detail .detail-top .btn > *{ min-height: 55px; font-size: 17px; }
	#detail .detail-top .btn i{ width: 18px; height: 18px; }

	#detail .detail-bottom .pt{ padding-top: 100px; }
	#detail .detail-bottom h4{ font-size: 28px; margin-bottom: 20px; }
	#detail .detail-bottom h5{ font-size: 24px; }

	#detail .tab-menu{
		--top: 20px;
	}
	#detail .tab-menu ul li button{ min-height: 40px; font-size: 14px; }


	/* Feature */
	#detail .feature{
		--ptb: 50px;
	}
	#detail .feature figure.border{ padding: 25px; }

	#detail .feature .key .grid-box{ grid-template-columns: 250px calc(100% - 250px); }
	#detail .feature .key ul{ margin-bottom: -10px; }
	#detail .feature .key ul li{ font-size: 17px; padding-left: 20px; margin-bottom: 10px; }
	#detail .feature .key ul li::before{ width: 10px; }

	#detail .feature .sec .txt > *:not(:last-child){ margin-bottom: 20px; }
	#detail .feature .sec .txt dt{ font-size: 18px; } 
	#detail .feature .sec .txt dd, 
	#detail .feature .sec .txt p{ font-size: 17px; }
	#detail .feature .sec .txt p::before{ width: 15px; margin-bottom: 10px; }
	#detail .feature .sec .txt ul{ margin-top: 20px; }

	#detail .feature .grid-gallery h5{ margin-bottom: 20px; }
	#detail .feature .grid-gallery .grid{ margin: -20px; }
	#detail .feature .grid-gallery .item{ padding: 30px; margin: 20px; }
	#detail .feature .grid-gallery .item p{ font-size: 18px; margin-bottom: 15px; }

	#detail .feature .gallery .grid{ margin: -20px; }
	#detail .feature .gallery .item{ padding: 25px; margin: 20px; }
	#detail .feature .gallery .item p{ font-size: 20px; margin-bottom: 15px; }


	/* Tech Specs */
	#detail .tech .sec:not(:last-of-type){ padding-bottom: 60px; }
	#detail .tech .table-box *{ font-size: 16px; }
	#detail .tech .table-box colgroup .th{ width: 170px; }
	#detail .tech .table-box th,
	#detail .tech .table-box td{ padding: 12px 15px; }


	/* Downloads */
	#detail .download .download-board li a{ grid-template-columns: calc(100% - 55px) 55px; padding: 20px 40px; }
	#detail .download .download-board .txt{ padding-right: 30px; }
	#detail .download .download-board .txt h6{ font-size: 18px; margin-bottom: 15px; }
	#detail .download .download-board i::before{ height: 17px; }

	#detail .download .more{ margin-top: -20px; }
	#detail .download .more::before{ height: 101px; }
	#detail .download .more button{ width: 40px; height: 40px; }


	/* video-board */
	#detail .video-board{ 
		--gapR: 20px;
		--gapB: 40px;
	}
	#detail .video-board .thumb i{ width: 45px; height: 45px; }
	#detail .video-board .txt h6{ font-size: 19px; margin: 20px 0 10px; }
	#detail .video-board .txt p{ font-size: 16px; }

	
	/* paging */
	#detail .paging{ margin-top: 40px; }
	#detail .paging a{ width: 35px; height: 35px; font-size: 17px; }
	#detail .paging .arr a i{ width: 5px; height: 8px; }
}

@media screen and (max-width: 1200px){
	#detail .detail-top{ padding: 40px 0; }
	#detail .detail-top .grid-box{ grid-template-columns: repeat(1, 100%); }
	#detail .detail-top .img{ grid-template-columns: 77.5% 22.5%; padding-right: 0; margin-bottom: 30px; }

	#detail .detail-top .img .left{ order: unset; }
	#detail .detail-top .img .right{ margin: -15px 0; }
	#detail .detail-top .img button{ padding: 15px 0; }
	#detail .detail-top .img button i{ height: 7px; }
	#detail .detail-top .img .small-wrap{ margin: 0; }
	#detail .detail-top .img .small-wrap .slick-list{ margin-bottom: -5px; }
	#detail .detail-top .img .small{ margin-bottom: 5px; }

	#detail .detail-top .certify{ width: 100%; }
	#detail .detail-top .certify ul{ width: 100%; justify-content: center; }

	#detail .detail-top .img .left{ padding-left: 0; padding-right: 15px; }
	#detail .detail-top .btn > *{ min-height: 50px; }


	/* Feature */
	#detail .feature .key .grid-box{ grid-template-columns: repeat(1, 100%); }
	#detail .feature .key h5{ margin-bottom: 15px; }

	#detail .feature .sec .flex-box{ flex-direction: column !important; }
	#detail .feature .sec .flex-box > div{ width: 100% !important; padding-inline: 0 !important; }
	#detail .feature .sec .img{ transform: translateY(var(--aosP)) !important; margin-bottom: 20px; }
	#detail .feature .sec .img figure,
	#detail .feature .sec .img figure img{ width: 100%; }

	#detail .feature .sec.aos-animate .img{ transform: translateY(0) !important; }


	/* video */
	#detail .video-board{ 
		--line: 2;
	}
	#detail .video-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	#detail .video-board .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#detail .detail-top .img{ grid-template-columns: 78% 22%; }

	#detail .detail-bottom h4{ font-size: 23px; }
	#detail .detail-bottom h5{ font-size: 21px; }


	/* Feature */
	#detail .feature figure.border{ padding: 15px; }

	#detail .feature .key ul{ grid-template-columns: repeat(1, 100%); margin-bottom: -5px; }
	#detail .feature .key ul li{ margin-bottom: 5px; }


	/* Downloads */
	#detail .download .download-board li a{ padding: 20px 25px; }
	#detail .download .download-board .txt{ padding-right: 25px; }
	#detail .download .download-board .txt h6{ margin-bottom: 10px; }

	#detail .download .more::before{ height: 97px; }


	/* video-board */
	#detail .video-board{ 
		--gapB: 30px;
	}
	#detail .video-board .thumb i{ width: 40px; height: 40px; }
	#detail .video-board .txt h6{ font-size: 17px; margin-top: 15px; }

	#detail .video-board:not(.popup) .item{ width: 100%; margin-right: 0 !important; }
	#detail .video-board:not(.popup) .thumb i{ width: 55px; height: 55px; }
	#detail .video-board:not(.popup) .thumb i::before{ height: 10px; }

	/* paging */
	#detail .paging a{ width: 30px; height: 30px; font-size: 16px; }
	#detail .paging ul{ margin: 0; }
}

@media screen and (max-width: 800px){
	#detail .detail-top .img{ grid-template-columns: 78.5% 21.5%; }
	#detail .mb br{ display: none; }  

	/* Feature */
	#detail .feature .gallery .grid{ grid-template-columns: repeat(1, 100%); }
	#detail .feature .gallery .item ul{ display: flex; }

	#detail .feature .gallery .grid03{ grid-template-columns: repeat(1, 100%); }
	#detail .feature .gallery .grid03 .block, 
	#detail .feature .gallery .grid03 .block2{ grid-column: unset; }
}

@media screen and (max-width: 700px){
	#detail .detail-top .img{ grid-template-columns: 79% 21%; }
}

@media screen and (max-width: 600px){
	#detail .detail-top .img{ grid-template-columns: 79.5% 20.5%; }

	#detail .feature .gallery .item ul{  flex-direction: column; align-items: flex-start; }
	#detail .feature .gallery .item ul li:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 500px){
	#detail .detail-top .img{ grid-template-columns: 80.5% 19.5%; }
}

@media screen and (max-width: 499px){
	#detail .base{ font-size: 19px; }

	#detail .detail-top dl{ padding-top: 20px; }
	#detail .detail-top dl dt{ font-size: 24px; }
	#detail .detail-top dl dd{ font-size: 18px; }
	#detail .detail-top .btn > *{ font-size: 18px; }

	#detail .detail-bottom h4{ font-size: 28px; }
	#detail .detail-bottom h5{ font-size: 26px; }

	#detail .tab-menu ul li button{ font-size: 16px; padding: 10px 0; }

	/* Feature */
	#detail .feature .key h5{ font-size: 26px; }
	#detail .feature .key ul li{ font-size: 19px; }

	#detail .feature .sec .txt dt{ font-size: 21px; } 
	#detail .feature .sec .txt dd,
	#detail .feature .sec .txt p{ font-size: 19px; }

	#detail .feature .gallery .item p{ font-size: 22px; }

	/* Tech Specs */
	#detail .tech .table-box *{ font-size: 18px; }

	/* Downloads */
	#detail .download .download-board .txt h6{ font-size: 20px; }
	#detail .download .download-board .txt p{ font-size: 17px; } 

	/* video-board */
	#detail .video-board .txt h6{ font-size: 19px; }
	#detail .video-board .txt p{ font-size: 18px; }
}


/* PRODUCTS - FACSCOPE® B */
#detail .facscopeB01{ text-align: center; }
#detail .facscopeB01 p{ font-size: 19px; font-weight: 300; color: #333; line-height: 1.5; letter-spacing: 0; margin-top: 25px; }
#detail .facscopeB01 ul{ display: flex; justify-content: center; margin-top: 50px; }
#detail .facscopeB01 ul li:not(:last-of-type){ margin-right: -14px; }
#detail .facscopeB01 ul li:nth-of-type(even){ margin-top: 57px; }
#detail .facscopeB01 ul li figure{ border: 6px solid #FFF; }


#detail .facscopeB02{ background: #FFF; border: 1px solid var(--borderC); border-radius: 10px; padding: 50px; }
#detail .facscopeB02 h6{ font-size: 24px; font-weight: 600; color: #333; margin-bottom: 20px; }
#detail .facscopeB02 .item:not(:last-of-type){ margin-bottom: 65px; }
#detail .facscopeB02 .grid01{ display: grid; grid-template-columns: repeat(4, 25%); }
#detail .facscopeB02 .grid01 .image{ grid-column: auto / span 2; display: flex; align-items: center; padding-right: 100px; position: relative; }
#detail .facscopeB02 .grid01 .image::after{ content: ""; width: 12px; height: 20px; background: url("/img/sub/products/facscope_b_arrow.png") no-repeat center center / contain; position: absolute; top: 50%; right: 50px; transform: translate(50%, -50%); }

#detail .facscopeB02 .grid01 .text dl{ display: flex; flex-direction: column; }
#detail .facscopeB02 .grid01 .text dl > *{ padding: 0 25px; }
#detail .facscopeB02 .grid01 .text:nth-of-type(2) dl > *{ padding-left: 0; }
#detail .facscopeB02 .grid01 .text:last-of-type dl > *{ padding-right: 0; }
#detail .facscopeB02 .grid01 .text dl dt{ font-size: 20px; font-weight: 600; color: #DD081E; margin-bottom: 20px; }
#detail .facscopeB02 .grid01 .text dl dd{ flex: 1 0 auto; border-right: 1px solid #C3C3C3; }
#detail .facscopeB02 .grid01 .text:last-of-type dl dd{ border-right: none; }
#detail .facscopeB02 .grid01 .text ul li{ display: grid; grid-template-columns: 83px calc(100% - 83px); align-items: center; font-size: 16px; font-weight: 300; color: #555; }
#detail .facscopeB02 .grid01 .text ul li:not(:last-of-type){ margin-bottom: 20px; }
#detail .facscopeB02 .grid01 .text ul li.block{ display: block; }
#detail .facscopeB02 .grid01 .text ul li p{ padding-left: 15px; }
#detail .facscopeB02 .grid01 .text ul li strong{ display: block; font-size: 18px; font-weight: 600; color: #333; margin-bottom: 5px; }


#detail .facscopeB02 .grid02{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -25px; }
#detail .facscopeB02 .grid02 dl{ border: 2px solid #444; border-radius: 10px; overflow: hidden; margin: 25px; }
#detail .facscopeB02 .grid02 dl dt{ background: #444; color: #FFF; padding: 10px 30px; }
#detail .facscopeB02 .grid02 dl dt{ display: grid; grid-template-columns: 55px calc(100% - 55px); align-items: center; font-size: 28px; color: #FFF; font-weight: 600; }
#detail .facscopeB02 .grid02 dl dt span{ display: block; font-size: 7rem; text-align: center; padding-right: 10px; }
#detail .facscopeB02 .grid02 dl dt small{ display: block; font-size: 14px; font-weight: 500; margin-top: 3px; }
#detail .facscopeB02 .grid02 dl dd{ padding: 30px; }
#detail .facscopeB02 .grid02 ul li{ font-size: 16px; font-weight: 400; color: #444; padding-left: 13px; position: relative; }
#detail .facscopeB02 .grid02 ul li:not(:last-of-type){ margin-bottom: 20px; }
#detail .facscopeB02 .grid02 ul li::before{ content: ""; width: 3px; height: 3px; background: #444; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

@media screen and (max-width: 1700px){
	#detail .facscopeB02{ padding: 35px; }

	#detail .facscopeB02 .grid02 dl dt{ font-size: 24px; padding-inline: 20px; }
	#detail .facscopeB02 .grid02 dl dd{ padding: 25px; }
}

@media screen and (max-width: 1280px){
	#detail .facscopeB01 br{ display: none; }
	#detail .facscopeB01 p{ font-size: 18px; margin-top: 15px; }
	#detail .facscopeB01 ul{ margin-top: 30px; }
	#detail .facscopeB01 ul li:nth-of-type(even){ margin-top: 30px; }

	#detail .facscopeB02{ padding: 25px; }
	#detail .facscopeB02 h6{ font-size: 22px; }
	#detail .facscopeB02 .grid01 .text dl dt{ font-size: 18px; }
	#detail .facscopeB02 .grid01 .text ul li strong{ font-size: 17px; }

	#detail .facscopeB02 .grid02 dl dt{ font-size: 20px; padding: 7px 15px; }
	#detail .facscopeB02 .grid02 dl dd{ padding: 20px; }
	#detail .facscopeB02 .grid02 ul li{ padding-left: 10px; }
	#detail .facscopeB02 .grid02 ul li:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1200px){
	#detail .facscopeB02 .grid01{ grid-template-columns: repeat(2, 50%); }
	#detail .facscopeB02 .grid01 .image{ justify-content: center; padding-right: 0; padding-bottom: 70px; }
	#detail .facscopeB02 .grid01 .image::after{ top: calc(100% - 35px); right: 50%; transform: translate(50%, -50%) rotate(90deg); }

	#detail .facscopeB02 .grid02{ margin: -15px; }
	#detail .facscopeB02 .grid02 dl{ margin: 15px; }
}

@media screen and (max-width: 900px){
	#detail .facscopeB01 ul{ flex-direction: column; }
	#detail .facscopeB01 ul li{ width: 100%; margin: 0; margin-top: 0 !important; }
	#detail .facscopeB01 ul li:not(:last-of-type){ margin-bottom: 30px; }
	#detail .facscopeB01 ul li p{ margin-top: 10px; }

	#detail .facscopeB02 .grid02{ grid-template-columns: repeat(1, 100%); }
	#detail .facscopeB02 .grid02 dl dt{ grid-template-columns: 40px calc(100% - 40px); font-size: 18px; }
}

@media screen and (max-width: 700px){
	#detail .facscopeB02 .grid01{ grid-template-columns: repeat(1, 100%); }
	#detail .facscopeB02 .grid01 .image{ grid-column: unset; }
	#detail .facscopeB02 .grid01 .text{ border-bottom: 1px solid #C3C3C3; padding: 30px 0; }
	#detail .facscopeB02 .grid01 .text:nth-of-type(2){ padding-top: 0; }
	#detail .facscopeB02 .grid01 .text:last-of-type{ border: none; padding-bottom: 0; }
	#detail .facscopeB02 .grid01 .text:nth-of-type(2) dl > *{ padding: 0; }
	#detail .facscopeB02 .grid01 .text:last-of-type dl > *{ padding: 0; }
	#detail .facscopeB02 .grid01 .text dl dd{ border: none; }
	#detail .facscopeB02 .grid01 .text ul li.block{ text-align: center; }
}

@media screen and (max-width: 499px){
	#detail .facscopeB02 h6{ font-size: 24px; }

	#detail .facscopeB02 .grid01 .text dl dt{ font-size: 20px; }
	#detail .facscopeB02 .grid01 .text ul li{ font-size: 17px; }
	#detail .facscopeB02 .grid01 .text ul li strong{ font-size: 18px; }

	#detail .facscopeB02 .grid02 dl dt{ grid-template-columns: 50px calc(100% - 50px); font-size: 21px; } 
	#detail .facscopeB02 .grid02 dl dt span{ font-size: 10rem; }
	#detail .facscopeB02 .grid02 dl dt small{ font-size: 16px; }
	#detail .facscopeB02 .grid02 ul li{ font-size: 18px; }
}



/* gray-form */
.gray-form{
	--height: 60px;
	--padding: 30px;
	--captchaW: 171px;

	--btnBg: #6B6C6D;
}
.gray-form .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); align-items: flex-end; margin: -20px; }
.gray-form .grid-box *{ font-size: 17px; font-weight: 300; color: #333; }
.gray-form .grid-box > div{ margin: 20px; }
.gray-form .block{ grid-column: auto / span 2; }
.gray-form .flex{ display: flex; }
.gray-form .flex > *:not(:last-child){ margin-right: 10px; }
.gray-form .grid-box dl dt{ font-size: 19px; font-weight: 500; color: #111; margin-bottom: 15px; }
.gray-form .grid-box dl dt span{ font-size: inherit; font-weight: inherit; color: var(--mainColor); margin-bottom: 15px; }
.gray-form .mt{ margin-top: 10px; }

.gray-form .scroll-y::-webkit-scrollbar{ width: 45px; height: 45px; }
.gray-form .scroll-y::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }
.gray-form .scroll-y::-webkit-scrollbar-track{ background: transparent; background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }

.gray-form .scroll-bar{ height: 200px; background: #EEE; border-radius: 10px; padding-right: 45px; overflow-x: clip; overflow-y: scroll; }
.os-theme-dark > .os-scrollbar-vertical, 
.os-theme-light > .os-scrollbar-vertical{ width: 45px; padding: 20px; }
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle{ background: var(--mainColor) !important; }

.gray-form input,
.gray-form select,
.gray-form textarea{ width: 100%; background: var(--grayBg); border: 2px solid var(--grayBg); box-shadow: unset; border-radius: 10px; -webkit-border-radius: 10px; outline: none; }
.gray-form input,
.gray-form select{ height: var(--height); padding: 0 var(--padding); }
.gray-form input::placeholder,
.gray-form textarea::placeholder{ color: #333; }
.gray-form select{ background: var(--grayBg) url("/img/board/icon_select.svg") no-repeat center right var(--padding) / auto; }
.gray-form textarea{ resize: none; height: 200px; padding: var(--padding); }

.gray-form input:focus,
.gray-form select:focus,
.gray-form textarea:focus{ --grayBg: #FFF; border-color: var(--mainColor); }

.gray-form input:disabled{ background: #EEE; border-color: #EEE; color: #AAA; }
.gray-form input:disabled::placeholder{ color: #AAA; }

.gray-form dl dd .file:not(:last-of-type){ margin-bottom: 10px; }
.gray-form .file{ display: grid; grid-template-columns: calc(100% - 210px) 210px; }  
.gray-form .file label{ display: flex; justify-content: center; align-items: center; height: var(--height); background: var(--btnBg); border-radius: 10px; font-weight: 400; color: #FFF; margin-left: 10px; cursor: pointer; }
.gray-form .file label input{ display: none; }

.gray-form .captcha figure{ width: var(--captchaW); border-radius: 10px; overflow: hidden; }
.gray-form .captcha figure img{ height: var(--height); }
.gray-form .captcha input{ width: calc(100% - var(--captchaW) - var(--height) - 20px); }
.gray-form .captcha button{ width: var(--height); height: var(--height); background: var(--btnBg); border: none; border-radius: 10px; -webkit-border-radius: 10px; }
.gray-form .captcha button i{ display: block; height: 17px; background: url("/img/board/icon_reset.svg") no-repeat center center / contain; }

.gray-form .privacy{ padding: var(--padding); }
.gray-form .privacy br{ display: none; }
.gray-form .privacy *{ font-size: 17px !important; font-weight: 300 !important; color: #AAA !important; line-height: 1.5 !important; }
.gray-form .privacy > *:not(:last-child){ margin-bottom: 50px; }
.gray-form .privacy h6{ font-weight: 500 !important; margin-bottom: 10px; }
.gray-form .privacy .box p:not(:only-child){ margin-bottom: 10px; }
.gray-form .privacy .box dl:not(:only-child){ margin-top: 15px; }
.gray-form .privacy .box dl dt{ font-weight: 500 !important; margin-bottom: 3px !important; }
.gray-form .privacy .box ul li{ padding-left: 12px; position: relative; }
.gray-form .privacy .box ul li:not(:last-of-type){ margin-bottom: 3px; }
.gray-form .privacy .box ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }
.gray-form .privacy .box ul + p{ margin-top: 10px; }

.gray-form .agree{ text-align: center; margin-top: 40px; }
.gray-form .agree input{ display: none; }
.gray-form .agree label{ display: inline-block; padding: 15px 30px; padding-right: 0; margin: -15px 0; position: relative; cursor: pointer; }
.gray-form .agree label{
	-webkit-tap-highlight-color: transparent;   /* 사파리 & 크롬용 */
	-webkit-touch-callout: none;                    /* iOS 오래 누를 때 메뉴 제거 */
	user-select: none;    
}
.gray-form .agree label::before,
.gray-form .agree label::after{ content: ""; width: 20px; height: 20px; position: absolute; top: calc((1.3em / 2) + 15px); left: 0; transform: translateY(-50%); box-sizing: border-box; }
.gray-form .agree label::before{ border: 1px solid #E5E5E5; border-radius: 5px; }
.gray-form .agree label::after{ background: url("/img/board/icon_check.svg") no-repeat center center / contain; }
.gray-form .agree input:checked + label::before{ background: var(--mainColor); border-color: var(--mainColor); }

.gray-form .submit{ text-align: center; }


/* Contact us */
#contact .gray-form .grid-box{ align-items: flex-start; }

@media screen and (max-width: 1700px){
	.gray-form{
		--padding: 20px;
	}

	.gray-form .agree{ margin-top: 30px; }
}

@media screen and (max-width: 1280px){
	.gray-form{
		--height: 55px;
		--padding: 15px;
		--captchaW: 157px;
	}

	.gray-form .grid-box{ margin: -12px -10px; }
	.gray-form .grid-box *{ font-size: 16px; }
	.gray-form .grid-box > div{ margin: 12px 10px; }
	.gray-form .grid-box dl dt{ font-size:  17px; margin-bottom: 10px; }

	.gray-form .scroll-y::-webkit-scrollbar{ width: 35px; height: 35px; }
	.gray-form .scroll-y::-webkit-scrollbar-thumb{ border-width: 15px; }
	.gray-form .scroll-y::-webkit-scrollbar-track{ border-width: 15px; }

	.gray-form .scroll-bar{ padding-right: 35px; }
	.os-theme-dark > .os-scrollbar-vertical, 
	.os-theme-light > .os-scrollbar-vertical{ width: 35px; padding: 15px; }

	.gray-form .file{ grid-template-columns: calc(100% - 160px) 160px; }  

	.gray-form .privacy *{ font-size: 16px !important; }

	.gray-form .agree{ margin-top: 20px; }
}

@media screen and (max-width: 1000px){
	.gray-form .grid-box{ grid-template-columns: repeat(1, 100%); }
	.gray-form .block{ grid-column: unset; }
}

@media screen and (max-width: 700px){
	.gray-form .file{ grid-template-columns: calc(100% - 130px) 130px; }  
}

@media screen and (max-width: 499px){
	.gray-form .grid-box *{ font-size: 18px; }
	.gray-form .grid-box dl dt{ font-size: 20px; }
}


/* 장바구니 */
#cart{
	--border: 1px solid #E5E5E5;
	--infoW: 150px;
	--numH: 40px;
}

#cart .title{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
#cart .title h4{ font-size: 24px; font-weight: 500; color: #111; }
#cart .title p{ font-size: 17px; font-weight: 300; color: #888; }
#cart .title p span{ color: var(--mainColor); }
#cart .center{ text-align: center; }

#cart .prod table{ border-top: 2px solid #000; text-align: center; }
#cart .prod table colgroup col{ width: 100%; }
#cart .prod table colgroup col.col{ width: 240px; }
#cart .prod table tr > *{ border: var(--border); border-right: none; }
#cart .prod table tr > *:first-child{ border-left: none; }
#cart .prod table th{ background: var(--grayBg); font-size: 17px; font-weight: 500; color: #111; line-height: 1.5; padding: 25px; }
#cart .prod table td{ font-size: 17px; font-weight: 500; color: #111; padding: 20px; }

#cart .prod .info{ display: grid; grid-template-columns: calc(100% - var(--infoW))  var(--infoW); align-items: center; }
#cart .prod .info a{ display: grid; grid-template-columns: var(--infoW) calc(100% - var(--infoW)); align-items: center; }
#cart .prod .info .img{ background: var(--grayBg2); border-radius: 5px; }
#cart .prod .info .img figure{ display: block; padding-bottom: 100%; position: relative; overflow: hidden; }
#cart .prod .info .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#cart .prod .info .txt{ text-align: left; padding-inline: 30px 20px; }
#cart .prod .info .txt > *{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#cart .prod .info .txt p{ font-size: 15px; font-weight: 500; color: var(--mainColor); margin-bottom: 10px; }
#cart .prod .info .txt h6{ font-size: 19px; font-weight: 500; color: #333; }

#cart .prod .info .num{ display: flex; padding-left: 10px; }
#cart .prod .info .num button{ width: var(--numH); height: var(--numH); background: none; border: var(--border); }
#cart .prod .info .num button i{ display: block; height: 10px; }
#cart .prod .info .num .minus i{ background: url("/img/sub/member/icon_minus.svg") no-repeat center center / contain; }
#cart .prod .info .num .plus i{ background: url("/img/sub/member/icon_plus.svg") no-repeat center center / contain; }
#cart .prod .info .num input{ width: calc(100% - (var(--numH) * 2)); height: var(--numH); border: var(--border); margin: 0 -1px; text-align: center; }

#cart .prod table .delete{ width: 25px; height: 25px; background: #EEE; border: none; border-radius: 5px; padding: 0; }
#cart .prod table .delete i{ display: block; height: 9px; background: url("/img/sub/member/icon_delete.svg") no-repeat center center / contain; }


#cart .contact .gray-form{ background: var(--grayBg); border-radius: 20px; padding: 60px; }
#cart .contact .gray-form input:not(:disabled),
#cart .contact .gray-form textarea:not(:disabled){ background: #FFF; }

@media screen and (max-width: 1700px){
	#cart .title p{ font-size: 16px; }

	#cart .prod table colgroup col.col{ width: 200px; }
	#cart .prod table th{ padding: 20px; }

	#cart .contact .gray-form{ padding: 40px; }
}

@media screen and (max-width: 1280px){
	#cart {
		--infoW: 130px;
		--numH: 35px;
	}
	#cart .title{ margin-bottom: 15px; }
	#cart .title h4{ font-size: 20px; }
	#cart .title p{ font-size: 15px; }

	#cart .prod table colgroup col.col{ width: 150px; }
	#cart .prod table th{ font-size: 16px; padding: 15px; }
	#cart .prod table td{ padding: 15px; }
	#cart .prod .info .txt{ padding-inline: 20px 10px; }
	#cart .prod .info .txt p{ margin-bottom: 5px; }
	#cart .prod .info .txt h6{ font-size: 18px; }

	#cart .contact .gray-form{ padding: 25px; }
}

@media screen and (max-width: 900px){
	#cart {
		--infoW: 100px;
	}
	#cart .prod table colgroup col.col{ width: 100px; }
	#cart .prod .info{ grid-template-columns: calc(100% - 130px) 130px; }
}

@media screen and (max-width: 750px){
	#cart .prod table colgroup,
	#cart .prod table thead{ display: none; }
	#cart .prod table tr{ display: flex; }
	#cart .prod table tr:not(:last-of-type){ margin-bottom: -1px; }
	#cart .prod table td{ padding: 10px 5px; }

	#cart .prod table tr td:nth-of-type(1){ display: none; }
	#cart .prod table tr td:nth-of-type(2){ width: calc(100% - 50px); border-left: none; }
	#cart .prod table tr td:nth-of-type(3){ width: 50px; display: flex; justify-content: center; align-items: center; }

	#cart .prod .info{ display: block; position: relative; }
	#cart .prod .info a{ align-items: unset; }
	#cart .prod .info .txt{ height: calc(100% - var(--numH)); display: flex; flex-direction: column; justify-content: center; padding-inline: 15px 5px; }
	#cart .prod .info .txt p{ font-size: 14px; margin-bottom: 2px; }
	#cart .prod .info .txt h6{ font-size: 17px; }
	#cart .prod .info .num{ width: calc(100% - 100px); padding-inline: 15px 5px; position: absolute; bottom: 0; right: 0; }
}

@media screen and (max-width: 499px){
	#cart .title h4{ font-size: 23px; }
	#cart .title p{ font-size: 17px; }

	#cart .prod .info .txt{ justify-content: flex-start; padding-top: 5px; }
	#cart .prod .info .txt p{ font-size: 16px; }
	#cart .prod .info .txt h6{ font-size: 21px; }
}


/* login */
#login{
	--height: 80px;
}

#login{ background: var(--grayBg); text-align: center; }
#login .title{ margin-bottom: 60px; }
#login .title h3{ font-size: 40px; font-weight: 600; color: #111; }
#login .title p{ font-size: 19px; font-weight: 300; color: #333; margin-top: 20px; }

#login .form-box{ background: #FFF; border-radius: 20px; padding: 100px; }
#login .form-box *{ font-size: 17px; font-weight: 300; color: #333; }
#login .form-box .inner{ max-width: 620px; width: 100%; margin: 0 auto; }
#login .form-box h4{ font-size: 24px; font-weight: 600; color: #111; margin-bottom: 30px; }
#login .form-box input{ width: 100%; height: var(--height); background: var(--grayBg); border: none; border-radius: 10px; -webkit-border-radius: 10px; padding: 0 30px; margin-bottom: 10px; }
#login .form-box input::placeholder{ color: #333; }
#login .form-box button{ width: 100%; height: var(--height); background: var(--mainColor); border: none; border-radius: 10px; -webkit-border-radius: 10px; font-size: 19px; font-weight: 500; color: #FFF; }

#login .form-box .link{ display: flex; justify-content: center; align-items: center; margin-inline: -22px; margin-top: 30px; }
#login .form-box .link li{ position: relative; }
#login .form-box .link li::before{ content: ""; width: 5px; height: 5px; background: #DDD; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#login .form-box .link li:first-of-type::before{ display: none; }
#login .form-box .link li a{ display: block; font-size: 17px; padding: 22px; margin: -22px 0; }

#login .menu-box{ margin-bottom: 60px; }
#login .menu-box ul{ display: flex; }
#login .menu-box ul li{ width: calc(50% + 4px); border: 2px solid transparent; border-radius: 10px 10px 0 0; position: relative; margin: 0 -2px; }
#login .menu-box ul li::before{ content: ""; width: calc(100% + 4px); height: 2px; background: var(--mainColor); position: absolute; bottom: 0; left: 0; transform: translateY(100%); }
#login .menu-box ul li button{ width: 100%; height: 65px; background: none; border: none; font-size: 19px; font-weight: 500; color: #AAA; padding: 0 10px; }

#login .menu-box ul li.on{ border-color: var(--mainColor); }
#login .menu-box ul li.on::before{ background: #FFF; }
#login .menu-box ul li.on button{ color: var(--mainColor); }

#login .tab-content .tab:not(:first-of-type){ display: none; }

@media screen and (max-width: 1700px){
	#login{
		--height: 70px;
	}
	#login .title{ margin-bottom: 40px; }
	#login .title h3{ font-size: 36px; }
	#login .title p{ font-size: 18px; }

	#login .form-box{ padding: 70px; }
	#login .form-box h4{ font-size: 22px; }

	#login .menu-box{ margin-bottom: 40px; }
	#login .menu-box ul li button{ height: 55px; font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#login{
		--height: 60px;
	}
	#login .title{ margin-bottom: 25px; }
	#login .title h3{ font-size: 32px; }
	#login .title p{ font-size: 17px; margin-top: 10px; }

	#login .form-box{ padding: 40px; }
	#login .form-box .inner{ max-width: 550px; }
	#login .form-box h4{ font-size: 20px; margin-bottom: 20px; }
	#login .form-box input{ padding: 0 20px; }
	#login .form-box button{ font-size: 18px; }

	#login .form-box .link{ margin-inline: -15px; margin-top: 20px; }
	#login .form-box .link li a{ font-size: 16px; padding: 15px; margin: -15px 0; }

	#login .menu-box{ margin-bottom: 30px; }
	#login .menu-box ul li button{ height: 45px; font-size: 17px; }
}

@media screen and (max-width: 900px){
	#login{
		--height: 55px;
	}
	#login .title h3{ font-size: 26px; }

	#login .form-box{ padding: 30px; }
	#login .form-box h4{ font-size: 18px; }
	#login .form-box button{ font-size: 17px; }
}

@media screen and (max-width: 499px){
	#login .title h3{ font-size: 28px; }

	#login .form-box *{ font-size: 18px; }
	#login .form-box h4{ font-size: 20px; }
	#login .form-box button{ font-size: 18px; }

	#login .form-box .link li a{ font-size: 17px; }
	#login .form-box .link li:nth-of-type(odd) a{ padding-left: 0; }
	#login .form-box .link li:nth-of-type(even) a{ padding-right: 0; }
}


/* 회원가입 */
#register{
	--button: 200px;
}
#register{ padding-top: 0; }
#register .center{ text-align: center; }
#register .center > *:not(:last-child){ margin-right: 20px; }
#register .center .roundBtn{ 
	--btnP: 40px;
}
#register .title{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
#register .title h4{ font-size: 24px; font-weight: 500; color: #111; }
#register .title p{ font-size: 17px; font-weight: 300; color: #888; }
#register .title p span{ color: var(--mainColor); }

#register .title.block{ display: block; }
#register .title.block p{ font-size: 17px; color: #333; margin-top: 10px; }

#register .diagram{ background: var(--grayBg); padding: var(--subPt) 0; }
#register .diagram .grid-box{ display: grid; grid-template-columns: repeat(5, 20%); margin: -10px; }
#register .diagram .item{ display: flex; flex-direction: column; background: #FFF; border-radius: 20px; padding: 30px; margin: 10px; }
#register .diagram .item .icon{ flex: 1 0 auto; margin-bottom: 50px; }
#register .diagram .item .icon figure{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 10px; }
#register .diagram .item dl dt{ font-size: 18px; font-weight: 600; color: var(--mainColor); line-height: 1.5; margin-bottom: 20px; }
#register .diagram .item dl dd{ font-size: 16px; font-weight: 300; color: #555; line-height: 1.5; }

#register .gray-form{ border-top: 1px solid #000; border-bottom: 1px solid #E5E5E5; padding: 40px 0; }
#register .gray-form .grid-box{ display: block; margin: 0; }
#register .gray-form .grid-box dl:not(:last-of-type){ margin-bottom: 20px; }
#register .gray-form .grid-box  dl{ display: grid; grid-template-columns: 300px calc(100% - 300px); align-items: center; }
#register .gray-form .grid-box  dl dt{ margin-bottom: 0; }
#register .gray-form .btn{ width: var(--button); height: var(--height); background: #6B6C6D; border: none; border-radius: 10px; -webkit-border-radius: 10px; font-size: 17px; font-weight: 400; color: #FFF; }

#register .gray-form .basic .flex:not(:last-of-type){ margin-bottom: 10px; }
#register .gray-form .basic input{ width: calc(100% - var(--button) - 10px); }
#register .gray-form .captcha{ max-width: 620px; }
#register .gray-form .privacy{ padding: 0; }

#register .term .gray-form{ border-bottom: none; padding: 0; }
#register .slide-box .item{ border-bottom: 1px solid #E5E5E5; }  
#register .slide-box .tit{ display: grid; grid-template-columns: calc(100% - 60px) 60px; }
#register .slide-box .tit input{ display: none; }
#register .slide-box .tit label{ min-height: 105px; display: flex; align-items: center; font-size: 19px; font-weight: 300; color: #333; padding: 10px 40px; position: relative; cursor: pointer; }
#register .slide-box .tit  label{
	-webkit-tap-highlight-color: transparent;   /* 사파리 & 크롬용 */
	-webkit-touch-callout: none;                    /* iOS 오래 누를 때 메뉴 제거 */
	user-select: none;    
}
#register .slide-box .tit label::before,
#register .slide-box .tit label::after{ content: ""; width: 20px; height: 20px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); box-sizing: border-box; }
#register .slide-box .tit label::before{ border: 1px solid #E5E5E5; border-radius: 5px; }
#register .slide-box .tit label::after{ background: url("/img/board/icon_check.svg") no-repeat center center / contain; }
#register .slide-box .tit input:checked + label::before{ background: var(--mainColor); border-color: var(--mainColor); }
#register .slide-box .tit button{ background: none; border: none; padding: 0; outline: none; }
#register .slide-box .tit button i{ display: block; height: 11px; background: url("/img/sub/member/icon_arrow.svg") no-repeat center center / contain; transform: rotate(0); }

#register .slide-box .on .tit button i{ transform: rotate(-180deg); }

#register .slide-box .content{ display: none; background: var(--grayBg); padding: 60px; }
#register .slide-box .content *{ font-size: 17px; font-weight: 400; color: #AAA; line-height: 1.5; }
#register .slide-box .content h6{ margin-bottom: 20px; }
#register .slide-box .content p:not(:last-of-type){ margin-bottom: 30px; }

@media screen and (max-width: 1700px){
	#register{
		--button: 170px;
	}
	#register .title{ margin-bottom: 30px; }
	#register .gray-form{ padding: 30px 0; }

	#register .slide-box .tit label{ min-height: 95px; font-size: 18px; }
	#register .slide-box .content{ padding: 40px; }

	#register .center .roundBtn{ 
		--btnP: 30px;
	}
}

@media screen and (max-width: 1280px){
	#register{
		--button: 150px;
	}
	#register .diagram .item{ padding: 20px; }
	#register .diagram .item .icon{ margin-bottom: 40px; }
	#register .diagram .item dl dt{ font-size: 17px; margin-bottom: 10px; }	

	#register .title{ margin-bottom: 20px; }
	#register .title h4{ font-size: 22px; }
	#register .title p{ font-size: 16px; }
	#register .title.block p{ margin-top: 5px; }

	#register .gray-form{ padding: 20px 0; }
	#register .gray-form .grid-box dl{ grid-template-columns: 250px calc(100% - 250px); }
	#register .gray-form .btn{ font-size: 16px; }

	#register .slide-box .tit label{ min-height: 85px; font-size: 17px; padding-inline: 35px 0; }
	#register .slide-box .tit button i{ height: 9px; }

	#register .slide-box .content{ padding: 25px; }
	#register .slide-box .content *{ font-size: 16px; }
	#register .slide-box .content h6{ margin-bottom: 10px; }
	#register .slide-box .content p:not(:last-of-type){ margin-bottom: 20px; }

	#register .center .roundBtn{ 
		--btnP: 20px;
	}
}

@media screen and (max-width: 1150px){
	#register .diagram .grid-box{ margin: -7px; } 
	#register .diagram .item{ margin: 7px; }
	#register .diagram .item .icon figure{ width: 45px; height: 45px; }
	#register .diagram .item .icon{ margin-bottom: 30px; }
	#register .diagram .item dl dt{ font-size: 16px; }
}

@media screen and (max-width: 1100px){
	#register .diagram .grid-box{ grid-template-columns: repeat(3, calc(100% / 3)); }
}

@media screen and (max-width: 900px){
	#register .title{ margin-bottom: 15px; }
	#register .title h4{ font-size: 20px; }
	#register .title p{ font-size: 15px; }

	#register .slide-box .tit label{ min-height: 75px; font-size: 16px; }

	#register .center .roundBtn{ 
		--btnW: 180px;
	}
}

@media screen and (max-width: 750px){
	#register .diagram .grid-box{ grid-template-columns: repeat(2, 50%); }

	#register .gray-form .grid-box{ margin: -12px 0; }
	#register .gray-form .grid-box dl{ display: block; margin: 12px 0; }
	#register .gray-form .grid-box dl dt{ margin-bottom: 10px; }
}

@media screen and (max-width: 500px){
	#register .diagram .grid-box{ grid-template-columns: repeat(1, 100%); }
	#register .diagram .item{ display: grid; grid-template-columns: 60px calc(100% - 60px); padding: 10px; }
	#register .diagram .item .icon{ margin-bottom: 0; }
	#register .diagram .item .icon figure{ width: 100%; height: 100%; }
	#register .diagram .item dl{ padding: 10px; padding-left: 20px; }
	#register .diagram .item dl dt{ margin-bottom: 3px; }
}

@media screen and (max-width: 499px){
	#register .diagram .item dl dt{ font-size: 22px; }
	#register .diagram .item dl dd{ font-size: 18px; }

	#register .title h4{ font-size: 24px; }
	#register .title p{ font-size: 17px; }
	#register .title.block p{ font-size: 18px; }

	#register .gray-form .btn{ font-size: 17px; }
	
	#register .slide-box .tit label{ font-size: 19px; }
	#register .slide-box .content *{ font-size: 18px; }
}


/* 마이페이지 */
#register.mypage{ padding-top: var(--subPt); }


/* 개인정보처리방침 */
#privacy .privacy{ font-size: 16px; font-weight: 300; color: #555; line-height: 1.5; }
#privacy .privacy *{ line-height: inherit; }
#privacy .privacy > *:not(:last-child){ margin-bottom: 70px; }
#privacy .privacy .hyphen{ padding-left: 12px; position: relative; }
#privacy .privacy .hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }

#privacy .privacy h6{ font-size: 18px; font-weight: 500; color: #111; line-height: 1.5; margin-bottom: 30px; }
#privacy .privacy .box{ background: var(--grayBg2); border-radius: 10px; padding: 60px; }
#privacy .privacy .box p:not(:only-child){ margin-bottom: 10px; }
#privacy .privacy .box dl:not(:only-child){ margin-top: 30px; }
#privacy .privacy .box dl dt{ font-weight: 500; margin-bottom: 10px; }
#privacy .privacy .box ul li{ padding-left: 12px; position: relative; }
#privacy .privacy .box ul li:not(:last-of-type){ margin-bottom: 5px; }
#privacy .privacy .box ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }
#privacy .privacy .box ul li strong{ font-weight: 500; }
#privacy .privacy .box ul + p{ margin-top: 10px; }

@media screen and (max-width: 1700px){
	#privacy .privacy h6{ margin-bottom: 20px; }
	#privacy .privacy .box{ padding: 40px; }
}

@media screen and (max-width: 1280px){
	#privacy .privacy > *:not(:last-child){ margin-bottom: 40px; }
	#privacy .privacy h6{ font-size: 17px; margin-bottom: 10px; }
	#privacy .privacy .box{ padding: 25px; }
	#privacy .privacy .box dl:not(:only-child){ margin-top: 20px; }
}

@media screen and (max-width: 800px){
	#privacy .privacy br{ display: none; }
}


/* 개인정보처리방침 */
#policy .privacy dl:not(:last-of-type){ margin-bottom: 70px; }
#policy .privacy dl dt{ font-size: 18px; font-weight: 500; color: #111; line-height: 1.5; margin-bottom: 30px; }
#policy .privacy dl dd{ background: var(--grayBg2); border-radius: 10px; font-size: 16px; font-weight: 300; color: #555; line-height: 1.5; padding: 60px; }
#policy .privacy dl dd *{ line-height: inherit; }
#policy .privacy dl dd p{ font-weight: 500; color: #555; margin-top: 10px; }

#policy .privacy ul li{ padding-left: 10px; position: relative; }
#policy .privacy ul li:not(:last-of-type){ margin-bottom: 10px; }
#policy .privacy ul li::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
	#policy .privacy dl dt{ margin-bottom: 15px; }
	#policy .privacy dl dd{ padding: 40px; }
}

@media screen and (max-width: 1280px){
	#policy .privacy dl:not(:last-of-type){ margin-bottom: 40px; }
	#policy .privacy dl dt{ margin-bottom: 10px; }
	#policy .privacy dl dd{ padding: 20px; }

	#policy .privacy ul li:not(:last-of-type){ margin-bottom: 5px; }
}

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

@media screen and (max-width: 499px){
	#policy .privacy dl dt{ font-size: 21px; }
	#policy .privacy dl dd{ font-size: 18px; }
}


/* 검색결과 */
#result .search-box{
	--height: 80px;
}
#result .search-box{ max-width: 960px; margin-inline: auto; justify-content: center; }
#result .search-box .input{ max-width: 100%; width: 100%; margin: 0; }
#result section:not(:last-of-type){ padding-bottom: 100px; }

.result-board{ 
	--gapB: 30px; 
	--gapR: 30px; 
	--line: 3; 
	--icon: 70px;
	--url: url("/img/board/icon_result_link.svg");
}
.result-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
.result-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); background: #F4F4F4; border: 1px solid #DDD; margin-right: var(--gapR); margin-bottom: var(--gapB); cursor: pointer; transition: background 0.4s, border-color 0.4s; }
.result-board .item:nth-of-type(3n){ margin-right: 0; }
.result-board .item a{ display: grid; grid-template-columns: calc(100% - var(--icon)) var(--icon); align-items: center; padding: 41px 50px; }
.result-board .item i{ height: var(--icon); display: inline-flex; flex-direction: column; justify-content: center; background: #FFF; border-radius: 50%; }
.result-board .item i::before{ content: ""; display: block; height: 24px; background-image: var(--url); background-repeat: no-repeat; background-size: contain; background-position: center center; }
.result-board .item .tit{ padding-right: 14px; } 
.result-board .item .tit span{ font-size: 14px; font-weight: 500; color: var(--mainColor); transition: color 0.4s; }
.result-board .item .tit h6{ height: 2.6em; display: -webkit-box; font-size: 22px; font-weight: 700; color: #000; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 22px; transition: color 0.4s; }

.result-board .download{ --url: url("/img/board/icon_result_download.svg"); }
.result-board .video{ --url: url("/img/board/icon_result_video.svg"); }

@media screen and (hover: hover) and (pointer: fine){
	.result-board .item:hover{ background: var(--mainColor); border-color: var(--mainColor); }
	.result-board .item:hover span{ color: #FFF; }
	.result-board .item:hover h6{ color: #FFF; }
}

@media screen and (max-width: 1700px){
	#result .search-box{
		--height: 70px;
	}
}

@media screen and (max-width: 1280px){
	#result .search-box{
		--height: 65px;
	}
	#result section:not(:last-of-type){ padding-bottom: 70px; }

	.result-board{
		--icon: 60px;
	}
	.result-board .item a{ padding: 35px; }
	.result-board .item .tit h6{ font-size: 20px; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	.result-board{
		--line: 2;
	}
	.result-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.result-board .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
	#result .search-box{
		--height: 60px;
	}

	.result-board{
		--gapB: 20px;
	}
	.result-board .item{ width: 100%; margin-right: 0 !important; }
	.result-board .item a{ padding: 20px; }
	.result-board .item .tit h6{ margin-top: 10px; }
}

@media screen and (max-width: 499px){
	.result-board .item .tit span{ font-size: 16px; }
	.result-board .item .tit h6{ font-size: 22px; margin-top: 15px; }
}


/* 로그인 팝업 */
.popup-box.login{
	--height: 80px;
	--padding: 30px;
}

.popup-box.login *{ font-size: 19px; }
.popup-box.login .inner{ max-width: 720px; background: #FFF; border-radius: 10px; padding: 70px 50px; }

.popup-box.login h4{ font-size: 40px; font-weight: 600; color: #111; text-align: center; margin-bottom: 20px; }
.popup-box.login input{ width: 100%; height: var(--height); background: var(--grayBg); border-radius: 10px; font-weight: 300; color: #333; padding: 0 var(--padding); margin-bottom: 10px; }
.popup-box.login input::placeholder{ color: #333; }
.popup-box.login input + button{ width: 100%; height: var(--height); background: var(--mainColor); border: none; border-radius: 10px; font-weight: 500; color: #FFF; }

.popup-box.login ul{ display: flex; justify-content: center; align-items: center; margin-inline: -22px; margin-top: 30px; }
.popup-box.login ul li{ position: relative; margin: -22px 0; }
.popup-box.login ul li::before{ content: ""; width: 5px; height: 5px; background: #DDD; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
.popup-box.login ul li:first-of-type::before{ display: none; }
.popup-box.login ul li a{ display: block; font-size: 17px; font-weight: 300; color: #333; padding: 22px; }

@media screen and (max-width: 1700px){
	.popup-box.login{
		--height: 70px;
		--padding: 25px;
	}
	.popup-box.login *{ font-size: 18px; }
	.popup-box.login .inner{ max-width: 650px; padding: 60px 40px; }
	.popup-box.login h4{ font-size: 36px; }
}

@media screen and (max-width: 1280px){
	.popup-box.login{
		--height: 60px;
		--padding: 20px;
	}
	.popup-box.login *{ font-size: 17px; }
	.popup-box.login .inner{ max-width: 600px; padding: 40px 30px; }
	.popup-box.login h4{ font-size: 32px; }
	.popup-box.login ul{ margin-inline: -17px; margin-top: 20px; }
	.popup-box.login ul li{ margin: -17px 0; }
	.popup-box.login ul li a{ font-size: 16px; padding: 17px; }
}

@media screen and (max-width: 900px){
	.popup-box.login h4{ font-size: 28px; }
}


/* 다운로드 팝업 */
.popup-box.download .inner{ max-width: 720px; background: #FFF; border-radius: 10px; }
.popup-box.download .padding{ padding: 40px; padding-bottom: 60px; }
.popup-box.download .txt{ border-bottom: 1px solid #E5E5E5; padding-bottom: 40px; margin-bottom: 20px; }
.popup-box.download .txt h4{ max-height: 2.6em; display: -webkit-box; font-size: 34px; font-weight: 600; color: #111; margin-bottom: 15px; padding-right: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; padding-right: 30px; }
.popup-box.download .txt p{ font-size: 17px; font-weight: 300; color: #888; }

.popup-box.download .gray-form{
	--padding: 20px;
}
.popup-box.download .scroll-bar .os-viewport{ overflow-x: clip !important; overflow-y: clip !important; }
.popup-box.download .scroll-bar .os-scrollbar-vertical, 
.popup-box.download .scroll-bar .os-scrollbar-horizontal{ display: none; }

.popup-box.download .gray-form .grid-box{ margin: -10px; }
.popup-box.download .gray-form .grid-box *{ font-size: 17px; }
.popup-box.download .gray-form .grid-box > *{ margin: 10px; }

.popup-box.download .agree{ margin-top: 0; }
.popup-box.download .agree label{ font-size: 15px; font-weight: 200; color: #888; line-height: 1.7; text-align: left; padding-block: 20px; padding-left: 40px; margin: 0 0 -20px; }
.popup-box.download .agree label::before,
.popup-box.download .agree label::after{ top: 50%; }

.popup-box.download .submit button{ width: 100%; height: 75px; background: var(--mainColor); border: none; border-radius: 0 0 10px 10px; font-size: 19px; font-weight: 400; color: #FFF; }

@media screen and (max-width: 1700px){
	.popup-box.download .padding{ padding: 30px; padding-bottom: 50px; }
	.popup-box.download .txt h4{ font-size: 30px; }

	.popup-box.download .submit button{ height: 65px; font-size: 18px; }
}

@media screen and (max-width: 1280px){
	.popup-box.download .padding{ padding: 25px; padding-bottom: 40px; }
	.popup-box.download .txt{ padding-bottom: 25px; }
	.popup-box.download .txt h4{ font-size: 26px; margin-bottom: 10px; }
	.popup-box.download .txt p{ font-size: 16px; }

	.popup-box.download .gray-form .grid-box *{ font-size: 16px; }

	.popup-box.download .agree label{ padding-block: 15px; padding-left: 30px; }

	.popup-box.download .submit button{ height: 55px; font-size: 17px; }
}

@media screen and (max-width: 1000px){
	.popup-box.download .scroll-bar{ max-height: 60vh; padding-right: 20px; }
	.popup-box.download .scroll-bar .os-viewport{ overflow-y: auto !important; }
	.popup-box.download .scroll-bar .os-scrollbar-vertical{ width: 25px; display: block; padding: 0 10px; right: -10px; }
}

@media screen and (max-width: 900px){
	.popup-box.download .txt h4{ font-size: 23px; }
}

@media screen and (max-width: 600px){
	.popup-box.download br{ display: none; }
}

@media screen and (max-width: 499px){
	.popup-box.download .txt h4{ font-size: 24px; }
	.popup-box.download .txt p{ font-size: 18px; }

	.popup-box.download .gray-form{ max-height: 50vh; }
	.popup-box.download .gray-form .grid-box *{ font-size: 19px; }
	.popup-box.download .agree label{ font-size: 17px; }

	.popup-box.download .submit button{ height: 60px; font-size: 20px; }
}