@charset "utf-8";

body.web-insidePage::before {
content: "";
position: absolute;
top: 0;
left: calc(50% - (880px));
width: 22rem;
height: 100%;
background: url('/upload/editor/icon/wave4.svg') 100% 0% repeat-y;
pointer-events: none;
}
body.web-insidePage::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(50% - (880px - 18rem));
height: 100%;
background-color: #eeeeef;
z-index: -1;
pointer-events: none;
}

.web-insidePage > .shop > .container-fluid.max-c-f {
position: relative;
}
.web-insidePage > .shop > .container-fluid.max-c-f::after {
content: "";
position: absolute;
bottom: 0;
z-index: -1;
right: -15%;
width: 100%;
height: 84%;
background: url("/upload/editor/icon/pattern2.svg") 50% 100% no-repeat;
background-size: contain;
pointer-events: none;
opacity: 0.6;
}

@media (min-width: 992px) {
.web-insidePage > .shop > .container-fluid.max-c-f::after {
width: 75%;
}
}

@media (min-width: 1200px) {
#footer {
background: transparent;
}
#footer > div {
justify-content: flex-end;
width: calc(100% - (16rem + 1.75rem));
margin: 0 0 0 auto;
}
.f-webInfo {
flex: 1;
}
}

@media (min-width: 1401px) {
#footer > div {
width: calc(100% - (22rem + 2.25rem));
}
}

@media (max-width: 1760px) {
body.web-insidePage::before {
left: 40px;
}
body.web-insidePage::after {
width: 22rem;
}
}

@media (max-width: 1410px) {
body.web-insidePage::before {left: 30px;}   
}

@media (max-width: 1199px) {
body.web-insidePage::before {display: none;}   
body.web-insidePage::after {display: none;} 
}

.shop {
position: relative;
}
.shop::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #fff 0%, transparent 50%);
pointer-events: none;
}
.shop > div {
position: relative;
z-index: 3;
}
.shop .list .TXT h4 {text-align: center;}
.shop .price {justify-content: center;}
#sideBarBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
}
#sideBarBox .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#sideBarBox .item .c-icon {
display: flex;
width: 100%;
}
#sideBarBox .item .c-icon img {
display: flex;
width: 100%;
transition: 0.35s;
}
#sideBarBox .item:hover .c-icon img {
transform: scale(1.1);
}
#sideBarBox .item .txt {
text-align: center;
padding: 5px 0 0;
color: #717071;
}
#sideBarBox .item .txt h4 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 10px;
padding-left: 10px;
}
#sideBarBox .item .txt h5 {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.75px;
line-height: 1;
padding-top: 3px;
}

.shop .h1-menuBox {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 50px;
padding: 0 0 45px;
}
.shop .h1-menu2 {
font-size: 1.25rem;
margin: 0;
}
.shop .h1-menu2 span {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--hoverC2);
color: var(--hoverC1);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.shop .h1-menuBox .menu {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
flex: 1 1 auto;
padding: 15px 0 0;
margin: 27px 0 0;
border-top: 1px solid var(--bs-gray-400);
}
.shop .h1-menuBox .menu .item {
font-size: 1rem;
color: var(--wordB);
transition: 0.25s;
padding-right: 21px;
position: relative;
}
.shop .h1-menuBox .item:hover {color: var(--mainC);}
.shop .h1-menuBox .item::before {
content: "";
position: absolute;
top: 20%;
right: 0;
width: 1px;
height: 60%;
background-color: var(--bs-gray-400);
}
.shop .h1-menuBox .item:last-child::before {display: none;}

@media (max-width: 1680px) {
#sideBarBox .item .txt h4 {font-size: 1.15rem;} 
#sideBarBox .item .txt h5 {font-size: 0.75rem;}  
}

@media (max-width: 1410px) {
body.web-insidePage::before, body.web-insidePage::after {width: 16rem;}
#sideBarBox .item .txt h4 {font-size: 1.05rem;} 
}

