/**--------------------------- 이너 사이즈 **/
.inner { margin: 0 auto;position: relative; width:100%; max-width: var(--inner);} 

@media screen and (max-width:1410px){
 .inner { padding:0 16px; } 
 }


 /**--------------------------- 레이아웃 **/
.content {padding: 5rem 0;}



/**--------------------------- 서브 레이아웃 **/
.sub_visual {display: flex; align-items: center; justify-content: center; height:30rem; background-size: cover;color: #FFF; text-align: center;}
.sub_visual.company {background-image: url("../../images/sub/bg_company.png");}
.sub_visual.supplier {background-image: url("../../images/sub/bg_supplier.png");}
.sub_visual.notice {background-image: url("../../images/sub/bg_community.png");}
.sub_visual.support {background-image: url("../../images/sub/bg_support.png");}

.sub_visual h2 {padding-top:calc(6.25rem / 2); overflow: hidden; background: linear-gradient(to right, #fff, #fff 50%, rgba(255,255,255,.5) 50%); background-position: 0 0; background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; font-size: 3.125rem; font-weight: 700; line-height: normal; text-align: center; text-transform: capitalize; animation: slideBackground 0.8s linear; -webkit-text-fill-color: transparent; } 

@keyframes slideBackground { 
 0% { background-position: 100% 0; } 
 100% { background-position: 0 0; } 
}


@media screen and (max-width:640px){
  .sub_visual {height:24rem; }
}

.sub_visual_txt {background: url("../../images/sub/sub_symbol.svg") no-repeat right 10% top -100px; }
.sub_visual_txt ul.bread_crumbs {display: flex; gap:0.625rem; align-items: center; height:4.75rem;}
.sub_visual_txt ul.bread_crumbs li { font-size: 0.875rem; font-weight: 600; color: #777;}
.sub_visual_txt ul.bread_crumbs li::after { padding-left:0.625rem; content: "\003E";}
.sub_visual_txt ul.bread_crumbs li:last-child::after {display: none;}

.sub_visual_txt .tit_box {margin-top:54px; text-align: center;}
.sub_visual_txt h3 {font-family:var(--prostoOne); font-size: 4.375rem;color: #0F0F0F; text-align: center; text-transform: capitalize;}
.sub_visual_txt p {margin-top:1.25rem; font-size: 2.125rem; line-height: 130%; }

@media screen and (max-width:640px) { 
.sub_visual_txt h3 {font-size: 3.5rem;}
}


/** 투댑쓰 메뉴 (공급업체만 해당) **/
.sub_nav { padding:3.75rem 0; position: relative;} 
.sub_nav button { display: none; align-items: center; justify-content: space-between; padding:0 1.25rem; border: 1px solid #D9D4D3; width:100%; height:42px; background-color: #fff; font-weight: 600; color: var(--gray-900, #1A1A1A); text-align: left; letter-spacing: -0.64px; border-radius: 10px; } 
.sub_nav ul { display: flex; gap:1.25rem; align-items: center; justify-content: center; flex-wrap: wrap;  overflow: hidden; } 
.sub_nav ul li {width: calc((100% - 6.25rem) / 5); height:4.125rem; }
.sub_nav ul li:first-child {width:100%;} 
.sub_nav ul li a { display: flex; align-items: center; justify-content: center; overflow: hidden; width:100%; height:100%; background-color: #BBB; font-size: 1.00rem; font-weight: 700; color: #FFF; text-align: center; letter-spacing: -0.9px; border-radius: 90px;} 
.sub_nav ul li.active a { background: var(--primary); color:#fff; } 



@media screen and (max-width:768px) { 
 .sub_nav button { display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; width: 100%; height: 60px; background-color: var(--primary); font-size: 1.5rem; font-weight: bold; font-weight: 600; color: #fff; text-align: center; letter-spacing: -0.88px; border-radius: 2.375rem; } 
 .sub_nav button::after { position: absolute; top:50%; right: 2.5rem; font-size:14px; color:#fff; color:#fff; letter-spacing: -0.88px; content: '▼'; pointer-events: none; cursor: pointer; transform: translateY(-50%); border-radius: 2.375rem; } 
 .sub_nav button.active + ul {display: flex; }
 .sub_nav ul { display: none; gap:0; flex-direction: column; border:1px solid #ddd; position: absolute; top:120px; left:0; z-index: 98; width:100%; background-color: #fff; border-radius: 20px;} 
 .sub_nav ul li { border-bottom:1px solid #ddd;width:100%; height:auto;} 
 .sub_nav ul li:last-child {border-bottom:0 none;}
 .sub_nav ul li a {padding:16px; background-color: transparent; background-color: #fafafa; font-size: 1.25rem; font-weight: 400; color:#000; border-radius: 0;}
}

/** 공급업체 검색 **/
.search_box {display: flex; justify-content: flex-end;}
.search_box form { padding:0.25rem 3.125rem 0.25rem 1.875rem; border:1px solid #000;position: relative; width:410px; height:42px; border-radius: 60px;}
.search_box form input[type="text"] { border:0 none; outline: none;width:100%; height:100%;}
.search_box form button {display: flex; align-items: center; justify-content: center; position: absolute; top:50%; right:4px; width:36px; height:36px; background-color: #000; font-size:0; line-height: 0; transform: translateY(-50%); border-radius: 100%;}
.search_box form button::after {content: url("../../images/sub/ico_search.svg");}


@media screen and (max-width:640px) { 
.search_box form { width:100%;}
}