@charset "utf-8";

/* ---------------------------
	BASIC HTML
------------------------------ */
#header {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

@media (max-width: 480px) {
    #header.up {
        color: var(--color-black);
        background-color: var(--color-white);
        border-bottom: 1px solid var(--border-color);
    }

    #header.up .h_util .contact_box > a {
        border-color: var(--color-black) !important;
    }

}

/*#header.hide {
    opacity: 0;
    transform: translateY(-100%);

}*/

*:first-child + html body .hide {
    clear: both;
    position: absolute;
    visibility: hidden;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    text-indent: -9999px;
}

*:first-child + html body .hide {
    clear: both;
    position: absolute;
    visibility: hidden;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    text-indent: -9999px;
}

* {
    padding: 0;
    margin: 0
}

body {
    word-break: keep-all;
    word-wrap: break-word;
}

html,
body,
div,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: 'Pretendard', sans-serif;
    vertical-align: baseline;
}

dl,
ul,
ol,
li {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: ""
}

blockquote,
q {
    quotes: "" ""
}

input,
button,
select,
textarea {
    font-family: 'Pretendard', sans-serif;
}

img {
    border: 0 none;
    vertical-align: middle;
    max-width: 100%;
}

fieldset {
    border: 0 none;
    vertical-align: middle;
    width: 100%;
}

caption,
legend {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    display: none
}

strong {
    font-weight: 600
}

a {
    color: var(--color-black);
    text-decoration: none
}

a:link,
a:hover,
a:active {
    text-decoration: none
}

em {
    font-style: normal;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    line-height: 1.25;
    font-weight: 400;
    color: var(--color-black);
}

h1,
.h1 {
    font-family: 'Pretendard', sans-serif;
    font-weight: normal;
}

body {
    line-height: 2;
    color: var(--color-black);
}

a {
    color: var(--color-black);
    transition: color .2s;
}

blockquote {
    padding: 0.063rem 1.25rem 0.25rem;
    margin: 1.25rem 0 1.25rem 1.875rem;
    font-size: inherit;
    border-left: 3px solid #eaeaea;
}

p:empty {
    margin: 0;
}

iframe {
    max-width: 100%;
}

/* -------------------------
	Wordpress CSS
--------------------------- */
table {
    width: 100%;
}

.s_wrap {
    max-width: 83.125rem;
    margin: 0 auto;
    padding: 0 0.938rem;
}


