@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');


html, body { font-family: 'Pretendard', sans-serif;/* font-family: 'Noto Sans KR', sans-serif; */ font-size:16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height:normal;/* overflow-x: hidden;*/ background: #fffcf5; color: #222;}
::selection {/* background-color: transparent */}
/*body {overflow: hidden;}*/

/* 관리자 (상품 관리, 분류 관리) 버튼 숨기기 */
.btn_admin {display: none;}

/* .poppin {font-family: 'Poppins', sans-serif;}
.serif {font-family: 'Noto Serif', serif;} */
.pretendard {font-family: 'Pretendard', sans-serif;}

.thin {font-weight: 100;}
.light {font-weight: 300;}
.reg {font-weight: 400;}
.md {font-weight: 500;}
.bold {font-weight: 700;}
.black {font-weight: 900;}
.letter0 {letter-spacing: 0}
.center {text-align: center;}
.fff {color: #fff;}
.orange {color: #ff9900;}
.green {color: #022222;}
.sound_only {visibility: hidden; display: none;}

.wrapper {width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px;}
.br_mo {display: none;}
.flex {display: flex; align-items: center;}
.br_block {display: block !important;}
.br_1420 {display: none;}
.br_1024 {display: none;}
.br_768 {display: none;}
.br_540 {display: none;}
.ta_show {display: none;}
.mo_show {display: none;}
.br_imp {display: block !important;}

.plus_btn {width: 40px; height: 40px; border: 1px solid #222; border-radius: 50%; margin: 40px auto 0; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer;}
.plus_btn.no_more {cursor: initial; border: 1px solid #aaa; color: #aaa;}

.swiper-button-next, .swiper-button-prev {margin-top: 0 !important; transform: translateY(-50%);}
.swiper-button-next::after, .swiper-button-prev::after {display: none;}

.line_btn {font-size: 1.125em; padding: 18px 50px; border: 1px solid #222; width: fit-content; margin: 0 auto; transition: background .3s, color .3s;}
.line_btn:hover {background: #222; color: #fff;}

.sub_padding {padding-top: 80px;}
.sub_category {margin: 180px 0 50px; font-size: 1em; font-weight: 300; display: flex; align-items: center; color: #555;}
.sub_category a:not(:last-child) {color: #ccc;}
.sub_category a:not(:last-child)::after {content: ">"; color: inherit; margin: 0 20px;}

.sub_title_wrap {display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 70px; flex-wrap: wrap;}
.sub_title_wrap .sub_tittle {font-size: 3em;}
.sub_title_wrap .sub_rt {font-size: 1.3125em; font-weight: 300;}
.sub_title_wrap .sub_rt .month_wrap {display: flex; align-items: baseline; column-gap: 35px;}
.sub_title_wrap .sub_rt .month_wrap .month_arrow {font-size: 1.5em; cursor: pointer; padding: 0 10px;}
.sub_title_wrap .sub_rt .month_wrap .now_month {display: flex; align-items: baseline; column-gap: 10px;}
.sub_title_wrap .sub_rt .month_wrap .now_month span.month {font-size: 1.3125em;}
.sub_title_wrap .sub_rt .month_wrap .now_month span.year {font-size: 1.8125em;}

.sub_eng_title {font-size: 3.3125em; margin: 240px 0 50px; text-align: center;}
.mypage_title {font-size: 3.3125em; margin: 240px 0 70px;}
.back_grey_btn {background: #222; color: #fff; font-size: 1.125em; font-weight: 300; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; max-width: 680px; margin: 0 auto;}

.form_box:not(:last-child) {margin-bottom: 15px;}
.form_box input,
.form_box textarea,
.form_box select {border: 1px solid #ccc; width: 100%; height: 55px; padding: 0 20px 0 40px; font-weight: inherit;}
.form_box input::placeholder,
.form_box textarea::placeholder {color: #222; font-weight: 300;}
.form_box textarea {background: transparent; padding-top: 15px; height: 280px;}
.form_box select {background: url(/img/sub05/arrow_down.png) no-repeat center right 40px; background-size: 13px;}
.form_box.essential {position: relative;}
.form_box.essential::before {content: "*"; display: block; position: absolute; color: #ff5151; top: 2px; left: 7px;}
.form_box.btn_form_box {display: flex;}
.form_box.btn_form_box input {width: calc(100% - 140px); border-right: 0;}
.form_box.btn_form_box.border_form_box input {width: 100%; border-right: 1px solid #ccc;}
.form_box.img_form_box input[type="file"] {display: none;}
.form_box.img_form_box input::placeholder {color: #ccc;}
.form_box.btn_form_box button,
.form_box.btn_form_box label {width: 140px; background: #222; color: #fff; cursor: pointer; font-size: inherit; text-align: center; line-height: 55px;}
p.img_box_info {font-size: 0.9375rem; margin: 15px 0;}


/* 게시판 */
.gallery_list {display: flex; flex-wrap: wrap; gap: 20px;}
.gallery_list li {width: calc(25% - 60px / 4);transition: box-shadow .3s ease-in-out;position: relative;border: 1px solid #ccc;}
.gallery_list li .thumb {position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 100%;display: block;}
.gallery_list li .thumb img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform .3s ease-in-out, filter .3s;z-index: 2;display: block;}
.gallery_list li .thumb::after {/* content: ""; */display: block;position: absolute;top: 0;left: 0;background: rgba(34, 34, 34, 0.3);width: 100%;height: 100%;opacity: 0;transition: opacity .3s;}
.gallery_list li .thumb::before {/* content: ""; */display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid #ccc;border-bottom: 0;box-sizing: border-box;z-index: 1;}
.gallery_list li .list_txt_wrap {/* border: 1px solid #ccc; */border-top: 0;min-height: 240px;padding: 35px 20px 25px;display: flex;flex-direction: column;justify-content: space-between;transition: background .3s, border .3s;}
.gallery_list li .list_txt_wrap .title {
  font-size: 1.3125em;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.gallery_list li .list_txt_wrap .date {
  font-size: 1em; font-weight: 300; margin-top: 5px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.gallery_list li .list_txt_wrap .cont {margin: 20px 0; font-size: 1em; font-weight: 300; line-height: 160%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.gallery_list li .list_txt_wrap .moreBtn {font-size: 0.8125em; font-weight: 300; transition: font-weight .3s;}
.gallery_list li:hover .list_txt_wrap .moreBtn {font-weight: 700;}
.gallery_list li:hover .list_txt_wrap .moreBtn {animation-name: moreBtnMove; animation-duration: 1s; animation-fill-mode: forwards; animation-direction: alternate;}
.gallery_list li:hover .list_txt_wrap {background: rgba(34, 34, 34, 0.3); border-color: #999;}
.gallery_list li:hover .thumb::after {opacity: 1;}



#designer .gallery_list {display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 65px;}
#designer .gallery_list li {width: calc((100% - 80px)/3); transition: box-shadow .3s ease-in-out; position: relative;}
#designer .gallery_list li .thumb {position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 136.365%;}
#designer .gallery_list li .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-in-out, filter .3s; z-index: 2;}
#designer .gallery_list li .thumb::after {content: ""; display: block; position: absolute; top: 0; left: 0; background: rgba(34, 34, 34, 0.3); width: 100%; height: 100%; opacity: 0; transition: opacity .3s;}
#designer .gallery_list li .thumb::before {content: ""; display: block; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; border: 1px solid #ccc; border-bottom: 0; box-sizing: border-box; z-index: 1;}
#designer .gallery_list li .list_txt_wrap {border: 1px solid #ccc; border-top: 0; min-height: 240px; padding: 35px 20px 25px; display: flex; flex-direction: column; justify-content: space-between; transition: background .3s, border .3s;}
#designer .gallery_list li .list_txt_wrap .title {
  font-size: 1.3125em;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
#designer .gallery_list li .list_txt_wrap .date {
  font-size: 1em; font-weight: 300; margin-top: 5px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
#designer .gallery_list li .list_txt_wrap .cont {margin: 20px 0; font-size: 1em; font-weight: 300; line-height: 160%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
#designer .gallery_list li .list_txt_wrap .moreBtn {font-size: 0.8125em; font-weight: 300; transition: font-weight .3s;}
#designer .gallery_list li:hover .list_txt_wrap .moreBtn {font-weight: 700;}
#designer .gallery_list li:hover .list_txt_wrap .moreBtn {animation-name: moreBtnMove; animation-duration: 1s; animation-fill-mode: forwards; animation-direction: alternate;}
#designer .gallery_list li:hover .list_txt_wrap {background: rgba(34, 34, 34, 0.3); border-color: #999;}
#designer .gallery_list li:hover .thumb::after {opacity: 1;}



@keyframes moreBtnMove {
  0% {margin-left: 0;}
  50% {margin-left: 10px;}
  100% {margin-left: 0;}
}

.gallery_list.square_list .thumb {padding-bottom: 100%;}

.normal_table_wrap table {text-align: center; font-weight: 300; font-size: 1.3125em;}
.normal_table_wrap table thead th {height: 90px; font-weight: normal;}
.normal_table_wrap table .td_2 {text-align: left; padding-left: 10%;}
.normal_table_wrap table .td_5 {text-align: right;}
.normal_table_wrap table tbody {border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;}
.normal_table_wrap table tbody::before {content: ''; display: block; height: 15px;}
.normal_table_wrap table tbody::after {content: ''; display: block; height: 15px;}
.normal_table_wrap table td {height: 80px;}
.normal_table_wrap table th:last-child,
.normal_table_wrap table td:last-child {text-align: right;}
.normal_table_wrap .td_2 a {/* height: 100%; */ display: inline-flex; align-items: center;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;  
}
.normal_table_wrap .td_2:hover a {text-decoration: underline; text-decoration-thickness: 1px;}
.normal_table_wrap tr.significant .td_1 i {font-size: 1.325em; font-weight: 700;}
.normal_table_wrap tr.significant .td_2 a {font-weight: 700;}

/* 뉴스 게시판 */
.news_list li {transition: box-shadow .3s ease-in-out;}
.news_list li:not(:last-child) {margin-bottom: 95px;}
.news_list li:hover {box-shadow: 0 0 35px rgba(34, 34, 34, 0.08);}
.news_list li a {display: flex;}
.news_list li .thumb {width: 42%; position: relative; overflow: hidden; height: 0; padding-bottom: 34%;}
.news_list li .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-in-out, filter .3s ease-in-out;}
.news_list li .thumb .board_date {position: absolute; top: 50%; transform: translateY(-50%); right: 0; background: #fffcf5; text-align: center; padding: 22px 22px 24px 28px; text-align: center;}
.news_list li .thumb .board_date .month {font-size: 2em;}
.news_list li .thumb .board_date .day {font-size: 3.3125em;}
.news_list li .list_txt_wrap {width: 58%; padding: 20px 55px; display: flex; align-items: center; border: 1px solid #ccc; border-left: 0; box-sizing: border-box;}
.news_list li .list_txt_wrap .title {font-size:  2em; margin-bottom: 40px; line-height: 135%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.news_list li .list_txt_wrap .desc {font-size: 1.3125em; font-weight: 300; color: #8e8e8e; line-height: 170%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.news_list li:hover .thumb img {transform: scale(1.05) translate(-50%, -50%); filter: brightness(0.8);}
.news_list li:hover .list_txt_wrap .title {text-decoration: underline; text-decoration-thickness: 2px;}

.normal_view .news_img {display: none;}
.normal_view .news_sum {padding-bottom: 120px; /* padding: 135px 0 120px; */}
.normal_view .news_sum .title {font-size: 2.3125em; margin-bottom: 130px;}
.normal_view .news_sum .desc {font-size: 1.3125em; line-height: 180%; color: #ff9900; font-weight: 300;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.normal_view .news_sum .hit {font-size: 1.3125em; line-height: 180%; text-align: right;}
.normal_view .news_cont {border-top: 1px solid #ccc; color: #8e8e8e; padding: 110px 0 190px; font-size: 1.3125em; line-height: 160%; font-weight: 300; word-break: break-all;}
.normal_view .news_cont * {background: transparent !important;}
.normal_view .news_cont table {width: 100% !important;}
.normal_view .news_write_info {color: #8e8e8e; padding-bottom: 100px; font-size: 1.3125em; line-height: 160%; font-weight: 300;}

#galleryDetail .wrapper {max-width: unset; display: flex; align-items: center; height: 105px; padding: 0 20px; margin: 0;}
#galleryDetail .sub_title_wrap {margin-bottom: auto;  flex: 0 0 50%; padding-left: 20px; height: 100%;padding-top: 24px;border-right: 1px solid #E0E0E0; }
#galleryDetail .sub_title_wrap .sub_tittle {color: #222; font-size: 48px;}
#galleryDetail .sub_category {padding-left: 20px; margin-bottom:auto; margin-top: 20px; }
#galleryDetail .container {display: flex; align-items: flex-start; }
#galleryDetail .left {flex: 0 0 50%; order: 0;position: relative; z-index: 1;}
#galleryDetail .left img {display: block; width: 100%;}
#galleryDetail .right {flex: 0 0 50%; order: 1;position: sticky; top: 185px; right: 0; padding: 0 80px 60px;}
#galleryDetail .right .info {}
#galleryDetail .right .info .name {font-size: 34px; font-weight: 500; color: #222; margin-bottom: 16px;}
#galleryDetail .right .info .date {font-size: 18px; color: #8C8C8C; margin-bottom: 56px;}
#galleryDetail .right .info .txt {font-size: 16px; line-height: 150%; color: #444; margin-bottom: 145px;}
#galleryDetail .right .prod {display: flex; flex-direction: column; gap: 24px;}
#galleryDetail .right .prod .title {color: #222; font-size: 22px; font-weight: 500; display: flex; align-items: center; column-gap: 4px;}
#galleryDetail .right .prod .prodList:not(.mobile-only) {display: flex; gap: 20px;}
#galleryDetail .right .prod .prodList .link {width: 100%; display: flex; flex-direction: column; max-width: calc(25% - 60px / 4); gap: 12px; color: #222; font-size: 18px; font-weight: 500; line-height: 26px;}
#galleryDetail .right .prod .prodList .imgWrap {position: relative; overflow: hidden;width: 100%;height: 0;padding-bottom: 100%;display: block; }
#galleryDetail .right .prod .prodList .imgWrap img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 2;display: block;}
#galleryDetail .pc-only { display: block; }
#galleryDetail .mobile-only { display: none; }



/* 상단 */
#header {width:100%; background: transparent; position: fixed; top: 0; left: 0; z-index: 99999; height: 80px; border-bottom: 1px solid #222; color: #222; transition: color .3s, background .3s;}
#header .wrapper {max-width: 1700px; height: 100%; display: flex; align-items: center;}
#header .wrapper .flex {display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; position: relative;}
#header .wrapper .logo {height: 100%; display: flex; align-items: center; position: relative;}
#header .wrapper .logo img {transition: opacity .3s; /* max-width: 100px; */ max-width: 120px;}
#header .wrapper .logo img.logo_w {position: absolute; left: 0; opacity: 0;}
#header .wrapper .flex .header_rt {height: 100%; display: flex; align-items: center;}
#header .header_nav {justify-self: center; position: relative;}
#header nav {position: relative; font-size: 1.0625em; text-align: center; height: 100%; display: flex; align-items: center;}
#header nav ul.depth1 {display: flex; align-items: center; height: 100%; /* column-gap: 40px; */}
#header nav ul.depth1 li {position: relative; height: 100%;}
/* #header nav ul.depth1 li::after {content: ""; display: block; width: 100%; height: 2px; background: #ff9900; position: absolute; bottom: -1px; left: 0; opacity: 0; transition: opacity .3s;}
#header nav ul.depth1 li:hover::after {opacity: 1;} */
#header nav ul.depth1 li a {width: fit-content; height: 100%; display: flex; align-items: center; position: relative;}
#header nav ul.depth1 li a::after {content: ""; display: block; width: 100%; height: 2px; background: #ff9900; position: absolute; bottom: -1px; left: 0; opacity: 0; transition: opacity .3s;}
#header nav ul.depth1 li:hover a::after {opacity: 1;}
#header nav ul.depth2 {display: flex; /* column-gap: 40px; justify-content: center; */ display: none; align-items: flex-start; text-align: left; position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); padding: 60px 0 160px; color: #fff;}
#header nav ul.depth2::before {content: ""; display: block; background: rgba(34, 34, 34, 0.7); width: 200vw; height: 100%; position: absolute; top: 0; left: -100vw;}
#header nav ul.depth2 li {width: max-content; position: relative; transition: opacity .3s;}
#header nav ul.depth2 li a {font-weight: 300; font-size: 1.125rem; padding: 10px 0; transition: color .3s;}
#header nav ul.depth2 li a:not(:last-child) {margin-bottom: 10px;}
#header nav ul.depth2 li a:hover {color: #ff9900;}
#header nav ul.depth1, #header nav ul.depth2 {width: 750px;/* width: 900px; */ justify-content: space-between;}
#header nav ul.depth1 li, #header nav ul.depth2 li {width: 20%;}
#header nav ul.depth1 li:last-child, #header nav ul.depth2 li:last-child {width: 91px;}

#header.header_b {background: rgba(34, 34, 34, 0.7); color: #fff; border-bottom: 1px solid #fff;}
#header.header_b .logo img.logo_w {opacity: 1;}
#header.header_b .logo img.logo_b {opacity: 0;}
#header .header_login {display: flex; align-items: center; column-gap: 20px; font-size: 0.8125em;}
#header .header_login a.nomember_btn {text-align: center;}

#header .herman_logo {margin-left: 50px; transform: translateX(10px);}
#header .herman_logo img {width: 140px;}
#header .header_login #searchBtn svg path {transition: .3s;}
#header.header_b .header_login #searchBtn svg path {stroke:#fff;}

#search_text_wrap {display: none; background: rgba(0, 0, 0, 0.60); width: 200vw; height: 320px; position: absolute; top: 0; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);}
#search_text_wrap .row-32 {display: flex; flex-direction: column; gap: 32px; align-items: center; max-width: 800px; width: 100%; margin: 0 auto; padding: 92px 0;}
#search_text_wrap .tit {font-size: 40px; font-weight: 500; color:#fff;}
#search_text_wrap .search_text {border: 4px solid var(--Colors-Grey-Color-Light-Base10, #FFF); width: 100%; padding-left: 24px; padding-right: 12px; display: flex; align-items: center; justify-content: space-between; height: 64px;}
#search_text_wrap .search_text #search_text {font-size: 15px; color: #fff; font-weight: 500; width: 100%;}
#search_text_wrap .search_text #search_text::placeholder {color: #C4C4C4;}

/* 모바일 헤더 */
#header {width:100%; background: transparent; position: fixed; top: 0; left: 0; z-index: 99999; height: 80px; border-bottom: 1px solid #222; color: #222; transition: color .3s, background .3s;}
#moHeader {display: none; width: 100%; background: #fffcf5; position: fixed; top: 0; left: 0; z-index: 99999; border-bottom: 1px solid #000; color: #222; font-size: 20px;}
#moHeader .wrapper {height: 60px; display: flex; justify-content: space-between; align-items: center; position: relative;}
#moHeader .logo {max-width: 100px; position: absolute; left: 50%; transform: translateX(-50%);}
#moHeader .herman_logo {position: absolute; right: 20px; max-width: 90px;}
#hamWrap {position: fixed; left: 0; top: 61px; width: 100%; height: calc(100vh - 61px); z-index: 99999; display: none;}
#hamWrap.show {display: none;}
#hamWrap .ham_bg {width: 100%; min-height: 100vh; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; z-index: -1;}
#hamWrap .hamCate {background: #fffcf5; padding: 20px 20px 40px 20px; font-size: 1.25rem; font-weight: 300; width: fit-content; min-width: 300px; max-height: clac(100vh - 61px); overflow-y: scroll;}
#hamWrap .hamCate ul:not(:last-child) {margin-bottom: 50px;}
#hamWrap .hamCate .depth1, #hamWrap .hamCate .depth2 a {padding: 10px 0; text-transform: uppercase;}
#hamWrap .hamCate .depth1.open .depth_title {color: #ff9900;}
#hamWrap .hamCate .depth1 {display: flex; justify-content: space-between; align-items: center;}
#hamWrap .hamCate .depth1 .toggle_btn {color: #ccc; transform: translateY(-2px);}
#hamWrap .hamCate .depth1 .toggle_btn i {font-size: 18px;}
#hamWrap .hamCate .depth2 {display: none; padding-left: 10px;}

.hamburger .line{
  width: 20px;
  height: 2px;
  background-color: #222;
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover{cursor: pointer;}

.hamburger.is-active{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hamburger.is-active .line:nth-child(2){width: 0px;}
.hamburger.is-active .line:nth-child(1),
.hamburger.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(7px);
  -ms-transform: translateY(7px);
  -o-transform: translateY(7px);
  transform: translateY(7px);
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-7px) rotate(90deg);
  -ms-transform: translateY(-7px) rotate(90deg);
  -o-transform: translateY(-7px) rotate(90deg);
  transform: translateY(-7px) rotate(90deg);
}

.floating_wrap {position: fixed; right: 50px; top: 150px; z-index: 99998; display: flex; align-items: center; flex-direction: column;}
.floating_wrap .floatBtn {height: 100px; position: relative;}
.floating_wrap .floatBtn img {height: 100%;}
.floating_wrap .floatBtn img.hover {position: absolute; top: 0; right: 0; width: max-content; max-width: 200px; margin-right: 1px; opacity: 0;}
.floating_wrap .floatBtn:hover img.org {opacity: 0;}
.floating_wrap .floatBtn:hover img.hover {opacity: 1;}
.floating_wrap .floatBtn img.mo {display: none;}
.floating_wrap .goTopBtn {width: 84px; height: 84px; margin-top: 5px; display: flex; align-items: center; justify-content: center; transition: .3s; font-size: 3.5rem; cursor: pointer;}
/* .floating_wrap .goTopBtn {width: 84px; height: 84px; border-radius: 5px; background: #fff; border: 1px solid #e6e6e6; margin-top: 5px; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; font-size: 3.5rem; cursor: pointer;} */
.floating_wrap .goTopBtn:hover {color: #f93b1d;height: 64px;}
.floating_wrap .goQnaBtn {width: 84px; height: 84px; border-radius: 5px; background: #fff; border: 1px solid #e6e6e6; margin-top: 5px; display: flex; align-items: center; justify-content: center; /* transition: background .3s, color .3s; */ font-size: 2rem; cursor: pointer;}
.floating_wrap .goQnaBtn:hover {background: #333; color: #fff;border: 1px solid #333;}

.topBtn { position: fixed; right: 50px; bottom: 50px;  z-index: 10000; font-size: 36px; border: 1px solid #222; color: #222; background: #fffcf5; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background .3s, color .3s; display: none !important;}
.topBtn:hover {background: #222; color: #fff;}



/* 하단 */
#footer {padding-top: 150px;}
#footer > * {border-top: 1px solid #ccc;}
#footer .wrapper {max-width: 1340px;}
#footer .footer_nav .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer .footer_nav .depth1 {border-bottom: 1px solid #ccc; padding: 30px 0;}
#footer .footer_nav .depth1 .wrapper {font-weight: 500; font-size: 1.125em;}
#footer .footer_nav li {width: 20%;}
#footer .footer_nav li:nth-child(5) {width: 95px;}
#footer .footer_nav .depth2 {padding-top: 40px; font-size: 1.0625em; font-weight: 300;}
#footer .footer_nav .depth2 .depth1 {display: none;}
#footer .footer_nav .depth2 a:not(:last-child) {margin-bottom: 20px;}
#footer .bank_info {font-size: 1.125em; line-height: 180%; color: #7e7e7e; padding: 70px 0 30px; border-top: 0;}
#footer .footer_search {padding: 35px 0;}
#footer .footer_search .wrapper {position: relative; padding-right: 75px;}
#footer .footer_search input {width: 100%; height: 30px; font-size: 1.3125em;}
#footer .footer_search input::placeholder {color: #ccc; letter-spacing: 0.3em;}
#footer .footer_search button {position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
#footer .footer_search button img {width: 32px;}
#footer .footer_info .wrapper {display: flex; flex-wrap: wrap; font-size: 1em; font-weight: 300; padding: 25px 20px 20px; row-gap: 8px; color: #7e7e7e;}
#footer .footer_info p {min-width: 25%; width: 25%;}
#footer .footer_info a {display: inline-block;}
#footer .address_copy {font-size: 1.125em; color: #7e7e7e; padding: 35px 0 50px; text-align: center;}


/* pagination */
button {border: 0; background: none; outline: 0; font-family: inherit;}
button:focus {outline: 0;}
.pager {text-align: center; width: 100%; display: inline-flex; justify-content: space-between; align-items: center; margin-top: 130px;}
.pager button {cursor: pointer; font-size: 1.3125em; transition: all 0.2s; color: #ccc; font-weight: 500;}
.pager button.page.now {color: #222; margin-right: 10px;}
.pager button.page.all::before {content: "/"; display: inline-block; color: #ccc; margin-right: 10px;}
.pager button.pager-btn.active {color: #222;}
.pager button.pager-btn:hover {color: #222;}

.popup_bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.3); display: none; z-index: 100;}
.popup {display: none; width: 800px; position: fixed; top: calc(50% + 40px); left: 50%; transform: translate(-50%, -50%); background: #fff; color: #222; padding: 60px 50px; z-index: 1000;}
.popup.video_pop {background: transparent; padding: 0;}
.pop_video_wrap {width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden;}
.pop_video_wrap iframe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.pop_video_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.popup .x_btn {color: #fff; font-size: 45px; position: absolute; display: inline-block; top:
-60px; right: 0; cursor: pointer; z-index: 1000;}

/* 게시판 검색바 */
.search_bar {text-align: center; margin: 0 auto; margin-top: 75px; display: flex; align-items: stretch; justify-content: center; border: 1px solid #ccc; width: fit-content; border-radius: 20px; overflow: hidden;}
.search_bar input {width: 350px; height: 65px; text-align: center; font-size: 1.3125em; font-weight: 300; border-radius: 20px 0 0 20px;}
.search_bar input::placeholder {color: #ccc;}
.search_bar input:focus {border: 1px solid #222;}
.search_bar button {background: #222; color: #fff; width: 100px; text-align: center; transition: opacity .3s; border-radius: 0 20px 20px 0;}
.search_bar button:hover {opacity: 0.8;}
.search_bar + .pager {margin-top: 40px;}

/* 자주묻는질문 */
.qnas > div {padding: 25px 15px 25px 30px; font-size: 1.25em;}
.qnas .qna-title {background: rgba(255,255,255,0.05); border-bottom: 1px solid #e6e6e6; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline;}
.qnas .qna-title .question {width: calc(100% - 90px); font-weight: bold;}
.qnas .qna-answer {padding: 30px 80px 55px 85px; display: none; background: #F8F8F8;border-bottom: 1px solid #e6e6e6; line-height: 160%;}
.qnas .qna-answer p {width: calc(100% - 55px);}
.qnas .qna-title > i {float: right; font-size: 36px; align-self: center;}
.q_circle {font-size: 20px; margin-right: 15px; width: 40px; height: 40px; border-radius: 50%; display: inline-block; text-align: center; font-weight: 900; background: #aaa; color: #fff; line-height: 37px;}
.a_circle {font-size: 20px; margin-right: 15px; width: 40px; height: 40px; border-radius: 50%; display: inline-block; text-align: center; font-weight: 900; background: #FFC600; color: #fff; line-height: 37px;}
.on .q_circle {background: #2DA555;}

p.file_info.dot_p {color: #5a5a5a; font-size: 1rem; line-height: 170%;}

/* 탭 */
#shop .community_tab_list {display: flex; column-gap: 20px; margin: 275px 0 80px;}
#shop .community_tab_list a {width: 100px; height: 40px; border: 1px solid #ccc; font-size: 0.8125em; font-weight: 300; transition: border .3s; display: flex; align-items: center; justify-content: center;}
#shop .community_tab_list a:hover {border: 1px solid #222;}
#shop .community_tab_list a.active {background: #222; border: 1px solid #222; color: #fff;}


/* 기업용 페이지 */
#partnerCode .wrapper {padding-top: 170px; text-align: center;}
#partnerCode .top .title {font-size: 3em; font-weight: 500; margin-bottom: 30px; font-family: 'Poppins', sans-serif; line-height: 130%; letter-spacing: -0.05em;}
#partnerCode .top .kor {font-size: 2em;}
#partnerCode .top .banner {margin: 100px 0 60px;}
#partnerCode .top .desc {font-size: 1.625em; font-weight: 500; line-height: 160%;}
#partnerCode .top input {width: 440px; height: 65px; border: 1px solid #000; padding: 0 20px; margin: 60px auto 30px; font-size: 1.5em; text-align: center;}
#partnerCode .top input:focus {border-color: #ff9900; color: #ff9900;}
#partnerCode .top button#codeSubmitBtn {width: 200px; height: 47px; color: #222; background: #ff9900; font-size: 1.3125em; display: block; margin: 0 auto;}
#partnerCode .txt_wrap {margin: 170px 0 150px; text-align: left;}
#partnerCode .txt_wrap > div:not(:last-child) {margin-bottom: 80px;}
#partnerCode .txt_wrap > div .title {font-size: 1.875em; font-weight: 500; margin-bottom: 20px;}
#partnerCode .txt_wrap > div .desc {font-size: 1.625em; font-weight: 300; line-height: 135%;}
#partnerCode .txt_wrap > div .desc p:not(:last-child) {margin-bottom: 15px;}

#partnerCode .prd_list_wrap {margin-top: 180px;}

#partnerCode .shop_prd_list {display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 75px; margin-bottom: 0 !important; text-align: left;}
#partnerCode .shop_prd_list li.prd_layout1 {width: calc((100% - 60px)/4);}
#partnerCode li .prd_thumb {width: 100%; height: 500px; position: relative; border: 1px solid #ccc; box-sizing: border-box;}
#partnerCode li .prd_thumb::before {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(34, 34, 34, 0.12); width: 100px; height: 100px; border-radius: 50%; opacity: 0; transition: all .3s ease-in-out, opacity 1s ease-in-out;}
#partnerCode li:hover .prd_thumb::before {opacity: 1; width: 100%; height: 100%; border-radius: 0;}
#partnerCode li .prd_thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 70%; max-height: 70%;}
#partnerCode li .prd_thumb .prd_icon_wrap {position: absolute; right: 15px; bottom: 15px; display: flex; align-items: center; column-gap: 15px; visibility: hidden; opacity: 0; transition: all .5s;}
#partnerCode li .prd_thumb .prd_icon_wrap i {font-size: 1.3125em; transition: opacity .3s;}
#partnerCode li .prd_thumb .prd_icon_wrap {visibility: visible; opacity: 1;}
#partnerCode li .prd_thumb .prd_icon_wrap > div:hover i {opacity: .5;}
#partnerCode li .prd_info {padding-top: 30px;}
#partnerCode li .prd_name,
#partnerCode li .prd_cost {font-size: 1.3125em; font-weight: 500;}
#partnerCode li .prd_color {font-size: 1em; font-weight: 300}
#partnerCode li .prd_cost {padding-top: 30px;}
#partnerCode li .prd_cost span.unit {margin-left: 5px;}

/* 주문완료 */
#shop .order_end_wrap {width: 100%; max-width: 900px; text-align: center; margin: 150px auto 0; border: 1px solid #ccc; padding: 70px 20px;}
#shop .order_end_wrap .big {font-size: 2em; line-height: 140%;}
#shop .order_end_wrap .line {width: 40px; height: 1px; background: #999; margin: 25px auto 35px;}
#shop .order_end_wrap .desc {line-height: 150%;}
#shop .order_end_wrap .desc p.md {font-size: 1.25em;}
#shop .order_end_wrap .desc p:not(:last-child) {margin-bottom: 25px;}
#shop .order_end_wrap .desc p.grey {font-size: 1.125em; color: #999;}
#shop .orderend_wrap .order_end_btns {display: flex; justify-content: center; align-items: center; column-gap: 30px; margin: 35px auto 0;}
#shop .orderend_wrap .order_end_btns > a {width: 200px; margin: 0;}



@media screen and (max-width: 1440px) {
  #header nav ul.depth1, #header nav ul.depth2 {width: 670px;}
  #partnerCode li .prd_thumb {height: auto; padding-bottom: 160%;}
}

@media screen and (max-width: 1420px) {
  .br_1420 {display: block;}

  .gallery_list li .list_txt_wrap .cont br {display: none;}

  .normal_table_wrap table {font-size: 1.125em; table-layout: fixed;}
  .normal_table_wrap table thead th {height: 80px;}
  .normal_table_wrap table td {height: 70px;}
}

@media screen and (max-width: 1240px) {
  #header {display: none;}
  #moHeader {display: block;}
  #hamWrap.show {display: block;}

  .news_list li .thumb {padding-bottom: 360px;}
  .news_list li .thumb .board_date {padding: 25px 18px 20px 20px;}
  .news_list li .thumb .board_date .month {font-size: 1.625em;}
  .news_list li .thumb .board_date .day {font-size: 2.875em;}
  .news_list li .list_txt_wrap {padding: 20px 40px;}
  .news_list li .list_txt_wrap .title {font-size: 1.625em; margin-bottom: 4%;}
  .news_list li .list_txt_wrap .desc {font-size: 1.125em; line-height: 160%;}
  .news_list li .list_txt_wrap .desc br {display: none;}

  #partnerCode .txt_wrap > div .desc br {display: none;}
  #partnerCode .top .desc {font-size: 1.325em;}

  .floating_wrap {right: 30px; top: 110px;}
  .floating_wrap .floatBtn {height: 90px;}
  .floating_wrap .goTopBtn {width: 78px; height: 78px; font-size: 3.25rem;}
  .floating_wrap .floatBtn:hover img.hover {max-width: 180px;}
  .floating_wrap .goQnaBtn {width: 78px; height: 78px; font-size: 2rem;}

}


@media screen and (max-width: 1024px) {
  
  .br_1024 {display: block;}
  .popup {top: calc(50% + 30px);}

  .sub_padding {padding-top: 61px;}
  .sub_category {margin: 18% 0 5%; font-size: 15px;}
  .sub_title_wrap {margin-bottom: 7%;}
  .sub_title_wrap .sub_tittle {font-size: 2.75em;}
  .sub_title_wrap .sub_rt {font-size: 1.25em;}
  .sub_title_wrap .sub_rt .month_wrap {column-gap: 25px;}
  .sub_title_wrap .sub_rt .month_wrap .month_arrow {font-size: 1.325em;}
  .sub_title_wrap .sub_rt .month_wrap .now_month span.month {font-size: 1.25em;}
  .sub_title_wrap .sub_rt .month_wrap .now_month span.year {font-size: 1.75em;}
  
  #footer .footer_info p {width: auto; min-width: 33.3333%;}
  #footer .footer_search .wrapper {padding-right: 65px;}
  #footer .footer_search button img {width: 25px;}

  .line_btn {padding: 16px 45px; font-size: 1.05em;}
  .pager {margin-top: 13%;}

  .gallery_list {column-gap: 30px; row-gap: 55px;}
  .gallery_list li {width: calc((100% - 60px)/3);}
  .gallery_list li .list_txt_wrap {min-height: 200px; padding: 25px 20px 20px;}
  .gallery_list li .list_txt_wrap .title {font-size: 1.2em;}
  .gallery_list li .list_txt_wrap .date {font-size: 0.875em; margin-top: 3px;}
  .gallery_list li .list_txt_wrap .cont {font-size: 0.95em; line-height: 150%;}


  .normal_view .news_sum {padding-bottom: 12%;}
  .normal_view .news_sum .title {font-size: 1.875em; margin-bottom: 12%;}
  .normal_view .news_sum .desc {font-size: 1.25em;}
  .normal_view .news_sum .hit {font-size: 1.25em; text-align: right;}
  .normal_view .news_cont {padding: 11% 0 18%; font-size: 1.25em;}
  .normal_view .news_write_info {padding-bottom: 10%; font-size: 1.25em;}

  .news_list li:not(:last-child) {margin-bottom: 5%;}

  .form_box.btn_form_box input {width: calc(100% - 100px);}
  .form_box.img_form_box input::placeholder {font-size: 0.9rem;}
  .form_box.btn_form_box button, .form_box.btn_form_box label {width: 100px; line-height: 50px; font-size: 0.95rem;}
  .form_box input, .form_box textarea, .form_box select {height: 50px; padding: 0 15px 0 30px;}
  .form_box textarea {height: 200px; padding-top: 12px;}
  .form_box select {background: url(/img/sub05/arrow_down.png) no-repeat center right 20px; background-size: 11px;}

  .normal_table_wrap table {font-size: 1em;}
  .normal_table_wrap table thead th {height: 70px;}
  .normal_table_wrap table td {height: 60px;}

  .search_bar + .pager {margin-top: 4%;}

  .sub_eng_title {font-size: 3em; margin: 24% 0 5%;}

  .back_grey_btn {font-size: 17px;}

  #shop .community_tab_list {margin: 20% 0 10%; column-gap: 15px; row-gap: 10px; flex-wrap: wrap;}

  #partnerCode li .prd_info {padding-top: 7%;}
  #partnerCode li .prd_cost {padding-top: 7%;}
  #partnerCode .shop_prd_list li.prd_layout1 {width: calc((100% - 40px)/3);}
  #partnerCode li .prd_name, #partnerCode li .prd_cost {font-size: 18px;}
  #partnerCode li .prd_color {font-size: 15px;}

  .floating_wrap {right: 20px; top: 100px;}
  .floating_wrap .floatBtn {height: 80px;}
  .floating_wrap .goTopBtn {width: 67px; height: 67px; font-size: 3rem;}
  .floating_wrap .floatBtn:hover img.hover {max-width: 160px;}
  .floating_wrap .goQnaBtn {width: 67px; height: 67px; font-size: 2rem;}
}


@media screen and (max-width: 768px) {
  html, body {font-size: 14px;}
  .br_768 {display: block;}
  .pc_show {display: none;}
  .ta_show {display: block;}
  .sub_category {margin: 20% 0 5%; font-size: 14px;}
  .sub_title_wrap {margin-bottom: 10%;}
  .sub_title_wrap .sub_tittle {font-size: 2.5em;}
  .sub_title_wrap .sub_rt {font-size: 1.125em;}
  .sub_title_wrap .sub_rt .month_wrap {column-gap: 15px;}
  .sub_title_wrap .sub_rt .month_wrap .month_arrow {font-size: 1.25em; padding: 0 7px;}
  .sub_title_wrap .sub_rt .month_wrap .now_month span.month {font-size: 1.125em;}
  .sub_title_wrap .sub_rt .month_wrap .now_month span.year {font-size: 1.625em;}

  #footer {padding-top: 20%;}
  #footer .footer_nav > .depth1 {display: none;}
  #footer .footer_nav .wrapper {justify-content: flex-start; row-gap: 30px; padding-top: 25px;}
  #footer .footer_nav .depth2 {padding-top: 25px; font-size: 14px; padding-top: 0;}
  #footer .footer_nav li {width: 33.3333%;}
  #footer .footer_nav li:nth-child(5) {width: 33.3333%;}
  #footer .footer_nav .depth2 a:not(:last-child) {margin-bottom: 8px;}
  #footer .footer_nav .depth2 li a.depth1 {display: block; font-weight: 500; font-size: 16px;  border-bottom: 0; padding: 0; margin-bottom: 15px;}
  #footer .bank_info {font-size: 1.05em; padding: 60px 0 25px;}
  #footer .footer_search {padding: 25px 0;}
  #footer .footer_search input {font-size: 1.25em;}
  #footer .footer_search .wrapper {padding-right: 55px;}
  #footer .footer_search button img {width: 20px;}
  #footer .footer_info .wrapper {padding: 20px; row-gap: 7px; font-size: 0.95em;}
  #footer .footer_info p {min-width: auto; padding-right: 30px;}
  #footer .address_copy {padding: 30px 0; font-size: 1.05em;}
  #footer .address_copy p:not(:last-child) {margin-bottom: 10px;}
  #footer .address_copy span {display: block; width: 100%;}
  #footer .address_copy span.dash {display: none;}

  .topBtn {width: 40px; height: 40px; font-size: 30px; right: 30px; bottom: 30px;}
  .line_btn {padding: 10px 30px; font-size: 1em;}
  .pager button {font-size: 1.125em;}

  .news_list li:not(:last-child) {margin-bottom: 10%;}
  .news_list li .thumb {padding-bottom: 280px;}
  .news_list li .thumb .board_date {padding: 17px 12px 12px 14px;}
  .news_list li .thumb .board_date .month {font-size: 1.325em;}
  .news_list li .thumb .board_date .day {font-size: 2.5em;}
  .news_list li .list_txt_wrap {padding: 20px 30px;}
  .news_list li .list_txt_wrap .title {font-size: 1.5em; margin-bottom: 5%;}
  .news_list li .list_txt_wrap .desc {font-size: 1.05em;}

  .gallery_list {column-gap: 20px; row-gap: 45px;}
  .gallery_list li {width: calc((100% - 20px)/2);}
  .gallery_list li .list_txt_wrap {min-height: 160px; padding: 25px 20px 20px;}
  .gallery_list li .list_txt_wrap .title {font-size: 1.2em;}
  .gallery_list li .list_txt_wrap .date {font-size: 0.9em;}

  .normal_view .news_sum .title {font-size: 1.75em;}
  .normal_view .news_sum .desc {font-size: 1.125em; line-height: 170%;}
  .normal_view .news_sum .hit {font-size: 1.125em; line-height: 170%; text-align: right;}
  .normal_view .news_cont {font-size: 1.125em;}
  .normal_view .news_write_info {font-size: 1.125em;}

  .form_box:not(:last-child) {margin-bottom: 10px;}
  .form_box.btn_form_box input {width: calc(100% - 90px);}
  .form_box.img_form_box input::placeholder {font-size: 1rem;}
  .form_box.btn_form_box button, .form_box.btn_form_box label {width: 90px; line-height: 45px; font-size: 0.875rem;}
  .form_box input, .form_box textarea, .form_box select {height: 45px; padding: 0 10px 0 20px;}
  .form_box textarea {height: 160px; padding-top: 10px;}

  .search_bar {margin-top: 8%;}
  .search_bar + .pager {margin-top: 5%;}
  .search_bar {border-radius: 17px;}
  .search_bar input {width: 270px; height: 50px; font-size: 1.125em; border-radius: 17px 0 0 17px;}
  .search_bar button {width: 80px; border-radius: 0 17px 17px 0;}

  .normal_table_wrap table thead th {height: 60px;}
  .normal_table_wrap table td {height: 50px;}
  .normal_table_wrap table td.td_3,
  .normal_table_wrap table td.td_4,
  .normal_table_wrap table td.td_5 {font-size: 0.875em;}
  .normal_table_wrap table tbody::before,
  .normal_table_wrap table tbody::after {height: 10px;}

  .sub_eng_title {font-size: 2.75em; margin: 24% 0 10%;}

  .sub_category a:not(:last-child)::after {margin: 0 15px;}

  #shop .community_tab_list {margin: 25% 0 12%; column-gap: 10px; row-gap: 10px;}
  #shop .community_tab_list a {width: calc((100% - 40px)/4); height: 35px; font-size: 12px;}

  #partnerCode .wrapper {padding-top: 18%;}
  #partnerCode .top .title {font-size: 2.95em;}
  #partnerCode .top .kor {font-size: 1.625em;}
  #partnerCode .top input {width: 350px; height: 55px; margin: 8% 0 5%; padding: 0 15px;}
  #partnerCode .top button#codeSubmitBtn {width: 150px; height: 42px; font-size: 1.25em;}
  #partnerCode .top .banner {margin: 10% 0 6%;}
  #partnerCode .txt_wrap {margin: 17% 0 15%;}
  #partnerCode .txt_wrap > div:not(:last-child) {margin-bottom: 9%;}
  #partnerCode .txt_wrap > div .title {font-size: 1.625em;}
  #partnerCode .txt_wrap > div .desc {font-size: 1.325em;}

  #partnerCode .prd_list_wrap {margin-top: 22%;}
  #partnerCode .sub_title_wrap {margin-bottom: 50px;}
  #partnerCode li .prd_info {padding-top: 25px;}
  #partnerCode li .prd_cost {padding-top: 20px;}
  #partnerCode li .prd_color {font-size: 14px;}
  #partnerCode .shop_prd_list li.prd_layout1 {width: calc((100% - 20px)/2);}
  #partnerCode li .prd_name, #partnerCode li .prd_cost {font-size: 16px;}

  #shop .order_end_wrap {margin: 100px auto 0; padding: 60px 20px;}
  #shop .order_end_wrap .big {font-size: 1.875em;}
  #shop .order_end_wrap .line {width: 40px; height: 1px; margin: 25px auto 35px;}
  #shop .order_end_wrap .desc {line-height: 170%;}
  #shop .order_end_wrap .desc p:not(:last-child) {margin-bottom: 25px;}
  #shop .order_end_wrap .desc p.grey {font-size: 1.125em;}
  #shop .orderend_wrap .order_end_btns {column-gap: 25px; margin: 30px auto 0;}
  #shop .orderend_wrap .order_end_btns > a {width: 180px;}

  .floating_wrap {right: auto; left: 16px; top: auto; bottom: 50px;}
   .floating_wrap .floatBtn2 {margin-top: -15px;}
   .floating_wrap .floatBtn3 {margin-top: -15px;}
  .floating_wrap .floatBtn img.pc {display: none;}
  .floating_wrap .floatBtn img.mo {display: block;}
  .floating_wrap .goTopBtn {width: 60px; height: 60px; font-size: 2.875rem; display: none;}
  .floating_wrap .goQnaBtn {width: 60px; height: 60px; font-size: 1.125em; display: none;}



  #galleryDetail .wrapper {flex-direction: column-reverse; align-items: flex-start; height: auto; padding: 0 20px 40px;}
  #galleryDetail .sub_title_wrap {margin-bottom: 0; padding: 0; border-right: 0; }
  #galleryDetail .sub_title_wrap .sub_tittle {font-size: 2.5em;}
  #galleryDetail .sub_category {padding: 0; margin: 20% 0 5%; font-size: 14px;}
  #galleryDetail .container {display: block;}
  #galleryDetail .left {flex: 1;}
  #galleryDetail .pc-only { display: none; }
  #galleryDetail .mobile-only { display: block; padding:0 20px 40px; }
  #galleryDetail .right {flex: 1; position: unset; padding: 0;}
  #galleryDetail .right .info .name {font-size: 20px; margin-bottom: 8px;padding:0 20px;}
  #galleryDetail .right .info .date {font-size: 13px; margin-bottom: 20px;padding:0 20px;}
  #galleryDetail .right .info .txt {font-size: 12px;margin-bottom: 60px;padding:0 20px;}
  #galleryDetail .right .prod { display: block;}
  #galleryDetail .right .prod .title {font-size: 18px; margin-bottom: 16px;padding:0 20px;}
  #galleryDetail .right .prod .prodList {padding:0 20px; display: block;}
  #galleryDetail .right .prod .prodList .link {max-width: unset; gap: 12px; font-size: 14px; line-height: 20px;}
  #galleryDetail .right .prod .prodList:not(.mobile-only) {display: none;}


}


@media screen and (max-width: 540px) {
  html, body {font-size: 13px;}
  .br_540 {display: block;}
  .mo_show {display: block;}
  .sub_category {margin: 70px 0 20px; font-size: 13px;}
  .sub_title_wrap {margin-bottom: 50px; row-gap: 5px;}
  .sub_title_wrap .sub_tittle {/* font-size: 2.25em; */ font-size: 1.875em;}
  .sub_title_wrap .sub_rt {font-size: 1.125em;}
  .sub_title_wrap .sub_rt .month_wrap {column-gap: 10px;}
  .sub_title_wrap .sub_rt .month_wrap .month_arrow {font-size: 1.125em; padding: 0 5px;}
  .sub_title_wrap .sub_rt .month_wrap .now_month span.month {font-size: 1em;}
  .sub_title_wrap .sub_rt .month_wrap .now_month span.year {font-size: 1.4em;}

  #moHeader .wrapper {height: 55px;}
  #moHeader .logo {max-width: 75px;}
  #moHeader .herman_logo {max-width: 75px;}
  #hamWrap {top: 56px;}
  #hamWrap .hamCate {min-height: calc(100vh - 56px); max-height: calc(100vh - 56px); display: flex; flex-direction: column; }
  #hamWrap #frm {display: flex; padding: 12px 12px 12px 18px; justify-content: space-between; align-items: center; flex-shrink: 0; border: 2px solid var(--Colors-Grey-Color-Light-Base3, #666); margin-top: auto;}
  #hamWrap #frm input {font-size: 14px; font-weight: 500;}
  #hamWrap #frm input::placeholder {color:#C4C4C4;}

  .popup {top: calc(50% + 27.5px);}

  .sub_padding {padding-top: 56px;}
  .plus_btn {width: 35px; height: 35px; font-size: 18px; margin: 8% auto 0;}
  .pager {margin-top: 15%;}
  .pager button {font-size: 1.05em;}
  .pager button.page.now {margin-right: 5px;}
  .pager button.page.all::before {margin-right: 5px;}
  .topBtn {width: 35px; height: 35px; font-size: 25px; right: 15px; bottom: 15px;}

  #footer {padding-top: 25%;}
  #footer .footer_nav .wrapper {row-gap: 25px;}
  #footer .footer_nav li {padding-right: 10px;}
  #footer .footer_nav .depth2 {padding-top: 25px; font-size: 11px; padding-top: 0;}
  #footer .footer_nav .depth2 a:not(:last-child) {margin-bottom: 5px;}
  #footer .footer_nav .depth2 li a.depth1 {font-size: 13px; margin-bottom: 10px;}
  #footer .bank_info {font-size: 1em; padding: 50px 0 20px;}
  #footer .footer_search {padding: 20px 0;}
  #footer .footer_search input {font-size: 1.125em;}
  #footer .footer_search input::placeholder {letter-spacing: 0.25em;}
  #footer .footer_info .wrapper {row-gap: 3px; font-size: 0.95em;}
  #footer .footer_info p {padding-right: 20px;}
  #footer .address_copy {padding: 15px 0; font-size: 0.95em;}
  #footer .address_copy p:not(:last-child) {margin-bottom: 7px;}

  .news_list li:not(:last-child) {margin-bottom: 15%;}
  .news_list li a {flex-direction: column;}
  .news_list li .thumb {width: 100%; padding-bottom: 50%;}
  .news_list li .thumb .board_date {right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); padding: 12px 25px 0px;}
  .news_list li .thumb .board_date .month {font-size: 1.25em;}
  .news_list li .thumb .board_date .day {font-size: 2.325em;}
  .news_list li .list_txt_wrap {padding: 30px 25px 25px;}
  .news_list li .list_txt_wrap .title {margin-bottom: 6%;}
  .news_list li .list_txt_wrap {width: 100%; border-left: 1px solid #ccc; border-top: 0;}
  
  .gallery_list {column-gap: 15px; row-gap: 40px;}
  .gallery_list li {width: calc((100% - 15px)/2);}
  .gallery_list li .list_txt_wrap {min-height: 140px; padding: 20px 15px 15px;}
  .gallery_list li .list_txt_wrap .title {font-size: 15px;}
  .gallery_list li .list_txt_wrap .date {font-size: 12px;}
  .gallery_list li .list_txt_wrap .moreBtn {font-size: 11px;}
  .gallery_list li .list_txt_wrap .cont {font-size: 13px; margin: 8% 0; line-height: 140%;}

  .normal_view .news_sum {padding-bottom: 15%;}
  .normal_view .news_sum .title {font-size: 1.325em; margin-bottom: 15%;}
  .normal_view .news_sum .desc {font-size: 1em; line-height: 165%;}
  .normal_view .news_sum .hit {font-size: 1em; line-height: 165%; text-align: right;}
  .normal_view .news_cont {padding: 13% 0 20%; font-size: 1em;}
  .normal_view .news_write_info {padding-bottom: 12%; font-size: 1em;}

  .form_box.btn_form_box input {width: calc(100% - 100px);}
  .form_box.btn_form_box button, .form_box.btn_form_box label {width: 100px; line-height: 42px; font-size: inherit;}
  .form_box input, .form_box textarea, .form_box select {height: 42px;}
  .form_box textarea {height: 145px; padding-top: 10px;}
  .form_box.essential::before {left: 4px;}
  p.img_box_info {font-size: 12px;}

  .search_bar {margin-top: 12%;}
  .search_bar + .pager {margin-top: 7%;}
  .search_bar {border-radius: 15px;}
  .search_bar input {width: 220px; max-width: 100%; height: 45px; font-size: 1.111em; border-radius: 15px 0 0 15px;}
  .search_bar button {width: 70px; border-radius: 0 15px 15px 0;}

  .normal_table_wrap table {font-size: 13px; table-layout: auto;}
  .normal_table_wrap table colgroup {display: none;}
  .normal_table_wrap table thead th {height: 50px;}
  .normal_table_wrap table td {height: 40px;}
  .normal_table_wrap table .td_2 {padding-left: 7%;}
  .normal_table_wrap table .td_5 {display: none;}
  .normal_table_wrap table .td_1 {width: 10%;}
  .normal_table_wrap table .td_2 {width: 50%;}
  .normal_table_wrap table .td_3,
  .normal_table_wrap table .td_4 {width: 20%; font-size: 11px;}
  .normal_table_wrap table .td_5 {width: 20%; font-size: 11px;}
  .normal_table_wrap table tbody::before,
  .normal_table_wrap table tbody::after {/* height: 5px;  */display: none;}

  .normal_table_wrap.cancle_table_wrap table .td_4 {display: none;}
  .normal_table_wrap.cancle_table_wrap table .td_5 {display: table-cell;}
  
  .sub_eng_title {font-size: 32px; margin: 30% 0 20%; text-align: left;}

  .back_grey_btn {font-size: 15px; height: 45px;}
  p.file_info {font-size: 12px;}

  .sub_category a:not(:last-child)::after {margin: 0 10px;}

  #shop .community_tab_list {margin: 30% 0 12%; column-gap: 5px; row-gap: 5px;}
  #shop .community_tab_list a {width: calc((100% - 16px)/3); height: 32px; font-size: 12px;}

  #partnerCode .wrapper {padding-top: 22%;}
  #partnerCode .top .title {font-size: 2.5em;}
  #partnerCode .top .kor {font-size: 1.5em;}
  #partnerCode .top .desc {font-size: 1.175em;}
  #partnerCode .top .desc .br_1024 {display: none;}
  #partnerCode .top .banner {margin: 14% 0 10%;}
  #partnerCode .top input {width: 100%; max-width: 300px; height: 50px; margin: 12% 0 10%;}
  #partnerCode .top button#codeSubmitBtn {width: 140px; height: 40px; font-size: 1.125em;}
  #partnerCode .txt_wrap {margin: 25% 0 18%;}
  #partnerCode .txt_wrap > div:not(:last-child) {margin-bottom: 15%;}
  #partnerCode .txt_wrap > div .title {font-size: 1.5em; margin-bottom: 15px;}
  #partnerCode .txt_wrap > div .desc {font-size: 1.2em;}

  #partnerCode .prd_list_wrap {margin-top: 30%;}
  #partnerCode .sub_title_wrap {margin-bottom: 30px;}
  #partnerCode .shop_prd_list {column-gap: 15px; row-gap: 60px;}
  #partnerCode li .prd_info {padding-top: 20px;}
  #partnerCode li .prd_cost {padding-top: 10px;}
  #partnerCode li .prd_name, #partnerCode li .prd_cost {font-size: 15px;}
  #partnerCode li .prd_color {font-size: 13px;}
  #partnerCode .shop_prd_list li.prd_layout1 {width: calc((100% - 15px)/2);}

  #shop .order_end_wrap {margin: 70px auto 0; padding: 50px 10px;}
  #shop .order_end_wrap .big {font-size: 1.625em;}
  #shop .order_end_wrap .line {width: 35px; margin: 20px auto 30px;}
  #shop .order_end_wrap .desc {line-height: 160%;}
  #shop .order_end_wrap .desc p:not(:last-child) {margin-bottom: 15px;}
  #shop .orderend_wrap .order_end_btns {column-gap: 15px; margin: 25px auto 0;}
  #shop .orderend_wrap .order_end_btns > a {width: calc((100% - 15px)/2);}

  .floating_wrap {bottom: 30px;}
  .floating_wrap .floatBtn {height: 75px;}
}