@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&family=BBH+Bartle&family=Lato&family=Oswald&display=swap');

:root {
    /*font*/
    --bbh: 'BBH Bartle', sans-serif;
    --lato: 'Lato', sans-serif;
    --oswald: 'Oswald', sans-serif;

    /*title*/
    --title1: 28px;

    /*color*/
    --red: #DF1614;
    /*--black:#000000;
    --grey:#443A32;
    --green:#088380;
    --orange: #FF6400;*/
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-size: 16px;
    color: #222222;
    -webkit-text-size-adjust: none;
    image-rendering: -webkit-optimize-contrast;
}

a {
    color: #222222;
}

.webout {
    position: relative;
    max-width: 2300px;
    margin: 0 auto;
}

.article {
    overflow: clip;
}

.out {
    max-width: 1550px;
    position: relative;
    padding: 0 6%;
    margin: 0 auto;
}

input,
textarea,
select {
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-size: 16px;
    color: #222222;
}

/*HOME-----------------------------------------*/

/*HOME_S1-----------------*/
.home .s1 .splide__slide img {
    width: 100%;
}

.home .s1 .splide__slide .pc {
    aspect-ratio: 2300/838;
}

.home .s1 .splide__pagination {
    bottom: 45px;
}

.home .s1 .splide__pagination__page {
    width: 50px;
    height: 3px;
    background: #595757;
    border-radius: 0;
    margin: 0 7px;
    opacity: 1;
    transition: 0.2s;
}

.home .s1 .splide__pagination__page.is-active {
    background: var(--red);
    transform: scaleY(3);
}

.home .s1 .mb {
    display: none;
    aspect-ratio: 4/5;
}

/*HOME_S2-----------------*/
.home .s2 {
    padding: 110px 0 250px;
    background: url('../images/home_s2_bg.jpg') center/cover;
    background-attachment: fixed;
}

.home .en,
.contact_form .en {
    font-family: var(--bbh);
    font-size: min(58px, 9.4vw);
    margin-bottom: 20px;
}

.home .s2 .en {
    color: var(--red);
}

.home .tw,
.contact_form .tw {
    font-size: var(--title1);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 90px;
}

.home .s2 .tw div {
    font-size: 25px;
    font-weight: normal;
    display: flex;
    align-items: center;
}

.home .s2 .tw div::before {
    content: '';
    display: block;
    width: 15px;
    height: 30px;
    background: var(--red);
    transform: skewX(-40deg);
    margin-right: 30px;
}

.home .s2 ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 30px;
}

.home .s2 li a {
    position: relative;
    display: block;
    border-radius: 60px 0 60px;
    overflow: hidden;
}

.home .s2 li img {
    width: 100%;
    aspect-ratio: 4/3;
    transition: 0.2s;
}

.home .s2 li:hover img {
    transform: scale(1.1);
}

.home .s2 li div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px 30px 30px;
    background: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    color: #FFFFFF;
    transition: 0.2s;
}

.home .s2 li a:hover div {
    background: var(--red);
}

.home .s2 li .t1 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 1em;
}

.home .s2 li .t2 {
    line-height: 1.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.home .s2 li a:hover div::after {
    content: '';
    position: absolute;
    right: 30px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(-45deg);
}

.home .s2 li a:hover div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(rgba(0, 0, 0, 0.2), transparent);
}

@media screen and (max-width: 1000px) {
    .home .s2 {
        padding-top: 60px;
    }

    .home .s2 ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .home .s2 .tw {
        margin-bottom: 60px;
    }

    .home .s2 li a {
        border-radius: 6vw 0 6vw;
    }
}

@media screen and (max-width: 700px) {
    .home .s2 .tw {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .home .s2 ul {
        gap: 40px 15px;
    }

    .home .s2 li .t1 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .home .s2 .tw div::before,
    .home .s2 li a:hover div::after,
    .home .s2 li .t2 {
        display: none;
    }

    .home .s2 li div {
        padding: 1em;
    }
}

/*HOME_S3-----------------*/
.home .s3 {
    position: relative;
    padding-top: 90px;
}

.home .s3 .out {
    height: 800px;
}

.home .s3 .text {
    width: 45%;
    max-width: 630px;
}

.home .s3 .top {
    width: 2300px;
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
}

.home .s3 .en {
    color: #000000;
}

.home .s3 .tw,
.contact_form .tw {
    color: #222222;
    margin-bottom: 0;
    gap: 20px;
    align-items: flex-end;
}

.home .s3 .tw {
    max-width: 540px;
}

.home .s3 .tw div,
.contact_form .tw div {
    flex-grow: 1;
    height: 16px;
    background: var(--red);
    border-radius: 15px 0 15px 0;
}

.home .s3 .t1 {
    line-height: 2em;
    margin: 70px 0;
}

.home .s3 ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
}

.home .s3 ul li {
    background: linear-gradient(135deg, #F2F2F2, #E8E8E8);
    border-radius: 50px 0 50px;
    font-weight: 700;
    font-size: min(23px, 1.5vw);
    text-align: center;
    padding: 1.5em 1em;
}

.home .s3 ul li img {
    display: block;
    margin: 0 auto 0.5em;
    width: 80%;
}

.home .s3 .more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 42px;
    color: #222222;
    border-radius: 21px;
    font-size: 15px;
    margin-top: 60px;
    background: #E8E8E8;
    transition: color 0.2s, background 0.2s;
}

.home .s3 .more:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 10px;
    background: url('../images/arrow_r.svg') center/contain no-repeat;
    margin-left: 10px;
    transition: 0.2s;
}

.home .s3 .more:hover {
    color: #FFFFFF;
    background: var(--red);
}

.home .s3 .more:hover:after {
    filter: brightness(0) invert(1);
}

.home .s3 .right {
    position: absolute;
    right: 50%;
    bottom: 0;
    margin-right: -1290px;
    width: 1300px;
}

/*HOME_S4-----------------*/
.home .s4 {
    padding: 110px 0;
    background: url('../images/home_s4_bg.jpg') center/cover;
    background-attachment: fixed;
}

.home .s4 .out {
    position: relative;
}

.home .s4 .en {
    color: var(--red);
    margin-bottom: 30px;
}

.home .s4 .tw {
    color: #FFFFFF;
    margin-bottom: 90px;
}

.home .s4 .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    padding-right: 165px;
}

.home .s4 .top .tw {
    margin-bottom: 0;
}

.home .s4 .top a {
    position: relative;
    display: block;
    width: 170px;
    background: #FFFFFF;
    border-radius: 30px;
    font-family: var(--bbh);
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}

.home .s4 .top a img {
    width: 15px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s;
}

.home .s4 .top a:hover {
    background: var(--red);
    color: #FFFFFF;
}

.home .s4 .top a:hover img {
    filter: brightness(0) invert(1);
}

/*HOME_S4_SLIDER*/
.home .s4 .splide__track {
    overflow: visible;
    clip-path: inset(-10px -100vw -10px 0);
}

.home .s4 .splide__arrows {
    position: absolute;
    right: 0;
    top: -147px;
    display: flex;
    gap: 15px;
}

.home .s4 .splide__arrow {
    position: static;
    transform: none;
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    opacity: 1;
    border-radius: 50%;
    transition: background 0.2s;
}

.home .s4 .splide__arrow svg {
    fill: #222222;
    width: 40%;
    height: 40%;
    transition: 0.2s;
}

.home .s4 .splide__arrow:hover {
    background: var(--red);
}

