@charset "utf-8";

/*visual*/
    .sub_visual { height:clamp(350px, 60vw, 600px); position: relative;background:url('../images/skin/sv_company.jpg') no-repeat center / cover;}
    .sub_visual > .w_custom{height:100%;display: flex;flex-direction: column;gap:clamp(30px, 10vw, 127px);align-items: flex-start;justify-content: flex-end;box-sizing:border-box;padding-bottom:var(--row-gap60);position: relative;z-index:3;}
    .sub_visual .sv_title {text-align:left;width: 100%;display: flex;flex-direction:column;color: var(--point-white);box-sizing: border-box;gap:var(--row-gap10);}
    .sub_visual .sv_title span {font-size:var(--text-20);font-weight:500;line-height:1.3;}
    .sub_visual .sv_title h2 {font-size:var(--text-60);font-weight:700;line-height:1.3;letter-spacing:0;}

    body:has(.sub_business) .sub_visual{ background-image: url('../images/skin/sv_business.jpg'); }
    body:has(.sub_product) .sub_visual{ background-image: url('../images/skin/sv_product.jpg'); }
    body:has(.sub_contact) .sub_visual{ background-image: url('../images/skin/sv_contact.jpg'); }

/*nav*/
    .sub_nav { width: 100%; }
    .sub_nav .desc{ position: relative; display:inline-flex;flex-wrap:wrap;align-items: center;border-radius:var(--radius-10);background:rgba(0,0,0,0.3);}
    .sub_nav .desc :where(dt, dd){position: relative;box-sizing: border-box;}
    .sub_nav .desc dt a{display: flex;width:clamp(46px, 5vw, 56px);aspect-ratio:auto 1;align-items: center;justify-content: center;font-size: 0;box-sizing: border-box;}
        .sub_nav .desc dt a img { width:clamp(16px, 1.8vw, 18px);}
    .sub_nav .desc dd:before{width:1px;height:14px;content:"";background:var(--point-white);opacity:0.3;position: absolute;left:0;top:50%;translate:0 -50%;}
    .sub_nav .desc dd span{position: relative;display: flex;align-items: center;padding:0 clamp(40px, 6vw, 60px) 0 clamp(10px, 2vw, 20px);box-sizing: border-box;font-size:var(--text-18);font-weight: 300;color: var(--point-white);min-width:clamp(200px, 28vw, 280px);cursor: pointer; letter-spacing: -0.03em;height:clamp(46px, 5vw, 56px)}
    .sub_nav .desc dd span:before{position: absolute; content: '';width: clamp(7px, 1vw, 11px);aspect-ratio: auto 1.7;background: var(--point-white);clip-path: var(--clip-poly01);right:clamp(10px, 2vw, 20px);top:50%;translate:0 -50%;transition: all 0.4s; }
    body:has(.sub_contact) .sub_nav .desc dd:last-child span{cursor:default;}
    body:has(.sub_contact) .sub_nav .desc dd:last-child span:before{display: none;}
    body:has(.sub_contact) .sub_nav dd ul li:last-child a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}
        .sub_nav .desc dd.on span:before{scale:-1 -1;}
    .sub_nav .desc dd ul{position: absolute;top: calc(100% + 1px);left: 0;width: calc(100% + 2px);padding: 20px 0;background: var(--point-white);border:1px solid var(--border-color01); box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s; z-index: 10; border-radius: 0 0 var(--radius-10) var(--radius-10);}
        .sub_nav .desc dd.on ul{opacity: 1; pointer-events: all;}
        .sub_nav .desc dd ul li a{display: block;font-weight: 400;font-size:var(--text-16);color: var(--black-color02);padding: 11px 24px;box-sizing: border-box;line-height: 1.4;}
        .sub_nav .desc dd ul li.on a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}

    @media (max-width:640px) {
        .sub_nav .desc{width:100%;}
        .sub_nav .desc dd:not(:last-child){display: none;}
        .sub_nav .desc dd{width:calc(100% - clamp(46px, 5vw, 56px));}
        .sub_nav .desc dd span{min-width:initial;width:100%;}
    }

/* sub common */
    .sub_content .sv_title{display: flex; flex-direction: column; gap: var(--row-gap20);}
    .sub_content .sv_title span{font-size: var(--text-20); color: var(--point-color01); font-weight: 500; line-height:1.3; font-family: var(--font-type02);}
    .sub_content .sv_title h3{font-size: var(--text-50); color: var(--black-color00); font-weight: 700; line-height:1.3;}
    .sub_content .sv_title strong{font-size: var(--text-28); font-weight: 600; color: var(--point-color01); line-height: 1.4; letter-spacing: -0.03em; margin-top: 30px;}
    .sub_content .txt strong{font-size: var(--text-24); font-weight: 500; line-height: 1.6; letter-spacing: -0.03em; color: var(--black-color01); padding-top: 10px;}
    .sub_content .txt p{font-size: var(--text-20); font-weight: 400; line-height: 1.6; letter-spacing: -0.03em; color: var(--black-color03);}
    .sub_content .comm img{width: 100%; height: 100%; object-fit: cover;}
    
