@charset "utf-8";
/*
 * Name     : sub.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2020-05-18
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Common
    02. Greeting
    03. About
    04. History
    05. Location
    06. Business introduction
    07. Business field
    08. Product
    09. Customer
    10. Contact
    11. Board common
    12. Member service
    13. Media queries
---------------------------------------------------
*/

/* ------------------------------
 * Common
------------------------------ */
.section {padding-top: 100px; padding-bottom: 100px}
.section.line-top {border-top: 1px solid #eaeaea}
.section.line-bottom {border-bottom: 1px solid #eaeaea}
.section.line-both {border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea}
.section .large-heading {position: relative; margin-bottom: 80px}
.section .large-heading h2 {font-size: 38px; font-weight: 700; color: #212529; letter-spacing: -1px}
.section .large-heading p {font-size: 18px; color: #333; letter-spacing: -0.7px; line-height: 1.6; margin-top: 20px}
.section .large-heading .navigation {position: absolute; top: 10px; right: 0; font-size: 0; text-align: right}
.section .large-heading .navigation > li {display: inline-block; font-size: 15px; font-weight: 300; color: #888; vertical-align: middle}
.section .large-heading .navigation > li.home:before {content: '\e900'; font-family: 'xeicon'; font-size: 18px}
.section .large-heading .navigation > li.active {font-weight: 500; color: #212529}
.section .large-heading .navigation > li i {vertical-align: -1px}
.section .large-heading .navigation > li + li:before {content: '\e93e'; font-family: 'xeicon'; color: #ccc; margin: 0 6px; vertical-align: -1px}
.section .medium-heading {margin-bottom: 60px}
.section .medium-heading h3 {font-size: 28px; font-weight: 700; color: #212529; letter-spacing: -1px}
.section .medium-heading p {color: #888; letter-spacing: -0.7px; line-height: 1.6; margin-top: 10px}
.section .medium-heading.text-light h3 {color: #fff}
.section .medium-heading.text-light p {color: #a8a8a8}

.nav-tabs {margin-bottom:50px; border:0; font-size:0}
.nav-tabs > li {float:none; display:inline-block; padding-right:40px; margin:0}
.nav-tabs > li > a {position:relative; font-size:19px; font-weight:400; color:#000; padding:0; cursor:pointer; margin:0; border:0; letter-spacing:-0.02em; transition:all 0.3s ease}
.nav-tabs > li > a:before {content:''; position:absolute; top:-20px; left:1px; width:30px; height:3px; background:transparent; transition:all 0.3s ease}
.nav-tabs > li > a:hover {color:#4263eb; background:none !important}
.nav-tabs > li > a.active {color:#4263eb}
.nav-tabs > li > a.active:before {content:''; background:#4263eb}
.nav-tabs > li > a:hover {border:0;}
.nav-tabs > li > a.active, .nav-tabs > li > a.active:focus, .nav-tabs > li > a.active:hover {border:0}

.pdf-down-section .row-pdf .col-item {margin-bottom:60px}
.pdf-down-section .row-pdf .col-item > a {display:block; box-shadow:rgb(50 50 93 / 5%) 0px 13px 27px -5px, rgb(0 0 0 / 7%) 0px 8px 16px -8px; transition: all 0.3s cubic-bezier(.25,.8,.25,0.5)}
.pdf-down-section .row-pdf .col-item > a:hover {box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12)}
.pdf-down-section .row-pdf .col-item > a .catalog-thumb {overflow:hidden; padding:30px 50px}
.pdf-down-section .row-pdf .col-item > a .catalog-thumb img {width:100%; transition:all 0.3s ease; transform: scale(1)}
.pdf-down-section .row-pdf .col-item > a:hover .catalog-thumb img {transform: scale(1.04)}
.pdf-down-section .row-pdf .col-item > a h3 {padding:30px 25px; font-size:18px; font-weight:500; color:#333; transition: all 0.3s ease; border-top:1px dashed #d9d9d9; line-height:1.55}
.pdf-down-section .row-pdf .col-item > a h3 strong {margin-right:10px}
.pdf-down-section .row-pdf .col-item > a:hover h3 {color:#4263eb; border-color:#4263eb}

/* ------------------------------
 * Greeting
------------------------------ */
.greeting-type01 .col-text h3 {font-size: 32px; font-weight: 500; color: #212529; letter-spacing: -0.06rem}
.greeting-type01 .col-text p {color: #333; line-height: 1.8; letter-spacing: -0.7px}
.greeting-type01 .col-text p + p {margin-top: 15px}
.greeting-type01 .col-text p .ceo-name {font-family: 'Nanum Brush Script', 'Noto Sans KR', sans-serif; font-size: 26px; color: #000; letter-spacing: 1.6px}
.greeting-type02 .large-img {margin-bottom: 48px}
.greeting-type02 .col-text p {color: #333; line-height: 1.8; letter-spacing: -0.7px}
.greeting-type02 .col-text p + p {margin-top: 15px}
.greeting-type02 .col-text p .ceo-name {font-family: 'Nanum Brush Script', 'Noto Sans KR', sans-serif; font-size: 26px; color: #000; letter-spacing: 1.6px}

/* ------------------------------
 * About
------------------------------ */
.about-main .main-large-img {margin-bottom: 60px}
.about-main .col-heading h3 {font-size: 32px; font-weight: 500; color: #212529; letter-spacing: -0.05rem}
.about-main .col-content p {color: #333; line-height: 1.75; letter-spacing: -0.05rem}
.about-main .col-content p + p {margin-top: 15px}
.about-photo {background-color: #f7f7f7}
.about-photo .col-text {padding-bottom: 60px}
.about-photo .col-text .en-title {display: block; font-size: 15px; font-weight: 600; color: #4263eb; margin-bottom: 16px}
.about-photo .col-text h3 {font-size: 28px; font-weight: 300; color: #333; letter-spacing: -0.05rem; margin-bottom: 24px}
.about-photo .col-text p {color: #666; line-height: 1.85; letter-spacing: -0.03rem}
.about-photo .col-text p + p {margin-top: 16px}
.about-photo .row + .row {margin-top: 80px}
.about-team {padding-bottom: 160px}
.about-team h2 {font-size: 28px; font-weight: 700; color: #333; letter-spacing: -0.075rem; line-height: 1.36; margin-bottom: 40px}
.about-team .col-item figure {margin-bottom: 24px}
.about-team .col-item h3 {font-size: 18px; font-weight: 500; color: #4484f7; letter-spacing: 0; margin-bottom: 5px}
.about-team .col-item span {display: block; font-size: 13px; color: #9a9a9a; letter-spacing: 0.03rem; margin-bottom: 16px}
.about-team .col-item p {font-size: 15px; color: #666; letter-spacing: -0.05rem; line-height: 1.8}

/* ------------------------------
 * History
------------------------------ */
.history .history-cover {height: 400px; margin-bottom: 80px; background-image: url(../images/history_cover_img.jpg)}
.history .history-cover h2 {font-size: 36px; font-weight: 700; color: #fff; letter-spacing: -0.05rem; margin-bottom: 16px}
.history .history-cover p {color: #fff; letter-spacing: -0.05rem; opacity: .8}
.history .col-heading h3 {font-size: 21px; font-weight: 700; color: #333; line-height: 1.55}
.history .col-content .history-items {border-top: 2px solid #333}
.history .col-content .history-items li {font-size: 0; padding: 24px 0; border-bottom: 1px solid #eaeaea}
.history .col-content .history-items li > b, .history .col-content .history-items li > .item-group {display: inline-block; vertical-align: top}
.history .col-content .history-items li > b {width: 160px; font-size: 16px; font-weight: 700; color: #333}
.history .col-content .history-items li > .item-group {width: calc(100% - 160px)}
.history .col-content .history-items li > .item-group > p {font-size: 0}
.history .col-content .history-items li > .item-group > p + p {margin-top: 12px}
.history .col-content .history-items li > .item-group > p > strong, .history .col-content .history-items li > .item-group > p > span {display: inline-block; font-size: 16px; vertical-align: top}
.history .col-content .history-items li > .item-group > p > strong {width: 48px; font-weight: 700; color: #333}
.history .col-content .history-items li > .item-group > p > span {font-weight: 300; color: #666}

/* ------------------------------
 * Location
------------------------------ */
.root_daum_roughmap .wrap_controllers {display: none}
.root_daum_roughmap .map_border {display: none !important}
.location .info-row {margin-top: 60px}
.location .info-row .col-logo img {max-width: 240px}
.location .info-row .col-info address, .location .info-row .col-info p {font-size: 15px; color: #666; line-height: 1.84}

/* ------------------------------
 * Business introduction
------------------------------ */
.business .business-intro .intro-cover {position: relative; margin-bottom: 60px}
.business .business-intro .intro-cover .cover-img {display: block; width: 100%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.business .business-intro .intro-cover .cover-caption {position: absolute; bottom: 0; left: 0; right: 0; padding: 0 60px 48px; z-index: 5}
.business .business-intro .intro-cover .cover-caption h2 {font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.05rem; line-height: 1.42}
.business .business-intro .outer-row .col-heading h3 {font-size: 22px; font-weight: 300; color: #212529; letter-spacing: -1px; line-height: 1.44}
.business .business-intro .outer-row .col-heading h3 strong {font-weight: 600}
.business .business-intro .outer-row + .outer-row {margin-top: 3rem}
.business .business-intro .inner-row .col-item h4 {font-size: 19px; font-weight: 500; color: #343a40; letter-spacing: -0.7px; line-height: 1.24; margin-bottom: 0.5rem}
.business .business-intro .inner-row .col-item p {font-weight: 300; color: #555; line-height: 1.7; letter-spacing: -0.5px}
.business .business-process {background-color: #eff3f7}
.business .business-process .col-item {margin-bottom: 32px}
.business .business-process .col-item .item-inner {position: relative; height: 100%; padding: 32px; border: 1px solid #dee2e6; background-color: #fff}
.business .business-process .col-item .item-inner .step-header span {display: block; font-size: 15px; font-weight: 700; color: #000; margin-bottom: 6px}
.business .business-process .col-item .item-inner .step-icon {padding: 24px 0 40px; font-size: 64px; color: #ccc; text-align: center}
.business .business-process .col-item .item-inner .step-body h4 {font-size: 18px; font-weight: 700; color: #212529; letter-spacing: -0.7px; margin-bottom: 0.75rem}
.business .business-process .col-item .item-inner .step-body p {font-weight: 300; color: #666; letter-spacing: -0.7px; line-height: 1.78}
.business .business-process .col-item:hover .item-inner {border-color: #4263eb}
.business .business-process .col-item:hover .item-inner .step-icon {color: #4263eb}
.business .business-process .col-item:hover .item-inner .step-body h4 {color: #4263eb}
.business .customer-review {background-image: url(../images/customer_review_bg.jpg)}
.business .customer-review {position: relative; padding-top: 140px; padding-bottom: 140px}
.business .customer-review .review-swiper .swiper-slide {text-align: center}
.business .customer-review .review-swiper .swiper-slide p {font-size: 32px; font-weight: 300; color: #fff; line-height: 1.5; padding: 0 15%}
.business .customer-review .review-swiper .swiper-slide p:before, .business .customer-review .review-swiper .swiper-slide p:after {font-family: serif; opacity: .35}
.business .customer-review .review-swiper .swiper-slide p:before {content:'“ '}
.business .customer-review .review-swiper .swiper-slide p:after {content:' ”'}
.business .customer-review .review-swiper .swiper-slide .customer {display: block; margin-top: 30px; font-size: 14px; font-weight: 700; color: #fff; opacity: .6}
.business .customer-review .review-swiper .navigation-arrow > button {position: absolute; top: 50%; width: 60px; height: 40px; margin-top: -20px; padding: 0; border: 0; background-color: transparent; outline: 0; z-index: 10}
.business .customer-review .review-swiper .navigation-arrow > button .arrow {display: block; width: 52px; height: 30px; margin: auto; background-size: 100%; background-position: center; background-repeat: no-repeat}
.business .customer-review .review-swiper .navigation-arrow > .prev {left: 0}
.business .customer-review .review-swiper .navigation-arrow > .next {right: 0}
.business .customer-review .review-swiper .navigation-arrow > .prev .arrow {background-image: url(../images/long_arrow_prev.svg)}
.business .customer-review .review-swiper .navigation-arrow > .next .arrow {background-image: url(../images/long_arrow_next.svg)}
.business .customer-review .swiper-pagination {bottom: 60px; left: 0; right: 0}
.business .customer-review .swiper-pagination-bullet {margin: 0 6px; background-color: #fff}
.business .customer-review .swiper-pagination-bullet-active {background-color: #4263eb}

/* ------------------------------
 * Business field
------------------------------ */
.business .business-field .field-large-thumb {margin-bottom: 60px}
.business .business-field .heading-row .col-heading h3 {font-size: 22px; font-weight: 600; color: #212529; line-height: 1.45}
.business .business-field .heading-row .col-text p {font-weight: 300; color: #555; line-height: 1.8; letter-spacing: -0.7px}
.business .business-field .field-container {margin-top: 100px; padding-top: 100px; padding-bottom: 100px; background-color: #f7f7f7}
.business .business-field .field-container .col-item .inner {position: relative; text-align: center; height: 100%; padding: 80px 42px; background-color: #fff}
.business .business-field .field-container .col-item .inner:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 0; transition: transform .25s ease-in-out}
.business .business-field .field-container .col-item .inner figure {position: relative; margin-bottom: 32px; z-index: 5}
.business .business-field .field-container .col-item .inner figure i {font-size: 64px; color: #4263eb}
.business .business-field .field-container .col-item .text {position: relative; z-index: 5}
.business .business-field .field-container .col-item .text h4 {font-size: 20px; font-weight: 500; color: #212529; letter-spacing: -1px; margin-bottom: 14px}
.business .business-field .field-container .col-item .text p {font-weight: 300; color: #333; letter-spacing: -0.7px; line-height: 1.6}
.business .business-strength .strength-row .col-item {margin-bottom: 20px}
.business .business-strength .strength-row .col-item .inner {height: 100%; padding: 36px; border: 1px solid transparent; background-color: #f8f8fa}
.business .business-strength .strength-row .col-item .inner .num {display: block; font-size: 48px; font-weight: 700; color: #4263eb}
.business .business-strength .strength-row .col-item .inner h4 {font-size: 19px; font-weight: 700; color: #212529; margin: 16px 0 10px}
.business .business-strength .strength-row .col-item .inner p {font-weight: 300; color: #343a40; line-height: 1.6}

/* ------------------------------
 * Product

------------------------------ */
.col-md-3_new {max-width: 33%; flex: 0 0 33%;}


/* ------------------------------
 * 생산순서
------------------------------ */
.product .product-list-page .pd_row{display:flex; width:100%;}
.product .product-list-page .process_title {width:14%; display: flex; justify-content:center; space-between;align-items: center; align-items: center; background-color: #ededed; font-size:1.6rem; line-height:1.8rem; text-align:center; vertical-align:middle; margin-right:15px;}
.product .product-list-page .process_list1 {width:100%;}
.product .product-list-page .process_list1 ul{height:100%; display: flex; justify-content: space-between; gap: 14px;}
.product .product-list-page .process_list1 ul li {width:20%; }
.product .product-list-page .process_list1 ul li img{width:100%; height:100%;}

.product .product-list-page .process_list2 {width:100%;}
.product .product-list-page .process_list2 ul{height:100%; display: flex; justify-content: space-between; gap: 14px;}
.product .product-list-page .process_list2 ul li {width:25%; background-color:#666; }
.product .product-list-page .process_list2 ul li img{width:100%; height:100%;}
.product .product-list-page .process_blt {width:100%; text-align:center; margin:20px;}


/* page type */
.product .product-list-page .a-type-row .col-item {margin-bottom: 16px}
.product .product-list-page .col-item > a {position: relative; display: block; height: 100%}
.product .product-list-page .col-item > a:before, .product .product-list-page .col-item > a:after {position: absolute; display: block; bottom: 0; left: 0; right: 0}
.product .product-list-page .col-item > a:before {content: ''; top: 0; background-image: linear-gradient(to right top, rgba(33,33,33,.32) 15%, transparent); z-index: 0; opacity: 0; transition: all .25s ease-in-out}
.product .product-list-page .col-item > a:after {content: attr(title); font-size: 15px; font-weight: 500; color: #fff; padding: 0 32px 32px; opacity: 0; z-index: 1; transform: translateY(32px); transition: transform .25s ease-in-out, opacity .25s ease-in-out}
.product .product-list-page .col-item > a:hover:before {opacity: 1; backdrop-filter: blur(10px)}
.product .product-list-page .col-item > a:hover:after {opacity: 1; transform: translateY(0); transition-delay: 100ms}
.product .product-list-page .masonry-group .sizer {width: calc(25% - 10px)}
.product .product-list-page .masonry-group .col-item {width: calc(25% - 10px); margin-bottom: 10px}
.product .product-list-page .masonry-group .col-item img {display: block; width: 100%}

.mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {opacity: 0; -webkit-backface-visibility: hidden; transition: all 0.3s ease-out}

.mfp-with-zoom.mfp-ready .mfp-container {opacity: 1}
.mfp-with-zoom.mfp-ready.mfp-bg {opacity: .8}

.mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0}
.mfp-bottom-bar {margin-top: -24px}
.mfp-arrow:before {display: none}
.mfp-arrow:after {content: ''; display: block; top: 50%; left: 50%; width: 52px; height: 30px; margin: -15px 0 0 -26px !important; padding: 0;  border: 0 !important; background-size: 100%; background-position: center; background-repeat: no-repeat}
.mfp-arrow-left:after {background-image: url(../images/long_arrow_prev.svg)}
.mfp-arrow-right:after {background-image: url(../images/long_arrow_next.svg)}

/* board type A */
.product .product-list-board .photo-list {margin-top: 100px; padding-bottom: 100px}
.product .product-list-board .photo-list .table-photo {display: block; width: 100%}
.product .product-list-board .photo-list .table-photo > tbody {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px}
.product .product-list-board .photo-list .table-photo > tbody > tr {position: relative; display: block; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; width: 100%; margin-bottom: 32px; padding-left: 15px; padding-right: 15px}
.product .product-list-board .photo-list.column-2 .table-photo > tbody > tr {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%}
.product .product-list-board .photo-list.column-3 .table-photo > tbody > tr {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%}
.product .product-list-board .photo-list.column-4 .table-photo > tbody > tr {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%}
.product .product-list-board .photo-list.column-5 .table-photo > tbody > tr {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%}
.product .product-list-board .photo-list.column-6 .table-photo > tbody > tr {-ms-flex: 0 0 16.666666%; flex: 0 0 16.666666%; max-width: 16.666666%}
.product .product-list-board .photo-list .table-photo > tbody > tr > td {display: block; height: 100%}
.product .product-list-board .photo-list.type-a .table-photo > tbody > tr > td > table {height: 100%; border: 1px solid #dee2e6}
.product .product-list-board .photo-list .table-photo > tbody > tr table, .product .product-list-board .photo-list .table-photo > tbody > tr table tbody, .product .product-list-board .photo-list .table-photo > tbody > tr table tr, .product .product-list-board .photo-list .table-photo > tbody > tr table td {display: block; width: 100%}
.product .product-list-board .photo-list .table-photo > tbody > tr table td[width='25'] {position: absolute; top: 15px; left: 30px; z-index: 10}
.product .product-list-board .photo-list .table-photo .bbsnewf5 {font-family: inherit !important; height: 100%}
.product .product-list-board .photo-list .table-photo .bbsnewf5 td {text-align: left !important}
.product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:first-child a {position: relative; display: block; margin: -1px; overflow: hidden}
.product .product-list-board .photo-list .table-photo .bbsnewf5 > table > tbody > tr:first-child a img {display: block; width: 100%; height: auto !important; transition: transform .25s ease-in-out}
.product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:not(:first-child) td {padding-left: 32px; padding-right: 32px}
.product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:nth-child(2) td {padding-top: 32px}
.product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:last-child td {padding-bottom: 32px}
.product .product-list-board .photo-list .table-photo .bbsnewf5 .gallery_title {font-family: inherit !important; font-size: 19px; font-weight: 500; color: #343a40}
.product .product-list-board .photo-list .table-photo .bbsnewf5 .gallery_etc {font-family: 'Montserrat','Spoqa Han Sans',sans-serif !important; letter-spacing: 0 !important; font-size: 13px; font-weight: 700; color: #4263eb; text-transform: uppercase; padding-bottom: 8px}
/* .product .product-list-board .photo-list .table-photo .bbsnewf5:hover > table > tbody > tr:first-child a img {transform: scale(1.05)} */
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table {position: relative}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table td[valign] a {position: relative; display: block; height: 100%}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table td[valign] a:before {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background-image: linear-gradient(to top, rgba(0,0,0,.34), transparent); z-index: 1; transition: height .25s ease-in-out}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table > tbody > tr:not(:first-child) td {position: absolute; left: 0; right: 0; padding-left: 28px; padding-right: 28px; z-index: 10}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table > tbody > tr:nth-child(2) td {bottom: 52px}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 .gallery_subject {bottom: 28px}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 .gallery_subject a {display: block}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 .gallery_subject br {display: none}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 .gallery_title {display: block; color: #fff}
.product .product-list-board .photo-list.type-b .table-photo .bbsnewf5:hover > table td[valign] a:before {height: 60%}

/* board type B */
.product .product-list-board .photo-list.type-b .col-item {margin-bottom: 32px}
.product .product-list-board .photo-list.type-b .col-item figure {margin-bottom: 0; overflow: hidden}
.product .product-list-board .photo-list.type-b .col-item figure > a {position: relative; display: block; height: 100%}
.product .product-list-board .photo-list.type-b .col-item figure > a:before {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30%; background-image: linear-gradient(to top, rgba(0,0,0,.19), transparent); z-index: 1; transition: height .25s ease-in-out}
.product .product-list-board .photo-list.type-b .col-item figure a img {display: block; width: 100%; transition: transform .25s ease-in-out}
.product .product-list-board .photo-list.type-b .col-item figcaption {position: absolute; bottom: 0; left: 0; right: 0; padding: 0 28px 28px; z-index: 5}
.product .product-list-board .photo-list.type-b .col-item figcaption .category {display: block; font-size: 13px; font-weight: 700; color: #4263eb; margin-bottom: 8px}
.product .product-list-board .photo-list.type-b .col-item figcaption h4 {font-size: 19px; font-weight: 500; color: #fff; letter-spacing: -0.7px}
.product .product-list-board .photo-list.type-b .col-item:hover figure a img {transform: scale(1.05)}
.product .product-list-board .photo-list.type-b .col-item:hover figure > a:before {height: 50%}

/* ------------------------------
 * Customer
------------------------------ */
.table-board-list {border-top: 3px solid #222}
.table-board-list tbody td {color: #495057; letter-spacing: -0.5px; text-align: center; padding: 22px 10px; border-top: 0; border-bottom: 1px solid #e5e5e5; background-color: #fff; vertical-align: middle}
.table-board-list .thead td {font-size: 17px; font-weight: 700; color: #222; letter-spacing: -1px; text-align: center; padding: 24px 10px; border: 0; border-bottom: 1px solid #e5e5e5; background-color: #fff}
.table-board-list .thead td font {font-size: inherit !important}
.table-board-list tbody tr {height: auto !important}
.table-board-list tbody .bbsno {width: 60px}
.table-board-list tbody .bbsnewf5 {text-align: left; padding-left: 36px}
.table-board-list tbody .bbsnewf5 a {color: #343a40}
.table-board-list tbody .cell-writer {width: 120px}
.table-board-list tbody .bbsetc_dateof_write {width: 140px}
.table-board-list tbody .bbsetc_event_period_start, .table-board-list tbody .bbsetc_event_period_finish {width: 160px}
.table-board-list tbody .bbsno, .table-board-list tbody .bbsetc_dateof_write, .table-board-list tbody .bbsetc_event_period_start, .table-board-list tbody .bbsetc_event_period_finish {font-family: 'Montserrat','Spoqa Han Sans',sans-serif !important; letter-spacing: 0 !important}
.faq-list {border-top: 1px solid #e5e5e5}
.faq-list, .faq-list tbody, .faq-list tr, .faq-list td {display: block; width: 100%}
.faq-list .titdesign .board_bgcolor {display: none}
.faq-list .titdesign .bbsnewf5 {position: relative; padding-left: 24px}
.faq-list .titdesign .bbsnewf5 a {position: relative; display: block; font-size: 18px; font-weight: 300; padding-top: 6px; padding-left: 36px; padding-bottom: 6px}
.faq-list .titdesign .bbsnewf5 a:after {content: '\e943'; position: absolute; top: 50%; right: 26px; font-family: 'xeicon'; font-size: 21px; color: #9a9a9a; margin-top: -15px}
.faq-list .titdesign .bbsnewf5 a:before, .faq-list .answer-row:before {content: ''; position: absolute; left: 0; display: block; width: 16px; height: 16px; background-size: 100%; background-position: center; background-repeat: no-repeat}
.faq-list .titdesign .bbsnewf5 a:before {top: 50%; margin-top: -8px; background-image: url(../images/qna_text_question.svg)}
.faq-list .answer-row {display: none; position: relative; font-size: 15px; font-weight: 300; color: #495057; letter-spacing: -0.7px; line-height: 1.7; text-align: left !important; padding: 24px; padding-left: 60px; background-color: #fafafa}
.faq-list .answer-row:before {top: 26px; left: 24px; background-image: url(../images/qna_text_answer.svg)}
.faq-list .is-open a:after {transform: rotate(180deg)}
.faq-list .is-open .answer-row {display: block}

/* ------------------------------
 * Contact
------------------------------ */
.contact .contact-form .bottom-button {padding-top: 60px; text-align: center}
.contact .contact-form .table-form {width: 100%; border-collapse: collapse; border-top: 3px solid #212529}
.contact .contact-form .col-info h3 {font-size: 28px; font-weight: 700; color: #343a40; letter-spacing: -0.7px; line-height: 1.428; margin-bottom: 18px}
.contact .contact-form .col-info h3 + p {font-weight: 300; color: #343a40; letter-spacing: -0.7px; margin-bottom: 60px}
.contact .contact-form .col-info .info-group .icon {font-size: 38px; font-weight: 100; color: #d9d9d9}
.contact .contact-form .col-info .info-group h4 {font-size: 13px; font-weight: 700; color: #343a40; margin-top: 20px; margin-bottom: 12px}
.contact .contact-form .col-info .info-group p {font-size: 13px; color: #666; line-height: 1.85}
.contact .contact-form .col-info .info-group p a {color: #666}
.contact .contact-form .table-form tr {display: none; height: auto !important}
.contact .contact-form .table-form td {font-family: inherit !important; font-size: 0; text-align: left; padding: 10px 20px; border-bottom: 1px solid #e5e5e5}
.contact .contact-form .table-form tr[height='30'] {display: table-row}
.contact .contact-form .formmail_title_bgcolor {width: 180px; padding-left: 24px !important; background-color: #f8f9fa}
.contact .contact-form .formmail_title_bgcolor font {font-size: 15px; font-weight: 700; color: #212529}
.contact .contact-form .formmail_cell_bgcolor {width: calc(100% - 180px)}
.contact .contact-form .formmail_cell_bgcolor select, .contact .contact-form .formmail_cell_bgcolor input[type=text], .contact .contact-form .formmail_cell_bgcolor textarea {display: block; font-family: inherit !important; font-size: 14px; color: #495057; width: 100%; height: 50px; padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 6px; background-color: #fff; transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0; -webkit-appearance: none}
.contact .contact-form .formmail_cell_bgcolor select {padding-right: 36px; background-image: url(../images/select_arrow_down.svg); background-size: 20px 20px; background-position: right 15px center; background-repeat: no-repeat}
.contact .contact-form .formmail_cell_bgcolor textarea {height: auto !important; padding: 16px !important; resize: none}
.contact .contact-form .formmail_cell_bgcolor select:focus, .contact .contact-form .formmail_cell_bgcolor input[type=text]:focus, .contact .contact-form .formmail_cell_bgcolor textarea:focus {border-color: #367bf5}


/* ------------------------------
 * Board common
------------------------------ */
.board, .bbsnewf5, .board_bgcolor {font-family: inherit !important; font-size: inherit !important}

/* list */
.board-category {margin-bottom: 60px}
.board-category ul {font-size: 0}
.board-category ul li {display: inline-block; font-size: 18px; font-weight: 700; margin-bottom: 6px; margin-right: 40px}
.board-category ul li a {display: inline-block; color: #9a9a9a; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s}
.board-category ul li.is-active a {color: #212529; border-color: #212529}

.board-search-form {margin-bottom: 60px}
.board-search-form #search_table {margin-left: auto}
.board-search-form .est_cate_cell select, .board-search-form .keywordform {font-size: 15px; color: #495057; height: 50px; padding: 10px 18px; border: 1px solid #d9d9d9; border-radius: 6px; background-color: #fff; transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0; -webkit-appearance: none}
.board-search-form .est_cate_cell select {padding-right: 34px; background-image: url(../images/select_arrow_down.svg); background-size: 20px 20px; background-position: right 15px center; background-repeat: no-repeat}
.board-search-form .est_cate_cell select:focus, .board-search-form .keywordform:focus {border-color: #367bf5}

.board-paging {padding-top: 60px; font-size: 0; text-align: center}
.board-paging b, .board-paging a {display: inline-block; font-size: 15px; font-weight: 600; color: #999; margin: 0 4px; padding: 6px 8px; border-bottom: 2px solid transparent}
.board-paging a {color: #999}
.board-paging b {font-weight: 700; color: #000; border-color: #000}

/* view */
.table-article-view {width: 100%; border-collapse: collapse; border-top: 3px solid #212529}
.table-article-view .board_bgcolor, .table-article-view .board_desc {padding: 20px 15px; border-bottom: 1px solid #e5e5e5}
.table-article-view .board_bgcolor {font-weight: 700; background-color: #fff}
.table-article-view .board_bgcolor font {font-size: inherit !important}
.table-article-view .board_desc {color: #495057}
#post_area {padding: 32px 15px !important; color: #495057; letter-spacing: -0.7px; line-height: 1.8}
#post_area img {height: auto !important; margin: auto}
.board-comment-write .board_comment_bgcolor {margin-top:40px; background-color:#fff}
.board-comment-write .comment_txt {padding:15px !important; font-size:14px; color:#777}
.board-comment-write .board_comment_bgcolor input[type=text], .board-comment-write .board_comment_bgcolor input[type=password], .board-comment-write .board_comment_bgcolor textarea {font-family:inherit !important; font-size:14px; color:#777; height:34px; padding:4px 12px; border:1px solid #ced4da; border-radius:3px}
.board-comment-write .board_comment_bgcolor textarea {width:calc(100% - 115px); height:auto}
.board-comment-write .btn-primary {height:70px}
.board-comment-list .board_comment_bgcolor {background-color:#fff}
.board-comment-list .board_comment_bgcolor table {width:100%}
.board-comment-list .board_comment_bgcolor table td {padding:0 15px}
.board-comment-list .comment_txt {font-size:13px; padding:10px 15px !important}
.board-comment-list .comment_txt font {display:inline-block; padding-bottom:10px}
.comment_name {font-size:13px !important}
.board-view-buttons {margin-top: 48px; margin-bottom: 48px}
.board-view-buttons .button {margin: 0 2px 4px 0}
.board-view-thumbnails > table {width: 100%}
.board-view-thumbnails td {padding: 0 !important}
.board-view-thumbnails .image_sublist {display: none}
.board-view-thumbnails table td table {float: none; display: inline-block; margin-right: 10px; vertical-align: top}
.board-view-thumbnails a {display: block}
.board-view-thumbnails a img {height: auto !important}

/* write */
.table-article-write {width: 100%; border-collapse: collapse; border-top: 3px solid #212529}
.table-article-write .board_bgcolor, .table-article-write .board_desc {padding: 20px 15px; border-bottom: 1px solid #e5e5e5}
.table-article-write .board_bgcolor {font-weight: 700; background-color: #fff}
.table-article-write .board_bgcolor span {font-size: inherit !important}
.table-article-write .board_desc {color: #495057}
.table-article-write .board_desc select, .table-article-write .board_desc input[type='text'], .table-article-write .board_desc input[type='password'] {display: block; font-size: 15px; color: #495057; width: 100%; height: 50px; padding: 10px 18px; border: 1px solid #d9d9d9; border-radius: 6px; background-color: #fff; transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0}
.table-article-write .board_desc select {padding-right: 34px; background-image: url(../images/select_arrow_down.svg); background-size: 20px 20px; background-position: right 15px center; background-repeat: no-repeat}
.table-article-write .board_desc select:focus, .table-article-write .board_desc input[type='text']:focus, .table-article-write .board_desc input[type='password']:focus {border-color: #367bf5}
.table-write-bottom {width: 100%; margin-top: 60px}

/* ------------------------------
 * Member service
------------------------------ */
.login-section .bottom-links {padding-top: 30px; font-size: 0; text-align: center}
.login-section .bottom-links li {display: inline-block; font-size: 15px}
.login-section .bottom-links li a {color: #555}
.login-section .bottom-links li + li:before {content: ''; display: inline-block; width: 1px; height: 14px; margin: 0 15px; background-color: #e5e5e5; vertical-align: -2px}
.register-section .register-steps {display:table; width:100%; margin-bottom:50px; table-layout:fixed}
.register-section .register-steps li {position:relative; display:table-cell; font-size:16px; color:#ccc; text-align:center; padding:20px 10px; border-bottom:3px solid #ccc}
.register-section .register-steps li + li:before {content:'\e940'; position:absolute; top:50%; left:-10px; font-family:'xeicon'; font-size:24px; color:#ccc; margin-top:-17px}
.register-section .register-steps li.active {color:#3e78ff; border-color:#3e78ff}
.register-section .register-steps li span {display:block}
.register-section .register-steps li span[lang="en"] {font-size:13px; font-weight:700; margin-bottom:2px}
.register-section .terms-group {margin-bottom:25px; border:1px solid #dee2e6; border-radius:6px; overflow:hidden}
.register-section .terms-group .heading {padding:16px 25px; font-size:17px; font-weight:normal; color:#333; border-bottom:1px solid #dee2e6}
.register-section .terms-group .body {padding:35px 25px}
.register-section .terms-group .footer {padding: 16px 25px; border-top:1px solid #dee2e6}
.register-section .register-heading {font-size: 19px; font-weight: 700; color: #212529; margin-bottom: 30px; padding-bottom: 12px; border-bottom: 2px solid #212529}
.register-section .form-group table, .register-section .form-group table tbody, .register-section .form-group tr, .register-section .form-group td {display:block; width:100%; height:auto}
.register-section .form-group .member_td_bgcolor {margin-bottom:10px; padding:0 !important; font-family:inherit; font-size:14px; font-weight:700; color:#333 !important; text-align:left; background-color:transparent}
.register-section .form-group table td {font-family:inherit !important; font-size:14px; color:#666; padding:0 0 20px !important; border:none}
.register-section .form-group table td span {display:inline-block; font-size:13px; color:#8a8a8a; margin-top:10px}
.register-section .form-group table td input[type=text], .register-section .form-group table td input[type=password], .register-section .form-group table td select, .register-section .form-group table td textarea {display: block; font-family: inherit !important; font-size: 14px; color: #495057; width: 100%; height: 50px; padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 6px; background-color: #fff; transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0; -webkit-appearance: none}
.register-section .form-group table td input[type=file] {display: block; width: 100%}
.register-section .form-group table td input[type=text]:disabled, .register-section .form-group table td input[type=password]:disabled, .register-section .form-group table td select:disabled, .register-section .form-group table td textarea:disabled {color: #adb5bd !important; border-color: #e9ecef !important; background-color: #f8f9fa !important}
.register-section .form-group table td input[type=text]:focus, .register-section .form-group table td input[type=password]:focus, .register-section .form-group table td select:focus, .register-section .form-group table td textarea:focus {border-color: #367bf5}
.register-section .form-group table td select {padding-right: 30px; background-image: url(../images/select_arrow_down.svg); background-size: 20px 20px; background-position: right 15px center; background-repeat: no-repeat}
.register-section .form-group input[name='m_id'] + a img {display:none}
.register-section .form-group input[name='m_id'] + a:before {content:'아이디 중복확인'; display:block; width:100%; margin:10px 0 5px; padding:14px 25px; font-size:15px; color:#fff; text-align:center; border:none; border-radius:4px; background-color:#868e96; transition:background-color 0.2s}
.register-section .form-group input[name='m_id'] + a:hover:before {background-color:#495057}
.register-section .form-group input[name^='fix_email'], .register-section .form-group input[name^='email'], .register-section .form-group select[name^='email'] {display:inline-block !important; width:calc(50% - 10px) !important}
.register-section .form-group input[name='email3'] {display: block !important; width: 100% !important; margin-top: 5px}
.register-section .form-group select[name^='birthday'] {display:inline-block !important; width:calc(33% - 4px) !important}
.register-section .form-group select[name^='birthday'] + select {margin-left:5px}
.member_txt {font-family:inherit !important}
.member_txt td {display:inline-block !important; width:auto !important}
.member_txt td + td {margin-left:15px}
.member_txt td input {margin:0 5px 0}
.register-section .register-message {padding:42px 36px; border:1px solid #dee2e6; border-radius:6px}
.register-section .register-message h3 {font-size:21px; color:#333}
.register-section .register-message h3:after {content:''; display:block; width:30px; height:2px; margin:15px 0 20px; background-color:#6693fb}
.register-section .register-message p {font-size:15px; color:#666; line-height:1.6}
.register-section .register-message p strong {font-weight:700; color:#000}
.register-section .register-message p + p {margin-top:15px}

.member-popup .form-control {border:1px solid #ced4da}
.member-popup .header {position:relative; padding:20px 25px; background-color:#212529}
.member-popup .header h1 {font-size:19px; color:#fff}
.member-popup .header .btn-close {position:absolute; top:50%; right:10px; width:48px; height:48px; font-size:24px; color:#fff; margin-top:-24px; padding:0; border:none; background-color:transparent; cursor:pointer; outline:0}
.member-popup .body {padding:25px}
.member-popup .body p {font-size:14px; color:#495057; line-height:1.7; margin-bottom:15px}
.member-popup .body .btn-link {font-weight:700}
.member-popup .table th, .member-popup .table td {font-size:13px}
.member-popup .table>tbody>tr>td, .member-popup .table>tbody>tr>th, .member-popup .table>tfoot>tr>td, .member-popup .table>tfoot>tr>th, .member-popup .table>thead>tr>td, .member-popup .table>thead>tr>th {padding:15px 12px}
.member-popup .label-heading {display:block; font-size:14px; font-weight:700; color:#212529; margin-bottom:10px}
.member-popup .warning-text {color:#fd7e14}
.member-popup .footer {text-align:right; padding:20px 25px; border-top:1px solid #e9ecef}

/* ------------------------------
 * Media queries
------------------------------ */
@media (min-width: 768px) {
    .business .business-strength .strength-row .col-item:hover .inner {border-color: #4263eb; background-color: #fff}
    .business .business-field .field-container .col-item:hover .inner:before {background-color: #364fc7; box-shadow: 20px 20px 30px 0 rgba(54,79,199,0.34); transform: scaleY(1.1)}
    .business .business-field .field-container .col-item:hover .inner figure i {color: #fff}
    .business .business-field .field-container .col-item:hover .inner .text h4 {color: #fff}
    .business .business-field .field-container .col-item:hover .inner .text p {color: #eaeaea}
}

@media (max-width: 1199px) {
    .product .product-list-page .masonry-group .sizer {width: calc(33.3333334% - 10px)}
    .product .product-list-page .masonry-group .col-item {width: calc(33.3333334% - 10px)}
}

@media (max-width: 786px) {
.col-md-3_new {max-width: 100%; flex: 0 0 100%;}
}
@media (max-width: 786px) {
.product .product-list-page .pd_row{display:block;}
.product .product-list-page .process_title {width:100%; height:55px; background-color: #ededed; font-size:1.6rem;}
.product .product-list-page .process_list1 ul{display:block;}
.product .product-list-page .process_list1 ul li{width:100%; margin-bottom:22px;}
.product .product-list-page .process_list2 ul{display:block;}
.product .product-list-page .process_list2 ul li{width:100%; margin-bottom:22px;}
}

@media (max-width: 991px) {
    .section {padding-top: 80px; padding-bottom: 80px}
    .section .large-heading {margin-bottom: 60px}

    .greeting-type01 .col-text {margin-top: 48px}
    .greeting-type01 .col-text h3 {font-size: 26px}

    .about-main .main-large-img {margin-bottom: 48px}
    .about-main .col-heading h3 {font-size: 28px}
    .about-team h2 {font-size: 24px}
    .about-team .col-item {margin-bottom: 32px}

    .history .history-cover h2 {font-size: 28px}

    .business .business-intro .intro-cover .cover-caption {padding: 0 36px 36px}
    .business .business-intro .intro-cover .cover-caption h2 {font-size: 24px}
    .business .business-intro .outer-row .col-heading h3 {font-size: 20px}
    .business .business-process .col-item {margin-bottom: 16px}
    .business .customer-review {padding-top: 100px; padding-bottom: 100px}
    .business .customer-review .review-swiper .swiper-slide p {font-size: 24px}

    .product .product-list-board .photo-list {margin-top: 80px; padding-bottom: 80px}

    .contact .contact-form .col-info h3 {font-size: 24px}
    .contact .contact-form .formmail_title_bgcolor font {font-size: 14px}
}

@media (max-width: 767px) {
    .pdf-down-section .row-pdf .col-item > a h3 {font-size:14px; padding:20px 25px}
    .nav-tabs > li {padding-right:14px}
    .nav-tabs > li > a {font-size:14px}
    .nav-tabs > li > a:before {top:-15px}
    .section {padding-top: 60px; padding-bottom: 60px}
    .section .large-heading {margin-bottom: 50px}
    .section .large-heading h2 {font-size: 28px}
    .section .large-heading p {font-size: 15px}
    .section .large-heading .navigation {top: 6px}
    .section .large-heading .navigation > li {font-size: 13px}
    .section .large-heading .navigation > li.home:before {font-size: 15px}
    .section .medium-heading {margin-bottom: 40px}
    .section .medium-heading h3 {font-size: 22px}

    .greeting-type01 .col-text h3 {font-size: 22px}
    .greeting-type01 .col-text p .ceo-name {font-size: 22px}
    .greeting-type02 .col-text p .ceo-name {font-size: 22px}

    .about-main .col-heading {margin-bottom: 24px}
    .about-main .col-heading h3 {font-size: 22px}
    .about-photo .row + .row {margin-top: 60px}
    .about-photo .col-text {padding-bottom: 0}
    .about-photo .col-text {margin-top: 32px}
    .about-photo .col-text .en-title {font-size: 12px; margin-bottom: 12px}
    .about-photo .col-text h3 {font-size: 22px; margin-bottom: 16px}
    .about-team h2 {font-size: 19px}
    .about-team .col-item {margin-bottom: 0}
    .about-team .col-item + .col-item {margin-top: 32px}
    .about-team .col-item figure {margin-bottom: 16px}
    .about-team .col-item h3 {font-size: 15px}
    .about-team .col-item span {font-size: 11px; margin-bottom: 10px}
    .about-team .col-item p {font-size: 13px}

    .history .history-cover {height: 270px; margin-left: -15px; margin-right: -15px; margin-bottom: 48px}
    .history .history-cover h2 {font-size: 22px}
    .history .col-heading h3 {font-size: 17px; margin-bottom: 24px}
    .history .col-content .history-items li > b {width: 60px; font-size: 15px}
    .history .col-content .history-items li > .item-group {width: calc(100% - 60px); padding-left: 15px}
    .history .col-content .history-items li > .item-group > p > strong, .history .col-content .history-items li > .item-group > p > span {font-size: 14px}
    .history .col-content .history-items li > .item-group > p > strong {width: 32px}

    .location .root_daum_roughmap .wrap_map {height: 300px !important}
    .location .info-row {margin-top: 48px}
    .location .info-row .col-logo {margin-bottom: 24px}
    .location .info-row .col-logo img {max-width: 160px}
    .location .row-map-box .col-map-items {margin-top:30px}
    .location .row-map-box .col-map-items:first-child {margin-top:0}

    .business .business-intro .intro-cover {margin-bottom: 48px; margin-left: -15px; margin-right: -15px}
    .business .business-intro .intro-cover .cover-caption {padding: 0 24px 24px}
    .business .business-intro .intro-cover .cover-caption h2 {font-size: 19px}
    .business .business-intro .outer-row .col-heading {margin-bottom: 24px}
    .business .business-intro .outer-row .col-heading h3 {font-size: 18px}
    .business .business-intro .inner-row .col-item h4 {font-size: 16px}
    .business .business-process .col-item .item-inner {padding: 28px}
    .business .business-process .col-item .item-inner .step-header span {font-size: 13px}
    .business .business-process .col-item .item-inner .step-icon {padding: 20px 0 32px; font-size: 48px}
    .business .business-process .col-item .item-inner .step-body h4 {font-size: 16px}
    .business .customer-review .review-swiper .swiper-slide p {font-size: 19px; padding: 0 60px}
    .business .customer-review .review-swiper .swiper-slide .customer {margin-top: 20px}
    .business .customer-review .review-swiper .navigation-arrow > button {width: 40px; height: 22px; margin-top: -11px}
    .business .customer-review .review-swiper .navigation-arrow > button .arrow {width: 32px; height: 18px}
    .business .customer-review .swiper-pagination {bottom: 30px}
    .business .business-field .field-large-thumb {margin-bottom: 48px}
    .business .business-field .heading-row .col-heading {margin-bottom: 16px}
    .business .business-field .heading-row .col-heading h3 {font-size: 19px}
    .business .business-field .field-container .col-item .inner {padding: 48px 24px}
    .business .business-field .field-container .col-item .inner figure {margin-bottom: 24px}
    .business .business-field .field-container .col-item .inner figure i {font-size: 48px}
    .business .business-field .field-container .col-item .text h4 {font-size: 17px}
    .business .business-strength .strength-row .col-item {margin-bottom: 16px}
    .business .business-strength .strength-row .col-item .inner {padding: 28px}
    .business .business-strength .strength-row .col-item .inner .num {font-size: 36px}
    .business .business-strength .strength-row .col-item .inner h4 {font-size: 16px}

    .product .product-list-board .photo-list {margin-top: 60px; padding-bottom: 60px}
    .product .product-list-page .col-item > a:after {font-size: 13px; text-overflow: ellipsis; white-space: nowrap; padding: 0 24px 24px; overflow: hidden}
    .product .product-list-page .masonry-group .sizer {width: calc(50% - 10px)}
    .product .product-list-page .masonry-group .col-item {width: calc(50% - 10px)}
    .product .product-list-board .photo-list.type-a .col-item {margin-bottom: 16px}
    .product .product-list-board .photo-list.type-a .col-item .info {padding: 24px 24px 28px}
    .product .product-list-board .photo-list.type-a .col-item .info .category {font-size: 11px}
    .product .product-list-board .photo-list.type-a .col-item .info h4 {font-size: 16px}
    .product .product-list-board .photo-list.type-b .col-item {margin-bottom: 16px}
    .product .product-list-board .photo-list.type-b .col-item figcaption {padding: 0 24px 24px}
    .product .product-list-board .photo-list.type-b .col-item figcaption .category {font-size: 11px}
    .product .product-list-board .photo-list.type-b .col-item figcaption h4 {font-size: 16px}

    .product .product-list-board .photo-list .table-photo > tbody {margin-left: -6px; margin-right: -6px}
    .product .product-list-board .photo-list .table-photo > tbody > tr {-ms-flex: 0 0 50% !important; flex: 0 0 50% !important; max-width: 50% !important; margin-bottom: 12px; padding-left: 6px; padding-right: 6px}
    .product .product-list-board .photo-list .table-photo > tbody > tr table td[width='25'] {left: 21px}
    .product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:not(:first-child) td {padding-left: 24px; padding-right: 24px}
    .product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:nth-child(2) td {padding-top: 24px}
    .product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:last-child td {padding-bottom: 24px}
    .product .product-list-board .photo-list .table-photo .bbsnewf5 .gallery_title {font-size: 16px}
    .product .product-list-board .photo-list .table-photo .bbsnewf5 .gallery_etc {font-size: 11px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table > tbody > tr:not(:first-child) td {padding-left: 24px; padding-right: 24px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table > tbody > tr:nth-child(2) td {bottom: 46px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 .gallery_subject {bottom: 24px}

    .board-category {margin-bottom: 48px}
    .board-category ul li {font-size: 15px; margin-right: 20px}

    .table-board-list .thead {display: none}
    .table-board-list tbody, .table-board-list tbody tr, .table-board-list tbody td {display: block; width: 100% !important}
    .table-board-list tbody tr {padding: 20px 0; text-align: left; border-bottom: 1px solid #e5e5e5}
    .table-board-list tbody td {text-align: left; padding: 0 20px; border-bottom: 0}
    .table-board-list tbody .bbsno {display: none}
    .table-board-list tbody .bbsnewf5 {font-size: 15px; margin-bottom: 6px; padding-left: 20px}
    .table-board-list tbody .bbsetc_dateof_write, .table-board-list tbody .bbsetc_event_period_start, .table-board-list tbody .bbsetc_event_period_finish {font-weight: 500; color: #999}
    .event-list .table-board-list tbody .bbsetc_event_period_start, .event-list .table-board-list tbody .bbsetc_event_period_finish {display: inline-block; width: auto !important; padding-right: 0}
    .event-list .table-board-list tbody .bbsetc_event_period_finish {padding-left: 0}
    .event-list .table-board-list tbody .bbsetc_event_period_finish:before {content: ' ~ '}

    .contact .contact-form .col-info h3 {font-size: 19px; margin-bottom: 12px}
    .contact .contact-form .col-info h3 + p {font-size: 14px; margin-bottom: 40px}
    .contact .contact-form .col-form {margin-top: 24px}
    .contact .contact-form .col-info .info-group p {font-size: 12px}
    .contact .contact-form .table-form, .contact .contact-form .table-form tbody, .contact .contact-form .table-form tr, .contact .contact-form .table-form td {display: block; width: 100%}
    .contact .contact-form .table-form tr {display: none}
    .contact .contact-form .table-form tr[height='30'] {display: block; border-bottom: 1px solid #e5e5e5}
    .contact .contact-form .table-form td {padding: 10px 15px 16px !important; border-bottom: 0}
    .contact .contact-form .table-form td.formmail_title_bgcolor {padding: 16px 15px 0 !important; background-color: #fff}

    .login-section .bottom-links {padding-top:20px}
    .login-section .bottom-links li {font-size:13px}
    .login-section .bottom-links li + li:before {height:12px; margin:0 10px}
    .register-section .register-steps {margin-bottom:40px}
    .register-section .register-steps li {font-size:14px; border-width:2px}
    .register-section .register-steps li + li:before {font-size:14px; margin-top:-8px}
    .register-section .register-steps li span[lang="en"] {font-size:11px}
    .register-section .terms-group {margin-bottom:25px; border:1px solid #dee2e6; border-radius:6px; overflow:hidden}
    .register-section .terms-group .heading {padding:16px 20px; font-size:16px}
    .register-section .terms-group .body {padding:25px 20px}
    .register-section .terms-group .footer {padding:16px 20px}
    .register-section .register-heading {font-size:17px}
    .register-section .form-group table td {font-size:13px}
    .register-section .form-group select[name^='birthday'] + select {margin-left:4px}
    .register-section .register-message {padding:32px 25px}
    .register-section .register-message h3 {font-size:18px}
    .register-section .register-message p {font-size:14px}
}

@media (max-width: 575px) {
    .pdf-down-section .row-pdf .col-item > a .catalog-thumb {padding:30px 30px}
    .business .customer-review {padding-top: 80px; padding-bottom: 80px}
    .business .customer-review .review-swiper .swiper-slide p {font-size: 17px; line-height: 1.7; padding: 0}
    .business .customer-review .review-swiper .navigation-arrow {display: none}
    .business .business-field .field-container .col-item + .col-item {margin-top: 16px}
    .business .business-strength .strength-row .col-item {margin-bottom: 0}
    .business .business-strength .strength-row .col-item + .col-item {margin-top: 16px}

    .product .product-list-page .col-item > a:before {opacity: 1}
    .product .product-list-page .col-item > a:after {font-size: 12px; padding: 0 16px 16px}
    .product .product-list-page .col-item > a:hover:before {-webkit-backdrop-filter: blur(0)}
    .product .product-list-page .col-item > a:after {opacity: 1; transform: translateY(0)}
    .product .product-list-board .photo-list .table-photo > tbody {margin-left: -3px; margin-right: -3px}
    .product .product-list-board .photo-list .table-photo > tbody > tr {margin-bottom: 8px; padding-left: 3px; padding-right: 3px}
    .product .product-list-board .photo-list .table-photo > tbody > tr table td[width='25'] {left: 18px}
    .product .product-list-board .photo-list .table-photo .bbsnewf5 .gallery_title {font-size: 15px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table td[valign] a:before {height: 60%}
    .product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:not(:first-child) td {padding-left: 20px; padding-right: 20px}
    .product .product-list-board .photo-list.type-a .table-photo .bbsnewf5 > table > tbody > tr:nth-child(2) td {padding-top: 20px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table > tbody > tr:not(:first-child) td {padding-left: 20px; padding-right: 20px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 > table > tbody > tr:nth-child(2) td {bottom: 42px}
    .product .product-list-board .photo-list.type-b .table-photo .bbsnewf5 .gallery_subject {bottom: 20px}

    .board-search-form {margin-bottom: 48px}
    .board-search-form #search_table {width: 100%}
    .board-search-form #search_table, .board-search-form #search_table tbody, .board-search-form #search_table tr, .board-search-form #search_table td {display: block; width: 100%}
    .board-search-form #search_table tr {font-size: 0}
    .board-search-form #search_table td {padding: 3px 0}
    .board-search-form .est_cate_cell select, .board-search-form .keywordform {display: block; width: 100%}
    .board-search-form .est_keyword_cell, .board-search-form .est_btn_cell {display: inline-block !important}
    .board-search-form .est_keyword_cell {width: 70% !important}
    .board-search-form .est_btn_cell {width: calc(30% - 6px) !important; margin-left: 6px}
    .board-search-form .est_btn_cell .button {width: 100%}
    .board-view-thumbnails table td table {margin-right: 0; width: calc(33.333334% - 5px)}
    .board-view-thumbnails table td table ~ table {margin-left: 5px}
}