.home .s4 .splide__arrow:hover svg {
    fill: #FFFFFF;
}

.home .s4 .splide__slide a,
.news .s2 .list li a {
    display: block;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.2s;
    text-decoration: none;
}

.home .s4 .splide__slide img,
.news .s2 .list li img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.home .s4 .splide__slide .text,
.news .s2 .list li .text {
    padding: 40px;
}

.home .s4 .date,
.news .s2 .list li .date {
    color: var(--red);
    font-size: 13px;
}

.home .s4 .t1,
.news .s2 .list li .t1 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2em;
    margin: 1em 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.home .s4 .t2,
.news .s2 .list li .t2 {
    line-height: 1.8em;
    margin-bottom: 30px;
    height: 3.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home .s4 .more,
.news .s2 .list li .more {
    display: inline-block;
    padding: 12px 25px;
    border: #A5A5A5 1px solid;
    border-radius: 30px;
    font-family: var(--bbh);
    font-size: 11px;
    color: #A5A5A5;
    transition: 0.2s;
}

.home .s4 .splide__slide:hover .more,
.news .s2 .list li:hover .more {
    background: var(--red);
    border-color: var(--red);
    color: #FFFFFF;
}

.home .s4 .splide__slide:hover a,
.news .s2 .list li:hover a {
    transform: translateY(-10px);
}

/*HOME_S5-----------------*/
.home .s5 {
    padding: 90px 0 160px;
}

.home .s5 .en {
    color: var(--red);
}

.home .s5 .tw {
    margin-bottom: 60px;
}

.home .s5 .splide {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 90px;
}

.home .s5 .splide__track {
    border-radius: 20px;
    overflow: hidden;
}

.home .s5 .splide__slide {
    position: relative;
}

.home .s5 .video-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home .s5 .splide__video__play {
    width: 80px;
    height: 56px;
    background: url("../images/yt_bt.png") no-repeat;
    background-size: cover;
    border-radius: 0;
}

.home .s5 .splide__video__play:after {
    display: none;
}

.home .s5 .splide__arrow {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #F7F7F7, #EDEDED);
    border-radius: 50%;
    opacity: 1;
    transition: 0.2s;
    box-shadow: 2px 2px 2px #C8C8C8;
}

.home .s5 .splide__arrow svg {
    fill: #222222;
    width: 40%;
    height: 40%;
}

.home .s5 .splide__arrow:hover {
    background: linear-gradient(-45deg, var(--red), #771714);
}

.home .s5 .splide__arrow:hover svg {
    fill: #FFFFFF;
}

.home .s5 .splide__arrow--prev {
    left: 0;
}

.home .s5 .splide__arrow--next {
    right: 0;
}

.home .s5 .splide__pagination {
    bottom: -70px;
}

.home .s5 .splide__pagination__page {
    width: 14px;
    height: 14px;
    background: #777777;
    margin: 0 8px;
    opacity: 1;
    transition: 0.2s;
}

.home .s5 .splide__pagination__page.is-active {
    background: var(--red);
    transform: scale(1.2);
}

/*ABOUT-----------------------------------------*/
.about section {
    scroll-margin-top: 70px;
}

/*ABOUT_S2-----------------*/
.about .s2 {
    position: relative;
    overflow: hidden;
}

.about .s2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/about_s2_bg.jpg') center/cover no-repeat;
    animation: zoom 3s both;
}

@keyframes zoom {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: none;
    }
}

.about .s2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: url('../images/about_s2.svg') bottom/cover no-repeat;
}

.about .s2 .out {
    z-index: 1;
    color: #FFFFFF;
    height: 950px;
}

.about .s2 .en {
    margin-top: 190px;
    font-family: var(--bbh);
    font-size: min(63px, 5vw);
    line-height: 1.3em;
    margin-bottom: 1.2em;
}

.about .s2 .t2 {
    font-size: min(77px, 10.3vw);
    font-weight: 700;
}

.about .s2 .t3 {
    font-size: min(30px, 4vw);
    font-weight: 700;
    margin: 1.5em 0;
}

.about .s2 .line {
    width: min(220px, 30vw);
    height: min(35px, 5vw);
    background: var(--red);
    border-radius: 30px 0 30px 0;
}

/*ABOUT_S3-----------------*/
.about .s3 .out {
    position: relative;
    z-index: 1;
    height: 1030px;
}

.about .s3 .en {
    font-family: var(--bbh);
    font-size: min(48px, 3vw);
    line-height: 1.3em;
    color: var(--red);
    margin-bottom: 1.5em;
    margin-top: 150px;
}

.about .s3 .text {
    display: flex;
    align-items: flex-start;
    gap: 0 8%;
    width: 65%;
    max-width: 900px;
}

.about .s3 .left {
    flex: 1;
}

.about .s3 .t2 {
    font-size: min(53px, 3.5vw);
    font-weight: 700;
    line-height: 1.3em;
}

.about .s3 .t2::after {
    content: '';
    display: block;
    width: 3em;
    height: 10px;
    background: var(--red);
    border-radius: 10px 0 10px 0;
    margin-top: 0.5em;
}

.about .s3 .t3 {
    line-height: 2em;
    margin-top: 3em;
}

.about .s3 .right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about .s3 .right li {
    background: linear-gradient(#9B1A1A, #FC2525);
    color: #FFFFFF;
    padding: 0.5em;
    border-radius: 0 0.6em 0 0.6em;
    font-family: var(--oswald);
    font-size: min(85px, 6vw);
    line-height: 1em;
    font-weight: 700;
    flex-shrink: 0;
}

.about .s3 .right li div {
    font-family: var(--lato);
    font-size: min(17px, 4vw);
    line-height: 1.3em;
    margin-top: 10px;
}

.about .s3 .pc {
    position: absolute;
    top: -9px;
    right: 50%;
    margin-right: -1150px;
}

.about .s3 .mb {
    display: none;
}

/*ABOUT_S4-----------------*/
.about .s4 {
    position: relative;
    background: url('../images/about_s4_bg.jpg') center/cover no-repeat;
    background-attachment: fixed;
    color: #FFFFFF;
}

.about .s4::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 0;
    width: 100%;
    height: 133px;
    background: url('../images/about_s4_top.svg') center/cover no-repeat;
    background-size: 2300px auto;
}

.about .s4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: url('../images/about_s4_bm.svg') center/cover no-repeat;
    background-size: 2300px auto;
}

