/* common */
#sub{
    --headerH: var(--utilH) + var(--navH);
    --subPt: 100px;
    --subPb: 200px;

    --sec100: 100px;

    --border: #E5E5E5;
}

#sub{ padding-top: calc(var(--headerH)); }
.sub-content{ letter-spacing: -0.02em; padding: var(--subPt) 0 var(--subPb); }
.grayBg{ background: var(--grayBg); }
.white-box{ background: #FFF; border-radius: 20px; padding: 80px; margin: 0 auto; }


/* 간격 */
.pt100{ padding-top: var(--sec100); }
.pb100{ padding-bottom: var(--sec100); }


/* page-title */
.page-title{ text-align: center; padding-bottom: 100px; }
.page-title h2{ font-size: 6.4rem; font-weight: 600; color: #111; }


/* sec-title */
.sec-title{ 
    --ptb: 30px;
}
.sec-title{ padding-bottom: var(--ptb); }
.sec-title h3{ font-size: 32px; font-weight: 600; color: #111; }



/* tab-menu */
.tab-menu{ text-align: center; margin-bottom: 50px; }
.tab-menu ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(100% / 7), 1fr)); margin: -2px; }
.tab-menu ul li{ margin: 2px; }
.tab-menu ul li a{ min-height: 65px; height: 100%; border: 2px solid var(--border); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; color: #CCC; padding: 10px; }
.tab-menu ul li.on a{ background: var(--mainColor); border-color: var(--mainColor); color: #FFF; }


/* scroll custom */
.scroll-x{ overflow-x: auto; overflow-y: clip; }
.scroll-y{ overflow-x: clip; overflow-y: auto; }
.scroll-x::-webkit-scrollbar, 
.scroll-y::-webkit-scrollbar{ width: 43px; height: 43px; }
.scroll-x::-webkit-scrollbar-thumb, 
.scroll-y::-webkit-scrollbar-thumb{ min-height: 100px; background: #000; background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }
.scroll-x::-webkit-scrollbar-track, 
.scroll-y::-webkit-scrollbar-track{ background: transparent; background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; }

@media screen and (max-width: 1600px){
    /* common */
    #sub{
        --subPt: 70px;
        --subPb: 150px;
    }
    .white-box{ padding: 60px; }

    /* page-title */
    .page-title{ padding-bottom: 70px; }

    /* sec-title */
    .sec-title{ 
        --ptb: 25px;
    }
    .sec-title h3{ font-size: 28px; }

    /* tab-menu */
    .tab-menu{ margin-bottom: 40px; }
    .tab-menu ul li a{ min-height: 60px; font-size: 17px; }

    /* scroll custom */
    .scroll-x::-webkit-scrollbar, 
    .scroll-y::-webkit-scrollbar{ width: 33px; height: 33px; }
    .scroll-x::-webkit-scrollbar-thumb, 
    .scroll-y::-webkit-scrollbar-thumb{ border-width: 15px; }
    .scroll-x::-webkit-scrollbar-track, 
    .scroll-y::-webkit-scrollbar-track{ border-width: 15px; }
}

@media screen and (max-width: 1280px){
    /* common */
    #sub{
        --subPt: 40px;
        --subPb: 100px;

        --sec100: 70px;
    }
    .white-box{ padding: 40px; }

    /* page-title */
    .page-title{ padding-bottom: 40px; }
    .page-title h2{ font-size: 6rem; }

    /* sec-title */
    .sec-title{ 
        --ptb: 20px;
    }
    .sec-title h3{ font-size: 24px; }

    /* tab-menu */
    .tab-menu{ margin-bottom: 30px; }
    .tab-menu ul{ grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); }
    .tab-menu ul li a{ min-height: 55px; font-size: 16px; }

    /* scroll custom */
    .scroll-x::-webkit-scrollbar, 
    .scroll-y::-webkit-scrollbar{ width: 23px; height: 23px; }
    .scroll-x::-webkit-scrollbar-thumb, 
    .scroll-y::-webkit-scrollbar-thumb{ border-width: 10px; }
    .scroll-x::-webkit-scrollbar-track, 
    .scroll-y::-webkit-scrollbar-track{ border-width: 10px; }
}

@media screen and (max-width: 900px){
    /* common */
    .white-box{ padding: 25px; }

    /* page-title */
    .page-title h2{ font-size: 5.5rem; }

    /* sec-title */
    .sec-title h3{ font-size: 20px; }

    /* tab-menu */
    .tab-menu ul{ grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3), 1fr)); }
    .tab-menu ul li a{ min-height: 50px; }
}

@media screen and (max-width: 650px){
    /* tab-menu */
    .tab-menu ul{ grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); }
}