input:focus,
.form-control:focus,
.frm_input:focus {
    outline: none !important;
    border-color: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

a.top {
    transition: .5s;
    transition-property: bottom;
    overflow: hidden;
    margin: auto;
    position: fixed;
    right: var(--padding2);
    width: 3.75rem;
    height: 3.75rem;
    bottom: 2.5rem;
    display: none;
    background: var(--color-white);
    color: var(--color-black);
    text-align: center;
    font-size: 0.94em;
    border-radius: 3.125rem;
    z-index: 999;
    /*box-shadow: 0 0 0 0.063rem #dadcdf, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, .15);*/
    border: 1px solid var(--border-color);
}

a.top i {
    margin: 0;
    display: block;
    font-size: 1.88em;
    color: var(--color-black);
    transition: all 0.3s ease-in-out;
}

a.top:hover {
    i::after {

        transition: .3s;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    i::before {
        top: -50%;

    }
}


.bi-arrow-up::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

.bi-arrow-up::after {
    color: #125de6;
    transition: .3s;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    content: "\f148";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;

}

/*
.no-footer {
	bottom: 13rem !important;
}*/

@media screen and (max-width: 980px) {
    a.top {
        width: 2.75rem;
        height: 2.75rem;
        bottom: var(--padding2);
    }

    a.top i {
        font-size: 1.25em;
        line-height: 2.75rem;
    }

    .no-footer {
        bottom: var(--padding2) !important;
    }
}


/* -------------------------
	INPUT STYLE CSS
--------------------------- */
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    padding: 0.625rem;
    border: 1px solid #cccfd8;
    border-radius: 0;
    line-height: normal !important;
    color: #444;
    background: var(--color-white);
}

input[type="submit"],
label {
    cursor: pointer;
}

textarea {
    width: 100%;
    padding: 0.625rem;
    resize: none;
}

/* -------------------------
	POPUP CSS
--------------------------- */
.popup_layer {
    position: absolute;
    background: var(--color-white);
    z-index: 9999;
}

.popup_layer_footer {
    padding: 0.625rem 0;
    background: var(--color-black);
    color: var(--color-white);
    text-align: right
}

.popup_layer_footer button {
    margin-right: 0.625rem;
    padding: 0.313rem 0.625rem;
    border: 0;
    background: #4F4F4F;
    color: #FFFFFF
}

@media only screen and (max-width: 1280px) {
    .popup_layer {
        left: 50% !important;
        transform: translateX(-50%);
        max-width: 550px;
    }

    .popup_layer_con {
        max-width: 100%;
        height: auto !important;
    }
}

@media only screen and (max-width: 768px) {
    .popup_layer {
        top: 70px !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: calc(100% - 30px);
    }
}

/* -------------------------
	MAIN COMMON CSS
--------------------------- */
.main_sec {
    padding: 11.25rem 0;
}

.main_sec .sec_tit {
    text-align: center;
    margin: 3.125rem 0;
}

.main_sec .sec_tit_1 {
    text-align: left;
    margin: 0 0 1.25rem;
}

.main_sec .sec_tit_1 a {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1.063rem;
    margin-left: 0.625rem;
}

.main_sec .sec_tit h3 {
    font-size: 2.63em;
    font-weight: 500;
    color: #323232;
    letter-spacing: -3px;
}

.main_sec .sec_tit_1 h3 {
    font-size: 2.25em;
}

.main_sec .sec_tit p {
    font-size: 1.13em;
    color: #646464;
    margin: 1.25rem 0 0;
}

.main_sec .sec_tit h3 {
    letter-spacing: -0.025em;
    display: inline-block;
}

/* -------------------------
	VISUAL  CSS
--------------------------- */
.carousel {
    position: relative
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-inner > .item {
    display: none;
    position: relative;
    -webkit-transition: 2.5s ease-in-out left;
    transition: 2.5s ease-in-out left;
    /*height: 360;*/
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    line-height: 1
}

.carousel-inner .main_item_1 {
    background: url(../images/main/mainsec_bg01.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.carousel-inner .main_item_2 {
    background: url(../../assets/images/main/mainsec_bg02.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.carousel-inner .main_item_3 {
    background: url(../../assets/images/main/mainsec_bg03.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.carousel-inner .main_item_4 {
    background: url(../../assets/images/main/mainsec_bg04.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
    display: block
}

.carousel-inner > .active {
    left: 0
}

.carousel-inner > .next,
.carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%
}

.carousel-inner > .next {
    left: 100%
}

.carousel-inner > .prev {
    left: -100%
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    left: 0
}

.carousel-inner > .active.left {
    left: -100%
}

.carousel-inner > .active.right {
    left: 100%
}

.carousel-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    opacity: 1;
    filter: alpha(opacity=50);
    font-size: 1.25em;
    color: var(--color-white);
    text-shadow: 0 0.063rem 0.125rem rgba(0, 0, 0, .6)
}

.carousel-control.left {
    left: 1.25rem;
}

.carousel-control.right {
    left: auto;
    right: 1.25rem;
}

.carousel-control.left img {
    position: absolute;
    top: 45%;
    left: 1.25rem;
}

.carousel-control.right img {
    position: absolute;
    top: 45%;
    right: 1.25rem;
}

.carousel-control:hover {
    outline: 0;
    color: var(--color-white);
    text-decoration: none;
    opacity: .5;
    filter: alpha(opacity=90)
}

.carousel-control span {
    position: absolute;
    top: 45%;
    z-index: 5;
    display: inline-block;
    text-align: center;
    font-size: 2em;
    line-height: 1.8em;
}

.carousel-control span i.fa-chevron-right {
    margin-right: 0;
}

.carousel-indicators {
    position: absolute;
    bottom: 32%;
    left: 50%;
    z-index: 15;
    width: 60%;
    margin-left: -30%;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

.carousel-indicators li {
    display: inline-block;
    width: 0.938rem;
    height: 0.938rem;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--color-black);
    margin: 0 0.313rem;
}

.carousel-indicators .active {
    width: 0.938rem;
    height: 0.938rem;
    background-color: #ED1B23;
}

.slide-caption {
    top: 50%;
    position: relative;
    transform: translateY(-51%);
}

.carousel-indicators h1 {
    position: absolute;
    right: 1.375rem;
    top: -0.438rem;
    display: block;
    padding: 0.25rem 1.25rem 0.25rem 0.438rem;
    color: var(--color-white);
    white-space: nowrap;
    background: var(--color-white);
}

.carousel-indicators li:hover h1 {
    display: block;
}


.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
    z-index: 2;
}

.carousel,
.carousel-inner,
.carousel-inner .item {
    height: 100%;
}


/* -------------------------
	MAIN 01  CSS
--------------------------- */
.main_sec01 {
    position: relative;
    height: 100vh;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.main_sec01 .fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}

.visual {
    font-size: 1rem;
    display: flex;
    gap: 14rem;
}

.visual .visualTxt {
    width: 27rem;
}

.visual .visualTxt .txt {
    line-height: 1.2;
    text-align: left;
}

.visual .visualTxt .txt h1 {
    font-size: 3.63em;
    color: var(--brand-color-main);
    word-break: keep-all;
    line-height: 1.1;
    margin-bottom: 33%;
}

.visual .visualTxt .txt h1 b {
    font-weight: 800;
}

.visual .visualTxt .txt h1 span {
    position: relative;
    bottom: -7px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../../assets/images/main/dot.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 3px;
}

.visual .visualTxt .txt p {
    color: var(--color-black);
    font-size: 1.13em;
    font-weight: 300;
    line-height: 1.6;
    padding-top: 30px;
    position: relative;
}

.visual .visualTxt .txt p::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 3px;
    background-color: var(--brand-color-main);
}

.visualBox {
    width: calc(100% - 41rem);
}

.visualBox .BoxWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
    gap: 20px;
    position: relative;
}

.visualBox .BoxWrap .BoxItem {
    flex: 1 1 auto;
    background-image: url(../../assets/images/main/visual_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.visualBox .BoxWrap .BoxItem .Box {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 80%;
    overflow: hidden;
    position: relative;
}

.visualBox .BoxWrap .BoxItem .Box .ItemInner {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px 25px;
}

.visualBox .circle_box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: var(--color-white);
    border-radius: 50%;
    font-size: 1.38em;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    padding: 10px;
    color: var(--brand-color-main);
    transform: translateY(-50%) translateX(-50%);
}

.visualBox .circle_box > div {
    position: relative;
    top: 4px;
}

.visualBox .BoxItem .BoxTit {
    display: block;
    width: 10rem;
}

.visualBox .BoxItem .BoxTit h3 {
    font-size: 1.38em;
    font-weight: bold;
    color: var(--brand-color-main);
    letter-spacing: -0.05px;
    text-align: left;
}

.visualBox .BoxItem:nth-child(2n) .BoxTit {
    float: right;
}

.visualBox .BoxItem:nth-child(2n) .BoxTit h3 {
    text-align: right;
}

.visualBox .BoxWrap .BoxItem1 .Box {
    background-image: url(../../assets/images/main/visual_img01.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 80%;
}

.visualBox .BoxWrap .BoxItem2 .Box {
    background-image: url(../../assets/images/main/visual_img02.png);
    background-position: center bottom 25px;
    background-repeat: no-repeat;
    background-size: 68% auto;
}

.visualBox .BoxWrap .BoxItem3 .Box {
    background-image: url(../../assets/images/main/visual_img03.png);
    background-position: left 25px bottom 25px;
    background-repeat: no-repeat;
    background-size: 70% auto;
}

.visualBox .BoxWrap .BoxItem4 .Box {
    background-image: url(../../assets/images/main/visual_img04.png);
    background-position: center bottom 25px;
    background-repeat: no-repeat;
    background-size: 55% auto;
}


.CBoxWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.CBoxWrap .BoxIn {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: left;
    word-break: keep-all;
    width: 390px;
}

.CBoxWrap .BoxIn h1 {
    font-size: 2.38em;
    font-weight: 800;
    color: var(--brand-color-main);
    line-height: 1.2;
    letter-spacing: -0.05px;
}

.CBoxWrap .BoxIn p {
    font-size: 1.06em;
    font-weight: 300;
    line-height: 1.4;
}

.CBoxWrap .BoxImg {
    width: calc(100% - 420px);
    cursor: pointer;
}

.CBoxWrap .BoxImg1 > div {
    display: block;
    height: 320px;
    background-image: url("/assets/images/main/pro_img01.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

.CBoxWrap .BoxImg2 > div {
    display: block;
    height: 320px;
    background-image: url("/assets/images/main/pro_img02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}

.CBoxWrap .BoxImg3 > div {
    display: block;
    height: 320px;
    background-image: url("/assets/images/main/pro_img03.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

.inner h1 {
    font-size: 3em;
    font-weight: 800;
    color: var(--color-black);
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.inner h2 {
    font-size: 1.6em;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-black);
    position: relative;
    margin-top: 1rem;
}

.inner h3 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-black);
    position: relative;
}

.inner {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-size: 1rem;
}

.inner .BoxIn {
    position: relative;
    margin-bottom: 3.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.BoxIn .btn_more {
    display: inline-block;
    line-height: 1.4;
}

.BoxIn .btn_more a {
    display: inline-block;
    padding-left: 85px;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-black);
    position: relative;
    line-height: 1.4;
}

.BoxIn .btn_more a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 70px;
    height: 2px;
    background-color: var(--color-black);
}

.BoxIn .btn_more a:hover {
    color: var(--brand-color-main);
}

.BoxIn .btn_more a:hover::after {
    background-color: var(--brand-color-main);
}


.BoxIn .btn_more.color_w a {
    color: var(--color-black);
    background-color: var(--color-white);
}

.BoxIn .btn_more.color_w:hover a {
    color: var(--color-white);
    background-color: var(--brand-color-main);
}

.btn_more2 {
    display: block;
    border: 1px solid var(--brand-color-main);
    color: var(--brand-color-main);
    width: 12.5rem;
    height: 3.75rem;
    font-size: 1.25em;
    text-align: center;
    line-height: 3.625rem;
    font-weight: 600;
    margin-top: 1em;
}

.btn_more2:hover {
    background-color: var(--brand-color-main);
    color: var(--color-white);
}


/* -------------------------
	SCROLL CSS
--------------------------- */
.scroll-btn {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 1rem;
    z-index: 1;
}

.scroll-btn a {
    cursor: default;
}

.scroll-btn > * {
    line-height: 1.13em;
    font-size: 1.13em;
    font-weight: 500;
    color: var(--color-grey4);
}

.scroll-btn .mouse {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 2.5rem;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid var(--color-grey4);
    border-radius: 1.563rem;
}

.scroll-btn .mouse > * {
    position: absolute;
    display: block;
    top: 15%;
    left: 8px;
    width: 0.188rem;
    height: 0.625rem;
    margin: 0;
    background: var(--color-grey4);
    border-radius: 1.875rem;
    -webkit-animation: ani-mouse 2.5s linear infinite;
    -moz-animation: ani-mouse 2.5s linear infinite;
    animation: ani-mouse 2.5s linear infinite;
}

.scroll-btn .text {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-grey4);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -0.05px;
    /*    animation: pulse 2s linear alternate infinite;*/
}

@-webkit-keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 20%;
    }

    15% {
        opacity: 1;
        top: 40%;
    }

    50% {
        opacity: 0;
        top: 40%;
    }

    100% {
        opacity: 0;
        top: 20%;
    }
}

@-moz-keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 20%;
    }

    15% {
        opacity: 1;
        top: 40%;
    }

    50% {
        opacity: 0;
        top: 40%;
    }

    100% {
        opacity: 0;
        top: 20%;
    }
}

@keyframes ani-mouse {
    0% {
        opacity: 1;
        top: 20%;
    }

    15% {
        opacity: 1;
        top: 40%;
    }

    50% {
        opacity: 0;
        top: 40%;
    }

    100% {
        opacity: 0;
        top: 20%;
    }
}


@keyframes pulse {
    to {
        opacity: 1;
    }
}

/* -------------------------
	MAIN 02  CSS
--------------------------- */
.ProList {
    width: 100%;
    height: 58%;
    overflow: hidden;
    max-width: var(--width-wrap);
    padding-left: var(--padding2);
    padding-right: var(--padding2);
    margin: 0 auto;
}

.ProList .ProIrlist {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
}

.ProList .ProIrlist .item {
    position: relative;
    width: 50%;
    width: 50%;
    /*height: 100%;*/
    flex: 1 1 auto;
}

.ProList .ProIrlist .ItemInner {
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 6.25rem 10%;
    overflow: hidden;
    text-align: left;
    font-size: 1rem;
}

.ProList .ProIrlist .ItemInner:hover {
    display: grid;
    align-content: space-between;
    position: relative;
}

.ProList .ProIrlist .ItemInner .innerbg {
    opacity: 0;
    background-color: var(--brand-color-sub);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.2s;
}

.ProList .ProIrlist .ItemInner:hover .innerbg {
    opacity: 1;
}

.ProList .ProIrlist .item1 .ItemInner {
    background: url(../../assets/images/main/proIrlist_01.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.ProList .ProIrlist .item2 .ItemInner {
    background: url(../../assets/images/main/proIrlist_02.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.ProList .ProIrlist .item3 .ItemInner {
    background: url(../../assets/images/main/proIrlist_03.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.titB .title {
    font-size: 2.25em;
    font-weight: 700;
    color: var(--color-white);
    position: relative;
    letter-spacing: -0.5px;
}

.titB .title .btn_more1 {
    display: none;
    font-size: 0.8em;
    width: 1.875rem;
    height: 1.875rem;
    text-align: center;
    transition: all 0.2s;
}

.ProList .ProIrlist .ItemInner:hover .titB .title .btn_more1 {
    display: block;
}

.listB {
    position: relative;
    width: 100%;
    opacity: 0;
    /*transition: all 0.2s;*/
}

.listB li {
    border-bottom: 1px solid var(--border-color2);
    padding: 0.625rem 0;
}

.listB li a {
    display: flex;
    justify-content: space-between;
    font-size: 1.38em;
    color: var(--color-white);
    line-height: 1.2;
}

.ProList .ProIrlist .ItemInner:hover .listB {
    opacity: 1;
}


/* -------------------------
	MAIN 03  CSS
--------------------------- */
.SlideList {
    font-size: 1rem;
}

.SlideList .item {
    border-radius: 1.25rem;
    overflow: hidden;
}

.SlideList .item .itemBox {
    display: flex;
    flex-direction: column;
}

.SlideList .item .itemBox .photo {
    position: relative;
    height: 0;
    padding-top: 70%;
}

.SlideList .item .itemBox .photo img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    transition: all 0.3s;
}

.SlideList .item .itemBox .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background-color: #F8F9FB;
    font-size: 1.5em;
    text-align: left;
    font-weight: 500;
    padding: 1.875rem 1.875rem;
    line-height: 1.2;
    transition: all 0.3s;
}

.SlideList .item .itemBox .title p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.SlideList .item .itemBox .title p > span {
    background-color: var(--color-grey2);
    width: 2px;
    height: 18px;
    margin: 0 10px;
    display: inline-block;
    position: relative;
    top: 1px;
}

.SlideList .item:hover .itemBox .title {
    background-color: var(--brand-color-main);
    color: var(--color-white);
}

.SlideList .item:hover .itemBox .title p > span {
    background-color: var(--color-white);
}

.SlideList .owl-theme {
    position: relative;
}

.SlideList .owl-nav {
    position: absolute;
    margin: 0;
    width: 100%;
    top: calc(50% - 1.875rem);
}

.SlideList .owl-theme .owl-nav {
    margin-top: 0 !important;
}


/* -------------------------
    MAIN 04  CSS
--------------------------- */

/*

.main_sec04 {
    background: url(../../assets/images/main/main_sec04_bg.jpg) no-repeat center/cover;
    transition: background 2.5s cubic-bezier(0.35, 0.72, 0.49, 1);
}

.main_sec04 .inner {
    width: auto;
    margin: 0;
    padding-right: 8em;
}

.main_sec04 .inner .BoxIn {
    flex-flow: column;
    align-items: baseline;
    gap: 2.5rem;
}
*/


.ConWrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
}

.ConWrap .leftCon {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 62.5rem;
    width: 100%;
    flex: 0 0 auto;
    color: var(--color-white);
    text-align: left;
}

.ConWrap .rightCon {
    flex: 1 1;
    position: relative;
    overflow: hidden;
}

.ElecList {
    height: 100%;
    font-size: 1rem;
}

.ElecList ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.ElecList ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 1.25em;
    flex: 1 1 50%;
    height: 50%;
    color: var(--color-white);
    border-left: 1px solid var(--border-color3);
    border-bottom: 1px solid var(--border-color3);
}

.ElecList ul li:hover {
    display: block;
    background-image: linear-gradient(to right, var(--brand-color-main), #0E2463);
}

.ElecList ul li:nth-child(3),
.ElecList ul li:nth-child(4) {
    border-bottom: 0
}

.ElecList .eBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0.8em;
    cursor: pointer;

}

.ElecList .eBox .eBoxIn {
    font-size: 1.63em;
    font-weight: 600;
    line-height: 1.2;
}

.ElecList .eBox .eBoxIn .img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9.375rem;
}

.ElecList .eBox .eBoxIn p {
    margin-top: 0.5em;
    text-transform: uppercase;
}

.ElecList .btn_more i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.88em;
    height: 0;
    opacity: 0;
    transition: height 0.25s, opacity 0.4s;
}

.ElecList .eBox .btn_more i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ElecList ul li:hover .btn_more i {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.5em;
    opacity: 1;
}


/* -------------------------
	MAIN 05  CSS
--------------------------- */

.fp-viewing-main_sec05 .main_sec04 [data-aos^=fade][data-aos^=fade],
.fp-viewing-main_sec05 .main_sec04 [data-aos=fade-up] {
    opacity: 1 !important;
    transform: none !important;
}

.main_sec05,
.main_sec05 .fp-tableCell {
    height: auto !important;
}

.contactList {
    padding: 8.75rem 0;
}

.contactList {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1em;
}

.main_sec05 .inner {
    flex: 1 1 12.5rem;
}

.MenuList {
    font-size: 1rem;
}

.MenuList li {
    font-size: 1.38em;
    text-align: right;
    line-height: 1.2;
    padding: 0.25em 0;
}

.MenuList li:hover a {
    color: var(--brand-color-main);
    font-weight: 600;
}

.main_sec05 .inner .BoxIn {
    align-items: stretch;
    flex-direction: column;
    gap: 1em;
}


/* -------------------------
	MAIN Responsive CSS
--------------------------- */
@media all and (max-width: 1600px) {

    /* MAIN 04  CSS */
    .ConWrap .leftCon {
        max-width: 55%;
    }
}


@media all and (max-width: 1460px) {
    /* MAIN 01  CSS */
    .visualBox .BoxWrap .BoxItem .Box {
        padding-bottom: 90%;
    }

    /* MAIN 02  CSS */
    .ProList .ProIrlist .ItemInner {
        padding: 15% 10%;
    }

    .titB .title {
        font-size: 2em;
    }

    /* MAIN 05  CSS */
    /* MAIN 06  CSS */
}

@media all and (max-width: 1380px) {
    .visual .visualTxt .txt h1 {
        margin-bottom: 25%;
    }
}

@media all and (max-width: 1280px) {
    /* MAIN 01  CSS */
    .section {
        padding: var(--padding3) 0 0;
    }

    .visual {
        font-size: 0.9rem;
        gap: 5rem;
    }

    .visual .visualTxt {
        width: 24rem;
    }

    .visualBox {
        width: calc(100% - 29rem);
    }

    .visual .visualTxt .txt h1 {
        margin-bottom: 40%;
    }

    .visualBox .BoxWrap .BoxItem .Box {
        padding-bottom: 75%;
    }

    .visualBox .circle_box {
        width: 170px;
        height: 170px;
    }

    .CBoxWrap {
        gap: 5rem;
    }

    .CBoxWrap .BoxIn {
        font-size: 0.9rem;
        width: 22rem;
    }

    .CBoxWrap .BoxImg {
        width: calc(100% - 27rem);
    }

    /*.scroll-btn {
        display: none;
    }*/
    .introWrap .intro {
        font-size: 0.7rem;
    }

    .inner {
        font-size: 0.7rem;
    }

    .inner h2 {
        font-size: 2.25em;
    }

    .main_sec01 {
        padding: 0;
    }

    .carousel-inner {
        height: 80vh;
    }

    .introWrap {
        transform: translateY(-40%);
    }


    /* MAIN 02  CSS */
    .inner .BoxIn {
        margin-bottom: 2.5rem;
    }

    .ProList {
        height: 28rem;
        padding: 0 var(--padding2);
    }

    .ProList .ProIrlist .ItemInner .ItemImg {
        padding: var(--spacing-1);
    }

    .ProList .ProIrlist .ItemInner {
        padding: 10%;
    }

    .titB .title {
        font-size: 1.5em;
    }

    /* MAIN 04  CSS */
    .ConWrap {
        flex-direction: column;
        align-items: baseline;
    }

    .ConWrap .leftCon,
    .ConWrap .rightCon {
        width: 100%;
        max-width: 100%;
        align-self: normal;
    }

    .ConWrap .leftCon {
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
    }

    .ConWrap .rightCon {
        width: auto;
        max-width: none;
        min-width: 100%;
        display: grid;
        align-items: end;
        margin-top: 3.125rem;
    }

    .ElecList ul li:nth-child(1),
    .ElecList ul li:nth-child(2) {
        border-top: 1px solid var(--border-color3);
    }

    .ElecList ul li:nth-child(2n-1) {
        border-right: 0;
        border-left: 0;
    }

    .ElecList .eBox .eBoxIn .img {
        min-height: 5.938rem;
    }

    .ElecList .eBox .eBoxIn .img img {
        width: 5.625rem;
    }

    /* MAIN 05  CSS */
    /* MAIN 06  CSS */
}

@media screen and (max-width: 1180px) {
    .visual .visualTxt .txt h1 {
        margin-bottom: 30%;
    }
}

@media screen and (max-width: 1080px) {
    .main_sec01 {
        height: 100%;
        padding-top: 10rem;
    }

    .scroll-btn {
        display: none;
    }

    .visual {
        gap: 3rem;
    }

    .visual .visualTxt {
        width: 24rem;
    }

    .visualBox {
        width: calc(100% - 27rem);
    }

    .visual .visualTxt .txt h1 {
        font-size: 3em;
    }

    .visualBox .BoxWrap .BoxItem .Box {
        padding-bottom: 90%;
    }

    .visualBox .circle_box {
        width: 160px;
        height: 160px;
        font-size: 1.28em;
    }

    .visualBox .BoxItem .BoxTit h3 {
        font-size: 1.28em;
    }

    .CBoxWrap {
        gap: 2rem;
    }

    .CBoxWrap .BoxIn {
        width: 20rem;
    }

    .CBoxWrap .BoxImg {
        width: calc(100% - 22rem);
    }

    .CBoxWrap .BoxIn h1 {
        font-size: 2.3em;
    }
}


@media screen and (max-width: 980px) {

    .section {
        /*padding: var(--padding) 0 0;*/
        padding: var(--padding6) 0 0;
    }

    .main_sec01 {
        padding-top: 6rem;
    }

    .visual {
        font-size: 0.7rem;
        gap: var(--spacing-2);
        flex-wrap: wrap;
    }

    .visual .visualTxt {
        width: 100%;
    }

    .visualBox {
        width: 100%;
    }

    .visual .visualTxt .txt h1 {
        margin-bottom: var(--spacing-2);
        font-size: 2.5em;
    }

    .visual .visualTxt .txt h1 br {
        display: none;
    }

    .visual .visualTxt .txt p {
        padding-top: var(--spacing-2);
        font-size: 1.33929em;
    }

    .visual .visualTxt .txt p br {
        display: none;
    }

    .visual .visualTxt .txt h1 span {
        width: 9px;
        height: 9px;
        bottom: -5px;
        margin-left: 1px;
    }

    .main_sec03 .CBoxWrap .BoxImg {
        order: 2;
    }

    .main_sec03 .CBoxWrap .BoxIn {
        order: 1;
    }

    .CBoxWrap {
        flex-wrap: wrap;
        gap: var(--spacing);
    }


    .CBoxWrap .BoxIn {
        width: 100%;
        font-size: 0.7rem;
        gap: var(--spacing-8);
    }

    .CBoxWrap .BoxIn.taR {
        text-align: left !important;
    }

    .CBoxWrap .BoxIn .btn_more {
        margin-top: var(--spacing-8);
    }

    .CBoxWrap .BoxImg {
        width: 100%;
    }

    .CBoxWrap .BoxImg > div {
        height: 280px;
    }

    .CBoxWrap .BoxIn h1 {
        font-size: 2.5em;
    }

    .CBoxWrap .BoxIn p {
        font-size: 1.33929em;
    }

    .CBoxWrap .BoxIn p br {
        display: none;
    }

    .BoxIn .btn_more a {
        font-size: 1.25em;
        padding-left: 60px;
    }

    .BoxIn .btn_more a::after {
        width: 50px;
    }

    .visualBox .BoxWrap {
        gap: 15px;
    }

    .visualBox .BoxWrap .BoxItem .Box .ItemInner {
        padding: 15px;
    }

    .visualBox .BoxItem .BoxTit {
        width: 140px;
    }

    .visualBox .BoxItem .BoxTit h3,
    .visualBox .circle_box {
        font-size: 1.42857em;
    }

    .visualBox .circle_box {
        width: 160px;
        height: 160px;
    }

    /* MAIN 01  CSS */
    .inner .BoxIn {
        margin-bottom: 1.25rem;
    }

    .introWrap .intro h1 {
        font-size: 2.5em;
    }

    .inner h1 {
        font-size: 2.5em;
    }

    .inner h2 {
        font-size: 1.75em;
        margin-top: 0.25rem;
    }

    /* MAIN 02  CSS */
    .ProList {
        height: 22rem;
    }

    .ProList .ProIrlist {
        gap: 10px;
    }

    .ProList .ProIrlist .item {
        width: 100%;
    }

    .ProList .ProIrlist .ItemInner {
        font-size: 0.7rem;
        position: relative;
    }

    .ProList .ProIrlist .ItemInner .innerbg {
        opacity: 0.5;
    }

    .ProList .ProIrlist .ItemInner .ItemImg {
        min-height: 11.25rem;
    }

    .ProList .ProIrlist .ItemInner .ItemImg {
        background-position: bottom;
    }

    .listB {
        opacity: 1;
        padding-top: 1.25rem;
    }

    .listB li {
        border-bottom: 1px solid var(--color-white);
    }

    .titB .title {
        font-size: 1.6em;
    }


    /* MAIN 03  CSS */
    .SlideList {
        font-size: 0.7em;
    }

    .SlideList .item .itemBox .title {
        padding: 1.25rem;
    }

    .SlideList .item .itemBox .title p > span {
        width: 1px;
        height: 12px;
        margin: 0 5px;
        top: 0;
    }

    /* MAIN 04  CSS */
    .ElecList {
        font-size: 0.7rem;
    }

    .ConWrap {
        height: 33.75rem;
    }

    .ConWrap .rightCon {
        margin-top: 1.875rem;
    }

    .ElecList .eBox .eBoxIn {
        font-size: 1.5em;
    }

    .ElecList .eBox .btn_more {
        font-size: 1.5em;
    }

    .ElecList ul li:hover .eBox .btn_more {
        width: 1.875rem;
        height: 1.875rem;
    }

    /* MAIN 05  CSS */
    .contactList {
        padding: var(--padding) 0;
    }

    /* MAIN 06  CSS */
    .btn_more2 {
        width: 8.75rem;
        height: 2.625rem;
        line-height: 2.625rem;
    }

    .MenuList {
        font-size: 0.8rem;
    }

}


@media (max-width: 768px) {
    .carousel-inner {
        height: 60vh;
    }

    .carousel-inner .main_item_1 {
        background-position: center right 40%;
    }

    /* MAIN 01  CSS */
    .visual .visualTxt .txt h1 {
        font-size: 2.32143em;
    }

    .visualBox .BoxWrap .BoxItem .Box {
        padding-bottom: 100%;
    }

    .visualBox .circle_box {
        width: 150px;
        height: 150px;
        padding: 10px;
    }

    .CBoxWrap .BoxIn .btn_more {
        margin-top: 0;
    }

    .CBoxWrap .BoxIn h1 {
        font-size: 2.14286em;
    }

    .CBoxWrap .BoxImg > div {
        height: 180px;
        background-position: center;
    }

    .BoxIn .btn_more a {
        font-size: 1.16em;
    }

    .introWrap .intro h1 {
        font-size: 2em;
    }

    .inner .BoxIn {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }


    /* MAIN 02  CSS */
    .ProList {
        height: 100%;
    }

    .ProList .ProIrlist {
        width: 100%;
        flex-flow: column;
    }

    .ProList .ProIrlist .ItemInner {
        padding: var(--spacing-3);
        min-height: 14.25rem;
    }

    .ProList .ProIrlist .item1 .ItemInner {
        background-position: bottom;
    }

    /* MAIN 04  CSS */
    .ElecList .eBox .eBoxIn .img img {
        width: 4rem;
    }

    .ElecList ul li:nth-child(4) .eBox .eBoxIn .img img {
        width: 3.375rem;
    }

    /* MAIN 05  CSS */
    .main_sec05 .inner {
        flex: 0 0 auto;
    }

    .contactList {
        flex-flow: column;
        align-items: flex-start;
    }

    .MenuList {
        display: none;
    }

}

@media (max-width: 640px) {
    /* MAIN 01  CSS */
    .inner h1 {
        font-size: 2em;
        letter-spacing: -1px;
    }

    .inner .BoxIn {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    .visualBox .BoxWrap {
        gap: 10px;
    }

    .visualBox .BoxItem .BoxTit {
        width: 100px;
    }

    .visualBox .BoxWrap .BoxItem .Box {
        padding-bottom: 110%;
    }

    .visualBox .BoxWrap .BoxItem2 .Box {
        background-size: 70% auto;
    }

    .visualBox .BoxWrap .BoxItem3 .Box {
        background-size: 80% auto;
        background-position: left 20px bottom 25px;
    }

    .visualBox .BoxWrap .BoxItem4 .Box {
        background-size: 65% auto;
    }

    .visualBox .circle_box {
        width: 110px;
        height: 110px;
        padding: 5px;
    }

    .visualBox .BoxItem .BoxTit h3, .visualBox .circle_box {
        font-size: 1.25em;
    }

    .visualBox .BoxWrap .BoxItem1 .Box {
        background-size: auto 70%;
    }

    .CBoxWrap .BoxIn p br {
        display: block;
    }

    .main_sec03 .CBoxWrap .BoxIn p br:nth-child(2) {
        display: none;
    }

    /* MAIN 02  CSS */
    /* MAIN 03  CSS */
    /* MAIN 04  CSS */
    /* MAIN 05  CSS */
    /* MAIN 06  CSS */
}

@media (max-width: 480px) {
    /* MAIN 01  CSS */
    .introWrap .intro h1 {
        font-size: 1.85em;
        letter-spacing: -0.05rem;
        line-height: 1.2;
    }

    .main_item_4 .introWrap .intro h1 > span:first-child {
        letter-spacing: -0.08rem;
    }

    .visualBox .BoxWrap .BoxItem.BoxItem3 .Box,
    .visualBox .BoxWrap .BoxItem.BoxItem4 .Box {
        background-position: center bottom 15px;
    }

    .visual .visualTxt .txt h1 br:nth-of-type(2) {
        display: block;
    }

    /* MAIN 02  CSS */
    .ProList .ProIrlist .ItemInner {
        padding: var(--spacing-2);
        min-height: 11.25rem;
    }

    /* MAIN 03  CSS */
    /* MAIN 04  CSS */
    /* MAIN 05  CSS */
    /* MAIN 06  CSS */
}

@media (max-width: 362px) {
    .CBoxWrap .BoxIn p br {
        display: none;
    }
}

/* -------------------------
	SUB COMMON
--------------------------- */
.sub1_bg {
    background-image: url(../../assets/images/sub/sub1_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sub2_bg {
    background-image: url(../../assets/images/sub/sub2_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sub3_bg {
    background-image: url(../../assets/images/sub/sub3_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sub4_bg {
    background-image: url(../../assets/images/sub/sub4_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sub5_bg {
    background-image: url(../../assets/images/sub/sub5_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sub6_bg {
    background-image: url(../../assets/images/sub/sub6_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sub_banner_wrap {
    padding: 11rem var(--padding2) 9rem;
}

.sub_banner_wrap1 {
    padding: 13rem var(--padding2) 7rem;
}

.sub_banner2 {
    font-size: 2.8em;
    color: var(--color-white);
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
}

.headD {
    margin-bottom: 4.375rem;
    padding: 0 var(--padding2);
}

.headD h1 {
    word-break: keep-all;
    /*font-size: 2.13em;*/
    font-size: 2.4em;
    text-align: center;
    color: var(--color-black);
    font-weight: 800;
    letter-spacing: -1px;
}

.headD h3 {
    word-break: keep-all;
    font-size: 1.13em;
    text-align: center;
    color: var(--color-black);
    font-weight: bold;
}

.headD > p {
    word-break: keep-all;
    font-size: 1.75em;
    text-align: center;
    color: var(--color-grey2);
    font-weight: 500;
    margin-top: var(--spacing-8);
    line-height: 1.2;
}

.headD h1 > span {
    font-size: 0.9em;
    font-weight: 500;
    display: block;
}

.headD .link {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing);
}

.headD .link a {
    word-break: keep-all;
    display: inline-block;
    font-size: var(--cont_txt2);
    text-align: center;
    color: var(--color-white);
    font-weight: 600;
    padding: var(--padding2) var(--padding4);
    border-radius: 100px;
    line-height: 1.2;
    background-color: var(--color-black4);
}

.headD .link a img {
    width: 20px;
}

.headD .link a:hover {
    background-color: var(--color-black);
}

.h3tit {
    text-align: left;
    font-size: var(--cont_tit2);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--color-black);
    line-height: 1.2;
}

.h3tit_ty1 {
    display: inline-block;
    background-color: var(--color-white);
    padding-right: 20px;
}

.h3tit_ty1::after {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--color-black);
    z-index: -1;
}

.h4tit {
    text-align: left;
    font-size: var(--cont_txt);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--color-grey2);
    line-height: 1.2;
    margin-bottom: 1.25em;
}

.con-wrap {
    padding: 5rem 0;
}

.content_wrap {
    padding: 6.25rem 0;
    font-size: 1rem;
}

.default_wrap {
    position: relative;
    max-width: 100%;
    width: var(--width-wrap);
    margin: 0 auto;
    padding: 0 var(--padding2);
}

.default_wrap.full {
    width: 100%;
    padding: 0;
}

.default_wrap > h2 {
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: -1px;
}

.default_wrap > h3 {
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--color-grey2);
    margin-top: 1.25rem;
}


@media screen and (max-width: 1280px) {
    .sub_banner_wrap {
        padding: 9rem 0 4rem;
    }

}

@media screen and (max-width: 980px) {
    .content_wrap {
        padding: var(--padding) 0;
        font-size: 0.7rem;
    }

    .sub_banner_wrap {
        padding: 8.25rem 0 4.25rem;
    }

    .sub_banner2 {
        font-size: 2.63em;
    }

    .headD {
        margin-bottom: var(--padding4);
    }

    .headD h1 {
        font-size: 2.25em;
    }

    .headD > p {
        font-size: 1.6em;
        margin-top: var(--spacing-9);
    }

    .con-wrap {
        padding: var(--padding4) 0;
        font-size: 0.8rem;
    }

    .h3tit {
        font-size: var(--cont_tit2);
    }

    .h3tit_ty1::after {
        top: 17px;
    }

    .h4tit {
        font-size: 1.25em;
        margin-bottom: 0.938em;
    }

    .headD .link a {
        font-size: 1.5em;
        padding: var(--spacing-8) var(--padding2);
    }

    .headD .link a img {
        width: 20px;
    }

    .default_wrap > h3 {
        margin-top: var(--spacing-8);
        font-size: 1.8em;
    }

    .default_wrap.pb50 {
        padding-bottom: var(--spacing-2) !important;
    }

}

@media screen and (max-width: 768px) {
    .content_wrap {
        padding: var(--padding4) 0;
        font-size: 0.6rem;
    }

    .content_wrap1 {
        padding: var(--padding4) 0 0;
    }

    .con-wrap {
        padding: var(--padding4) 0;
    }

    .sub_banner_wrap {
        padding: 7.25rem 0.938rem 3.375rem;
    }

    .headD {
        margin-bottom: 2rem;
    }

    .h3tit {
        font-size: 1.75em;
    }

    .h3tit_ty1 {
        padding-right: 0;
    }

    .h3tit_ty1::after {
        display: none;
    }


    .sub1_bg,
    .sub2_bg,
    .sub3_bg,
    .sub4_bg,
    .sub5_bg,
    .sub6_bg {
        background: none;
    }

    .sub1_bg .s_bg {
        background-image: url(../../assets/images/sub/sub1_bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sub2_bg .s_bg {
        background-image: url(../../assets/images/sub/sub2_bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sub3_bg .s_bg {
        background-image: url(../../assets/images/sub/sub3_bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sub4_bg .s_bg {
        background-image: url(../../assets/images/sub/sub4_bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sub5_bg .s_bg {
        background-image: url(../../assets/images/sub/sub5_bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .sub6_bg .s_bg {
        background-image: url(../../assets/images/sub/sub6_bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}


/* -------------------------
	TABLE STYLE
--------------------------- */
table caption {
    position: relative;
    height: 0;
    font-size: 0;
    line-height: 0;
}

/* STYLE 1*/
.tbl_basic {
    margin-bottom: 0.625rem;
    width: 100%;
    border-top: 2px solid transparent;
    border-bottom: 1px solid transparent;
}

.tbl_basic th,
.tbl_basic td {
    padding: 0.625rem 0.938rem;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: keep-all;
    line-height: 1.6;
    border: 1px solid var(--border-color);
}

.tbl_basic th:first-child,
.tbl_basic td:first-child {
    border-left: none
}

.tbl_basic th:last-child,
.tbl_basic td:last-child {
    border-right: none
}

.tbl_basic th.trw,
.tbl_basic td.trw {
    border-right: 1px solid var(--border-color);
}

.tbl_basic tbody th,
.tbl_basic thead th {
    vertical-align: middle;
}

.tbl_basic thead th,
.tbl_basic tfoot th {
    background-image: none;
}

.tbl_basic tbody th {
}

.tbl_basic thead th {
    padding: 0.938rem 0;
    background: #f5f5f5;
    font-size: 1.13em;
    font-weight: 500;
}

.tbl_basic3 thead th {
    font-size: 1em;
}

.tbl_basic td .btn-file {
    font-size: 0.75em;
}

.tbl_basic {
    border-top-color: #333;
    border-bottom-color: var(--border-color);
}

.tbl_basic th,
.tbl_basic td {
    text-align: center;
    padding: 0.813rem 0.938rem;
    letter-spacing: -0.025em;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    font-size: 1em;
    color: var(--color-black);
    word-break: break-all;
}

.tbl_basic th,
.tbl_basic td {
    font-size: 0.88em;
    padding: 0.813rem 0;
}

@media only screen and (max-width: 990px) {
    .tbl_tit_wrap .tbl_tit {
        font-size: 1.13em !important;
    }

    .tbl_tit_wrap p {
        font-size: 0.94em;
    }

    .tbl_basic tbody th {
        font-size: 0.94em;
    }
}

@media only screen and (max-width: 640px) {

    .tbl_basic th,
    .tbl_basic td {
        padding: 1.125rem 0.313rem;
    }
}

/* -------------------------
	MODAL CSS
--------------------------- */
.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: var(--color-black);
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: none;
    overflow: auto;
    /*overflow-y: scroll;*/
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal .modal-dialog {
    position: relative;
    width: 37.5rem;
    margin: 3.75rem auto;
}

.modal .close {
    float: right;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1;
    color: var(--color-white);
    filter: alpha(opacity=20);
}

.modal .close:hover,
.modal .close:focus {
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}

.modal button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    font-size: 1.63em;
    float: none;
    position: absolute;
    line-height: 3.25rem;
    right: 1.25rem;
    opacity: 1;
    font-weight: 400;
}

.modal button.close span {
    font-weight: 400;
}


.modal button.close span i {
    color: var(--color-black);
}

.modal .modal-content {
    position: relative;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0.375rem;
    outline: none;
    -webkit-box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, .5);
    box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, .5);
    overflow: hidden;
}

.modal .modal-content img {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.modal .modal-header {
    position: relative;
}

.modal .modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal .modal-body {
    position: relative;
    padding: 1.25rem;
}

.modal .signup button {
    width: 7.5rem;
    float: left;
    background: #3F9D4A;
    border: none;
    overflow: visible;
    font-size: 1.2em;
    color: var(--color-white);
    padding: 0.438rem 0.625rem;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    font-weight: 600;
}

.modal .signup button:last-child {
    float: right;
}

.modal .signup .signup-header {
    padding: 0.938rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 0.313rem;
    -moz-border-radius-topleft: 0.313rem;
    -webkit-border-top-left-radius: 0.313rem;
    border-top-right-radius: 0.313rem;
    -moz-border-radius-topright: 0.313rem;
    -webkit-border-top-right-radius: 0.313rem;
    background: #f5f5f5;
    color: var(--color-black);
}

.modal .signup .signup-header h2 {
    width: calc(100% - 1.625rem);
    color: var(--color-black);
    font-size: 1.13em;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
}

.modal .signup .signup-header p {
    color: #444;
    font-size: 1em;
    line-height: 1.6em;
    margin: 0 0 0.938rem;
    text-shadow: none;
}


.modal .modal-footer {
    padding: 1.25rem 1.25rem 1.25rem;
    margin-top: 0.938rem;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.modal .modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 0.313rem;
}

.modal .modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}

.modal .modal-footer .btn-block + .btn-block {
    margin-left: 0;
}


.modal .modal-footer:before,
.modal .modal-footer:after {
    display: table;
    content: " ";
}

.modal .modal-footer:after {
    clear: both;
}

@media (max-width: 768px) {
    .modal .modal-dialog {
        margin: 0 auto;
        width: 100%;
        overflow: hidden;
        padding: 0.938rem;
    }

    .modal .modal-content img {
        width: 100%;
    }

}


/* -------------------------
	PRINT CSS
--------------------------- */
/* Media query for Printing */
@media only print {
    a[href]::after {
        content: none !important;
    }

    #content-wrap .content-area {
        width: 100%;
        max-width: 100%;
        padding: 0 0 3.125rem 0;
    }

    #content-wrap {
        margin-top: 0;
    }

    header,
    #primary > article,
    .lnb_container,
    aside,
    #sidebar,
    #nmFooter,
    a.top {
        display: none;
    }

    .print_none {
        display: none;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    article {
        page-break-before: always;
    }

    ul,
    img {
        page-break-inside: avoid;
    }
}

/* -------------------------
	SUB NAV CSS
--------------------------- */
.lnb_visual {
    position: relative;
    font-size: 1rem;
}

.lnb_container {
    position: absolute;
    width: 100%;
    background-color: rgb(0 0 0 / 30%);
    bottom: 0;
}

.lnb_container .container {
    max-width: 91.25rem;
    padding-right: 0;
    padding-left: 0;
}

.lnb_container .location {
    width: 100%;
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));*/
}

.lnb_container .location2 {
    grid-template-columns: repeat(2, 1fr);
}

.lnb_container .location3 {
    grid-template-columns: repeat(3, 1fr);
}

.lnb_container .location4 {
    grid-template-columns: repeat(4, 1fr);
}

.lnb_container .location5 {
    grid-template-columns: repeat(5, 1fr);
}

.lnb_container .location6 {
    grid-template-columns: repeat(6, 1fr);
}

.lnb_container .location7 {
    grid-template-columns: repeat(7, 1fr);
}

.lnb_container .location-mobile {
    display: none;
}

.lnb_container .location a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.06em;
    height: 3.75rem;
    color: var(--color-white);
    line-height: 1.2;
}

.lnb_container .location a.active {
    background-color: var(--color-white);
    color: var(--color-black);
    font-weight: 500;
}

.lnb_container .location a:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    font-weight: 500;
}

/*
.sub4_bg .lnb_container .location {
    grid-template-columns: repeat(5, 1fr);
}
*/

@media screen and (max-width: 1280px) {
    .lnb_container {
        position: relative;
    }

    .lnb_container .location {
        grid-template-columns: repeat(4, 1fr);
    }

    .lnb_container .location2 {
        grid-template-columns: repeat(5, 1fr);
    }

    .lnb_container .location3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lnb_container .location4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lnb_container .location5 {
        grid-template-columns: repeat(3, 1fr);
    }


    .lnb_container .location a {
        height: 3.125rem;
    }

}

@media screen and (max-width: 980px) {
    .lnb_visual {
        font-size: 0.9rem;
    }

    .lnb_container .location {
        font-size: 0.9rem;
    }

    .lnb_container .location a {
        height: 3.125rem;
    }

}

@media screen and (max-width: 768px) {
    .lnb_visual {
        font-size: 0.7rem;
    }

    .lnb_container {
        background-color: var(--color-white);
    }

    .lnb_container .container {
        overflow-x: auto;
    }

    .lnb_container .location {
        display: none;
    }

    .lnb_container .location-mobile {
        display: block;
    }

    .lnb_container .location a {
        justify-content: start;
        text-align: left;
        padding: 0 var(--padding2);
        font-size: 1em;
        height: 2.5rem;
        color: var(--color-grey1);
    }

    .lnb_container .location a br {
        display: none;
    }

    .lnb_container .location a.active {
        position: relative;
        border-bottom: 1px solid var(--border-color);
    }

    .lnb_container .location a.active::after {
        content: "\F282";
        font-family: bootstrap-icons !important;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        position: absolute;
        right: var(--padding2);
        font-weight: 700;
        font-size: 0.9em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s, -webkit-transform .3s;
    }

    .lnb_container .location.on a.active::after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .lnb_container .location .location-wrapper {
        display: none;
        border-bottom: 1px solid var(--border-color);
    }
}


/* -------------------------
	Corporate Profile
--------------------------- */
.partners-wrap {
    padding: 5rem 0;
}

.group-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.75rem;
}

.profile-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.profile-wrap .list {
    width: 100%;
    display: flex;
    gap: 3.125rem;
    border-top: 1px solid #d9d9d9;
    padding: var(--padding5) 0;
}

.profile-wrap .list .img-box {
    width: 35rem;
    height: 22.5rem;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    overflow: hidden;
}

.profile-wrap .list .img-box .img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.profile-wrap .list .txt-box {
    padding: 0.938rem 0;
    width: calc(100% - 38.125rem);
}

.profile-wrap .list .txt-box .tit {
    font-size: 1.5em;
    color: var(--color-black);
    margin-bottom: 1.563rem;
    font-weight: 500;
    line-height: 1.4;
}

.profile-wrap .list .txt-box ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;

}

.profile-wrap .list .txt-box ul li {
    font-size: 1.13em;
    font-weight: lighter;
    color: var(--color-black);
    line-height: 1.4;
    position: relative;
    padding-left: 1.25rem;
}

.profile-wrap .list .txt-box ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.688rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}

.profile-wrap1 {
    padding: var(--padding4) 0;
}

.profile-box h3 {
    font-size: var(--cont_tit);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: var(--padding);
}

.profile-box h3 b {
    color: var(--brand-color-main);
}

.profile-box {
    padding: 5rem 0;
}

.profile-box > p {
    font-size: 1.25em;
    font-weight: 300;
    line-height: 1.4;
}

.profile-box > p {
    margin-bottom: 1.5625rem;
}

.profile-box > p:last-child {
    margin-bottom: 0;
}

.t_box {
    margin-bottom: var(--spacing-4);
    text-align: center;
    line-height: 1.2;
}

.t_box h3 {
    font-size: 2.67em;
    font-weight: bold;
}

.t_box p {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--color-grey2);
    margin-top: var(--spacing-8);
}

.ProList2 {
    margin: 0 auto;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

.ProList2 .ProIrlist {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    height: 100%;
}

.ProList2 .ProIrlist .item {
    position: relative;
    width: 100%;
    /*height: 100%;*/
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.ProList2 .ProIrlist .ItemInner {
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
}

.ProList2 .ProIrlist .ItemInner .ItemImg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -webkit-transition: -webkit-transform 400ms;
    transition: -webkit-transform 400ms;
    transition: transform 400ms;
    transition: transform 400ms, -webkit-transform 400ms;
}


.ProList2 .ProIrlist .ItemInner:hover .ItemImg {
    position: relative;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.ProList2 .ProIrlist .ItemInner .innerbg {
    opacity: 0;
    background-color: var(--brand-color-sub);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.2s;
}

.ProList2 .ProIrlist .ItemInner:hover .innerbg {
    opacity: 1;
}

.ProList2 .titB {
    position: absolute;
    left: 10%;
    bottom: 10%;
    line-height: 1.2;
}

.ProList2 .titB .title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-white);
}

.ProList2 .titB .title1 {
    color: var(--color-grey3);
}

.ProList2 .ProIrlist .ItemInner:hover .titB .title1 {
    color: var(--color-white);
}


/* -------------------------
	Group Subsidiaries
--------------------------- */
.slide_imgbox {
    position: relative;
    height: 23.75rem;
}

.slide_imgbox .img-wrap {
    height: 100%;
    background-position: center;
    background-size: cover;
}

.slide_imgbox .curtain-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.slide_imgbox .curtain-wrap > div {
    width: calc(50% - 30.625rem);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
}

.slide_imgbox .curtain-wrap .right {
    left: auto;
    right: 0;
}

.group-wrap {
    padding: 5rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6.25rem;
}

.group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.group-wrap .group > h3 {
    position: relative;
    text-align: left;
    font-size: var(--cont_tit2);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--color-black);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.group-wrap .group > h3 .flag {
    display: flex;
    align-items: center;
}

.group-wrap .group > h3 .flag img {
    width: 40px;
    vertical-align: middle;
}

.group-wrap .group > h3 .flag1 img {
    border: 1px solid #ddd;
}

.group .group-box {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 100%;
}

.group .group-box .box {
    width: 100%;
    padding: 2.5rem 1.875rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: 1.875rem;
    align-items: flex-end;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
}

.group .group-box a.box {
    cursor: pointer;
}

.group .group-box .box .inbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    gap: var(--padding2);
}

.group .group-box .box .inbox > p:first-child {
    font-size: var(--cont_txt);
    font-weight: 600;
    color: var(--color-black);
}

.group .group-box .box .inbox > p {
    font-size: var(--cont_txt2);
    color: var(--color-grey1);
    font-weight: 300;
}

.group .group-box .box .ico i {
    font-size: 1.88em;
    width: var(--spacing-3);
    height: var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black4);
}

/*
.group .group-box .box:hover .inbox > p{
    color: var(--brand-color-main);
}
*/


/* -------------------------
	Investor Relations
--------------------------- */
.ivBox-wrap {
    padding-top: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.ivBox-wrap .BoxIn {
    position: relative;
}

.ivBox-wrap .BoxIn {
    display: grid;
    column-gap: var(--spacing-1);
    grid-template-columns: repeat(4, 1fr);
}

.ivBox-wrap .BoxIn .Box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1.25rem;
    padding: var(--padding4);
    gap: 1.75rem;
    line-height: 1.2;
    border: 1px solid var(--border-color);
}

.ivBox-wrap .BoxIn .Box > p {
    font-size: 1.13em;
    font-weight: 400;
}

.ivBox-wrap .BoxIn .Box .ico {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
}

.ivBox-wrap .BoxIn .Box .ico img {
    width: 6.25rem;
    height: 6.25rem;
}

/* -------------------------
	EHS Management
--------------------------- */
.ivBox-wrap-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--color-white3);
}

.ivBox-wrap-1 .BoxImg {
    position: relative;
    max-width: 100%;
    height: 100%;
}

.ivBox-wrap-1 .BoxImg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.BoxList {
    padding: var(--padding3);
}

.BoxList ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: var(--spacing-3);
}

.BoxList .Box {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: row;
    gap: 1em;
}

.BoxList .Box .num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    font-size: 1em;
    background-color: var(--brand-color-main);
    color: var(--color-white);
    text-align: center;
}

.BoxList .Box .desc {
    font-size: 1.25em;
    font-weight: 400;
}

/* -------------------------
    Global Customers
--------------------------- */
.ivBox-wrap-2 {
    display: flex;
    background: url(../../assets/images/sub/about/global_bg.jpg) no-repeat 0;
    background-size: contain;
    background-position: center right;
}

.ivBox-wrap-2 .Box-left {
    width: 40%;
    line-height: 1.4;
}

.ivBox-wrap-2 .Box-right {
    width: 60%;
    font-size: var(--cont_txt2);
    /*background: url(../../assets/images/sub/about/global_bg.jpg) no-repeat 50% 50%/cover;*/
    line-height: 1.4;
}

.Box-left .Box li {
    margin-bottom: var(--spacing-8);
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.25em;
    font-weight: 300;
}

.Box-left .Box li:last-child {
    margin-bottom: 0;
}

.Box-left .Box li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.8rem;
    left: 0;
    width: 0.8rem;
    height: 0.2rem;
    background-color: var(--brand-color-main);
}

.Box-left .btn-wrap {
    margin-left: 1.5rem;
}

.Box-right .Box {
    margin: 0 auto;
    width: 70%;
    font-weight: 400;
    padding-left: var(--padding);
}

.Box-right .Box > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: var(--spacing-8);
}

/* -------------------------
    Social Responsibility
--------------------------- */
.social-list-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.social-list-wrap .social-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--spacing-4);
    row-gap: var(--spacing-4);
}

.social-list-wrap .social-list > li {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
}

.social-list li .img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.social-list li .tit .num {
    color: var(--brand-color-main);
    font-size: var(--cont_txt);
    font-weight: 900;
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.social-list li .desc {
    width: 50%;
    height: 100%;
    display: flex;
    gap: 1.75em;
    align-items: baseline;
}

.social-list li .desc .s-list h4 {
    color: var(--color-black);
    font-size: var(--cont_txt2);
    margin-bottom: 1.563rem;
    font-weight: 700;
}

.social-list li .desc .s-list ul {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
}

.social-list li .desc .s-list li {
    font-size: var(--cont_txt2);
    font-weight: lighter;
    color: var(--color-black);
    line-height: 1.4;
    position: relative;
    padding-left: 1.25rem;
}

.social-list li .desc .s-list li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.625rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem
}


/* -------------------------
    Bioreactors
--------------------------- */
.sg-wrap {
    padding: var(--padding6) 0;
    display: flex;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    line-height: 1.2;
    gap: var(--padding);
}

.sg-wrap:last-child {
    padding-bottom: var(--padding6);
}

.contentD .default_wrap .sg-wrap {
    border-bottom: 1px solid var(--border-color);
}

.contentD .default_wrap:last-child .sg-wrap {
    border-bottom: 0;
}

.contentD .default_wrap .sg-wrap.bb-0 {
    border-bottom: 0;
}

.sg-wrap1 {
    padding: var(--padding3) 0;
    width: 100%;
    overflow: hidden;
    line-height: 1.2;
}

.sg-wrap2 {
    padding: var(--padding) 0 var(--padding3);
}

.sg-wrap .leftCon {
    width: 45%;
    flex: 0 0 auto;
}

.sg-wrap .leftCon > .img {
    /*border-radius: var(--radius-lg);*/
    overflow: hidden;
}

.sg-wrap .leftCon > .img.bs-1 {
    border: 1px solid #ddd;
}

.sg-wrap .leftCon > .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sg-wrap .rightCon {
    width: 55%;
}

.sg-wrap .rightCon .ConDivide {
    border-bottom: 1px solid var(--border-color);
    padding: var(--padding) 0;
}

.sg-wrap .rightCon .ConDivide:first-child {
    padding-top: 0;
}

.sg-wrap .rightCon .ConDivide:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.img_wrap {
    margin-top: var(--spacing-2);
}

.img_wrap .item-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing);
    text-align: center;
}