.about .s4 .out {
    height: 990px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about .s4 .en {
    width: fit-content;
    font-family: var(--bbh);
    font-size: min(66px, 8vw);
}

.about .s4 .t2 {
    font-size: min(60px, 9vw);
    font-weight: 700;
    margin: 1em 0 0.7em;
}

.about .s4 .t3 {
    font-size: min(34px, 5vw);
    margin-bottom: 2.5em;
}

.about .s4 ul {
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    gap: 60px 6%;
    list-style: none;
    padding: 0;
}

.about .s4 li img {
    height: 116px;
}

.about .s4 .t4 {
    font-size: 24px;
    font-weight: 700;
    margin: 1em 0;
}

.about .s4 .t5 {
    line-height: 1.7em;
}

/*ABOUT_S5-----------------*/
.about .s5 {
    padding: 80px 0 120px;
}

.about .s5 .box {
    position: relative;
    background: #EFEFEF url('../images/about_s5.jpg') center/cover no-repeat;
    border-radius: 60px;
    padding: 90px 90px 50px;
}

.about .s5 .text {
    max-width: 660px;
    margin-left: auto;
}

.about .s5 .en {
    font-family: var(--bbh);
    font-size: min(36px, 5.5vw);
    line-height: 1.3em;
    color: var(--red);
    margin-bottom: 2em;
}

.about .s5 .en .reveal-content::after {
    content: "";
    display: block;
    width: 3.5em;
    height: 8px;
    background: var(--red);
    border-radius: 10px 0 10px 0;
    margin-top: 0.5em;
}

.about .s5 .t2 {
    font-size: min(70px, 13.5vw);
    font-weight: 700;
    margin-bottom: 0.4em;
}

.about .s5 .t3 {
    display: inline-block;
    align-self: flex-start;
    background: linear-gradient(#8B1919, #DD2D27);
    color: #FFFFFF;
    padding: 0.5em 1.1em;
    border-radius: 0 12px 0 12px;
    font-size: min(33px, 6.5vw);
    font-weight: 700;
    margin-bottom: 40px;
}

.about .s5 ul {
    list-style: none;
    padding: 0;
}

.about .s5 li {
    margin-bottom: 40px;
}

.about .s5 .t4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 1em;
}

.about .s5 .t5 {
    line-height: 1.8em;
}

/*NEWS-----------------------------------------*/

/*NEWS_S1-----------------*/
.news .s1 .mb {
    display: none;
}

.news .s1 .tab {
    text-align: center;
    padding-top: 60px;
}

.news .s1 {
    padding-bottom: 60px !important;
}

.news .s1 .tab .out {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.news .s1 .tab .out li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    min-width: 6em;
    padding: 1em 30px;
    border-radius: 40px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    background: linear-gradient(#E4E4E4, #FBFBFB);
    color: #222;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: #FFFFFF 1px solid;
    white-space: nowrap;
    transition: 0.2s;
}

.news .s1 .tab .out li:hover a {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    color: var(--red);
}

.news .s1 .tab .out li.active a {
    background: linear-gradient(#9B1A1A, #FC2525);
    color: #fff;
    border: var(--red) 1px solid;
    position: relative;
    padding-right: 45px;
}

.news .s1 .tab .out li.active a:after {
    content: "||";
    position: absolute;
    right: 20px;
    font-size: 12px;
    opacity: 0.5;
    letter-spacing: 1px;
}

/*NEWS_S2-----------------*/
.news .s2,
.news .in2 {
    padding: 130px 0;
    background: url('../images/product_s2_bg.jpg') top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.news .s2 .out {
    max-width: 1400px;
}

.news .s2 .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 3%;
    margin-bottom: 90px;
}

/*NEWS_IN2-----------------*/
.news.in .in2 .out {
    max-width: 1250px;
}

.news.in .in2 .box {
    background: #FFFFFF;
    border-radius: 30px;
    padding: 5%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.news.in .in2 .date {
    color: var(--red);
    margin-bottom: 1em;
}

.news.in .in2 .t1 {
    font-size: 32px;
    line-height: 1.3em;
    font-weight: 700;
    margin-bottom: 1em;
    padding-bottom: 1em;
    position: relative;
    border-bottom: #E5E5E5 1px solid;
}

.news.in .in2 .t1:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 4em;
    height: 1px;
    background: var(--red);
}

.news.in .in2 .back {
    position: relative;
    display: block;
    width: 200px;
    line-height: 60px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 30px;
    margin: 60px auto 0;
    transition: 0.2s;
    font-weight: 700;
}

.news.in .in2 .back:before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    margin-top: -5px;
    width: 15px;
    height: 10px;
    background: url('../images/arrow_l.svg') center/contain no-repeat;
    margin-right: 10px;
    transition: 0.2s;
}

.news.in .in2 .back:hover {
    background: var(--red);
    color: #FFFFFF;
}

.news.in .in2 .back:hover:before {
    filter: brightness(0) invert(1);
}

/*PRODUCT-----------------------------------------*/

/*PRODUCT_S1-----------------*/
.product .s1,
.news .s1 {
    position: relative;
    padding-bottom: 90px;
    background: url('../images/product_s1_bg.jpg') bottom center/cover no-repeat;
}

.search .s1 {
    padding-bottom: 0;
}

.product .s1:after,
.news .s1:after {
    content: "";
    position: absolute;
    bottom: -36px;
    left: 0;
    width: 100%;
    height: 37px;
    background: url('../images/product_s1_bm.svg') top center no-repeat;
    background-size: auto 37px;
}

/*PRODUCT_LINK*/
.product .s1 .link {
    padding-top: 40px;
}

.product .s1 .link .mb {
    display: none;
}

.product .s1 .link .out {
    max-width: 1250px;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

.product .s1 .link .out>li {
    position: relative;
    min-width: 200px;
}

.product .s1 .link .out span {
    display: block;
    background: linear-gradient(#EEEEEE, #F8F8F8, #F8F8F8);
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    padding: 20px 2em;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 0 #BBBBBB, 0 6px 10px rgba(0, 0, 0, 0.1);
}

.product .s1 .link .out li:hover span {
    background: linear-gradient(#B01E1C, #DC2322);
    border-color: transparent;
    color: #FFFFFF;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.product .s1 .link .out li:hover span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    border-color: #FFFFFF transparent transparent transparent;
    margin-top: -3px;
}

.product .s1 .link .out ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 15px 15px -15px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.2s;
    z-index: 10;
}

.product .s1 .link .out li:hover ul {
    transform: scaleY(1);
}

.product .s1 .link li a {
    display: block;
    padding: 12px 20px;
    color: #4D4D4D;
    transition: 0.2s;
    text-decoration: none;
    text-align: left;
}

.product .s1 .link li a:hover {
    background: #EEEEEE;
    color: #222222;
}

/*PRODUCT_TITLE*/
.product .s1 .t3 {
    text-align: center;
    line-height: 1.3em;
    font-size: min(30px, 5.5vw);
    font-weight: 700;
    margin: 60px 0;
}

.product .s1 .t3 span {
    color: var(--red);
    margin-left: 10px;
}

.product .s1 .t3:after {
    content: "";
    display: block;
    width: 60px;
}

/*PRODUCT_CHOOSE*/
.product .s1 .choose {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    max-width: 800px;
    padding: 10px 0 0 170px;
    margin: 0 auto;
}

.product .s1 .choose li:first-child {
    position: absolute;
    top: 0;
    left: 0;
    background: #333333;
    color: #FFFFFF;
    padding: 15px 40px 15px 30px;
    font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}

.product .s1 .choose li:not(:first-child) {
    display: flex;
    align-items: center;
}

.product .s1 .choose label {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-weight: 700;
    color: #333333;
    cursor: pointer;
}

.product .s1 .choose input[type="checkbox"] {
    appearance: none;
    width: 25px;
    height: 25px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    background: linear-gradient(#F7F7F7, #EEEEEE, #DDDDDD);
    position: relative;
    transition: 0.2s;
    cursor: pointer;
}

.product .s1 .choose input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 12px;
    border: solid var(--red);
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -65%) rotate(45deg);
}

/*PRODUCT_S2-----------------*/
.product .s2 {
    padding: 130px 0;
    background: url('../images/product_s2_bg.jpg') top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.product .s2 .out {
    max-width: 1350px;
}

.product .s2 .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 2%;
    margin-bottom: 90px;
}

.product .s2 .list li a {
    position: relative;
    top: 0;
    display: block;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 9%;
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid transparent;
    overflow: hidden;
}

.product .s2 .list li:hover a {
    top: -10px;
    border-color: var(--red);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.product .s2 .list img {
    width: 100%;
    display: block;
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: 0.3s;
}

.product .s2 .list .text {
    border-bottom: 1px solid #EEEEEE;
    padding: 30px 0 20px;
}

.product .s2 .list .t1 {
    font-size: 24px;
    line-height: 1.3em;
    height: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.product .s2 .list .t2 {
    line-height: 1.3em;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.product .s2 .list .more {
    font-family: var(--bbh);
    font-size: 12px;
    color: #A5A5A5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 30px;
    transition: 0.2s;
}

.product .s2 .list .more:before {
    content: "";
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #A5A5A5;
    transition: 0.2s;
}

.product .s2 .list li a:hover .more {
    color: var(--red);
}

.product .s2 .list li a:hover .more:before {
    border-color: transparent transparent transparent var(--red);
}

/*PRODUCT_IN-----------------------------------------*/

/*PRODUCT_IN_S1-----------------*/
.product.in .s1 {
    padding-bottom: 0;
}

.product.in .s1:after {
    display: none;
}

/*PRODUCT_IN2-----------------*/
.product.in .in2 {
    padding: 90px 0 120px;
    background: url('../images/product_s2_bg.jpg') top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.product.in .in2 .out {
    display: grid;
    grid-template-columns: 54% 1fr;
    align-items: flex-start;
    gap: 50px;
    max-width: 1350px;
}

/*LEFT_SLIDER*/
.product.in .in2 .left {
    display: flex;
    gap: 3%;
    flex-shrink: 0;
}

.product.in .in2 .sm {
    width: 15%;
    flex-shrink: 0;
    align-self: flex-start;
}

.product.in .in2 .sm .splide,
.product.in .in2 .sm .splide__track {
    width: 100% !important;
    height: 100% !important;
}

.product.in .in2 .sm .splide__list {
    overflow: hidden;
}

.product.in .in2 .sm .splide__slide {
    border: 2px solid #FFFFFF;
    background: #FFFFFF;
    cursor: pointer;
    box-sizing: border-box;
}

@media screen and (min-width: 1001px) {
    .product.in .in2 .sm .splide__slide {
        width: 100% !important;
    }
}

.product.in .in2 .sm .splide__slide.is-active {
    border: 2px solid var(--red);
    opacity: 1;
}

.product.in .in2 .sm img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.product.in .in2 .big {
    flex: 1;
    align-self: flex-start;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
}

.product.in .in2 .big .splide__track,
.product.in .in2 .big .splide__list {
    height: auto !important;
}

.product.in .in2 .big img {
    width: 100%;
    height: auto !important;
    display: block;
    aspect-ratio: 1/1;
}

/*BIG SLIDER ARROWS*/
.product.in .in2 .big .splide__arrow {
    background: none;
    opacity: 1;
}

.product.in .in2 .big .splide__arrow svg {
    fill: #CCCCCC;
    width: 30px;
    height: 30px;
    transition: 0.2s;
}

.product.in .in2 .big .splide__arrow:hover svg {
    fill: var(--red);
}

/*RIGHT_INFO*/
.product.in .in2 .right {
    color: #FFFFFF;
    padding-top: 20px;
}

.product.in .in2 .t1 {
    font-size: 32px;
    line-height: 1.3em;
    font-weight: 700;
}

.product.in .in2 .t2 {
    color: #FFFFFF;
    line-height: 1.7em;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 40px;
    position: relative;
}

.product.in .in2 .num {
    display: inline-block;
    padding: 0.5em 1em;
    margin-bottom: 15px;
    border-radius: 5px;
    border: #FFFFFF 1px solid;
}

.product.in .in2 .t2:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--red);
}

.product.in .in2 .edit {
    color: #FFFFFF;
    margin-bottom: 50px;
}

.product.in .in2 .dl {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #FFFFFF;
    color: #222222;
    padding: 12px 40px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s;
}

.product.in .in2 .dl img {
    width: 18px;
    transition: 0.2s;
}

.product.in .in2 .dl:hover {
    background: var(--red);
    color: #FFFFFF;
}

.product.in .in2 .dl:hover img {
    filter: brightness(0) invert(1);
}

/*PRODUCT_IN3-----------------*/
.product.in .in3 {
    background: #fff;
}

.product.in .in3 .out {
    max-width: 1300px;
}

.product.in .in3 .title {
    position: absolute;
    top: -40px;
    background: linear-gradient(to bottom, #666, #222);
    color: #fff;
    padding: 12px 45px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    letter-spacing: 1px;
}

.product.in .in3 .edit {
    max-width: 1150px;
    margin: 0 auto;
    padding: 90px 0 70px;
}

/*CONTACT-----------------------------------------*/

/*CONTACT_FROM_BM-----------------*/
.contact .contact_form {
    padding-bottom: 200px;
}

.contact .contact_form .bm {
    max-width: 1200px;
    display: block;
}

.contact .contact_form .bm ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 450px));
    justify-content: center;
    align-items: center;
    gap: 20px 5%;
    background: rgba(127, 127, 127, 0.3);
    padding: 35px;
    border-radius: 20px;
    margin: 60px auto 0;
    color: #FFFFFF;
    box-sizing: border-box;
}


.contact .contact_form .bm li {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    border: none;
    padding: 0;
    white-space: nowrap;
}

.contact .contact_form .bm li::after {
    display: none;
}

.contact .contact_form .bm li img {
    height: 48px;
}

.contact .contact_form .bm li span {
    font-weight: 700;
    margin-right: 10px;
    font-size: 20px;
}

/*CONTACT_MAP-----------------*/
.contact .map {
    background: linear-gradient(#949494, #6F6F6F);
    position: relative;
    z-index: 1;
}

.contact .map .out {
    max-width: 1200px;
}

.contact .map iframe {
    position: relative;
    top: -130px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: block;
    margin-bottom: 30px;
}

.contact .map .more {
    position: relative;
    top: -130px;
    font-family: var(--lato);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 42px;
    background: #252525;
    color: #FFFFFF;
    border-radius: 21px;
    font-size: 15px;
    margin-left: auto;
    transition: 0.2s;
}

.contact .map .more:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 10px;
    background: url('../images/arrow_r.svg') center/contain no-repeat;
    margin-left: 10px;
    filter: brightness(0) invert(1);
    transition: 0.3s;
}

.contact .map .more:hover {
    background: var(--red);
}

.contact .map .more:hover:after {
    transform: translateX(5px);
}

/*COMMON--------------------------------------------------------------------*/

/*REVEAL_ANIMATION-----------------*/
.reveal-box {
    position: relative;
    overflow: hidden;
    vertical-align: top;
    display: inline-block;
    transform: skewX(-15deg);
    padding: 0 0.6em;
    margin-left: -0.6em;
}

.reveal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--red);
    z-index: 2;
    transform: translateX(-110%);
}

.reveal-content {
    opacity: 0;
    display: block;
    position: relative;
    transform: skewX(15deg);
}

/*HEADER-----------------------------------------*/
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #000000;
    border-bottom: #3E3A39 1px solid;
}