@media (max-width: 1199px) {
.mainContent {flex-direction: column;}    
.mainContent > #sideBarBox {width: 100%;padding: 0 0 2rem;}
.mainContent > #contentBox {width: 100%;padding-left: 0;}

#sideBarBox .item .txt h4 {font-size: 1rem;}   
#sideBarBox {width: 100%;}
#sideBarBox {flex-direction: row;}
#sideBarBox .item .c-icon {width: 66%;}

.shop .h1-menu2 {
font-size: 1.15rem;
}
.shop .h1-menuBox {
flex-direction: column;
align-items: center;
gap: 20px;
padding: 15px 0 30px;
}
.shop .h1-menuBox  .menu {
justify-content: center;
margin: 0;
}
}

.introduction {}
.introduction img {
display: flex;
width: 100%;
}
.introduction .i-material {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 50px;
}
.introduction .i-material .pic {
    width: 35%;
    max-width: 400px;
}
.introduction .i-material .txt {
    flex: 1;
}
.introduction .i-material .txt .name {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 30px;
    margin: 0;
}
.introduction .i-material .txt .contactInfo {}
.introduction .i-material .txt .contactInfo > a {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    gap: 10px;
    color: var(--wordB);
    padding: 15px 0 0;
    transition: 0.25s;
}
.introduction .i-material .txt .contactInfo > a:hover {color: var(--mainC);}
.introduction .i-material .txt .contactInfo > a > i {width: 24px;}
.introduction .i-material .txt .contactInfo > a.phone > i {
    transform: scale(-1, 1);
    font-size: 1rem;
    position: relative;
    top: 2px;
}
.introduction .i-material .txt .contactInfo > a.add > i {
    font-size: 1.15rem;
    position: relative;
    left: 0;
    top: 3px;
}
.introduction .i-material .txt .contactInfo > a > .icon {
    width: 24px;
    height: 24px;
    background-color: var(--wordB);
    -webkit-mask: url("/upload/editor/icon/open.svg") no-repeat center;
    mask: url("/upload/editor/icon/open.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: 0.25s;
    position: relative;
    top: 2px;
}
.introduction .i-material .txt .contactInfo > a:hover > .icon {background-color: var(--mainC);}
.introduction .i-material .txt .contactInfo > a > p {
    font-size: 1.115rem;
    font-weight: 500;
}
.introduction .i-material .txt .socialMedia {
    padding: 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.introduction .i-material .txt .socialMedia > a {
    display: inline-flex;
    font-size: 1.65rem;
    color: var(--wordB);
    opacity: 0.82;
    transition: 0.2s;
}
.introduction .i-material .txt .socialMedia > a:hover {opacity: 1;}
.introduction .i-material .txt .socialMedia > a > i {}
.introduction .i-material .txt .socialMedia a.facebook:hover {color: #0866ff;}
.i-material .txt .socialMedia a.facebook {}
.introduction .i-material .txt .socialMedia .globe {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    background-color: var(--wordB);
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.introduction .i-material .txt .socialMedia a.globe > i {}
.introduction .i-txtImg {
    padding: 50px 0;
}
.introduction .i-txtImg .item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 50px;
}
.introduction .i-txtImg .item .TXT {flex: 1;}
.introduction .i-txtImg .item .IMG {
    width: 50%;
    max-width: 600px;
}

@media (max-width: 1840px) {
.imgBox .txt h3, .item .txt2 h4 {font-size: 1.05rem;}  
}

@media (max-width: 1409px) {
.imgBox .txt h3, .item .txt2 h4 {font-size: 1rem;}  

.introduction .i-material {gap: 30px;}
.introduction .i-material .txt .name {
    font-size: 1.35rem;
        padding-bottom: 20px;
}
.introduction .i-material .txt .contactInfo > a > i {width: 20px;}
.introduction .i-material .txt .contactInfo > a > p {font-size: 1rem;}
.introduction .i-material .txt .socialMedia {
    padding: 25px 0 0;
    gap: 15px;
}
}

@media (max-width: 640px) {
.introduction .i-txtImg {
    padding: 35px 0;
}
.introduction .i-txtImg .item {
    padding-top: 35px;
}
.introduction .i-txtImg .item .IMG {
    width: 100%;
}
}

@media (max-width: 480px) {
.introduction .i-material .pic {
    width: 100%;
    max-width: inherit;
}
}