.img_wrap .item-box .box {
    display: flex;
    flex-flow: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.img_wrap .item-box .box .img {
    background-color: var(--color-white);
    height: 20rem;
}

.img_wrap .item-box .box .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img_wrap .item-box .box .txt {
    background-color: var(--color-black3);
    padding: var(--padding2);
    color: var(--color-white);
}

.sg-wrap1 .img_wrap {
    margin-top: 0;
}

.sg-wrap1 .img_wrap .item-box {
    gap: var(--padding);
}

.sg-wrap1 .img_wrap .item-box .box {
    display: block;
    text-align: left;
}

.sg-wrap1 .img_wrap .item-box .box .txt {
    display: inline-block;
    color: var(--color-black);
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    background-color: #f7f8fb;
    text-align: left;
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: var(--spacing-8);
}

.sg-wrap1 .img_wrap .item-box .box {
    border-radius: 0;
}

.sg-wrap1 .img_wrap .item-box .box .img {
    border-radius: var(--radius-lg);
    border: 1px solid #ddd;
    height: auto;
    overflow: hidden;
}

.sg-wrap .sg_tit {
    font-size: var(--cont_tit2);
    color: var(--brand-color-main);
    font-weight: 600;
    margin-bottom: var(--spacing);
}

.sg-wrap .sg_tit2 {
    font-size: 1.4em;

    font-weight: 600;
    margin-bottom: var(--spacing-8);
}

.sg-wrap .sg_tit3 {
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: var(--spacing-2);
}

.sg-wrap .sg_tit.blue {
    color: var(--brand-color-main);
}

.sg-wrap .sg_tit2.blue {
    color: var(--brand-color-main);
}

.sg-wrap .sg_tit2.black {
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

.sg-wrap .sg_txt {
    position: relative;
}

.sg-wrap .sg_txt2 {
    font-size: var(--cont_txt2);
    color: #A9CFE7;
    margin-top: var(--spacing);
}

.sg-wrap .sg_txt ul {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
}

.sg-wrap .sg_txt ul li {
    font-size: var(--cont_txt2);
    color: var(--color-black);
    line-height: 1.4;
    position: relative;
    font-weight: 300;
    padding-left: 1.25rem;
}

.sg-wrap .sg_txt ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.625rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}

.sg_box .sg_tbox {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: var(--spacing);
}

.sg_box .sg_tbox > span {
    display: block;
    width: 3px;
    height: 25px;
    background-color: var(--brand-color-main);
}

.sg_box .sg_tit {
    color: var(--color-black);
    margin-bottom: 0;
}

.sg_box .sg_tit2 {
    display: inline-block;
    border: 1px solid var(--brand-color-main);
    border-radius: 30px;
    padding: 5px 15px;
    margin-bottom: var(--spacing);
    font-size: 1.125em;
}


.sg-wrap3 {
    gap: 0 !important;
}

.sg-wrap3 .leftCon > .img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%;
}