.header .mb_bt,
.header .mb {
    display: none;
}

.header .logo {
    display: block;
    position: absolute;
    top: 50%;
    left: 6%;
    z-index: 1;
    width: 60%;
    max-width: 390px;
    transform: translateY(-50%);
    transition: 0.2s;
}

.header.active .logo {
    max-width: 265px;
}

.header .logo img {
    width: 100%;
}

.header .pc .menu {
    display: flex;
    justify-content: flex-end;
    gap: 2%;
    padding: 50px 270px 0 0;
    font-size: min(18px, 1.5vw);
    transition: 0.2s;
}

.header.active .pc .menu {
    padding: 25px 270px 0 0;
}

.header .pc .menu .list {
    position: relative;
    cursor: pointer;
}

.header .pc .menu .list.megalist {
    position: static;
}

.header .pc .list>ul {
    position: absolute;
    left: 50%;
    width: 180px;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient(#444444, #000000);
    border-radius: 0 0 10px 10px;
    padding: 20px 0;
    margin-left: -90px;
    border: #3E3A39 1px solid;
    box-sizing: border-box;
    transform-origin: top;
    transform: scaleY(0);
    transition: 0.2s;
}

.header .pc .list:hover>ul,
.header .pc .list:hover .sub {
    transform: scaleY(1);
}

.header .pc .list .sub {
    position: absolute;
    top: 100%;
    left: 6%;
    right: 6%;
    background: #FFFFFF;
    border-top: none;
    box-sizing: border-box;
    transform-origin: top;
    transform: scaleY(0);
    transition: 0.2s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
    cursor: default;
    border-left: #3E3A39 1px solid;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.header .pc .list .sub>ul {
    display: block;
}

.header .pc .sub .sublist {
    display: flex;
    align-items: stretch;
}

.header .pc .sub .sublist:last-child {
    border-bottom: none;
}

.header .pc .sub .sublist:nth-of-type(odd)>div {
    background: #000000;
}

.header .pc .sub .sublist:nth-of-type(even)>div {
    background: #252525;
}

.header .pc .sub .sublist>div {
    width: 160px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    flex-shrink: 0;
}

.header .pc .sub .sublist>ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
    flex-grow: 1;
    align-content: center;
    border-bottom: 1px solid #E8E8E8;
}

