@charset "UTF-8"; /*─────────────────────────────────────────────────────────── sub 공통 ───────────────────────────────────────────────────────────*/ /*서브 타이틀*/ .sub_title{box-sizing:border-box;background:url('../img/sub/sub_title_bg.jpg')no-repeat center;background-size:cover;padding:34px 0;position:relative;z-index:12;top:0;left:0;} #wrapper:has(.is_item) .sub_title{top:85px;position:sticky;} .sub_title.teacher{background:url('/teacher/theme/gnuwiz_shop_01/img/sub/sub_title_bg.jpg')no-repeat center;background-size:cover;} .sub_title.edu{background:url('/edu/theme/gnuwiz_shop_01/img/sub/sub_title_bg.jpg')no-repeat center;background-size:cover;} .sub_title .w_custom{display: flex;align-items: center;justify-content: space-between;font-size:var(--title-20);} .sub_title h2{font-size:200%;color:var(--black-color03);font-weight:700;} .sub_cont_title_box{font-size:var(--title-20);margin-bottom:20px;} .sub_cont_title{font-size:130%;color:var(--black-color00);font-weight:500;line-height:1.3;display: inline-flex;align-items: center;gap:12px;} .sub_cont_title:before{width:4px;height:22px;content:"";background:var(--point-color01);border-radius:var(--radius-20);display: inline-block;} .sub_cont_title_box p{font-size:90%;color:var(--black-color03);font-weight: 400;line-height:1.6;margin-top:12px;} #nav_wrap{display: flex;align-items: center;gap:10px;} #nav_wrap .nav_home{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:48px;aspect-ratio:auto 1;border-radius:100%;background:var(--point-white);} #nav_wrap .nav_box{display: flex;align-items: center;gap:10px;} #nav_wrap .nav_box > div{position: relative;} #nav_wrap .nav_box > div > span{display: inline-flex;box-sizing:border-box;min-width:210px;align-items: center;background:var(--point-white);padding:0 35px 0 20px;height:48px;border-radius:48px;position: relative;font-size:90%;letter-spacing:0;cursor:pointer;} #nav_wrap .nav_box > div > span:after{width:8px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color03);border-width:2px 2px 0 0;transform:rotate(135deg);position: absolute;right:21px;top:17px;} #nav_wrap .nav_box > div.on > span:after{transform:rotate(-45deg);top:22px;} #nav_wrap .nav_list{position: absolute;top:calc(100% + 10px);left:0;width:100%;box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-white);border:1px solid var(--border-color03);padding:20px 10px;display: flex;flex-direction:column;gap:10px;opacity: 0;pointer-events: none;transition: all 0.4s;} #nav_wrap .nav_box > div.on .nav_list{opacity: 1;pointer-events: all;} #nav_wrap .nav_list li a{display: block;font-size:var(--title-16);color:var(--black-color03);font-weight:400;} #nav_wrap .nav_list li.active a{color:var(--point-color01);font-weight: 500;} /*paging*/ #wrapper .pg_wrap{margin-top:60px;} #wrapper .pg_wrap .pg{gap:10px;align-items: center;} #wrapper .pg_wrap .pg_page, #wrapper .pg_wrap .pg > a{padding:0;margin:0;min-width:30px;font-size:var(--title-15);color:var(--black-color05) !important;font-weight:400;font-family:var(--font-type02);display: inline-flex;align-items: center;justify-content: center;text-align: center;} #wrapper .pg_wrap .pg_current{display: inline-flex;box-sizing:border-box;border-radius:100%;width:36px;aspect-ratio:auto 1;background:var(--black-color03);align-items: center;justify-content: center;text-align: center;font-size:var(--title-15);color:var(--point-white);font-weight:600;font-family:var(--font-type02);padding:0;margin:0;border:none;height:auto;} #wrapper .pg_wrap .pg_start, #wrapper .pg_wrap .pg_end{width:10px;height:10px;background:url('../img/sub/paging_last.svg')no-repeat center;min-width:initial;} #wrapper .pg_wrap .pg_start{transform:scaleX(-1);margin-right:20px;} #wrapper .pg_wrap .pg_end{margin-left:20px;} /*btn*/ #wrapper .btn{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-10);font-size:var(--title-17);font-weight:500;border:1px solid;height:50px;line-height:50px;} #wrapper .btn_basic{border-color:var(--black-color03);background:var(--point-white);color:var(--black-color03);min-width:120px;} #wrapper .btn_point{border-color:var(--point-color01);background:var(--point-color01);color:var(--point-white);} #wrapper .btn_submit{border-radius:var(--radius-10);box-sizing:border-box;height:50px;line-height:50px;display: inline-flex;align-items: center;justify-content: center;padding:0 20px;text-align: center;border-color:var(--point-color01);background:var(--point-color01);} .board_view_btn{position: relative;min-height:56px;display: flex;align-items: center;justify-content: center;margin-top:40px;} .board_view_btn .board_btn_box{position: absolute;right:0;top:0;display: flex;gap:10px;} .board_view_btn .board_btn_box .btn{width:140px;height:56px;} #wrapper .board_view_btn .pg_wrap{margin:0;} @media (max-width:1200px){ /*서브 타이틀*/ .sub_title .w_custom{flex-direction:column;align-items: flex-start;gap:20px;} } @media (max-width:1023px){ .sub_title{padding-block:clamp(14px, 3.4vw, 34px);} #wrapper:has(.is_item) .sub_title{top:clamp(55px, 7.5vw, 75px)} .sub_cont_title_box{margin-bottom:clamp(10px, 2vw, 20px);} #nav_wrap .nav_home{width:clamp(34px, 4.8vw, 48px);} #wrapper .btn{height:clamp(40px, 5vw, 50px);padding-inline:clamp(10px, 2vw, 20px);line-height:clamp(40px, 5vw, 50px);min-width:initial;} #wrapper .btn_submit{height:clamp(40px, 5vw, 50px);padding-inline:clamp(10px, 2vw, 20px);line-height:clamp(40px, 5vw, 50px);} } @media (max-width:860px){ /*서브 타이틀*/ #nav_wrap .nav_box > div > span{min-width:160px;} /*paging*/ #wrapper .pg_wrap{margin-top:40px;} #wrapper .pg_wrap .pg_page{min-width:20px;} #wrapper .pg_wrap .pg_current{width:32px;} #wrapper .pg_wrap .pg_start{margin-right:10px;} #wrapper .pg_wrap .pg_end{margin-left:10px;} } @media (max-width:640px){ .sub_cont_title{gap:8px;} .sub_cont_title:before{width:3px;height:15px;} } @media (max-width:479px){ /*서브 타이틀*/ .sub_title{padding:20px 0;} .sub_title .w_custom{gap:10px;} .sub_title h2{font-size:170%;} #nav_wrap{width:100%;} #nav_wrap .nav_home{width:34px;} #nav_wrap .nav_home img{height:10px;} #nav_wrap .nav_box{width:calc(100% - 44px);} #nav_wrap .nav_box > div {width:calc(50% - 10px);} #nav_wrap .nav_box > div > span{min-width:100%;width:100%;height:34px;padding:0 20px 0 10px;} #nav_wrap .nav_box > div > span:after{width:6px;right:12px;top:12px;} #nav_wrap .nav_box > div.on > span:after{top:15px;} #nav_wrap .nav_list{top:calc(100% + 6px);padding:12px 8px;gap:8px;} /*paging*/ #wrapper .pg_wrap{margin-top:25px;} } #wrapper label{font-size:var(--title-20);} #wrapper label:has([type="checkbox"]){display: flex;align-items: flex-start;line-height: 26px;gap: 14px;cursor: pointer;font-size:110%;font-weight:500;color: var(--black-color00);} #wrapper label:has([type="checkbox"]) em{font-weight: inherit;color: var(--point-color02);display: contents;} #wrapper label:has([type="checkbox"]) span{font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit;} #wrapper label [type="checkbox"]{position: relative;display: block;width: 26px;aspect-ratio:auto 1;border: 1px solid var(--border-color02);border-radius:var(--radius-04);background: var(--point-white);flex-shrink: 0;cursor: pointer;transition: all 0.4s;opacity:1;box-sizing:border-box;} #wrapper label [type="checkbox"]:before{position: absolute;content:'';inset: 0;background: url('../img/sub/chk_icon.png') no-repeat center / 14px auto; transition: all 0.4s;opacity:0;} #wrapper label [type="checkbox"]:checked{background: var(--black-color02); border-color: var(--black-color02);} #wrapper label [type="checkbox"]:checked:before{filter: var(--filter-white);opacity:1;} #wrapper input[type="radio"] + label{cursor:pointer;} /* over */ @media (hover: hover) and (pointer: fine){ #wrapper label:hover [type="checkbox"]:before{opacity:1;} } @media (max-width:1023px) { #wrapper label:has([type="checkbox"]){line-height: clamp(20px, 3.1vw, 26px);gap:clamp(10px, 1.9vw, 14px)} #wrapper label [type="checkbox"]{width: clamp(20px, 3.1vw, 26px);} #wrapper label [type="checkbox"]:before{background-size: clamp(10px, 1.9vw, 14px);} } /*modal*/ body .overlay{background:rgba(0,0,0,0.5);} body .modal{box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color03);padding:30px 30px;background:var(--point-white);max-height:90vh;overflow-y:auto;font-size:var(--title-20);} body .modal-title{font-size:110%;color:var(--black-color00);font-weight: 600;line-height:1.3;box-sizing:border-box;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--black-color00);} body .small-btn{width:25px;aspect-ratio:auto 1;border:none;height:auto;top:30px;right:30px;border-radius:0;} body .small-btn i{display: none;} body .small-btn:before, body .small-btn:after{display: inline-block;width:100%;height:2px;background:var(--black-color03);position: absolute;top:50%;border-radius:0;} body .small-btn:before{transform:rotate(45deg);} body .small-btn:after{transform:rotate(-45deg);} body .small-btn:hover:after{transform:rotate(-45deg);} @media (max-width:860px) { body .modal{padding:15px 15px;} body .modal-title{margin-bottom:10px;padding-bottom:10px;} body .small-btn{top:15px;right:15px;} } @media (max-width:479px) { body .small-btn{width:20px;} } .btn_close{border-radius:10px;} #wrapper .tooltip_icon{display: none;} /*─────────────────────────────────────────────────────────── 분류 ───────────────────────────────────────────────────────────*/ .cate_dep_box{text-align: center;} .cate_dep02{display:inline-flex;flex-wrap:wrap;justify-content: center;padding:8px 8px;gap:10px;box-sizing:border-box;border-radius:100px;border:1px solid var(--border-color03);font-size:var(--title-20);} .cate_dep02 li a{display: inline-flex;box-sizing:border-box;font-size:110%;color:var(--black-color03);font-weight:400;height:50px;padding:0 24px;align-items: center;justify-content: center;border-radius:50px;background:var(--gray-bg04);} .cate_dep02 li.active a{background:var(--point-color01);color:var(--point-white);font-weight:500;} .cate_dep03{display: flex;flex-wrap:wrap;justify-content: center;gap:20px 40px;margin-top:39px;} .cate_dep03 li{font-size:var(--title-20);} .cate_dep03 li a{font-size:110%;color:var(--black-color00);font-weight:400;display: inline-flex;flex-direction:column;align-items: center;gap:8px;} .cate_dep03 li.active a{color:var(--point-color01);font-weight:600;} .cate_dep03 li.active a:after{width:6px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-color01);display: inline-block;} .goods_list_box{margin-top:40px;} #wrapper #sct_sortlst{padding:0;border:none;} @media (max-width:640px){ .cate_dep02 li a{padding:0 20px;height:42px;} .cate_dep03{margin-top:20px;gap:12px 20px;} .cate_dep03 li a{gap:4px;font-size:100%;} .cate_dep03 li.active a:after{width:4px;} } @media (max-width:479px){ .cate_dep02 li a{padding:0 15px;height:36px;} .cate_dep03{margin-top:15px;} .goods_list_box{margin-top:20px;} } /*─────────────────────────────────────────────────────────── 상품공통 ───────────────────────────────────────────────────────────*/ .goods_list{display: flex;flex-wrap:wrap;gap:60px 24px;} .goods_list li{box-sizing:border-box;position: relative;background:var(--point-white);transition:all 0.3s ease-out;} .goods_list li.row_4{width:calc(25% - 18px);} .goods_list li > a{position: absolute;top:0;left:0;display: block;width:100%;height:100%;z-index:5;} .goods_list li .sct_img{padding:40px 50px;width:100%;box-sizing:border-box;position: relative;border-radius:var(--radius-20);border:1px solid var(--border-color03);transition:all 0.3s ease-out;} .goods_list_box .goods_list li .sct_img:before{content:"";position: absolute;top:-1px;left:-1px;display: block;width:calc(100% + 2px);height:calc(100% + 2px);z-index:3;box-sizing:border-box;border-radius:var(--radius-20);border:2px solid var(--point-color01);opacity:0;pointer-events:none;transition:all 0.3s ease-out;} .goods_list li .ov_box{width:0;aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;background:rgba(51, 51, 51, 0.9);box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.25);position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:3;opacity:0;transition:all 0.3s ease-out;} .goods_list li .ov_box:before, .goods_list li .ov_box:after{content:"";background:var(--point-white);position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .goods_list li .ov_box:before{width:19px;height:2px;} .goods_list li .ov_box:after{width:2px;height:19px;} .goods_list li .sct_img .img_box{display: flex;width:100%;height:0;padding-bottom:131%;position: relative;overflow:hidden;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);transition:all 0.3s ease-out;} .goods_list li .sct_img .img_box img{position: absolute;top:0;left:0;max-width:100%;height:100%;} .goods_list li .sct_ct_wrap{text-align: center;font-size:var(--title-20);} .goods_list li .sct_txt{text-align: center;font-size:var(--title-20);margin-top:19px;box-sizing: border-box;} .goods_list li .sct_txt p{font-size:110%;color:var(--black-color00);font-weight:400;line-height:1.4;} .goods_list li .sct_txt .sct_basic{font-size:80%;color:var(--black-color05);font-weight:400;line-height:1.4;display: block;margin-top:5px;} .goods_list li .sct_ct_wrap .price{font-size:100%;color:var(--black-color03);font-weight: 400;line-height:1.4;margin-top:12px;} .goods_list li .sct_ct_wrap .sct_op_btn{display: none;} /* over */ @media (hover: hover) and (pointer: fine){ .goods_list_box .goods_list li:hover .sct_img:before{opacity:1;} .goods_list li:hover .sct_img .img_box{transform:translateY(-7px);} .goods_list li:hover .ov_box{width:54px;opacity:1;} } @media (max-width:1023px) { .goods_list li .sct_img{padding:30px 30px;} } @media (max-width:860px) { .goods_list li.row_4{width:calc(100% / 3 - 16px);} } @media (max-width:640px) { .goods_list{gap:30px 15px;} .goods_list li.row_4{width:calc(50% - 7.5px);} } @media (max-width:479px) { .goods_list{gap:20px 15px;} .goods_list li .sct_img{padding:15px 15px;} .goods_list li .sct_img .img_box{box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.15);} .goods_list li .sct_txt{margin-top:10px;padding:0 8px;} .goods_list li .sct_ct_wrap .price{margin-top:8px;} } /*─────────────────────────────────────────────────────────── 검색 ───────────────────────────────────────────────────────────*/ #wrapper #gw-ssch > div{margin-top:0;} #wrapper #gw-ssch-frm{box-sizing:border-box;border-radius:var(--radius-20);background:var(--gray-bg01);} #wrapper #gw-ssch-frm .ssch_scharea{justify-content: center;} #wrapper #ssch-filter, #wrapper .gw-ssch-close{cursor:pointer;} /*filter*/ #wrapper #gw-ssch .gw-ssch-left.active{border-radius:0;margin:0;height:100%;overflow-y:auto;padding-bottom:50px;} @media (max-width:1024px) { #wrapper #gw-ssch .gw-ssch-right{padding:0;} #wrapper #gw-ssch-frm{padding:clamp(20px, 4vw, 40px) clamp(15px, 8vw, 80px);} #wrapper #gw-ssch .gw-ssch-right input[type="text"]{width:calc(100% - 110px);} #wrapper #gw-ssch [class^='gw-shop-btn'][class*="submit"]{width:100px;} } @media (max-width:640px) { #wrapper #gw-ssch .ssch_option{flex-direction: column;} #wrapper #gw-ssch .ssch_option > div{width:100%;} } @media (max-width:479px) { #wrapper #gw-ssch-frm .ssch_scharea{flex-direction: column;} #wrapper #gw-ssch .gw-ssch-right input[type="text"]{width:100%;} #wrapper #gw-ssch [class^='gw-shop-btn'][class*="submit"]{width:100%;} } /*─────────────────────────────────────────────────────────── 상세 ───────────────────────────────────────────────────────────*/ .detail_info_top{display: flex;flex-wrap:wrap;gap:80px;padding-top:21px;} .detail_info_top .detail_img{width:550px;} .detail_info_top .detail_img .img_box{box-sizing:border-box;width:100%;border-radius:var(--radius-20);border:1px solid var(--border-color03);overflow:hidden;padding:74px 92px;} .detail_info_top .detail_img .img_box .img{box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);position: relative;width:100%;height:0;padding-bottom:131.3%;overflow:clip;} .detail_info_top .detail_img .img_box img{position: absolute;top:0;left:0;object-fit:none;height:auto;} .detail_img .detail_link{display: flex;margin-top:30px;flex-wrap:wrap;gap:10px;} .detail_img .detail_link a{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;text-align: center;width:calc(50% - 5px);height:60px;border-radius:8px;border:1px solid var(--border-color02);background:var(--point-white);gap:16px;font-size:var(--title-20);color:var(--black-color03);font-weight:400;transition: all 0.3s;} .detail_img .detail_link a img{transition: all 0.3s;} .detail_info_box{width:calc(100% - 630px);font-size: var(--title-20);} .detail_info_box .prd_name{font-size:180%;color:var(--black-color03);font-weight: 600;border-bottom:1px solid var(--black-color00);padding-bottom:30px;} .detail_info_box .detail_info{display: flex;flex-direction:column;gap:26px;margin-top:29px;margin-bottom:30px;box-sizing:border-box;border-bottom:1px solid var(--border-color01);padding-bottom:30px;} .detail_info_box .detail_info dl{display: flex;gap:30px;align-items: center;} .detail_info_box .detail_info dl dt, .detail_info_box .detail_info dl dd{font-size:var(--title-18);font-weight: 400;} .detail_info_box .detail_info dl dt{width:120px;color:var(--black-color00);flex-shrink:0;} .detail_info_box .detail_info dl dd{color:var(--black-color06);} .detail_info_box #total_price{display: flex;align-items: center;justify-content: space-between;font-size:var(--title-20);} .detail_info_box #total_price span{font-size:100%;color:var(--black-color12);font-weight:500;} .detail_info_box #total_price strong{font-size:130%;color:var(--point-color01);font-weight:600;font-family:var(--font-type02);letter-spacing:0;} .detail_info_box #total_price strong em{font-size:var(--title-20);color:var(--point-color01);font-weight:400;font-family:var(--font-type01);} .detail_btn_box{margin-top:40px;display: flex;flex-wrap:wrap;gap:10px;} #wrapper .detail_btn_box.sold_out{margin-top:0;} .detail_btn_box button{width:calc(50% - 5px);box-sizing:border-box;height:70px;display: inline-flex;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-06);font-size:var(--title-20);border:1px solid;} .detail_btn_box button span{font-size:120%;} .detail_btn_box .order_btn_cart{background:var(--point-white);border-color:var(--black-color00);} .detail_btn_box .order_btn_cart span{color:var(--black-color00);font-weight:400;} .detail_btn_box .order_btn_buy{background:var(--point-color01);border-color:var(--point-color01);} .detail_btn_box .order_btn_buy span{color:var(--point-white);font-weight:600;} #wrapper #sit_ov_soldout{width:100%;box-sizing:border-box;display: flex;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-06);background:var(--border-color02);font-size:120%;color:var(--point-white);font-weight:600;padding:20px 0;} /*수량변경*/ #qty_box .opt_count{display: inline-flex;height:40px;} #qty_box .opt_count button{width:40px;height:100%;box-sizing:border-box;border:1px solid var(--black-color10);position: relative;} #qty_box .opt_count button:before, #qty_box .opt_count button:after{content:"";background:var(--black-color03);position: absolute;} #qty_box .opt_count button:before{width:12px;height:1px;top:19px;left:14px;} #qty_box .opt_count button:after{width:1px;height:12px;top:14px;left:19px;} #qty_box .opt_count .sit_qty_minus{border-radius:4px 0 0 4px;} #qty_box .opt_count .sit_qty_minus:after{display: none;} #qty_box .opt_count .sit_qty_plus{border-radius:0 4px 4px 0;} #qty_box .opt_count input{width:50px;height:100%;box-sizing:border-box;border:1px solid var(--black-color10);border-width:1px 0;border-radius:0;background:none;font-size:var(--title-17);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);text-align: center;padding:0;} /*banner*/ .detail_middle_bnr{margin:100px 0 0;position: relative;box-sizing:border-box;border-radius:var(--radius-10);font-size:var(--title-20);display: flex;align-items: center;justify-content: space-between;padding:42px 60px;overflow:clip;} .detail_middle_bnr a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:3;} .detail_middle_bnr .img{width:100%;height:100%;position: absolute;top:0;left:0;z-index:1;} .detail_middle_bnr dl{display: flex;align-items: center;gap:30px;max-width:60%;position: relative;z-index:2;} .detail_middle_bnr dl dt{font-size:190%;color:var(--black-color03);font-weight:600;line-height:1.3;max-width:62%;flex-shrink:0;} .detail_middle_bnr dl dd{font-size:100%;color:var(--black-color03);font-weight:400;line-height:1.3;} .detail_middle_bnr span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;gap:20px;padding:19px 30px;border-radius:50px;background:var(--point-white);font-size:100%;color:var(--black-color03);font-weight:400;line-height:1;z-index:2;} .detail_middle_bnr span:after{width:8px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color03);border-width:2px 2px 0 0;transform:rotate(45deg);} /*탭*/ .detail_tab_box{display: flex;margin-top:100px;} .detail_tab_box a{display: inline-flex;box-sizing:border-box;width:100%;align-items: center;justify-content: center;text-align: center;text-align: center;font-size:var(--title-20);color:var(--black-color03);font-weight:400;height:70px;border:1px solid var(--border-color01);} .detail_tab_box a:first-child{border-radius:10px 0 0 10px;} .detail_tab_box a:last-child{border-radius:0 10px 10px 0;} .detail_tab_box a + a{border-left:none;} .detail_tab_box a.on{background:var(--point-color06);border-color:var(--point-color06);color:var(--point-white);} .detail_tab_content{margin-top:50px;} .detail_tab_content > div{height:0;overflow:hidden;} .detail_tab_content > div.on{height:auto;overflow:initial;} .detail_editor_box{display: flex;flex-direction:column;gap:40px;font-size:var(--title-20);} .detail_editor_box h4{font-size:130%;color:var(--black-color00);font-weight:500;line-height:1.3;display: flex;align-items: center;gap:12px;margin-bottom:20px;} .detail_editor_box h4:before{width:4px;height:22px;content:"";box-sizing:border-box;border-radius:25px;background:var(--point-color01);} .detail_editor_box p{font-size:90%;color:var(--black-color02);font-weight:400;line-height:1.88;} .detail_editor_box .img_box{box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);text-align: center;padding:60px 30px;} .detail_editor_box .img_box img{width:auto;height:auto;} .detail_editor_box .guide_box{box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);text-align: center;padding:40px 40px;text-align:left;display: flex;flex-wrap:wrap;gap:20px;} .detail_editor_box .guide_box > div{width:calc(50% - 10px);} .detail_tab_content .board_view_btn{min-height:50px;margin-top:30px;} .detail_tab_content .board_view_btn .btn{width:130px;height:50px;} /*qa*/ #detail_qa_box{box-sizing:border-box;border-top:1px solid var(--black-color01);} #detail_qa_box .qa_box{box-sizing:border-box;border-bottom:1px solid var(--border-color01);} #detail_qa_box .q_box{display: table;width:100%;table-layout:fixed;cursor:pointer;} #detail_qa_box .q_box > div{display: table-cell;box-sizing:border-box;vertical-align: middle;text-align: center;padding:20px 0;position: relative;} #detail_qa_box .q_box > div:nth-child(1){width:130px;} #detail_qa_box .q_box > div:nth-child(2){width:auto;} #detail_qa_box .q_box > div:nth-child(3){width:130px;} #detail_qa_box .q_box > div:nth-child(4){width:150px;} #detail_qa_box .q_box > div:nth-child(5){width:90px;} #detail_qa_box .q_box > div > span{font-size:var(--title-16);color:var(--black-color05);font-weight: 400;line-height:1.3;} #detail_qa_box .q_box > div > .status{color:var(--point-white);display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:70px;height:28px;border-radius:var(--radius-04);line-height:1;} #detail_qa_box .q_box > div .sit_qaa_done{background:var(--point-color01);} #detail_qa_box .q_box > div .sit_qaa_yet{background:var(--black-color08);} #detail_qa_box .q_box > div > .date{letter-spacing:0.03em;} #detail_qa_box .q_box > div .title{font-size:var(--title-18);color:var(--black-color00);font-weight: 400;line-height:1.3;text-align: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;} #detail_qa_box .q_box .icon:before{width:8px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;transform:rotate(135deg);margin-bottom:2px;display: inline-block;} #detail_qa_box .q_box.on .icon:before{transform:rotate(-45deg);margin-bottom:-2px;} #detail_qa_box .sit_qa_con{box-sizing:border-box;background:var(--gray-bg04);border-radius:var(--radius-10);margin-bottom:20px;padding:30px 30px 30px 130px;display: none;} #detail_qa_box .sit_qa_p{display: flex;flex-direction:column;gap:20px;} #detail_qa_box .sit_qa_p > div{display: flex;gap:14px;align-items: flex-start;} #detail_qa_box .sit_qa_p > div .qa_alp{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:36px;aspect-ratio:auto 1;border-radius:100%;font-size:var(--title-20);font-weight: 600;font-family:var(--font-type02);flex-shrink:0;} #detail_qa_box .sit_qa_p > div .q_mark{background:var(--point-color01);color:var(--point-white);} #detail_qa_box .sit_qa_p > div .a_mark{background:var(--point-white);color:var(--point-color01);} #detail_qa_box .sit_qa_p > div .txt_box{font-size:var(--title-18);color:var(--black-color00);font-weight:400;line-height:1.6;margin-top:6px;} #detail_qa_box .sit_qa_cmd{margin-top:20px;} /*학습컨텐츠*/ .detail_related_doc{display: flex;flex-direction:column;gap:10px;} .detail_related_doc > li{display: flex;align-items: center;justify-content: space-between;box-sizing:border-box;padding:15px 20px 15px 30px;border-radius:var(--radius-10);border:1px solid var(--border-color01);font-size:var(--title-20);} .detail_related_doc > li .title{font-size:100%;color:var(--black-color00);font-weight: 400;line-height:1.3;max-width:calc(100% - 400px);} .detail_related_doc > li .btn_box{display: flex;align-items: center;gap:10px;} .detail_related_doc > li .btn_box a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: space-between;width:170px;height:50px;border-radius:8px;padding:0 20px;font-size:var(--title-17);border:1px solid;transition:all 0.3s;} .detail_related_doc > li .btn_box .btn_preview{color:var(--black-color03);font-weight:500;border-color:var(--black-color03);} .detail_related_doc > li .btn_box .btn_download{color:var(--point-color01);font-weight:600;border-color:var(--point-color01);} .detail_related_doc > li .btn_box a:after{content:"";display: inline-block;aspect-ratio:auto 1;transition:all 0.3s;} .detail_related_doc > li .btn_box .btn_preview:after{width:16px;background:url('../img/sub/icon_btn_preview.svg')no-repeat center;background-size:auto 100%;display: inline-block;} .detail_related_doc > li .btn_box .btn_download:after{width:18px;background:url('../img/sub/icon_btn_down.svg')no-repeat center;background-size:auto 100%;display: inline-block;} .detail_related_doc > li .btn_box a span{font-size:inherit;color:inherit;font-weight:inherit;} #doc_preview_layer .img_box{box-sizing:border-box;padding:30px 30px;background:var(--gray-bg04);border-radius:var(--radius-10);} #doc_preview_layer .img_box img{border-radius:var(--radius-10);} /*related*/ #recommend_prd{font-size:var(--title-20);margin-top:120px;} #recommend_prd h3{font-size:230%;color:var(--black-color00);font-weight: 600;line-height:1.3;} #recommend_prd .goods_list_box{margin-top:30px;} /*상품문의 쓰기*/ .win_pop .new_win_con > ul{display: flex;flex-direction: column;gap:20px;} .win_pop .new_win_con > ul > li{display: flex;flex-wrap:wrap;gap:10px;} .win_pop .new_win_con > ul > li:after{display: none;} .win_pop .new_win_con > ul > li > div{width:calc(50% - 5px);} .win_pop .new_win_con > ul > li.title > div, .win_pop .new_win_con > ul > li > .cke_sc{width:100%;} .win_pop .new_win_con > ul > li input{width:100%;} /* 인풋 */ .win_pop :where([type="text"], [type="password"], [type="email"], select){border:1px solid var(--border-color01);background: var(--point-white);font-size: var(--title-18);font-weight:300;color: var(--black-color03);line-height: normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:50px;padding: 0 23px;letter-spacing: -0.03em; transition: all 0.4s;border-radius:var(--radius-06);box-sizing:border-box;text-indent:0;font-family:var(--font-type01);} .win_pop :where([type="text"], [type="password"], [type="email"], select)::placeholder{color: var(--black-color10);} .win_pop :where([type="text"], [type="password"], [type="email"], select):focus{border-color: var(--black-color00);} .win_pop select{width: 100%;max-width: 180px;padding:0 30px 0 20px;appearance: none;background:var(--point-white) url('../img/sub/sel_arw.svg') no-repeat calc(100% - 17px) / 14px auto;cursor:pointer;} .win_pop input[type="text"]::-webkit-input-placeholder {color:var(--black-color10);} .win_pop input[type="password"]::-webkit-input-placeholder {color:var(--black-color10);} .win_pop input[type="text"]::-moz-placeholder {color:var(--black-color10);} .win_pop input[type="password"]::-moz-placeholder {color:var(--black-color10);} .win_pop input[type="text"]:-ms-input-placeholder {color:var(--black-color10);} .win_pop input[type="password"]:-ms-input-placeholder {color:var(--black-color10);} .win_pop input[type="text"]:-moz-placeholder {color:var(--black-color10);} .win_pop input[type="password"]:-moz-placeholder {color:var(--black-color10);} .win_pop input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset;-webkit-text-fill-color:var(--black-color03);font-size:inherit;} @media (max-width:1023px) { .win_pop :where([type="text"], [type="password"], [type="number"], [type="date"], [type="email"], select){padding-inline: clamp(15px, 2.3vw, 20px);height: clamp(40px, 5vw, 50px);} .win_pop select{max-width: clamp(110px, 18vw, 180px);padding-right: clamp(24px, 5.5px, 30px);background-position: calc(100% - clamp(15px, 2.3vw, 20px)) 50%;background-size: clamp(8px, 1.9vw, 11px);} } @media (max-width:479px) { .win_pop .new_win_con > ul > li > div{width:100%;} } /* over */ @media (hover: hover) and (pointer: fine){ .detail_img .detail_link a:hover{background:var(--point-color01);border-color:var(--point-color01);color:var(--point-white);} .detail_img .detail_link a:hover img{filter:var(--filter-white);} .detail_tab_box a:hover{background:var(--point-color06);border-color:var(--point-color06);color:var(--point-white);} .detail_related_doc > li .btn_box a:hover{color:var(--point-white);} .detail_related_doc > li .btn_box .btn_preview:hover{background:var(--black-color03);} .detail_related_doc > li .btn_box .btn_download:hover{background:var(--point-color01);} .detail_related_doc > li .btn_box a:hover:after{filter:var(--filter-white);} } @media (max-width:1300px) { .detail_middle_bnr{padding:40px 30px;} .detail_middle_bnr dl{gap:15px;} .detail_middle_bnr dl dt{font-size:150%;} .detail_middle_bnr dl dd{font-size:90%;} } @media (max-width:1200px) { .detail_info_top{gap:40px;} .detail_info_top .detail_img{width:50%;} .detail_info_box{width:calc(50% - 40px);} } @media (max-width:1023px) { .detail_info_top{padding-top:0;} .detail_info_top .detail_img .img_box{padding-block:clamp(30px, 7vw, 74px);padding-inline:clamp(50px, 10vw, 92px);} .detail_info_top .detail_img .img_box img{width:100%;height:100%;object-fit:cover;} .detail_img .detail_link a{width:100%;} .detail_info_box .detail_info dl dt{width:80px;} .detail_middle_bnr{margin-top:clamp(60px, 10vw, 100px);} .detail_middle_bnr span{gap:10px;padding:15px 20px;} .detail_tab_box{margin-top:clamp(60px, 10vw, 100px);} .detail_editor_box h4{margin-bottom:10px;} .detail_editor_box .img_box, .detail_editor_box .guide_box{padding:35px 20px;} #detail_qa_box .q_box > div{padding:15px 0;} #detail_qa_box .q_box > div:nth-child(1){width:100px;} #detail_qa_box .q_box > div:nth-child(3){width:110px;} #detail_qa_box .q_box > div:nth-child(4){width:120px;} #detail_qa_box .q_box > div:nth-child(5){width:60px;} #detail_qa_box .sit_qa_con{padding:20px 20px 20px 100px;} #recommend_prd{margin-top:clamp(60px, 13vw, 120px);} } @media (max-width:860px) { .detail_info_top .detail_img{width:100%;} .detail_img .detail_link a{width:calc(50% - 5px);} .detail_info_box{width:100%;} .detail_middle_bnr{flex-direction: column;align-items: flex-start;gap:15px;padding:25px 15px;} .detail_middle_bnr dl{flex-direction:column;gap:10px;align-items: flex-start;max-width:65%;} .detail_middle_bnr dl dt, .detail_middle_bnr dl dd{max-width:100%;} #detail_qa_box .sit_qa_p > div .txt_box{margin-top:9px;} #recommend_prd .goods_list li.row_4{width:calc(50% - 12px);} .detail_related_doc > li{padding:12px 15px;} .detail_related_doc > li .title{font-size:90%;max-width:calc(100% - 290px)} .detail_related_doc > li .btn_box a{width:140px;height:46px;padding:0 12px;} #doc_preview_layer .img_box{padding:20px 20px;} } @media (max-width:640px) { .detail_img .detail_link{margin-top:20px;} .detail_img .detail_link a{height:50px;gap:10px;} .detail_img .detail_link .book_preview img{width:16px;} .detail_img .detail_link .teach_preview img{width:20px;} .detail_info_box .prd_name{font-size:150%;padding-bottom:15px;} .detail_info_box .detail_info{gap:15px;margin-top:20px;margin-bottom:20px;padding-bottom:20px;} .detail_info_box .detail_info dl{gap:15px;} .detail_info_box .detail_info dl dt{width:64px;} #qty_box .opt_count{height:30px;} #qty_box .opt_count button{width:30px;} #qty_box .opt_count button:before{width:10px;top:13px;left:9px;} #qty_box .opt_count button:after{height:10px;top:9px;left:13px;} .detail_btn_box{margin-top:30px;} .detail_btn_box button{height:60px;} #wrapper #sit_ov_soldout{padding:14px 0;} .detail_middle_bnr{background-position:right 33% center !important;} .detail_middle_bnr span{padding:10px 15px;gap:5px;} .detail_middle_bnr span:after{width:6px;margin-top:-2px;} .detail_tab_box a{height:48px;} .detail_tab_box a:first-child{border-radius:5px 0 0 5px;} .detail_tab_box a:last-child{border-radius:0 5px 5px 0;} .detail_tab_content{margin-top:30px;} .detail_editor_box .guide_box > div{width:100%;} #detail_qa_box .q_box > div:nth-child(3), #detail_qa_box .q_box > div:nth-child(4){display: none;} #detail_qa_box .sit_qa_p{gap:10px;} #detail_qa_box .sit_qa_p > div .qa_alp{width:32px;} #detail_qa_box .sit_qa_p > div .txt_box{margin-top:6px;} .detail_related_doc > li{flex-direction:column;align-items: flex-start;gap:10px;padding:15px 15px;} .detail_related_doc > li .title{max-width:100%;} .detail_related_doc > li .btn_box a{width:160px;} #recommend_prd h3{font-size:200%;} #recommend_prd .goods_list_box{margin-top:15px;} #recommend_prd .goods_list li.row_4{width:calc(50% - 7.5px);} } @media (max-width:479px) { .detail_img .detail_link a{width:100%;height:44px;} .detail_btn_box button{height:46px;} .detail_middle_bnr dl{max-width:55%;} .detail_middle_bnr dl dd{display: none;} .detail_tab_box a{padding:0 10px;font-size:var(--title-18);} .detail_editor_box{gap:30px;} .detail_editor_box h4{font-size:120%;gap:6px;margin-bottom:5px;} .detail_editor_box h4:before{width:3px;height:14px;} .detail_editor_box p{line-height:1.4;} .detail_editor_box .img_box, .detail_editor_box .guide_box{padding:20px 15px;} #detail_qa_box .sit_qa_con{padding:20px 15px;} .detail_related_doc > li .btn_box{width:100%;} .detail_related_doc > li .btn_box a{width:calc(50% - 5px);height:40px;} .detail_related_doc > li .btn_box .btn_preview:after{width:12px;} .detail_related_doc > li .btn_box .btn_download:after{width:14px;} #recommend_prd h3{font-size:170%;} } /*─────────────────────────────────────────────────────────── 티칭룸 ───────────────────────────────────────────────────────────*/ .common_doc{margin-top:30px;box-sizing:border-box;border-bottom:1px solid var(--border-color01);} .common_doc dt{box-sizing:border-box;border-radius:var(--radius-10);padding:10px 10px;display: flex;align-items: center;justify-content: space-between;background:var(--point-color07);flex-wrap:wrap;gap:10px 10px;} .common_doc dt .btn_box{display: flex;gap:10px;} .common_doc a{display: inline-flex;align-items: center;justify-content: space-between;width:auto;height:60px;box-sizing:border-box;border-radius:8px;background:var(--point-white);border:1px solid var(--black-color00);font-size:var(--title-20);color:var(--black-color00);font-weight:500;padding:0 20px;gap:20px;} .common_doc a span{font-size:inherit;color:inherit;font-weight:inherit;} .common_doc a:after{width:18px;aspect-ratio:auto 1;content:"";background:url('/teacher/theme/gnuwiz_shop_01/img/sub/ico_download.svg')no-repeat center;background-size:100% auto;} .common_doc .down_all{background:var(--point-color01);color:var(--point-white);border-color:var(--poiint-color01);} .common_doc .down_all:after{filter:var(--filter-white);} .common_doc dd{box-sizing:border-box;padding:20px 10px;} .common_doc dd ul{display: flex;flex-direction: column;gap:20px;} .common_doc dd ul li{box-sizing:border-box;padding:10px 0;} #wrapper .common_doc dd ul li label:has([type="checkbox"]){font-size:100%;color:var(--black-color03);font-weight:400;} .data_wrap{margin-top:100px;display: grid; grid-template-columns: minmax(0, 1fr); gap: 100px;font-size:var(--title-20);} .spc_data_box{box-sizing:border-box;border-top:1px solid var(--border-color01);padding-top:100px;} .data_wrap .data_title{display: flex;box-sizing:border-box;align-items: center;justify-content: space-between;margin-bottom: 30px;position: relative;flex-wrap:wrap;gap:10px 20px;} .data_wrap .lesson_hd{align-items: flex-start;margin-bottom:40px;} .data_wrap .lesson_hd:before{width:100%;height:2px;content:"";background:var(--point-color01);position: absolute;bottom:-2px;left:0;z-index:2;} .data_wrap .data_title h4{font-size:150%;color:var(--black-color00);font-weight:500;line-height:1.3;display: flex;align-items: center;gap:12px;} .data_wrap .data_title h4:before{width:4px;height:22px;content:"";background:var(--point-color01);display: inline-block;flex-shrink:0;} .data_wrap .data_title .lesson_tab ul{display: flex;box-sizing:border-box;padding-left:1px;position: relative;} .data_wrap .data_title .lesson_tab a{display: inline-flex;width:60px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:8px 8px 0 0;border:1px solid var(--border-color01);border-bottom:none;align-items: center;justify-content: center;text-align: center;font-size:110%;color:var(--black-color03);font-weight:400;font-family:var(--font-type02);position: relative;} .data_wrap .data_title .lesson_tab li + li{margin-left:-1px;} .data_wrap .data_title .lesson_tab a:before{width:100%;height:calc(100% + 2px);content:"";box-sizing:border-box;border-radius:8px 8px 0 0;border:2px solid var(--point-color01);border-bottom:2px solid var(--point-white);position: absolute;top:0;left:-1px;opacity:0;pointer-events:none;z-index: 3;} .data_wrap .data_title .lesson_tab a.on{border:none;color:var(--point-color01);font-weight:600;} .data_wrap .data_title .lesson_tab a.on:before{opacity:1} .data_wrap .lesson_cont{height:0;overflow:hidden;pointer-events:none;} .data_wrap .lesson_cont.on{height:auto;overflow:initial;pointer-events:initial;} .data_wrap .lesson_title{display: flex;align-items: center;justify-content: space-between;margin-bottom:30px;gap:30px;} .data_wrap .lesson_title h5{display: flex;flex-wrap:wrap;align-items: center;gap:10px;font-size:var(--title-20);} .data_wrap .lesson_title h5 span{font-size:110%;color:var(--black-color03);font-weight:400;} .data_wrap .lesson_title h5 em{font-size:150%;color:var(--point-color01);font-weight:600;} .data_wrap .lesson_title .btn_wrap{justify-content: flex-end;} .data_wrap .btn_down{display: inline-flex;align-items: center;justify-content: space-between;width:180px;height:60px;box-sizing:border-box;border:1px solid var(--black-color00);border-radius:8px;background:var(--point-white);font-size:var(--title-20);color:var(--black-color03);font-weight:500;padding:0 20px;flex-shrink:0;} .data_wrap .btn_down span{font-size:inherit;color:inherit;font-weight:inherit;} .data_wrap .btn_down:after{width:18px;aspect-ratio:auto 1;content:"";background:url('/teacher/theme/gnuwiz_shop_01/img/sub/ico_download.svg')no-repeat center;background-size:100% auto;} #wrapper .data_wrap .down_all{background:var(--point-color01);color:var(--point-white);border-color:var(--point-color01);} #wrapper .data_wrap .down_all:after{filter:var(--filter-white);} .data_wrap .lesson_box{box-sizing:border-box;border:1px solid var(--border-color03);border-radius:var(--radius-10);overflow:clip;} .data_wrap .lesson_box + .lesson_box{margin-top:30px;} .data_wrap .lesson_box dt{background:var(--point-color07);box-sizing:border-box;padding:27px 20px 26px;display: flex;align-items: center;justify-content: space-between;} #wrapper .data_wrap .lesson_box dt label:has([type="checkbox"]){font-size:120%;} .data_wrap .lesson_box dt .all_down{display: inline-flex;align-items: center;justify-content: space-between;width:auto;height:60px;box-sizing:border-box;border-radius:8px;background:var(--point-color01);font-size:var(--title-20);color:var(--point-white);font-weight:600;padding:0 20px;gap:20px;} .data_wrap .lesson_box dt .all_down span{font-size:inherit;color:inherit;font-weight:inherit;} .data_wrap .lesson_box dt .all_down:after{width:18px;aspect-ratio:auto 1;content:"";background:url('/teacher/theme/gnuwiz_shop_01/img/sub/ico_download.svg')no-repeat center;filter:var(--filter-white);background-size:100% auto;} .data_wrap .lesson_box dd{box-sizing:border-box;padding:20px 20px;} .data_wrap .lesson_box dd ul{display: flex;flex-wrap:wrap;gap:20px;} .data_wrap .lesson_box dd ul li{width:calc(50% - 10px);box-sizing:border-box;padding:14px 14px 14px 20px;display: flex;align-items: center;justify-content: space-between;border:1px solid var(--border-color02);border-radius:var(--radius-10);} #wrapper .data_wrap .lesson_box dd ul li label:has([type="checkbox"]){font-size:100%;color:var(--black-color03);font-weight:400;} .data_wrap .lesson_box .btn_box{display: flex;gap:10px;flex-shrink:0;} .data_wrap .lesson_box .btn_box a{width:42px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:8px;font-size:0;border:1px solid;display: inline-flex;align-items: center;justify-content: center;} .data_wrap .lesson_box .btn_box .btn_preview{border-color:var(--black-color05);} .data_wrap .lesson_box .btn_box .btn_download{border-color:var(--point-color01);} .data_wrap .lesson_box .btn_box .btn_download img{filter: brightness(0) saturate(100%) invert(46%) sepia(42%) saturate(3660%) hue-rotate(4deg) brightness(108%) contrast(101%);} @media (max-width:1023px) { .data_wrap{margin-top:clamp(60px, 10vw, 100px);gap:clamp(60px, 10vw, 100px);} .spc_data_box{padding-top:clamp(60px, 10vw, 100px);} .data_wrap .data_title{margin-bottom:clamp(15px, 3vw, 30px);} .data_wrap .lesson_title{flex-wrap:wrap;gap:10px 20px;} .data_wrap .lesson_hd{margin-bottom:clamp(20px, 4vw, 40px);} .data_wrap .lesson_box dt{padding-block:clamp(10px, 2.7vw, 27px);padding-inline:clamp(15px, 2vw, 20px);} .data_wrap .btn_down{height:clamp(40px, 6vw, 60px);width:auto;padding-inline:clamp(10px, 2vw, 20px);gap:10px;} .data_wrap .btn_down:after{width:clamp(13px, 1.8vw, 18px);} .common_doc a, .data_wrap .lesson_box dt .all_down{padding-inline:clamp(10px, 2vw, 20px);gap:clamp(10px, 2vw, 20px);height:clamp(42px, 6vw, 60px)} .common_doc a:after, .data_wrap .lesson_box dt .all_down:after{width:clamp(16px, 1.8vw, 18px);} } @media (max-width:860px) { .data_wrap .lesson_hd{flex-direction: column;gap:15px;} .data_wrap .lesson_box dd ul li{width:100%;} } @media (max-width:640px) { .common_doc dd{padding:15px 15px;} .common_doc dd ul li{padding:5px 0;} .data_wrap .lesson_hd:before{bottom:0;} .data_wrap .data_title h4{gap:8px;} .data_wrap .data_title h4:before{width:3px;height:16px;} .data_wrap .data_title .lesson_tab{width:100%;overflow-x:auto;white-space:nowrap;position: relative;} .data_wrap .data_title .lesson_tab::-webkit-scrollbar{display: none;} .data_wrap .data_title .lesson_tab a:before{height:100%;} .data_wrap .data_title .lesson_tab ul li a{width:50px;} .data_wrap .lesson_box dd{padding:12px 12px;} .data_wrap .lesson_box dd ul{gap:12px;} .data_wrap .lesson_box dd ul li{padding:12px 12px;} .data_wrap .lesson_box .btn_box a{width:34px;} .data_wrap .lesson_box .btn_box a img{max-width:50%;} } @media (max-width:479px) { .common_doc{margin-top:20px;} .common_doc dd ul{gap:10px;} } /*─────────────────────────────────────────────────────────── 회원가입 ───────────────────────────────────────────────────────────*/ .register_type{display: flex;flex-wrap:wrap;gap:40px;font-size:var(--title-20);} .register_type dl{width:calc(50% - 20px);box-sizing:border-box;border-radius:var(--radius-10);padding:20px 20px;border:1px solid var(--border-color01);text-align: center;} .register_type dl dt{display: flex;align-items: center;justify-content: center;box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-color04);font-size:120%;color:var(--black-color00);font-weight:600;height:60px;} .register_type dl dd{height:calc(100% - 60px);display: flex;flex-direction:column;justify-content: space-between;} .register_type dl dd .txt_box{margin-top:20px;display: flex;flex-direction: column;gap:20px;} .register_type dl:nth-child(2) dd img{max-width:112px;} .register_type dl dd p{font-size:100%;color:var(--black-color03);font-weight:400;line-height:1.5;} .register_type dl dd p strong{font-size:inherit;color:var(--point-color01);font-weight:600;} .register_type dl dd a{display: flex;align-items: center;justify-content: center;text-align: center;box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-color01);font-size:100%;color:var(--point-white);font-weight:400;line-height:1.5;padding:15px 0;margin-top:15px;} .register_type dl.teacher_member dt{background:#ffedde;} .register_type dl.teacher_member dd p strong{color:var(--point-orange)} .register_type dl.teacher_member dd a{background:var(--point-orange);} @media (max-width:1200px) { .register_type dl dd p br{display: none;} } @media (max-width:1023px) { .register_type{gap:20px;} .register_type dl{width: calc(50% - 10px);} } @media (max-width:640px) { .register_type dl{width:100%;padding:15px 15px;} .register_type dl dt{height:50px;} .register_type dl dd a{padding:10px 0;} } body #fregister p{background:var(--point-color01);} body #fregister p:before{display: none;} /*정보입력*/ #register_form{display: flex;flex-direction: column;gap:60px;} .register_form_inner > ul{display: flex;flex-wrap:wrap;gap:30px 20px;} .register_form_inner > ul > li{width:calc(50% - 10px);} .register_form_inner > ul > li.w_100{width:100%;} #register_form .register_form_inner label{display: flex;align-items: center;gap:10px;line-height:1.7;} #register_form .register_form_inner label:before{margin:0;} #register_form .register_form_inner #reg_mb_open + label span{display: none;} .register_form_inner .addr_box{display: flex;flex-direction:column;gap:20px;} .register_form_inner .addr_box #reg_mb_zip{width:calc(50% - 160px);} .register_form_inner .flex_box{display: flex;align-items: center;gap:10px;flex-wrap:wrap;} .register_form_inner .flex_box input{width:calc(50% - 5px);} #fregisterform .addr_box .frm_address{margin-top:0;} .btn_zipcode{height: 50px;padding: 0 23px;box-sizing:border-box;display: inline-flex;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-06);font-size: var(--title-18);font-weight: 500;color: var(--point-white);background:var(--point-color01);font-family:var(--font-type01);} .teacher_certifice_box{display: flex;flex-direction:column;gap:20px;} .teacher_certifice_box .mail_certificate{display: none;flex-direction:column;gap:20px;} .teacher_certifice_box .mail_certificate.on{display:flex;} .teacher_certifice_box .radio_list{display: flex;align-items: center;gap:20px;padding:0;} .teacher_certifice_box .mail_box .email_txt{width:200px;} .teacher_certifice_box .btn_send_code, .teacher_certifice_box .btn_code{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:120px;height:50px;border-radius:var(--radius-06);font-size:var(--title-16);color:var(--black-color03);border:1px solid;} .teacher_certifice_box .btn_send_code{background:var(--point-color01);border-color:var(--point-color01);color:var(--point-white);} .teacher_certifice_box .btn_code{border-color:var(--black-color03);} .teacher_certifice_box .code_box{display: flex;gap:10px;} .register_form_inner li.phone_certificate{display: flex;flex-wrap:wrap;gap:10px;} .register_form_inner li.phone_certificate button{height: 50px;width:300px;box-sizing: border-box;display: inline-flex;align-items: center;justify-content: center;text-align: center;border-radius: var(--radius-06);font-size: var(--title-18);font-weight: 500;color: var(--point-white);background: var(--point-color01);font-family: var(--font-type01);} .register_form_inner li.phone_certificate input{width:calc(100% - 310px);} #wrapper #captcha #captcha_mp3, #wrapper #captcha #captcha_reload{width:40px;height:40px;} #wrapper #captcha #captcha_reload{background-position:0 -40px;} #wrapper #captcha #captcha_key{width:150px;height:50px;} #wrapper .register .btn_confirm a, #wrapper .register .btn_confirm button{height:60px !important;font-size:var(--title-20);display: flex;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-10)} /*수신설정*/ #wrapper .register_form_inner > ul.promotion_agree li{width:100%;} #fregisterform .consent-line{align-items: center;gap:10px;flex-wrap:wrap;} #wrapper .register_form_inner > ul.promotion_agree label{margin-bottom:0;} #wrapper .register_form_inner > ul.promotion_agree .is-inline{display: flex;align-items: center;gap:10px;} #wrapper .register_form_inner > ul.promotion_agree .sub-consents{margin-top:15px;display: flex;flex-direction: column;gap:10px;} @media (max-width:1023px) { #register_form{gap:clamp(40px, 6vw, 60px);} .btn_zipcode, .teacher_certifice_box .btn_send_code, .teacher_certifice_box .btn_code{height:clamp(40px, 5vw, 50px);} #wrapper #captcha #captcha_key{height:clamp(40px, 5vw, 50px);} #wrapper .register .btn_confirm a, #wrapper .register .btn_confirm button{height:clamp(46px, 6vw, 60px) !important;} .register_form_inner li.phone_certificate button{height:clamp(40px, 5vw, 50px);} } @media (max-width:860px) { .register_form_inner > ul{gap:20px;} .register_form_inner > ul > li{width:100%;} .register_form_inner .flex_box input{width:100%;} .register_form_inner .addr_box{gap:10px;} .register_form_inner .addr_box #reg_mb_zip{width:calc(100% - 143px);} .teacher_certifice_box .mail_certificate{gap:10px;} .register_form_inner li.phone_certificate button{width:200px;} .register_form_inner li.phone_certificate input{width:calc(100% - 210px);} } @media (max-width:640px) { #wrapper .teacher_certifice_box .mail_box .email_txt, #wrapper .teacher_certifice_box .mail_box select{width:calc(50% - 17px);} #wrapper .teacher_certifice_box .mail_box select{max-width:initial;} .teacher_certifice_box .btn_send_code{width:100%;} .teacher_certifice_box .code_box input{width:calc(100% - 110px);} .teacher_certifice_box .btn_code{width:100px;} #fregisterform .promotion_agree .js-open-consent{width:100%;margin:0 0 0 32px;text-align:left;} } @media (max-width:479px) { #wrapper #captcha #captcha_key{width:calc(100% - 87px);} .btn_zipcode{width:98px;} .register_form_inner .addr_box #reg_mb_zip{width:calc(100% - 108px);} .teacher_certifice_box{gap:10px;} .register_form_inner li.phone_certificate button{width:100%;} .register_form_inner li.phone_certificate input{width:100%;} } /*가입완료*/ #wrapper #reg_result{box-sizing:border-box;border-radius:var(--radius-10);font-size:var(--title-20);background:var(--point-white);border:1px solid var(--point-color01);} #wrapper #reg_result .reg_result_p{font-size:var(--title-20);color:var(--point-color01);} #wrapper #reg_result .reg_result_p strong{font-size:150%;color:inherit;font-weight:500;} #wrapper #reg_result .reg_result_p strong em{font-weight: 600;} #wrapper #reg_result .result_txt_box{display: flex;flex-direction: column;gap:20px;text-align: center;margin-top:40px;} #wrapper #reg_result .result_txt_box .result_txt{text-align: center;font-size:90%;color:var(--black-color03);font-weight:400;line-height:1.7;} @media (max-width:1023px) { #wrapper #reg_result{padding-block:clamp(20px, 4vw, 40px);padding-inline:clamp(15px, 3vw, 30px);} #wrapper #reg_result .result_txt_box {margin-top:clamp(25px, 4vw, 40px);gap:clamp(10px, 2vw, 20px);} } /*─────────────────────────────────────────────────────────── 로그인 ───────────────────────────────────────────────────────────*/ #wrapper .mbskin{width:100%;margin:60px auto;} #wrapper .login_wrap{border:none;max-width:600px;margin:0 auto;} #wrapper .login_tab{display: flex;box-sizing:border-box;border-radius:var(--radius-10);overflow:clip;border:1px solid var(--border-color01);} #wrapper .login_tab a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:50%;font-size:var(--title-20);color:var(--black-color03);font-weight:400;padding:16px 0;} #wrapper .login_tab a.on{background:var(--point-color01);color:var(--point-white);font-weight: 500;} .order_inq .mem_login{display: none;} .login_box{box-sizing:border-box;padding:40px 30px;border-radius:var(--radius-10);border:1px solid var(--border-color01);margin-top:40px;} .login_box .login_flex{display: flex;flex-direction: column;gap:20px;} .login_box .login_flex input{text-align:left;} .login_box .btn_submit{background:var(--point-color01);border-color:var(--point-color01);font-size:var(--title-20);} #wrapper .mbskin .btn_submit{margin-top:0;} #wrapper #login_info{display: flex;align-items: center;justify-content: space-between;margin-top:20px;} #wrapper #login_info:after{display: none;} #login_info .login_menu{display: flex;align-items: center;gap:20px;} #login_info .login_menu a{font-size:var(--title-16);color:var(--black-color05);font-weight:400;} #wrapper #mb_login_notmb{max-width:600px;box-sizing:border-box;padding:40px 30px;border-radius:var(--radius-10);border:1px solid var(--border-color01);font-size:var(--title-20);} #wrapper #mb_login_notmb h2{margin:0;font-size:140%;color:var(--black-color00);font-weight:600;} #wrapper #mb_login_notmb p{font-size:90%;color:var(--black-color05);font-weight: 400;margin-top:10px;} #wrapper #mb_login_notmb .btn_confirm{margin-top:30px;} #wrapper #mb_login_notmb .btn_confirm .btn_submit{background:var(--black-color00);border-color:var(--black-color00);color:var(--point-white);font-weight: 500;font-size:var(--title-20);} @media (max-width:1023px) { #wrapper .mbskin{margin-block:clamp(30px, 6vw, 60px);} #wrapper .login_tab a{padding-block:clamp(10px, 2vw, 20px);} .login_box{padding-block:clamp(20px, 4vw, 40px);padding-inline:clamp(15px, 3vw, 30px);} #login_info .login_menu{gap:10px;} #wrapper #mb_login_notmb{padding-block:clamp(20px, 4vw, 40px);padding-inline:clamp(15px, 3vw, 30px);} } @media (max-width:640px) { .login_box .login_flex{gap:10px;} } @media (max-width:479px) { .login_box{margin-top:30px;} #wrapper #login_info{flex-direction: column;align-items: flex-start;gap:10px;margin-top:10px;} } /*회원정보 찾기*/ #find_info{display: flex;gap:20px;} #wrapper #find_info .new_win_con{width:100%;background:none;box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);text-align: center;font-size:var(--title-20);padding:30px 20px;} #wrapper #find_info.cert .new_win_con{float:none;margin:0;} #wrapper #find_info .new_win_con h3{font-size:150%;color:var(--black-color00);font-weight:600;display: block;} #wrapper #find_info input{text-align:left;} #wrapper #find_info #mb_email{max-width:600px} #wrapper #find_info p{font-size:var(--title-18);color:var(--black-color03);font-weight: 400;} #wrapper .new_win .btn_submit{width:auto;} #wrapper .find_btn .cert_btn{display: flex;flex-direction: column;gap:20px;align-items: center;} #wrapper .find_btn .cert_btn button{width:50%} @media (max-width:1023px) { #find_info{flex-direction:column;} #wrapper #find_info .new_win_con{padding-block:clamp(20px, 3vw, 30px);padding-inline:clamp(15px, 2vw, 20px);} } @media (max-width:479px) { #wrapper .find_btn .cert_btn button{width:100%;} } /*─────────────────────────────────────────────────────────── 마이페이지 ───────────────────────────────────────────────────────────*/ #gw-my .gw-my-container{display: flex;flex-direction: column;gap:80px} #wrapper .my_summary{display: inline-flex;} #wrapper #gw-my .gw-my-order-container{border-radius:var(--radius-20);} #wrapper .gw-my-container > div{width:100%;} .my_board{display: flex;gap:20px;} #gw-my .teacher_mypage .gw-my-info{width:100%;border:none;} @media (max-width:1440px) { .my_content_wrap{flex-direction: column-reverse;} #shop-content-right{order:2;margin:0;border:none;} #shop-content-left{order:1;} #wrapper #gw-my .gw-my-info .gw-text-container{width:100%;padding:0;} #wrapper #shop-content-left{border-right:none;margin-top:60px;} #wrapper #shop-content-left .gw-my-nav .gw-my-nav-title{padding-left:0;} #wrapper #shop-content-left .gw-my-nav{display: flex;flex-direction: column;gap:30px;} #wrapper #shop-content-left .gw-my-nav > li{border:none;padding:0;} #wrapper #shop-content-left .gw-my-nav .gw-my-dep02 > li > a{padding:10px 15px;border-bottom:1px solid var(--border-color01);} #wrapper .my_summary{width:100%;justify-content: center;} #wrapper .gw-my-container > div{border:none;padding:30px 0;} #wrapper .gw-my-container > .gw-my-sec01{padding:30px 20px;} #gw-my .gw-order-state{flex-wrap:wrap;gap:100px;justify-content: center;} #gw-my .gw-order-state > li{width:calc(20% - 80px);} #gw-my .gw-order-state > li > a{width:100%;height:auto;aspect-ratio:auto 1;} #gw-my .gw-order-state > li:not(:last-child) > a:after{right:-80px;} } @media (max-width:1024px) { #gw-my .gw-my-container{gap:clamp(20px, 6vw, 60px);} #wrapper .gw-my-container > div{padding-block:clamp(20px, 3vw, 30px);} #gw-my .gw-order-state{gap:clamp(20px, 8vw, 80px);} #gw-my .gw-order-state > li{width:calc(20% - (clamp(20px, 8vw, 80px) * 4 / 5));} #wrapper #gw-my .gw-order-state > li:not(:last-child) > a:after{right:calc(clamp(20px, 8vw, 80px) * -1);transform:translate(-50%, -50%);} #wrapper #gw-my .gw-order-state > li > a{width:100%;} } @media (max-width:860px) { .my_board{flex-direction:column;} } @media (max-width:640px) { #wrapper #gw-my .gw-order-state > li:not(:last-child) > a:after{font-size:20px;} } @media (max-width:479px) { #gw-my .gw-my-order-container{padding:20px 15px;} #wrapper #shop-content-left{margin-top:40px;} #wrapper #gw-my .gw-order-state > li:not(:last-child) > a:after{font-size:15px;} } /*주문내역*/ #wrapper #sod_v .gw-datepicker input[type="text"]{width:100%;} #wrapper #sod_v .gw-od-info{gap:10px;} #wrapper #sod_v .gw-od-info .gw-od-img{margin:0;flex-shrink:0;} #wrapper #sod_v .gw-od-info .gw-od-text{white-space:normal;} @media (max-width:1024px) { #sod_v .gw-orderquiry colgroup, .gw-orderquiry_view colgroup{display: none;} } /*나의 1:1문의*/ /*list*/ #wrapper #bo_cate_ul{flex-wrap:wrap;} #wrapper .td_cate_link span{display: inline-block;box-sizing:border-box;font-size:80%;padding:6px 12px;border:1px solid var(--point-color01);border-radius:var(--radius-06);color:var(--point-color01);} #wrapper .td_stat span{display: inline-block;box-sizing:border-box;padding:6px 12px;border-radius:var(--radius-06);color:var(--point-white);} #wrapper .td_stat span.reply{background:var(--point-color01);} #wrapper .td_stat span.wait{background:var(--black-color08);} @media (max-width:860px) { #wrapper .td_cate_link, #wrapper .td_subject{width:100%;} .qa_list_wrap .bbs_table tr{align-items: center;} } /*view*/ .bbs_view .bbs_view_tit .bo_v_cate{margin-bottom:10px;} /*write*/ #wrapper .bbs_my_qa .bbs_write label{font-size:inherit;} #wrapper .bbs_my_qa .qa_content_wrap dd, #wrapper .bbs_my_qa .bo_w_flie dd{width:100%;} #wrapper .bbs_my_qa select{max-width:100%;} #wrapper .bbs_my_qa .gw-file-input-container{display: flex;gap:10px;} #wrapper .bbs_my_qa .file-name{width:calc(100% - 160px);border: 1px solid var(--border-color01);background: var(--point-white);font-size: var(--title-18);font-weight: 300;color: var(--black-color03);line-height: normal;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: 50px;padding: 0 23px;letter-spacing: -0.03em;transition: all 0.4s;border-radius: var(--radius-06);box-sizing: border-box;text-indent: 0;font-family: var(--font-type01);display: flex;align-items: center;} #wrapper .bbs_my_qa .gw-file-input-button{display: inline-flex;box-sizing:border-box;position: static;width:150px;height:50px;align-items: center;justify-content: center;text-align: center;line-height:initial;border-radius:var(--radius-06);} @media (max-width:1023px) { #wrapper .bbs_my_qa .file-name{width:calc(100% - clamp(100px, 15vw, 150px) - 10px);height:clamp(40px, 5vw, 50px);} #wrapper .bbs_my_qa .gw-file-input-button{width:clamp(100px, 15vw, 150px);height:clamp(40px, 5vw, 50px);} } /*상품후기, 문의*/ #wrapper .gw-search-container{border-radius:var(--radius-20);background:var(--gray-bg01);} #wrapper .gw-search-container [class^='gw-shop-btn'][class*="submit"]{height:50px;border-radius:var(--radius-06);line-height:50px;} #wrapper .sch_input{width:100%;} #wrapper .sel-wrap:after{display: none;} @media (max-width:1023px) { #wrapper .gw-search-container [class^='gw-shop-btn'][class*="submit"]{height:clamp(40px, 5vw, 50px);line-height:clamp(40px, 5vw, 50px);} } @media (max-width:860px) { #wrapper .gw-search-container .gw-flex-btw{flex-wrap:wrap;} #wrapper .gw-search-container .gw-flex-btw .sel-wrap{width:200px !important;} #wrapper .gw-search-container .gw-flex-btw .sel-wrap select{max-width:100%;} #wrapper .gw-search-container .gw-sch-wr{width:calc(100% - 110px) !important;} } @media (max-width:576px) { #wrapper .gw-search-container .gw-flex-btw .sel-wrap{width:100% !important;} #wrapper .gw-search-container .gw-sch-wr{width:100% !important;} } /*회원정보 수정*/ #wrapper #mb_confirm h1{margin-top:0;} #wrapper #mb_confirm p{border-bottom: 1px solid var(--border-color01);} .mem_confirm_box{display: flex;flex-direction: column;gap:20px;} .mem_confirm_box dl{text-align: center;font-size:var(--title-20);} .mem_confirm_box dl dt{font-size:100%;color:var(--black-color03);font-weight:500;} .mem_confirm_box dl dd{font-size:100%;color:var(--point-color01);font-weight:600;} @media (max-width:1023px) { #wrapper #mb_confirm h1{margin-bottom:clamp(10px, 3vw, 30px);} #wrapper #mb_confirm p{padding-bottom:clamp(20px, 4vw, 40px);} #wrapper #mb_confirm fieldset{padding:clamp(30px, 5vw, 50px) clamp(15px, 5vw, 50px);} .mem_confirm_box{gap:clamp(10px, 2vw, 20px);} } /*배송지관리*/ #wrapper #gw-sod-addr .gw-td-sbj input{width:100%;} #wrapper #gw-sod-addr .gw-sod-addr-list .gw-td-mng .mng_btn{background:var(--point-white);} #wrapper #gw-sod-addr input[type="radio"]:checked+.default_lb{background:var(--point-color01);} @media (max-width:1024px) { #wrapper #gw-sod-addr .gw-table01 tr{box-sizing:border-box;border-radius:var(--radius-20);border-color:var(--border-color01);} #wrapper #gw-sod-addr .gw-sod-addr-list td{display: flex;flex-direction: column;gap:5px;padding:15px 20px;background:none;text-align:left;} #wrapper #gw-sod-addr .gw-sod-addr-list td:nth-child(1):before, #wrapper #gw-sod-addr .gw-sod-addr-list td.gw-td-mng:before{display: none;} #wrapper #gw-sod-addr .gw-sod-addr-list td input{text-align: left;} #wrapper #gw-sod-addr .gw-table01 tbody td:before{font-size:var(--title-16);color:var(--black-color03);} #wrapper #gw-sod-addr .gw-sod-addr-list td > span{text-align:left;background:var(--point-white);border: 1px solid var(--border-color01);background: var(--point-white);font-size: var(--title-18);font-weight: 300;color: var(--black-color03);line-height: normal;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height:clamp(40px, 5vw, 50px);padding-inline:clamp(15px, 2.3vw, 20px);letter-spacing: -0.03em;transition: all 0.4s;border-radius: var(--radius-06);box-sizing: border-box;text-indent: 0;font-family: var(--font-type01);} #wrapper #gw-sod-addr .gw-sod-addr-list .gw-td-mng > div{gap:10px;} #wrapper #gw-sod-addr .gw-sod-addr-list .gw-td-mng label, #wrapper #gw-sod-addr .gw-sod-addr-list .gw-td-mng a{width:calc(50% - 5px);max-width:initial;} } @media (max-width:860px) { #wrapper #gw-sod-addr .gw-table01 tr{padding:0;gap:0;} #wrapper #gw-sod-addr .gw-sod-addr-list td{padding:10px 15px;} } /*─────────────────────────────────────────────────────────── 주문서 ───────────────────────────────────────────────────────────*/ /*장바구니*/ .od_prd_list #gw-recommend .gw-recommend-list{margin-top:0;} #wrapper #gw-bsk-list .gw-bsklist th{border-top: 1px solid var(--black-color00);} #wrapper #gw_bsk_tot{padding:45px 50px;} #wrapper #gw_bsk_tot > ul{max-width:100%;width:100%;} @media (max-width:1023px) { #wrapper #gw_bsk_tot{padding:30px 30px;} } @media (max-width:860px) { #gw_bsk_tot > ul{gap:20px;justify-content: center;} #gw_bsk_tot > ul > li{flex:initial;} } @media (max-width:864px) { #gw_bsk_tot > ul{flex-direction:column;gap:12px;} } /*주문서 작성*/ #wrapper .order_prd_table thead tr th{height:70px;box-sizing:border-box;border-top:none;border-bottom: 1px solid var(--border-color01);background:var(--gray-bg03);text-align: center;font-size:var(--title-15);color:var(--black-color00);font-weight:700;padding:15px 0;border-top:1px solid var(--black-color00);} #wrapper .order_prd_table td{box-sizing:border-box;border:none;border-bottom: 1px solid var(--border-color01);} #wrapper .order_prd_table .td_prd{padding:20px 20px;} #wrapper .order_prd_table .prd_box{display: flex;gap:20px;align-items: center;} #wrapper .order_prd_table .prd_box .sod_img{width:120px;flex-shrink:0;} #wrapper .order_prd_table .prd_box .sod_name{min-height:initial;font-size:var(--title-20);text-align:left;} #wrapper .order_prd_table .prd_box .sod_name b{font-size:90%;color:var(--black-color03);font-weight:500;} #wrapper .order_prd_table .prd_box .sod_opt{margin-top:10px;} #wrapper .order_prd_table .prd_box .sod_opt ul{display: flex;flex-direction: column;gap:5px;} #wrapper .order_prd_table .prd_box .sod_opt ul li{font-size:80%;color:var(--black-color06);font-weight:400;} #wrapper .order_prd_table .prd_box .sod_opt ul li:before{font-size:100%;color:inherit;font-weight: inherit;} .order_info_box{display: flex;flex-direction: column;gap:100px;margin-top:100px;font-size:var(--title-20);} .order_info_box h2{font-size:180%;color:var(--black-color00);font-weight:600;box-sizing:border-box;border-bottom:1px solid var(--border-color01);padding-bottom:10px;} .order_info_table table{display: block;box-sizing:border-box;padding:40px 0;} .order_info_table table tbody{display: flex;flex-wrap:wrap;gap:20px 60px;align-items: flex-start;} .order_info_table table tbody tr{width:calc(50% - 30px);box-sizing:border-box;display: flex;font-size:var(--title-20);gap:10px;align-items: center;} .order_info_table table tbody tr th, .order_info_table table tbody tr td{display: block;} .order_info_table table tbody tr th{font-size:100%;color:var(--black-color00);font-weight:500;width:100px;flex-shrink:0;text-align:left;} .order_info_table table tbody tr td{width:calc(100% - 110px);} .order_info_table table tbody tr td input{width:100%;} .order_info_table table tbody tr.choice_place_box, .order_info_table table tbody tr.addr, .order_info_table table tbody tr.memo{width:100%;} .order_info_table table tbody tr.addr td{width:100%;display: flex;flex-direction: column;gap:20px;} .order_info_table table tbody tr.addr .zipcode_txt{width:calc(50% - 239px);} .order_info_table .flex_box{display: flex;flex-wrap:wrap;gap:10px;} .order_info_table .flex_box input{width:calc(50% - 5px);} .order_info_table textarea{box-sizing:border-box;border: 1px solid var(--border-color01);background: var(--point-white);font-size: var(--title-18);font-weight: 300;color: var(--black-color03);line-height: normal;padding:20px 23px;letter-spacing: -0.03em;transition: all 0.4s;border-radius: var(--radius-06);text-indent: 0;font-family: var(--font-type01);height:150px;} .order_info_table .order_choice_place{display: flex;flex-wrap:wrap;gap:10px 20px;align-items: center;} .order_info_table .radio_list{display: flex;flex-wrap:wrap;gap:10px 20px;} .order_info_table .order_choice_place .btn_frmline{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;background:var(--black-color08);font-size:var(--title-16);color:var(--point-white);font-weight:400;line-height:1.5;padding:6px 12px;border-radius:var(--radius-06);} .order_info_table table tbody tr.place_name{align-items: flex-start;} .order_info_table table tbody tr.place_name th{line-height:50px;} .order_info_table table tbody tr.place_name label{margin-top:8px;} #pay_box .order_info_table tr{width:100%;} #pay_box .order_info_table .add_delivery{display: flex;align-items: center;gap:10px;} #pay_box .order_info_table .btn_frmline, #pay_box .order_info_table .cp_cancel{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;font-size:var(--title-16);font-weight:400;line-height:1.5;padding:0 12px;border-radius:var(--radius-06);border:1px solid;height:40px;} #pay_box .order_info_table .btn_frmline{background:var(--black-color08);color:var(--point-white);border-color:var(--black-color08);} #pay_box .order_info_table .cp_cancel{background:var(--point-white);color:var(--black-color00);border-color:var(--black-color00);} #pay_box .order_info_table .coupon_box{position: relative;display: flex;align-items: center;gap:10px;flex-wrap:Wrap;} html:has(.coupon_layer_box.on){overflow:hidden;} #pay_box .order_info_table .coupon_layer_box{position: fixed;top:0;left:0;display: flex;align-items: center;justify-content: center;background:rgba(0,0,0,0.5);display: none;width:100%;height:100%;z-index:9999;} #pay_box .order_info_table .coupon_layer_box.on{display:flex;} #pay_box .order_info_table .coupon_layer{background:var(--point-white);box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);padding:20px;} #pay_box .order_info_table .coupon_title{display: flex;align-items: center;justify-content: space-between;font-size:var(--title-20);margin-bottom:20px;} #pay_box .order_info_table .coupon_title h3{font-size:150%;color:var(--black-color00);font-weight:600;} #pay_box .order_info_table .coupon_title .btn_close{width:25px;aspect-ratio:auto 1;position: relative;border:none;} #pay_box .order_info_table .coupon_title .btn_close:before, #pay_box .order_info_table .coupon_title .btn_close:after{width:100%;height:2px;content:"";background:var(--black-color00);position: absolute;top:50%;left:0;} #pay_box .order_info_table .coupon_title .btn_close:before{transform:rotate(45deg);} #pay_box .order_info_table .coupon_title .btn_close:after{transform:rotate(-45deg);} #pay_box .order_info_table .coupon_layer table{display: table;} #pay_box .order_info_table .coupon_layer table tbody{display: table-row-group;} #pay_box .order_info_table .coupon_layer table tr{display:table-row;} #pay_box .order_info_table .coupon_layer table tr th, #pay_box .order_info_table .coupon_layer table tr td{display: table-cell;} #pay_box .order_info_table .coupon_layer table thead tr th{box-sizing:border-box;border-top:1px solid var(--black-color00);border-bottom:1px solid var(--border-color01);background:var(--gray-bg01);text-align: center;vertical-align: middle;font-size:var(--title-20);color:var(--black-color03);font-weight:500;padding:15px 10px;} #pay_box .order_info_table .coupon_layer table tbody tr td{box-sizing:border-box;border-bottom:1px solid var(--border-color01);text-align: center;vertical-align: middle;font-size:var(--title-18);color:var(--black-color05);font-weight:500;padding:15px 10px;} #pay_box .order_info_table .coupon_layer table tbody tr td.tal{text-align:left;} #pay_box .order_info_table tr.point{align-items: flex-start;} #pay_box .order_info_table tr.point .point_status{display: flex;align-items: center;gap:40px;} #pay_box .order_info_table tr.point .point_status > span{display: flex;align-items: center;gap:10px;color:var(--point-color01);font-weight: 600;position: relative;} #pay_box .order_info_table tr.point .point_status > span + span:before{width:1px;height:12px;content:"";background:var(--border-color01);position: absolute;left:0;top:50%;translate:0 -50%;} #pay_box .order_info_table tr.point .point_status strong{font-size:inherit;color:var(--black-color01);font-weight:inherit;} #pay_box .order_info_table tr.point .point_status em{color:var(--point-color01);font-weight:inherit;} #pay_box .order_info_table tr.point .use_point{display: flex;align-items: center;gap:10px;margin-top:20px;flex-wrap:wrap;} #pay_box .order_info_table tr.point .use_point .input_box{display: inline-flex;align-items: center;gap:10px;} #sod_frm .pay_method #sod_frm_pt_alert{margin-top:20px;} .pay_method .radio_list{display: flex;flex-wrap:wrap;align-items: center;gap:10px 20px;} #wrapper .pay_method .radio_list input[type="radio"] + label{box-sizing:border-box;background:none;} #wrapper #settle_bank{margin-top:15px;} #wrapper #settle_bank p{margin-bottom:10px;} #wrapper #display_pay_button{display: flex;align-items: flex-start;justify-content: center;gap:10px;border:none;} #wrapper #display_pay_button .btn_submit, #wrapper #display_pay_button .btn_basic{width:15%;height:57px;} @media (max-width:1440px) { #wrapper #forderform, #wrapper #sod_frm{padding:0;} #wrapper .sod_left{width:100%;} } @media (max-width:1024px) { #wrapper .order_prd_table colgroup{display: none;} #wrapper .order_prd_table tr{width:100%;} #wrapper .order_prd_table td:last-child{border-bottom:none;} .order_info_box{gap:clamp(40px, 10vw, 100px);margin-top:clamp(60px, 10vw, 100px);} .order_info_table table{padding-block:clamp(20px, 4vw, 40px)} .order_info_table table tbody tr{width:100%;} .order_info_table table tbody tr.addr .zipcode_txt{width:calc(100% - 149px);} .order_info_table textarea{padding:clamp(15px, 2vw, 20px) clamp(15px, 2vw, 20px);height:clamp(100px, 15vw, 150px);} .order_info_table table tbody tr.place_name th{line-height:clamp(40px, 5vw, 50px);} .order_info_table .order_choice_place, .order_info_table .radio_list{gap:5px 10px;} #pay_box .order_info_table .btn_frmline, #pay_box .order_info_table .cp_cancel{height:clamp(30px, 4vw, 40px);} } @media (max-width:860px) { #pay_box .order_info_table .coupon_layer table tbody tr td .btn_frmline{width:100%;padding:0;} } @media (max-width:640px) { #wrapper .order_prd_table .td_prd{padding:15px 15px;} #wrapper .order_prd_table .prd_box{gap:10px;} #wrapper .order_prd_table .prd_box .sod_img{width:100px;} .order_info_table table tbody tr th{width:84px;} .order_info_table table tbody tr td{width:calc(100% - 94px);} .order_info_table table tbody tr.addr td{gap:10px;} .order_info_table table tbody tr.addr .zipcode_txt{width:calc(100% - 138px);} .order_info_table .flex_box input{width:100%;} #pay_box .order_info_table .add_delivery{flex-direction:column;gap:5px;align-items: flex-start;} #pay_box .order_info_table .coupon_layer{padding:20px 15px;} #pay_box .order_info_table .coupon_title{margin-bottom:15px;} #pay_box .order_info_table .coupon_title .btn_close{width:20px;} #pay_box .order_info_table .coupon_layer table col:nth-child(2){width:30%;} #pay_box .order_info_table .coupon_layer table col:nth-child(3){width:20%;} #pay_box .order_info_table .coupon_layer table thead tr th{padding:12px 5px;} #pay_box .order_info_table .coupon_layer table tbody tr td{padding:12px 5px;} #pay_box .order_info_table tr.point .point_status{align-items: flex-start;flex-direction: column;gap:10px;} } @media (max-width:576px) { #wrapper #display_pay_button{flex-direction: column;} #wrapper #display_pay_button .btn_submit, #wrapper #display_pay_button .btn_basic{width:100%;height:40px;} } @media (max-width:479px) { .order_info_box h2{font-size:150%;} .order_info_table table tbody tr th{width:74px;} .order_info_table table tbody tr td{width:calc(100% - 84px);} .order_info_table table tbody tr.addr .zipcode_txt{width:calc(100% - 108px);} } /*─────────────────────────────────────────────────────────── 게시판 ───────────────────────────────────────────────────────────*/ /* 인풋 */ #wrapper :where([type="text"], [type="password"], [type="email"], select){border:1px solid var(--border-color01);background: var(--point-white);font-size: var(--title-18);font-weight:300;color: var(--black-color03);line-height: normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:50px;padding: 0 23px;letter-spacing: -0.03em; transition: all 0.4s;border-radius:var(--radius-06);box-sizing:border-box;text-indent:0;font-family:var(--font-type01);} #wrapper :where([type="text"], [type="password"], [type="email"], select)::placeholder{color: var(--black-color10);} #wrapper :where([type="text"], [type="password"], [type="email"], select):focus{border-color: var(--black-color00);} #wrapper select{width: 100%;max-width: 180px;padding:0 30px 0 20px;appearance: none;background:var(--point-white) url('../img/sub/sel_arw.svg') no-repeat calc(100% - 17px) / 14px auto;cursor:pointer;} #wrapper input[type="text"]::-webkit-input-placeholder {color:var(--black-color10);} #wrapper input[type="password"]::-webkit-input-placeholder {color:var(--black-color10);} #wrapper input[type="text"]::-moz-placeholder {color:var(--black-color10);} #wrapper input[type="password"]::-moz-placeholder {color:var(--black-color10);} #wrapper input[type="text"]:-ms-input-placeholder {color:var(--black-color10);} #wrapper input[type="password"]:-ms-input-placeholder {color:var(--black-color10);} #wrapper input[type="text"]:-moz-placeholder {color:var(--black-color10);} #wrapper input[type="password"]:-moz-placeholder {color:var(--black-color10);} #wrapper input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset;-webkit-text-fill-color:var(--black-color03);font-size:inherit;} @media (max-width:1023px) { #wrapper :where([type="text"], [type="password"], [type="number"], [type="date"], [type="email"], select){padding-inline: clamp(15px, 2.3vw, 20px);height: clamp(40px, 5vw, 50px);} #wrapper select{max-width: clamp(110px, 18vw, 180px);padding-right: clamp(24px, 5.5px, 30px);background-position: calc(100% - clamp(15px, 2.3vw, 20px)) 50%;background-size: clamp(8px, 1.9vw, 11px);} } #wrapper .search_wrap{position: relative; margin-bottom:40px;display: flex;gap: 10px; justify-content: flex-end;} #wrapper .search_wrap select{flex-shrink: 0;height:56px;font-size:var(--title-20);} #wrapper .search_wrap .inp_box{position: relative;width: 100%; max-width:460px;} #wrapper .search_wrap .inp_box [type="text"]{width: 100%;height:56px;font-size:var(--title-20);padding:0 60px 0 15px;} #wrapper .search_wrap .inp_box button{position: absolute;top: 0;right:0;width:56px;height:100%;background:var(--black-color03);box-sizing:border-box;border-radius:0 6px 6px 0;display: flex;align-items: center;justify-content: center;} #wrapper .search_wrap .inp_box button:before{width:26px;aspect-ratio:auto 1;content:"";background:url('../img/skin/hd_search.svg') no-repeat center / 100% auto;filter:var(--filter-white);} @media (max-width:1023px) { #wrapper .search_wrap{margin-bottom: clamp(25px, 3vw, 40px);} #wrapper .search_wrap select{height:clamp(44px, 5.6vw, 56px);} #wrapper .search_wrap .inp_box{max-width: clamp(250px, 40vw, 440px);} #wrapper .search_wrap .inp_box [type="text"]{height:clamp(44px, 5.6vw, 56px);padding-right:calc(clamp(44px, 5.6vw, 56px) + 5px);} #wrapper .search_wrap .inp_box button{width:clamp(40px, 5vw, 56px);height: clamp(44px, 5.6vw, 56px);} #wrapper .search_wrap .inp_box button:before{width:clamp(17px, 2.6vw, 26px);} } @media (max-width:640px) { #wrapper .search_wrap{flex-wrap: wrap;} #wrapper .search_wrap select{flex-shrink: unset;max-width: 100%;} #wrapper .search_wrap .inp_box{max-width: 100%;} #wrapper .search_wrap .inp_box button{border-radius:0 3px 3px 0;} } /*일반*/ #wrapper #gw-bo-list form{padding:0;} #wrapper #gw-bo-list{margin-top:0;width:100%;padding:0;} #wrapper .board_preface{margin-bottom:40px;} .bbs_table{position: relative; width: 100%; table-layout: fixed; font-size: var(--title-20); border-top: 1px solid var(--black-color03);} .bbs_table :where(th, td){line-height: 1.3;border-bottom: 1px solid var(--border-color01);padding: 23px 10px;text-align: center;letter-spacing: 0;} .bbs_table th{font-size:90%; font-weight: 500; color: var(--black-color00);} .bbs_table td{font-size:90%;font-weight: 400; color: var(--black-color08);font-family:var(--font-type02);padding:21px 10px;} .bbs_table td span{font-size:inherit;color: inherit;font-weight:inherit;} .bbs_table td.left{text-align: left;} .bbs_table td.left > div{display: flex;align-items: center;gap:10px;} .bbs_table td.left a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all;color:var(--black-color03);font-weight:500;display:block;max-width:100%;} .bbs_table td.left a i{display: none;} .bbs_table td.left .icon{flex-shrink:0;} .bbs_table td br{display: none;} .bbs_table .notice_icon{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;padding:0 11px;height:28px;border:1px solid var(--point-red);font-size:var(--title-16);color:var(--point-red);font-weight:500;flex-shrink:0;border-radius:4px;} .bbs_table .for_t{display: none;} .paging_wrap{position: relative;margin-top:60px;min-height:56px;display: flex;align-items: center;justify-content: center;} .paging_wrap .pg_wrap{margin-top:0;} .btn_wrap{display: flex;flex-wrap:wrap;gap:10px;justify-content: center;} #wrapper .paging_wrap .pg_wrap{margin-top:0;} #wrapper .paging_wrap .btn_wrap{position: absolute;top:0;right:0;justify-content: flex-end;width:auto;} .btn_wrap .btn{padding:0 48px;height:56px;} #wrapper #gw-bo-list .gw-empty-list{border:none !important;} /* over */ @media (hover:hover) and (pointer:fine) { .bbs_table tbody tr:hover{background:var(--gray-bg04);} } @media (max-width:1400px) { .paging_wrap{flex-direction:column;} #wrapper .paging_wrap .pg_wrap + .btn_wrap{margin-top:15px;} #wrapper .paging_wrap .btn_wrap{position: static;width:100%;} } @media (max-width:1023px) { .bbs_table .notice .tag{padding:0 12px;} .paging_wrap{min-height:clamp(40px, 5vw, 50px);} #wrapper .board_preface{margin-bottom:clamp(25px, 4vw, 40px);} } @media (max-width:860px) { .bbs_table{display: block; } .bbs_table thead{display: none;} .bbs_table :where(tbody, tr, th, td){display: block; width: 100%; border:0; padding:0; text-align: left;} .bbs_table tr{padding:20px;display: flex;flex-wrap: wrap;gap: 10px 20px;border-bottom: 1px solid var(--border-color01);} .bbs_table td{width: auto;padding:0;} .bbs_table .notice .tag{height:28px;padding:0 8px;} .bbs_table td.left{width: 100%; padding: 0;} .bbs_table td.left > div{gap:6px;} .bbs_table td.num{display: none;} .bbs_table .for_pc{display: none;} .bbs_table .for_t{display: inline-block;} .paging_wrap{margin-top:40px;} } /*faq*/ #wrapper #gw-bo-list .gw-faq-list{border:none;box-sizing:border-box;border-top:1px solid var(--black-color03);} #wrapper .gw-faq-list > li{box-sizing: border-box;border-bottom: 1px solid var(--border-color01);position: relative;font-size:var(--title-20);} #wrapper #gw-bo-list .subject{padding:26px 28px 26px 40px;box-sizing:border-box;display: flex;align-items: center;gap:30px;position: relative;} #wrapper #gw-bo-list .subject:after{width:12px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border:2px solid var(--black-color03);border-width:2px 2px 0 0;transform:rotate(135deg);flex-shrink:0;translate:0 -3px;} #wrapper .gw-faq-list .faq-question{font-size:100%;color:var(--black-color02);font-weight:400;line-height:1.6;width:calc(100% - 66px);} .gw-faq-list .faq_icon{display: inline-flex;box-sizing: border-box;align-items: center;justify-content: center;text-align: center;width:36px;aspect-ratio:auto 1;border-radius:100%;background:var(--point-color01);font-size:100%;color:var(--point-white);font-weight:600;font-family:var(--font-type02);flex-shrink:0;} #wrapper .gw-faq-list .more_box{margin-top:15px;} /*answer*/ .gw-faq-list .answer_box{box-sizing:border-box;background:var(--point-color07);border-radius:var(--radius-10);padding:30px 40px;display: none;} .gw-faq-list .answer_box > div{display: flex;align-items: flex-start;gap:30px;} .gw-faq-list .answer_box .faq_icon{background:var(--point-white);color:var(--point-color01);} #wrapper .gw-faq-list .answer_box .gw-answer{font-size:90%;color:var(--black-color04);font-weight:400;line-height:1.77;margin-top:3px;} /*on*/ #wrapper .gw-faq-list > li.on{border-color:transparent;} #wrapper .gw-faq-list > li.on .faq-question{color:var(--point-color01);font-weight:500;} #wrapper #gw-bo-list .gw-faq-list > li.on .subject:after{border-color:var(--point-color01);transform:rotate(-45deg);translate:0 4px;} @media (max-width:1023px) { #wrapper #gw-bo-list .subject{padding:clamp(12px, 2.6vw, 26px) clamp(15px, 3vw, 30px);gap:clamp(15px, 3vw, 30px);} .gw-faq-list .faq_icon{width:clamp(30px, 3.6vw, 36px);} .gw-faq-list .answer_box{padding:clamp(20px, 3vw, 30px) clamp(15px, 3vw, 30px);} .gw-faq-list .answer_box > div{gap:clamp(15px, 3vw, 30px);} } @media (max-width:479px) { .gw-faq-list .faq_icon{font-size:90%;} #wrapper #gw-bo-list .subject:after{width:9px;} } /*view*/ #wrapper .bbs_view{margin:0 !important;padding:0 !important;} .bbs_view .bbs_view_tit{font-size:var(--title-20);box-sizing:border-box;border-bottom:1px solid var(--black-color03);padding-bottom:29px;margin-top:11px;} .bbs_view .bbs_view_tit h3{font-size:110%;color:var(--black-color03);font-weight:500;line-height:1.3;} .bbs_view .bbs_view_tit .name_box{margin-top:20px;display: flex;flex-wrap:wrap;align-items: center;} .bbs_view .bbs_view_tit .name_box p{font-size:90%;color:var(--black-color08);font-weight:400;font-family:var(--font-type02);display: inline-flex;align-items: center;} .bbs_view .bbs_view_tit .name_box p + p:before{width:1px;height:12px;content:"";background:var(--border-color01);display: inline-block;margin:0 16px} .bbs_view .bbs_view_tit .name_box p span{font-size:inherit;color:inherit;font-weight:inherit;} .bbs_view .bbs_content{box-sizing:border-box;padding:30px 0 40px;margin-bottom:30px;border-bottom:1px solid var(--border-color03);} .bbs_file_box{box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color03);display: flex;align-items:center;overflow:clip;background:var(--gray-bg04);margin-top:20px;} .bbs_file_box h4{width:180px;box-sizing:border-box;padding:0 30px;font-size:var(--title-18);color:var(--black-color03);font-weight: 500;line-height:1.3;} .bbs_file_box ul{box-sizing:border-box;padding:30px 30px;width:calc(100% - 180px);background:var(--point-white);display: flex;flex-direction: column;gap:15px;} .bbs_file_box ul li a{display: flex;align-items:flex-start;gap:13px;font-size:var(--title-18);color:var(--black-color05);font-weight:400;} .bbs_file_box ul li a img{flex-shrink:0;translate:0 5px;} #wrapper #gw-bo-v .btn_bo_user{flex-direction:row;align-items: center;justify-content: center;} #wrapper #gw-bo-v .btn_bo_user > li{flex:initial;} #wrapper #gw-bo-v .bo_v_nb{margin-top:60px;} #wrapper #gw-bo-v .bo_v_nb > li >a{position: relative;} #wrapper #gw-bo-v .bo_v_nb > li >a:before{content: "";display: block;width: 100%;height: 3px;background: var(--point-color01);position: absolute;top: -62px;opacity: 0;transition: all .3s;} /*book view*/ .bbs_view .book_view{display: flex;flex-direction:column;gap:20px;} .bbs_view .book_view dl{display: flex;align-items: center;} .bbs_view .book_view dl dt, .bbs_view .book_view dl dd{box-sizing:border-box;font-size: var(--title-18);color: var(--black-color03);font-weight: 500;line-height: 1.3;} .bbs_view .book_view dl dt{width:150px;flex-shrink:0;} .bbs_view .book_view dl dd{width:calc(100% - 150px);color:var(--black-color05);font-weight: 400;} /* over */ @media (hover:hover) and (pointer:fine) { #wrapper #gw-bo-v .bo_v_nb > li:hover >a:before{opacity:1;} #wrapper #gw-bo-v .bo_v_nb > li >a:hover{color:var(--point-color01);} } @media (max-width:1023px) { .bbs_file_box h4{width:clamp(120px, 18vw, 180px);padding-inline:clamp(15px, 3vw, 30px);} .bbs_file_box ul{width:calc(100% - clamp(120px, 18vw, 180px));padding-block:clamp(20px, 3vw, 30px);padding-inline:clamp(15px, 3vw, 30px);} #wrapper #gw-bo-v .bo_v_nb{margin-block:clamp(40px, 6vw, 60px);padding-top:clamp(40px, 6vw, 60px);} #wrapper #gw-bo-v .bo_v_nb > li > a:before{top:calc(clamp(42px, 6.2vw, 62px) * -1);} /*book view*/ .bbs_view .book_view dl dt{width:clamp(100px, 15vw, 150px);} .bbs_view .book_view dl dd{width:calc(100% - clamp(100px, 15vw, 150px));} } @media (max-width:860px) { .bbs_file_box ul li a img{translate:0 3px;} } @media (max-width:640px) { .bbs_view .bbs_view_tit{margin-top:0;padding-bottom:15px;} .bbs_view .bbs_view_tit .name_box{margin-top:10px;} .bbs_view .bbs_view_tit .name_box p + p:before{height:8px;margin:0 10px;} .bbs_view .bbs_content{padding:20px 0 30px;margin-bottom:20px;} .bbs_file_box ul{gap:8px;} .bbs_file_box ul li a{gap:5px;} .bbs_file_box ul li a img{height:12px;} } /*write*/ .bbs_write{box-sizing:border-box;border-top: 1px solid var(--black-color03);border-bottom:1px solid var(--border-color01);padding:30px 0;display: flex;flex-wrap:wrap;gap:20px 98px;margin-bottom:50px;} .bbs_write > dl{width:100%;box-sizing:border-box;display: flex;align-items: center;} .bbs_write > dl.line2{width:calc(50% - 49px);} .bbs_write > dl > dt{width:150px;box-sizing:border-box;font-size:var(--title-18);color:var(--black-color03);font-weight: 500;line-height:1.3;} .bbs_write > dl > dt.required{background:none !important;} .bbs_write > dl > dt em{display: inline-block;font-size:inherit;color:var(--point-red02);font-weight:500;} .bbs_write > dl > dd{width:calc(100% - 150px);} .bbs_write > dl > dd input{width:100%;text-align:left;} .bbs_write .addr_box{display: flex;flex-direction: column;gap:10px;} .bbs_write .addr_box .flex_box{display: flex;gap:10px;flex-wrap:wrap;} #wrapper .bbs_write .zip_box .btn_basic{border-radius:4px;border-color:var(--black-color08);} .bbs_write .zip_box input{width:calc(50% - 254px);} .bbs_write .addr_box .addr input{width:calc(50% - 5px);} #wrapper .bbs_write .gw-file-input-container{display: flex;flex-wrap: wrap;gap:10px;} #wrapper .bbs_write .gw-file-input-container .file_name_box{width:calc(100% - 130px);border: 1px solid var(--border-color01);background: var(--point-white);line-height: normal;height: 50px;padding: 0 23px;letter-spacing: -0.03em;transition: all 0.4s;border-radius: var(--radius-06);box-sizing: border-box;text-indent: 0;font-family: var(--font-type01);display: flex;align-items: center;} #wrapper .bbs_write .gw-file-input-container .file_name_box .file_name{font-size: var(--title-18);font-weight: 300;color: var(--black-color03);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:100%;} #wrapper .bbs_write .gw-file-input-container .gw-file-input-button{width:120px !important;display: inline-flex;box-sizing:border-box;border-radius:var(--radius-06);background:var(--black-color08);font-size: var(--title-18);font-weight: 300;color: var(--black-color03);align-items: center;justify-content: center;text-align: center;position: static;height:50px;line-height:initial;color:var(--point-white);} #wrapper .write_btn .btn{width:180px;height:60px;font-size:var(--title-20);border-radius:8px;} @media (max-width:1400px) { .bbs_write{gap:20px 60px;} .bbs_write > dl.line2{width:calc(50% - 30px);} .bbs_write .zip_box input{width:calc(50% - 236px);} } @media (max-width:1023px) { .bbs_write{padding-block:clamp(20px, 3vw, 30px);margin-bottom:clamp(30px, 5vw, 50px);} .bbs_write > dl > dt{width:120px;} .bbs_write > dl > dd{width:calc(100% - 130px);} #wrapper .bbs_write .gw-file-input-container .file_name_box{padding-inline: clamp(15px, 2.3vw, 20px);height: clamp(40px, 5vw, 50px);} #wrapper .bbs_write .gw-file-input-container .gw-file-input-button{height: clamp(40px, 5vw, 50px);} #wrapper .write_btn .btn{width:clamp(150px, 18vw, 180px);height:clamp(50px, 6vw, 60px);} } @media (max-width:860px) { .bbs_write > dl.line2{width:100%;} .bbs_write .zip_box input{width:calc(100% - 127px);} } @media (max-width:640px) { #wrapper .bbs_write .zip_box .btn_basic{width:102px;} .bbs_write .zip_box input{width:calc(100% - 112px);} .bbs_write .addr_box .addr input{width:100%;} #wrapper .bbs_write .gw-file-input-container .file_name_box{width:calc(100% - 110px);} #wrapper .bbs_write .gw-file-input-container .gw-file-input-button{width:100px !important;} } @media (max-width:479px) { #wrapper .bbs_write .gw-file-input-container .file_name_box{width:100%;} #wrapper .bbs_write .gw-file-input-container .gw-file-input-button{width:100% !important;} } /*비밀번호*/ #wrapper #pw_confirm{max-width:600px;} #wrapper #pw_confirm fieldset{padding:50px 0;display: flex;flex-direction:column;gap:20px;text-align:left;} @media (max-width:1023px) { #wrapper #pw_confirm fieldset{padding-block:clamp(20px, 5vw, 50px);gap:clamp(10px, 2vw, 20px);} } /*─────────────────────────────────────────────────────────── 학교주문 안내 ───────────────────────────────────────────────────────────*/ .order_introduce{display: flex;flex-direction: column;gap:80px;} .caution_box dl{box-sizing:border-box;padding:30px 40px;background:var(--gray-bg04);border-radius:var(--radius-10);font-size:var(--title-20);} .caution_box dl dt{display: inline-flex;align-items: center;gap:10px;font-size:130%;color:var(--black-color00);font-weight:500;line-height:1.3;position: relative;} .caution_box dl dt:before{width:22px;aspect-ratio:auto 1;content:"";background:url('../img/sub/icon_caution.svg')no-repeat center;background-size:auto 100%;display: inline-block;flex-shrink:0;} .caution_box dl dd{font-size:85%;color:var(--black-color03);font-weight:400;line-height:1.6;margin-top:11px;} /*edu, teahcer*/ .edu_container .caution_box dl, .teacher_container .caution_box dl{background:var(--point-color08);} .order_step .step_container{padding-top:10px;overflow:visible;} .order_step .step_container ol{display: flex;counter-reset:orderStepCnt;} .order_step .step_container ol li{box-sizing:border-box;border:1px solid var(--border-color01);border-radius:var(--radius-10);counter-increment:orderStepCnt;padding:25px 30px 29px;text-align: center;font-size:var(--title-20);position: relative;} .order_step .step_container ol li + li:after{width:16px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border:2px solid var(--black-color10);border-width:2px 2px 0 0;transform:rotate(45deg) translateY(-50%);left:-54px;top:50%;position: absolute;} .order_step .step_container ol li:before{content:"STEP. " counter(orderStepCnt, decimal-leading-zero);display: inline-block;font-size:80%;color:var(--point-color01);font-weight:600;line-height:1.3;font-family:var(--font-type02);letter-spacing:0;} .order_step .step_container ol li .icon{height:70px;display: flex;align-items: center;justify-content: center;margin-top:24px;} .order_step .step_container ol li .icon img{max-height:100%;} .order_step .step_container ol li dl{margin-top:30px;} .order_step .step_container ol li dl dt{font-size:130%;color:var(--black-colr00);font-weight:500;line-height:1.3;} .order_step .step_container ol li dl dd{font-size:90%;color:var(--black-color03);font-weight:400;line-height:1.6;margin-top:20px;} .order_step .step_container ol li dl dd strong{font-size:inherit;color:var(--point-red02);font-weight:600;} .order_step .step_container ol li dl dd a{font-size:inherit;color:var(--point-color01);font-weight:600;} .order_step .step_container ol li .down_box{display: flex;gap:20px;} .order_step .step_container ol li .down_box > a{display: inline-flex;box-sizing:border-box;flex-direction:column;align-items: center;justify-content: center;gap:10px;padding:18px 12px 16px;border-radius:8px;border:1px solid var(--black-color03);width:calc(50% - 10px);} .order_step .step_container ol li .down_box > a span{font-size:var(--title-20);color:var(--black-color03);font-weight:500;line-height:1.3;} .order_step .step_container ol li .down_box > a:after{width:18px;aspect-ratio:auto 1;content:"";background:url('../img/sub/icon_btn_down.svg')no-repeat center;background-size:auto 100%;filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(0%) hue-rotate(140deg) brightness(92%) contrast(88%);} /*학교*/ .school_order .step_container ol{gap:70px;} .school_order .step_container ol li{width:calc(100% / 3 - 46.7px);} /*개인*/ .personal_order .step_container ol{gap:56px;} .personal_order .step_container ol li{width:calc(25% - 42px);} .personal_order .step_container ol li + li:after{left:-48px;} .order_introduce .contact_bnr{box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);padding:50px 40px;font-size:var(--title-20);text-align: center;display: flex;flex-direction: column;gap:30px;align-items: center;text-align: center;} .order_introduce .contact_bnr h3{font-size:150%;color:var(--black-colr00);font-weight:600;line-height:1.3;} .order_introduce .contact_bnr .link_box{display: flex;align-items: center;justify-content: center;gap:58px;} .order_introduce .contact_bnr .link_box .link{display: flex;align-items: center;gap:18px;position: relative;} .order_introduce .contact_bnr .link_box .link + .link:before{width:1px;height:14px;content:"";background:var(--border-color01);position: absolute;left:-29px;top:50%;translate:0 -50%;} .order_introduce .contact_bnr .link_box .icon{width:40px;aspect-ratio:auto 1;display: inline-flex;box-sizing:border-box;border-radius:100%;background:var(--gray-bg01);align-items: center;justify-content: center;} .edu_order_introduce .contact_bnr .link_box .icon img{filter: brightness(0) saturate(100%) invert(48%) sepia(46%) saturate(3877%) hue-rotate(150deg) brightness(98%) contrast(101%);} .teacher_order_introduce .contact_bnr .link_box .icon img{filter: brightness(0) saturate(100%) invert(64%) sepia(46%) saturate(6698%) hue-rotate(0deg) brightness(102%) contrast(105%);} .order_introduce .contact_bnr .link_box p{font-size:var(--title-20);color:var(--black-color00);font-weight:500;line-height:1.3;} .order_introduce .contact_bnr .link_box p span{font-size:100%;color:inherit;font-weight:400;} .order_introduce .contact_bnr > p{font-size:90%;color:var(--black-colr00);font-weight:400;line-height:1.3;} #wrapper .order_introduce .contact_bnr .btn{margin-top:10px;width:240px;height:60px;font-size:100%;} @media (max-width:1200px) { .order_step .step_container ol li{padding:25px 20px 29px;} .order_step .step_container ol li + li:after{width:12px;left:-34px;} /*학교*/ .school_order .step_container ol{gap:40px;} .school_order .step_container ol li{width:100%;} /*개인*/ .personal_order .step_container ol li + li:after{left:-42px;} } @media (max-width:1023px) { .order_introduce{gap:clamp(50px, 8vw, 80px);} .caution_box dl{padding:clamp(20px, 3vw, 30px) clamp(15px, 4vw, 40px);} #wrapper .order_step .step_container ol{gap:0;} #wrapper .order_step .step_container ol li{height:auto;} .order_step .step_container ol li + li:after{display: none;} .order_introduce .contact_bnr{padding:clamp(30px, 5vw, 50px) clamp(15px, 4vw, 40px);gap:clamp(15px, 3vw, 30px);} #wrapper .order_introduce .contact_bnr .btn{width:clamp(180px, 24vw, 240px);height:clamp(50px, 6vw, 60px);} } @media (max-width:860px) { .order_introduce .contact_bnr .link_box{gap:20px;flex-direction: column;} .order_introduce .contact_bnr .link_box .link{gap:10px;} .order_introduce .contact_bnr .link_box .link + .link:before{display: none;} .order_introduce .contact_bnr .link_box .icon{width:30px;} .order_introduce .contact_bnr .link_box .icon img{max-width:50%;} } @media (max-width:640px) { .caution_box dl dt{gap:8px;} .caution_box dl dt:before{width:18px;} .caution_box dl dd{margin-top:6px;} .order_step .step_container ol li{padding:15px 20px 20px;} .order_step .step_container ol li .icon{height:50px;margin-top:12px;} .order_step .step_container ol li dl{margin-top:15px;} .order_step .step_container ol li dl dd{margin-top:10px;} .order_step .step_container ol li .down_box{flex-direction: column;gap:10px;} .order_step .step_container ol li .down_box > a{width:100%;padding:12px 10px;flex-direction: row;justify-content: space-between;} } /*─────────────────────────────────────────────────────────── 개인주문 안내 ───────────────────────────────────────────────────────────*/ .order_introduce .order_delivery ul.bullet_list{display: flex;flex-direction:column;gap:20px;font-size:var(--title-20);box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);padding:30px 30px;} .order_introduce .order_delivery ul.bullet_list li{display: flex;align-items: flex-start;font-size:90%;color:var(--black-color03);font-weight: 400;line-height:1.3;gap:8px;} .order_introduce .order_delivery ul.bullet_list li:before{width:2px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color03);display: inline-block;flex-shrink:0;translate:0 12px;} @media (max-width:1023px) { .order_introduce .order_delivery ul.bullet_list{padding:clamp(20px, 3vw, 30px) clamp(15px, 3vw, 30px);gap:clamp(10px, 2vw, 20px);} .order_introduce .order_delivery ul.bullet_list li:before{translate:0 9px;} } /*─────────────────────────────────────────────────────────── 회사소개 ───────────────────────────────────────────────────────────*/ /* com-meta */ .com-meta{display: flex;gap: clamp(25px, 4vw, 40px) clamp(40px, 4.2vw, 80px);padding-bottom: clamp(50px, 10vw, 100px);} .com-meta .thumb{position: relative;width: min(620px, 49%);flex-shrink: 0;} .com-meta .thumb::before{position: absolute;content:'';width: clamp(40px, 12vw, 224px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-grad01);left: 0;bottom: 0;translate: -53% 53%;} .com-meta .thumb img{position: relative;width:100%;height:100%;object-fit:cover;z-index: 1;} .com-meta .thumb span{display: block; width: 100%; height: 100%; border-radius: var(--radius-20);overflow: hidden;} .com-meta .title{display: flex;flex-direction: column;justify-content: center;gap: clamp(12px, 2vw, 20px);padding-block: 30px;width: 100%;} .com-meta .title h3{font-size: clamp(23px, 3.6vw, 36px);font-weight: 600;color: var(--black-color00);line-height: 1.4;} .com-meta .title h3 + h4{margin-top: clamp(15px, 4vw, 40px);} .com-meta .title h3 em{color: var(--point-color01);} .com-meta .title h4{font-size: clamp(15px, 2.4vw, 24px);font-weight: 500;color: var(--black-color02);line-height: 1.6;} .com-meta .title h5{font-size: clamp(14px, 2vw, 20px);font-weight: 400;color: var(--black-color03);line-height: 1.6;} @media (max-width:1023px) { .com-meta{flex-wrap: wrap;} .com-meta .thumb{width: auto;flex-shrink: unset;} .com-meta .title{padding-block: 0;} } /* info-title */ .info-title{position: relative;display: flex;flex-direction: column;gap: clamp(10px, 1.7vw, 16px);text-align: center;text-wrap: balance; margin-bottom: clamp(40px, 8vw, 80px);} .info-title::before{display: flex;content:'';width: 1px;height: clamp(50px, 10vw, 100px);background: var(--border-color02);margin: 0 auto clamp(30px, 6.5vw, 65px);} .info-title h4{font-size: clamp(20px, 3vw, 30px);font-weight: 500;color: var(--black-color00);line-height: 1.3;} .info-title h5{font-size: clamp(14px, 2vw, 20px);font-weight: 400;color: var(--black-color03);line-height: 1.6;letter-spacing: 0;} .info-title h5 em{color: var(--point-color01);font-weight: 600;} /* greetings */ .greetings{display: grid;gap: clamp(25px, 5vw, 50px);} .greetings .thumb{border-radius: var(--radius-20);overflow: hidden;} .greetings .title{display: grid;gap: clamp(15px, 3vw, 30px);} .greetings .title h3{font-size: clamp(20px, 3.6vw, 36px);font-weight: 600;color: var(--point-color01);line-height: 1.4;} .greetings .title h5{font-size: clamp(16px, 2.6vw, 26px);font-weight: 500;color: var(--black-color02);line-height: 1.61;} .greetings .title h6{font-size: clamp(14px, 2vw, 20px);font-weight: 400;color: var(--black-color03);line-height: 1.6;} .greetings .sign{display: flex;flex-wrap: wrap;align-items: center;gap: 14px;margin-top: clamp(5px, 1vw, 10px);} .greetings .sign dt{font-size: clamp(14px, 2vw, 20px);font-weight: 500;color: var(--black-color03);} /* bullet-list */ .bullet-list{display: flex;flex-direction: column;gap: clamp(12px, 2vw, 20px);width: 100%;} .bullet-list > li{font-size: clamp(14px, 1.8vw, 18px);color: var(--black-color05);line-height: 1.5;display: flex;align-items: baseline;gap: clamp(8px, 1.2vw, 10px);text-align: left;text-wrap: auto;} .bullet-list > li::before{content:'';width: clamp(2px, 0.5vw, 3px);aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color05);flex-shrink: 0;translate: 0 clamp(-5px, -0.7vw, -3px);} /* history-meta */ .history-meta{position: relative;display: flex;align-items: flex-start;gap: clamp(30px, 6vw, 60px) 0;} .history-meta .sticky{position: sticky;top: 96px;width: min(570px, 45%);flex-shrink: 0;padding-right: clamp(50px, 5.8vw, 110px);display: flex;flex-direction: column;justify-content: space-between;gap: 30px;height: calc(100dvh - 160px);} .history-meta .title{display: grid;gap: clamp(10px, 2vw, 20px);flex-shrink: 0;} .history-meta .title h3{font-size: clamp(17px, 2.4vw, 24px);font-weight: 400;color: var(--point-color01);line-height: 1.6;} .history-meta .title h4{font-size: clamp(30px, 5vw, 50px);font-weight: 600;color: var(--black-color03);line-height: 1.4;} .history-meta .thumb{border-radius: var(--radius-20); overflow: hidden;} .history-meta .thumb img{width:100%; height:100%; object-fit:cover;} .history-meta .cont{width: 100%;padding-top: 55px;} .history-meta .item-list > li{position: relative;padding-left: clamp(60px, 4vw, 70px);padding-bottom: clamp(60px, 9.5vw, 95px);} .history-meta .item-list > li:last-child{padding-bottom: clamp(15px, 2.7vw, 23px);} .history-meta .item-list > li::after{position: absolute;content:'';top: clamp(10px, 1.5vw, 15px);left: 0;width: clamp(7px, 1.1vw, 9px);aspect-ratio: auto 1;border-radius: 100%;background: var(--black-color08);transition: all 0.4s;} .history-meta .item-list > li.on::after{background: var(--point-color01);box-shadow: 0 0 0 clamp(5px, 0.8vw, 6px) rgb(0 115 221 / 20%);} .teacher_container .history-meta .item-list > li.on::after{box-shadow:0 0 0 clamp(5px, 0.8vw, 6px) rgba(255, 119, 0, 0.2);} .edu_container .history-meta .item-list > li.on::after{box-shadow:0 0 0 clamp(5px, 0.8vw, 6px) rgba(0, 175, 181, 0.2);} .history-meta .item-list > li.on:has(~ li.on)::after{box-shadow: none;} .history-meta .line{position: absolute;content:'';width: 1px;height: calc(100% - 75px);background: var(--border-color04);top: 75px;left: calc(min(570px, 45%) + 4px);overflow: hidden;} .history-meta .line em{position: absolute; top:0; left:0; width: 100%; height: 0; background: var(--point-color01);} .history-meta .desc{display: grid;gap: clamp(25px, 4vw, 40px);} .history-meta .desc dt{font-size: clamp(20px, 3.2vw, 32px);font-weight: 500;color: var(--black-color00);margin-bottom: clamp(-8px, -0.8vw, 0px);transition: all 0.4s;} .history-meta .item-list > li.on .desc dt{color: var(--point-color01);-webkit-text-stroke: var(--point-color01);-webkit-text-stroke-width: 0.3px;} .history-meta .desc dd{font-size: clamp(14px, 2vw, 20px);color: var(--black-color05);line-height: 1.5;display: flex;align-items: baseline;} .history-meta .desc dd em{font-family: var(--font-type02);font-weight: 400;color: var(--black-color00);line-height: 1.3;min-width: clamp(60px, 10vw, 90px);max-width: 100px;padding-right: 10px;flex-shrink: 0;} @media (max-width:860px) { .history-meta{flex-wrap: wrap;} .history-meta .sticky{position: relative;inset: auto;width: min(680px, 100%);height: auto;padding-right: 0;flex-shrink: unset;gap: clamp(20px, 3.5vw, 30px);} .history-meta .cont{position: relative;padding-top: 0;} .history-meta .line{top: clamp(10px, 1.5vw, 15px);left: clamp(3px, 0.6vw, 4px);height: calc(100% - clamp(10px, 1.5vw, 15px));} .history-meta .item-list > li{padding-left: clamp(30px, 5.85vw, 50px);padding-bottom: clamp(40px, 7vw, 60px);} } /* map-info */ .map-info{box-shadow: inset 0 0 0 1px var(--border-color01); border-radius: var(--radius-20); overflow: hidden;} .map-info .import{width: 100%; height: clamp(250px, 46vw, 460px); overflow:hidden;} .map-info .import iframe{width:100%; height:100%;} .map-info .logo{max-width: clamp(130px, 21vw, 200px);} .map-info .exp{padding: clamp(30px, 4vw, 40px) clamp(50px, 3.2vw, 60px);display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: clamp(25px, 3vw, 30px) 30px;} .map-info .item{display: flex;flex-wrap: wrap;gap: 15px clamp(40px, 3.2vw, 60px);} .map-info .desc{display: flex;align-items: center;gap: clamp(15px, 2vw, 20px);font-size: clamp(14px, 1.8vw, 18px);font-weight: 400;color: var(--black-color03);line-height: 1.6;} .map-info .desc dt{font-weight: 600;flex-shrink: 0;display: flex;align-items: center;gap: clamp(15px, 2vw, 20px);} .map-info .desc dt i{display: flex;align-items: center;justify-content: center;width: clamp(30px, 4.1vw, 36px);height: clamp(30px, 4.1vw, 36px);border-radius: 100%;background: var(--gray-bg04);padding: 7px;flex-shrink: 0;} .map-info .exp.py50{padding-block: clamp(30px, 5vw, 50px);} .map-info .item.center{width: 100%;justify-content: center;} .map-info .item.line{column-gap: 0;} .map-info .item.line .desc::after{content:'';width: 1px;height: clamp(11px, 1.6vw, 14px);background: var(--border-color01);margin-inline: clamp(10px, 2vw, 20px) clamp(25px, 4vw, 40px);} .map-info .item.line .desc:last-child::after{display:none;} @media (max-width:1023px) { .map-info .exp{padding-inline: clamp(30px, 5vw, 50px);} } @media (max-width:640px) { .map-info .item.line .desc{width: 100%;} .map-info .item.line .desc::after{display: none;} } @media (max-width:360px) { .map-info .desc{flex-wrap: wrap;} .map-info .desc dt{flex-shrink: unset;} } /* gapBox */ .gapBox{display: grid; grid: auto / minmax(0, 1fr); gap: clamp(40px, 8vw, 80px);} .gapBox.g60{gap: clamp(30px, 6vw, 60px);} .gapBox.g20{gap: clamp(15px, 2vw, 20px);} /* exp-title */ .exp-title{position: relative;margin-bottom: clamp(15px, 3vw, 30px);} .exp-title.md{margin-bottom: clamp(15px, 2vw, 20px);} .exp-title h4{font-size: clamp(17px, 2.6vw, 26px); font-weight: 500; color: var(--black-color00); line-height: 1.3;} .exp-title h4.line{display: flex;align-items: baseline;gap: clamp(10px, 1.2vw, 12px);} .exp-title h4.line::before{content:'';width: clamp(3px, 0.6vw, 4px);height: clamp(14px, 2.2vw, 22px);background: var(--point-color01);border-radius: 15px;translate: 0 1px;} /* loca-list */ .loca-list{position: relative;border-top: 1px solid var(--black-color00);} .loca-list > li{position: relative;padding-block: clamp(20px, 3vw, 30px);display: flex;gap: 20px clamp(25px, 3vw, 30px);border-bottom: 1px solid var(--border-color01);} .loca-list .desc{position: relative;background: var(--gray-bg04);border-radius: var(--radius-10);padding: clamp(20px, 2.8vw, 28px) 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: clamp(12px, 2vw, 20px);width: clamp(100px, 21vw, 200px);flex-shrink: 0;} .teacher_container .loca-list .desc{background:var(--point-color08);} .edu_container .loca-list .desc{background:var(--point-color09);} .loca-list .desc dt{height: clamp(36px, 6.5vw, 60px);} .loca-list .desc dt img{max-height:100%;} .loca-list .desc dd{font-size: clamp(14px, 2vw, 20px);font-weight: 500;color: var(--black-color01);line-height: 1.2;} .loca-list .cont{width: 100%;display: flex;flex-direction: column;justify-content: center;font-size: clamp(13px, 1.7vw, 17px);font-weight: 400;color: var(--black-color03);line-height: 1.6;padding-block: 20px;} .loca-list .com-desc{display:grid;gap: 10px;} .loca-list .com-desc dt{display: flex;flex-wrap: wrap;gap: clamp(8px, 1vw, 10px);} .loca-list .com-desc dt span{display: flex;align-items: center;justify-content: center;text-align: center;padding: clamp(7px, 1.3vw, 8px) clamp(15px, 1.8vw, 18px) clamp(6px, 1.2vw, 7px);background: var(--point-color01);border-radius: 50px;color: var(--point-white);} .loca-list .com-desc dd{line-height:1.6;} .loca-list .sub-desc{display:grid;gap: 10px;} .loca-list .sub-desc dt{display: flex;flex-wrap: wrap;gap: clamp(8px, 1vw, 10px);} .loca-list .sub-desc dt span{display: flex;align-items: center;justify-content: center;text-align: center;padding: clamp(4px, 1vw, 5px) 10px clamp(3px, 0.9vw, 4px);background: var(--point-color01);border-radius: 50px;color: var(--point-white);font-size: clamp(12px, 1.5vw, 15px); background: #02A94E;} .loca-list .sub-desc dt span.line06{background: #A15E11;} .loca-list .sub-desc dd{line-height:1.6;} @media (max-width:360px) { .loca-list > li{flex-wrap: wrap;} .loca-list .desc{width: 100%; flex-shrink: unset;} .loca-list .cont{padding-block: 0;} } /* wide-bnr */ .wide-bnr{position: relative;text-align: center;padding: clamp(70px, 10vw, 100px) 30px;min-height: clamp(220px, 35vw, 340px);border-radius: var(--radius-20);overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;} .wide-bnr dt{position: absolute; inset: 0; overflow: hidden;} .wide-bnr dt img{width: 100%; height: 100%; object-fit: cover;} .wide-bnr dd{position: relative; font-size: clamp(24px, 3.6vw, 36px); font-weight: 600; color: var(--point-white); line-height: 1.4;} /* recruit-card */ .recruit-card{border: 1px solid var(--border-color01);border-radius: var(--radius-10);background: var(--point-white);overflow: hidden;} .recruit-card .info-list{padding: clamp(15px, 2vw, 20px) clamp(20px, 3vw, 30px);display: grid;gap: clamp(15px, 2vw, 20px);background: var(--gray-bg04);} .teacher_container .recruit-card .info-list{background:var(--point-color08);} .recruit-card .info-list + .info-list{border-top: 1px solid var(--border-color01);} .recruit-card .info-list > li{position: relative;} .recruit-card .info-list .desc{display: flex;align-items: baseline;gap: 10px clamp(15px, 2vw, 20px);} .recruit-card .info-list .desc dt{display: flex;align-items: center;justify-content: center;text-align: center;font-size: clamp(14px, 1.8vw, 18px);font-weight: 500;color: var(--point-white);background: var(--point-color01);border: 1px solid var(--point-color01);border-radius: 50px;padding: clamp(6px, 1.3vw, 8px) 15px;min-width: clamp(85px, 12vw, 110px);line-height: 1.2;} .recruit-card .info-list .desc dd{font-size: clamp(15px, 2vw, 20px);font-weight: 500;color: var(--black-color03);line-height: 1.6;display: flex;flex-wrap: wrap;align-items: center;gap: 5px 10px;width: 100%;} .recruit-card .info-list .desc dd i{font-size: clamp(13px, 1.5vw, 15px);font-weight: 400;color: var(--point-white);background: #02A94E;font-style: normal;line-height: 1.2;padding: 5px 10px;border-radius: 50px;} .recruit-card .info-list .desc .discont{display: contents; font-size: inherit; color: inherit; line-height: inherit;} .recruit-card .info-list .more{display: flex;align-items: center;gap: clamp(6px, 0.8vw, 8px);font-size: clamp(14px, 1.6vw, 16px);font-weight: 400;color: var(--point-color01);line-height: 1.6;} .recruit-card .info-list .more::after{content:'';width: clamp(8px, 1.2vw, 10px);aspect-ratio: auto 1;border: 2px solid var(--point-color01);clip-path: polygon(100% 0, 0% 100%, 100% 100%);rotate: -45deg;border-radius: 2px;translate: 0 clamp(-1px, -0.1vw, 0px);} .recruit-card .info-list.wh{background:none;} .recruit-card .info-list.wh .desc dt{background: var(--point-white);color: var(--point-color01);} .recruit-card .info-list.wh .desc dd{font-size: clamp(14px, 1.7vw, 17px);font-weight: 400;} .recruit-card .info-list.array02{grid:auto / repeat(2, 1fr);padding-block: clamp(20px, 3vw, 30px);} @media (max-width:1023px) { .recruit-card .info-list.array02{grid:auto / repeat(1, 1fr);} } @media (max-width:360px) { .recruit-card .info-list .desc{flex-wrap: wrap;} .recruit-card .info-list .desc dt{flex-shrink: unset;} } /*저자모집*/ .author_wrap .recruit-card .info-list .desc dt{flex-shrink:0;min-width:clamp(120px, 15vw, 150px);} .author_wrap .recruit-card .bullet-list{box-sizing:border-box;padding:clamp(15px, 2vw, 20px) clamp(20px, 3vw, 30px);} .author_wrap .recruit-card .bullet-list dl{display: flex;align-items: flex-start;gap:5px;} .author_wrap .recruit-card .bullet-list dl dt{font-weight: 600;flex-shrink: 0;} .author_wrap .recruit-card .bullet-list a{font-size:inherit;color:inherit;font-weight:inherit;}