.sg-wrap3 .rightCon {
    border: 1px solid #ddd;
    border-left-width: 0;
    padding: var(--padding);
    /*border-bottom-right-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);*/
    background-color: var(--color-white4);
}

.sg-wrap3 .sg_tit3 {
    margin-bottom: 0 !important;
}

.btn-wrap {
    padding-top: 3rem;
}

.btn-wrap1 {
    padding: 5rem 0;
}

.btn-wrap2 {
    padding: 0 0 var(--padding3) 0;
}

.btn_more3 > a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 1em;
    font-weight: bold;
    min-width: 180px;
    height: 54px;
    border-radius: 30px;
    padding: 10px 20px;
    color: var(--color-white);
    background-color: var(--brand-color-main);
    transition: background 0.3s, color 0.3s, border 0.3s;
    overflow: hidden;
    z-index: 1;
    gap: 10px;
}

.btn_more3 > a:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: #00446e;
    transition: all 0.3s ease;
}

.btn_more3 > a:hover {
    color: #fff;
}

.btn_more3 > a:hover:after {
    left: 0;
    width: 100%;
}

.btn_more3 > a i::before {
    font-weight: bold !important;
}

.multi-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.75rem;
}

.multi-wrap .list {
    width: 100%;
    display: flex;
    gap: 3.125rem;
}