.header .pc .sub .sublist:last-child>ul {
    border-bottom: none;
}

.header .pc .sub .sublist>ul li {
    min-width: 120px;
}

.header .pc .sub .sublist>ul li a {
    color: #222222;
    text-decoration: none;
    transition: 0.2s;
    white-space: nowrap;
    display: block;
}

.header .pc .sub .sublist>ul li a:hover {
    color: var(--red);
}

.header .pc .menu .list>a,
.header .pc .menu .list span {
    position: relative;
    top: 0;
    display: block;
    color: #FFFFFF;
    line-height: 20px;
    font-weight: 700;
    padding: 0 1em 50px;
    border-radius: 5px;
    transition: 0.2s;
}

.header.active .pc .menu .list>a,
.header.active .pc .menu .list span {
    padding-bottom: 25px;
}

.header .list li a {
    display: block;
    color: #FFFFFF;
    padding: 0.7em 0;
    transition: 0.2s;
}

.header .pc .menu .list:hover>a,
.header .pc .menu .list:hover span {
    top: -10px;
}

.header .pc .menu .list>a:after,
.header .pc .menu .list span:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.8em;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    background: var(--red);
    transition: 0.2s;
}

.header .pc .menu .list:hover>a:after,
.header .pc .menu .list:hover span:after {
    width: 2em;
}

.header .pc .list li:hover a {
    background: linear-gradient(#E01614, #A9110E);
}

.header .pc .megalist li:hover a {
    background: none;
}

.header .pc .search {
    position: absolute;
    top: 50%;
    right: 6%;
    width: 17%;
    max-width: 240px;
    transform: translateY(-50%);
}

.header .search input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 45px 0 1em;
    border-radius: 40px;
    border: none;
    background: #FFFFFF;
    box-sizing: border-box;
}

.header .search input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: url("../images/header_search.svg") center no-repeat;
    background-size: 15px auto;
    cursor: pointer;
}

@media screen and (max-width: 1450px) {
    .header .pc .menu {
        gap: 0;
    }

    .header .pc .menu {
        padding-right: 21% !important;
    }

    .header .logo {
        max-width: 250px;
    }
}

/*BOOKMARK-----------------------------------------*/
.bookmark {
    position: relative;
    z-index: 1;
    font-size: 15px;
    background: var(--red);
}

.bookmark .out {
    max-width: 1400px;
    padding: 15px 6%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px 30px;
    color: #FFFFFF;
}

.bookmark .title {
    display: flex;
    align-items: center;
    gap: 25px;
}

.bookmark .t1 {
    font-family: var(--bbh);
    font-size: min(32px, 6vw);
}

.bookmark .t2 {
    font-size: min(22px, 4.2vw);
    font-weight: 700;
}

.bookmark .area {
    list-style: none;
    display: flex;
    gap: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.bookmark .area li:last-child {
    max-width: 15em;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookmark .area li:not(:last-child):after {
    content: '—';
    margin-left: 15px;
    color: rgba(255, 255, 255, 0.5);
}

.bookmark .area a {
    color: rgba(255, 255, 255, 0.7);
    transition: 0.2s;
}

.bookmark .area a:hover {
    color: #FFFFFF;
}

/*EDIT-----------------------------------------*/
.edit {
    line-height: 2em;
}

.edit img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 2em 0;
}

.edit iframe {
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16/9;
}

.edit ol {
    margin-left: 1.2em;
}

.edit table {
    width: 100%;
    min-width: 900px;
}

.edit td,
.edit th {
    border: #BFBFBF 1px solid;
    padding: 10px;
}

.edit .scroll {
    padding-bottom: 70px;
    background: url("../images/scroll_img.png") bottom 20px center no-repeat;
    background-size: auto 30px;
    overflow: auto;
}

/*PAGE_NUMBER-----------------------------------------*/
.page_number {
    font-family: Arial;
    text-align: center;
    color: #FFFFFF;
}

.page_number ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
    overflow: hidden;
    padding-bottom: 5px;
}

.page_number li select {
    cursor: pointer;
    padding: 0 10px 0 0;
}

.page_number li.page_select {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0px 25px 0 20px;
    cursor: pointer;
}

.page_number li.page_select .select_box {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

.page_number li.page_select .select_box:after {
    content: "";
    position: absolute;
    top: 50%;
    border-style: solid;
    border-width: 8px 4px 0 4px;
    border-color: var(--red) transparent transparent transparent;
    margin-top: -4px;
    transition: 0.2s;
}

.page_number a {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #FFFFFF;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    transition: 0.2s;
}

.page_number a:hover {
    background: var(--red);
    border-color: var(--red);
}

.page_number li a:after {
    content: "";
    position: absolute;
    top: 50%;
    border-style: solid;
    border-color: #222222;
    border-width: 0px 1px 1px 0px;
    padding: 5px;
    margin-top: -14%;
    transition: 0.2s;
}

.page_number a:hover:after {
    border-color: #FFFFFF;
}

.page_number li.page_prev a:after {
    right: 32%;
    transform: rotate(135deg);
}

.page_number li.page_next a:after {
    left: 32%;
    transform: rotate(-45deg);
}

.page_number li select {
    border: none;
    font-family: Arial;
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 500;
    border-radius: 5px;
    background: none;
    text-align-last: center;
    transition: 0.2s;
}

.page_number li .select_box:hover select {
    color: var(--red);
}

.page_number li option {
    color: #222222;
}

.page_number span {
    color: #9E9F9F;
}

/*CONTACT_FORM-----------------------------------------*/
.contact_form {
    background: url("../images/contact_form.jpg") center/cover no-repeat;
    padding: 120px 0;
    background-attachment: fixed;
}

.contact_form .out {
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    gap: 8%;
}

/*CONTACT_FORM_TEXT-----------------*/
.contact_form .text {
    width: 45%;
    color: #FFFFFF;
}

.contact_form .tw {
    color: #FFFFFF;
}

.contact_form ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 90px 0;
}

