/* banner-content */
.banner-content_img {
    height: 400px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

.banner-content {
    padding: 80px 0 0 0;
}

.chemistry_rows {
    padding-top: 0;
}

.banner-content.second_type {
    padding: 100px 0 100px 0;
}

.chemistry_cont {
    z-index: 11;
    max-width: 100%;
}

.chemistry_cont .cont-title {
    font-size: 30px;
    letter-spacing:1px;
}

.chemistry_cont .cont-en {
    line-height: 1.1;
    letter-spacing: 1px;
}

.chemistry_cont .cont-text {
    letter-spacing: 2px;
}

.chemistry_cont .cont-title-en .cont-title-en-title1 {
    left: 0;
    top: 0;
}

.chemistry_cont .cont-title-en .cont-title-en-title2 {
    left: 0;
    top: 0;
}

/*  */
@keyframes fly-in {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.cont-title-en-title1 span,
.cont-title-en-title2 span {
    display: inline-block;
    opacity: 0;
    animation: fly-in 1.5s ease-out forwards;
}

.cont-title-en-title1 span:nth-child(1) {
    animation-delay: 0s;
}

.cont-title-en-title1 span:nth-child(2) {
    animation-delay: 0.5s;
}

.cont-title-en-title1 span:nth-child(3) {
    animation-delay: 0.8s;
}

.cont-title-en-title1 span:nth-child(4) {
    animation-delay: 1s;
}

.cont-title-en-title1 span:nth-child(5) {
    animation-delay: 1.2s;
}

/* 按需添加更多 nth-child 規則 */

.cont-title-en-title2 span:nth-child(1) {
    animation-delay: 0s;
}

.cont-title-en-title2 span:nth-child(2) {
    animation-delay: 0.5s;
}

.cont-title-en-title2 span:nth-child(3) {
    animation-delay: 0.8s;
}

.cont-title-en-title2 span:nth-child(4) {
    animation-delay: 1s;
}

.cont-title-en-title2 span:nth-child(5) {
    animation-delay: 1.2s;
}

.cont-title-en-title2 span:nth-child(6) {
    animation-delay: 1.4s;
}
.chemistry_cont .cont-title-en {
    font-size: 70px;
    line-height: 1.1;
    letter-spacing: 2px;
}

/* BANNER========= */
.product_banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
}

.product_banner span {
    display: block;
    position: absolute;
    width: 100%;
    height: 85vh;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0px;
    left: 0px;
}

.product_banner span.product_banner_font {
    top: 180px;
    left: 0;
    z-index: 6;
    display: inline-block;
    width: 100%;
    width: auto;
    height: auto;
    z-index: 10;
}

.product_banner span.product_banner_font abbr {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
}

.product_banner span.product_banner_font abbr.cont_first_txt {
    font-size: 38px;
    line-height: 40px;
    letter-spacing: 3.5px;
    margin-bottom: 7px;
    text-shadow: 1px 1px 6px rgba(70, 183, 215, 0.8), 1px 1px 6px rgba(70, 183, 215, 0.9), 0px 0px 8px rgba(255, 255, 255, 0.8), 0px 0px 8px rgba(255, 255, 255, 0.8), 0px 0px 8px rgba(255, 255, 255, 0.8);
    background-repeat: no-repeat;
}

.product_banner span.product_banner_font abbr.cont_last_txt.top_text {
    font-size: 40px;
    line-height: 40px;
}

.product_banner span.product_banner_font abbr.cont_last_txt {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 3px;
    margin-top: 8px;
    text-shadow: 1px 1px 8px rgba(70, 183, 215, 0.8), 1px 1px 8px rgba(70, 183, 215, 0.9), 0px 0px 8px rgba(255, 255, 255, 0.8), 0px 0px 8px rgba(255, 255, 255, 0.8);
}

.product_banner span.product_banner_model abbr {
    display: block;
    position: relative;
    width: 100%;
    height: 85vh;
    background-position: center top;
    background-repeat: no-repeat;
    top: 0px;
    left: 0px;
    background-size: cover;
    transition: transform 0.8s ease-out;
    /* 設置變換的過渡效果，持續時間2秒 */
}

.product_banner_border_last {
    z-index: 7;
    margin-left: 0px;
}

.product_banner_border_last abbr {
    width: 700px;
    height: 340px;
    display: block;
    margin: 0 auto;
    border: #fff solid 5px;
    margin-top: 11%;
    background-color: rgba(13, 153, 180, 0.4);
    box-shadow: 0px 0px 42px 41px rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

/* BANNER==================end */
.branch-section {
    padding: 20px 0 0 0;
    background: #fff;
}

.branch-section.no_line {
    padding: 110px 0 0 0;
}



.branch-section.no_line:before {
    display: none;
}

.branch-section.no_line:after {
    display: none;
}

/* NETURAL PRODUCTS========= */
.netural_products {
    height: 100%;
    position: relative;
    display: block;
    padding: 70px 0 0 0;
    z-index: 10;
}

.netural_pass {
    display: block;
    width: 62%;
    margin: 0 auto 28px auto;
}

.netural_pass span {
    display: block;
}

.netural_pass span.pass_top_dots {
    font-size: 44px;
    line-height: 44px;
    margin-bottom: 15px;
}

.netural_pass span.pass_last_txt {
    font-size: 1.1rem;
    letter-spacing: 3px;
    line-height: 28px;
    position: relative;
    z-index: 1;
    line-height: 1.8;
}

.netural_pass span.pass_flower_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
}

.netural_pass span.pass_flower_bg abbr {
    background-size: 335px 388px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    display: block;
    width: 100%;
    height: 400px;
    opacity: 0.3;
}

.netural_pass span.pass_flower_bg abbr.pass_flower_01 {
    background-position: center -18px;
    background-image: url(https://shushimei-hecp.niichigroup.com/images/bhairer_flower_01.png?v=20240915);
}

.netural_pass span.pass_flower_bg abbr.pass_flower_02 {
    background-position: center top;
    background-image: url(https://shushimei-hecp.niichigroup.com/images/bhairer_flower_02.png?v=20240915);
}

.netural_pass span.pass_flower_bg abbr.pass_flower_03 {
    background-position: center top;
    background-image: url(https://shushimei-hecp.niichigroup.com/images/bhairer_flower_03.png?v=20240915);
}

.chemistry_rows {
    position: relative;
    margin-top: 0px;
    display: block;
    padding: 0 20px;
}

.firstcharacter {
    float: left;
    font-size: 58px;
    line-height: 52px;
    padding-top: 0px;
    padding-right: 8px;
    padding-left: 3px;
}

.chemistry_bg {
    display: block;
    width: 100%;
    height: 315px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.chemistry_cont {
    display: block;
    line-height: 18px;
    font-size: 16px;
    letter-spacing: 0.5px;
    background: #fff;
    position: absolute;
    left: -6%;
    top: 30px;
    padding: 40px 30px 40px 50px;
}

.chemistry_cont span u {
    font-weight: bold;
}

.chemistry_cont span b {
    font-weight: 100;
    display: block;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* #2 */
.chemistry_bg_second {
    display: block;
    width: 100%;
    height: 355px;
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    left: 0;
    border: 1px solid #eee;
}

.chemistry_bg_border {
    display: block;
    width: 490px;
    height: 295px;
    border: 1px solid #7f7b7c;
    position: absolute;
    z-index: 1;
    right: 4px;
    top: -17px;
}

.chemistry_cont_second {
    display: block;
}

.chemistry_cont_second span {
    display: block;
}

.chemistry_cont_second span.cont_title {
    font-size: 1.5rem;
    padding-right: 80px;
    letter-spacing: 2px;
    margin-top: -5px;
}

.chemistry_cont_second span.cont_line {
    border-bottom: 1px #dfdfdf solid;
    display: block;
    width: 44px;
    margin: 15px 0;
}

.chemistry_cont_second span.cont_txt {
    font-size: 1.1rem;
    letter-spacing: 1px;
    position: relative;
    left: 0px;
    top: 0px;
    padding-right: 5%;
}

.chemistry_cont_second span.cont_txt u {
    font-weight: bold;
    color: #000000;
}

.chemistry_cont_second span.cont_txt b {
    font-weight: 100;
    display: block;
    font-size: 15px;
    letter-spacing: 1px;
}

/* #3 */
.chemistry_bg_third {
    display: block;
    width: 100%;
    height: 315px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.chemistry_cont_third span {
    /*! display: block; */
}

.chemistry_cont_third span.cont_title,
.chemistry_cont_third h2.cont_title {
    font-size: 1.5rem;
    padding-right: 80px;
    letter-spacing: 2px;
    margin-top: 45px;
}
.chemistry_cont_second h2{
    font-size: 1.5rem;
}

.chemistry_cont_third span.cont_line {
    border-bottom: 1px #dfdfdf solid;
    display: block;
    width: 44px;
    margin: 15px 0;
}

.chemistry_cont_third .cont_txt {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    position: relative;
    left: 0px;
    top: 0px;
    padding-right: 10%;
}

.chemistry_cont_third span.cont_txt u {
    font-weight: bold;
    color: #000000;
}

.chemistry_cont_third span.cont_txt b {
    font-weight: 100;
    display: block;
    font-size: 15px;
    letter-spacing: 1px;
}

.chemistry_rows .row .col-md-6 {
    padding-left: 25px;
    padding-right: 25px;
}

.chemistry_decoration {
    background: #645794;
    opacity: 0.2;
    width: 80px;
    height: 300px;
    display: block;
    position: absolute;
    z-index: 3;
    left: 40%;
    top: 112px;
}

.chemistry_decoration_second {
    background: #8b969d;
    opacity: 0.1;
    width: 80px;
    height: 400px;
    display: block;
    position: absolute;
    z-index: 3;
    right: 31%;
    top: 14px;
}

/* NETURAL PRODUCTS==================end */
/* LUXURY========= */
.luxury_box {
    height: 100%;
    position: relative;
    margin-top: 0;
    display: block;
    margin-bottom: 160px;
}

.luxury_banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 80px;
    position: relative;
}

.luxury_banner span {
    display: block;
    position: absolute;
    width: 100%;
    height: 380px;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0px;
    left: 0px;
}

.luxury_banner span.luxury_banner_font {
    z-index: 6;
    width: 100%;
    height: auto;
    position: absolute;
    padding-top: 0%;
}

.luxury_banner span.luxury_banner_font abbr {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    display: block;
}

.luxury_banner span.luxury_banner_font abbr.cont_topline {
    margin-bottom: 14px;
    opacity: 0.3;
    border-top: 1px solid #fff;
    width: 34px;
}

.luxury_banner span.luxury_banner_font abbr.cont_topline:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 108px;
    background: #fff;
    margin: 0 auto;
    opacity: 0.5;
    margin-top: -108px;
}

.luxury_banner span.luxury_banner_font abbr.cont_bottomline {
    margin-top: 20px;
    opacity: 0.3;
    border-top: 1px solid #fff;
    width: 34px;
}

.luxury_banner span.luxury_banner_font abbr.cont_bottomline:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 108px;
    background: #fff;
    margin: 0 auto;
    opacity: 0.5;
    margin-top: 0px;
}

.luxury_banner span.luxury_parallax_first abbr {
    z-index: 1;
    margin: 0 auto;
    width: 100%;
}

.luxury_banner span.luxury_parallax_first abbr.parallax_first1 {
    margin-top: -50px;
    margin-left: 450px;
}

.luxury_banner span.luxury_parallax_first abbr.parallax_first2 {
    margin-top: -110px;
    margin-left: 150px;
}

.luxury_banner span.luxury_parallax_first abbr.parallax_first3 {
    margin-top: -150px;
    margin-left: 850px;
}

.luxury_banner span.luxury_parallax_first abbr img {
    margin: 0 auto;
}


.luxury_banner span.luxury_banner_border abbr {
    width: 520px;
    height: 295px;
    display: block;
    margin: 0 auto;
    border: #fff solid 5px;
    margin-top: 45px;
}

/* 圖層順序變更 */
.luxury_banner span.luxury_parallax_first {
    z-index: 6;
}

/* 圖層順序變更 end */
/* LUXURY==================end */
/* ABOUT US========= */
.aboout_content {
    z-index: 2;
}

.aboout_content_desc {
    display: inline-block;
    width: 100%;
    height: 550px;
    top: 50px;
    left: 0;
    opacity: 0.4;
}

.aboout_content_list {
    margin-top: 50px;
}

.aboout_content_list_title {
    font-size: 1.8rem;
    margin-top: 30px;
}

.aboout_content_list_title .cont_topline {
    display: block;
    opacity: 1;
    border-top: 1px solid #ccc;
    width: 30px;
    margin: auto;
    padding-bottom: 10px;
}

.aboout_content_list_title .cont_topline:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 108px;
    background: #ccc;
    margin: 0 auto;
    opacity: 0.5;
    margin-top: -108px;
}

.aboout_content_list_card {
    width: 100%;
    padding: 15px 15px 5px 15px;
    margin-bottom: 5px;
}

/* ABOUT US==================END */
.aboout_content_list_ecp {
    font-size: 1.1rem;
    padding-left: 18px;
    line-height: 1.8;
}

.aboout_content_list_ecp li {
    margin-bottom: 8px;
    list-style-type: circle;
}

/* 訊號 */
.waves {
    position: absolute;
    top: 50%;
    background-color: rgba(14, 162, 189, 0.8);
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
}

.waves:before {
    position: absolute;
    background-color: rgba(14, 162, 189, 0.7);
    margin-left: -10px;
    margin-top: -10px;
    width: 30px;
    height: 30px;
    content: "";
    display: block;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    animation: wave-animate 3s infinite ease-out;
}

.waves:after {
    position: absolute;
    background-color: rgba(14, 162, 189, 0.7);
    margin-left: -10px;
    margin-top: -10px;
    width: 30px;
    height: 30px;
    content: "";
    display: block;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    opacity: 0;
    animation: wave-animate 3s 1.5s infinite ease-out;
}

@keyframes wave-animate {
    0% {
        transform: scale(0);
        opacity: 1;
        transform-origin: center;
    }

    100% {
        transform: scale(3);
        opacity: 0;
        transform-origin: center;
    }
}



.signal-container {
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 0;
    margin: auto;
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #9b3443;
    opacity: 0.9;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.signal-container.item_type2 {
    top: 220px;
    left: -170px;
    right: 0;
}

.signal-container.item_type3 {
    top: 220px;
    left: -180px;
    right: 0;
}

.signal-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background-color: rgba(14, 162, 189, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: pulse 2s infinite;
    -moz-animation: pulse 2s infinite;
    -o-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

.signal-circle-delay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background-color: rgba(14, 162, 189, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: pulse 2s infinite 1s;
    -moz-animation: pulse 2s infinite 1s;
    -o-animation: pulse 2s infinite 1s;
    animation: pulse 2s infinite 1s;
}

.signal-container_text {
    font-size: 1.1rem;
    font-style: normal;
    position: relative;
    left: 130px;
    top: -115px;
    display: inline-block;
    width: 180px;
    border-radius: 15px;
    text-align: left;
    padding: 2px 0;
}

.dots_before {
    display: inline-block;
    width: 106px;
    height: 1px;
    background: #933f54;
    position: absolute;
    left: 34px;
    top: 30px;
    margin: 0 atuo;
}

.dots_after {
    display: inline-block;
    width: 26px;
    height: 1px;
    background: #933f54;
    position: absolute;
    left: 136px;
    top: 21px;
    transform: rotate(-45deg);
    /* 調整這個值以改變斜線角度 */
}

.dots_after abbr {
    position: absolute;
    top: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
    background-color: #9b3443;
    opacity: 0.9;
    border-radius: 50%;
}

.chemistry_body {
    margin-top: 80px;
    z-index: 3;
}

.chemistry_body_title {
    font-size: 30px;
    margin-bottom: 50px;
}

/* 人體介紹01========= */
.signal-container.item_type1 {
    top: 250px;
    left: 0;
    right: 0;
}

.signal-container.item_type1 .signal-container_text {
    left: 170px;
    top: -85px;
    width: 180px;
}

.signal-container.item_type1 .signal-container_text .container_text_img {
    top: 10px;
    left: 195px;
}

.signal-container.item_type1 .dots_before {
    width: 106px;
    height: 1px;
    left: 34px;
    top: 30px;
}

.signal-container.item_type1 .dots_after {
    width: 26px;
    height: 1px;
    left: 136px;
    top: 21px;
    transform: rotate(-45deg);
    /* 調整這個值以改變斜線角度 */
}

.signal-container.item_type1 .dots_after abbr {
    top: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
}

/* 人體介紹02========= */
.signal-container.item_type2 {
    top: 350px;
    left: -200px;
    right: 0;
}

.signal-container.item_type2 .signal-container_text {
    left: -200px;
    top: -90px;
    width: 180px;
}

.signal-container.item_type2 .signal-container_text .container_text_img {
    top: 10px;
    left: -135px;
}

.signal-container.item_type2 .dots_before {
    width: 106px;
    height: 1px;
    left: -78px;
    top: 30px;
}

.signal-container.item_type2 .dots_after {
    width: 26px;
    height: 1px;
    left: -100px;
    top: 21px;
    transform: rotate(45deg);
    /* 調整這個值以改變斜線角度 */
}

.signal-container.item_type2 .dots_after abbr {
    top: -5px;
    left: -10px;
    width: 10px;
    height: 10px;
}

/* 人體介紹03========= */
.signal-container.item_type3 {
    top: 430px;
    left: 13px;
    right: 0;
}

.signal-container.item_type3 .signal-container_text {
    left: 200px;
    top: 25px;
    width: 180px;
}

.signal-container.item_type3 .signal-container_text .container_text_img {
    top: -10px;
    left: 195px;
}

.signal-container.item_type3 .dots_before {
    width: 136px;
    height: 1px;
    left: 34px;
    top: 30px;
}

.signal-container.item_type3 .dots_after {
    width: 26px;
    height: 1px;
    left: 164px;
    top: 40px;
    transform: rotate(55deg);
    /* 調整這個值以改變斜線角度 */
}

.signal-container.item_type3 .dots_after abbr {
    top: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
}

/* 人體介紹04========= */
.signal-container.item_type4 {
    top: 600px;
    left: 73px;
    right: 0;
}

.signal-container.item_type4 .signal-container_text {
    left: 100px;
    top: 65px;
    width: 180px;
}

.signal-container.item_type4 .signal-container_text .container_text_img {
    top: 10px;
    left: 195px;
}

.signal-container.item_type4 .dots_before {
    width: 76px;
    height: 1px;
    left: 34px;
    top: 30px;
}

.signal-container.item_type4 .dots_after {
    width: 26px;
    height: 1px;
    left: 104px;
    top: 40px;
    transform: rotate(55deg);
    /* 調整這個值以改變斜線角度 */
}

.signal-container.item_type4 .dots_after abbr {
    top: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
}

/* 人體介紹05========= */
.signal-container.item_type5 {
    top: 360px;
    left: -65px;
    right: 0;
}

.signal-container.item_type5 .signal-container_text {
    left: -140px;
    top: 160px;
    width: 140px;
}

.signal-container.item_type5 .signal-container_text .container_text_img {
    top: -5px;
    left: -135px;
}

.signal-container.item_type5 .dots_before {
    width: 26px;
    height: 1px;
    left: 6px;
    top: 30px;
}

.signal-container.item_type5 .dots_after {
    width: 150px;
    height: 1px;
    left: -117px;
    top: 88px;
    transform: rotate(-50deg);
    /* 調整這個值以改變斜線角度 */
}

.signal-container.item_type5 .dots_after abbr {
    top: -5px;
    left: -10px;
    width: 10px;
    height: 10px;
}

@keyframes pulse {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
    }

    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

/* hecp_content */
.hecp_content{
    padding: 50px 0 100px 0;
}