.multi-wrap .list .img-box {
    width: 21rem;
    height: 22.5rem;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    overflow: hidden;
}

.multi-wrap .list .img-box .img {
    width: 100%;
    height: 100%;
}

.multi-wrap .list .txt-box {
    padding: 0.938rem 0;
    width: calc(100% - 38.125rem);
}

.multi-wrap .list .txt-box .tit {
    font-size: 1.5em;
    color: var(--color-black);
    margin-bottom: 1.563rem;
    font-weight: 500;
    line-height: 1.4;
}

.pw-wrap .list .txt-box ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;

}

.pw-wrap .list .txt-box ul li {
    font-size: 1.13em;
    font-weight: lighter;
    color: var(--color-black);
    line-height: 1.4;
    position: relative;
    padding-left: 1.25rem;
}

.pw-wrap .list .txt-box ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.688rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}


.pw-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.75rem;
}

.pw-wrap .list {
    width: 100%;
    display: flex;
    gap: 3.125rem;
}

.pw-wrap .list .img-box {
    width: 21rem;
    height: 22.5rem;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    overflow: hidden;
}

.pw-wrap .list .img-box .img {
    width: 100%;
    height: 100%;
}

.pw-wrap .list .txt-box {
    padding: 0.938rem 0;
    width: calc(100% - 38.125rem);
}

.pw-wrap .list .txt-box .tit {
    font-size: 1.5em;
    color: var(--color-black);
    margin-bottom: 1.563rem;
    font-weight: 500;
    line-height: 1.4;
}

.pw-wrap .list .txt-box ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;

}

.pw-wrap .list .txt-box ul li {
    font-size: 1.13em;
    font-weight: lighter;
    color: var(--color-black);
    line-height: 1.4;
    position: relative;
    padding-left: 1.25rem;
}

.pw-wrap .list .txt-box ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.688rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}


.con-wrap h4 {
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--color-grey2);
    margin-bottom: 1.25rem;
}


/* -------------------------
    Distribution Loop System
--------------------------- */
.asme-wrap {
    padding-bottom: 6.25rem;
}

.asme-wrap .box .list ul {
    display: flex;
    gap: 1.875rem;
    flex-wrap: wrap;
    width: 100%;
    counter-reset: number 0;
}

.asme-tit {
    width: 100%;
    padding: var(--padding) 0;
    height: 3.75rem;
    text-align: center;
    font-size: 1.5em;
    color: var(--brand-color-main);
    font-weight: 600;
}

.tit-box {
    font-size: var(--cont_tit3);
    line-height: 1.2;
    font-weight: 600;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--spacing);
}

.tit-box:after {
    position: absolute;
    top: 6px;
    left: 0;
    content: '';
    background: url(../../assets/images/sub/txt-ico.svg);
    width: 18px;
    height: 18px;
    background-size: cover;
}

.product_con-wrap {
    display: grid;
    grid-template-columns: auto 620px;
    gap: var(--spacing);
    overflow: hidden;
}

.product_con-wrap .img-box img {
    border: 1px solid var(--border-color);
}

.note {
    margin-top: var(--spacing);
    padding: var(--spacing-2);
    background-color: #f3f7fe;
    display: flex;
    flex-flow: column;
    gap: var(--spacing-8);
    border-radius: var(--radius-md);
}

.note .txt {
    position: relative;
    color: var(--color-grey1);
    line-height: 1.4;
    font-weight: 300;
    padding-left: 1rem;
    font-size: 1em;
}

.note .txt::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.4rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: #8fa9e7;
    border-radius: 0.188rem;
}

.asme-wrap .box .list ul li {
    display: flex;
    align-items: center;
    width: calc(50% - 1.875rem);
    height: 7.5rem;
    padding: 0 2.5rem;
    border: 1px solid var(--border-color);
    background: #f8f8f8;
    border-radius: 0.375rem;
    font-size: 1.13em;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-black);
    position: relative;
}

.asme-wrap .box .list ul li:before {
    position: absolute;
    top: 0.625rem;
    left: 2.5rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--color-blue);
    counter-increment: number 1;
    content: '0' counter(number);
}

.asme-wrap .list {
    width: 100%;
    display: flex;
    gap: 3.125rem;
    justify-content: center;
    margin-bottom: 1.875rem;
}

.asme-wrap .list .img-box {
    width: 25rem;
    height: 15.625rem;
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    position: relative;
}

.asme-wrap .list .img-box:before {
    content: "";
    display: block;
    position: absolute;
    right: -2.313rem;
    width: 1.313rem;
    height: 0.313rem;
    top: 50%;
    background: url(../../assets/images/sub/sb2_arrow.png) no-repeat 50% 50%/cover;
}

.asme-wrap .list .img-box .inbox {
    height: 100%;
    padding-bottom: 0;
    overflow: hidden;
    position: relative;
    border: 0;
}

.asme-wrap .list .img-box .inbox .img {
    height: 100%;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.asme-wrap .list .img-box .inbox .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.asme-wrap .list .txt-box {
    width: 25rem;
    height: 15.625rem;
    border: 1px solid var(--brand-color-main);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    font-size: 1.5em;
}

.table-list {
    margin-bottom: var(--padding);
}

.table-list .table {
    border-bottom-color: var(--border-color);
    border-top: 2px solid var(--color-black4);
}

.table-list .table tr th {
    background-color: var(--color-white2);
    color: var(--color-black);
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--border-color);
    font-size: 1em;
    vertical-align: middle;
    padding: var(--padding2);
    line-height: 1.2;
}

.table-list .table tr:first-child th {
    border-top: 0;
}

.table-list .table tr td {
    border: 1px solid var(--border-color);
    vertical-align: middle;
    font-size: 0.94em;
    color: var(--color-grey1);
    word-break: keep-all;
    font-weight: 300;
    text-align: center;
    padding: var(--spacing-8);
    line-height: 1.2;
}

.rightCon .table-list .table tr th,
.rightCon .table-list .table tr td {
    padding: var(--spacing-9);
    font-size: 0.9em;
    word-break: keep-all;
    letter-spacing: -0.5px;
    font-weight: 400;
}

/* -------------------------
    Tube & Pipe
--------------------------- */
.sub_tab {
    position: relative;
    margin-bottom: 4.375rem;
}

.sub_tab .tab {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0rem;
    flex-wrap: wrap;
}

.sub_tab .tab1 {
    /*gap: 0.25rem;*/
}

.dropdown.tab3 .dropdown-toggle {
    justify-content: start;
}

.dropdown.tab3 .dropdown-toggle > span {
    content: '';
    width: 1px;
    height: 12px;
    background-color: var(--color-grey2);
    position: relative;
    margin: 0 5px;
    top: 1px;
}

.sub_tab .dropdown .dropdown-toggle {
    text-align: left;
    padding: 0.25rem 1.75rem 0.25rem 1rem;
    line-height: 1;
}

#dropdown-menu .child a > span {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: var(--color-grey2);
    position: relative;
    margin: 0 5px;
    top: 1px;
}

/*
.sub_tab .tab2 {
	justify-content: left;
}
*/

.sub_tab .tab li {
    position: relative;
    /*min-width: calc(100% / 7);*/
    min-width: 180px;
    flex: 1 1;
}

.sub_tab .tab1 li {
    min-width: 120px;
}

.sub_tab .tab2 li {
    min-width: 11.875rem;
}

.sub_tab .tab3 li {
    min-width: 150px;
}

.sub_tab .tab li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 var(--padding2);
    height: 3.375rem;
    font-size: 1.06em;
    color: var(--color-black);
    border: 1px solid var(--border-color);
    border-right-width: 0;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
    /*border-radius: 3rem;*/
}

.sub_tab .tab li:last-child > a {
    border-right-width: 1px;
}

.sub_tab .tab1 li > a {
    padding: 0 14px;
}

.sub_tab .tab li > a > span {
    content: '';
    width: 1px;
    height: 12px;
    background-color: var(--color-grey2);
    position: relative;
    margin: 0 7px;
    top: -1px;
}

.sub_tab .tab li > a:hover {
    color: var(--brand-color-main);
    border: 1px solid var(--brand-color-main);
}

.sub_tab .tab li > a:hover > span {
    background-color: var(--brand-color-main);
}

.sub_tab .tab li.on > a {
    background: var(--brand-color-main);
    border: 1px solid var(--brand-color-main);
    color: var(--color-white);
}

.sub_tab .tab li.on > a > span {
    background: var(--color-white);
}

.sub_tab1 {
    position: relative;
}

.sub_tab1 .tab {
    width: 100%;
    margin: 0 auto;
    padding: var(--padding) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.sub_tab1 .tab li {
    min-width: calc(100% / 8);
}

.sub_tab1 .tab1 li {
    min-width: 110px;
}

.sub_tab1 .tab li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 var(--padding2);
    height: 3.375rem;
    font-size: 1.06em;
    color: var(--color-grey2);
    font-weight: 400;
    position: relative;
}

.sub_tab1 .tab li > a > span {
    content: '';
    width: 1px;
    height: 12px;
    background-color: var(--color-grey2);
    position: relative;
    margin: 0 7px;
    top: -1px;
}

.sub_tab1 ul li.on > a {
    border-bottom: 2px solid var(--brand-color-main);
    color: var(--brand-color-main);
    font-weight: 600;
}

.sub_tab1 .tab li.on > a > span {
    background-color: var(--brand-color-main);
}

.sub_tab_wrap {
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: var(--padding) var(--padding2) 0;
}

.sub_tab_wrap .sub_tab1 .tab {
    padding: 0;
}

.sub_tab1 .tab2 li {
    min-width: 140px;
}

.scroll_area .left figure.img_cover {
    position: relative;
    overflow: hidden;
}

.scroll_area .left figure.img_cover span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.scroll_area .scroll_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.scroll_area .left {
    width: 50%;
    max-width: 58.938rem;
    position: sticky;
    top: 0;
    padding-top: var(--padding);
}

.scroll_area .left .img {
    border-radius: var(--radius-lg);
    padding-bottom: 60%;
    border: 1px solid var(--border-color);
}

.scroll_area .right {
    width: 50%;
    padding-left: var(--padding);
    padding-top: var(--padding3);

}

.text_item {
    line-height: 1.2;
}

.text_item .tit1 {
    font-size: var(--cont_tit2);
    font-weight: 700;
    color: var(--brand-color-main);
    padding-bottom: 2rem;
}

.text_item .desc1 {
    font-size: 1.5em;
    font-weight: 500;
    padding-bottom: 2rem;
}

.text_item .txt2 {
    font-size: 1.5em;
    font-weight: 500;
    padding-bottom: 2rem;
}

.text_item .txt_list ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing);
}

.text_item .txt_list ul li {
    font-size: 1.13em;
    line-height: 1.4;
    font-weight: lighter;
    padding-left: 1.25rem;
    position: relative;
}