.contact_form ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: #9F9F9F 1px solid;
}

.contact_form ul li::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 1px;
    background: var(--red);
}

.contact_form .icon {
    width: 100px;
    height: 60px;
    flex-shrink: 0;
    text-align: center;
}

.contact_form .icon img {
    width: 50px;
}

.contact_form .t1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact_form .t2 {
    line-height: 1.5em;
}

/*CONTACT_FORM_TABLE-----------------*/
.contact_form form {
    width: 47%;
}

.contact_form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px;
}

.contact_form td {
    position: relative;
    background: #FFFFFF;
    height: 60px;
    vertical-align: middle;
}

.contact_form td:first-child {
    width: 4em;
    padding-left: 1em;
    border-radius: 5px 0 0 5px;
    position: relative;
}

.contact_form td:last-child {
    padding: 0 1em;
    border-radius: 0 5px 5px 0;
}

.contact_form input[type="text"],
.contact_form select,
.contact_form textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    box-sizing: border-box;
    color: #222222;
    display: block;
}

.contact_form select {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 3l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right center / 12px;
    cursor: pointer;
}

.contact_form .message td {
    height: auto;
    padding-top: 1em;
    padding-bottom: 1em;
    vertical-align: top;
}

.contact_form .message td:nth-child(2) {
    padding: 13px 0 1em;
}

.contact_form textarea {
    height: 180px;
    resize: none;
    padding: 0 1em;
}

.contact_form .captcha td:last-child {
    background: none;
    padding: 0;
    display: flex;
    height: 60px;
}

.contact_form .captcha input[type="text"] {
    flex-grow: 1;
    background: #FFFFFF;
    padding: 0 1em;
    height: 100%;
}

.contact_form .captcha img {
    width: 125px;
    height: 100%;
    background: #666666;
    border-radius: 0 5px 5px 0;
    flex-shrink: 0;
    object-fit: cover;
}

.contact_form .submit td {
    background: none;
    text-align: center;
    padding-top: 1em;
}