/* 에디터 공통 */
.edit-content{ font-size: 18px; color: #111; }
.edit-content ul,
.edit-content ol,
.edit-content li{ list-style-position: inside !important; }
.edit-content ul,
.edit-content ul li{ list-style: disc; }
.edit-content ol,
.edit-content ol li{ list-style: auto; }


/* 페이징 */
.paging{ 
	--size: 35px;
	--gap: 10px;	
}  

.paging,
.paging ul,
.paging .arr{ display: flex; justify-content: center; }

.paging{ text-align: center; margin-top: 100px; }
.paging a{ width: var(--size); height: var(--size); display: inline-flex; justify-content: center; align-items: center; background: none !important; border: none !important; border-radius: 5px; font-size: 16px; font-weight: 500; color: #111; }
.paging .arr a:not(:last-of-type), 
.paging ul li:not(:last-of-type){ margin-right: var(--gap); }

.paging ul{ margin: 0 var(--gap); }
.paging ul li.on a{ background: var(--mainColor) !important; color: #FFF; }

.paging .arr i{ display: inline-flex; }
.paging .arr i:not(:last-of-type){ margin-right: 2px; }
.paging .arr i::before{ content: ""; width: 5px; height: 8px; display: inline-block; background: url("/img/board/icon_board_paging.svg") no-repeat center center / contain; }
.paging .arr i.xi-angle-right-min:before{ transform: scaleX(-1); }

@media screen and (max-width: 1280px){
	.paging{ 
		--gap: 5px;	
	}  

	.paging{ margin-top: 70px; }
}

@media screen and (max-width: 900px){
	.paging{ 
		--size: 32px;
		--gap: 0;	
	}  
}

@media screen and (max-width: 650px){
	.paging .arr i:not(:last-of-type){ margin-right: 1px; }
}


/* 검색창 */
.search-box{
	--height: 50px;
	--padding: 10px;
	--select: 100px;
	--input: 260px;
	--icon: 17px;
}

.search-box{ max-width: 100%; width: calc(var(--select) + var(--input)); display: flex; justify-content: flex-end; border-bottom: 1px solid #000; margin-left: auto; margin-bottom: 100px; }
.search-box *{ font-size: 16px; }
.search-box .input{ width: var(--input); position: relative; }

.search-box select,
.search-box input,
.search-box button{ height: var(--height); background: none; border: none; padding: 0 var(--padding); outline: none; }
.search-box select{ width: var(--select); background: url("/img/board/icon_search_arrow.svg") no-repeat center right var(--padding) / auto; font-weight: 500; color: #AAA; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: calc((var(--padding) * 2) + 8px); }
.search-box select.selected{ color: #111; }
.search-box input{ width: 100%; font-weight: 300; color: #111; padding-right: calc((var(--padding) * 2) + var(--icon)); }
.search-box input::placeholder{ color: #AAA; }
.search-box button{ position: absolute; top: 0; right: 0; }
.search-box button i{ display: inline-block; width: var(--icon); height: var(--icon); background: url("/img/board/icon_search.svg") no-repeat center center / contain; } 

@media screen and (max-width: 1700px){
	.search-box{ margin-bottom: 70px; }
}

@media screen and (max-width: 1280px){
	.search-box{ margin-bottom: 40px; }
}

@media screen and (max-width: 650px){
	.search-box{
		--select: 120px;
	}

	.search-box{ width: 100%; }
	.search-box select{ flex-shrink: 0; }
	.search-box .input{ flex: 1 1 auto; min-width: 0; }
}


/* 제품 상세 */
#detail{
    --inner: 1600px;
}

#detail .detail-top .right{ display: block; }
#detail .detail-top .bottom{ margin-top: 10px; margin-left: 0; }
#detail .detail-top .min{ min-height: calc(var(--inner) * 0.48125); display: flex; flex-direction: column; }
#detail .detail-top .info{ padding: 0 0 45px; }

#detail .purchase .quantity{ display: flex; align-items: center; background: #F8F8F8; border-radius: 10px; padding: 30px; margin-bottom: 10px; }
#detail .purchase .quantity p{ flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; color: #333; padding-right: 30px; }
#detail .purchase .quantity input{ flex-shrink: 0; width: 80px; height: 40px; background: #FFF; border: 1px solid var(--border); border-radius: 5px; -webkit-border-radius: 5px; font-size: 16px; font-weight: 500; color: #111; text-align: center; padding: 0 20px; }
/* #detail .purchase .in{ display: none; } */
#detail .purchase .btn{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: -5px; }
#detail .purchase .btn > *{ min-height: 90px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border: none; border-radius: 10px; font-size: 20px; font-weight: 500; color: #FFF; text-align: center; padding: 10px; margin: 5px; }
#detail .purchase .btn > *.black{ background: #111; } 

@media screen and (max-width: 1700px){
    #detail{
        --inner: (100vw - (var(--innerGap) * 2) - 10px);
    }

    #detail .purchase .quantity{ padding: 20px 25px; }
    #detail .purchase .btn > *{ min-height: 80px; font-size: 18px; }
}

@media screen and (max-width: 1280px){
    #detail .purchase .quantity{ padding: 15px 20px; }
    #detail .purchase .quantity p{ font-size: 17px; }
    #detail .purchase .btn > *{ min-height: 70px; font-size: 17px; }
}

@media screen and (max-width: 1024px){
    #detail .detail-top .right{ padding-top: 35px; }
    #detail .detail-top .min{ min-height: unset; }
}

@media screen and (max-width: 900px){
    #detail .purchase .btn > *{ min-height: 60px; font-size: 16px; }
}


/* 문의폼 - 개인정보처리방침 */
.scroll-y.policy{ height: 300px; background: var(--grayBg); border-radius: 10px; padding: 50px; }
.scroll-y.policy .privacy *{ font-size: 18px; font-weight: 300; color: #555; line-height: 1.6; }
.scroll-y.policy .privacy br{ display: none; }
.scroll-y.policy .privacy .dl dl{ margin-top: 50px; }
.scroll-y.policy .privacy .dl dl dt{ font-weight: 500; margin-bottom: 10px; }
.scroll-y.policy .privacy .dl .column{ margin-top: 10px; }
.scroll-y.policy .privacy .dl .column > *:not(:last-child), 
.scroll-y.policy .privacy .dl dl dd > *:not(:last-child), 
.scroll-y.policy .privacy .dl ul li:not(:last-of-type){ margin-bottom: 10px; }
.scroll-y.policy .privacy .dl ul li:not(:last-of-type){ margin-bottom: 10px; }
.scroll-y.policy .privacy .dl ul li.hyphen{ padding-left: 12px; position: relative; }
.scroll-y.policy .privacy .dl ul li.hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
    .scroll-y.policy{ padding: 40px; }
    .scroll-y.policy .privacy *{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
    .scroll-y.policy{ padding: 30px; }
    .scroll-y.policy .privacy *{ font-size: 16px; }
    .scroll-y.policy .privacy .dl dl{ margin-top: 35px; }
    .scroll-y.policy .privacy .dl dl dt{ margin-bottom: 7px; }
    .scroll-y.policy .privacy .dl .column{ margin-top: 7px; }
    .scroll-y.policy .privacy .dl .column > *:not(:last-child), 
    .scroll-y.policy .privacy .dl dl dd > *:not(:last-child), 
    .scroll-y.policy .privacy .dl ul li:not(:last-of-type){ margin-bottom: 7px; }
    .scroll-y.policy .privacy .dl ul li:not(:last-of-type){ margin-bottom: 7px; }
}

@media screen and (max-width: 900px){
    .scroll-y.policy .scroll-y{ padding: 25px; }
}



/* 문의폼 - submit */
.submit{ display: flex; justify-content: center; }
.submit > *{ max-width: calc((100% - 10px) / 2); width: 365px; height: 90px; background: var(--mainColor); border: none; border-radius: 10px; display: inline-flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 500; color: #FFF !important; }
.submit > *:not(:last-child){ margin-right: 10px; }
.submit > *.black{ background: #111; }
.submit > *.delete{ background: #F3F3F3; color: #CCC !important; margin-right: auto; }

@media screen and (max-width: 1700px){
    .submit > *{ width: 300px; height: 80px; font-size: 19px; }
}

@media screen and (max-width: 1280px){
    .submit > *{ width: 240px; height: 70px; font-size: 18px; }
}

@media screen and (max-width: 1000px){
    .submit > *{ width: 200px; height: 65px; font-size: 17px; }
}

@media screen and (max-width: 650px){
    .submit > *{ min-width: 0; flex: 1 1 auto; }
}



/* 문의폼 (공통) */
.inquiry-box{ 
    --red: #FF0000;
}

.inquiry-box .sec-title{ display: flex; align-items: center; }
.inquiry-box .sec-title p.right{ font-size: 16px; font-weight: 300; color: #555; text-align: right; margin-left: auto; }
.inquiry-box .sec-title p.right i{ color: var(--red); font-style: normal; }

.inquiry-box .agree{
    --icon: 35px;
    --gap: 20px;
}
.inquiry-box .agree{ text-align: right; margin-top: 30px; }
.inquiry-box .agree input{ display: none; }
.inquiry-box .agree label{ display: inline-block; font-size: 18px; font-weight: 400; color: #333; padding: calc(((var(--icon) - 1.3em) / 2) + 10px) 0; padding-left: calc(var(--icon) + var(--gap)); margin: -10px 0; position: relative; cursor: pointer; }
.inquiry-box .agree label{
	-webkit-tap-highlight-color: transparent;   /* 사파리 & 크롬용 */
	-webkit-touch-callout: none;                    /* iOS 오래 누를 때 메뉴 제거 */
	user-select: none;    
}
.inquiry-box .agree label::before,
.inquiry-box .agree label::after{ content: ""; width: var(--icon); height: var(--icon); border-radius: 50%; position: absolute; top: 10px; left: 0; }
.inquiry-box .agree label::before{ background: #EEE; }
.inquiry-box .agree label::after{ background: url("/img/board/icon_form_check.svg") no-repeat center center / contain; }
.inquiry-box .agree input:checked + label::before{ background: var(--mainColor); }


.inquiry-box .form{ 
    --th: 280px;
    --height: 73px;
    --padding: 25px;
    --radius: 10px;
}  
.inquiry-box .form table{ border-top: 1px solid var(--border); border-collapse: unset; border-spacing: 0 30px; margin-bottom: -30px; }
.inquiry-box .form th{ width: var(--th); font-size: 20px; font-weight: 600; color: #111; text-align: left; padding-right: 10px; }
.inquiry-box .form th i{ color: var(--red); font-style: normal; }
.inquiry-box .form td,
.inquiry-box .form td *{ font-size: 18px; font-weight: 400; color: #111; }
.inquiry-box .form .max810{ max-width: 810px; }
.inquiry-box .form .flex{ display: flex; margin-bottom: -10px; }
.inquiry-box .form .flex > *{ margin-bottom: 10px; }
.inquiry-box .form .flex > *:not(:last-child){ margin-right: 10px; }
.inquiry-box .form .column{ flex-direction: column; margin-bottom: -15px; }
.inquiry-box .form .column > *{ margin-bottom: 15px; }
.inquiry-box .form .small{ font-size: 16px; font-weight: 300; color: #555; margin-top: 15px; }

.inquiry-box .form input,
.inquiry-box .form select,
.inquiry-box .form textarea{ width: 100%; border: 1px solid var(--border); border-radius: var(--radius); -webkit-border-radius: var(--radius); }
.inquiry-box .form input:focus,
.inquiry-box .form select:focus,
.inquiry-box .form textarea:focus{ outline: auto; outline-color: var(--mainColor); box-shadow: 0 0 20px rgba(var(--mainRGB), 0.1); }
.inquiry-box .form input,
.inquiry-box .form select{ height: var(--height); padding: 0 var(--padding); }
.inquiry-box .form textarea::placeholder, 
.inquiry-box .form input::placeholder{ font-weight: 300; color: #888; }
.inquiry-box .form input:disabled,
.inquiry-box .form textarea:disabled{ background: var(--grayBg); font-weight: 300; color: #888; }
.inquiry-box .form select{ background: url("/img/board/icon_form_select.svg") no-repeat center right var(--padding) / auto; padding-right: calc((var(--padding) * 2) + 12px); }
.inquiry-box .form textarea{ resize: none; height: 200px; padding: var(--padding); }

.inquiry-box .form .input-list{
    --icon: 25px;
    --gap: 20px;
}
.inquiry-box .form .input-list{ overflow: hidden; }
.inquiry-box .form .input-list ul{ min-height: var(--height); display: flex; flex-wrap: wrap; align-items: center; margin-right: -60px; }
.inquiry-box .form .input-list input{ display: none; }
.inquiry-box .form .input-list label{ min-height: var(--height); display: flex; align-items: center; padding: 7px 0; padding-left: calc(var(--icon) + var(--gap)); padding-right: 60px; position: relative; cursor: pointer; }
.inquiry-box .form .input-list label{
	-webkit-tap-highlight-color: transparent;   /* 사파리 & 크롬용 */
	-webkit-touch-callout: none;                    /* iOS 오래 누를 때 메뉴 제거 */
	user-select: none;    
}
.inquiry-box .form .input-list label::before,
.inquiry-box .form .input-list label::after{ content: ""; width: var(--icon); height: var(--icon); border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.inquiry-box .form .input-list label::before{ background: #EEE; }
.inquiry-box .form .input-list label::after{ background: url("/img/board/icon_form_check.svg") no-repeat center center / contain; }
.inquiry-box .form .input-list input:checked + label::before{ background: var(--mainColor); }

.inquiry-box .form .file input{ flex: 1 1 auto; min-width: 0; }
.inquiry-box .form .fileBtn{ flex-shrink: 0; }
.inquiry-box .form .fileBtn input{ display: none; }
.inquiry-box .form .fileBtn label{ width: 175px; height: var(--height); display: flex; justify-content: center; align-items: center; background: #EEE; border-radius: var(--radius); font-weight: 600; color: #888; cursor: pointer; }

.inquiry-box .form .captcha figure{ flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.inquiry-box .form .captcha figure img{ height: calc(var(--height) - 2px) !important; }
.inquiry-box .form .captcha .input{ flex: 1 1 auto; min-width: 0; position: relative; }
.inquiry-box .form .captcha .input input{ padding-right: calc((var(--padding) * 2) + 23px); }
.inquiry-box .form .captcha .input button{ display: inline-flex; justify-content: center; align-items: center; background: none; border: none; padding: 0 var(--padding); position: absolute; top: 0; right: 0; bottom: 0; outline: none; }
.inquiry-box .form .captcha .input button i{ display: inline-block; width: 23px; height: 23px; background: url("/img/board/icon_form_reset.svg") no-repeat center center / contain; }

@media screen and (max-width: 1700px){
    .inquiry-box .agree{
        --icon: 30px;
    }
    .inquiry-box .agree{  margin-top: 25px; }
    .inquiry-box .agree label{ font-size: 17px; }

    .inquiry-box .form{ 
        --th: 230px;
        --height: 65px;
        --padding: 20px;
    }  
    .inquiry-box .form th{ font-size: 19px; }

    .inquiry-box .form .input-list{
        --gap: 15px;
    }
    .inquiry-box .form .input-list ul{ margin-right: -45px; }
    .inquiry-box .form .input-list label{ padding-right: 45px; }

    .inquiry-box .fileBtn label{ width: 150px; }
}

@media screen and (max-width: 1280px){
    .inquiry-box .agree{
        --icon: 25px;
        --gap: 15px;
    }
    .inquiry-box .agree{  margin-top: 20px; }
    .inquiry-box .agree label{ font-size: 16px; }

    .inquiry-box .form{ 
        --th: 200px;
        --height: 60px;
        --padding: 17px;
    }  
    .inquiry-box .form th{ font-size: 18px; }
    .inquiry-box .form td,
    .inquiry-box .form td *{ font-size: 17px; }
    .inquiry-box .form .small{ font-size: 15px; margin-top: 10px; }

    .inquiry-box .form .input-list{
        --icon: 22px;
        --gap: 12px;
    }
    .inquiry-box .form .input-list ul{ margin-right: -35px; }
    .inquiry-box .form .input-list label{ padding-right: 35px; }

    .inquiry-box .form .fileBtn label{ width: 120px; }
}

@media screen and (max-width: 1000px){
    .inquiry-box .sec-title{ flex-direction: column; align-items: unset; padding-bottom: 10px; }
    .inquiry-box .sec-title p.right{ text-align: left; margin-top: 15px; margin-left: 0; }

    .inquiry-box .form tr{ width: 100%; display: flex; flex-direction: column; }
    .inquiry-box .form tr:not(:last-of-type){ margin-bottom: 30px; }
    .inquiry-box .form th{ width: 100%; margin-bottom: 10px; }
    .inquiry-box .form th br{ display: none; }
    .inquiry-box .form .max810{ max-width: 100%; }
}

@media screen and (max-width: 900px){
    .inquiry-box .form{ 
        --height: 57px;
        --padding: 15px;
    }  
    .inquiry-box .form td,
    .inquiry-box .form td *{ font-size: 16px; }
    .inquiry-box .form .small{ font-size: 14px; }

    .inquiry-box .form .fileBtn label{ width: 100px; }
}

@media screen and (max-width: 650px){
    .inquiry-box .form .name{ flex-wrap: wrap; }
    .inquiry-box .form .name > *{ margin-right: 0 !important; }
}


/* 내 정보 수정 */
.inquiry-box.accout .submit{ justify-content: unset; }
.inquiry-box.accout .submit > *.black{ margin-left: 10px; }


/* 로그인 */
#login{
    --radius: 10px;
    --margin50: 50px;
    --margin30: 30px;
}
#login .white-box{ max-width: 780px; }
#login .sec-title{ text-align: center; padding-bottom: var(--margin50); }
#login .sec-title p{ font-size: 17px; font-weight: 400; color: #555; line-height: 1.5; margin-top: 20px; }

#login .tab-btns{ margin-bottom: var(--margin50); }
#login .tab-btns ul{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
#login .tab-btns ul li > *{ display: flex; justify-content: center; align-items: center; border: none; border-bottom: 1px solid var(--border); font-size: 20px; font-weight: 500; color: #CCC; text-align: center; padding: 17px 10px; }
#login .tab-btns ul li.on > *{ color: #111; border-bottom-color: #000; }

#login .input input{ width: 100%; height: 73px; border: 1px solid var(--border); border-radius: var(--radius); -webkit-border-radius: var(--radius); font-size: 18px; font-weight: 300; color: #111; padding: 0 25px; }
#login .input input:not(:last-of-type){ margin-bottom: 10px; }
#login .input input::placeholder{ color: #888; }

#login .link{ margin-top: var(--margin30); }
#login .link ul{ display: flex; justify-content: flex-end; margin: -15px; }
#login .link ul li{ position: relative; }
#login .link ul li::after{ content: ""; width: 1px; height: 15px; background: var(--border); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#login .link ul li:last-of-type::after{ display: none; }  
#login .link ul li a{ display: block; font-size: 16px; font-weight: 500; color: #555; padding: 15px; }

#login .submit{ margin-top: var(--margin30); }
#login .submit > *{ max-width: 100%; width: 100%; }


/* 아이디, 비밀번호 찾기 */
#login.find .sec-title{ padding-bottom: 20px; }

@media screen and (max-width: 1700px){
    #login{
        --margin50: 40px;
    }
    #login .sec-title p{ margin-top: 15px; }

    #login .tab-btns ul li > *{ font-size: 19px; padding-block: 15px; }

    #login .input input{ height: 65px; padding: 20px; }
}

@media screen and (max-width: 1280px){
    #login{
        --margin50: 30px;
        --margin30: 25px;
    }
    #login .sec-title p{ font-size: 16px; margin-top: 10px; }

    #login .tab-btns ul li > *{ font-size: 18px; padding-block: 12px; }

    #login .input input{ height: 60px; font-size: 17px; padding: 17px; }
}

@media screen and (max-width: 900px){
    #login .white-box{ padding: 30px; }
}

@media screen and (max-width: 700px){
    #login .sec-title p span{ display: block; }
}


/* 회원가입 - 개인정보처리방침 */
#agree{
    --pTB: 30px;
    --pLR: 20px;
    --icon: 35px;
}
#agree .item{ border-bottom: 1px solid var(--border); }
#agree .item .tit{ display: flex; }
#agree .item .tit input{ display: none; }
#agree .item .tit label{ flex: 1 1 auto; min-width: 0; display: block; font-size: 18px; font-weight: 300; color: #333; padding: var(--pTB) 0; padding-left: var(--icon); position: relative; cursor: pointer; }
#agree .item .tit label{
	-webkit-tap-highlight-color: transparent;   /* 사파리 & 크롬용 */
	-webkit-touch-callout: none;                    /* iOS 오래 누를 때 메뉴 제거 */
	user-select: none;    
}
#agree .item .tit label::before,
#agree .item .tit label::after{ content: ""; width: var(--icon); height: var(--icon); border-radius: 50%; position: absolute; top: calc(((var(--pTB) * 2) + 1.3em) / 2); left: 0; transform: translateY(-50%); }
#agree .item .tit label::before{ background: #EEE; }
#agree .item .tit label::after{ background: url("/img/board/icon_form_check.svg") no-repeat center center / contain; }
#agree .item .tit label > *{ display: inline-block; padding-left: var(--pLR); }
#agree .item .tit label strong{ font-weight: 500; color: #111; }
#agree .item .tit input:checked + label::before{ background: var(--mainColor); }
#agree .item .tit button{ flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; background: none; border: none; padding: 0 30px; outline: none; }
#agree .item .tit button i{ display: inline-block; width: 12px; height: 7px; background: url("/img/board/icon_agree_arrow.svg") no-repeat center center / contain; transform: rotate(0); transition: transform 0.4s; }
#agree .item .content{ display: none; padding-bottom: var(--pTB); }

#agree .item.on .tit button i{ transform: rotate(-180deg); }

@media screen and (max-width: 1700px){
    #agree{
        --pTB: 25px;
        --icon: 30px;
    }
    #agree .item .tit label{ font-size: 17px; }
    #agree .item .tit button{ padding: 0 25px; }
}

@media screen and (max-width: 1280px){
    #agree{
        --pTB: 20px;
        --pLR: 15px;
        --icon: 25px;
    }
    #agree .item .tit label{ font-size: 16px; }
    #agree .item .tit button{ padding: 0 20px; }
}

@media screen and (max-width: 1000px){
    #agree .item .tit label span{ width: 100%; margin-top: 5px; }
}

@media screen and (max-width: 900px){
    #agree .item .content .scroll-y.policy{ padding: 20px 22px; }

    #agree .submit{ padding-top: 40px; }
}


/* 회원가입 - 회원가입 */
#join{
    --btn: 240px;
}

#join .flex button{ flex-shrink: 0; width: var(--btn); background: #EEE; border: none; border-radius: 10px; font-weight: 600; color: #888; line-height: 1.2; padding: 10px; }
#join .inquiry-box .input-list ul{ display: grid; grid-template-columns: repeat(5, 20%); margin-right: -10px; }
#join .inquiry-box .input-list label{ padding-right: 10px; }

@media screen and (max-width: 1700px){
    #join{
        --btn: 200px;
    }

    #join .flex button{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
    #join{
        --btn: 160px;
    }

    #join .flex button{ font-size: 16px; }
}

@media screen and (max-width: 1200px){
    #join .inquiry-box .input-list ul{ grid-template-columns: repeat(4, 25%); }
}

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

@media screen and (max-width: 900px){
    #join{
        --btn: 135px;
    }
    #join .flex button{ font-size: 15px; }
}

@media screen and (max-width: 750px){
    #join .inquiry-box .input-list{
        --height: 50px;
    }
    #join .inquiry-box .input-list ul{ grid-template-columns: repeat(2, 50%); }
}


/* 기본 게시판 */
.board-box{
    --padding: 25px;
}
.board-box table{ border-top: 1px solid #000; }
.board-box colgroup col{ width: 100%; }
.board-box colgroup col.s{ width: 150px; }
.board-box colgroup col.m{ width: 300px; }
.board-box tr{ border-bottom: 1px solid var(--border); }
.board-box th,
.board-box td{ padding: var(--padding); font-size: 18px; color: #111; text-align: center; }
.board-box th{ font-weight: 500; }
.board-box td{ font-weight: 300; }

.board-box thead{ background: rgba(var(--mainRGB), 0.05); }
.board-box tbody tr{ cursor: pointer; }
.board-box tbody td a{ display: block; text-align: left; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }


/* cart */
.board-box.cart{
    --height: 40px;
    --radius: 5px;
}
.board-box.cart td a{ display: flex; align-items: center; white-space: unset; text-overflow: unset; overflow: unset; }
.board-box.cart td .img{ flex-shrink: 0; width: 100px; background: var(--grayBg); border-radius: 10px; padding: 15px; }
.board-box.cart td .img figure{ display: block; padding-bottom: 100%; position: relative; overflow: hidden; }
.board-box.cart td .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.board-box.cart td .text{ flex: 1 1 auto; min-width: 0; padding-left: 30px; }
.board-box.cart td .text ul{ display: flex; flex-wrap: wrap; }
.board-box.cart td .text ul li{ font-size: 14px; font-weight: 500; color: #888; padding-inline: 15px 10px; position: relative; }
.board-box.cart td .text ul li::before{ content: ""; width: 5px; height: 8px; background: url("/img/board/icon_cart_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.board-box.cart td .text ul li:first-of-type{ padding-left: 0 !important; }
.board-box.cart td .text ul li:first-of-type::before{ display: none; }
.board-box.cart td .text h6{ font-size: 20px; font-weight: 500; color: #111; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 10px; }

.board-box.cart td button{ width: 120px; height: var(--height); background: var(--grayBg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 500; color: #AAA; padding: 0 15px; }

.board-box.cart td .quantity{ display: flex; justify-content: center; }
.board-box.cart td .quantity > *:not(:last-child){ margin-right: 5px; }
.board-box.cart td .quantity input{ width: 80px; height: var(--height); border: 1px solid var(--border); border-radius: var(--radius); -webkit-border-radius: var(--radius); font-size: 16px; font-weight: 500; color: #111; padding: 0 15px; text-align: center; }
.board-box.cart td .quantity input:disabled{ background: #FFF; }
.board-box.cart td .quantity button{ flex-shrink: 0; width: unset; }

@media screen and (max-width: 1700px){
    .board-box{
        --padding: 20px;
    }
    .board-box colgroup col.s{ width: 120px; }
    .board-box colgroup col.m{ width: 250px; }

    /* cart */
    .board-box.cart td .text h6{ font-size: 19px; }
    .board-box.cart td button{ width: 100px; }
}

@media screen and (max-width: 1280px){
    .board-box{
        --padding: 17px;
    }
    .board-box colgroup col.s{ width: 100px; }
    .board-box colgroup col.m{ width: 200px; }
    .board-box th,
    .board-box td{ font-size: 17px; }
}

@media screen and (max-width: 1000px){
    .board-box colgroup,
    .board-box thead{ display: none; }
    .board-box tbody tr{ display: flex; flex-wrap: wrap; }
    .board-box tbody tr{ width: 100%; padding-top: var(--padding); }
    .board-box tbody tr td{ text-align: left; padding-top: 0; padding-inline: 10px; }

    /* basic */
    .board-box.basic tbody tr td{ width: 100%; }
    .board-box.basic tbody tr td:nth-of-type(1){ display: none; }
    .board-box.basic tbody tr td::before{ content: attr(data-th); font-weight: 500; }

    /* cart */
    .board-box.cart tr{ align-items: center; cursor: unset; }
    .board-box.cart tr th{ display: none; }
    .board-box.cart tr td:nth-of-type(1){ width: 100%; }
    .board-box.cart tr td:nth-of-type(2){ flex: 1 1 auto; min-width: 0; }
    .board-box.cart tr td:nth-of-type(3){ padding-left: 0; }

    .board-box.cart td .text h6{ font-size: 18px; }
    .board-box.cart td .quantity input{ flex: 1 1 auto; min-width: 0; }

    /* cart - view */
    .board-box.cart.view tr td:nth-of-type(1){ width: calc(100% - 100px); }
}

@media screen and (max-width: 650px){
    .board-box.cart td .text{ padding-left: 25px; }
}



/* 검색결과 */
#result .search{
    --height: 80px;
    --padding: 40px;
}
#result .search{ max-width: 100%; width: 860px; margin: 0 auto; margin-bottom: 50px; position: relative; }
#result .search input{ width: 100%; height: var(--height); background: var(--grayBg); border-radius: 999px; -webkit-border-radius: 999px; font-size: 18px; font-weight: 300; color: #111; padding: 0 var(--padding); padding-right: calc((var(--padding) * 2) + 23px); }
#result .search input::placeholder{ color: #888; }
#result .search button{ background: none; border: none; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 var(--padding); }
#result .search button i{ display: inline-flex; width: 23px; height: 23px; background: url("/img/board/icon_search.svg") no-repeat center center / contain; }

#result .result{ font-size: 32px; font-weight: 500; color: #111; text-align: center; margin-bottom: var(--sec100); }
#result .result em{ color: var(--mainColor); }

@media screen and (max-width: 1700px){
    #result .search{
        --height: 75px;
        --padding: 35px;
    }
    #result .search{ width: 750px; }
    #result .search input{ font-size: 17px; }
    #result .result{ font-size: 28px; }
}

@media screen and (max-width: 1280px){
    #result .search{
        --height: 65px;
        --padding: 30px;
    }
    #result .search{ width: 600px; margin-bottom: 30px; }
    #result .search input{ font-size: 16px; }
    #result .result{ font-size: 24px; }
}

@media screen and (max-width: 900px){
    #result .search{
        --height: 60px;
        --padding: 25px;
    }
    #result .result{ font-size: 20px; }
}


/* 개인정보처리방침 + 이용약관 */
#policy .privacy{ line-height: 1.6; padding-top: 75px; }
#policy .privacy *{ font-size: 18px; font-weight: 300; color: #333; line-height: inherit; }
#policy .privacy .box{ background: var(--grayBg); border-radius: 20px; padding: 60px; margin-bottom: var(--sec100); }
#policy .privacy .box .strong{ margin-bottom: 30px; }
#policy .privacy .box .strong > *:not(:last-child){ margin-bottom: 10px; }
#policy .privacy .box .strong strong{ display: block; font-weight: 500; color: #111; line-height: 1.3; }

#policy .dl dl:not(:last-child){ margin-bottom: 50px; }
#policy .dl dl dt{ font-size: 20px; font-weight: 600; color: #111; line-height: 1.3; }
#policy .dl dl dd{ margin-top: 20px; }
#policy .dl .column{ margin-top: 10px; }
#policy .dl .column > *:not(:last-child), 
#policy .dl dl dd > *:not(:last-child), 
#policy .dl ul li:not(:last-of-type){ margin-bottom: 10px; }
#policy .dl ul li.hyphen{ padding-left: 12px; position: relative; }
#policy .dl ul li.hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1700px){
    #policy .privacy{ padding-top: 40px; }
    #policy .privacy .box{ padding: 40px; }

    #policy .dl dl dt{ font-size: 19px; }
}

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

@media screen and (max-width: 1280px){
    #policy .privacy{ padding-top: 0; }
    #policy .privacy *{ font-size: 17px; }
    #policy .privacy .box{ padding: 30px; }
    #policy .privacy .box .strong{ margin-bottom: 20px; }
    #policy .privacy .box .strong > *:not(:last-child){ margin-bottom: 5px; }

    #policy .dl dl:not(:last-child){ margin-bottom: 40px; }
    #policy .dl dl dt{ font-size: 18px; }
    #policy .dl dl dd{ margin-top: 10px; }
}

@media screen and (max-width: 900px){
    #policy .privacy *{ font-size: 16px; }
    #policy .privacy .box{ padding: 25px; }

    #policy .dl dl dt{ font-size: 17px; }
    #policy .dl .column{ margin-top: 7px; }
    #policy .dl .column > *:not(:last-child), 
    #policy .dl dl dd > *:not(:last-child), 
    #policy .dl ul li:not(:last-of-type){ margin-bottom: 7px; }
}