.text_item .txt_list ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.688rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}

.text_item .txt_list1 ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

.text_item .txt_list1 ul li {
    font-size: 1.13em;
    line-height: 1.4;
    padding: var(--spacing-2);
    border-radius: var(--radius-lg);
    background-color: #f7f8fb;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: row;
    gap: 1em;
}

.text_item .txt_list1 ul li .num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    font-size: 1.25em;
    color: var(--brand-color-main);
    text-align: center;
}

.item-box2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
}

.item-box2 .item {
    width: 100%;
    background: rgb(72 172 73 / 13%);
    color: #000;
    border-radius: 1.25rem;
    padding: 1.25rem 0;
    text-align: center;
    position: relative;
    line-height: 1.4;
}

.item-box2 .item > div > span {
    font-size: 1.5em;
    font-weight: 500;
}

.tube-wrap .list {
    width: 100%;
    display: flex;
    gap: 1.125rem;
}

.tube-wrap .list .img-box {
    width: 50rem;
    height: 22.5rem;
    border: 0.063rem solid var(--border-color);
    border-radius: 1.25rem;
    position: relative;
}

.tube-wrap .list .img-box:after {
    display: block;
    content: "";
    width: 3.75rem;
    height: 3.75rem;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #fff url(../images/sub/uhp/sp_read_step3.png) no-repeat center;
    position: absolute;
    left: 101%;
    top: 9.125rem;
    z-index: 10;
    margin-left: -1.563rem;
}

.tube-wrap .list .img-box .inbox {
    height: 100%;
    padding-bottom: 0;
    overflow: hidden;
    position: relative;
    border: 0;
}

.tube-wrap .list .img-box .inbox .img {
    height: 100%;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.tube-wrap .list .img-box .inbox .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.tube-wrap .list .txt-box {
    padding: 0.938rem 0;
    width: 50rem;
    background: #f0f5ff;
    border-radius: 1.25rem;
    display: table;
}

.tube-wrap .list .txt-box > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.tube-wrap .list .txt-box > div > img {
    width: 5rem;
    margin-bottom: 0.9375rem;
}

.tube-wrap .list .txt-box .tit {
    font-size: 1.5em;
    color: var(--color-black);
    font-weight: normal;
    line-height: 1.8;
}

.tube-wrap .tube-list .t-list li .box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 3rem;
    background: #fff;
    box-shadow: 2px 1px 10px 2px rgba(0, 0, 0, .10);
}

.tube-wrap .tube-list .t-list li {
    margin-bottom: 1.25rem;
}

.tube-wrap .tube-list .t-list li .box .num {
    display: block;
    width: 9.4rem;
    color: #eeb13c;
    text-align: center;
    line-height: 2.4rem;
    font-size: 1.5em;
    font-weight: 700;
}

.tube-wrap .tube-list .t-list li .box .txt-box {
    position: relative;
    padding: 0.9375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9375rem;
}

.tube-wrap .tube-list .t-list li .box .txt-box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #eee;
}

.tube-wrap .tube-list .t-list li .box .txt-box p {
    letter-spacing: -0.03em;
    line-height: 2rem;
    font-size: 1.13em;
}


/* -------------------------
    Fittings
--------------------------- */
.sub-2 {
    float: left;
    width: 14.375rem;
    margin-right: var(--spacing-3);
}

.sub-3 {
    float: left;
    width: 25rem;
    margin-right: var(--spacing-3);
}

.sub-4 {
    width: calc(100% - 760px);
    float: left;
}


/* -------------------------
    Energy & Industria
--------------------------- */
.product_wrap {
    /*display: flex;*/
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f3f7fb;
    display: table;
    vertical-align: middle;
}

/*
.product_wrap::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: #f3f7fb;
	position: absolute;
	bottom: 0;
	right: 0;
}
*/

.product_wrap .product_slide_wrap {
    max-width: 50vw;
    width: 100%;
    z-index: 1;
    height: 100%;
}

.product_wrap .product_slide_wrap .item {
    height: 100%;
}

.product_wrap .product_slide_wrap .slick-slide img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product_wrap .product_slide_wrap .img-wrap::after {
    content: '';
    display: block;
    width: 100%;
    height: 9.563rem;
    background: linear-gradient(180deg, #111827 0%, rgba(17, 24, 39, 0) 0.01%, #111827 100%);
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 0;
}

.product_wrap .product_slide_wrap .tit {
    position: absolute;
    bottom: 1.5rem;
    right: 2.5rem;
    color: #ffffff;
}

.product_wrap .product_slide_wrap .product_slide {
    position: relative;
    overflow: hidden;
    padding: 0;
    z-index: 1;
    height: 100%;
}

.product_slide .slick-slider {
    padding: 0;
    height: 100%;
}

.product_slide .slick-list,
.product_slide .slick-track,
.product_slide .slick-slide > div {
    height: 100%;
}

.product_wrap .txt_wrap {
    position: relative;
    z-index: 1;
    width: 50vw;
    max-width: 100%;
    padding: 3.75rem;
    line-height: 1.2;
    display: table-cell;
    vertical-align: middle;
}

.product_wrap .txt_wrap2 {
    padding: 4.25% 3.75rem 0 3.75rem;
}

.product_wrap .txt_wrap .txt1 {
    font-size: var(--cont_tit2);
    font-weight: 700;
    color: var(--brand-color-main);
    padding-bottom: 2rem;
}

.product_wrap .txt_wrap .txt2 {
    font-size: 1.5em;
    font-weight: 500;
    padding-bottom: 2rem;
}

.product_wrap .txt_wrap .txt_list ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

.product_wrap .txt_wrap .txt_list ul li {
    font-size: 1.13em;
    line-height: 1.4;
    font-weight: lighter;
    padding-left: 1.25rem;
    position: relative;
}

.product_wrap .txt_wrap .txt_list ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.688rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}

.product_slide {
    position: relative;
}

.product_slide .owl-carousel.owl-drag .owl-item {
    overflow: hidden;
}

.product_slide .item.bs-1 img {
    border: 1px solid var(--border-color);
}

.product_slide .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 44px;
    margin: 0 !important;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.product_slide:hover .owl-nav {
    opacity: 1;
}

.product_slide .owl-carousel .owl-nav button.owl-prev {
    left: 10px;
}

.product_slide .owl-carousel .owl-nav button.owl-next {
    right: 10px;
}

.product_slide .owl-carousel .owl-nav button.owl-next,
.product_slide .owl-carousel .owl-nav button.owl-prev {
    width: 44px;
    height: 44px;
    border-radius: 0;
}

.product_slide .owl-carousel .owl-nav button.owl-next span,
.product_slide .owl-carousel .owl-nav button.owl-prev span {
    width: 24px;
    height: 24px;
}

.product_slide .owl-theme .owl-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.product_slide .owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 5px;
    background: var(--color-white);
    border: 1px solid var(--border-color);
}

.product_slide .owl-theme .owl-dots .owl-dot.active span,
.product_slide .owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--brand-color-main);
    border: 1px solid var(--brand-color-main);
}


.slider-progress {
    height: 3px;
    border-radius: 2px;
    width: 12.5rem;
    position: relative;
    overflow: hidden;
}

.slider-progress .progress {
    width: 0;
    height: 5px;
    background: white;
    position: absolute;
}

.slider_wrapper .slick-prev,
.slider_wrapper .slick-next {
    display: none !important;
}

.slick-wrapper {
    height: 5rem;
    display: flex;
    justify-content: center;
    width: 100%;

}

.slick-wrapper .slick-menu {
    justify-content: space-evenly;
    background-color: var(--brand-color-main);
    width: 34.375rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.slick-wrapper .counter {
    color: white;
    font-weight: bold;
    align-items: center;
    gap: var(--spacing-8);
    display: flex;
}

.slick-wrapper .btn-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: white;

}

.slick-wrapper .btn-wrapper button {
    font-size: 1em;
}

.table-wrp {
    margin-top: 2.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-wrp .table-wrap {
    width: 80%;
}

.visible-xs {
    display: none;
}


/* -------------------------
    Contact us
--------------------------- */

.contact-wrapper {
    margin: 0 auto;
    width: 50rem;
}

.contact-wrapper label {
    cursor: default;
}

.contact-form-bg {
    border-radius: 5px;
    background-color: var(--color-white5);
    padding: var(--spacing-3);
}

.contact-form input {
    width: 100%;
    height: var(--spacing-5);
    border-radius: 5px !important;
    border: 1px solid #c3c3c3;
    padding-left: var(--spacing-8);
    font-size: 1em;
    margin-bottom: 15px;
}

.contact-form input:last-child {
    margin-bottom: 0;
}

input::placeholder,
textarea::placeholder {
    color: #999;
}

.contact-form-bg .label-line {
    line-height: 1.4;
}

.contact-form-bg > div {
    margin-bottom: 0.9375rem;
    line-height: 1.4;
}

.contact-form-bg > div:last-child {
    margin-bottom: 0;
}


.contact-form textarea {
    outline: none;
    border-radius: 0.3125rem;
    font-size: 1em;
}

.contact-form .name-box {
    display: flex;
    gap: 6px;
}

.contact-form .name-box .box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact-form .name-box .box .name {
    font-size: 1.13em;
}

.inp-label span {
    font-size: 1em;
    color: #a3a3a3;
}

.inp-label {
    display: inline-block;
    font-size: 1.13em;
    margin-bottom: 0.3125rem;
}

.contact-wrapper .submit-btn {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.contact-wrapper .submit-btn button {
    position: relative;
    border-radius: 3.125rem;
    font-size: 1.13em;
    width: 13.4375rem;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    margin-top: 1.875rem;
    border: 1px solid var(--brand-color-main);
    color: var(--brand-color-main);
    background-color: var(--color-white);
    z-index: 1;
    overflow: hidden;
}

.contact-wrapper .submit-btn button:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: var(--brand-color-main);
    transition: all 0.3s ease;
}

.contact-wrapper .submit-btn button:hover {
    color: #fff;
}

.contact-wrapper .submit-btn button:hover:after {
    left: 0;
    width: 100%;
}


.contact-wrapper .form-control {
    width: 100%;
    border: 1px solid #cccfd8;
    height: var(--spacing-5);
    border-radius: 0.3125rem !important;
    padding: 0.625rem;
    font-size: 1em;
    color: #999;
}

.contact-wrapper select {
    background: var(--color-white) url(/assets/images/sub/ico-triangle-down.svg) no-repeat right 10px center;
    background-size: 10px;
    min-width: 120px;
    width: auto;
    color: #000;
    font-size: 1em;
    height: 45px;
    padding: 0 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.contact-wrapper .list-content {
    position: relative;
    max-height: 150px;
    overflow-y: auto;
}

.contact-wrapper .scroll-txt {
    font-size: 1em;
    font-weight: 300;
}

.contact-wrapper .list-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F9;
    border-radius: 5px;
}

.contact-wrapper .list-content::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 5px;
    background-clip: padding-box;
}

.contact-wrapper .privacy-box {
    background: #fff;
    padding: 1rem;
    border-radius: 0.3125rem;
    word-break: break-all;
}


.contact-wrapper .infor-btn {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem;
    justify-content: space-between;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #ddd;
    font-size: var(--cont_txt2);
    font-weight: 500;
}

.contact-wrapper .checkBox {
    display: inline-block;
}

.contact-wrapper .checkBox label {
    font-size: 0.88em;
    font-weight: 500;
}

.contact-wrapper input {
    height: auto;
    padding-left: 0;
}

.contact-wrapper .checkbox-inline .check-ico:after {
    top: 0.0625rem;
    left: 0.125rem;
}

.contact-wrapper .list-content h3 {
    font-weight: 500;
    padding: var(--spacing-4) 0 0;
    color: var(--color-black);
}

.contact-wrapper .list-content ul {
    margin-top: 0.75rem;
}


@media (max-width: 980px) {
    .inp-label span {
        font-size: 0.88em;
    }

    .contact-wrapper .list-content ul li {
        padding-left: var(--spacing-8);
    }

    .contact-wrapper .list-content ul li:after {
        top: 0.3rem;
    }

    .contact-wrapper .checkbox-inline .check-ico:after {
        top: 0.0625rem;
    }

    .contact-wrapper .list-content h3 {
        padding: var(--spacing-1) 0 0;
    }

    .contact-wrapper .checkBox .check-ico {
        width: 1.3em;
        height: 1.3em;
    }

    .contact-wrapper .privacy-box {
        padding: 0.625rem;
    }
}

@media (max-width: 768px) {

    .contact-wrapper .checkbox-inline .check-ico:after {
        top: 0.05rem;
        left: 0.15rem;
    }
}

@media (max-width: 480px) {

    .contact-wrapper .infor-btn {
        flex-direction: column;
    }
}


/* -------------------------
       Refuse Collect E-mail
    --------------------------- */

.box-email h2 {
    background-color: #f7f8fb;
    border-radius: var(--radius-lg);
    font-size: 1.5em;
    font-weight: 600;
    padding: var(--padding4);
    text-align: center;
    word-break: break-word;
    color: var(--brand-color-main);
}

.box-email h3 {
    margin: 5rem 0 1rem;
    font-size: 1.5em;
    color: var(--color-black);
    font-weight: 500;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.2;
}

.box-email h3:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.688rem;
    left: 0;
    width: 1.2rem;
    height: 0.375rem;
    background-color: var(--brand-color-main);
    border-radius: 0.188rem;
}

.box-email ul li {
    font-weight: 300;
    line-height: 1.4;
    font-size: 1.2em;
    color: var(--color-grey1);
}


/* -------------------------
    Family site CSS
--------------------------- */
.dropup-menu {
    display: none;
}

.dropup-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
}


.dropup-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88em;
    font-weight: 500;
    width: 15rem;
    height: 3rem;
    background-color: var(--color-grey6);
    border: 1px solid var(--color-white);
    border-radius: 4px;
    padding: var(--spacing-8);
}

.dropup-btn i {
    font-size: 12px;
    transition: .3s;
}

.open .dropup-btn i {
    transform: rotate(180deg);
}

.open .dropup-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    top: 0;
    transform: translate(0, -100%);
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--color-grey6);
    border: 1px solid var(--color-white);
    text-indent: 15px;
    border-radius: 4px;
    font-size: 0.88em;
}

.dropup-menu > a {
    display: flex;
    align-items: center;
    color: var(--color-white);
    width: 100%;
    min-height: 3rem;
}

.dropup-menu > a:hover {
    background-color: rgb(255 255 255 / 17%);
    color: var(--color-white);
}

.accordion-wrap {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
    height: 37.5rem;
}

.accordion-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: brightness(70%);
    object-fit: cover;
}

.accordion-tit {
    padding-top: 20px;
    z-index: 10;
    color: white;
    writing-mode: vertical-rl;
    line-height: 1.3;
    font-weight: 600;
}

.accordion-item {
    width: 10.625rem;
    cursor: pointer;
    transition-property: width;
    justify-content: center;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: width 0.3s ease;
}

.accordion-title {
    /*white-space: nowrap;*/
    font-weight: 600;
    font-size: 1.6em;
}