/* 인사말, 수출, 수입, 유통 (공통) */
    .sub_content .comm{display: flex; gap: var(--row-gap80);}
    .sub_content .comm .con{display: flex; flex-direction: column; justify-content: center; gap: var(--row-gap50); width: calc(50% - 80px);}
    .sub_content .comm .txt{display: flex; flex-direction: column; gap: var(--row-gap30); position: relative;}
    .sub_content .comm .txt:after{content: ''; width: 100%; height: 2px; background-color: var(--border-color01); position: absolute; top: 0;}
    .sub_content .comm .txt::before{content: ''; width: 80px; height: 2px; background-color: var(--point-color01); z-index: 1;;}
    .sub_content .comm .img{width: 50%; border-radius: var(--radius-10); overflow: hidden; aspect-ratio: auto 1.5;}
    
    @media (max-width:1023px) {
        .sub_content .comm{flex-direction: column;}
        .sub_content .comm .con{width: 100%}
        .sub_content .comm .img{width: 100%;}
        /* .sub_content .comm .img img{width: 100%;} */
    }

/* 비전 미션 */
    .sub_vision{display: flex; flex-direction: column; gap: var(--row-gap60);}
    .sub_vision .tit{display: flex; flex-direction: column; gap: var(--row-gap30);}
    .sub_vision .con{position: relative;}
    .sub_vision .con > .img{border-radius: var(--radius-10); overflow: hidden; aspect-ratio: auto;}
    .sub_vision .con > .img img{ width: 100%; height: 100%; object-fit: cover;}
    .sub_vision .ico{position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%;}
    .sub_vision .ico div{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--row-gap15); width: 50%;}
    .sub_vision .ico .img img{width: clamp(38px, 6.8vw, 68px);}
    .sub_vision .ico span{color: var(--point-white); font-size: var(--text-42); font-weight: 700; line-height: 1.4;} 

/* 수입, 유통 */
    .sub_distribution{display: flex; flex-direction: column; gap: var(--row-gap120);}
    .sub_distribution :nth-child(2){flex-direction: row-reverse;}

    @media (max-width:1023px) {
        .sub_distribution :nth-child(2){flex-direction: column;}
    }