.contact_form input[type="submit"] {
    width: 250px;
    height: 60px;
    background: var(--red);
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.contact_form input[type="submit"]:hover {
    background: #CC0000;
}

@media screen and (max-width: 1300px) and (min-width: 1001px) {
    .contact_form .en {
        font-size: min(67px, 4.6vw);
    }
}

.contact_form form tr:has(.nofill) {
    outline: var(--red) 1px solid;
    box-shadow: 0px 0px 5px var(--red);
    border-radius: 5px;
}

.contact_form form .nofill:before {
    position: absolute;
    top: -28px;
    right: 10px;
    z-index: 1;
    color: #FFFFFF;
    padding: 8px 10px;
    background: var(--red);
    border-radius: 5px 5px 0 0;
    font-size: 12px;
    line-height: 1em;
    white-space: nowrap;
    pointer-events: none;
}

.contact_form form .nofill:before {
    content: "此欄為必填";
}

/*FOOTER-----------------------------------------*/
.footer {
    color: #FFFFFF;
}

.footer .out {
    max-width: 1200px;
}

/*FOOTER_TOP-----------------*/
.footer .top {
    background: #000000;
    padding: 80px 0;
}

.footer .top .out {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.footer .menu {
    display: flex;
    justify-content: flex-start;
    gap: 70px;
}

.footer .menu .list>div {
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
}

.footer .menu .list ul {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.footer .menu .list:last-child ul {
    display: block;
    column-count: 2;
    column-gap: 50px;
}

.footer .menu .list:last-child ul li {
    break-inside: avoid;
    margin-bottom: 1em;
}

.footer .menu .list:last-child ul li:last-child {
    margin-bottom: 0;
}

.footer .menu .list ul li a {
    color: #999999;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
}

.footer .menu .list ul li a:hover {
    color: #FFFFFF;
}

/*FOOTER_LOGO-----------------*/
.footer .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer .logo img {
    width: 350px;
    margin-bottom: 30px;
}

.footer .logo ul {
    display: flex;
    gap: 15px;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.footer .logo ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    transition: 0.2s;
    overflow: hidden;
}

.footer .logo ul li a img {
    width: 100%;
    margin-bottom: 0;
}

.footer .logo ul li a:hover {
    transform: scale(1.1);
}

/*FOOTER_BM-----------------*/
.footer .bm {
    background: #1A1A1A;
    padding: 1em 0;
}

.footer .bm .out {
    color: #B4B4B5;
    line-height: 1.7em;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .footer .menu {
        gap: 35px;
    }

    .footer .menu .list:last-child ul {
        column-gap: 35px;
    }

    .footer .logo img {
        width: 300px;
    }
}

/*FOOTER_FLOW-----------------*/
.footer .flow {
    position: fixed;
    top: 50%;
    right: 25px;
    z-index: 9;
    width: 60px;
    transform: translateY(-50%);
}

.footer .flow li {
    margin-bottom: 8px;
}

.footer .flow li a {
    display: block;
    transition: 0.2s;
}

.footer .flow li a img {
    width: 100%;
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
}

.footer .flow li a:hover {
    transform: scale(1.1);
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px) {
    /*HOME-----------------------------------------*/

    /*HOME_S1-----------------*/
    .home .s1 .splide__pagination {
        bottom: 20px;
    }

    .home .s1 .splide__pagination__page {
        width: 30px;
    }

    .home .s1 .splide__pagination__page.is-active {
        transform: scaleY(2);
    }

    .home .s1 .pc {
        display: none;
    }

    .home .s1 .mb {
        display: block;
    }

    /*HOME_S2-----------------*/
    .home .s2 {
        background-attachment: scroll;
    }

    /*HOME_S3-----------------*/
    .home .s3 {
        padding-top: 0;
    }

    .home .s3 .out {
        height: auto;
        padding: 0;
    }

    .home .s3 .text {
        width: auto;
        max-width: none;
        padding: 0 6% 60px;
    }

    .home .s3 .t1 {
        margin: 60px 0;
    }

    .home .s3 .right {
        display: block;
        position: static;
        width: 94%;
        margin-left: 6%;
    }

    .home .s3 ul li {
        border-radius: 7vw 0 7vw;
        font-size: 3vw;
    }

    /*HOME_S4-----------------*/
    .home .s4 {
        padding: 60px 0 220px;
        background-attachment: scroll;
    }

    .home .s4 .splide__arrows {
        position: absolute;
        right: 0;
        left: 0;
        top: auto;
        bottom: -70px;
        display: flex;
        justify-content: space-between;
    }

    .home .s4 .splide__arrow {
        width: 30px;
        height: 30px;
    }

    .home .s4 .top a {
        position: absolute;
        bottom: -160px;
        left: 50%;
        transform: translateX(-50%);
    }

    .home .s4 .splide__slide .text {
        padding: 30px;
    }

    /*HOME_S5-----------------*/
    .home .s5 {
        padding: 60px 0 120px;
    }

    .home .s5 .splide {
        padding: 0;
    }

    .home .s5 .video-title {
        font-size: 16px;
        padding: 15px 20px;
    }

    .home .s5 .splide__arrows {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: -30px;
    }

    .home .s5 .splide__arrow {
        width: 30px;
        height: 30px;
    }

    .home .s5 .splide__pagination {
        bottom: -80px;
    }

    /*ABOUT-----------------------------------------*/

    /*ABOUT_S2-----------------*/
    .about .s2 .out {
        height: auto;
        aspect-ratio: 1/1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .about .s2 .en {
        margin-top: 0;
    }

    /*ABOUT_S3-----------------*/
    .about .s3 .out {
        height: auto;
    }

    .about .s3 .text {
        padding-right: 0;
        display: block;
        width: auto;
        max-width: none;
    }

    .about .s3 .en {
        font-size: min(48px, 7vw);
        margin-top: 60px;
    }

    .about .s3 .t2 {
        font-size: min(53px, 6vw);
    }

    .about .s3 .right {
        flex-direction: row;
        margin-top: 40px;
    }

    .about .s3 .right li {
        font-size: min(85px, 16vw);
    }

    .about .s3 .pc {
        display: none;
    }

    .about .s3 .mb {
        position: relative;
        z-index: 1;
        bottom: -1px;
        display: block;
        width: 100%;
        margin-top: 50px;
    }

    /*ABOUT_S4-----------------*/
    .about .s4 {
        padding: 80px 0 130px;
        background-attachment: scroll;
    }

    .about .s4 .out {
        height: auto;
        display: block;
    }

    .about .s4 ul {
        max-width: none;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /*ABOUT_S5-----------------*/
    .about .s5 {
        padding: 0;
        margin-top: -43px;
    }

    .about .s5 .out {
        padding: 0;
    }

    .about .s5 .box {
        border-radius: 0;
        padding: 60px 9vw 20px;
    }

    /*NEWS-----------------------------------------*/

    /*NEWS_S1-----------------*/
    .news .s1:after {
        display: none;
    }

    .news .s1 {
        padding-bottom: 0 !important;
    }

    .news .s1 .tab {
        position: absolute;
        top: 130px;
        left: 50%;
        margin-left: -130px;
        z-index: 5;
        width: 260px;
        padding-top: 0;
    }

    .news .s1 .tab .mb {
        display: block;
        position: relative;
        line-height: 54px;
        border: #B4B4B5 1px solid;
        text-align: center;
        cursor: pointer;
        background: linear-gradient(#E4E4E4, #FFFFFF);
        font-weight: 700;
        border-radius: 10px;
    }

    .news .s1 .tab .mb.active {
        border-radius: 10px 10px 0 0;
    }

    .news .s1 .tab .mb:after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        border-style: solid;
        border-width: 6px 4px 0 4px;
        border-color: #222 transparent transparent transparent;
        margin-top: -3px;
        transition: 0.2s;
    }

    .news .s1 .tab .mb.active:after {
        transform: rotate(180deg);
    }

    .news .s1 .tab .out {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        border: #B4B4B5 1px solid;
        border-top: none;
        box-sizing: border-box;
        transform-origin: top;
        transform: scaleY(0);
        transition: transform 0.2s;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 0;
        border-radius: 0 0 10px 10px;
    }

    .news .s1 .tab .mb.active+.out {
        transform: scaleY(1);
    }

    .news .s1 .tab .out li {
        border-bottom: #EDEDED 1px solid;
    }

    .news .s1 .tab .out li.active a {
        padding-right: 0;
        border: none;
    }

    .news .s1 .tab .out li:last-child {
        border-bottom: none;
    }

    .news .s1 .tab .out li a {
        display: block;
        font-size: 16px;
        color: #222 !important;
        text-align: center;
        padding: 1.2em 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .news .s1 .tab .out li.active a,
    .news .s1 .tab .out li a:hover {
        color: var(--red) !important;
        background: #FFFFFF;
        box-shadow: none;
    }

    .news .s1 .tab .out li.active a:after {
        display: none;
    }

    /*NEWS_S2-----------------*/
    .news .s2,
    .news .in2 {
        padding: 190px 0 60px;
        background-attachment: scroll;
    }

    .news .s2 .list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px 3vw;
    }

    .news .s2 .list li a {
        border-radius: 2vw;
    }

    .news .s2 .list li .text {
        padding: 4vw;
    }

    .news .s2 .list li .t1 {
        font-size: 16px;
    }

    .news .s2 .list li .t2 {
        font-size: 14px;
        line-height: 1.8em;
        margin-bottom: 20px;
    }

    .news .s2 .list li .more {
        padding: 8px 16px;
        font-size: 8px;
    }

    /*NEWS_IN2-----------------*/
    .news.in .in2 .box {
        padding: 40px 6vw;
        border-radius: 3vw;
    }

    .news.in .in2 .t1 {
        font-size: 24px;
        margin-bottom: 30px;
        padding-bottom: 20px;
    }

    /*PRODUCT-----------------------------------------*/

    /*PRODUCT_S1-----------------*/
    .product .s1 {
        padding-bottom: 0;
    }

    /*PRODUCT_LINK*/
    .product .s1 .link {
        padding: 0;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .product .s1 .link .mb {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 700;
        background: #F7F7F7;
        padding: 1em 6%;
    }

    .product .s1 .link .mb:after {
        content: "";
        border-style: solid;
        border-width: 6px 4px 0 4px;
        border-color: var(--red) transparent transparent transparent;
    }

    .product .s1 .link .out {
        display: none !important;
    }

    .product .s1 .t3 {
        font-size: 24px;
        margin: 60px 0 40px;
        padding: 0 20px;
    }

    .search .s1 .t3 {
        margin-bottom: 60px;
    }

    /*PRODUCT_CHOOSE*/
    .product .s1 .choose {
        padding: 80px 0 0;
        gap: 30px;
    }

    /* Fancybox Mobile Styles for #links */
    .fancybox-content {
        background: #F2F2F2 !important;
        border-radius: 15px !important;
        padding: 40px 25px !important;
        width: calc(100% - 40px) !important;
        max-width: 450px !important;
        overflow: visible !important;
        margin: 50px auto 20px !important;
        box-sizing: border-box !important;
    }

    /* Custom Close Button */
    .fancybox-close-small {
        background: var(--red) !important;
        border-radius: 50% !important;
        color: #FFFFFF !important;
        top: -50px !important;
        right: 0 !important;
        width: 40px !important;
        height: 40px !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fancybox-close-small svg {
        width: 70% !important;
        height: 70% !important;
        color: #FFFFFF !important;
        transition: 0.2s;
    }

    .fancybox-close-small svg:hover {
        transform: rotate(90deg);
    }

    .fancybox-close-small svg path {
        fill: currentColor !important;
        stroke: currentColor !important;
        stroke-width: 1px !important;
    }

    #links {
        width: 100%;
        max-width: 500px;
        padding: 0;
    }

    #links>li {
        margin-bottom: 30px;
        padding-bottom: 25px;
        border-bottom: 1px solid #D9D9D9;
    }

    #links>li:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #links span {
        display: block;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    #links li ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #links a {
        display: block;
        font-size: 16px;
        padding: 0.5em 0;
        text-decoration: none;
        transition: 0.2s;
    }

    #links a:hover {
        color: var(--red);
    }

    /*PRODUCT_S2-----------------*/
    .product .s2 {
        padding: 100px 0 60px;
        background-attachment: scroll;
    }

    .product .s2 .list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px 3vw;
        margin-bottom: 60px;
    }

    .product .s2 .list li a {
        border-radius: 2vw;
    }

    .product .s2 .list .t1 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .product .s2 .list .t2 {
        font-size: 14px;
    }

    .product .s2 .list .more {
        font-size: 8px;
    }

    /*PRODUCT_IN-----------------------------------------*/

    /*PRODUCT_IN2-----------------*/
    .product.in .in2 {
        background-attachment: scroll;
    }

    .product.in .in2 .out {
        display: block;
    }

    .product.in .in2 .left {
        width: 100%;
        flex-direction: column-reverse;
        gap: 20px;
        margin-bottom: 60px;
    }

    .product.in .in2 .sm {
        width: 100%;
    }

    .product.in .in2 .big {
        aspect-ratio: auto;
        width: 100%;
    }

    .product.in .in2 .right {
        padding-top: 0;
    }

    .product.in .in2 .t1 {
        font-size: 26px;
    }

    /*PRODUCT_IN3-----------------*/
    .product.in .in3 .edit {
        padding: 60px 0 40px;
    }

    /*CONTACT-----------------------------------------*/

    /*CONTACT_FROM_BM-----------------*/
    .contact .contact_form .bm ul {
        grid-template-columns: repeat(auto-fit, minmax(auto, 290px));
        gap: 35px 50px;
        padding: 35px 20px;
    }

    .contact .contact_form .bm li {
        display: block;
        padding-left: 55px;
        position: relative;
        white-space: normal;
    }

    .contact .contact_form .bm li img {
        position: absolute;
        left: 0;
        top: 0;
        height: 35px;
        width: auto;
    }

    .contact .contact_form .bm li span {
        display: block;
        font-size: 17px;
        margin-bottom: 10px;
    }

    /*CONTACT_MAP-----------------*/
    .contact .map iframe {
        height: 450px;
        border-radius: 25px;
    }

    .contact .map .more {
        margin: 0 auto;
    }

    /*COMMON--------------------------------------------------------------------*/

    /*HEADER-----------------------------------------*/
    .header .out {
        height: 90px;
        padding: 0 20px;
    }

    .header .logo {
        max-width: 250px;
        left: 20px;
    }

    .header .pc {
        display: none;
    }

    /*HEADER_MB_BUTTON-----------------*/
    .header .mb_bt,
    .header .mb {
        display: block;
    }

    .header .mb_bt {
        position: absolute;
        top: 50%;
        right: 20px;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        text-align: left;
        cursor: pointer;
    }

    .header .mb_bt span {
        height: 1px;
        width: 40px;
        position: absolute;
        top: 20px;
        right: 0;
        background: #FFFFFF;
        transition: 0.3s;
        display: block;
    }

    .header .mb_bt span:before,
    .header .mb_bt span:after {
        content: "";
        height: 1px;
        position: absolute;
        right: 0;
        background: #FFFFFF;
        transition: 0.3s;
    }

    .header .mb_bt span:before {
        top: -8px;
        width: 40px;
    }

    .header .mb_bt span:after {
        top: 8px;
        width: 40px;
    }

    .header .mb_bt:hover span,
    .header .mb_bt:hover span:before,
    .header .mb_bt:hover span:after {
        width: 40px;
    }

    .header .mb_bt.active span:before {
        width: 40px;
        top: 0;
        transform: rotate(45deg);
    }

    .header .mb_bt.active span:after {
        width: 40px;
        top: 0;
        transform: rotate(-45deg);
    }

    .header .mb_bt.active:hover span {
        width: 40px;
        transform: rotate(-90deg);
    }

    .header .mb_bt.active span {
        background: none;
    }

    /*HEADER_SEARCH-----------------*/
    .header .search {
        position: absolute;
        top: 25px;
        left: 40px;
        right: 40px;
    }

    .header .search input[type="text"] {
        width: 100%;
        height: 50px;
        padding: 0 50px 0 1em;
    }

    .header .search input[type="submit"] {
        width: 50px;
        height: 50px;
        background-size: 15px auto;
    }

    /*HEADER_MENU-----------------*/
    .header .mb {
        position: fixed;
        top: 90px;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow-y: auto;
        background: url("../images/header_mb.jpg") top center/cover no-repeat;
        transform: translateX(100%);
        transition: 0.3s ease-in-out;
        -webkit-overflow-scrolling: touch;
    }

    .header .mb.active {
        transform: translateX(0);
    }

    .header .mb .menu {
        padding: 80px 40px 100px;
    }

    .header .mb .menu .list>a,
    .header .mb .menu .list span {
        display: block;
        font-size: 20px;
        color: #FFFFFF;
        padding: 1em 0;
        position: relative;
        cursor: pointer;
        border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
        transition: 0.2s;
    }

    /* .header .mb .menu .list span.active {
        color: var(--red);
    } */

    .header .mb .menu .list span:after {
        top: 50%;
        margin-top: -5px;
    }

    .header .mb .menu .list span:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 5px;
        height: 5px;
        border-style: solid;
        border-color: #FFFFFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .header .mb .menu .list span.active:after {
        border-color: var(--red);
    }

    .header .mb .menu .list ul {
        display: none;
        padding-top: 5px;
    }

    .header .mb .menu .list.megalist span {
        pointer-events: none;
    }

    .header .mb .menu .list.megalist span:after {
        display: none;
    }

    .header .mb .menu .list.megalist .sub {
        display: block;
        padding: 0 0 0 1em;
    }

    .header .mb .menu .sub>ul {
        display: block;
    }

    .header .mb .menu .list .sub .sublist>div {
        color: #FFFFFF;
        padding: 1em 0;
        font-size: 18px;
        position: relative;
        cursor: pointer;
        transition: 0.2s;
    }

    .header .mb .menu .list .sub .sublist>div:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 5px;
        height: 5px;
        border-style: solid;
        border-color: #FFFFFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        margin-top: -5px;
        transition: 0.2s;
    }

    /* .header .mb .menu .list .sub .sublist>div:hover,
    .header .mb .menu .list .sub .sublist>div.active {
        color: var(--red);
    } */

    .header .mb .menu .list .sub .sublist>div.active:after {
        border-color: var(--red);
        transform: rotate(-135deg);
        margin-top: 0;
    }

    .header .mb .menu .list .sub .sublist ul {
        display: none;
    }

    .header .mb .menu .list ul a {
        display: block;
        color: #CCCCCC !important;
        padding: 0.8em 0 0.8em 1em;
        transition: 0.2s;
    }

    .header .mb .menu .list ul li a:hover,
    .header .mb .menu .list ul li a.active {
        color: var(--red);
    }

    /* .header .mb .menu .list span:hover,
    .header .mb a:hover {
        color: #CC0000 !important;
    } */

    /*BOOKMARK-----------------------------------------*/
    .bookmark .area {
        display: none;
    }

    /*CONTACT_FORM-----------------------------------------*/
    .contact_form {
        padding: 60px 0;
        background-attachment: scroll;
    }

    .contact_form .out {
        flex-direction: column;
        gap: 60px;
    }

    .contact_form .text,
    .contact_form form {
        width: 100%;
    }

    .contact_form .tw {
        margin-bottom: 40px;
    }

    .contact_form ul {
        display: flex;
        gap: 40px;
        margin: 60px 0 0;
    }

    .contact_form ul li::after,
    .contact_form .icon {
        width: 80px;
    }

    /*FOOTER-----------------------------------------*/

    /*FOOTER_TOP-----------------*/
    .footer .top {
        padding: 40px 0;
    }

    .footer .top .out {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer .menu {
        display: none;
    }

    .footer .menu .list>div::after {
        margin: 8px auto 0;
    }

    /*FOOTER_FLOW-----------------*/
    .footer .flow {
        display: none;
    }
}