/*============================================================================== 서브공통사용 ================================================================================*/ .sub_title {text-align: center; color: #212529; margin:2em 0 1em 0; line-height: 1.2; font-size: var(--font-size-midTitle); font-weight: 600;} .pics_wrap {text-align: center; overflow: hidden; position: relative;} @media screen and (max-width:980px){ .sub_title {margin: 1.5em 0 1em 0} } @media screen and (max-width:768px){ .pics_wrap img {width: auto; max-width: none; height: 250px; position: relative; transform: translateX(-50%); left: 50%;} } /*============================================================================== 서브비주얼 ================================================================================*/ .sub_visual {width: 100%; height: 450px; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover;} .sub_visual#sub01 {background-image: url(/assets/img/sub/sub_visual01.jpg);} .sub_visual#sub02 {background-image: url(/assets/img/sub/sub_visual02.jpg);} .sub_visual#sub03 {background-image: url(/assets/img/sub/sub_visual03.jpg);} .sub_visual#sub04 {background-image: url(/assets/img/sub/sub_visual04.jpg);} .sub_visual#sub05 {background-image: url(/assets/img/sub/sub_visual05.jpg);} .sub_visual#sub06 {background-image: url(/assets/img/sub/sub_visual06.jpg);} #subVisual_text {width: 100%; box-sizing: border-box; text-align: center; padding-top: 11em;} #subVisual_text p {font-size: 16px; color: #fff; opacity: .5; text-align: center;} #subVisual_text h2 {color: #fff; text-align: center; font-size: var(--font-size-bigTitle); font-weight: 600; margin: 20px 0;} #subVisual_text ul {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px;} #subVisual_text ul li {padding: 0 15px; font-size: 16px; color: #fff; position: relative;} #subVisual_text ul li img {width: 21px !important; height: 21px !important; vertical-align: -4px;} #subVisual_text ul li:first-child::after {display: none;} #subVisual_text ul li::after {position: absolute; top: 0; left: -5px; width: 12px; height: 20px; content: ''; background:url("/assets/img/icon/slider-arrow-w.png") no-repeat center; background-size: 100%; transform: rotate(-180deg)} #snb {position: relative; width: 100%; margin-top: -35px; } #snb .inner {padding-left: 0 !important; padding-right: 0 !important;} #snb ul {width: 100%; height: 70px; display: flex; background: var(--pointColor);border-radius: 10px; } #snb ul li {position: relative; font-size: 17px; text-align: center; box-sizing: border-box;} #snb ul li::after {position: absolute; top: 50%; margin-top: -10px; left: 0; width: 2px; height: 20px; background: rgba(255,255,255,0.2); content: '';} #snb ul li:first-of-type::after {display: none;} #snb ul li a {color: #fff; opacity: .5; display: block; line-height: 70px;} #snb ul li.on {} #snb ul li.on a {opacity: 1; font-weight: 500;} #snb .location {width: 100%; background: var(--pointColor); display: none;} #snb .location span {position: relative; font-size: 15px; color: #fff; padding: 17px 16px; box-sizing: border-box; display: block; text-align: left;} #snb .location span::after {content: '+'; float: right; font-size: 32px; font-weight: 300; margin-top: 2px; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; color: #fff;} #snb .location span.on::after {-webkit-transform: rotate(45deg) scale(1.08); transform: rotate(45deg) scale(1.08);} #snb ul li .subList { display: none; } @media screen and (max-width:980px){ .sub_visual {height: 390px;} #subVisual_text ul {margin-top: 15px;} #subVisual_text ul li {font-size: 15px; padding: 0 20px;} #subVisual_text ul li::after {width: 13px; height: 13px; top: 4px;} #snb {z-index: 9; margin-top: 0;} #snb .location {display: block;} #snb ul {background: #202020; position: absolute; top: 48px; left: 0; width: 100%; display: none; height: auto; border-top-left-radius: 0; border-top-right-radius: 0;} #snb ul li {width: 100% !important; height: auto; border-top: 1px solid rgba(255,255,255,0.2);} #snb ul li::after {display: none;} #snb ul li a {line-height: 1; padding: 15px 16px; box-sizing: border-box; text-align: left; color: #fff; display: block; font-size: 14px;} #snb ul li .subList { padding: 0; margin: 0 0 15px 16px; /* 들여쓰기 */ list-style: none; position: relative; top: 0; } #snb ul li .subList li { border: none; width: 100% !important; height: auto; } #snb ul li .subList li a { display: block; padding: 5px 0 5px 16px; font-size: 13px; color: #ccc; position: relative; } #snb ul li .subList li a:hover { color: var(--pointColor); } } @media screen and (max-width:768px) { .sub_visual {height: 300px;} #subVisual_text {padding-top: 8em;} #subVisual_text p {font-size: 14px;} #subVisual_text ul li {font-size: 13px; padding: 0 10px;} #subVisual_text ul li img {width: 15px;} } /*============================================================================== 콘텐츠 ================================================================================*/ /*회사소개*/ .intro_text {padding-top: 100px;} .intro_text h4 {text-align: center; font-weight: 600; word-break: keep-all;} .intro_text h6 {text-align: center; font-weight: 600; color: #212121; margin-bottom: 20px; word-break: keep-all;} .intro_text p {font-size: var(--font-size-mid); text-align: center; line-height: 1.6em;; color: #212121; word-break: keep-all;} .intro_text #family_diagram {text-align: center; margin: 40px 0} #intro_sec02 {background: url("/assets/img/sub/sub01_01-pic1.jpg") no-repeat center; background-size: cover;} .service_banner_list {display: flex; flex-wrap: wrap; justify-content: space-between; border-radius: 20px; border: 1px solid rgba(255,255,255,0.5); overflow: hidden;} .service_banner_list .serviceBox {width: 25%; height: 450px; overflow: hidden; position: relative; box-sizing: border-box; transition: 0.5s ease; cursor: pointer; background-color: rgba(0,0,0,0.3);} .service_banner_list .serviceBox + .serviceBox {border-left: 1px solid rgba(255,255,255,0.5);} /*.service_banner_list .serviceBox::after {position: absolute; top: 50%; left: 0; margin-top: -180px; height: 360px; width: 1px; background: #fff; content: '';} .service_banner_list .serviceBox:first-of-type::after {display: none;}*/ .service_banner_list .serviceBox .text {width: 100%; height: 100%; box-sizing: border-box; /*display: table; */} .service_banner_list .serviceBox .text dl {width: 100%; height: 100%; box-sizing: border-box; padding: 50px 20px;} .service_banner_list .serviceBox .text dl dt {position: relative; font-size: var(--font-size-extra); color: #fff; font-weight: 500; margin-bottom: 20px; text-align: center; padding-top: 110px; transition: 0.5s ease;} .service_banner_list .serviceBox .text dl dt::before {display: block; width: 70px; height: 70px; background-position: center; background-repeat: no-repeat; background-size: 100%; content: ''; margin: 0 auto 25px auto;} .service_banner_list .serviceBox .text dl dd {font-size: var(--font-size-nomal); color: #fff; line-height: 1.7; text-align: center; transform: translateY(100px); opacity: 0; transition: 0.5s ease; word-break: keep-all;} .service_banner_list .serviceBox .text dl dd::before {display: block; margin: 5px auto 15px auto; width:30px; height: 2px; background: #fff; content: ''; opacity: 0.5;} .service_banner_list .serviceBox.part1 .text dl dt::before {background-image:url("/assets/img/sub/intro_icon01.png")} .service_banner_list .serviceBox.part2 .text dl dt::before {background-image:url("/assets/img/sub/intro_icon02.png")} .service_banner_list .serviceBox.part3 .text dl dt::before {background-image:url("/assets/img/sub/intro_icon03.png")} .service_banner_list .serviceBox.part4 .text dl dt::before {background-image:url("/assets/img/sub/intro_icon04.png")} .service_banner_list .serviceBox:hover {background-color: var(--pointColor);} .service_banner_list .serviceBox:hover .text dl dt {padding-top: 60px} .service_banner_list .serviceBox:hover .text dl dd {transform:translateY(0); opacity: 1;} .service_banner_list .serviceBox.part2:hover .text dl dt {padding-top: 10px} .service_banner_list .serviceBox.part4:hover .text dl dt {padding-top: 30px} @media all and (max-width:1200px ){ .col-devided#goal .text {padding-left: 50px;} } @media all and (max-width:980px ){ .intro_text {padding-top: 60px;} .intro_wrap {margin: 45px 0;} .col-devided {padding: 40px 0;} .col-devided .pics {width: 100%; } .col-devided .text {position: relative; top: auto; bottom: auto; left: auto; right: auto; padding: 30px; width: 95%; margin: -50px auto 0 auto; box-shadow: 0 10px 5px rgba(0,0,0,0.1);} .col-devided .text h6 {margin-bottom: 10px;} .col-devided#goal .text {padding-left:30px} .service_banner_list .serviceBox {height: 400px;} .service_banner_list .serviceBox .text dl dt {font-size: 19px;} .service_banner_list .serviceBox .text dl dd {font-size: 16px;} } @media all and (max-width:768px ){ .service_banner_list .serviceBox {width: 100%; height: auto; } .service_banner_list .serviceBox + .serviceBox {border-top: 1px solid rgba(255,255,255,0.5); border-left: 0;} .service_banner_list .serviceBox::after {width: 90%; height: 1px; top: auto; margin-top: 0; bottom: 0; left: 50%; margin-left: -45%; opacity: 0.5} .service_banner_list .serviceBox .text dl {padding: 40px 20px 30px 20px;} .service_banner_list .serviceBox .text dl dt {font-size: 18px; margin-bottom: 12px; padding-top: 0;} .service_banner_list .serviceBox .text dl dt::before {width:50px; height: 50px; margin-bottom: 12px;} .service_banner_list .serviceBox:first-of-type::after {display: block;} .service_banner_list .serviceBox .text dl dd {font-size: 14px; transform: translateY(0); opacity: 1;} .service_banner_list .serviceBox:hover .text dl dt {padding-top: 5px} .col-devided {padding: 30px 0;} .col-devided .pics {height: 245px;} .col-devided .text {padding: 20px;} } /* CEO 인사말 */ #greeting {} #greeting .flexList {align-items: flex-start; margin-bottom: 40px;} #greeting .flexList > .box {box-sizing: border-box;} #greeting .flexList .pics {overflow: hidden; border-radius: 20px;} #greeting h5 {color: var(--pointColor); font-weight: 700; margin-top: 0;} #greeting h6 {font-weight: 700; color: #212121;} #greeting p {font-size: var(--font-size-mid); color: #212121; line-height: 1.7; margin-top: 20px; word-break: keep-all;} #sub_main_contents #ctt_con {color: #212121; line-height: 1.7; word-break: keep-all;} #sub_main_contents #ctt_con .ctt-text, #sub_main_contents #ctt_con .ctt-note, #sub_main_contents #ctt_con .ctt-emphasis {font-size: var(--font-size-mid); margin-top: 20px;} #sub_main_contents #ctt_con .ctt-body > :first-child, #sub_main_contents #ctt_con .ctt-intro > :first-child, #sub_main_contents #ctt_con .ctt-section__content > :first-child, #sub_main_contents #ctt_con .ctt-article__content > :first-child {margin-top: 0;} #sub_main_contents #ctt_con .ctt-lead .ctt-text {color: #424242;} #sub_main_contents #ctt_con .ctt-law-title {margin: 36px 0 16px; font-size: var(--font-size-big); font-weight: 700; color: #212121; line-height: 1.45;} #sub_main_contents #ctt_con .ctt-clauses .ctt-text {padding-left: 12px; border-left: 3px solid #e4e4e4;} #sub_main_contents #ctt_con .ctt-emphasis {font-weight: 700;} #sub_main_contents #ctt_con .ctt-emphasis--penalty {color: #ff0000;} #sub_main_contents #ctt_con .ctt-intro {margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid #e4e4e4;} #sub_main_contents #ctt_con .ctt-section {margin-top: 48px;} #sub_main_contents #ctt_con .ctt-section__title {margin: 0 0 20px; font-size: var(--font-size-big); font-weight: 700; color: #212121; line-height: 1.45;} #sub_main_contents #ctt_con .ctt-section__no {color: var(--pointColor, #0066cc);} #sub_main_contents #ctt_con .ctt-subsection {margin-top: 28px;} #sub_main_contents #ctt_con .ctt-subsection__title {margin: 0 0 12px; font-size: var(--font-size-mid); font-weight: 700; color: #212121; line-height: 1.5;} #sub_main_contents #ctt_con .ctt-list {margin: 16px 0 0; padding: 0; list-style: none;} #sub_main_contents #ctt_con .ctt-list__item {position: relative; margin-top: 10px; padding-left: 16px; font-size: var(--font-size-mid); color: #212121; line-height: 1.7;} #sub_main_contents #ctt_con .ctt-list__item:first-child {margin-top: 0;} #sub_main_contents #ctt_con .ctt-list__item::before {content: ""; position: absolute; top: 0.72em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--pointColor, #0066cc);} #sub_main_contents #ctt_con .ctt-list--marked .ctt-list__item {padding-left: 0;} #sub_main_contents #ctt_con .ctt-list--marked .ctt-list__item::before {display: none;} #sub_main_contents #ctt_con .ctt-contact, #sub_main_contents #ctt_con .ctt-dates {margin-top: 24px; padding: 20px 24px; background: #f8f8f8; border-radius: 8px;} #sub_main_contents #ctt_con .ctt-contact__row, #sub_main_contents #ctt_con .ctt-dates__row {display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: var(--font-size-mid); line-height: 1.6;} #sub_main_contents #ctt_con .ctt-contact__row:first-child, #sub_main_contents #ctt_con .ctt-dates__row:first-child {margin-top: 0;} #sub_main_contents #ctt_con .ctt-contact dt, #sub_main_contents #ctt_con .ctt-dates dt {flex: 0 0 160px; max-width: 100%; font-weight: 700; color: #212121;} #sub_main_contents #ctt_con .ctt-contact dd, #sub_main_contents #ctt_con .ctt-dates dd {flex: 1 1 0; min-width: 0; margin: 0; color: #424242;} #sub_main_contents #ctt_con .ctt-links {margin: 20px 0 0; padding: 0; list-style: none;} #sub_main_contents #ctt_con .ctt-links__item {margin-top: 10px; font-size: var(--font-size-mid); line-height: 1.7;} #sub_main_contents #ctt_con .ctt-links__item:first-child {margin-top: 0;} #sub_main_contents #ctt_con .ctt-links__label {font-weight: 600;} #sub_main_contents #ctt_con .ctt-links a {color: var(--pointColor, #0066cc); text-decoration: underline;} #sub_main_contents #ctt_con .ctt-note {color: #616161; font-size: var(--font-size-nomal);} #sub_main_contents #ctt_con .ctt-chapter {margin-top: 56px; padding-top: 8px;} #sub_main_contents #ctt_con .ctt-chapter:first-child {margin-top: 0;} #sub_main_contents #ctt_con .ctt-chapter__title {margin: 0 0 28px; padding-bottom: 12px; border-bottom: 2px solid #212121; font-size: var(--font-size-smTitle); font-weight: 700; color: #212121; line-height: 1.4;} #sub_main_contents #ctt_con .ctt-article {margin-top: 36px;} #sub_main_contents #ctt_con .ctt-article:first-of-type {margin-top: 0;} #sub_main_contents #ctt_con .ctt-article__title {margin: 0 0 16px; font-size: var(--font-size-big); font-weight: 700; color: #212121; line-height: 1.45;} #sub_main_contents #ctt_con .ctt-definitions {margin: 16px 0 0;} #sub_main_contents #ctt_con .ctt-definitions__row {display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font-size: var(--font-size-mid); line-height: 1.7;} #sub_main_contents #ctt_con .ctt-definitions__row:first-child {margin-top: 0;} #sub_main_contents #ctt_con .ctt-definitions__term {flex: 0 0 auto; margin: 0; font-weight: 700; color: #212121;} #sub_main_contents #ctt_con .ctt-definitions__term::after {content: " :";} #sub_main_contents #ctt_con .ctt-definitions__desc {flex: 1 1 0; min-width: 0; margin: 0; color: #424242;} #sub_main_contents #ctt_con .ctt-block {margin-top: 20px;} #sub_main_contents #ctt_con .ctt-appendix {margin-top: 56px; padding-top: 32px; border-top: 1px solid #e4e4e4;} #sub_main_contents #ctt_con .ctt-appendix__title {margin: 0 0 16px; font-size: var(--font-size-big); font-weight: 700; color: #212121; line-height: 1.45;} #sub_main_contents > .section.pt0 {padding-bottom: 100px;} #greeting p.ceo_name {font-size: var(--font-size-big); text-align: right; margin-top: 80px;} #greeting p.ceo_name img {padding-top: 10px;} #greeting .text {padding-left: 50px;} @media all and (max-width:1100px) { #greeting .flexList {display: block;} #greeting .flexList .box {width: 100%} #greeting .flexList .box.pics {text-align: center; position: relative; padding-bottom: 60%; overflow: hidden;} #greeting .flexList .box.pics img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} #greeting .flexList .box + .box {margin-top: 40px;} #greeting .text {padding-left: 0} /*#greeting .text {padding-left: 10px;}*/ } @media all and (max-width:980px) { #greeting .flexList .box + .box {margin-top: 40px;} } @media all and (max-width:768px) { #greeting p.ceo_name {font-size: 15px;} #greeting p.ceo_name img {width:110px;} } /* 연혁 */ .history_list__wrap {align-items: flex-start; display: flex; flex-wrap: wrap;} .history_list__wrap.mid {align-items:center;} .history_list__wrap .section_title h5 {font-weight: 300;} .history_list__wrap .section_title h5 span {color: #0f4faf} .history_list__wrap .historyBox { width: 50%;padding-left: 50px;} .historyBox {position: relative; box-sizing: border-box;} .historyBox.pics {padding-left: 0; position: sticky; top: 0; left: 0; z-index: 1; font-weight: 700; color:#212121;} .historyBox.pics p.years {font-size:70px; font-weight: 900 !important; letter-spacing: -2px; opacity: 0.1; line-height: 1; margin-bottom: -10px;} .historyBox.pics img {width: 100%;} .historyBox dl {position: relative; box-sizing: border-box; padding-left: 75px;} .historyBox dl dt {position: absolute; top: 0; left: 0; font-size: var(--font-size-big); font-weight: 800; color: var(--pointColor2); margin-right: 20px; width: 55px; line-height: 1; margin-top: 3px;} .historyBox dl dd {} .historyBox dl:first-of-type {margin-top:55px;} .historyBox dl + dl {margin-top: 15px;} .historyBox dl dd ul {} .historyBox dl dd ul li {position: relative; font-size: var(--font-size-mid); color: #3a3a3a; line-height: 1.45; padding-left:30px;} .historyBox dl dd ul li + li {margin-top: 10px;} .historyBox dl dd ul li span {position: absolute; top: 0; left: 0; font-weight: 800; display: inline-block;} .historyBox dl dd ul li span.space {letter-spacing: 0.2rem} @media screen and (max-width:768px) { .history_list__wrap .historyBox {width:100%; padding-left: 10px; padding-right:10px} .historyBox.pics {position:relative; padding:0} .historyBox.pics .wrap {height: 300px; overflow: hidden;} .historyBox.pics .wrap img {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover; height: 100%;} .historyBox.pics h3 {font-size: 40px !important;} .historyBox dl {display:block;} .historyBox dl:first-of-type {margin-top: 30px;} .historyBox dl + dl {padding-top: 15px; border-top: 1px dotted #e4e4e4} .historyBox dl dt {margin-right:0; margin-bottom:10px; line-height: 1;} .historyBox dl dd ul li {padding-left:30px;} .historyBox dl dd ul li + li {margin-top: 5px;} /*.historyBox dl dd ul li span {padding-left:15px;} .historyBox dl dd ul li span:before { display: block; content: ""; width: 8px; height: 8px; background: #fff; border: 2px solid #01458c; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; left: 0; bottom: 0; margin: auto;}*/ .historyBox.pics p.years {font-size: var(--font-size-bigTitle); text-align: center;} } /*조직도*/ #org {} #org .pics_wrap {padding: 80px 15px; box-sizing: border-box; background-color: #fafafa; border-radius: 20px;} @media all and (max-width:980px) { #org .pics_wrap {padding: 40px 15px;} #org .pics_wrap img {height: auto; width: 100%; left: auto; transform: none;} } /*오시는길*/ #contact_us {margin-bottom: 180px;} #contact_us #maps {width: 100%; height: 500px;} #contact_us #address {width: 700px; box-sizing: border-box; padding: 50px; background: var(--pointColor2); position: relative; z-index: 1; float: right; margin-top: -100px; margin-right: -50px; border-radius: 30px 10px 30px 10px} #contact_us #address h5 {color:#fff; font-weight: 700; margin-bottom: 30px;} #contact_us #address dl {margin-top: 15px;} #contact_us #address dl dt, #contact_us #address dl dd {font-size:var(--font-size-mid); color: #fff;} #contact_us #address dl dt {font-weight: 600;} #contact_us #address dl dd {opacity: 0.8} #contact_us #address p {font-size:var(--font-size-mid); color: #fff; margin-top: 30px;} #contact_us #address p span {background-position: top 3px left; background-size: 20px; background-repeat: no-repeat; box-sizing: border-box; padding-left: 27px; padding-top: 1px; padding-bottom: 1px;} #contact_us #address p span + span {margin-left: 30px;} #contact_us #address p span.mail {background-image: url("/assets/img/icon/email.png");} #contact_us #address p span.call {background-image: url("/assets/img/icon/call.png");} #contact_us #address p span.fax {background-image: url("/assets/img/icon/fax.png");} @media screen and (max-width: 980px) { #contact_us .inner {padding-left: 0; padding-right: 0;} #contact_us #address dl {margin-top: 10px;} #contact_us #maps {height: 400px;} #contact_us #address {width: 95%; margin: -70px auto 0 auto; float: none; box-shadow: 0 10px 5px rgba(0,0,0,0.2); padding: 30px} #contact_us #address p {font-size: 17px;} #contact_us #address p span {font-size: 15px;} } @media screen and (max-width: 768px) { #contact_us {margin-bottom: 0;} #contact_us #maps {height: 300px;} #contact_us #address { padding: 25px 15px} #contact_us #address dl {position: relative; box-sizing: border-box; padding-left: 50px;} #contact_us #address dl dt {position: absolute; top: 0; left: 0;} #contact_us #address h5 {margin-bottom: 20px;} #contact_us #address p {margin-top: 20px; font-size: 15px;} #contact_us #address p span {font-size: 14px; background-position: top left;} #contact_us #address p span:last-of-type {display: block; margin-left: 0 !important; background-position: top 3px left; margin-top: 3px;} } /*제품소개*/ #item_list_wrap {width: 100%; display: flex; flex-wrap:wrap; box-sizing: border-box;} #item_list_wrap .item_box {width: 31%; margin-bottom: 2em; margin-left: 3.5%;} #item_list_wrap .item_box:first-of-type {margin-left: 0;} #item_list_wrap .item_box .pic {position: relative; width: 100%; height: 315px; border-radius: 10px; overflow: hidden; background: #fafafa; transition: .3s;} #item_list_wrap .item_box .pic img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} #item_list_wrap .item_box .info {width: 100%; padding: 30px 0;} #item_list_wrap .item_box .info p {} #item_list_wrap .item_box .info p.part {font-size: 13px; color: #212529;} #item_list_wrap .item_box .info p.part span {padding-right: 5px;} #item_list_wrap .item_box .info p.part span::after {content: '/'; padding-left: 5px;} #item_list_wrap .item_box .info p.part span:last-of-type::after {display: none;} #item_list_wrap .item_box .info p.name {color: #212529; font-size:19px; font-weight: 600; margin: 5px 0; transition: .3s; width: 100%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; display: block;} #item_list_wrap .item_box .info p.desc {font-size: 15px; color: #747474; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; line-height: 1.5em; height: 3em;} #item_list_wrap .item_box:hover .pic {box-shadow: 0 0 10px rgba(0,0,0,0.3);} #item_list_wrap .item_box:hover .info p.name {color: #0075bf;} .meterial_alert {width: 100%; box-sizing: border-box; padding: 30px; border-radius: 20px; background-color: #e6efff; margin-bottom:40px} .meterial_alert p {font-size: var(--font-size-nomal); line-height: 1.5em; word-break: keep-all;} .meterial_alert p + p {margin-top: 10px;} .meterial_alert p strong {color: #212121; font-size: var(--font-size-big)} @media screen and (max-width: 1200px) { #item_list_wrap {padding-left: 20px; padding-right: 20px;} } @media screen and (min-width: 980px) { #item_list_wrap .item_box:nth-of-type(3n+1) {margin-left: 0} } @media screen and (max-width: 980px) { #item_list_wrap {padding-left: 15px; padding-right: 15px;} #item_list_wrap .item_box {margin-left: 2%; width: 32%;} #item_list_wrap .item_box .pic {height: 245px;} #item_list_wrap .item_box .info {padding: 20px 0} #item_list_wrap .item_box .info p.name {font-size: 17px;} } @media screen and (max-width: 768px) { #item_list_wrap .item_box {width: 49%} #item_list_wrap .item_box:nth-of-type(2n+1) {margin-left: 0} #item_list_wrap .item_box .pic {height: 190px;} #item_list_wrap .item_box .info p.name {font-size: 16px;} #item_list_wrap .item_box .info p.desc {font-size: 14px;} .meterial_alert {padding: 20px;} } @media screen and (max-width: 648px) { #item_list_wrap .item_box .pic {height: 140px;} #item_list_wrap .item_box .info p.desc {font-size: 13px; line-height: 1.45;} #item_list_wrap .item_box .info p.part span {font-size: 12px;} } /*제품상세*/ dl.item_info {position: relative; box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;} dl.item_info dt, dl.item_info dd { color: #212121; line-height: 1.5em;} dl.item_info dt {width: 20%; font-weight: 600; font-size: var(--font-size-big);} dl.item_info dd {width: 78%; font-size: var(--font-size-mid);} dl.item_info dd ul {} dl.item_info dd ul li {position: relative; padding-left: 17px; box-sizing:border-box;} dl.item_info dd ul li::before { position: absolute; top: 12px; left: 0; width: 7px; height: 2px; background: var(--swiper-theme-color, #0075bf); content: '';} dl.item_info dd ul li + li {margin-top: 8px;} #item_detail_head {margin: 100px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #item_detail_head #item_pics {position: relative; width: 40%; padding-bottom:40%; overflow: hidden; border-radius: 10px;} #item_detail_head #item_pics img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #item_detail_head #item_description {width: 55%; box-sizing: border-box; display: table-cell;} #item_detail_head #item_description p {color: #212529; line-height: 1.6em; word-break: keep-all; font-size:var(--font-size-big);} #item_detail_head #item_description p span {padding-right: 5px; opacity: 0.5; font-size:var(--font-size-nomal);} #item_detail_head #item_description p span::after {content: '/'; padding-left: 5px;} #item_detail_head #item_description p span:last-of-type::after {display: none;} #item_detail_head #item_description h3 {font-weight: 700; color: #212121; margin: 20px 0} #item_detail_head #item_description a {display: block; width:300px; height: 70px; background: #000; text-align: center; color: #fff; transition: .3s;} #item_detail_head #item_description a span { font-size: 16px; line-height: 70px; background: url("/common/img/icon/download.svg") no-repeat top 25px right; background-size: 17px; padding-right: 30px;} #item_detail_head #item_description a:hover {background: #0075bf} #item_detail_head #item_description dl.item_info {border-bottom: 1px solid #ddd; margin: 40px 0; padding-bottom: 40px;} #item_detail_body {padding:100px 0; border: solid #000; border-width: 2px 0;} #item_detail_body dl.item_info + dl.item_info {margin-top:100px;} #item_detail_body dl.item_info:first-of-type {margin-top: 0} #sub_main_contents #bo_v.product-detail-view {border: 0; margin-bottom: 0;} #sub_main_contents #bo_v.product-detail-view #bbs_wrapper > #bo_v_top {margin-bottom: 0;} #sub_main_contents #bo_v.product-detail-view #item_detail_head {margin-top: 100px;} @media screen and (max-width: 1200px) { #item_detail_head {margin: 70px 0} #item_detail_head #item_pics::after {width: 370px; height: 370px; margin-top: -185px; margin-left: -185px;} #item_detail_head #item_description {padding-left: 30px;} } @media screen and (max-width: 980px) { .over_text {display: block;} dl.item_info {padding-left: 60px;} dl.item_info dt, dl.item_info dd {font-size: 15px;} #item_detail_head {margin: 50px 0} #item_detail_head #item_pics::after {width: 280px; height: 280px; margin-top: -140px; margin-left: -140px;} #item_detail_head #item_description p {font-size: 15px;} #item_detail_head #item_description h4 {margin: 20px 0;} #item_detail_head #item_description dl.item_info {margin: 30px 0; padding-bottom: 30px;} #item_detail_head #item_description a {height: 55px; width: 100%;} #item_detail_head #item_description a span {line-height: 55px; background-position: top 18px right; font-size: 15px;} #item_detail_body {padding: 50px 0} #item_detail_body dl.item_info {padding-left: 110px;} #item_detail_body .spec {font-size: 15px; font-weight: 500;} #item_detail_body .btn_wrap {margin-top: 50px;} table.spec_table tr th, table.spec_table tr td {font-size: 15px; padding: 20px 15px;} } @media screen and (max-width: 768px) { dl.item_info {padding-left: 45px;} dl.item_info dt, dl.item_info dd {font-size: 14px;} dl.item_info dd ul li {position: relative; padding-left: 12px;} dl.item_info dd ul li::before {top: 9px;} #item_detail_head {display: block;} #item_detail_head #item_pics {display: block; width: 100%; text-align: center; margin-bottom:20px; padding-bottom: 80%} #item_detail_head #item_pics span {width: 60%;} #item_detail_head #item_description {display: block; width: 100%; padding-left: 0} #item_detail_head #item_description h3 {line-height: 1; margin: 15px 0} #item_detail_head #item_description p {font-size: 14px;} #item_detail_head #item_description a span {font-size: 14px; padding-right: 22px; background-size: 14px; background-position: top 20px right;} #item_detail_body dl.item_info + dl.item_info {margin-top:30px;} #item_detail_body dl.item_info {padding-left: 0; display: block;} #item_detail_body dl.item_info dt {position: relative; top: auto; left: auto; font-size: 15px; width: 100%} #item_detail_body dl.item_info dd {width: 100%} } /*기본 게시판*/ .bbs_list {width: 100%; border-top: 1px solid #ddd;} .bbs_list .bbsBox {width: 100%; display: table; border-bottom: 1px solid #ddd; table-layout: fixed;} .bbs_list .bbsBox div {display: table-cell; padding: 40px 0; font-size: 16px; color: #747474; text-align: center; vertical-align: middle;} .bbs_list .bbsBox .num {width: 10%} .bbs_list .bbsBox .category {font-weight: 600; color: #0075bf; width: 10%; font-size: 19px;} .bbs_list .bbsBox .title {text-align: left; width: 65%; box-sizing: border-box; padding-left: 30px; font-size: 19px;} .bbs_list .bbsBox .title a {color: #212529; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;} .bbs_list .bbsBox .title a:hover {color: #0075bf;} .bbs_list .bbsBox .date {width: 15%} .bbs_list .bbsBox.notice {} .bbs_list .bbsBox.notice .num {font-weight: 600; color: #0075bf;} .bbs_list .bbsBox.notice .title {font-weight: 600;} .bbs_list.has_writer {} .bbs_list.has_writer .bbsBox .title {width:50%} .bbs_list.has_writer .bbsBox .name {width: 15%} .bbs_list.has_writer .bbsBox .date {width: 15%} .bbs_list.qna .bbsBox .title {width:65%} .bbs_list.qna .bbsBox .name {width: 10%} .bbs_list.qna .bbsBox.reply {background: #fafafa;} .bbs_list.qna .bbsBox.reply .num img {width: 25px} .bbs_list.qna .bbsBox.reply .title {font-weight: 600} @media screen and (max-width: 980px) { .bbs_list .bbsBox {display: block; position: relative; box-sizing: border-box; padding-left: 70px; padding-top: 20px; padding-bottom: 20px; overflow: hidden;} .bbs_list .bbsBox div { padding: 0;} .bbs_list .bbsBox .num {position: absolute; top: 50%; margin-top: -12px; left: 0; width: 70px; display: block;} .bbs_list .bbsBox .title {padding-left: 0; width: 100%; font-size: 16px;} .bbs_list .bbsBox .category {width: auto; text-align: left; font-size: 16px; padding-right: 10px; font-weight: 500;} .bbs_list .bbsBox .date {width: auto; text-align:left; display: block;} .bbs_list.has_writer .bbsBox .title {width: auto;} .bbs_list.has_writer .bbsBox .name {width: auto; display: block; float: left; font-size: 14px; padding-right: 10px;} .bbs_list.has_writer .bbsBox .date {width: auto; float: left; font-size: 14px;} .bbs_list.qna .bbsBox.reply .num img {width: 17px;} } @media screen and (max-width: 768px) { .bbs_list .bbsBox {padding-left: 55px; padding-top: 10px; padding-bottom: 10px;} .bbs_list .bbsBox div {display: block;} .bbs_list .bbsBox .num {font-size: 15px; width: 55px;} .bbs_list .bbsBox .title {font-size: 14px;} .bbs_list .bbsBox .category {font-size: 13px;} .bbs_list .bbsBox .date {font-size: 13px;} .bbs_list .bbsBox .name {font-size: 13px;} } /*자주묻는질문*/ ul.faq_list {width: 100%; overflow: hidden; box-sizing: border-box; background: #fff; border-top: 2px solid #000; margin-bottom: 100px;} ul.faq_list li {border-bottom: 1px solid #ddd;} ul.faq_list li .acc_head {position: relative; padding: 35px 0; display: table; width: 100%; padding-left: 80px} ul.faq_list li .acc_head .category {font-size: 17px; font-weight: 500; color: #0075bf; display: table-cell; width: 200px; text-align: center;} ul.faq_list li .acc_head .subject {font-size: 19px; color: #212529; display: table-cell;} ul.faq_list li .acc_content {position: relative; background: #f9f9f9; padding: 15px 50px 15px 120px;} ul.faq_list li .acc_content p {margin: 15px 0;} ul.faq_list li .acc_head::before, ul.faq_list li .acc_content::before {position: absolute; top:37px; left: 50px; width: 20px; height: 20px; display:inline-block; content: '';background-position: center; flex: none; background-repeat: no-repeat;} ul.faq_list li .acc_head::before {background-image: url(/common/img/icon/faq-q.svg);} ul.faq_list li .acc_content::before {background-image: url(/common/img/icon/faq-a.svg);} ul.faq_list li .acc_head::after {position: absolute; right: 50px; top: 30px; width: 40px; height: 40px; background: url(/common/img/icon/list-open.svg) no-repeat center; content: ''; transition: transform 0.2s;} ul.faq_list li.acc_active .acc_head::after {transform:rotateZ(180deg);} @media screen and (max-width: 1200px) { ul.faq_list li .acc_head {padding-left: 70px;} ul.faq_list li .acc_head::before, ul.faq_list li .acc_content::before {left: 30px;} ul.faq_list li .acc_head::after {right: 30px;} ul.faq_list li .acc_head .category {width: 130px;} ul.faq_list li .acc_head .subject {font-size: 17px;} ul.faq_list li .acc_content {padding-left: 105px;} } @media screen and (max-width: 980px) { ul.faq_list li .acc_head {padding: 25px 0; padding-left: 50px;} ul.faq_list li .acc_head::before, ul.faq_list li .acc_content::before {top: 30px; left: 20px; width: 15px; height: 15px; background-size: 100%;} ul.faq_list li .acc_head::after {right: 20px; top:25px; width: 30px; height: 30px; background-size: 100%;} ul.faq_list li .acc_head .category {width: 100px; font-size: 15px;} ul.faq_list li .acc_head .subject {font-size: 15px;} ul.faq_list li .acc_content {padding-left: 70px;} } @media screen and (max-width: 768px) { ul.faq_list li .acc_head {display:flex; flex-wrap: wrap; justify-content: flex-start; padding:20px 45px;} ul.faq_list li .acc_head::before, ul.faq_list li .acc_content::before {left: 15px; top: 22px;} ul.faq_list li .acc_head::after {right: 10px; top: 17px;} ul.faq_list li .acc_head .category {display: block; width: auto; font-size: 14px; padding-right: 10px} ul.faq_list li .acc_head .subject {display: block; font-size: 14px;} ul.faq_list li .acc_content {padding-left: 45px; padding-top: 10px; padding-bottom: 10px; padding-right: 25px;} } /* 설비소개 */ .machine_list {} .machine_list .machine_info__wrap {align-items: center;} .machine_list .machine_info__wrap + .machine_info__wrap {margin-top: 5em;} .machine_list .machine_info__wrap .pics {overflow: hidden; border-radius: 20px;} .machine_list .machine_info__wrap .pics img {width: 100%;} .machine_list .machine_info__wrap .text {box-sizing: border-box; padding-left: 3em;} .machine_list .machine_info__wrap .text h4 {color: #212121; font-weight: 700; margin: 10px 0; color: var(--pointColor)} .machine_list .machine_info__wrap .text p {color: #212121; word-break: keep-all;} .machine_list .machine_info__wrap .text p.category {opacity: 0.5; font-size:var(--font-size-nomal);} .machine_list .machine_info__wrap .text p.desc {font-size: var(--font-size-mid); line-height: 1.5em;} .machine_list .machine_info__wrap .text p + p {margin-top: 10px; opacity: .7;} @media all and (max-width:980px) { .machine_list .machine_info__wrap {display: block} .machine_list .machine_info__wrap .box {width: 100%} .machine_list .machine_info__wrap .text {padding-left: 0; margin-top: 20px;} .machine_list .machine_info__wrap .text p.desc {font-size: 14px;} .machine_list .machine_info__wrap .text h4 {line-height: 1; margin: 5px 0} } /* 경희대협력 - 파트너 */ .patner_list {box-sizing: border-box; padding:60px 50px; background: #fafafa; border-radius: 20px;} .patner_list .box {border: 1px solid #e4e4e4; border-radius: 10px; overflow: hidden;} .patner_list .box .logo { box-sizing: border-box; text-align: center; background: #fff;} .patner_list .box .name {text-align: center; font-size: var(--font-size-big);background: #fff; padding: 25px 0; border-top: 1px solid #e4e4e4; color: #212121;} /* 경희대협력 - 브랜드 */ #braning {} #branding__wrap {margin-top: 50px;} #branding__wrap .item_info {padding: 100px 0;} #branding__wrap .item_info .pics_wrap {border-radius: 20px; overflow: hidden;} #branding__wrap .item_info .text {text-align: center; font-size: var(--font-size-mid); margin-top:15px;} #branding__wrap .item_info .text span {font-size: 14px;} #branding__wrap .item_info + .item_info {border-top: 1px solid #e4e4e4; } .benefit_list {} .benefit_list .flexList {align-items: center; justify-content: space-between;} .benefit_list .flexList p span {margin-bottom: 15px;} .benefit_list .flexList .pics {width: 55%; overflow: hidden; border-radius: 20px;} .benefit_list .flexList .text {width: 40%} .benefit_list .flexList.reverse {flex-direction: row-reverse;} .benefit_title {margin-bottom: 30px;} .benefit_title p {text-align: left; line-height: 1.5;} .benefit_title p span {display: block; width: 130px; padding: 10px 0; color: #fff; border-radius: 50px; line-height: 1; font-size: 20px; background: var(--pointColor2);} .benefit_title p.flexList {align-items: center; justify-content: flex-start;} /* 신규거래문의 */ p.notice {font-size: 12px; color: #9a9a9a; font-weight: 400; line-height: 1.2; margin-top: 10px;} p.notice.right {text-align: right;} .member_gift_list {border: 5px solid #e4e4e4; box-sizing: border-box; padding: 50px; border-radius: 20px; width: 100%;} .member_gift_list .box {} .member_gift_list .box p {text-align: center; font-size: var(--font-size-mid); color: #212121; font-weight: 700; word-break: keep-all;} .member_gift_list .box p img {margin-bottom: 20px;} @media all and (max-width:1200px ){ .pics_wrap#branding img {height: auto; width: 100%; top: auto; left: auto; transform: none;} } @media all and (max-width:980px ){ .patner_list {padding: 30px 20px;} .patner_list .box .name {font-size: 12px; padding: 10px 5px; box-sizing: border-box;} #branding__wrap {margin-top: 0;} #branding__wrap .item_info {padding: 50px 0; display: block;} #branding__wrap .item_info dt {width: 100%; margin-bottom: 10px; font-size: 16px;} #branding__wrap .item_info dd {width: 100%; display: block} #branding__wrap .item_info dd .box {width: 100%;} #branding__wrap .item_info dd .box + .box {margin-top: 30px;} #branding__wrap .item_info .pics_wrap {border-radius: 10px;} #branding__wrap .item_info .pics_wrap img {width: 100%; height: 160px; object-fit: cover;} #branding__wrap .item_info .text {font-size: 14px;} .member_gift_list {justify-content: center; gap:initial; padding: 30px 5px} .member_gift_list .box {width:33.3%; margin-bottom: 10px; box-sizing: border-box; padding: 0 5px;} .member_gift_list .box p {font-size: 13px; font-weight: 500;} .member_gift_list .box p.notice {display: none;} .member_gift_list .box p img {margin-bottom: 5px;} .benefit_title p.flexList {display: block; text-align: center;} .benefit_title p.flexList span {margin-bottom: 10px;} .benefit_title p span {font-size: 15px; margin: 0 auto 10px auto} .benefit_list .flexList {flex-direction: column-reverse !important;} .benefit_list .flexList .benefit_title {margin-bottom: 0} .benefit_list .flexList .pics, .benefit_list .flexList .text {width: 100%;} .benefit_list .flexList .text p {text-align: center;} } @media all and (max-width:640px){ #branding__wrap .item_info .text span {font-size: 11px;} } /* 게시판 ========================================================================================== */ .bbs_head {display: flex; justify-content: flex-end;margin-bottom: 20px;} .bbs_head button {font-size: 15px; color: #fff; background: #212121; border: none; width: 100px; height: 40px; cursor: pointer} .bbs_list__wrap {width: 100%; border-top: 3px solid var(--pointColor);} .bbs_list__wrap .bbsBox {width: 100%; display: table; border-bottom: 1px solid #ddd; table-layout: fixed; background-color: #fff;} .bbs_list__wrap .bbsBox div {display: table-cell; padding: 16px 10px; font-size: 18px; color: #747474; text-align: center; vertical-align: middle; font-weight: 400; background-color: #fff; line-height: 1.4;} .bbs_list__wrap .bbsBox .num {width: 9%; min-width: 56px; vertical-align: middle; text-align: center;} .bbs_list__wrap .bbsBox .num .bo-list-num {display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 1em;} .bbs_list__wrap .bbsBox .condition {width: 8%; padding-left: 0; padding-right: 0;} .bbs_list__wrap .bbsBox .condition span {background: #f1f1f1; padding: 2px 5px; font-size: 18px !important;} .bbs_list__wrap .bbsBox .condition.on span {background: #555; color: #fff;} .bbs_list__wrap .bbsBox .title {text-align: left; width: 68%; box-sizing: border-box; padding: 16px 10px 16px 30px; font-size: 18px; line-height: 1.4;} .bbs_list__wrap .bbsBox .title .bo-list-title-inner {justify-content: flex-start; width: 100%; text-align: left; min-height: 0;} .bbs_list__wrap .bbsBox .title a {color: #212529; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; background-color: transparent; text-align: left; line-height: 1.4; padding: 0; margin: 0;} .bbs_list__wrap .bbsBox .date {width: 11%} .bbs_list__wrap .bbsBox .writer {width: 12%} .bbs_list__wrap .bbsBox:hover .title a {color: #01458d;} #sub_main_contents .empty_list, #sub_main_contents .empty_table { width: 100%; padding: 100px 0 !important; margin: 0; text-align: center; color: #555; font-size: var(--font-size-mid); font-weight: 500; letter-spacing: -0.02em; background: #fafafa; border: 1px solid #eaeaea; border-radius: 16px; list-style: none; box-sizing: border-box; } #sub_main_contents .empty_list::before, #sub_main_contents .empty_table::before { content: ''; display: block; width: 120px; height: 40px; margin: 0 auto 24px; background: url("/assets/img/common/logo.svg") no-repeat center; background-size: contain; opacity: 0.15; filter: grayscale(100%); } #sub_main_contents #bo_list {width: 100%; max-width: 100%;} #sub_main_contents #bo_gall {width: 100%; max-width: 100%; box-sizing: border-box;} #sub_main_contents #bo_gall .material_list.flexList > .box {box-sizing: border-box; width: calc(100% / var(--count, 3) - (var(--x-gap) * (var(--count, 3) - 1)) / var(--count, 3));} /* 게시판 목록 관리 기능 (버튼·체크박스·검색) */ #sub_main_contents .bo-admin-bar {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 14px 0; clear: both;} #sub_main_contents .bo-admin-bar:after {display: none;} #sub_main_contents .bo-admin-bar--bottom {margin: 25px 0 0; padding-top: 20px; justify-content: flex-end;} #sub_main_contents .bo-admin-bar .btn_bo_user, #sub_main_contents .bo-admin-bar .btn_bo_user {float: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none;} #sub_main_contents .bo-admin-bar .btn_bo_user > li {float: none; width: auto; margin: 0; background: transparent; position: relative;} #sub_main_contents .bo-admin-bar .btn_bo_user .btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid #e4e4e4; border-radius: 5px; background: #fff; color: #212121; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; box-sizing: border-box; transition: .2s all ease; cursor: pointer;} #sub_main_contents .bo-admin-bar .btn_bo_user .btn:hover {border-color: var(--pointColor); color: var(--pointColor); background: #f8faff;} #sub_main_contents .bo-admin-bar .btn_bo_user .btn_admin {background: var(--pointColor); border-color: var(--pointColor); color: #fff;} #sub_main_contents .bo-admin-bar .btn_bo_user .btn_admin:hover {background: var(--pointColor2); border-color: var(--pointColor2); color: #fff;} #sub_main_contents .bo-admin-bar .btn_bo_user .btn .site-icon {width: 1em; height: 1em;} #sub_main_contents .bo-admin-bar .more_opt li button, #sub_main_contents .bo-admin-bar .more_opt li a {justify-content: flex-start;} #sub_main_contents .bo-admin-bar .more_opt {display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; margin: 0; padding: 6px 0; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 20; list-style: none;} #sub_main_contents .bo-admin-bar .more_opt:before, #sub_main_contents .bo-admin-bar .more_opt:after {display: none;} #sub_main_contents .bo-admin-bar .more_opt li {float: none; width: auto; margin: 0; padding: 0; border-bottom: 1px solid #f1f1f1;} #sub_main_contents .bo-admin-bar .more_opt li:last-child {border-bottom: 0;} #sub_main_contents .bo-admin-bar .more_opt li button, #sub_main_contents .bo-admin-bar .more_opt li a {display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 11px 16px; border: 0; background: #fff; color: #212121; font-size: 14px; text-align: left; cursor: pointer; box-sizing: border-box;} #sub_main_contents .bo-admin-bar .more_opt li:hover button, #sub_main_contents .bo-admin-bar .more_opt li:hover a {background: #f8faff; color: var(--pointColor);} #sub_main_contents .bo-admin-bar .more_opt li i {float: none; line-height: 1; opacity: .55;} #sub_main_contents .bo-admin-chk {display: inline-flex; align-items: center; margin: 0;} #sub_main_contents .bo-admin-chk label {font-size: 15px; font-weight: 500; color: #212121;} #sub_main_contents #gall_allchk {margin-bottom: 15px;} #sub_main_contents .bo-list-chk {display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; margin: 0;} #sub_main_contents .bo-list-chk label {position: relative; display: block; width: 18px; height: 18px; padding: 0; margin: 0; font-size: 0; line-height: 0;} #sub_main_contents .bo-list-chk label:before {content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); border-radius: 100%; background: #ededed url("/assets/img/icon/check.png") no-repeat center; background-size: 60%; border: 1px solid #e8e8e8; box-sizing: border-box;} #sub_main_contents .bo-list-chk input[type="checkbox"]:checked + label:before {background-color: var(--pointColor2); border-color: var(--pointColor2);} #sub_main_contents .bo-list-title-inner, #sub_main_contents .material_list .text p.name.bo-list-title {display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; box-sizing: border-box; width: 100%; text-align: left; line-height: 1.4;} #sub_main_contents .bo-list-title-inner > a, #sub_main_contents .bo-list-title .bo-list-title-text {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; line-height: 1.4; padding: 0; margin: 0;} #sub_main_contents .bbsBox .title.bo-list-title {padding: 16px 10px 16px 15px; text-align: left;} #sub_main_contents .bbsBox .title.bo-list-title .bo-list-title-inner > a {flex: 1; min-width: 0; display: block; text-align: left;} #sub_main_contents .material_list .text p.name.bo-list-title {text-align: left; justify-content: flex-start; margin-top: 0;} #sub_main_contents #bo_gall.bo-gallery-title-center .material_list .text p.name.bo-list-title {display: block; text-align: center; justify-content: center; margin-top: 0;} #sub_main_contents #bo_gall.bo-gallery-title-center .material_list .text p.name.bo-list-title .bo-list-title-text {display: inline; flex: none; text-align: center;} #sub_main_contents #bo_gall #bo_btn_top.bo-admin-bar {justify-content: flex-end;} #sub_main_contents .bbsBox .num {vertical-align: middle; text-align: center;} #sub_main_contents .bbsBox .num .bo-list-num {display: inline-flex; align-items: center; justify-content: center; line-height: 1;} #sub_main_contents .bbsBox .num .notice_icon, .bbs_list__wrap .bbsBox .num .notice_icon {display: inline-block; white-space: nowrap; line-height: 1; font-weight: 600; color: var(--pointColor2, #a6284e); vertical-align: middle;} #sub_main_contents .bbsBox .num .bo_current, .bbs_list__wrap .bbsBox .num .bo_current {display: inline-block; line-height: 1; vertical-align: middle;} #sub_main_contents #bo_list .chk_box input[type="checkbox"] + label span, #sub_main_contents #bo_gall .chk_box input[type="checkbox"] + label span, #sub_main_contents #bo_w .chk_box input[type="checkbox"] + label span {display: none;} #sub_main_contents #bo_list .chk_box input[type="checkbox"] + label, #sub_main_contents #bo_gall .chk_box input[type="checkbox"] + label, #sub_main_contents #bo_w .chk_box input[type="checkbox"] + label {position: relative; padding-left: 30px; color: #212121; cursor: pointer;} #sub_main_contents #bo_list .chk_box input[type="checkbox"] + label:before, #sub_main_contents #bo_gall .chk_box input[type="checkbox"] + label:before, #sub_main_contents #bo_w .chk_box input[type="checkbox"] + label:before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 100%; background: #ededed url("/assets/img/icon/check.png") no-repeat center; background-size: 60%; border: 1px solid #e8e8e8;} #sub_main_contents #bo_list .chk_box input[type="checkbox"]:checked + label:before, #sub_main_contents #bo_gall .chk_box input[type="checkbox"]:checked + label:before, #sub_main_contents #bo_w .chk_box input[type="checkbox"]:checked + label:before {background-color: var(--pointColor2); border-color: var(--pointColor2);} #sub_main_contents #bo_w .chk_box {position: relative;} #sub_main_contents #bo_w .selec_chk {position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden;} @media all and (max-width: 767px) { #sub_main_contents .bo-admin-bar .btn_bo_user .btn {min-width: 38px; height: 38px; padding: 0 10px; font-size: 13px;} } #sub_main_contents #bo_v {width: 100%; max-width: 100%; box-sizing: border-box;} #sub_main_contents #bo_w.bo-write-form {width: 100%; max-width: 100%; box-sizing: border-box; padding: 30px 0 40px; border-top: 2px solid #000; border-bottom: 0; font-size: var(--font-size-nomal);} #sub_main_contents #bo_w #fwrite {width: 100%;} #sub_main_contents #bo_w .write_div {margin: 25px 0;} #sub_main_contents #bo_w .bo-label {display: block; margin-bottom: 10px; font-size: var(--font-size-mid); font-weight: 600; color: #212121; line-height: 1.4;} #sub_main_contents #bo_w .bo-req {color: var(--pointColor3); font-weight: 700;} #sub_main_contents #bo_w .bo-input, #sub_main_contents #bo_w select.bo-input {width: 100%; box-sizing: border-box; height: 50px; border: 1px solid #e4e4e4; border-radius: 5px; padding: 0 15px; font-size: var(--font-size-nomal); color: #212121; background: #fff;} #sub_main_contents #bo_w textarea.bo-input, #sub_main_contents #bo_w .bo-textarea {width: 100%; box-sizing: border-box; min-height: 140px; border: 1px solid #e4e4e4; border-radius: 5px; padding: 15px; font-size: var(--font-size-nomal); line-height: 1.6; color: #212121; background: #fafafa; resize: vertical;} #sub_main_contents #bo_w .bo-input:focus, #sub_main_contents #bo_w select.bo-input:focus, #sub_main_contents #bo_w textarea.bo-input:focus {outline: none; border-color: var(--pointColor);} #sub_main_contents #bo_w .bo-field-help {margin-top: 8px; font-size: 14px; color: #747474; line-height: 1.5;} #sub_main_contents #bo_w .bo-input-gap {margin-top: 10px;} #sub_main_contents #bo_w .bo-file-input {height: auto; padding: 12px 15px; background: #fafafa;} #sub_main_contents #bo_w ul.inputForm.bo-inputForm {display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;} #sub_main_contents #bo_w ul.inputForm.bo-inputForm li {width: 100%; margin: 10px 0; box-sizing: border-box;} #sub_main_contents #bo_w ul.inputForm.bo-inputForm .bo-label {margin-bottom: 8px; font-size: var(--font-size-nomal);} #sub_main_contents #bo_w ul.inputForm.bo-inputForm input.bo-input {background: #fafafa;} #sub_main_contents #bo_w .bo_w_tit .bo-input {padding-right: 15px;} #sub_main_contents #bo_w .wr_content {width: 100%;} #sub_main_contents #bo_w .wr_content.smarteditor2 iframe {background: #fff;} #sub_main_contents #bo_w .bo-write-options {display: flex; flex-wrap: wrap; gap: 15px; list-style: none; padding: 0; margin: 10px 0 0;} #sub_main_contents #bo_w .file_del {margin-top: 12px;} #sub_main_contents #bo_w .bo-file-row-hidden {display: none;} #sub_main_contents #bo_w .bo-file-add-wrap {margin-top: 5px;} #sub_main_contents #bo_w .bo-file-add-btn {display: inline-block; margin-top: 5px; padding: 12px 22px; border: 1px dashed #c8c8c8; border-radius: 5px; background: #fafafa; color: var(--pointColor); font-size: 15px; font-weight: 600; cursor: pointer; transition: .2s all ease;} #sub_main_contents #bo_w .bo-file-add-btn:hover {border-color: var(--pointColor); background: #fff;} #sub_main_contents #bo_w .write_btns {margin-top: 50px; display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap;} #sub_main_contents #bo_w .write_btns .comm_button {border: 0; cursor: pointer; text-decoration: none;} #sub_main_contents #bo_w .write_btns .btn_cancel {background: #212121;} #sub_main_contents #bo_w .write_btns .btn_cancel:hover {background: #444;} @media all and (min-width: 768px) { #sub_main_contents #bo_w ul.inputForm.bo-inputForm li {width: 50%; margin: 15px 0;} #sub_main_contents #bo_w ul.inputForm.bo-inputForm li:nth-of-type(odd) {padding-right: 10px;} #sub_main_contents #bo_w ul.inputForm.bo-inputForm li:nth-of-type(even) {padding-left: 10px;} #sub_main_contents #bo_w ul.inputForm.bo-inputForm input.bo-input, #sub_main_contents #bo_w ul.inputForm.bo-inputForm select.bo-input {height: 55px; padding: 0 20px;} #sub_main_contents #bo_w textarea.bo-input, #sub_main_contents #bo_w .bo-textarea {min-height: 160px; padding: 20px; border-radius: 10px;} } @media all and (max-width: 980px) { #sub_main_contents #bo_w.bo-write-form {padding: 20px 0 30px;} #sub_main_contents #bo_w .write_div {margin: 18px 0;} #sub_main_contents #bo_w .bo-label {font-size: var(--font-size-nomal);} } #sub_main_contents #bo_v_img {width: 100%; overflow: hidden;} #sub_main_contents #bo_v_img img, #sub_main_contents #bo_v_con img {max-width: 100%; height: auto;} /* 게시판 글보기 */ #sub_main_contents #bo_v {width: 100%; max-width: 100%; margin-bottom: 20px; padding: 0; background: #fff; box-sizing: border-box; font-size: var(--font-size-nomal); border-top: 2px solid #000; border-bottom: 1px solid #000;} #sub_main_contents #bo_v #bo_v_title .bo_v_cate {display: inline-block; line-height: 20px; background: #eef4fb; color: var(--pointColor); padding: 0 10px; border-radius: 3px; font-size: var(--font-size-nomal);} #sub_main_contents #bo_v #bo_v_title .bo_v_tit {display: block; margin: 8px 0 0; word-break: break-all; font-weight: 600; color: #212121; font-size: var(--font-size-big); line-height: 1.45;} #sub_main_contents #bo_v #bo_v_info {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; padding: 15px 0; border-bottom: 1px solid #e4e4e4; color: #666;} #sub_main_contents #bo_v #bo_v_info:after {display: none;} #sub_main_contents #bo_v #bo_v_info h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;} #sub_main_contents #bo_v #bo_v_info .profile_info {margin: 0; float: none; display: inline-block;} #sub_main_contents #bo_v #bo_v_info .profile_info_ct {float: none; padding: 0; line-height: 1.6; font-size: var(--font-size-nomal);} #sub_main_contents #bo_v #bo_v_info strong {display: inline-block; margin: 0 12px 0 0; font-weight: 500; color: #212121;} #sub_main_contents #bo_v #bo_v_info .if_date {margin: 0; color: #888;} #sub_main_contents #bo_v #bo_v_info a {color: inherit; text-decoration: none;} #sub_main_contents #bo_v #bo_v_top {float: none; margin: 0; flex-shrink: 0;} #sub_main_contents #bbs_wrapper > #bo_v_top {display: flex; justify-content: flex-end; margin-bottom: 15px;} #sub_main_contents #bo_v #bo_v_top:after {display: none;} #sub_main_contents #bo_v #bo_v_top .btn_bo_user, #sub_main_contents #bo_v_top .btn_bo_user {float: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none;} #sub_main_contents #bo_v #bo_v_top .btn_bo_user > li, #sub_main_contents #bo_v_top .btn_bo_user > li {float: none; width: auto; margin: 0; background: transparent; position: relative;} #sub_main_contents #bo_v #bo_v_top .btn_bo_user .btn, #sub_main_contents #bo_v_top .btn_bo_user .btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid #e4e4e4; border-radius: 5px; background: #fff; color: #212121; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; box-sizing: border-box; transition: .2s all ease; cursor: pointer;} #sub_main_contents #bo_v #bo_v_top .btn_bo_user .btn:hover, #sub_main_contents #bo_v_top .btn_bo_user .btn:hover {border-color: var(--pointColor); color: var(--pointColor); background: #f8faff;} #sub_main_contents #bo_v #bo_v_top .more_opt, #sub_main_contents #bo_v_top .more_opt {display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; margin: 0; padding: 6px 0; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 20; list-style: none;} #sub_main_contents #bo_v #bo_v_top .more_opt:before, #sub_main_contents #bo_v #bo_v_top .more_opt:after, #sub_main_contents #bo_v_top .more_opt:before, #sub_main_contents #bo_v_top .more_opt:after {display: none;} #sub_main_contents #bo_v #bo_v_top .more_opt li, #sub_main_contents #bo_v_top .more_opt li {float: none; width: auto; margin: 0; padding: 0; border-bottom: 1px solid #f1f1f1;} #sub_main_contents #bo_v #bo_v_top .more_opt li:last-child, #sub_main_contents #bo_v_top .more_opt li:last-child {border-bottom: 0;} #sub_main_contents #bo_v #bo_v_top .more_opt li a, #sub_main_contents #bo_v_top .more_opt li a {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 16px; border: 0; background: #fff; color: #212121; font-size: 14px; text-align: left; text-decoration: none; box-sizing: border-box;} #sub_main_contents #bo_v #bo_v_top .more_opt li:hover a, #sub_main_contents #bo_v_top .more_opt li:hover a {background: #f8faff; color: var(--pointColor);} #sub_main_contents #bo_v #bo_v_top .more_opt li i, #sub_main_contents #bo_v_top .more_opt li i {float: none; line-height: 1; opacity: .55;} #sub_main_contents #bo_v #bo_v_atc {min-height: 120px; padding: 20px 0;} #sub_main_contents #bo_v #bo_v_con {margin: 10px 0 30px; width: 100%; line-height: 1.7; word-break: break-all; overflow: hidden; color: #212121; font-size: var(--font-size-mid);} #sub_main_contents #bo_v #bo_v_con p, #sub_main_contents #bo_v #bo_v_con li, #sub_main_contents #bo_v #bo_v_con span, #sub_main_contents #bo_v #bo_v_con td {font-size: inherit; line-height: inherit; font-family: inherit;} #sub_main_contents #bo_v #bo_v_con [style*="font-size"] {font-size: inherit !important; line-height: inherit !important; font-family: inherit !important;} #sub_main_contents #bo_v #bo_v_con a {color: var(--pointColor); text-decoration: underline;} #sub_main_contents #bo_v #bo_v_file h2, #sub_main_contents #bo_v #bo_v_link h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;} #sub_main_contents #bo_v #bo_v_file ul, #sub_main_contents #bo_v #bo_v_link ul {margin: 0; padding: 0; list-style: none;} #sub_main_contents #bo_v #bo_v_file li, #sub_main_contents #bo_v #bo_v_link li {padding: 15px; margin: 10px 0; border: 1px solid #e4e4e4; border-radius: 8px; overflow: hidden; transition: .2s border-color ease;} #sub_main_contents #bo_v #bo_v_file li i, #sub_main_contents #bo_v #bo_v_link li i {float: left; color: #b2b2b2; font-size: 2em; margin-right: 16px;} #sub_main_contents #bo_v #bo_v_file a, #sub_main_contents #bo_v #bo_v_link a {float: left; display: block; text-decoration: none; word-wrap: break-word; color: #212121; font-size: var(--font-size-nomal);} #sub_main_contents #bo_v #bo_v_file a:hover, #sub_main_contents #bo_v #bo_v_link a:hover {color: var(--pointColor); text-decoration: underline;} #sub_main_contents #bo_v #bo_v_file .bo_v_file_cnt, #sub_main_contents #bo_v #bo_v_link .bo_v_link_cnt {display: block; clear: both; padding-top: 6px; color: #999; font-size: 13px;} #sub_main_contents #bo_v #bo_v_file li:hover, #sub_main_contents #bo_v #bo_v_link li:hover {border-color: var(--pointColor);} #sub_main_contents #bo_v #bo_v_act {margin: 0 0 30px; text-align: center;} #sub_main_contents #bo_v #bo_v_act .bo_v_act_gng {position: relative; display: inline-block;} #sub_main_contents #bo_v #bo_v_act .bo_v_good, #sub_main_contents #bo_v #bo_v_act .bo_v_nogood {display: inline-block; border: 1px solid #e4e4e4; min-width: 70px; line-height: 46px; border-radius: 30px; padding: 0 12px; color: #555; text-decoration: none;} #sub_main_contents #bo_v #bo_v_act .bo_v_good:hover, #sub_main_contents #bo_v #bo_v_act .bo_v_nogood:hover {border-color: var(--pointColor); color: var(--pointColor);} #sub_main_contents #bo_v #bo_v_act i {font-size: 1.2em; margin-right: 5px;} #sub_main_contents #bo_v #bo_v_act_good, #sub_main_contents #bo_v #bo_v_act_nogood {display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 10; margin-top: 8px; padding: 10px 16px; background: var(--pointColor); color: #fff; text-align: center; border-radius: 5px; white-space: nowrap; font-size: 13px;} #sub_main_contents #bo_v .bo_v_nb {position: relative; margin: 20px 0 0; padding: 0; list-style: none; clear: both; text-align: left; border-top: 1px solid #e4e4e4;} #sub_main_contents #bo_v .bo_v_nb li {border-bottom: 1px solid #f1f1f1; padding: 14px 10px;} #sub_main_contents #bo_v .bo_v_nb li:hover {background: #fafafa;} #sub_main_contents #bo_v .bo_v_nb li a {color: #212121; text-decoration: none; font-size: var(--font-size-nomal);} #sub_main_contents #bo_v .bo_v_nb li a:hover {color: var(--pointColor);} #sub_main_contents #bo_v .bo_v_nb .nb_tit {display: inline-block; padding-right: 16px; color: #999; font-size: 13px;} #sub_main_contents #bo_v .bo_v_nb .nb_date {float: right; color: #999; font-size: 13px;} /* 게시판 댓글 */ #sub_main_contents .cmt_btn {width: 100%; text-align: left; border: 0; border-bottom: 1px solid #e4e4e4; background: #fff; font-weight: 600; margin: 30px 0 0; padding: 0 0 15px; cursor: pointer;} #sub_main_contents .cmt_btn span.total {position: relative; display: inline-block; margin-right: 5px; font-size: 1em; color: var(--pointColor);} #sub_main_contents .cmt_btn span.total:after {position: absolute; bottom: -16px; left: 0; display: inline-block; background: var(--pointColor); content: ""; width: 100%; height: 2px;} #sub_main_contents .cmt_btn span.cmt_more {float: right; display: inline-block; width: 0; height: 0; margin-top: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #999; transition: transform .2s ease;} #sub_main_contents .cmt_btn_op span.cmt_more {transform: rotate(180deg);} #sub_main_contents .cmt_btn b {font-size: 1.1em; color: #212121;} #sub_main_contents #bo_vc h2, #sub_main_contents #bo_vc h1 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;} #sub_main_contents #bo_vc article {margin: 20px 0; position: relative; border-bottom: 1px solid #f0f0f0; overflow: hidden;} #sub_main_contents #bo_vc article .pf_img {float: left; margin-right: 12px;} #sub_main_contents #bo_vc article .pf_img img {border-radius: 50%; width: 44px; height: 44px; object-fit: cover;} #sub_main_contents #bo_vc article .cm_wrap {float: left; max-width: calc(100% - 60px); width: 90%;} #sub_main_contents #bo_vc header {position: relative; width: 100%;} #sub_main_contents #bo_vc header .profile_img {display: none;} #sub_main_contents #bo_vc .bo_vc_hdinfo {color: #777; font-size: 13px;} #sub_main_contents #bo_vc .cmt_contents {line-height: 1.8; padding: 0 0 16px; color: #333;} #sub_main_contents #bo_vc_empty {margin: 0; padding: 60px 0 !important; color: #777; text-align: center;} #sub_main_contents #bo_vc .bo_vl_opt {position: absolute; top: 0; right: 0;} #sub_main_contents .bo_vc_act {display: none; position: absolute; right: 0; top: 36px; min-width: 90px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: 20;} #sub_main_contents .bo_vc_act li {border-bottom: 1px solid #f1f1f1;} #sub_main_contents .bo_vc_act li:last-child {border-bottom: 0;} #sub_main_contents .bo_vc_act li a {display: block; padding: 10px 16px; color: #212121; text-decoration: none; font-size: 14px;} #sub_main_contents .bo_vc_act li a:hover {color: var(--pointColor); background: #f8faff;} #sub_main_contents .bo_vc_w {position: relative; margin: 16px 0; display: block;} #sub_main_contents .bo_vc_w textarea {border: 1px solid #e4e4e4; background: #fafafa; color: #212121; border-radius: 8px; padding: 12px 15px; width: 100%; height: 120px; box-sizing: border-box; line-height: 1.6; resize: vertical;} #sub_main_contents .bo_vc_w .btn_submit {height: 45px; padding: 0 24px; border: 0; border-radius: 5px; background: var(--pointColor); color: #fff; font-weight: 600; cursor: pointer;} #sub_main_contents .bo_vc_w .btn_submit:hover {background: var(--pointColor2);} #sub_main_contents .bo_vc_w_info {margin: 10px 0; overflow: hidden;} #sub_main_contents .bo_vc_w .btn_confirm {clear: both; margin-top: 12px;} #item_detail_head #item_pics #bo_v_img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; overflow: hidden;} #item_detail_head #item_pics #bo_v_img img {display: block; width: 100%; height: 100%;} .bbs_subject { display: table; table-layout: fixed; background: #fff; width: 100%; border-top: 3px solid var(--pointColor)} .bbs_subject .part {text-align: center; font-size: 18px; color: #212121; display: table-cell; vertical-align: middle; padding: 14px 0; line-height: 1.4;} .bbs_subject .part.title {text-align: left; padding-left: 30px; box-sizing: border-box;} .bbs_subject .part.num {width: 9%; min-width: 56px;} .bbs_subject .part.title { width: 68%;} .bbs_subject .part.date {width: 11%} .bbs_subject .part.writer {width: 12%} .bbs_subject + .bbs_list__wrap {border-top: 1px solid #212121;} /*카테고리가 있는 게시판*/ .bbs_list__wrap.category {} .bbs_list__wrap.category .bbsBox .num {width:7%;} .bbs_list__wrap.category .bbsBox .doctor {width:11%;} .bbs_list__wrap.category .bbsBox .title {width:62%; padding-left: 10px} .bbs_list__wrap.category .bbsBox .writer {width:10%} .bbs_list__wrap.category .bbsBox .date {width:10%} .bbs_subject .part.num {width: 7%} .bbs_subject .part.doctor {width:11%;} .bbs_subject .part.title { width: 62%;} .bbs_subject .part.date {width: 10%} .bbs_subject .part.writer {width: 10%} /*사업공고 게시판*/ .bbs_list__wrap.business {} .bbs_list__wrap.business .bbsBox .num {width:15%;} .bbs_list__wrap.business .bbsBox .title {width:54%; padding-left: 10px} .bbs_list__wrap.business .bbsBox .writer {width:10%} .bbs_list__wrap.business .bbsBox .date {width:10%} /*QNA 게시판*/ .bbs_list__wrap.qna {} .bbs_list__wrap.qna .bbsBox .num {width:7%;} .bbs_list__wrap.qna .bbsBox .doctor {width:11%;} .bbs_list__wrap.qna .bbsBox .title {width:60%; padding-left: 10px} .bbs_list__wrap.qna .bbsBox .title img {width:15px; opacity: 0.3; vertical-align: middle; margin-left: 8px; margin-top: -2px;} .bbs_list__wrap.qna .bbsBox .writer {width:10%} .bbs_list__wrap.qna .bbsBox .date {width:12%} .bbs_list__wrap.qna .bbsBox .condition {width:12%} .bbs_list__wrap.qna .bbsBox .condition.yes {color: #AA0B0E;} /*갤러리*/ .gallery_list {position: relative; width: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-start;} .gallery_list .item {width: calc(32% - 8px); margin:1% 1% 2.5% 1%; border: 1px solid #dedede; box-sizing:border-box; transition: 0.3s; border-radius: 5px; overflow: hidden;} .gallery_list .item:nth-of-type(3n) {margin-right: 0} .gallery_list .item .pics {position: relative; min-height: 260px; padding-bottom: 5%; overflow: hidden;} .gallery_list .item .pics img {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: 0.3s;} .gallery_list .item .text {width:100%; box-sizing: border-box; border-top:1px solid #dedede; padding: 20px 30px; background: #fff;} .gallery_list .item .text p {line-height: 1.5;} .gallery_list .item .text p.tit {font-size: 19px; color: #111; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; height: 3em; margin-bottom: 20px} .gallery_list .item .text p.date {font-size: 15px; color: #333; font-weight: 400;} .gallery_list .item:hover .text {background: #fafafa;} .gallery_list .item:hover .text p.tit {color:#01458d;} .gallery_list .item:hover .pics img {transform: translate(-50%, -50%) scale(1.1,1.1)} /*브로슈어*/ .brochure_list {position: relative; width: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-start;} .brochure_list .item {width: calc(32% - 8px); margin:1% 1% 2.5% 1%; border: 1px solid #dedede; box-sizing:border-box; transition: 0.3s; border-radius: 5px; overflow: hidden;} .brochure_list .item:nth-of-type(3n) {margin-right: 0} .brochure_list .item .pics {position: relative; min-height: 400px; padding-bottom: 130%; overflow: hidden;} .brochure_list .item .pics img {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; transition: 0.3s;} .brochure_list .item .text {width:100%; box-sizing: border-box; border-top:1px solid #dedede; padding: 20px 30px; background: #fff;} .brochure_list .item .text p {line-height: 1.5;} .brochure_list .item .text p.tit {font-size: 19px; color: #111; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px;} .brochure_list .item .text p.date {font-size: 15px; color: #999; font-weight: 400;} .brochure_list .item:hover .text {background: #fafafa;} .brochure_list .item:hover .text p.tit {color:#01458d;} .brochure_list .item:hover .pics img {transform: translate(-50%, -50%) scale(1.1,1.1)} /*게시판검색*/ *::focuse {outline:none} #board_search__wrap {width: 100%; display: flex; justify-content: space-between; margin-bottom: 25px; margin-top: 80px;} #board_search__wrap #result_shop_num {margin-bottom: 0; padding-top: 25px; background-position: top 27px left;} #board_search__wrap #search {display: flex; flex-wrap: wrap; justify-content: flex-start; position: relative;} #board_search__wrap #search form {display: flex; justify-content: flex-start; position: relative;} #board_search__wrap #search input[type="text"] {width: 100%; height: 60px; background: #fff; border-radius: 5px; border: 1px solid #e4e4e4; font-size: 17px; padding: 0 15px; box-sizing: border-box; padding-right: 70px;} #board_search__wrap #search button {position: absolute;/* top: 0;*/ right: 0; width: 60px; height: 60px; border: 0; background-color: transparent;} #board_search__wrap #search button img {width :20px;} #board_search__wrap select {min-width:150px; height: 60px; border-radius: 5px; margin-right: 10px; font-size: 17px; border: 1px solid #e4e4e4; padding: 0 20px 0 15px; color: #212121; background:url("/assets/img/icon/slider-arrow-down.png") no-repeat right 13px top 50%, #fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-size: 13px} #board_search__wrap select::-ms-expand { display:none; } #result_shop_num {font-size: 17px; color: #777; margin-bottom: 15px;} #result_shop_num strong {color: #01458d;} @media screen and (max-width:980px){ #board_search__wrap {margin-top: 50px;} #board_search__wrap select {height: 60px; font-size: 15px;} #board_search__wrap #search input[type="text"] {height: 60px; line-height: 60px; font-size: 15px;} #board_search__wrap #search button {width: 55px; height: 60px;} .bbs_list__wrap {border-top: 2px solid #222;} .bbs_subject {display: none} .bbs_subject + .bbs_list__wrap {border-top: 3px solid var(--pointColor);} } @media screen and (max-width:768px){ #board_search__wrap {display: block; margin-top: 40px;} #board_search__wrap #result_shop_num {width: 100%; margin-bottom: 10px; padding-top: 0; font-size: 15px;} #board_search__wrap #search {width: 100%;} #board_search__wrap #search input[type="text"] {height: 45px; line-height: 45px; font-size: 14px;} #board_search__wrap #search button {height: 45px; width: 50px;} #board_search__wrap #search button i {font-size: 20px;} #board_search__wrap select {height: 45px; font-size: 14px;} } @media screen and (max-width:430px){ #board_search__wrap #search form {display:block;} #board_search__wrap #search input[type="text"] {margin-top:10px;} #board_search__wrap #search button {width: 60px; height: 75px;} } @media screen and (max-width: 1200px) { .bbs_list__wrap.category .bbsBox .num {width:7%;} .bbs_list__wrap.category .bbsBox .doctor {width:15%;} .bbs_list__wrap.category .bbsBox .title {width:47%;} .bbs_list__wrap.category .bbsBox .part {width:10%} .bbs_list__wrap.category .bbsBox .writer {width:10%} .bbs_list__wrap.category .bbsBox .date {width:10%;} } @media screen and (max-width: 980px) { #search_ver #search input[type="text"] {height: 55px; line-height: 55px; font-size: 15px;} #search_ver #search button {width: 55px; height: 55px;} .bbs_list__wrap .bbsBox {display: block; position: relative; box-sizing: border-box; padding: 14px 0 14px 72px; overflow: hidden;} .bbs_list__wrap .bbsBox div { padding: 0;} .bbs_list__wrap .bbsBox .num {position: absolute; top: 50%; left: 0; transform: translateY(-50%); margin-top: 0; width: 72px !important; min-width: 72px; height: auto; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-align: center;} .bbs_list__wrap .bbsBox .title {padding-left: 0; width: 100%; font-size: 15px; display: block; text-align: left;} #sub_main_contents .bbs_list__wrap .bbsBox .title.bo-list-title .bo-list-title-inner {display: flex; align-items: center; justify-content: flex-start; width: 100%; text-align: left;} .bbs_list__wrap .bbsBox .date {width: auto; text-align:left; display: block;} .bbs_list__wrap .bbsBox .writer {width: auto; text-align:left; display: block; float: left; padding-right:12px;} .bbs_list__wrap.category .bbsBox .doctor {font-size: 14px; width: 100px; float: left; padding-left: 0; margin-bottom: 10px; text-align: left;} .bbs_list__wrap.category .bbsBox .title {width:calc(100vw - 250px); float: left; margin-bottom: 10px; padding-left: 0} .bbs_list__wrap.category .bbsBox .part, .bbs_list__wrap.category .bbsBox .date, .bbs_list__wrap.category .bbsBox .writer {width: auto; text-align:left; display: block; float: left; padding-right:12px; font-size: 14px;} .bbs_list__wrap.category .bbsBox .part {clear: both;} .bbs_list__wrap.qna .bbsBox {display: block;} .bbs_list__wrap.qna .bbsBox .doctor {font-size: 14px; width: auto !important;} .bbs_list__wrap.qna .bbsBox .title {width:100%; padding-left: 0; margin-bottom: 0} .bbs_list__wrap.qna .bbsBox .writer {width: auto;} .bbs_list__wrap.qna .bbsBox .date {width: auto;} } @media screen and (max-width: 768px) { #search_ver {display: block;} #search_ver #resutl_shop_num {width: 100%; margin-bottom: 10px; padding-top: 0; font-size: 15px;} #search_ver #search {width: 100%;} #search_ver #search input[type="text"] { height: 50px; line-height: 50px; font-size: 14px;} #search_ver #search button {background-size: 20px; width: 50px; height: 50px;} .bbs_list__wrap .bbsBox {padding: 12px 0 12px 64px;} .bbs_list__wrap .bbsBox .num {width: 64px !important; min-width: 64px; margin-top: 0; font-size: 14px;} .bbs_list__wrap .bbsBox .title {font-size: 14px; margin-bottom: 0;} .bbs_list__wrap .bbsBox .date {font-size: 12px;} .bbs_list__wrap .bbsBox .writer {font-size: 12px;} .bbs_list__wrap .bbsBox .part {font-size: 12px;} .bbs_list__wrap.category .bbsBox .doctor {width: auto; margin-right: 10px;} .bbs_list__wrap.category .bbsBox .title {width:calc(100vw - 180px);} .bbs_list__wrap.category .bbsBox .doctor, .bbs_list.category .bbsBox .title {font-size: 14px; margin-bottom: 5px;} .bbs_list__wrap.category .bbsBox .part, .bbs_list__wrap.category .bbsBox .date, .bbs_list__wrap.category .bbsBox .writer {font-size: 12px; padding-right: 7px;} } /*페이징*/ #paging {width: 100%; display: flex; justify-content: center; margin-top: 50px; flex-wrap: wrap;} #paging a {display:block; width: 25px; height: 25px; text-align: center; line-height: 25px; font-size: 13px; color: #6b6b6b; margin: 0 5px; box-sizing: border-box;} #paging a.on {color: #000; font-weight: 700;} #paging a.btn {text-indent: -99999px; background-position: center; background-repeat: no-repeat;} #paging a.btn.first {background-image: url("/assets/img/resource/bbs_paging_first.jpg");} #paging a.btn.prev {background-image: url("/assets/img/resource/bbs_paging_prev.jpg");} #paging a.btn.next {background-image: url("/assets/img/resource/bbs_paging_next.jpg");} #paging a.btn.last {background-image: url("/assets/img/resource/bbs_paging_last.jpg");} @media screen and (max-width: 768px) { #paging {margin: 30px 0} #paging a {font-size: 12px; margin: 0 2px;} #paging a.btn {background-size: 45%;} } /*식품사협력*/ .food_benefit {justify-content: space-between; align-items: center;} .food_benefit .pics {width: 35%; text-align: center;} .food_benefit .text {width: 60%;} .food_benefit .text dl {} .food_benefit .text dl +dl {margin-top: 40px} .food_benefit .text dt {position: relative; font-size: var(--font-size-big); color: #212121; padding-left: 40px; box-sizing: border-box; font-weight: 600; margin-bottom: 15px;} .food_benefit .text dt span {width: 30px; height: 30px; line-height: 30px; text-align:center; color: #fff; position: absolute; top: -4px; left: 0; background-color: var(--pointColor); border-radius: 100px; font-size: 15px;} .food_benefit .text dd {font-size: var(--font-size-mid); line-height: 1.4; color: #212121;} .food_benefit .text dd ul {width: 100%; box-sizing: border-box; padding: 20px; border-radius: 20px; background: #fafafa;} .food_benefit .text dd ul li {} .food_benefit .text dd ul li + li {margin-top: 10px; font-size: var(--font-size-nomal);} .food_benefit .text dd ul li img {width: 120px; margin-right: 10px;} @media all and (max-width:980px) { .food_benefit .pics, .food_benefit .text {width: 100%;} .food_benefit .pics {margin-bottom: 20px;} .food_benefit .text dt } /* 20250624 */ .fw-light { font-weight: 300!important; } .fw-normal { font-weight: 400 !important; } .fs-normal { font-size: var(--font-size-nomal); } .sub_visual#sub08 { background-image: url(/assets/img/sub/sub_visual08.jpg); } .material_list.sub_ver.khhp-product_list.flexList { --count: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--y-gap) var(--x-gap); } .material_list.sub_ver.khhp-product_list.flexList > .box { width: auto; min-width: 0; box-sizing: border-box; margin-bottom: 0; } .material_list.sub_ver.khhp-product_list .img { text-align: center; } .double_cut_title { padding: 10px; color: #fff; font-size: var(--font-size-extra); line-height: 1.5em; font-weight: 600; border-radius: 20px 20px 0 0; background-color: var(--pointColor2); text-align: center; } .double_cut_title2 { padding: 10px; color: #fff; font-size: var(--font-size-mid); line-height: 1.5em; font-weight: 600; border-radius: 20px 20px 0 0; background-color: var(--pointColor2); text-align: center; } .double_cut_text { padding: 25px 20px; font-size: var(--font-size-nomal); line-height: 1.5em; background-color: #fafafa; border: solid #e4e4e4; border-width: 0 5px 5px 5px; border-radius: 0 0 20px 20px; text-align: center; } .double_cut_img { padding: 50px; width: 100%; border: solid #e4e4e4; border-width: 0 5px 5px 5px; border-radius: 0 0 20px 20px; box-sizing: border-box; text-align: center; } .double_cut_img img { width: 80%; height: auto; } .khhp_brand_story { text-align: left; background-color: #fff; } .khhp_brand_story.h-338 { min-height: 285px; } .khhp_brand_story.h-161 { min-height: 161px; } .khhp_brand_story p { position: relative; padding-left: 20px; text-align: left; } .khhp_brand_story p::before { position: absolute; top: 6px; left: 0; content: ""; width: 8px; height: 8px; background-color: rgb(25,51,108,1); border-radius: 0; } .khhp_brand_story p + p { margin-top: 10px; } .khhp_brand_story ul { display: flex; align-items: flex-start; justify-content: center; } .khhp_brand_story ul li { flex: 0 0 50%; width: 50%; padding: 10px 16px 0; box-sizing: border-box; text-align: center; } .khhp_brand_story ul li img { max-width: 100%; height: auto; } .khhp_brand_story ul li span { display: block; margin-top: 7px; font-weight: 600; } .khhp_brand_story .img { margin-top: 7px; margin-bottom: 20px; text-align: center; } .khhp_brand_story .img img { width: 37%; } #intro_sec08 { background: url(/assets/img/sub/sub08_01-pic1.jpg) no-repeat center; background-size: cover; } #intro_sec09 { background: url(/assets/img/sub/sub08_01-pic2.jpg) no-repeat center; background-size: cover; } .double_cut_list {border: solid #e4e4e4; border-width: 0 5px 0 5px; box-sizing: border-box; padding: 50px; width: 100%;} .double_cut_list .box {} .double_cut_list .box p {text-align: center; font-size: var(--font-size-mid); color: #212121; font-weight: 700; word-break: keep-all;} .double_cut_list .box p img {margin-bottom: 20px;} .table_title { margin-bottom: 10px; } .table_title p { position: relative; padding-left: 20px; text-align: left; } .table_title p::before { position: absolute; left: 0; top: 50%; content: ""; width: 10px; height: 10px; background-color: rgb(25,51,108,1); border-radius: 0; transform: translateY(-50%); } .table-container { border: 5px solid #e4e4e4; border-radius: 20px; } .table-brand thead tr th { font-weight: 700; background-color: rgb(25,51,108,0.05); } .table-brand thead tr th:first-child { border-radius: 15px 0 0 0; } .table-brand thead tr th:last-child { border-radius: 0 15px 0 0; } .table-brand tbody tr:last-child th { border-radius: 0 0 0 15px; } .table-brand thead tr th:not(:last-child), .table-brand tbody tr th, .table-brand tbody tr td:not(:last-child) { border-right: 1px solid #e4e4e4; } .table-brand tbody tr th { background-color: rgb(25,51,108,0.05); } .table-brand tbody tr th, .table-brand tbody tr td { border-top: 1px solid #e4e4e4; } .table-brand thead tr th, .table-brand tbody tr th, .table-brand tbody tr td { padding: 10px 20px; font-size: var(--font-size-nomal); line-height: 1.5em; text-align: center; } .table-brand tbody tr:first-child td { padding: 30px; } .table-brand tbody tr td img { width: 70%; height: auto; } .table-doublecut tr th { width: 35%; padding: 10px 20px; font-size: var(--font-size-nomal); line-height: 1.5em; font-weight: 700; color: var(--pointColor)!important; border-right: 1px solid #e4e4e4; background-color: rgb(25,51,108,0.05); text-align: center; } .table-doublecut tr:first-child th { border-radius: 15px 0 0 0; } .table-doublecut tr:last-child th { border-radius: 0 0 0 15px; } .table-doublecut tr:not(:last-child) th, .table-doublecut tr:not(:last-child) td { border-bottom: 1px solid #e4e4e4; } .table-doublecut tr td { padding: 10px 20px; font-size: var(--font-size-nomal); line-height: 1.5em; text-align: left; } .khhp_about_card.bg_img { border: none; background-position: center; background-repeat: no-repeat; background-size: cover; } .khhp_about_card { display: flex; box-sizing: border-box; flex-direction: column; justify-content: center; padding: 30px; border-radius: 20px; border: 5px solid #e4e4e4; } .khhp_about_card.h-290 { min-height: 290px; } .khhp_about_card.h-200 { min-height: 200px; } .khhp_about_card strong { margin-bottom: 10px; font-size: var(--font-size-extra); color: var(--pointColor); line-height: 1.3em; text-align: center; } .khhp_about_card p { position: relative; font-size: var(--font-size-mid); line-height: 1.3em; text-align: center; } .khhp_about_card p::before { display: block; margin: 5px auto 15px auto; width: 30px; height: 2px; background: rgb(0, 0, 0, 0.3); content: ''; opacity: 0.5; } .khhp_about_card.bg_img strong { color: #fff; } .khhp_about_card.bg_img p { color: rgb(255, 255, 255, 0.7); } .khhp_about_card.bg_img p::before { display: block; margin: 5px auto 15px auto; width: 30px; height: 2px; background: #fff; content: ''; opacity: 0.5; } .khhp_bio_title { padding: 10px; color: #fff; font-size: var(--font-size-extra); line-height: 1.5em; font-weight: 600; background-color: rgba(0, 0, 0, 0.3); border: solid rgba(255, 255, 255, 0.5); border-width: 1px 1px 0 1px; border-radius: 20px 20px 0 0; text-align: center; } .khhp_bio_title + .service_banner_list { border: solid rgba(255, 255, 255, 0.5); border-width: 1px 1px 1px 1px; border-radius: 0 0 20px 20px; } .service_banner_list .serviceBox.bio { width: 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; height: 395px; } .service_banner_list .serviceBox.bio .text dl dt { padding-top: 88px; } .service_banner_list .serviceBox.bio.part1:hover .text dl dt, .service_banner_list .serviceBox.bio.part2:hover .text dl dt, .service_banner_list .serviceBox.bio.part3:hover .text dl dt { padding-top: 60px; } .service_banner_list .serviceBox.bio.part1 .text dl dt::before { background-image: url(/assets/img/sub/bio_icon01.png); } .service_banner_list .serviceBox.bio.part2 .text dl dt::before { background-image: url(/assets/img/sub/bio_icon02.png); } .service_banner_list .serviceBox.bio.part3 .text dl dt::before { background-image: url(/assets/img/sub/bio_icon03.png); } @media all and (max-width:980px ){ #sub_main_contents > .section.pt0 {padding-bottom: 60px;} .material_list.sub_ver.khhp-product_list.flexList { --count: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); } .material_list.sub_ver.khhp-product_list.flexList > .box { width: auto; } .material_list.sub_ver.khhp-product_list .text p.comm_button { display: block; padding-right: 10px; text-align: right; } .double_cut_img {padding: 30px 5px;} .double_cut_list {justify-content: center; gap:initial; padding: 30px 5px 16px 5px;} .double_cut_list .box {width:50%; margin-bottom: 10px; box-sizing: border-box; padding: 0 5px;} .double_cut_list .box p {font-size: 13px; font-weight: 500;} .double_cut_list .box p.notice {display: none;} .double_cut_list .box p img {margin-bottom: 5px;} .double_cut_img { padding: 30px; } .double_cut_img img { width: 100%; } .table-brand tbody tr td img { width: 100%; } .khhp_brand_story.h-338, .khhp_brand_story.h-161 { min-height: auto; } .khhp_brand_story .img img { width: 30%; } .khhp_brand_story p { padding-left: 15px; } .khhp_brand_story p::before { top: 6px; width: 6px; height: 6px; } .table_title p { padding-left: 16px; } .table_title p::before { width: 8px; height: 8px; } .khhp_about_card.h-290, .khhp_about_card.h-200 { padding: 60px 20px; min-height: auto; } } @media all and (max-width:768px ){ .double_cut_title .fs-small { font-size: var(--font-size-nomal); } .table-doublecut tr th { padding: 10px; } .table-brand tbody tr:first-child td { padding: 20px; } .service_banner_list .serviceBox.bio { width: 100%; flex-basis: 100%; max-width: 100%; height: auto; } .service_banner_list .serviceBox.bio .text dl dt { padding-top: 0; } .service_banner_list .serviceBox.bio.part1:hover .text dl dt, .service_banner_list .serviceBox.bio.part2:hover .text dl dt, .service_banner_list .serviceBox.bio.part3:hover .text dl dt { padding-top: 0; } } @media all and (max-width:500px ){ .double_cut_img { padding: 25px 10px; } .table-brand thead tr th, .table-brand tbody tr th, .table-brand tbody tr td { padding: 10px 5px; } .table-brand tbody tr:first-child td { padding: 10px; } .table-doublecut tr th { padding: 10px; } .table-doublecut tr td { padding: 10px; } } .th-150 { width: 150px; } @media (max-width: 1240px) { .th-150 { width: auto; } } #snb ul.khhp_subWrap .subList { display: none; } @media screen and (min-width:990px){ #snb ul.khhp_subWrap li::after { top: 35px; } #snb ul.khhp_subWrap .subList { display: block; } #snb ul.khhp_subWrap .subList { padding: 0; list-style: none; position: relative; width:100%; top: 10px; left: -15px; display: flex; background: transparent; } #snb ul.khhp_subWrap .subList li { display: inline-block; } #snb ul.khhp_subWrap .subList li:not(:first-child) { margin-left: 40px; } #snb ul.khhp_subWrap .subList li a { position: relative; display: block; font-size: 15px; color: rgba(0, 0, 0, 0.5); line-height: 34px; } #snb ul.khhp_subWrap .subList li a::after { position: absolute; left: 0; bottom: 0; content: ""; width: 0; height: 2px; background-color: var(--pointColor); transition: width 0.3s ease, opacity 0.3s ease; opacity: 0; } #snb ul.khhp_subWrap .subList li.active a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--pointColor); opacity: 1; } #snb ul.khhp_subWrap .subList li a:hover::after { width: 100%; opacity: 1; } #snb ul.khhp_subWrap .subList li a:hover { color: var(--pointColor); } #snb ul.khhp_subWrap .subList li.active a { color: var(--pointColor); } }