/* 제조업 */
    .sub_manufacture .con{display: flex; flex-direction: column; gap: var(--row-gap80);}
    .sub_manufacture ul{border-top: 1px solid var(--black-color00);}
    .sub_manufacture ul li{display: flex; justify-content: space-between; gap: var(--row-gap30);position: relative;}
    .sub_manufacture ul li > a{position: absolute;top:-250px;}
    .sub_manufacture ul li:nth-child(1){padding-block: var(--row-gap80);}
    .sub_manufacture ul li:nth-child(2){padding-top: var(--row-gap80); border-top: 1px solid var(--border-color01);}
    .sub_manufacture ul li:first-child figcaption{padding-top: var(--row-gap40); font-size: var(--text-20); font-weight: 400; line-height: 1.6; letter-spacing: -0.03em; color: var(--black-color03);display: flex;flex-wrap:wrap;gap:5px 10px;align-items: center;justify-content: space-between;}
    .sub_manufacture .tit{display: flex; flex-direction: column; gap: var(--row-gap20); width: 30%;}
    .sub_manufacture .tit span{font-size: var(--text-24); font-weight: 500; line-height: 1.3; color: var(--black-color01);}
    .sub_manufacture .tit h4{font-size: var(--text-40); font-weight: 700; line-height: 1.3; color: var(--black-color01);}
    .sub_manufacture .tit p{font-size: var(--text-24); font-weight: 500; line-height: 1.3; color: var(--black-color03);}
    .sub_manufacture img{border-radius: var(--radius-10); overflow: hidden; aspect-ratio: auto;width:100%;}
    .sub_manufacture .two figure{display: flex; gap: var(--row-gap20);}
    .sub_manufacture .two img{width: calc(50% - var(--row-gap20) / 2); aspect-ratio: auto;}
    .sub_manufacture .two figcaption{position: absolute;width: 1px; height: 1px;margin: -1px;padding: 0;overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
    .sub_manufacture dl{padding-top: var(--row-gap40); gap: clamp(8px, 1.4vw, 14px); display: flex; align-items: center;}
    .sub_manufacture dt{font-size: var(--text-18); font-weight: 600; letter-spacing: -0.03em; background-color: var(--point-color02); padding: var(--row-gap10) var(--row-gap20); border-radius: var(--radius-40);color: var(--point-white);}
    .sub_manufacture dd{font-size: var(--text-18); font-weight: 400; line-height: 1.6; letter-spacing: -0.03em;}

    @media (max-width:1023px) {
        .sub_manufacture .tit{width: 100%;}
        .sub_manufacture ul li{flex-direction: column; gap: var(--row-gap40);}
        .sub_manufacture  ul .con{width: 100%;}
    }
    @media (max-width:479px) {
        .sub_manufacture ul li > a{top:-150px;}
    }

/* 수출 품목 */
    .sub_export_item .con{display: flex; flex-direction: column; gap: var(--row-gap60);}
    .sub_export_item ul{display: flex; flex-wrap: wrap; gap: var(--row-gap10);}
    .sub_export_item ul li{position: relative; width: calc(100% / 3 - var(--row-gap10) * 2 / 3);}
    .sub_export_item .img{border-radius: var(--radius-10); overflow: hidden; aspect-ratio: auto;}
    .sub_export_item .img img{width: 100%; height: 100%; object-fit: cover;}
    .sub_export_item .txt{position: absolute; left: 0; top: 0; color: var(--point-white); display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: space-between; padding: var(--row-gap50);}
    .sub_export_item .txt h4{font-size: var(--text-40); font-weight: 600; line-height: 1.4;}
    .sub_export_item .txt h4 span{display: block; font-size: var(--text-20); font-family: var(--font-type02); font-weight: 400; line-height: 1.4; margin-bottom: var(--row-gap10);}
    .sub_export_item .ico{width: clamp(45px, 5vw, 60px); aspect-ratio: auto 1; display: flex; align-items: center; justify-content: center; border-radius: 100%; background: var(--point-white);  align-self: flex-end;}
    
    @media (max-width:1023px) {
        .sub_export_item ul li{width: calc(100% / 2 - var(--row-gap10) / 2);}
    }
    @media (max-width:479px) {
        .sub_export_item ul{flex-direction: column; flex-wrap: nowrap;}
        .sub_export_item ul li{width: 100%;}
        .sub_export_item .img img{width: 100%;}
    }

/* 수입 품목 */
    .sub_import_item .con{display: flex; flex-direction: column; gap: var(--row-gap80);}
    .sub_import_item .con > ul{display: flex; gap: var(--row-gap80); flex-direction: column;}
    .sub_import_item .con > ul > li{display: flex; align-items: center; gap: var(--row-gap80);position: relative;}
    .sub_import_item .con > ul > li > a{position: absolute;top:-250px;}
    .sub_import_item .con > ul > li > .img{border-radius: var(--radius-10); overflow: hidden; aspect-ratio: auto; width: 35%;}
    .sub_import_item .con > ul > li > .img img{width: 100%; height: 100%; object-fit: cover;}
    .sub_import_item ul li > .img + div{display: flex; flex-direction: column; gap: clamp(25px, 2vw, 40px); width: calc(65% - var(--row-gap40));}
    .sub_import_item ul li div .img{width: clamp(35px, 5vw, 50px);}
    .sub_import_item .tit p{display: block; margin-bottom: var(--row-gap10); color: var(--black-color01); font-size: var(--text-20); font-weight: 400; font-style: var(--font-type02);}
    .sub_import_item .tit h4{font-size: var(--text-40); font-weight: 600; line-height: 1.4; letter-spacing: -0.03em;}
    .sub_import_item .tit h4 span{color: var(--black-color01); font-size: var(--text-24); font-weight: 500; line-height: 1.4; letter-spacing: -0.03em; vertical-align: middle; margin-left: var(--row-gap30);}
    .sub_import_item .bullet-list{display: flex; flex-flow: row; flex-wrap: wrap; gap: var(--row-gap10) 0; padding: clamp(20px, 2.7vw, 40px); box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: var(--radius-10);} 
    .sub_import_item .bullet-list li{width: calc(100% / 3); color: var(--black-color05); font-size: var(--text-18); font-weight: 400; line-height: 1.5; letter-spacing: -0.03em;} 

    /* .sub_import_item ul li .bullet-list:last-child li{width: 100%;} */

    @media (max-width:1023px) {
        .sub_import_item .con > ul > li{flex-direction: column;}
        .sub_import_item .con > ul > li > .img{width: 100%;}
        .sub_import_item .con > ul > li > .img img{width: 100%;}
        .sub_import_item ul li > .img + div{width: 100%;}
    }
    @media (max-width:479px) {
        .sub_import_item .con > ul > li > a{top:-200px;}
    }

/* 오시는 길 */
    .sub_location .prd_tab{display: flex; gap: var(--row-gap20); margin-bottom: var(--row-gap60);}
    .sub_location .prd_tab li{border: 1px solid var(--border-color01); border-radius: 50px}
    .sub_location .prd_tab li.on .more_btn:before{width: 100%;}
    .sub_location .prd_tab li.on .more_btn span{color: var(--point-white);}
    .sub_location .con{border-top: 1px solid var(--black-color00); display: none;}
    .sub_location .con.on{display: block;}
    .sub_location #egypt > ul li:not(:first-child){border-top: 1px solid var(--border-color01); margin-top: var(--row-gap80);}
    .sub_location .con .info{display: flex; gap: var(--row-gap40) var(--row-gap60); padding-block: var(--row-gap40); align-items: center;}
    .sub_location .con > ul > li:not(:first-child){margin-bottom: var(--row-gap80);}
    .sub_location .con li:not(:first-child) .info{margin-top:clamp(15px, 2.5vw, 25px);}
    .sub_location .con h3{font-size: var(--text-40); font-weight: 600; line-height: 1.4; letter-spacing: -0.03em}
    .sub_location #seoul  h3{min-width: 75px;}
    .sub_location #egypt li:first-child h3{min-width: 210px;}
    .sub_location .info ul{display: flex; gap: var(--row-gap30) var(--row-gap60); flex-wrap: wrap}
    .sub_location dl{display: flex; gap: var(--row-gap30); align-items: center;}
    .sub_location dl{display: flex; gap: var(--row-gap10) var(--row-gap30); align-items: center;}
    .sub_location dt{min-width: clamp(65px, 10vw, 100px); display: flex; gap: var(--row-gap20); align-items: center; font-size: var(--text-18); font-weight: 600; line-height: 1.4; letter-spacing: -0.03em; color: var(--black-color03);}
    .sub_location dt span{width: clamp(26px, 3.6vw, 36px); background-color: #F4F5F9; aspect-ratio: auto 1; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
    .sub_location dd{font-size: var(--text-18); font-weight: 400; line-height: 1.4; letter-spacing: -0.03em; color: var(--black-color06);}
    .sub_location .map{border-radius: var(--radius-20); overflow: hidden; aspect-ratio: auto 2.5;}
    .sub_location .map iframe{width: 100%; height: 100%;}

    @media (max-width: 1023px) {
        .sub_location .con .info{align-items: flex-start; flex-direction: column;}
        .sub_location .info > ul{flex-direction: column; width: 100%;}
    }
    @media (max-width: 640px) {
        .sub_location dl{align-items: flex-start; flex-direction: column;}
        .sub_location .map{aspect-ratio: auto 1.5;}
    }
    @media (max-width: 320px) {
        .sub_location dl{align-items: flex-start; flex-direction: column;}
        .sub_location .map{aspect-ratio: auto 1;}
    }

/*───────────────────────────────────────────────────────────

    게시판

───────────────────────────────────────────────────────────*/
/* 인풋 */
    #wrap input:where([type="text"], [type="password"], [type="number"]){height: clamp(44px, 8vw, 60px);border-radius: var(--radius-06);background: var(--point-white);border: 1px solid var(--border-color01);padding: 0 clamp(15px, 2.4vw, 24px);font-size: var(--text-18);font-weight: 400;color: var(--black-color02);line-height: normal;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;min-width: auto;letter-spacing: -0.03em;vertical-align: middle;}
    #wrap input:where([type="text"], [type="password"], [type="number"])::placeholder{color:var(--black-color06); font-weight:300;}
    #wrap select{width: clamp(100px, 18vw, 180px);height: clamp(44px, 8vw, 60px);background: var(--point-white) url('../images/skin/sel_arw.svg') no-repeat calc(100% - clamp(15px, 2vw, 20px)) 50% / clamp(12px, 1.9vw, 14px) auto;border: 1px solid var(--border-color01);border-radius: var(--radius-06);padding: 0 clamp(35px, 5.5vw, 55px) 0 clamp(15px, 2.4vw, 24px);font-size: var(--text-18);font-weight: 400;color: var(--black-color02);line-height: normal;appearance: none;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing: -0.03em;vertical-align: middle;}
    #wrap textarea{width: 100%;font-size: var(--text-15);font-weight: 400;color: var(--black-color08);line-height: 1.73;border: 1px solid var(--border-color01);background: var(--point-white);resize: none;padding: clamp(15px, 3vw, 30px);border-radius: var(--radius-10);height: clamp(120px, 18vw, 160px);scrollbar-gutter: stable;}
    #wrap textarea::placeholder{color:var(--black-color09);}
    #wrap textarea::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);}
    #wrap textarea::-webkit-scrollbar-track {box-shadow:-10px 0 0 var(--border-color01); border-radius: 10px; margin: 10px;}
    #wrap textarea::-webkit-scrollbar-thumb {box-shadow:-10px 0 0 var(--black-color10); border-radius: 10px;}

    #wrap [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: clamp(23px, 3.1vw, 26px);height: clamp(23px, 3.1vw, 26px);border: 1px solid var(--border-color01);flex-shrink: 0;cursor: pointer;border-radius: 2px;border-radius:var(--radius-06);}
    #wrap [type="checkbox"]::before{display: inline-flex;content:'';width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1.33;background: url('../images/skin/chk_icon.svg') no-repeat center / 100% auto;filter: var(--filter-black) opacity(0.2);}
    #wrap [type="checkbox"]:checked{border-color: var(--point-color01);background: var(--point-color01);}
    #wrap [type="checkbox"]:checked:before{filter: var(--filter-white);}
    #wrap label:has([type="checkbox"]){display:inline-flex;align-items: flex-start;gap: 10px;font-size: var(--text-14);font-weight: 500;color: var(--black-color03);line-height: clamp(23px, 3.1vw, 26px);cursor: pointer;}
    #wrap label:has([type="checkbox"]) em{font-weight: 600; color: var(--point-color01); display: contents;}


/* 검색 */
    #wrap .search-wrap{margin-bottom: clamp(15px, 6vw, 60px);}
    #wrap .search-wrap fieldset{display: flex;justify-content: flex-end;gap: 10px;}
    #wrap .search-wrap .inp-box{position: relative;width: min(440px, 100%);}
    #wrap .search-wrap select{flex-shrink: 0;}
    #wrap .search-wrap input[type="text"]{width: 100%;padding-right: clamp(45px, 6.5vw, 65px);}
    #wrap .search-wrap button{position: absolute;font-size: 0;top: 0;right: clamp(15px, 2vw, 20px);width: clamp(17px, 2.9vw, 24px);height: 100%;background: url('../images/skin/search.svg') no-repeat center / 100% auto;}

    @media (max-width:360px) {
        #wrap .search-wrap fieldset{flex-wrap: wrap;}
        #wrap .search-wrap select{width: 100%; flex-shrink: unset;}
    }

/* 말머리 */
    .search-preface{position: relative;display: flex;gap: 20px clamp(25px, 5vw, 50px);margin-block: -86px clamp(20px, 4vw, 40px);box-shadow: inset 0 -1px 0 var(--border-color01);padding-right: 60%;pointer-events: none;flex-wrap: wrap;}
    .search-preface a{display: block;font-size: var(--text-20);color: var(--black-color06);padding-bottom: clamp(12px, 1.8vw, 18px);pointer-events: auto;box-shadow: inset 0 -1px 0 var(--border-color01);}
    .search-preface a.on{color: var(--black-color00);-webkit-text-stroke: var(--black-color00);-webkit-text-stroke-width: 0.3px;box-shadow: inset 0 -2px 0 var(--black-color00);}

    @media (max-width:1100px) {
        .search-preface{margin-top: 0;flex-wrap: nowrap;overflow: hidden;overflow-x: auto;width: calc(100% + 60px);margin-left: -30px;padding-inline: 30px;pointer-events: auto;}
        .search-preface a{flex-shrink:0;}
    }

/* 갤러리 */
    .link{position: absolute; inset: 0; z-index: 3;}
    .nodata{font-size: var(--text-15); color: var(--black-color06); text-align: center; padding-block: var(--row-gap30);}
    .gallery-list{display: grid; grid: auto / repeat(3, 1fr); gap:var(--row-gap50) var(--col-gap45);}
    .gallery-list > li{position: relative;}
    .gallery-list .desc{display: grid; gap: clamp(15px, 2.6vw, 26px);}
    .gallery-list .desc dt{position: relative; width: 100%; aspect-ratio: auto 1.678; overflow: hidden; border-radius: var(--radius-10); overflow: hidden;}
        .gallery-list .desc dt::before{position: absolute; content:''; inset: 0; border: 2px solid var(--point-color06); border-radius: inherit; opacity: 0; transition: all 0.4s; z-index: 2; }
    .gallery-list .desc dt img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
    .gallery-list .desc dd{font-size: var(--text-22);font-weight: 500;color: var(--black-color00);line-height: 1.36;letter-spacing: -0.03em;white-space: normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-break: break-all;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .gallery-list > li:hover .desc dt::before{opacity: 1;}
            .gallery-list > li:hover .desc dt img{scale: 1.1;}
        }

    @media (max-width:640px) {
        .gallery-list{grid: auto / repeat(1, 1fr);}
    }

/* 페이징 */
    #wrap .paging {position: relative;padding:0;width: 100%;line-height:normal;margin: clamp(30px, 8vw, 80px) 0 0;text-align: center;display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(6px, 1vw, 10px);min-height: auto;}
    #wrap .paging span {display: inline-block;}
    #wrap .paging a {display:inline-flex;align-items:center;justify-content:center;font-size: var(--text-20);font-weight: 400;color: var(--black-color06);width: auto;min-width: clamp(30px, 5vw, 40px);height: clamp(30px, 5vw, 40px);border-radius: clamp(30px, 5vw, 40px);line-height:1;text-align:center;margin: 0;padding: 0 5px;border: 0;}
    #wrap .paging :is(.on a, a.on){background: var(--black-color00);color: var(--point-white);font-weight: 500;}
    #wrap .paging .arrow a {font-size:0;background: url('../images/skin/paging_prev.svg') no-repeat center / auto clamp(9px, 1.5vw, 10px);}
    #wrap .paging .arrow:where(.first, .last) a{background-image: url('../images/skin/paging_first.svg');}
    #wrap .paging .arrow:where(.next, .last) a{scale: -1 -1;}
    #wrap .paging .arrow.prev{margin-right: clamp(0px, 0.5vw, 5px);}
    #wrap .paging .arrow.next{margin-left: clamp(0px, 0.5vw, 5px);}
    #wrap .paging .arrow a img{display: none;}



/* 일반 게시판 */
    .bbs_table{position: relative;width: 100%;border-top: 1px solid var(--black-color03);table-layout: unset;}
    .bbs_table :where(th, td){border-bottom: 1px solid var(--border-color01);text-align: center;min-width: 80px;}
    .bbs_table tr{transition: all 0.4s;}
    .bbs_table th{font-size: var(--text-18);font-weight: 500;color: var(--black-color01);padding: clamp(17px, 2.4vw, 24px) 5px;}
    .bbs_table td{font-size: var(--text-18);color: var(--black-color05);padding: clamp(17px, 2.5vw, 25px) 5px;}
    .bbs_table td.left{text-align: left;padding-inline: 0;}
    .bbs_table td.no{color: var(--black-color08);}
    .bbs_table td a{color: var(--black-color03);white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;width: fit-content;}
    .bbs_table td.secret a{background: url('../images/skin/secret.svg') no-repeat right center / clamp(12px, 2.1vw, 16px) auto;padding-right: clamp(18px, 2.9vw, 24px);}
    .bbs_table td i{color: var(--point-color01);}
    .bbs_table tr:has(i){background: var(--point-color08);}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .bbs_table tbody tr:hover{background: var(--point-color08);}
        }

    @media (max-width:640px) {
        .bbs_table{display: block;}
        .bbs_table :where(tbody, tr, th, td){display: block; width: 100%;}
        .bbs_table thead{display: none;}
        .bbs_table tr{display: flex;gap: 10px;flex-wrap: wrap;padding: 18px 15px;border-bottom: 1px solid var(--border-color01);}
        .bbs_table td{border:0;text-align: left;padding: 0;}
        .bbs_table td.no:not(:has(i)){display: none;}
    }

/* 버튼 */
    #wrap .btn_wrap{position: relative;inset: auto;margin:0;padding:0;display: flex;justify-content: center;flex-wrap: wrap;gap: 15px; margin-top: var(--row-gap60);}
        #wrap .btn_wrap.ta_right{justify-content: flex-end;}
    #wrap .btn_wrap :where(button, a){display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-20);font-weight: 500;color: var(--black-color03);line-height: 1.2;width: auto;min-width: clamp(120px, 21vw, 200px);height: clamp(46px, 8vw, 70px);border: 1px solid var(--black-color03);border-radius: var(--radius-04);background: var(--point-white);margin: 0;border-radius:var(--radius-10)}
    #wrap .btn_wrap :where(button, a).btn_point{background: var(--point-color01);border-color: var(--point-color01);color: var(--point-white);}
    #wrap .btn_wrap.sm{margin-top: var(--row-gap20);gap: var(--row-gap10);}
    #wrap .btn_wrap.sm :where(button, a){min-width: auto;height: auto;font-size: var(--text-14);padding: clamp(5px, 1.1vw, 6px) clamp(10px, 1.5vw, 15px);}

    @media (min-width:861px) {
        #wrap:has(.paging) .btn_wrap.ta_right{margin-top: -55px; pointer-events: none;}
        #wrap:has(.paging) .btn_wrap.ta_right :where(button, a){pointer-events: auto;}
    }

/* 작성하기 */
    #wrap .bbs_write{position: relative; border-top: 1px solid var(--black-color00); border-bottom: 1px solid var(--border-color01); display: block; width: 100%; padding-block: var(--row-gap40);}
    #wrap .bbs_write :where(tbody, tr, th, td){display: block; width: 100%; padding:0; margin:0; border:0; background: none;}
    #wrap .bbs_write tbody{display: flex;flex-wrap: wrap;gap: clamp(15px, 2vw, 20px) clamp(40px, 5vw, 96px);}
    #wrap .bbs_write tr{display: flex;align-items: baseline;width: calc(100% / 2 - clamp(40px, 5vw, 96px) / 2); gap: var(--row-gap10) 0;}
    #wrap .bbs_write th{width: clamp(100px, 16.2vw, 162px);flex-shrink: 0;font-size: var(--text-20);font-weight: 500;color: var(--black-color03);padding-right: 15px;letter-spacing: -0.03em;}
    #wrap .bbs_write th label{font-size: inherit; font-weight: inherit; color: inherit;}
    #wrap .bbs_write th em{font-weight: inherit; color: var(--point-color01);}
    #wrap .bbs_write td{width: 100%;}
    #wrap .bbs_write select{width: 100%;}
    #wrap .bbs_write label:has([type="checkbox"]){font-size: var(--text-16);}
    #wrap .bbs_write input:where([type="text"], [type="password"], [type="number"]){width: 100%;font-size: var(--text-16);margin: 0;border-radius:var(--radius-10);}
    #wrap .bbs_write input:where([type="text"], [type="password"], [type="number"])::placeholder{color: var(--border-color02);}
    #wrap .bbs_write textarea{height: clamp(150px, 25vw, 250px);padding:clamp(15px, 2.4vw, 24px);font-size: var(--text-16);}
    #wrap .bbs_write tr:has(textarea){width: 100%;}
    #wrap .bbs_write tr:has(textarea) td{display: flex;flex-direction: column;gap: var(--row-gap15);align-items: flex-start;}
    #wrap .bbs_write td:has(.controller){display: flex;gap: var(--row-gap10);}
    #wrap .bbs_write .controller{position: relative;display: flex;padding: var(--row-gap10);box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-06);width: clamp(200px, 24.6vw, 241px);gap: var(--row-gap10);flex-shrink: 0;border-radius:var(--radius-10)}
    #wrap .bbs_write #captcha_box{width: 100%;height: clamp(34px, 4.5vw, 40px);margin: 0;overflow: hidden;border: 1px solid var(--border-color01);border-radius: inherit;}
    #wrap .bbs_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height: none;margin: -1px 0 0 -1px;object-fit: cover;}
    #wrap .bbs_write #refreshCode{position: relative;width: clamp(36px, 4.7vw, 42px);box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: inherit;background: url('../images/skin/refreshCode.svg') no-repeat center / clamp(15px, 2.3vw, 18px);font-size: 0;flex-shrink: 0;cursor: pointer;border-radius:var(--radius-10)}
    #wrap .bbs_write #cap{position: relative;}
    #wrap .bbs_write tr:has([type="file"]){margin-right: 1px;align-items: center;}
    #wrap .bbs_write tr:has([type="file"]) th{translate: 0;}
    #wrap .bbs_write tr:has([type="file"]) td{display: flex;gap: var(--row-gap10);}
    #wrap .bbs_write input[type="file"]{display: none;}
    #wrap .bbs_write span[id*="file"]{display: flex;align-items: center;gap: 10px;height: clamp(44px, 8vw, 60px);border-radius: var(--radius-06);background: var(--point-white);border: 1px solid var(--border-color01);padding: 0 clamp(15px, 2.4vw, 24px);font-size: var(--text-16);font-weight: 400;color: var(--black-color02);line-height: normal;min-width: auto;letter-spacing: -0.03em;vertical-align: middle;width: 100%;border-radius:var(--radius-10);}
    #wrap .bbs_write span[id*="file"] a{color: var(--point-color06) !important;white-space: normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;border-radius:var(--radius-10)}
    #wrap .bbs_write span[id*="file"] .file_no{flex-shrink:0;}
    #wrap .bbs_write td [for="file"]{display: flex;align-items: center;justify-content: center;gap: 10px;height: clamp(44px, 8vw, 60px);border-radius: var(--radius-06);background: var(--border-color03);border: 1px solid var(--border-color03);padding: 0 clamp(15px, 2.4vw, 24px);font-size: var(--text-16);font-weight: 400;color: var(--black-color02);line-height: normal;letter-spacing: -0.03em;vertical-align: middle;flex-shrink: 0;cursor: pointer;border-radius:var(--radius-10);}
    #wrap .policy_box{margin-top: var(--row-gap40);display: grid;gap: var(--row-gap20);}
    #wrap .policy_box label:has([type="checkbox"]){font-size: var(--text-18);}

        @media (min-width:480px) {
            #wrap .bbs_write th{translate: 0 4px;}
            #wrap .bbs_write tr:has(textarea) th{align-self: flex-start;translate: 0 15px;}
        }

    @media (max-width:1300px) {
        #wrap .bbs_write td:has(.controller){display: flex; flex-wrap: wrap;}
    }
    @media (max-width:1023px) {
        #wrap .bbs_write tr{width: 100%;}
    }
    @media (max-width:479px) {
        #wrap .bbs_write tr{flex-wrap: wrap;}
        #wrap .bbs_write th{width: 100%; flex-shrink: unset;}
    }

/* 상세 */
    #wrap .bbs_view{position: relative;padding: 0 0 var(--row-gap40);border-bottom: 1px solid var(--border-color01);}
    #wrap .bbs_view .view_tit{position: relative;padding: clamp(25px, 4vw, 40px) 0;border-top: 1px solid var(--black-color03);border-bottom: 1px solid var(--border-color01);background: none;width: 100%;margin: 0;text-align: inherit;box-sizing: border-box;font-size: inherit;display: grid;gap: clamp(15px, 2.5vw, 25px);}
        #wrap .bbs_view .view_tit:after{display: none;}
    #wrap .bbs_view .view_tit .icon{display: flex;align-items: center;justify-content: center;width: fit-content;font-size: var(--text-16);font-weight: 400;color: var(--point-white);background: var(--point-color01);padding: clamp(4px, 0.7vw, 5px) clamp(12px, 1.4vw, 14px) clamp(3px, 0.6vw, 4px);line-height: 1.45;border-radius: 50px;}
    #wrap .bbs_view .view_tit h3{font-size: var(--text-32);font-weight: 500;color: var(--black-color01);line-height: 1.45;width: 100%;text-align: inherit;margin: 0;padding: 0;letter-spacing: -0.03em;}
    #wrap .bbs_view .view_tit h3 em{display: block; color: var(--point-color01); font-weight: inherit;}
    #wrap .bbs_view .view_tit h6{font-size: inherit; font-weight: 400; color: var(--black-color05); line-height: 1.6;}
    #wrap .bbs_view .view_tit p{font-size: var(--text-18);font-weight: 400;color: var(--black-color08);text-align: inherit;line-height: 1.5;margin: 0;padding: 0;width: 100%;}
    #wrap .bbs_view .view_tit p span{display: flex; align-items: baseline; gap:8px 16px;}
    #wrap .bbs_view .view_tit p span em{font-weight: 500; color: var(--black-color06); flex-shrink: 0; max-width: 100px;}
    #wrap .bbs_view .view_cont{padding: clamp(30px, 6vw, 60px) 0;font-size: var(--text-19);font-weight: 400;color: var(--black-color03);line-height: 1.74;width: 100%;margin: 0;text-align: inherit;word-break: keep-all;border: 0;box-sizing: border-box;letter-spacing: -0.03em;}
    #wrap .bbs_view .view_cont img{margin:0;}

    #wrap .extra_editor_wrap{display: flex;align-items: center;gap: clamp(20px, 3vw, 30px);width: 100%;margin: 0;padding: clamp(15px, 3vw, 30px) 0;border: 0;background: var(--gray-bg02);border-radius: var(--radius-10);box-sizing: border-box;}
    #wrap .extra_editor_wrap h4{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;width: clamp(100px, 16vw, 160px);flex-shrink: 0;background: none;padding: 0 10px;font-size: var(--text-18);font-weight: 500;color: var(--black-color05);}
    #wrap .extra_editor_wrap h4:before{position: absolute;content:'';width: 1px;height: clamp(10px, 1.4vw, 12px);background: var(--border-color01);top:50%;right:0;translate: 0 -50%;}
    #wrap .extra_cont{padding: 0;font-size: var(--text-18);color: var(--black-color08);display: grid;gap: 8px;width: 100%;}
    #wrap .extra_cont span{font-size: inherit;font-weight: inherit;color: inherit;margin: 0;}
    #wrap .extra_cont a{color: inherit !important;}

    /* 비밀번호 입력 */
    #wrap .sub_pw_input {max-width: none;margin: 0;border: 0;outline: 0;}
    #wrap .sub_pw_input input {width: min(400px, 100%);margin-inline: auto;display: block; text-align: center;}