.accordion-tit a {
    width: 10rem;
    margin-top: 1.875rem;
    display: none;
    border: 1px solid #fff;
    font-size: 1.3em;
    text-align: center;
    padding: var(--padding2);
    overflow: hidden;
    border-radius: 3.125rem;
}

.accordion-tit a:hover {
    background: var(--brand-color-main);
    border: 1px solid var(--brand-color-main)
}

.on-open {
    width: 68.75rem !important;
    align-items: center;
    justify-content: unset !important;
    cursor: unset !important;
}


.on-open .accordion-tit {
    padding-left: var(--padding3);
    padding-top: 0;
    writing-mode: unset;
}

.on-open .accordion-title {
    font-size: 2.8em;
    font-weight: 800;
}

.on-open .accordion-tit a {
    display: block;
}

.no_data {
    height: 35vh;
}


/* -------------------------
    Sub Menu Slider
    --------------------------- */
.swiper-slide {
    width: auto !important;
    margin: 0 5px;
}

.swiper-slide a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 100%;*/
    padding: 0 14px;
    height: 3.375rem;
    font-size: 1.06em;
    color: var(--color-black);
    border: 1px solid var(--border-color);
    font-weight: 400;
    border-radius: 3rem;
    min-width: 120px;
}

.swiper-slide.on a {
    background: var(--brand-color-main);
    border: 1px solid var(--brand-color-main);
    color: var(--color-white);
}

.slider-con button i {
    font-size: 32px;
}

.slider-con {
    gap: 30px;
    display: flex;
}

.btn-disable {
    cursor: no-drop;
    opacity: 0.3;
    pointer-events: none;
}

.swiper-slide:last-child {
    margin-right: 0 !important;
}

@media (max-width: 1280px) {
    .slider-con {
        gap: 20px;
    }
}

@media (max-width: 980px) {
    .slider-con {
        display: none !important;
    }
}


/* -------------------------
    Responsive CSS
--------------------------- */

@media (max-width: 1480px) {

    /******** common ********/

}


@media (max-width: 1280px) {

    /* -------------------------
    ABOUT WSG
    --------------------------- */
    /* Corporate Profile */
    .profile-wrap .list .img-box {
        width: 30rem;
        height: 19.313rem;
    }

    .profile-wrap .list .txt-box {
        width: calc(100% - 30rem);
    }

    .accordion-title {
        font-size: 1.4em;
    }

    .accordion-tit a {
        width: 10rem;
        font-size: 1.3em;
        padding: var(--spacing);
        margin-top: var(--spacing-1);
    }

    .on-open .accordion-tit {
        padding-left: var(--padding);
    }


    /* Group Subsidiaries */
    .group .group-box .box .inbox > p {
        letter-spacing: -1px;
    }

    /* Strategic Partners */
    /* Investor Relations */
    /* EHS Management */
    /* Social Responsibility */
    /* -------------------------
    Life Sciences
    --------------------------- */
    /* Bioreactors */
    .sg-wrap {
        padding: var(--padding5) 0;
    }

    .sg-wrap .leftCon {
        max-width: 25rem;
    }

    .sg-wrap .rightCon {
        width: calc(100% - 25rem);
    }

    /* Water System */
    /* Distribution Loop System */
    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /* -------------------------
    UHP Microelectronics
    --------------------------- */
    /* -------------------------
    Energy & Industria
    --------------------------- */
    .product_wrap .product_slide_wrap {
        width: 50vw;
    }

    .product_wrap .txt_wrap {
        width: 50vw;
        padding: var(--padding);
    }

    .product_con-wrap {
        grid-template-columns: 1fr 1fr;
    }

    .product_con-wrap .img-box .img {
        height: 100%;
    }

    .product_con-wrap .img-box img {
        height: 100%;
        object-fit: contain;
    }

    /* -------------------------
    Contact us
    --------------------------- */
    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /* -------------------------
    Global Customers
    --------------------------- */
    .Box-right .Box {
        width: 80%;
        padding-left: 0;
        margin: 0;
        float: right;
    }
}


@media (max-width: 980px) {

    /* -------------------------
        ABOUT WSG
        --------------------------- */
    /* Corporate Profile */
    .partners-wrap,
    .group-wrap {
        padding: var(--padding) 0;
    }

    .group-wrap {
        gap: 2.5rem;
    }

    .profile-wrap .list {
        gap: 1.875rem;
        padding: var(--padding) 0;
    }

    .profile-wrap .list .img-box {
        width: 23.75rem;
        height: 15.25rem;
    }

    .profile-wrap .list .txt-box {
        width: calc(100% - 23.75rem);
        font-size: 0.8rem;
        padding: 0;
    }

    .profile-wrap .list .txt-box .tit {
        margin-bottom: 1.25rem;
    }

    .profile-wrap .list .txt-box ul li {
        padding-left: 0.625rem;
    }

    .profile-wrap .list .txt-box ul li:before {
        width: 0.25rem;
        height: 0.25rem;
        top: 0.5rem;
    }

    .profile-box {
        font-size: 0.8rem;
        padding: var(--padding) 0;
    }

    .profile-box h3 {
        margin-bottom: 1.25rem;
        font-size: 1.5em;
    }

    .profile-box > div {
        padding: var(--spacing);
        margin-bottom: var(--spacing-8);
    }

    .t_box {
        margin-bottom: var(--spacing-2);
    }

    .t_box h3 {
        font-size: 2.25em;
    }

    .ProList2 .ProIrlist {
        gap: 10px;
    }

    .ProList2 .titB .title {
        font-size: 1.25em;
        letter-spacing: -1px;
    }

    /* Group Subsidiaries */
    .slide_imgbox {
        height: 13.75rem;
    }

    .slide_imgbox .curtain-wrap > div {
        width: calc(50% - 18.125rem);
    }

    .group-wrap .group > h3 {
        font-size: var(--cont_tit2);
        gap: 8px;
    }

    .group-wrap .group > h3 .flag img {
        width: 30px;
    }

    .group {
        font-size: 0.8rem;
    }

    .group .group-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .group .group-box .box {
        padding: 1.25rem;
    }

    .group .group-box .box .inbox {
        gap: var(--spacing-8);
        height: 100%;
        justify-content: space-between;
    }

    .group .group-box .box .inbox > p {
        letter-spacing: 0;
    }

    /* Strategic Partners */
    /* Investor Relations */
    .ivBox-wrap {
        padding-top: var(--spacing-2);
    }

    .ivBox-wrap .BoxIn {
        gap: var(--spacing-8);
    }

    .ivBox-wrap .BoxIn .Box {
        padding: var(--spacing-3);
    }

    /* EHS Management */
    .ehs-wrap .list {
        gap: 1.875rem;
    }

    .ehs-wrap .list .img-box {
        width: 28.125rem;
        height: 18.75rem;
    }

    .ehs-wrap .list .txt-box {
        width: calc(100% - 30rem);
    }

    .ehs-wrap .list .txt-box .tit {
        font-size: 1.13em;
        margin-bottom: 1.25rem;
    }

    .ehs-wrap .list .txt-box .txt p {
        font-size: 1em;
    }

    .BoxList {
        padding: var(--padding4);
        font-size: 0.8rem;
    }

    /* Social Responsibility */
    .social-list-wrap .social-list {
        gap: var(--padding2);
    }

    .social-list li .img {
        margin-bottom: var(--spacing);
    }

    .social-list li .desc .s-list h4 {
        font-size: var(--cont_txt);
        margin-bottom: var(--spacing-8);
    }

    .social-list li .tit .num {
        height: var(--spacing-2);
    }

    .social-list li .desc {
        gap: var(--spacing);
    }

    .social-list li .desc .s-list li {
        padding-left: var(--spacing-8);
    }

    .social-list li .desc .s-list li::before {
        width: 0.25rem;
        height: 0.25rem;
        top: 0.5rem;
    }

    /* -------------------------
    Life Sciences
    --------------------------- */
    /* Bioreactors */
    .sg-wrap {
        padding: var(--padding4) 0;
        gap: var(--spacing-2);
        font-size: 0.8rem;
        flex-flow: column;
    }

    .sg-wrap2 {
        padding: 0 0 var(--padding);
    }

    .sg-wrap:last-child {
        padding-bottom: var(--padding4);
    }

    .sg-wrap .sg_tit3 {
        margin-bottom: 0;
    }

    .sg-wrap .sg_tit3 + div {
        margin-top: var(--spacing-2) !important;
    }

    .sg-wrap .leftCon {
        max-width: 100%;
        width: 100%;
    }

    .sg-wrap .rightCon {
        width: 100%;
    }

    .sg-wrap .rightCon .ConDivide {
        padding: var(--spacing-2) 0;
    }

    .sg-wrap .rightCon > .img {
        margin-top: var(--spacing-1);
    }

    .img_wrap .item-box {
        gap: var(--spacing-8);
    }

    .img_wrap .item-box .box .img {
        height: 16.25rem;
    }

    .sg-wrap1 .img_wrap .item-box {
        gap: var(--spacing-8);
    }

    .sg-wrap1 .img_wrap .item-box .box .img {
        height: 16.25rem;
    }

    .product_table-wrap .sub2 {
        width: 16.25rem;
    }

    .product_table-wrap .sub3 {
        width: calc(100% - 18.125rem);
    }

    .single-wrap .content-box {
        gap: 1.875rem;
    }

    .single-wrap .content-box .txt {
        width: calc(100% - 26.875rem);
    }

    .sg-wrap .sg_txt ul li {
        padding-left: var(--spacing-8);
    }

    .sg-wrap .sg_txt ul li:before {
        width: 0.25rem;
        height: 0.25rem;
        top: 0.5rem;
    }

    .sg-wrap3 {
        gap: 0;

    }

    .sg-wrap3 .leftCon > .img {
        /*border-top-right-radius: var(--radius-lg);*/
        border-bottom-left-radius: 0;
    }

    .sg-wrap3 .rightCon {
        border-left-width: 1px;
        border-top-width: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        /*border-bottom-left-radius: var(--radius-lg);*/
        padding: var(--spacing-2);
    }

    .btn-wrap {
        padding-top: 2rem;
        text-align: center;
    }

    .btn-wrap1 {
        padding: var(--padding4) 0 var(--padding);
    }

    .btn-wrap2 {
        padding: 0 0 var(--padding) 0;
    }

    .btn_more3 {
        font-size: 0.8rem;
    }

    .btn_more3 > a {
        font-size: 1.1em;
        min-width: 140px;
        height: 42px;
        padding: 5px 15px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: -0.5px;
    }

    .multi-wrap {
        gap: 2.5rem;
    }

    .multi-wrap .list {
        gap: 1.875rem;
    }

    .multi-wrap .list .txt-box {
        width: calc(100% - 22.875rem);
    }

    .multi-wrap .list .txt-box .tit {
        margin-bottom: 1.25rem;
    }

    .multi-wrap .list .txt-box ul li:before {
        top: 0.313rem;
    }

    .pw-wrap {
        gap: 2.5rem
    }

    .pw-wrap .list {
        gap: 1.875rem;
    }

    .pw-wrap .list .txt-box {
        width: calc(100% - 22.875rem);
    }

    .pw-wrap .list .txt-box .tit {
        margin-bottom: 1.25rem;
    }

    .pw-wrap .list .txt-box ul li:before {
        top: 0.313rem;
    }

    /* Water System */
    /* Distribution Loop System */
    .asme-wrap .list {
        gap: 1.875rem;
    }

    .asme-wrap .list .img-box {
        width: 50%;
    }

    .asme-wrap .list .txt-box {
        width: 50%;
        font-size: 1.125em;
    }

    .asme-wrap .list .img-box:before {
        right: -1.75rem;
    }

    .asme-wrap .box .list ul li {
        justify-content: center;
        padding: 0 1.25rem;
    }

    .asme-wrap .box .list ul li:before {
        left: 1.25rem;
    }

    .product_table-wrap {
        gap: 1.25rem;
    }

    .product_con-wrap {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .note {
        margin-top: var(--spacing-8);
        padding: var(--spacing);
    }

    .tit-box {
        margin-bottom: var(--padding2);
        font-size: var(--cont_txt);
        padding-left: var(--spacing-1);
    }

    .tit-box:after {
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
        top: 3px;
    }

    .table-list {
        margin-bottom: var(--spacing-2);
    }

    .table-list2 {
        position: relative;
    }

    .table-list .table tr th {
        font-size: var(--cont_txt2);
    }

    .rightCon .table-list .table tr th,
    .rightCon .table-list .table tr td {
        padding: var(--spacing-9);
        font-size: 1em;
    }


    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /* -------------------------
    UHP Microelectronics
    --------------------------- */
    /* Tube & Pipe */
    .sub_tab {
        z-index: 1;
        margin-bottom: var(--padding4);
    }

    .sub_tab .tab {
        gap: var(--spacing-8);
        font-size: 0.8rem;
    }

    .sub_tab .tab li > a {
        height: 2.375rem;
    }

    .sub_tab1 .tab {
        padding: 0 0 var(--padding4) 0;
        font-size: 0.8rem;
    }

    .sub_tab1 .tab li > a {
        height: 2.375rem;
    }

    .sub_tab .tab2 li {
        width: 9.688rem;
    }

    .sub_tab .tab {
        display: none !important;
    }

    .sub_tab.mb0 {
        margin-bottom: var(--padding4) !important;
    }

    .sub_tab_wrap {
        padding: var(--padding4) var(--padding2) 0;
    }

    .tube-wrap .list .txt-box .tit {
        font-size: 1em;
    }

    .tube-wrap .list .img-box {
        height: auto;
    }

    .tube-wrap .list .img-box:after {
        top: 7.125rem;
    }

    .item-box2 .item > div > span {
        font-size: 1em;
    }

    .scroll_area .scroll_inner {
        flex-flow: column;
    }

    .scroll_area .left {
        width: 100%;
        padding-top: var(--spacing-2);
    }

    .scroll_area .right {
        width: 100%;
        padding-left: 0;
        padding-top: var(--spacing-2);
        font-size: 0.8rem;
    }

    .scroll_area .left {
        position: static;
    }

    .text_item .tit1 {
        padding-bottom: var(--padding2);
        font-size: var(--cont_txt);
    }


    .text_item .desc1 {
        padding-bottom: var(--padding2);
        font-size: 1.3em;
    }

    .text_item .txt_list1 ul {
        row-gap: var(--spacing-8);
    }

    .text_item .txt_list1 ul li {
        padding: var(--spacing-8);
        gap: 0;
    }

    .text_item .txt_list1 ul li .num {
        font-size: 1em;
    }


    /* Fittings */
    /**/
    /**/
    /**/
    /**/
    /* -------------------------
    Energy & Industrial
    --------------------------- */
    .product_wrap {
        display: flex;
        flex-flow: column;
    }

    .product_wrap .product_slide_wrap {
        width: 100%;
        max-width: 100%;
    }

    .product_wrap::after {
        width: 100%;
        height: 100%;
        bottom: auto;
    }

    .slick-wrapper {
        height: 3.75rem;
        justify-content: flex-end;
        font-size: var(--cont_txt2);
    }

    .slick-wrapper .slick-menu {
        width: 100%;
    }

    .product_wrap .txt_wrap {
        margin-top: 0;
        padding: var(--spacing-1) var(--padding2);
        width: 100%;
        min-width: 100%;
        font-size: 0.8rem;
    }

    .product_wrap .txt_wrap .txt1 {
        padding-bottom: var(--padding2);
        font-size: var(--cont_txt);
    }

    .product_wrap .txt_wrap .txt2 {
        padding-bottom: var(--padding2);
        font-size: 1.3em;
    }

    .product_wrap .txt_wrap .txt_list ul {
        row-gap: var(--spacing-8);
    }

    .product_wrap .txt_wrap .txt_list ul li {
        padding-left: var(--spacing-8);
    }

    .product_wrap .txt_wrap .txt_list ul li:before {
        width: 0.25rem;
        height: 0.25rem;
        top: 0.5rem;
    }

    .default_wrap > h2 {
        font-size: 2.25em;
    }


    /* -------------------------
    Contact us
    --------------------------- */
    .contact-wrapper {
        width: 100%;
        font-size: 0.8rem;
    }

    .contact-form input,
    .contact-wrapper .form-control {
        height: var(--spacing-4);
    }

    .contact-form button {
        height: 3rem;
    }

    .contact-form-bg {
        padding: var(--padding2);
    }

    .box-email {
        font-size: 0.8rem;
    }

    .box-email h2 {
        padding: var(--padding2);
        font-size: 1.4em;
    }

    .box-email h3 {
        margin: 2rem 0 var(--spacing-8);
        font-size: 1.3em;
    }

    .box-email ul li {
        font-size: 1.1em;
    }

    /* -------------------------
    Family site
    --------------------------- */
    .dropup-wrapper {
        margin-top: 1rem;
        font-size: 0.9rem;
    }

    .dropup-btn {
        height: 2.25rem;
    }

    .dropup-menu > a {
        min-height: 2.25rem;
    }

    .accordion-wrap {
        display: flex;
        flex-direction: column;
    }

    .accordion-item {
        width: 100% !important;
        align-items: center;
        padding-left: 0 !important;
        justify-content: unset !important;
        cursor: default;
    }

    .accordion-tit {
        padding-left: var(--padding4);
        padding-top: 0;
        writing-mode: unset;
        font-size: 1rem;
    }

    .accordion-tit a {
        display: block;
        width: 7rem;
        margin-top: var(--padding2);
        font-size: 0.9em;
        padding: 0.5rem;
    }

    .on-open .accordion-tit {
        padding-left: var(--padding4);
    }

    .on-open .accordion-title {
        font-size: 1.4em;
    }

    .accordion-title {
        font-weight: 800;
    }

    .no_data {
        height: 40vh !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* -------------------------
    Global Customers
    --------------------------- */
    .ivBox-wrap-2 {
        flex-wrap: wrap;
        font-size: 0.8rem;
        row-gap: var(--padding4);
        background-position: center bottom;
    }

    .ivBox-wrap-2 .Box-left {
        width: 100%;
    }

    .ivBox-wrap-2 .Box-right {
        width: 100%;
    }

    .Box-left .Box li {
        padding-left: 1rem;
        margin-bottom: var(--spacing-9);
    }

    .Box-left .Box li:before {
        top: 0.6rem;
        width: 0.6rem;
        height: 0.18rem;
    }

    .Box-left .btn-wrap {
        margin-left: 0;
    }

    .Box-right .Box {
        float: none;
        margin: 0 auto;
        padding-left: 10%;
    }

    .Box-right .Box > ul {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 768px) {

    /* -------------------------
    ABOUT WSG
    --------------------------- */
    /* Corporate Profile */
    .partners-wrap,
    .group-wrap {
        padding: var(--padding4) 0;
    }

    .profile-wrap .list {
        flex-direction: column;
        gap: 1rem;
        padding: var(--padding4) 0;
    }

    .profile-wrap .list .img-box {
        width: 100%;
    }

    .profile-wrap .list .txt-box {
        width: 100%;
    }

    .profile-wrap .list .txt-box .tit {
        margin-bottom: 0.75rem;
        line-height: 1.2;
    }

    .partners-wrap .group {
        flex-direction: column;
    }

    .partners-wrap .group .box {
        width: 100%;
    }

    .partners-wrap .group .box1 {
        width: 100%;
    }

    .profile-box > div {
        font-size: 1.13em;
    }

    .profile-box {
        padding: var(--padding4) 0;
    }

    .t_box p {
        font-size: 1.8em;
    }

    .ProList2 .ProIrlist {
        width: 100%;
        flex-flow: column;
    }

    .ProList2 .ProIrlist .item {
        height: 180px;
    }

    .ProList2 .titB {
        left: var(--spacing-1);
        bottom: var(--spacing-1);
    }

    .ProList2 .titB .title {
        font-size: 1.18em;
    }

    .ProList2 .titB .title1 {
        color: var(--color-black);
    }

    .ProList2 .ProIrlist .ItemInner .ItemImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Group Subsidiaries */
    .slide_imgbox {
        height: 8.75rem;
    }

    .slide_imgbox .curtain-wrap > div {
        width: calc(50% - 8.75rem);
    }

    .group {
        gap: 0.75rem;
    }

    .group-wrap .group > h3 {
        font-size: 1.75em;
    }

    .group-wrap .group > h3 .flag img {
        width: 26px;
    }

    /* Strategic Partners */
    /* Investor Relations */
    .ivBox-wrap .BoxIn {
        grid-template-columns: repeat(2, 1fr);
    }

    .ivBox-wrap .BoxIn .Box .ico img {
        width: 5rem;
        height: 5rem;
    }

    /* EHS Management */
    .ehs-wrap .list {
        flex-direction: column;
        gap: 1.25rem;
    }

    .ehs-wrap .list .txt-box .tit {
        font-size: 1em;
    }

    .ehs-wrap .list .txt-box .txt p {
        font-size: 0.88em;
    }

    .ehs-wrap .list .txt-box .txt {
        gap: 0.313rem;
    }

    .ehs-wrap .list .img-box {
        width: 100%;
    }

    .ehs-wrap .list .txt-box {
        width: 100%;
    }

    .ivBox-wrap-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .ivBox-wrap-1 .BoxImg img {
        position: unset;
    }

    .BoxList {
        padding: var(--padding4) var(--padding2);
    }

    .BoxList ul {
        row-gap: var(--spacing);
    }

    .BoxList .Box .num {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Social Responsibility */
    .social-list-wrap .social-list {
        grid-template-columns: repeat(1, 1fr);
        row-gap: var(--padding4);
    }

    .social-list li .img {
        width: 100%;
        height: 18.25rem;
        object-fit: cover;
    }

    .social-list li .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .social-list-wrap .social-list > li {
        flex-direction: column;
        gap: 0;
    }

    .social-list li .desc {
        width: 100%;
        height: auto;
    }

    /* -------------------------
    Life Sciences
    --------------------------- */
    /* Bioreactors */
    .sg-wrap {
        padding: var(--padding4) 0;
        gap: var(--spacing-1);
        font-size: 0.8rem;
    }

    .sg-wrap2 {
        padding: 0 0 var(--padding4);
    }

    .sg-wrap .sg_tit {
        font-size: 1.6em;
        margin-bottom: var(--spacing-8);
    }

    .sg-wrap .sg_tit2 {
        font-size: 1.2em;
        margin-bottom: var(--spacing-9);
    }

    .sg-wrap .sg_tit3 {
        font-size: 1.25em;
    }

    .sg-wrap .sg_tit3 + div {
        margin-top: var(--spacing) !important;
    }

    .sg-wrap .sg_txt2 {
        font-size: 1em;
        margin-top: var(--spacing-8);
    }

    .sg_box .sg_tbox {
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: var(--spacing-8);
    }

    .sg_box .sg_tit {
        margin-bottom: 0;
    }

    .sg_box .sg_tit2 {
        font-size: 1.08em;
        padding: 3px 10px;
    }

    .sg_box .sg_tbox > span {
        width: 2px;
        height: 16px;
    }

    .sg-wrap .rightCon .ConDivide {
        padding: var(--spacing-1) 0;
    }

    .product_slide .owl-theme .owl-dots {
        bottom: 5px;
    }

    .sg-wrap .rightCon > .img {
        margin-top: var(--spacing-8);
    }

    .sg-wrap1 .img_wrap .item-box {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--spacing-1);
    }

    .sg-wrap1 .img_wrap .item-box .box .img {
        height: auto;
    }

    .sg-wrap1 .img_wrap .item-box .box .txt {
        font-size: 1em;
        padding: 5px 15px;
    }

    .product_slide .owl-nav {
        height: 38px;
    }

    .product_slide .owl-carousel .owl-nav button.owl-next,
    .product_slide .owl-carousel .owl-nav button.owl-prev {
        width: 38px;
        height: 38px;
    }

    .btn-wrap {
        padding-top: 1.5rem;
    }

    .btn-wrap1 {
        padding: var(--spacing-3) 0 var(--padding4);
    }

    .btn-wrap2 {
        padding: 0 0 var(--padding4) 0;
    }

    .btn_more3 {
        font-size: 0.8rem;
    }

    .btn_more3 > a {
        font-size: 1em;
        min-width: 130px;
        height: 36px;
        line-height: 1.2;
    }

    /* Distribution Loop System */
    .asme-wrap .list {
        flex-direction: column;
        gap: 1.25rem;
    }

    .asme-wrap .list .img-box {
        width: 100%;
        height: 12.5rem;
    }

    .asme-wrap .list .txt-box {
        width: 100%;
        height: 12.5rem;
        font-size: 1em;
    }

    .tit-box:after {
        top: 2px;
    }

    .asme-wrap .box .list ul {
        flex-direction: column;
        gap: 1.25rem;
    }

    .asme-wrap .box .list ul li {
        width: 100%;
        height: 6.25rem;
    }

    .sub_tab.mb0 {
        margin-bottom: var(--spacing-3) !important;
    }

    .sub_tab1 .tab {
        padding: 0 0 var(--spacing-3) 0;
    }

    .sub_tab_wrap {
        padding: var(--spacing-3) var(--padding2) 0;
    }

    /**/
    /**/
    /**/
    /**/
    /**/
    /**/
    /* -------------------------
    UHP Microelectronics
    --------------------------- */
    /* Tube & Pipe */
    .sub_tab {
        margin-bottom: 2rem;
    }

    .sub_tab1 .tab1 li,
    .sub_tab1 .tab2 li {
        min-width: auto;
    }

    .sub_tab .tab2 li {
        width: 9.313rem;
    }

    .tube-wrap .list .img-box:after {
        content: none;
    }

    /* -------------------------
    Energy & Industrial
    --------------------------- */
    .table-list2:before {
        content: '';
        position: absolute;
        height: calc(100% - var(--spacing-8));
        width: 1px;
        background-color: #e5e5e5;
        left: 0;
        top: 0;
        z-index: 3;
    }

    .table-list2:after {
        content: '';
        position: absolute;
        height: 100%;
        width: 1px;
        background-color: #e5e5e5;
        right: 0;
        top: 0;
        z-index: 1;
    }

    .txt_center td {
        text-align: center;
    }

    .table colgroup {
        display: none;
    }

    .table-scroll {
        overflow: auto;
        overflow-x: scroll;
    }

    .table-scroll table {
        min-width: 768px;
    }

    .table-scroll::-webkit-scrollbar {
        width: 0.625rem;
        height: 0.5rem;
        background-color: #F5F5F9;
        border-radius: 0.313rem;
    }

    .table-scroll::-webkit-scrollbar-thumb {
        background-color: #d8d8d8;
        border-radius: 0.313rem;
        background-clip: padding-box;
    }

    .visible-xs {
        display: block;
    }


    .scroll_tb {
        text-align: center;
        margin: 13px 0 0 0;
        width: 100%;
        font-size: 13px;
        padding: 5px 0 5px 0;
    }

    /* -------------------------
    Contact us
    --------------------------- */
    .contact-form button {
        width: 7rem;
        height: 2.5rem;
    }

    .contact-wrapper .submit-btn button {
        margin-top: 1.2rem;
        width: 8rem;
        padding: var(--spacing-8);
    }
}


@media (max-width: 640px) {
    /* -------------------------
    ABOUT WSG
    --------------------------- */
    /* Group Subsidiaries */
    .group .group-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-form .name-box1 {
        flex-flow: column;
        gap: 0.9375rem;
    }

    /* -------------------------
    Global Customers
    --------------------------- */
    .ivBox-wrap-2 {
        background-size: cover;
        background-position: center;
        margin-left: -0.938rem;
        margin-right: -0.938rem;
        padding: 0 var(--padding2);
    }

    .Box-right .Box {
        width: 90%;
        padding-left: 1.6rem;
    }

    .Box-right .Box > ul {
        gap: var(--spacing-9);
    }

}

@media (max-width: 480px) {

    /* -------------------------
    ABOUT WSG
    --------------------------- */
    /* Corporate Profile */
    .accordion-tit {
        font-size: 0.9rem;
        padding: 0 var(--spacing-2);
    }

    .accordion-tit a {
        padding: 0.4rem;
        width: 6rem;
        line-height: 1.2;
    }

    .on-open .accordion-tit {
        padding: 0 var(--spacing-2);
    }

    /* Group Subsidiaries */
    .partners-wrap .group {
        flex-wrap: wrap;
    }

    .partners-wrap .group .box1 {
        width: 100%;
    }

    .group .group-box {
        grid-template-columns: repeat(1, 1fr);
    }

    /*    .ProList2 .titB {
            left: var(--spacing-2);
            bottom: var(--spacing-2);
        }*/
    /* Strategic Partners */
    /* Investor Relations */
    .ivBox-wrap .BoxIn {
        grid-template-columns: repeat(1, 1fr);
    }

    .ivBox-wrap .BoxIn .Box {
        padding: var(--padding2);
        gap: var(--spacing);
        flex-direction: row;
    }

    .ivBox-wrap .BoxIn .Box .ico img {
        width: var(--header-hei3);
        height: var(--header-hei3);
    }

    /* -------------------------
    Life Sciences
    --------------------------- */
    /* Bioreactors */
    .img_wrap .item-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .img_wrap .item-box .box .img {
        height: 12rem;
    }

    .sub_tab1 .tab li > a {
        padding: 0 var(--spacing-8);
        letter-spacing: -0.4px;
    }

    .sub_tab_wrap .sub_tab1 .tab li > a {
        padding: 0 var(--spacing-9);
    }

    .sub_tab_wrap .sub_tab1 .tab2 li > a {
        padding: 0 var(--spacing);
    }

    /* -------------------------
    Energy & Industrial
    --------------------------- */
    .slick-wrapper .slick-menu {
        flex-direction: column;
    }

    .slider-progress {
        width: 9rem;
    }

    .slick-wrapper .counter {
        padding: 0 var(--padding2);
    }


    /* -------------------------
    Contact us
    --------------------------- */
    /* -------------------------
    Global Customers
    --------------------------- */
    .ivBox-wrap-2 {
        row-gap: var(--spacing-3);
    }

    .Box-right .Box {
        width: 100%;
        padding-left: 0;
    }
}

@media (max-width: 320px) {
    /* -------------------------
    Family site
    --------------------------- */
    .dropup-wrapper {
        width: 100%;
    }

    .dropup-btn {
        max-width: 100%;
        width: 100%;
    }
}