@charset "UTF-8";

/*====================================================================================================*/
/*============================================ font start ============================================*/
/*====================================================================================================*/
/****NotoSansTC****/
@font-face {
    font-family: 'NotoSansTC-L';
    font-display: swap;
    src: local('Noto Sans TC Light'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Light.woff2') format('woff2'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Light.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansTC-T';
    font-display: swap;
    src: local('Noto Sans TC Thin'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Thin.woff2') format('woff2'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansTC';
    font-display: swap;
    src: local('Noto Sans TC Regular'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Regular.woff2') format('woff2'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansTC-M';
    font-display: swap;
    src: local('Noto Sans TC Medium'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Medium.woff2') format('woff2'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansTC-B';
    font-display: swap;
    src: local('Noto Sans TC Bold'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Bold.woff2') format('woff2'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansTC-BL';
    font-display: swap;
    src: local('Noto Sans TC Black'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Black.woff2') format('woff2'),
        url('../css/fonts/NotoSansTC/NotoSansTC-Black.otf') format('opentype');
}

/****Poppins****/
@font-face {
    font-family: 'Poppins-T';
    font-display: swap;
    src: local('Poppins Thin'),
        url('../css/fonts/Poppins/Poppins-Thin.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-L';
    font-display: swap;
    src: local('Poppins Light'),
        url('../css/fonts/Poppins/Poppins-Light.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-display: swap;
    src: local('Poppins Regular'),
        url('../css/fonts/Poppins/Poppins-Regular.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-M';
    font-display: swap;
    src: local('Poppins Medium'),
        url('../css/fonts/Poppins/Poppins-Medium.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-SB';
    font-display: swap;
    src: local('Poppins SemiBold'),
        url('../css/fonts/Poppins/Poppins-SemiBold.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-B';
    font-display: swap;
    src: local('Poppins Bold'),
        url('../css/fonts/Poppins/Poppins-Bold.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-B:';
    font-display: swap;
    src: local('Poppins Black'),
        url('../css/fonts/Poppins/Poppins-Black.woff2') format('woff2'),
        url('../css/fonts/Poppins/Poppins-Black.ttf') format('truetype');
}

/*==========================*/
/*======== font end ========*/
/*==========================*/




/*====================================================================================================*/
/*============================================ base start ============================================*/
/*====================================================================================================*/
:root {
    --mainColor: #1b96d5;
    --textColor: #1c1c1c;
    --bgColor: #eef3f7;
    --border: 1px solid rgba(177, 177, 177, .2);
}

* {
    position: relative;
    margin: 0;
    padding: 0;
    font-weight: normal;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

body {
    font-family: 'NotoSansTC', 'Microsoft JhengHei', 'PingFang', sans-serif;
    color: var(--textColor);
    overflow: visible;
}

h1, h2, h3, h4, h5, h6 {font-family: 'NotoSansTC', 'Microsoft JhengHei', 'PingFang', sans-serif;}

ul,
ol {
    margin: 0;
}

p,
td,
li,
label {
    font-size: inherit;
    line-height: inherit;
    font-weight: normal;
}

p {
    margin: 0;
}

label {
    margin: 0;
}

a {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

a:hover,
a:active,
a:visited,
a:focus {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
}

address {
    font-style: normal;
}

img {
    display: block;
    /*width: 100%;*/
    max-width: 100%;
    height: auto;
}

img.c-img-load {
    background: url(../images/common/ajax-loader.gif) center no-repeat;
    background-size: 25px 25px;
}

video {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

button:focus-visible {
    outline: none;
}

fieldset {
    border: none;
}

select:focus,
input:focus,
textarea:focus,
button:focus {
    outline: none;
}

iframe {
    width: 100%;
    border: none;
}

.slick-track * {
    outline: none;
}

.slick-list,
.slick-track {
    min-width: 100%;
}

/**IOS style remove**/
select,
input,
textarea {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select,
input,
textarea {
    display: block;
    width: 100%;
    height: 60px;
    padding: 18px 25px;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    border: 1px solid #a4a4a4;
    background: none;
}

select {
    background: url(../images/common/icon_arrow_bottom_gray.svg) calc(100% - 25px) center no-repeat;
    background-size: 14px auto;
}

textarea {
    min-height: 140px;
}

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

textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--mainColor) #ddd;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-o-clear {
    display: none;
}

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

input[type="checkbox"] {
    background: #fff;
    border: none;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 15px 0 0;
    cursor: pointer;
    flex: 0 0 auto;
}

input[type="checkbox"]:checked {
    background: url(../images/common/icon_check_white.svg) no-repeat center/contain var(--mainColor);
    background-size: 60% auto;
}

input[type="checkbox"]+span,
input[type="radio"]+span {
    font-size: 15px;
    font-family: 'NotoSansTC-M';
    flex: 0 0 auto;
}

input[type="radio"] {
    background: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    margin: 0 15px 0 0;
    cursor: pointer;
}

input[type="radio"]:checked {
    background: radial-gradient(circle, rgba(255, 255, 255, 1) calc(30% - .5px), var(--mainColor) 30%);
}

/**IE remove arrow**/
select::-ms-expand {
    display: none;
}

sup,
sub {
    font-size: .5em;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
}

sup {
    top: -.75em;
}

sub {
    top: .75em;
}

math {
    font-size: 24px;
    line-height: inherit;
    color: inherit;
    font-family: 'Cambria Math';
}

/****scroll style****/
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--mainColor) #ddd;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 6px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--mainColor);
}

body::before,
body::after {
    content: '';
    position: absolute;
    display: block;
    width: 1132px;
    height: 1132px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #209cff 0%, rgba(104, 224, 207, 0) 70%);
    opacity: .3;
    pointer-events: none;
    z-index: -10;
    overflow: hidden;
}

body::before {
    display: none;
    top: -556px;
    right: min(-135px, calc(50% - 1000px));
}

body::after {
    top: -129px;
    left: min(-497px, calc(50% - 1000px));
}

.imgCenter, .imgCenter a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 10; overflow: hidden;}
.imgCenter img {max-height: 100%;}

/*==========================*/
/*======== base end ========*/
/*==========================*/




/*====================================================================================================*/
/*=========================================== title start ============================================*/
/*====================================================================================================*/
/****title01****/
.c-title01 {
    display: inline-block;
    width: auto;
    max-width: 100%;
    font-size: 60px;
    line-height: 1.1;
    color: transparent;
    font-family: 'Poppins-B', 'NotoSansTC-M';
    background: linear-gradient(to right, #1b96d5 30%, #055eba 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

/****title02****/
.c-title02 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 20px 0;
    border-bottom: 1px solid rgba(221, 221, 221, .4);
}

.c-title02::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: 80px;
    height: 2px;
    background: var(--mainColor);
}

.c-title02__main {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 20px 0 0;
    font-size: 32px;
    line-height: .7;
    color: var(--textColor);
    font-family: 'Poppins-SB', 'NotoSansTC-B';
    flex: 0 0 auto;
}

.c-title02__sub {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 1;
    color: var(--textColor);
    font-family: inherit;
    flex: 0 0 auto;
}

.c-title02__required {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: auto;
    max-width: 100%;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.c-title02__required::before {
    content: '*';
    position: relative;
    top: .35em;
    padding: 0 8px 0 0;
    font-size: 25px;
    line-height: 1;
    color: var(--mainColor);
    font-family: inherit;
}

/****title03****/
.c-title03 {
    display: block;
    width: 100%;
}

.c-title03__sub {
    display: block;
    width: 100%;
    padding: 0 0 25px 0;
    font-size: 18px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: inherit;
    border-bottom: 1px solid rgba(156, 156, 156, .2);
}

.c-title03__main {
    display: block;
    width: 100%;
    margin: 65px 0 0 0;
    font-size: 50px;
    line-height: 1.15;
    color: var(--textColor);
    font-family: 'Poppins-B', 'NotoSansTC-M';
}

.c-title03__text {
    display: block;
    width: 100%;
    margin: 15px 0 0 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--textColor);
    font-family: inherit;
}


/****title04****/
.c-title04 {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    padding: 0 0 0 1.2em;
}

.c-title04::before {
    content: '';
    position: absolute;
    top: calc(.75em - 9px);
    left: .1em;
    display: block;
    width: 5px;
    height: 18px;
    background: var(--textColor);
    box-shadow: 5px 4px 0 var(--mainColor);
    transform: skewX(-15deg);
    pointer-events: none;
}

/****title05****/
.c-title05 {
    display: block;
    width: 100%;
    padding: 0 0 20px 0;
    font-size: 30px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'Poppins-M', 'NotoSansTC-M';
    border-bottom: 1px solid #b1b1b1;
}

.c-title05::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: 80px;
    height: 2px;
    background: var(--mainColor);
}

/****title06****/
.c-title06 {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #ebebeb;
}

.c-title06__main {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.2;
    color: #9c9c9c;
    font-family: inherit;
    flex: 0 1 auto;
}

.c-title06__more {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0 0 0 20px;
    font-size: 17px;
    line-height: 1;
    color: var(--mainColor);
    font-family: 'Poppins-B', 'NotoSansTC-M';
    transition: opacity .4s ease-in-out;
    flex: 0 0 auto;
}

.c-title06__more::after {
    content: '';
    position: relative;
    display: block;
    width: 7px;
    height: 14px;
    margin: 0 0 0 18px;
    background: url(../images/common/icon_arrow_next_blue.svg) center/contain no-repeat;
    flex: 0 0 auto;
}

.c-title06__more span {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    flex: 0 1 auto;
}

.c-title06__more:hover {
    opacity: .7;
}

/**title06 white style**/
.c-title06.white {
    border-color: #fff;
}

.c-title06.white .c-title06__main,
.c-title06.white .c-title06__more {
    color: #fff;
}

.c-title06.white .c-title06__more::after {
    filter: brightness(0) invert(1);
}

/*==========================*/
/*======== title end========*/
/*==========================*/




/*====================================================================================================*/
/*=========================================== public start ===========================================*/
/*====================================================================================================*/
/****wow****/
.wow {
    opacity: 0;
    visibility: hidden;
    animation: 1s .4s ease-in-out forwards;
}

/****結構化資料****/
.c-schema {
    display: none;
}

/****anchor****/
.c-anchor {
    position: absolute;
    top: -150px;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.c-toggleBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    background: none;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.c-content {
    display: block;
    width: calc(100% - 120px);
    margin: 0 auto;
    max-width: 1550px;
}

.c-text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 2;
    color: var(--textColor);
    font-family: 'NotoSansTC';
}

.c-inlineBlock {
    display: inline-block;
}

.c-youtube {
    display: block;
    width: 100%;
    padding: 56.25% 0 0 0;
}

.c-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.c-phone {
    cursor: auto;
}

.c-cover {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .4s ease-in-out;
}

.c-cover::before {
    content: 'MORE';
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    font-family: 'Poppins-M', 'NotoSansTC-M';
    flex: 0 0 auto;
}

.c-cover::after {
    content: '';
    position: relative;
    display: block;
    width: 7px;
    height: 13px;
    margin: 0 0 0 15px;
    background: url(../images/common/icon_arrow_next_white.svg) center/contain no-repeat;
    flex: 0 0 auto;
}

.c-formula {
    display: block;
    width: auto;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: center;
}

.c-formula[data-style="left"] {
    text-align: left;
}

.c-formula sub {
    top: .2em;
    font-size: .5em;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-formula__item {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    margin: 0 0 0 1em;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-formula__item:first-child {
    margin: 0;
}

/****crumb****/
.crumb {
    display: block;
    width: calc(100% - 120px);
    max-width: 1550px;
    margin: 0 auto;
}

.crumb ol {
    display: block;
    width: 100%;
}

.crumb ol li {
    display: inline;
}

.crumb ol li::after {
    content: '';
    position: relative;
    display: inline-block;
    width: 7px;
    height: 14px;
    margin: 0 25px;
    background: url(../images/common/icon_arrow_next.svg) center no-repeat;
    background-size: contain;
}

.crumb ol li:last-child:after {
    display: none;
}

.crumb ol li a {
    font-size: 14px;
    font-family: 'NotoSansTC-M';
    text-transform: uppercase;
    transition: opacity .4s ease-in-out;
}

.crumb ol li a:hover {
    opacity: .7;
}

.crumb ol li a span {
    color: inherit;
}

/**home with picture style**/
.crumb__pic span {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/****math****/
.c-math {
    display: block;
    font-size: 24px;
    line-height: inherit;
    color: var(--textColor);
    font-family: inherit;
}

/****public banner****/
.c-banner {
    display: block;
    width: 100%;
    padding: 100px 0 0 0;
}

.c-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 140%;
    pointer-events: none;
    overflow: hidden;
}

.c-banner__bg canvas {
    position: absolute;
    top: 0;
    left: -25%;
    display: block;
    width: 150%;
    height: 100%;
    transform-origin: center;
    transform: rotate(-5deg);
}

.c-banner__content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: center;
    justify-content: center;
    width: calc(100% - 120px);
    margin: 0 auto;
    padding: 130px 0;
    text-align: center;
    animation-name: fadeInUp;
}

.c-banner__content__main {
    display: block;
    width: 100%;
    font-size: 60px;
    line-height: 1;
    color: #00488b;
    font-family: 'Poppins-B', 'NotoSansTC-M';
}

.c-banner__content__sub {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 135px;
    margin: 10px 0 0 0;
    padding: 8px 20px;
    font-size: 16px;
    line-height: 1.2;
    color: #00488b;
    font-family: 'NotoSansTC-M';
    background: #edf3f6;
    border-radius: 17.5px;
    overflow: hidden;
}

.c-banner__content__title {
    display: block;
    width: 100%;
    padding: 30px 0;
    font-size: 45px;
    line-height: 1.2;
    color: #00488b;
    font-family: 'NotoSansTC-M';
}

/****mouse effects****/
.hoverBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    z-index: -1;
	display: none;
}

.hoverBg__canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/****pubic table****/
.c-table {
    display: block;
    width: 100%;
    padding: 0 0 20px 0;
    overflow: hidden;
    overflow-x: auto;
}

.c-table::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.c-table::-webkit-scrollbar-thumb {
    background: var(--mainColor);
}

.c-table__head {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    background: rgba(27, 150, 213, .1);
}

.c-table__head__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 45px;
    padding: 5px;
    font-size: 15px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: center;
    border-right: 1px solid rgba(234, 234, 234, .6);
    overflow: hidden;
    flex: 0 1 auto;
}

.c-table__head__text:last-child {
    border: none;
}

.c-table__head__text__span {
    display: block;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-table__body {
    display: block;
    width: 100%;
}

.c-table__body__box {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    border: 1px solid rgba(234, 234, 234, .6);
    border-top: none;
}

.c-table__body__box:last-child {
    margin: 0;
}

.c-table__body__box__item {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: center;
    justify-content: center;
    width: 100%;
    border-right: 1px solid rgba(234, 234, 234, .6);
    flex: 0 1 auto;
}

.c-table__body__box__item:last-child {
    border: none;
}

.c-table__body__box__item__title {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 50%;
    padding: 5px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    text-align: center;
    background: rgba(27, 150, 213, .1);
    overflow: hidden;
    flex: 0 0 auto;
}

.c-table__body__box__item__title__text {
    display: block;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-table__body__box__item__text {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    min-height: 45px;
    padding: 5px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    text-align: center;
    overflow: hidden;
    flex: 0 1 auto;
}


/****button style****/
[class^="c-bt"] {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 22.5px 5px;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    font-family: 'NotoSansTC';
    background: var(--mainColor);
    border: none;
    border-radius: 0;
    cursor: pointer;
    outline: none;
    transition: opacity .4s ease-in-out;
    overflow: hidden;
}

[class^="c-bt"]:hover,
[class^="c-bt"]:active,
[class^="c-bt"]:visited,
[class^="c-bt"]:focus {
    color: #fff;
}

[class^="c-bt"]:hover {
    opacity: .7;
}

[class^="c-bt"] input[type="submit"],
[class^="c-bt"] input[type="reset"],
[class^="c-bt"] button,
[class^="c-bt"] span {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

[class^="c-bt"] input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

[class^="c-bt"] button {
    width: 100%;
    text-align: center;
}

/**more style**/
[class^="c-bt"][class*="-more"] {
    padding: 15.5px 20px;
}

/**gradient style**/
[class^="c-bt"][class*="-gradient"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #1b96d5 30%, #055eba 100%);
}

/**download style**/
.c-download {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-height: 75px;
    padding: 15px 80px;
    font-size: 15;
    line-height: 1.5;
    color: #fff;
    font-family: 'NotoSansTC-M';
    border-radius: 5px;
    background: var(--mainColor);
    overflow: hidden;
}

.c-download:hover,
.c-download:active,
.c-download:visited,
.c-download:focus {
    color: #fff;
}

.c-download::after {
    content: '';
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 0 0 20px;
    border-radius: 50%;
    background: url(../images/common/icon_download_white.svg) center no-repeat;
    background-size: 40% auto;
    transition: background-color .4s ease-in-out;
    overflow: hidden;
    flex: 0 0 auto;
}

.c-download:hover::after {
    background: url(../images/common/icon_download_black.svg) center no-repeat #fff;
    background-size: 40% auto;
}

.c-download__text {
    display: block;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    flex: 0 1 auto;
}

/**prev tyle**/
[class^="c-bt"][class*="-prev"] {
    background: #c1c1c1;
}

[class^="c-bt"][class*="-prev"]::before {
    content: '';
    position: relative;
    display: block;
    width: 7px;
    height: 14px;
    margin: 0 20px 0 0;
    border-radius: 50%;
    top: 1px;
    background: url(../images/common/icon_arrow_next_white.svg) center no-repeat;
    transition: background-color .4s ease-in-out;
    overflow: hidden;
    flex: 0 0 auto;
    transform: scaleX(-1);
}

/**next style**/
[class^="c-bt"][class*="-next"]::after {
    content: '';
    position: relative;
    display: block;
    width: 7px;
    height: 14px;
    margin: 0 0 0 20px;
    border-radius: 50%;
    top: 1px;
    background: url(../images/common/icon_arrow_next_white.svg) center no-repeat;
    transition: background-color .4s ease-in-out;
    overflow: hidden;
    flex: 0 0 auto;
}

/**cart style**/
[class^="c-bt"][class*="-cart"]::before {
    content: '';
    position: relative;
    display: block;
    width: 21px;
    height: 19px;
    margin: 0 15px 0 0;
    background: url(../images/common/icon_cart_gray.svg) center no-repeat;
    transition: background-color .4s ease-in-out;
    overflow: hidden;
    flex: 0 0 auto;
    filter: brightness(100);
}

/****quality****/
.c-quality {
    margin: 0 auto 180px auto;
}

.c-quality::before {
    content: '';
    position: absolute;
    top: 0;
    right: min(920px, calc(100vw - 1000px));
    display: block;
    width: calc(1410px + 50vw);
    height: 100%;
    clip-path: polygon(0 0, calc(100% - 282px) 0, 100% 100%, 0 100%);
    background: url(../images/common/texture_gray.png) center repeat;
    background-size: auto;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    z-index: 20;
}

.c-quality::after {
    content: '';
    position: absolute;
    display: block;
    width: 1132px;
    height: 1132px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #209cff 0%, rgba(104, 224, 207, 0) 60%);
    opacity: .3;
    pointer-events: none;
    overflow: hidden;
    right: -380px;
    top: -280px;
}

.c-quality__inner {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: center;
    width: calc(100% - 60px);
    max-width: calc(50vw + 770px);
    margin: 0 0 0 auto;
    padding: 130px 0 0 0;
    animation-name: fadeInUp;
    z-index: 30;
}

.c-quality__inner__title {
    display: block;
    min-width: 450px;
}

.c-quality__inner__title__main {
    display: block;
    width: 100%;
    font-size: 60px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'Poppins-B', 'NotoSansTC-M';
    margin: 65px auto 30px auto;
}

.c-quality__inner__title__sub {
    display: block;
    width: calc(100% + 90px);
    font-size: 18px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC';
    padding: 0 0 35px 0;
    border-bottom: 1px solid rgba(64, 64, 64, .2);
}

.c-quality__inner__title__text {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.6;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.c-quality__inner__title__logo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 30px 0 0 0;
}

.c-quality__inner__title__logo__item {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    margin: 15px 15px 0 0;
    flex: 0 0 auto;
}

.c-quality__inner__title__logo__item:last-child {
    margin: 15px 0 0 0;
}

.c-quality__inner__title__logo__item img {
    object-fit: contain;
    object-position: center left;
    width: auto;
    height: 60px;
}

.c-quality__inner__title__logo__item[data-style="ce"] img {
    height: 50px;
}

.c-quality__inner__slick__content {
    display: flex;
    justify-content: space-between;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    padding: 0 0 0 170px;
    margin: 120px 0 100px 0;
}

.c-quality__inner__slick__content__item {
    display: block;
    width: 415px;
    margin: 0 40px 0 0;
    padding: 15px 5px;
}

.c-quality__inner__slick__content__item__pic {
    display: block;
    width: 100%;
    padding: 129.57% 0 0 0;
    box-shadow: 5px 0 12px 0 rgba(40, 40, 40, .18);
}

.c-quality__inner__slick__content__item__pic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/**arrows**/
.c-quality__inner__slick__content .slick-arrow {
    top: auto;
    bottom: 15px;
}

.c-quality__inner__slick__content .slick-prev {
    left: -452px;
}

.c-quality__inner__slick__content .slick-next {
    right: auto;
    left: -272px;
}

.c-quality__inner__slick__count {
    position: absolute;
    bottom: 120px;
    left: -384px;
    width: 60px;
}


/****page****/
.c-page {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 35px 0 0 0;
    border-top: 1px solid #d3d3d3;
}

/**page count**/
.c-page__count {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto;
}

.c-page__count a {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin: 0 5px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    transition: color .4s ease-in-out, background-color .4s ease-in-out;
    overflow: hidden;
}

.c-page__count a.hide {
    display: none;
}

.c-page__count a:hover,
.c-page__count a.active {
    color: #fff;
    background: var(--mainColor);
}

/**prev & next**/
.c-page__prev,
.c-page__next {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    font-size: 16px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'Poppins', 'NotoSansTC';
    margin: 0 0 0 30px;
    transition: opacity .4s ease-in-out;
    flex: 0 0 auto;
}

.c-page__prev {
    margin: 0 30px 0 0;
}

.c-page__prev:hover,
.c-page__next:hover {
    opacity: .7;
}

/**arrow style**/
.c-page__prev::before,
.c-page__next::after {
    content: '';
    position: relative;
    display: block;
    width: 11px;
    height: 22px;
    margin: 0 0 0 30px;
    background: url(../images/common/icon_arrow_next.svg) center/contain no-repeat;
    flex: 0 0 auto;
}

.c-page__prev::before {
    margin: 0 30px 0 0;
    transform: scaleX(-1);
}

.c-page__prev.disable,
.c-page__next.disable {
    opacity: .4;
    pointer-events: none;
}

/**back button**/
.c-page__back {
    max-width: 180px;
    margin: 0 auto;
}

/****share****/
.c-share {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
}

.c-share__title {
    display: block;
    width: auto;
    max-width: 100%;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'Poppins-M', 'NotoSansTC-M';
    flex: 0 0 auto;
}

.c-share__title::after {
    content: '|';
    padding: 0 10px;
}

.c-share__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto;
}

.c-share__list__item {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 10px 0 0;
    border-radius: 50%;
    background: var(--mainColor);
    transition: opacity .4s ease-in-out;
    overflow: hidden;
}

.c-share__list__item:hover {
    opacity: .7;
}

.c-share__list__item img {
    object-fit: contain;
    object-position: center;
    width: 55%;
    height: 55%;
    filter: brightness(0) invert(1);
}

.c-share__list__item__textarea {
    position: fixed;
    top: -100vh;
    left: -100vw;
    opacity: 0;
    pointer-events: none;
}

/****form****/
.c-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.c-form__item {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-height: 60px;
    margin: 0 0 10px 0;
    padding: 0 30px;
    border: 1px solid #eaeaea;
}

.c-form__item input,
.c-form__item select,
.c-form__item textarea {
    height: auto;
    padding: 0;
    border: none;
}

.c-form__item select {
    min-height: 58px;
    padding: 0 20px 0 0;
    background-position: center right;
}

.c-form__item.two {
    width: calc(50% - 5px);
}

.c-form__item__title {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 20px 0 0;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    flex: 0 0 auto;
}

.c-form__item.required .c-form__item__title::after {
    content: '*';
    padding: 0 0 0 5px;
    font-size: 20px;
    line-height: 1;
    color: var(--mainColor);
    font-family: inherit;
}

.c-form__item__result {
    display: inline-block;
    width: auto;
    font-size: 15px;
    line-height: inherit;
    color: inherit;
    font-family: 'NotoSansTC-M';
}

/**wrap style**/
.c-form__item.wrap {
    flex-wrap: wrap;
    padding: 20px 30px;
}

.c-form__item.wrap .c-form__item__title {
    margin: 0 0 15px 0;
}

/**button group**/
.c-form__btGroup {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    margin: 25px 0 0 0;
}

.c-form__btGroup__captcha {
    width: 310px;
    margin: 0 auto 0 0;
}

.c-form__btGroup__bt {
    width: 100%;
    max-width: 180px;
    margin: 0 0 0 10px;
    flex: 0 0 auto;
}

/*****product box****/
.c-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.c-product[data-style="product"] {
    border: 1px solid #dde6eb;
    border-radius: 5px;
    transition: box-shadow .4s ease-in-out;
}

.c-product[data-style="product"]:hover {
    box-shadow: 15px 15px 50px rgba(84, 99, 112, .25);
}

/**picture**/
.c-product__pic {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    padding: 77.5% 0 0 0;
    border-radius: 5px;
    background: #edf3f6;
    overflow: hidden;
    flex: 0 0 auto;
}

.c-product__pic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-product[data-style="product"] .c-product__pic {
    background: #fff;
    border-radius: 0;
}

.c-product[data-style="product"] .c-product__pic img {
    object-fit: contain;
    object-position: center;
    height: 100%;
    max-width: 215px;
    max-height: 215px;
}

.c-product__pic__cover {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    font-family: 'Poppins-M', 'NotoSansTC-M';
    background: rgba(0, 50, 96, .7);
    opacity: 0;
    transition: opacity .4s ease-in-out;
}

.c-product__pic__cover::before {
    content: 'MORE';
    position: relative;
    flex: 0 1 auto;
}

.c-product__pic__cover::after {
    content: '';
    position: relative;
    display: block;
    width: 7px;
    height: 14px;
    margin: 0 0 0 15px;
    background: url(../images/common/icon_arrow_next_white.svg) center/contain no-repeat;
    overflow: hidden;
    flex: 0 0 auto;
}

/**content**/
.c-product__content {
    display: block;
    width: 100%;
    margin: 15px 0 0 0;
}

.c-product__content__sub {
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(59, 59, 59, .6);
    font-family: 'Poppins', 'NotoSansTC';
}

.c-product__content__title {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    transition: color .4s ease-in-out;
}

/**hover style**/
.c-product__pic__cover:hover,
.c-product[href]:hover .c-product__pic__cover {
    opacity: 1;
}

.c-product[href]:hover .c-product__content__title {
    color: var(--mainColor);
}

/**depiction toggle box**/
.c-product__depiction {
    display: block;
    width: 100%;
    height: 100%;
    padding: 25px 20px;
    background: #f6f6f6;
    flex: 0 1 auto;
}

.c-product__depiction__title {
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--mainColor);
    font-family: 'NotoSansTC-M';
}

.c-product__depiction__text {
    display: -webkit-box;
    width: 100%;
    font-size: 14px;
    line-height: 1.7;
    color: var(--textColor);
    font-family: inherit;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-product__depiction__text.active {
    display: block;
}

.c-product__depiction__bt {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin: 15px 0 0 0;
    padding: 0 0 5px 0;
    font-size: 15px;
    line-height: 1;
    color: var(--mainColor);
    font-family: inherit;
    border-bottom: 1px solid var(--mainColor);
    cursor: pointer;
}

.c-product__depiction__bt::before {
    content: 'OPEN';
    position: relative;
    display: block;
    width: 100%;
}

.c-product__depiction__bt::after {
    content: '';
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 0 0 5px;
    border-radius: 50%;
    background: url(../images/common/icon_arrow_bottom_white.svg) center no-repeat var(--mainColor);
    background-size: 50% auto;
    overflow: hidden;
    flex: 0 0 auto;
}

.c-product__depiction__bt.hide {
    display: none;
}

.c-product__depiction__bt.active {
    border: none;
    padding: 0;
}

.c-product__depiction__bt.active::before {
    content: 'CLOSE';
}

.c-product__depiction__bt.active::after {
    width: 22px;
    height: 11px;
    background: url(../images/common/icon_close_blue.svg) center/contain no-repeat;
}

.c-product__link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
}

/****submenu****/
.c-subMenu {
    display: block;
    width: 100%;
}

.c-subMenu__list {
    display: block;
    width: 100%;
    border: 1px solid #a4a4a4;
}

.c-subMenu__list__box {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: center;
    justify-content: center;
    width: calc(100% - 0px);
    margin: 0 auto -1px auto;
    overflow: visible;
}

.c-subMenu__list__box .slick-prev {
    left: -20px;
}

.c-subMenu__list__box .slick-next {
    right: -20px;
}

.c-subMenu__list__box__item {
    display: block;
    width: auto;
    min-width: 100px;
    max-width: 100%;
    flex: 0 0 auto;
	margin: 0 30px;
}

.c-subMenu__list__box__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--mainColor);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .4s ease-in-out;
}

.c-subMenu__list__box__item.active::after,
.c-subMenu__list__box__item:hover::after {
    transform: none;
}

@media screen and (min-width: 992px) {
	.c-subMenu__list__box{max-width: 800px !important;}
}
@media screen and (min-width: 1200px) {
	.c-subMenu__list__box{max-width: 1000px !important;}
}
@media screen and (min-width: 1600px) {
	.c-subMenu__list__box{max-width: 1300px !important;}
}
@media screen and (max-width: 1200px) {
	.c-subMenu__list__box__item{margin: 0 6px;}
}
.c-subMenu__list__box__item__link {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 0;
    font-size: 16px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.c-subMenu__select {
    display: none;
    width: 100%;
    height: 70px;
    padding: 0 25px;
    border: 1px solid #a4a4a4;
}

/****catalog menu****/
.c-catalog {
    display: block;
    width: 100%;
    border-top: 1px solid #d3d3d3;
}

.c-catalog__main {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-height: 100px;
    margin: 0 0 -1px 0;
    padding: 30px 80px 30px 0;
}

.c-catalog__main::before {
    content: '';
    position: absolute;
    top: calc(50% - 25px);
    right: 0;
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ddd;
    flex: 0 0 auto;
    overflow: hidden;
}

.c-catalog__main[href]::before {
    display: block;
    background: url(../images/common/icon_arrow_next_long.svg) center no-repeat;
    background-size: 45% auto;
}

.c-catalog:hover .c-catalog__main[href]::before {
    border: 1px solid var(--mainColor);
    background: url(../images/common/icon_arrow_next_long_white.svg) center no-repeat var(--mainColor);
    background-size: 45% auto;
}

button.c-catalog__main::before {
    display: block;
    background:
        linear-gradient(to right, var(--textColor) 0%, var(--textColor) 100%) center no-repeat,
        linear-gradient(to right, var(--textColor) 0%, var(--textColor) 100%) center no-repeat;
    background-size:
        40% 1px,
        1px 40%;
}

.c-catalog:hover button.c-catalog__main::before {
    border: 1px solid var(--mainColor);
    background:
        linear-gradient(to right, #fff 0%, #fff 100%) center no-repeat,
        linear-gradient(to right, #fff 0%, #fff 100%) center no-repeat,
        linear-gradient(to right, var(--mainColor) 0%, var(--mainColor) 100%) center no-repeat;
    background-size:
        40% 1px,
        1px 40%,
        100% 100%;
}

.c-catalog.active button.c-catalog__main::before {
    border: 1px solid #ddd;
    background: linear-gradient(to right, var(--textColor) 0%, var(--textColor) 100%) center no-repeat;
    background-size: 40% 1px;
}

.c-catalog__main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #d3d3d3;
    transition: background-color .4s ease-in-out;
    z-index: 10;
}

.c-catalog__main:hover::after {
    background: var(--mainColor);
}

.c-catalog__main__type {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: auto;
    min-width: 240px;
    max-width: 100%;
    margin: 0 20px 0 0;
}

.c-catalog__main__type__item {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    padding: 10px 25px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: center;
    border-radius: 20px;
    border: 1px solid #d3d3d3;
    overflow: hidden;
}

.c-catalog__main__title {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.3;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: left;
    flex: 0 1 auto;
}

.c-catalog__box {
    display: none;
    width: 100%;
    padding: 40px 0;
}

.c-catalog__box__content {
    display: block;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
}

.c-catalog__box__content__title {
    display: block;
    width: 100%;
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.c-catalog__box__content__download {
    display: block;
    width: 100%;
}

.c-catalog__box__content__download__item {
    margin: 0 0 10px 0;
}

.c-catalog__box__content__download__item:last-child {
    margin: 0;
}

/****aside****/
.c-aside {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
}

/**open menu button**/
.c-aside__bt {
    display: none;
    width: 100%;
    padding: 25px 60px 25px 25px;
    font-size: 15px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: inherit;
    background: url(../images/common/icon_list_black.svg) center right 25px no-repeat #edf3f6;
    background-size: 23px auto;
    border: 1px solid #dae1e4;
    cursor: pointer;
}

/**aside menu**/
.c-aside__box {
    display: block;
    width: 100%;
    transition: transform .4s ease-in-out;
    overscroll-behavior: none;
}

.c-aside__box__head {
    display: none;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 25px 0;
    flex: 0 0 auto;
}

.c-aside__box__head__title {
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    flex: 0 1 auto;
}

.c-aside__box__head__close {
    display: block;
    width: 35px;
    height: 20px;
    margin: 0 0 0 20px;
    transition: opacity .4s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    flex: 0 0 auto;
}

.c-aside__box__head__close::before,
.c-aside__box__head__close::after {
    content: '';
    position: absolute;
    top: calc(50% - .5px);
    left: -25%;
    display: block;
    width: 150%;
    height: 1px;
    background: var(--textColor);
    transform-origin: center;
}

.c-aside__box__head__close::before {
    transform: rotate(20deg);
}

.c-aside__box__head__close::after {
    transform: rotate(-20deg);
}

.c-aside__box__head__close:hover {
    opacity: .7;
}

/*first menu*/
.c-aside__box__list {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #dae1e4;
    list-style: none;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--mainColor) #edf3f6;
    touch-action: none;
}

.c-aside__box__list::-webkit-scrollbar {
    width: 4px;
    background: #fff;
}

.c-aside__box__list::-webkit-scrollbar-thumb {
    background: var(--mainColor);
}

.c-aside__box__list__item {
    display: block;
    width: 100%;
    background: #edf3f6;
}

.c-aside__box__list__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    display: block;
    width: calc(100% - 40px);
    height: 1px;
    background: #dae1e4;
    pointer-events: none;
}

.c-aside__box__list__item.active::after,
.c-aside__box__list__item:last-child::after {
    display: none;
}

.c-aside__box__list__item__link {
    display: block;
    width: 100%;
    padding: 20px;
    font-size: 15px;
    line-height: 1.2;
    color: #3b3b3b;
    font-family: inherit;
    text-align: left;
    background: #edf3f6;
    transition: opacity .4s ease-in-out;
}

.c-aside__box__list__item__link.j-dropdown-bt {
    padding: 20px 50px 20px 20px;
}

/*.c-aside__box__list__item__link.j-dropdown-bt::before,
.c-aside__box__list__item__link.j-dropdown-bt::after {
    content: '';
    position: absolute;
    display: block;
    background: #3b3b3b;
}

.c-aside__box__list__item__link.j-dropdown-bt::before {
    top: calc(50% - 1px);
    right: 30px;
    width: 12px;
    height: 2px;
}

.c-aside__box__list__item__link.j-dropdown-bt::after {
    top: calc(50% - 6px);
    right: 35px;
    width: 2px;
    height: 12px;
}*/

.c-aside__box__list__item.active .c-aside__box__list__item__link.j-dropdown-bt::after {
    display: none;
}

.c-aside__box__list__item.current .c-aside__box__list__item__link,
.c-aside__box__list__item__link:hover {
    color: var(--mainColor);
}

/*second menu*/
.c-aside__box__list__item__list {
    display: none;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    list-style: none;
    background: #fff;
}

.c-aside__box__list__item__list__item {
    display: block;
    width: 100%;
}

.c-aside__box__list__item__list__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    display: block;
    width: calc(100% - 40px);
    height: 1px;
    background: #dae1e4;
    pointer-events: none;
}

.c-aside__box__list__item__list__item:last-child::after {
    display: none;
}

.c-aside__box__list__item__list__item__link {
    display: block;
    width: 100%;
    padding: 20px;
    font-size: 15px;
    line-height: 1.2;
    color: #3b3b3b;
    font-family: inherit;
    text-align: left;
    transition: opacity .4s ease-in-out;
}

.c-aside__box__list__item__list__item__link.j-dropdown-bt {
    padding: 20px 50px 20px 20px;
}

/*.c-aside__box__list__item__list__item__link.j-dropdown-bt::after {
    content: '';
    position: absolute;
    top: calc(50% - 3.5px);
    right: 30px;
    display: block;
    width: 14px;
    height: 7px;
    background: url(../images/common/icon_arrow_bottom_gray.svg) center/contain no-repeat;
    transform-origin: center;
}

.c-aside__box__list__item__list__item.active .c-aside__box__list__item__list__item__link::after {
    transform: scaleY(-1);
}*/

.c-aside__box__list__item__list__item__link:hover,
.c-aside__box__list__item__list__item.current .c-aside__box__list__item__list__item__link {
    color: var(--mainColor);
}

/*third menu*/
.c-aside__box__list__item__list__item__list {
    display: none;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 20px 0;
    list-style: none;
    border-top: 1px solid #dae1e4;
}

.c-aside__box__list__item__list__item__list__item {
    display: block;
    width: 100%;
}

.c-aside__box__list__item__list__item__list__item__link {
    display: block;
    width: 100%;
    padding: 10px 0 10px 25px;
    font-size: 14px;
    line-height: 1.2;
    color: #3b3b3b;
    font-family: inherit;
    transition: opacity .4s ease-in-out;
}

.c-aside__box__list__item__list__item__list__item__link::before {
    content: '';
    position: absolute;
    top: calc(50% - 3.5px);
    left: 0;
    display: block;
    width: 7px;
    height: 7px;
    background: var(--mainColor);
    border-radius: 50%;
}

.c-aside__box__list__item__list__item__list__item__link:hover {
    opacity: .7;
}

.c-aside__box__list__item__list__item__list__item.current .c-aside__box__list__item__list__item__list__item__link {
    color: var(--mainColor);
}

/**aide menu open style**/
#asideMenuCheck:checked~.c-aside__box {
    transform: none;
}

/****news box****/
.c-news {
    display: block;
    width: 100%;
}

.c-news.wow {
    animation-name: fadeInUp;
}

/**picture**/
.c-news__pic {
    display: block;
    width: 100%;
    padding: 71.71% 0 0 0;
    overflow: hidden;
}

.c-news__pic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-news:hover .c-cover {
    opacity: 1;
}

/**content**/
.c-news__content {
    display: block;
    width: 100%;
    margin: 25px 0 0 0;
}

.c-news__content__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 5px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: inherit;
    opacity: .7;
}

.c-news__content__sub__item {
    display: block;
    width: auto;
    max-width: 100%;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-news__content__sub__item::after {
    content: '|';
    position: relative;
    top: -.1em;
    padding: 0 5px;
}

.c-news__content__sub__item:last-child:after {
    display: none;
}

.c-news__content__title {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

/****news info box****/
.c-newsInfoBox {
    display: block;
    width: 490px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    position: fixed;
    top: max(120px, calc(50vh - 140px));
    right: calc(100% - 40px);
    padding: 20px 0;
    z-index: 100;
    transition: transform .4s ease-in-out;
    z-index: 800;
	transform: translateX(calc(100% - 40px));
}

.c-newsInfoBox__inner {
    display: block;
    width: calc(100% - 40px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 5px 5px 20px rgba(84, 99, 112, .25);
    padding: 20px 7.5px 20px 15px;
    border-radius: 0 5px 5px 0;
}

.c-newsInfoBox__inner__content::-webkit-scrollbar {
    width: 4px;
}

.c-newsInfoBox__inner__content::-webkit-scrollbar-thumb {
    background: var(--mainColor);
}

.c-newsInfoBox__inner__label {
    background: rgba(27, 150, 213, .8);
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    width: 105px;
    height: 40px;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    font-family: 'Poppins-M', 'NotoSansTC-M';
    transform: rotate(90deg);
    transform-origin: bottom;
    padding: 5px 15px;
    border-radius: 5px 5px 0 0;
    position: absolute;
    right: -52px;
    top: 40px;
    z-index: -1;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgba(84, 99, 112, .25);
}

.c-newsInfoBox__inner__content {
    height: 320px;
    max-height: calc(100vh - 200px);
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mainColor) #ddd;
    padding: 0 7.5px 0 0;
}

.c-newsInfoBox__inner__content__title {
    display: block;
    width: 100%;
    font-size: 20px;
    line-height: 1.5;
    color: var(--mainColor);
    font-family: 'Poppins-M', 'NotoSansTC-M';
    margin: 0 0 10px 0;
}

.c-newsInfoBox__inner__content__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC';
}

.c-newsInfoBox__inner__content__pic {
    display: block;
    width: 100%;
    margin: 20px 0 0 0;
}

#newsInfoCheck:checked~.c-newsInfoBox {
    transform: translateX(0);
}

/****editor****/
.c-edit {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 2.3;
    color: var(--textColor);
    font-family: inherit;
    /*word-break: break-all;*/
}

.c-edit * {
    /*font-size: inherit;*/
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
}

.c-edit a {
    font-size: inherit;
}

.c-edit strong {
    font-weight: 700;
}

.c-edit i {
    font-style: italic;
}

.c-edit img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto !important;
}

.c-edit *:last-child {
    margin: 0 auto;
}

.c-edit ul,
.c-edit ol {
    padding: 0 0 0 20px;
    margin: 20px 0;
}

.c-edit ul li,
.c-edit ol li {
    display: list-item;
    width: 100%;
    margin: 0 0 5px 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-edit ul li:last-child,
.c-edit ol li:last-child {
    margin: 0;
}

.c-edit ul {
    list-style-type: disc;
}

.c-edit ol {
    list-style-type: decimal
}

.c-edit__youtube {
    display: block;
    width: 100%;
    padding: 56.25% 0 0 0;
}

.c-edit iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.c-edit__table,
.table_scroll {
    width: 100%;
    padding: 0 0 5px 0;
    overflow-x: auto;
}
.table_scroll > table {min-width: 700px;}

.c-edit__table::-webkit-scrollbar,
.table_scroll::-webkit-scrollbar {
    height: 4px;
}

.c-edit__table::-webkit-scrollbar-thumb,
.table_scroll::-webkit-scrollbar-thumb {
    background: var(--mainColor);
}

.datatable {
    width: 100%;
    min-width: 700px;
    text-align: center;
    border-spacing: 1px;
    background: #fff;
    border: 1px solid rgba(177, 177, 177, .3);
}

.datatable th {
    padding: 5px 10px;
    color: #fff;
    background: var(--mainColor);
    border-right: 1px solid #fff;
}

.datatable th:last-child {
    border: none;
}

.datatable tr:nth-child(even) {
    background: var(--bgColor);
}

.datatable td {
    border-right: 1px solid rgba(177, 177, 177, .3);
}

.datatable td:last-child {
    border: none;
}

/*============================*/
/*======== public end ========*/
/*============================*/



/*====================================================================================================*/
/*========================================== lightbox start ==========================================*/
/*====================================================================================================*/
/****lightbox base****/
.c-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 80px 0;
    background: rgba(0, 0, 0, .7);
    touch-action: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .4s ease-in-out;
    overscroll-behavior: none;
    z-index: 1000;
}

.c-lightbox.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.c-lightbox__inner {
    display: block;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.c-lightbox__inner::-webkit-scrollbar {
    width: 4px;
    width: 0;
}

.c-lightbox__inner::-webkit-scrollbar-thumb {
    background: var(--mainColor);
}

/****dialog****/
.c-lightbox__inner__message {
    display: block;
    width: calc(100% - 120px);
    max-width: 525px;
    margin: 0 auto;
    padding: 85px 20px 80px 20px;
    text-align: center;
    background: #fff;
}

.c-lightbox__close,
.c-lightbox__inner__message__close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 80px;
    height: 80px;
    background: var(--mainColor);
    transition: opacity .4s ease-in-out;
    cursor: pointer;
    z-index: 10;
}

.c-lightbox__close {
    width: 100px;
    height: 100px;
}

.c-lightbox__close:hover,
.c-lightbox__inner__message__close:hover {
    opacity: .7;
}

.c-lightbox__close::before,
.c-lightbox__close::after,
.c-lightbox__inner__message__close::before,
.c-lightbox__inner__message__close::after {
    content: '';
    position: absolute;
    top: calc(50% - .5px);
    left: 25%;
    display: block;
    width: 50%;
    height: 1px;
    background: #fff;
    transform-origin: center;
}

.c-lightbox__close::before,
.c-lightbox__inner__message__close::before {
    transform: rotate(20deg);
}

.c-lightbox__close::after,
.c-lightbox__inner__message__close::after {
    transform: rotate(-20deg);
}

.c-lightbox__inner__box {
    display: block;
    width: 100%;
}

.c-lightbox__inner__box__sub {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'Poppins-SB', 'NotoSansTC-B';
    opacity: .5;
}

.c-lightbox__inner__box__title {
    display: block;
    width: 100%;
    font-size: 32px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: inherit;
}

.c-lightbox__inner__box__title::after {
    content: '';
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    margin: 20px auto;
    background: rgba(28, 28, 28, .3);
}

.c-lightbox__inner__box__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.8;
    color: var(--textColor);
    font-family: inherit;
}

.c-lightbox__inner__box__btGroup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: center;
    justify-content: center;
    width: 100%;
    margin: 25px auto 0 auto;
}

.c-lightbox__inner__box__btGroup__bt {
    width: calc(50% - 10px);
    max-width: 180px;
    margin: 10px 5px 0 5px;
}

.c-lightbox__inner__box__btGroup__bt:first-child:last-child {
    width: 100%;
    margin: 10px 0 0 0;
}

/****Youtube****/
.c-lightbox__inner__video {
    display: block;
    width: 100%;
}

.c-lightbox__inner__video__content {
    display: block;
    width: calc(100% - 120px);
    max-width: 720px;
    margin: 0 auto;
}

/****login****/
.c-lightbox__inner__member {
    display: block;
    width: calc(100% - 120px);
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    padding: 85px 30px 55px 30px;
}

.c-lightbox__inner__member__title {
    display: block;
    width: 100%;
    text-align: center;
}

.c-lightbox__inner__member__title__sub {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1;
    color: #a7a7a7;
    font-family: 'Poppins-SB', 'NotoSansTC';
    margin: 0 auto 5px auto;
}

.c-lightbox__inner__member__title__main {
    display: block;
    width: 100%;
    font-size: 32px;
    line-height: inherit;
    color: var(--textColor);
    font-family: 'NotoSansTC';
    text-align: center;
}

.c-lightbox__inner__member__title__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
    color: var(--textColor);
    font-family: 'NotoSansTC';
    text-align: center;
}

.c-lightbox__inner__member__title__text::before {
    content: '';
    position: relative;
    top: 0;
    left: calc(50% - 12.5px);
    display: block;
    width: 25px;
    height: 1px;
    background: #bababa;
    margin: 20px 0;
}

.c-lightbox__inner__member__form {
    display: block;
    width: 100%;
}

.c-lightbox__inner__member__form__item {
    display: block;
    width: 100%;
}

.c-lightbox__inner__member__form__item.required::after {
    content: '*';
    position: absolute;
    top: calc(50% - 10px);
    right: 54px;
    display: block;
    font-size: 20px;
    color: var(--mainColor);
    pointer-events: none;
}

.c-lightbox__inner__member__form__item input {
    display: block;
    max-width: 350px;
    margin: 0 auto;
    border: none;
    border-bottom: 1px solid #d2d2d2;
    padding: 25px 25px 25px 0;
    font-size: 15px;
    line-height: inherit;
    color: var(--textColor);
    font-family: 'NotoSansTC';
}

.c-lightbox__inner__member__form__item input::placeholder {
    color: #bababa;
}

.c-lightbox__inner__member__form__btGroup {
    display: block;
    width: 100%;
    margin: 35px auto 25px auto;
}

.c-lightbox__inner__member__form__btGroup__bt {
    max-width: 180px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    font-family: 'NotoSansTC';
}

.c-lightbox__inner__member__form__btGroup__bt button {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.c-lightbox__inner__member__form__tool {
    display: block;
    width: 100%;
    text-align: center;
}

.c-lightbox__inner__member__form__tool__link {
    display: inline-block;
    width: auto;
    font-size: 14px;
    line-height: 1;
    color: #606060;
    font-family: 'NotoSansTC';
    transition: opacity .4s ease-in-out;
}

.c-lightbox__inner__member__form__tool__link:hover,
.c-lightbox__inner__member__form__tool__link:active,
.c-lightbox__inner__member__form__tool__link:visited,
.c-lightbox__inner__member__form__tool__link:focus {
    color: #606060;
}

.c-lightbox__inner__member__form__tool__link:hover {
    opacity: .7;
}

.c-lightbox__inner__member__form__tool__link::after {
    content: '';
    position: relative;
    top: 2.5px;
    left: 1px;
    display: inline-block;
    width: 1px;
    height: 1em;
    background: #606060;
    margin: 0 8px;
}

.c-lightbox__inner__member__form__tool__link:last-child:after {
    display: none;
}


.c-lightbox__inner__member__close {
    width: 80px;
    height: 80px;
}

/*==============================*/
/*======== lightbox end ========*/
/*==============================*/




/*====================================================================================================*/
/*=========================================== about start ============================================*/
/*====================================================================================================*/
.about {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
}

.about__message__title {
    margin: 0 auto 70px auto;
    animation-name: fadeInUp;
}

/****company message****/

.about__message__inner__intro {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    margin: 0 auto 90px auto;
    animation-name: fadeInUp;
}

.about__message__inner__intro__bold {
    display: block;
    font-size: 18px;
    line-height: 1.9;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    letter-spacing: 1px;
    width: 275px;
    flex: 0 0 auto;
    margin: 0 8% 0 0;
}

.about__message__inner__intro__text {
    line-height: 1.9;
    flex: 0 1 auto;
}

.about__message__inner__content {
    display: flex;
    justify-content: space-between;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    margin: 0 auto 120px auto;
}

.about__message__inner__content__pic {
    display: block;
    width: calc(50% - 20px);
    animation-name: fadeInUp;
}

/****gray background area****/
.about__introbox {
    display: block;
    padding: 140px 245px 150px 245px;
    background: url(../images/common/texture_gray.png) center repeat;
    background-size: auto;
    z-index: 10;
    animation-name: fadeInUp;
}

.about__introbox::after {
    content: 'WHO WE ARE';
    position: absolute;
    top: -205px;
    right: -205px;
    display: block;
    width: 700px;
    height: 1em;
    color: rgba(28, 28, 28, .1);
    font-size: 200px;
    line-height: .8;
    font-family: 'Poppins-T', 'NotoSansTC-T';
    pointer-events: none;
    text-align: right;
}

.about__introbox__content__item {
    display: block;
    width: 100%;
    margin: 0 auto 55px auto;
    animation-name: fadeInUp;
}

.about__introbox__content__item__title {
    margin: 0 auto 20px auto;
}

.about__introbox__content__item__highlights {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 10px 0 0 0;
}

.about__introbox__content__item__highlights__main {
    display: block;
    width: auto;
    color: #141414;
    margin: 0 65px 10px 0;
}

.about__introbox__content__item__highlights__main::before {
    content: '';
    position: relative;
    top: 12px;
    left: 0;
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: url(../images/common/icon_check_white.svg) center/contain no-repeat var(--mainColor);
    background-size: 50%;
    margin: 0 1em 0 0;
    pointer-events: none;
}

.about__introbox__bottom {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    margin: 80px auto 0 auto;
    width: 100%;
    max-width: 880px;
    animation-name: fadeInUp;
}

.about__introbox__bottom__item {
    display: block;
    text-align: center;
    width: 25%;
    padding: 0 10px;
}

.about__introbox__bottom__item__sub {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1;
    color: #9c9c9c;
    font-family: 'Poppins', 'NotoSansTC';
    margin: 0 auto 25px auto;
}

.about__introbox__bottom__item__number,
.about__introbox__bottom__item__unit {
    display: inline-block;
    width: auto;
    font-size: 55px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'Poppins-B', 'NotoSansTC-M';
}

.about__introbox__bottom__item__main {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    margin: 5px auto 0 auto;
}

/****video lightbox****/
.about__video {
    display: block;
    width: 100%;
    height: 670px;
    margin: -190px auto 0 auto;
    animation-name: fadeInUp;
    background: #000;
}

.about__video__bg {
    display: block;
    width: 100%;
    height: 100%;
}

.about__video__bg img {
    object-fit: cover;
    object-position: center;
    height: 100%;
}

.about__video__bg__btOpen {
    position: absolute;
    top: calc((50% - 75px) + 90px);
    left: calc(50% - 75px);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    font-family: 'Poppins-M', 'NotoSansTC-M';
    display: inline-block;
}

.about__video__bg__btOpen::before {
    content: '';
    position: relative;
    top: 0;
    left: calc(50% - 10px);
    margin: 0 0 10px 0;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 20px;
    border-color: transparent transparent transparent #fff;
}

/****core values****/
.about__value {
    display: block;
    overflow: hidden;
    padding: 150px 0 140px 0;
    z-index: -1;
}

/**title**/
.about__value__main {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 120px auto;
    animation-name: fadeInUp;
}

.about__value__main__title {
    display: block;
    width: 100%;
    font-size: 100px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'Poppins-T', 'NotoSansTC-T';
}

/**content**/
.about__value__inner {
    display: flex;
    justify-content: space-between;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
}

/**core**/
.about__value__inner__textArea {
    display: block;
    width: 100%;
    flex: 0 1 auto;
}

.about__value__inner__textArea__item {
    display: block;
    width: 100%;
    margin: 0 auto 45px auto;
    animation-name: fadeInUp;
}

.about__value__inner__textArea__item:last-child {
    margin: 0 auto;
}

.about__value__inner__textArea__item__title {
    margin: 0 auto 20px auto;
}

/**core chart**/
.about__value__inner__graph {
    display: block;
    width: 478px;
    margin: 0 0 0 15%;
    flex: 0 0 auto;
    animation-name: fadeInUp;
}

.about__value__inner__graph__content {
    width: 240px;
    height: 240px;
    border: 1px solid var(--mainColor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    margin: 0 auto;
}

.about__value__inner__graph__content[data-target="2"] {
    margin: -34px auto 0 0;
}

.about__value__inner__graph__content[data-target="3"] {
    margin: -240px 0 0 auto;
}

.about__value__inner__graph__content__line {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    animation: aboutChartdot1 24s linear infinite;
    z-index: 20;
}

.about__value__inner__graph__content[data-target="2"] .about__value__inner__graph__content__line {
    animation: aboutChartdot2 24s 6.736s linear infinite;
}

.about__value__inner__graph__content[data-target="3"] .about__value__inner__graph__content__line {
    animation: aboutChartdot3 24s 13.36s linear infinite;
}

.about__value__inner__graph__content__line::before {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    left: -3px;
    display: block;
    width: 6px;
    height: 6px;
    background: var(--mainColor);
    border-radius: 50%;
    overflow: hidden;
}

.about__value__inner__graph__content__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC';
    text-align: center;
    padding: 5px;
}

/*===========================*/
/*======== about end ========*/
/*===========================*/


/*===========================*/
/*======== CTS start ========*/
/*===========================*/

.cts-r2{ display: flex;flex-wrap: wrap; padding: 30px 0; }
.cts-r2 .cts-pic { width: 60%; padding-right: 20px; } 
.cts-r2 .cts-txt { width: 40%; padding: 3%;} 
.cts-r3{ display: flex;flex-wrap: wrap; padding: 30px 0;}
.cts-r3 > div{ width: calc((100% - 60px) / 3); margin-right: 30px; }
.cts-r3 > div:last-child{ margin-right: 0px; }
.cts_title{margin-bottom: 30px;}

.cts-content{position: relative;z-index: 0; padding: 50px 0;overflow: hidden;}
.cts-content .c-title02__main{line-height: 1.5;}
.cts-content .c-title02__main span{color: #00488b;}
.cts-content .cts-pic { background: url("../images/about/cts-pic-1.jpg") no-repeat center;}
.bg-grey::before{  content: '';  position: absolute; top: 0; right: -20vw; display: block; width: 100%; height: 100%; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); background-image: linear-gradient(90deg, #f5f5f5 5%, transparent); pointer-events: none; transform: translate3d(0, 0, 0);  z-index: -1;}

.cts-card { display: flex;flex-wrap: wrap;flex-direction: column;}
.cts-card .cts-card-pic{margin-bottom: 20px;}
.cts-card .cts-card-txt{padding: 0 10px;}
.cts-card .cts-card-txt .c-title04{margin-bottom: 20px;}

.esg-section{position: relative;margin-bottom: 5%;}
.esg-content {margin-bottom: 50px;}
.esg-content .c-title02__main{line-height: 1.5;}
.esg-content .cts-pic { background: url("../images/about/cts-pic-2.jpg") no-repeat center;}
.esg-tit{ font-size: 32px; line-height: 1.5; }
.esg-txt{width: 60%;padding-right: 10%;padding-bottom: 240px;}
.esg-txt ul{padding: 20px 0 20px 20px;}
.esg-pic{width: 40%;}
.esg-slogan{position: absolute; bottom: 0; padding: 3% 40% 3% 3%; background: #f5f5f5; color: #1b96d5; font-size: 36px; font-weight: 600; z-index: -1;}

.esg-list{ padding: 30px 0; display: flex;flex-wrap: wrap; }
.esg-list li{ list-style: none; width: calc(50% - 40px); margin: 0 20px 30px; position: relative; display: flex;flex-wrap: wrap; align-items: center; background: #f5f5f5;padding: 20px;overflow: hidden;}
.esg-list li .esg-list-num{ position: absolute; right: 25px; bottom: 10px; color: #FFF; font-size: 36px; font-weight: 600; z-index: 2;}
.esg-list li .esg-list-num::after{ content: ''; position: absolute; right: -70px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%;  background: #1b96d5;  z-index: -1;}
.esg-list li .esg-list-icon{ width: 130px; padding: 0 20px 0 0; }
.esg-list li .esg-list-txt{ width: calc(100% - 150px); padding-right: 55px; }

.esg-achv-pic{ width: 50%; padding-right: 3%; }
.esg-achv-txt{ width: 50%; padding: 0 20px;}
.esg-achv-txt li{ list-style: none;margin-bottom: 20px;padding: 20px;border: 1px solid #aeaeae;}
.esg-achv-txt li span{ font-size: 24px;font-weight: 600;color: #1b96d5;}

@media screen and (max-width: 1200px) {
.cts-content{ padding: 30px 0;}    
.cts-r3 > div{ width: 100%; margin-right: 0px; }    
.cts-card {flex-direction: row; align-items: center;margin-bottom: 20px;}   
.cts-card .cts-card-pic{margin-bottom: 0px; width: 20%;}
.cts-card .cts-card-txt{padding: 0 20px; width: 80%;}
    
.esg-content {margin-bottom: 0px;}    
.esg-txt{ padding-right: 40px;padding-bottom: 20px;}
.esg-slogan{position: relative; bottom: auto; padding: 3%; }   
    
.esg-list li .esg-list-num{ right: auto; bottom: auto; top: -10px; left: 20px;}
.esg-list li .esg-list-num::after{ right: auto; bottom: auto; top: -40px; left: -65px;}
.esg-list li .esg-list-icon{ width: 100px; padding:  0; margin: 0 auto 20px;}
.esg-list li .esg-list-txt{ width: 100%; padding-right: 0px; }
    
.esg-achv-pic{ width: 100%; padding-right: 0; }
.esg-achv-txt{ width: 100%; padding: 20px 0;}    
}
@media screen and (max-width: 1024px) {
.cts-r2 .cts-pic { width: 100%; padding-right: 0px; height: 280px; margin-bottom: 20px; } 
.cts-r2 .cts-txt { width: 100%; padding: 0;} 
   
.esg-content .cts-pic { order: 1;}    
.esg-content .cts-txt { order: 2;}    
}
@media screen and (max-width: 768px) {
.cts-content{ padding: 30px 0 0;}        
.cts-card .cts-card-txt .c-title04{margin-bottom: 8px;}    
.esg-txt{width: 100%; order: 2;padding-right: 0;}
.esg-pic{width: 280px; order: 1; margin: -50px auto 0;}    
.esg-slogan{ font-size: 24px; order: 3; }
.esg-list li{ width: 100%;margin: 0 0px 30px;}    
}
@media screen and (max-width: 576px) {
.cts-r2{  padding: 30px 0 0;}    
.cts-r3{  padding: 30px 0 0;}    
.cts-card { justify-content: center }  
.cts-card .cts-card-pic{width: 275px;}
.cts-card .cts-card-txt{padding: 20px 0; width: 100%;}
.cts-card .cts-card-txt .c-title04 {text-align: center;font-weight: 600; width: auto;  display: inline-block; position: relative; left: 50%; transform: translateX(-50%);}    
.esg-tit{ font-size: 20px; line-height: 1; }    
}

/*===========================*/
/*======== CTS end ========*/
/*===========================*/

/*====================================================================================================*/
/*========================================= calculate start ==========================================*/
/*====================================================================================================*/
.calculate .c-anchor {
    top: -250px;
}

.calculate {
    margin: 100px auto 135px auto;
}

.calculate__inner {
    display: block;
    width: 100%;
}

/****calculate menu****/
.calculate__menu {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 100px;
    left: 0;
    margin: 0 auto 60px auto;
    z-index: 10;
}

.calculate__menu.fixed {
    width: 100vw;
    background: #fff;
    border-left: none;
    border-right: none;
    transform: translateX(min(-60px, calc(-50vw + 775px)));
}

.calculate__menu.fixed select {
    border-left: none;
    border-right: none;
}

/****calculate box****/
.calculate__inner__box {
    display: block;
    width: 100%;
    margin: 0 auto 85px auto;
    border: 1px solid #e0e0e0;
}

.calculate__inner__box:last-child {
    margin: 0 auto;
}

/**calculate box title**/
.calculate__inner__box__title {
    display: block;
    width: 100%;
    padding: 22.5px 200px;
    color: #fff;
    text-align: center;
    background: linear-gradient(45deg, #189add 15%, #004891 100%);
}

.calculate__inner__box__title__main {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.5;
    color: inherit;
    font-family: 'NotoSansTC-M';
}

.calculate__inner__box__title__sub {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: #dedede;
    font-family: 'NotoSansTC-M';
}

/**calculate box body**/
.calculate__inner__box__body {
    display: block;
    width: 100%;
    padding: 80px 100px 125px 100px;
}

.calculate__inner__box__body+.calculate__inner__box__body .calculate__inner__box__body__form {
    margin: -145px 0 0 0;
}

.calculate__inner__box__body__notice {
    position: absolute;
    bottom: calc(100% + 22.5px);
    right: 100px;
    display: block;
    width: 100%;
    max-width: 200px;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    font-family: 'NotoSansTC-M';
    text-align: right;
}

/**calculate box body formula**/
.calculate__inner__box__body__formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto 65px auto;
}

.calculate__inner__box__body__formula__item {
    display: block;
    width: 50%;
}

.calculate__inner__box__body__formula__item::after {
    content: '';
    position: absolute;
    top: calc(50% - 22.5px);
    right: 0;
    display: block;
    width: 1px;
    height: 45px;
    background: rgba(143, 143, 143, .2);
}

.calculate__inner__box__body__formula__item:first-child:last-child {
    width: 100%;
}

.calculate__inner__box__body__formula__item:last-child::after {
    display: none;
}

.calculate__inner__box__body__formula__item[data-style="group"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: space-around;
}

.calculate__inner__box__body__formula__item__pic {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 22.5px;
}

.calculate__inner__box__body__formula__item__pic:not(:first-child) {
    margin: 60px 22.5px 22.5px 22.5px;
}

.calculate__inner__box__body__formula__item__pic[data-style="cylinder"] {
    width: 331px;
    margin: 22.5px 0;
}

.calculate__inner__box__body__formula__item__pic img {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/**calculate box body enter**/
.calculate__inner__box__body__enter {
    display: block;
    width: 100%;
    padding: 40px 0 0 0;
    border-top: 1px solid #e0e0e0;
}

.calculate__inner__box__body__enter__form {
    left: -15px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: center;
    justify-content: center;
    width: calc(100% + 30px);
    margin: 0 0 -45px 0;
}

.calculate__inner__box__body__enter__form__item {
    display: block;
    width: calc(25% - 30px);
    margin: 0 15px 45px 15px;
    text-align: center;
}

.calculate__inner__box__body__enter__form__item__text,
.calculate__inner__box__body__enter__form__item__unit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.calculate__inner__box__body__enter__form__item__text:first-child,
.calculate__inner__box__body__enter__form__item__unit:first-child {
    margin: 0 0 10px 0;
}

.calculate__inner__box__body__enter__form__item__text:last-child,
.calculate__inner__box__body__enter__form__item__unit:last-child {
    margin: 10px 0 0 0;
}

.calculate__inner__box__body__enter__form__item input {
    border: 1px solid #e0e0e0;
    text-align: center;
}

.calculate__inner__box__body__enter__form__item input:read-only {
    color: #d02700;
    background: #ededed;
    border: none;
}

/**calculate box body form**/
.calculate__inner__box__body__form {
    display: block;
    width: 100%;
}

.calculate__inner__box__body__form__bt {
    display: none;
    width: 100%;
    margin: 0 auto 20px 0;
    padding: 15px 30px 15px 0;
    font-size: 16px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: left;
    border-top: 1px solid var(--textColor);
    border-bottom: 1px solid var(--textColor);
}

.calculate__inner__box__body__form__bt::after {
    content: '';
    position: absolute;
    top: calc(50% - 4px);
    right: 0;
    display: block;
    width: 16px;
    height: 8px;
    background: url(../images/common/icon_arrow_bottom_gray.svg) center/contain no-repeat;
    transform-origin: center;
}

.calculate__inner__box__body__form__bt.active::after {
    transform: scaleY(-1);
}

.calculate__inner__box__body__form__main {
    display: block;
    width: 100%;
}

.calculate__inner__box__body__form__main__head {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.calculate__inner__box__body__form__main__head__title {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 40px 0 0;
    font-size: 15px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    flex: 0 0 auto;
}

.calculate__inner__box__body__form__main__head__input {
    max-width: 300px;
    font-size: 18px;
    text-align: center;
}

.calculate__inner__box__body__form__main__unit {
    display: block;
    width: 100%;
    margin: 7.5px 0 7.5px auto;
    font-size: 15px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: right;
}

.calculate__inner__box__body__form__main__table[data-style="flow"] .c-table__body__box__item {
    width: 10%;
}

.calculate__inner__box__body__form__main__table[data-style="pressure"] .c-table__body__box__item {
    width: calc(100% / 9);
}

.calculate__inner__box__body__form__main__table .c-table__head,
.calculate__inner__box__body__form__main__table .c-table__body {
    min-width: 1300px;
}

/*===============================*/
/*======== calculate end ========*/
/*===============================*/




/*====================================================================================================*/
/*========================================== contact start ===========================================*/
/*====================================================================================================*/
.contact {
    margin: 100px auto 200px auto;
}

/****google map****/
.contact__map {
    display: block;
    width: 100%;
    height: 390px;
    margin: 0 auto 70px auto;
}

.contact__map iframe {
    height: 100%;
}

/****google main****/
.contact__inner {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

/**company info**/
.contact__inner__info {
    display: block;
    width: calc(40% - 50px);
    max-width: 475px;
    margin: 0 50px 0 0;
    flex: 0 0 auto;
}

.contact__inner__info__title {
    margin: 0 0 25px 0;
}

.contact__inner__info__name {
    display: block;
    width: 100%;
    margin: 0 0 15px 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.contact__inner__info__box {
    display: block;
    width: 100%;
}

.contact__inner__info__box__item {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    font-size: 15px;
    line-height: 2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    opacity: .8;
}

.contact__inner__info__box__item__title {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0 1em 0 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    flex: 0 0 auto;
}

.contact__inner__info__box__item__title::after {
    content: ':';
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 5px;
}

.contact__inner__info__box__item__text {
    display: block;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    flex: 0 1 auto;
}

/**company form**/
.contact__inner__sheet {
    display: block;
    width: 100%;
    max-width: 930px;
    flex: 0 1 auto;
}

.contact__inner__sheet__title {
    margin: 0 0 20px 0;
}

.contact__inner__sheet__text {
    display: block;
    width: 100%;
    margin: 0 0 35px 0;
    font-size: 15px;
    line-height: 2;
    color: var(--textColor);
    font-family: inherit;
}

/*=============================*/
/*======== contact end ========*/
/*=============================*/



/*====================================================================================================*/
/*============================================ list start ============================================*/
/*====================================================================================================*/
.list {
    margin: 50px auto 50px auto;
}

/****sub menu****/
.list__menu {
    margin: 0 auto 50px auto;
}

/****list****/
.list__box {
    left: -50px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: calc(100% + 100px);
}

.list__box__item {
    width: calc(33.33% - 100px);
    margin: 0 50px 60px 50px;
}

/****catalog list****/
.list__catalog {
    display: block;
    width: 100%;
    z-index: 10;
}

.list__catalog.wow {
    animation-name: fadeInUp;
}

.list__menu+.list__catalog {
    margin: -30px auto 0 auto;
}

/*==========================*/
/*======== list end ========*/
/*==========================*/




/*====================================================================================================*/
/*============================================ detail start ==========================================*/
/*====================================================================================================*/
.detail {
    margin: 250px auto 160px auto;
}

.c-banner+.detail {
    margin: 0 auto 160px auto;
}

/****crumb****/
.detail__crumb {
    width: 100%;
    margin: 0 auto 65px auto;
}

/****base info****/
.detail__info {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto 80px auto;
}

.detail__info.wow {
    animation-name: fadeInUp;
}

.detail__info__pic {
    display: block;
    width: calc(50% - 50px);
    max-width: 650px;
    margin: 0 50px 0 0;
    flex: 0 0 auto;
}

.detail__info__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 35px 0;
    border-bottom: 1px solid rgba(177, 177, 177, .2);
    flex: 0 1 auto;
}

.detail__info__content__date {
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    font-size: 15px;
    line-height: 1.2;
    color: var(--mainColor);
    font-family: 'Poppins', 'NotoSansTC';
    flex: 0 0 auto;
}

.detail__info__content__title {
    display: block;
    width: 100%;
    font-size: 30px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    flex: 0 0 auto;
}

.detail__info__content__text {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 120px;
    margin: 30px 0 0 0;
    padding: 30px 0 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--textColor);
    font-family: inherit;
    border-top: 1px solid rgba(177, 177, 177, .2);
    flex: 0 1 auto;
}

.detail__info__content .c-share {
    margin: 30px 0 0 0;
}

/****detail solo share****/
.detail__share {
    display: block;
    width: 100%;
    margin: 0 0 30px 0;
}

.detail__share.wow {
    animation-name: fadeInUp;
}

.detail__crumb+.detail__share {
    margin: -30px 0 30px 0;
}

.detail__share .c-share {
    justify-items: flex-end;
    justify-content: flex-end;
}

.detail__share .c-share__list {
    width: auto;
}

/****detail info****/
.detail__box {
    display: block;
    width: 100%;
    padding: 90px max(60px, calc(50% - 500px)) 110px max(60px, calc(50% - 500px));
    background: #fff;
    border: 2px solid #eee;
}

.detail__box.wow {
    animation-name: fadeInUp;
}

.detail__box__title {
    margin: 0 0 35px 0;
}

.detail__box__edit {
    margin: 0 auto 65px auto;
}

/*============================*/
/*======== detail end ========*/
/*============================*/




/*====================================================================================================*/
/*=========================================== sitemap start ==========================================*/
/*====================================================================================================*/
.sitemap {
    margin: 95px auto 180px auto;
}

.sitemap__box {
    left: -30px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-items: flex-start;
    justify-content: flex-start;
    width: calc(100% + 60px);
}

.sitemap__box__item {
    display: block;
    width: calc(100% / 3 - 60px);
    margin: 0 30px;
    animation-name: fadeInUp;
}

.sitemap__box__item__link {
    display: block;
    width: 100%;
    padding: 35px 35px 35px 0;
    font-size: 25px;
    line-height: 1;
    color: inherit;
    font-family: 'Poppins', 'NotoSansTC';
    border-bottom: 1px solid #d2d2d2;
    transition: border-color .4s ease-in-out;
}

.sitemap__box__item__link::after {
    content: '';
    position: absolute;
    top: calc(50% - 8px);
    right: 0;
    display: block;
    width: 25px;
    height: 16px;
    background: url(../images/common/icon_arrow_next_long.svg) center no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}

.sitemap__box__item:hover .sitemap__box__item__link {
    border-color: var(--mainColor);
}

.sitemap__box__item:hover .sitemap__box__item__link::after {
    opacity: 1;
}

.sitemap__box__item__link__bold {
    display: inline-block;
    width: auto;
    max-width: 100%;
    font-size: 32px;
    line-height: .75;
    color: inherit;
    font-family: 'Poppins-SB', 'NotoSansTC-M';
}

.sitemap__box__item__link__main {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0 20px 0 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.sitemap__box__item__link__sub {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 10px 0 0 0;
    font-size: 15px;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    text-transform: uppercase;
    opacity: .45;
}

/****second floor****/
.sitemap__box__item__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 50px 35px 35px 35px;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.sitemap__box__item__list__link {
    display: block;
    width: 50%;
    margin: 0 0 25px 0;
    padding: 0 10px 0 0;
    font-size: 15px;
    line-height: 1.2;
    color: inherit;
    font-family: inherit;
    transition: color .4s ease-in-out;
}

.sitemap__box__item__list__link:hover {
    color: var(--mainColor);
}

/*=============================*/
/*======== sitemap end ========*/
/*=============================*/




/*====================================================================================================*/
/*=========================================== quality start ==========================================*/
/*====================================================================================================*/
.quality {
    margin: 85px auto 145px auto;
    overflow: visible;
}

/****process****/
.quality__process {
    display: block;
    width: 100%;
    margin: 0 0 85px 0;
}

/**title**/
.quality__process__title {
    margin: 0 0 130px 0;
}

/**process chart**/
.quality__process__chart {
    display: block;
    width: 100%;
}

.quality__process__chart__box {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.quality__process__chart__box .slick-arrow {
    top: calc(50% - 12.5px);
    width: 13px;
    height: 25px;
    background: url(../images/common/icon_arrow_next.svg) center/contain no-repeat;
}

.quality__process__chart__box__item {
    display: block;
    width: 150px;
    text-align: center;
    z-index: 10;
    flex: 0 0 auto;
}

.quality__process__chart__box__item::before {
    content: '';
    position: absolute;
    top: 74.5px;
    left: 0;
    display: block;
    width: 300px;
    height: 1px;
    background: rgba(28, 28, 28, .5);
}

.quality__process__chart__box__item:last-child:before {
    display: none;
}

.quality__process__chart__box__item__circle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    color: var(--textColor);
    text-align: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

.quality__process__chart__box__item__circle__step {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.2;
    color: inherit;
    font-family: 'Poppins-B', 'NotoSansTC-M';
}

.quality__process__chart__box__item__circle__title {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.2;
    color: inherit;
    font-family: 'Poppins-B', 'NotoSansTC-M';
}

.quality__process__chart__box__item__content {
    display: block;
    width: 100%;
    max-width: 150px;
    margin: 15px auto 0 auto;
}

.quality__process__chart__box__item__content__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: inherit;
}

/**blue style**/
.quality__process__chart__box__item[data-style="blue"] .quality__process__chart__box__item__circle {
    color: #fff;
    background: linear-gradient(45deg, #189add 15%, #004891 100%);
}

/****equipment and team****/
.quality__team {
    display: block;
    width: 100%;
    padding: 90px 80px 80px 80px;
    background: url(../images/common/texture_gray.png) center repeat;
    background-size: auto;
}

/**title**/
.quality__team__title {
    margin: 0 0 70px 0;
}

/**equipment and team intro list**/
.quality__team__box {
    left: -12.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: calc(100% + 25px);
    margin: 0 auto -55px auto;
}

.quality__team__box__item {
    width: calc(33.33% - 25px);
    margin: 0 12.5px 90px 12.5px;
}

.quality__team__box__item__pic {
    display: block;
    width: 100%;
    padding: 73.33% 0 0 0;
    overflow: hidden;
}

.quality__team__box__item__pic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.quality__team__box__item__content {
    display: block;
    width: 100%;
    margin: 25px 0 0 0;
}

.quality__team__box__item__content__text {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

/*=============================*/
/*======== quality end ========*/
/*=============================*/




/*====================================================================================================*/
/*=========================================== privacy start ==========================================*/
/*====================================================================================================*/
.privacy {
    margin: 70px auto 135px auto;
}

/****intro****/
.privacy__intro {
    display: block;
    width: 100%;
    margin: 0 auto 50px auto;
    text-align: center;
    animation-name: fadeInUp;
}

.privacy__intro__text {
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 1.8;
    color: var(--textColor);
    font-family: inherit;
}

/****privacy tip****/
.privacy__box {
    display: block;
    width: 100%;
}

.privacy__box__item {
    display: block;
    width: 100%;
    margin: 0 0 38px 0;
    padding: 70px 100px 55px 100px;
    border: 1px solid #e8e8e8;
    background: #fff;
    counter-increment: privacy;
    animation-name: fadeInUp;
}

.privacy__box__item:last-child {
    margin: 0;
}

.privacy__box__item__title {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    font-size: 17px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'Poppins-M', 'NotoSansTC-M';
}

.privacy__box__item__title::before {
    content: counter(privacy, decimal-leading-zero);
    position: relative;
    top: calc(.6em - 22.5px);
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 0 30px calc(-22.5px - .1em) 0;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    font-family: inherit;
    text-align: center;
    line-height: 45px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #e8e8e8;
    flex: 0 0 auto;
}

.privacy__box__item__content {
    display: block;
    width: 100%;
    margin: 35px 0 0 0;
    padding: 0 0 0 80px;
    font-size: 15px;
    line-height: 2.3;
    color: var(--textColor);
    font-family: inherit;
}

.privacy__box__item__content__list {
    display: block;
    width: 100%;
    list-style: none;
}

.privacy__box__item__content__list__item {
    display: block;
    width: 100%;
    padding: 0 0 0 2em;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    text-indent: -1em;
}

.privacy__box__item__content__list__item::before {
    content: "•";
}

/****contact info****/
.privacy__contact {
    display: block;
    width: 100%;
    margin: -20px auto 0 auto;
    animation-name: fadeInUp;
}

.privacy__contact::before {
    content: "";
    position: relative;
    display: block;
    width: 1px;
    height: 120px;
    margin: 0 auto 55px auto;
    background: #9d9d9d;
}

.privacy__contact__text {
    display: block;
    width: 100%;
    margin: 0 0 30px 0;
    font-size: 17px;
    line-height: 2;
    color: var(--textColor);
    font-family: inherit;
    font-family: 'NotoSansTC-M';
    text-align: center;
}

.privacy__contact__bt {
    width: 180px;
    margin: 0 auto;
}

/*=============================*/
/*======== privacy end ========*/
/*=============================*/




/*====================================================================================================*/
/*============================================ result start ==========================================*/
/*====================================================================================================*/
.result {
    margin: 80px auto 160px auto;
}

/****search result****/
.result__title {
    display: block;
    width: 100%;
    margin: 0 0 60px 0;
    padding: 0 0 0 30px;
    font-size: 17px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.result__title::before {
    content: '';
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
    display: block;
    width: 5px;
    height: 18px;
    background: var(--textColor);
    box-shadow: 5px 4px 0 var(--mainColor);
    transform: skew(-15deg);
}

.result__title__keyword {
    display: inline;
    font-size: 25px;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

/****search list****/
.result__box {
    left: -15px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: calc(100% + 30px);
}

.result__box__item {
    display: block;
    width: calc(25% - 30px);
    margin: 0 15px 80px 15px;
}

.result__box__item__pic {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.result__box__item__pic img {
    object-fit: contain;
    object-position: center;
    height: 100%;
    max-width: 215px;
    max-height: 215px;
}

.result__box__item .c-cover {
    z-index: 10;
}

.result__box__item:hover .c-cover {
    opacity: 1;
}

.result__box__item__tag {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 15px;
}

.result__box__item__tag__item {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin: 0 5px 5px 0;
    padding: 10px 30px;
    font-size: 15px;
    line-height: 1;
    color: #00488b;
    font-family: inherit;
    border-radius: 20px;
    background: #edf3f6;
}

.result__box__item__content {
    display: block;
    width: 100%;
    margin: 20px 0 0 0;
}

.result__box__item__content__title {
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 1.3;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

/*****no result****/
.result__content {
    display: block;
    width: 100%;
    margin: 100px auto 0 auto;
    padding: 0 0 50px 0;
    text-align: center;
}

.result__content__text {
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 1.6;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.result__content__bt {
    max-width: 180px;
    margin: 30px auto 0 auto;
}

/*============================*/
/*======== result end ========*/
/*============================*/




/*====================================================================================================*/
/*=========================================== register start =========================================*/
/*====================================================================================================*/
.register {
    display: block;
    width: 100%;
    margin: 200px auto 160px auto;
    animation-name: fadeInUp;
}

.register::before,
.register::after {
    content: '';
    position: absolute;
    top: -75px;
    left: calc(50% - 75px);
    display: block;
    width: 150px;
    height: 150px;
    pointer-events: none;
}

.register::before {
    border-radius: 50%;
    background:
        url(../images/common/texture_gray.png) center/contain repeat;
    background-size: auto;
}

.register::after {
    background:
        url(../images/common/icon_member_gray.svg) center/contain no-repeat;
    background-size: 25%;
}

.register__box {
    display: block;
    overflow: hidden;
    background: url(../images/common/texture_gray.png) center/contain repeat;
    background-size: auto;
    padding: 110px 30px 120px 30px;
}

.register__box__title {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 60px auto;
}

.register__box__title__main {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1;
    color: #999;
    font-family: 'Poppins-SB', 'NotoSansTC-SB';
    margin: 0 auto 5px auto;
}

.register__box__title__sub {
    display: block;
    width: 100%;
    font-size: 42px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC';
}

.register__box__inner {
    max-width: 930px;
    margin: 0 auto;
}

.register__box__inner__sheet {
    margin: 0 auto 40px auto;
}

.register__box__inner__sheet:last-child {
    margin: 0 auto;
}

.register__inner__sheet__title {
    padding: 0 0 0 25px;
    margin: 0 auto 30px auto;
}

.register__inner__sheet__title::after {
    content: '';
    position: absolute;
    top: calc(.5em - 9px);
    left: 2px;
    display: block;
    width: 5px;
    height: 18px;
    background: var(--textColor);
    box-shadow: 5px 4px 0 var(--mainColor);
    transform: skewX(-15deg);
    pointer-events: none;
}

.register__inner__sheet__title__main {
    display: block;
    width: 100%;
    font-size: 20px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC';
}

.register__inner__sheet__title__required {
    position: absolute;
    bottom: 2px;
    right: 0;
    width: auto;
    max-width: 100%;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.register__inner__sheet__title__required::before {
    content: '*';
    position: relative;
    top: .35em;
    padding: 0 8px 0 0;
    font-size: 25px;
    line-height: 1;
    color: var(--mainColor);
    font-family: inherit;
}

.register .c-form__item {
    background: #fff;
}

.register .c-form__item.required::after {
    content: '*';
    position: absolute;
    top: calc(50% - 10px);
    right: 30px;
    display: block;
    font-size: 20px;
    color: var(--mainColor);
    pointer-events: none;
}

.register .c-form__item input {
    padding: 0 25px 0 0;
}

.register .c-form__item__title::after {
    display: none;
}

.register .c-form__item__sub {
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
    color: #fd0100;
    font-family: 'NotoSansTC-M';
    margin: 0 auto 20px 1.2em;
    display: none;
}

.register .c-form__item__sub::before {
    content: '※';
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: auto;
    height: 1em;
    color: inherit;
    font-size: inherit;
    text-indent: -1.2em;
}

.register .c-form__btGroup {
    margin: 55px auto 0 auto;
}

.register .c-form__btGroup__bt {
    max-width: 200px;
}

/**otehr mode input**/
.register .c-form__noBg {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    margin: 10px auto 0 auto;
}

.register .c-form__noBg.required .c-form__noBg__title::after {
    content: '*';
    padding: 0 0 0 5px;
    font-size: 20px;
    line-height: 1;
    color: var(--mainColor);
    font-family: inherit;
}

.register .c-form__noBg.wrap {
    display: block;
}

.register .c-form__noBg__title {
    display: block;
    width: auto;
    font-size: 16px;
    line-height: 1.5;
    color: inherit;
    font-family: 'NotoSansTC-M';
    margin: 0 30px 15px 0;
    flex: 0 0 auto;
}

.register .c-form__noBg__content {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    justify-items: flex-start;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    flex: 0 1 auto;
}

.register .c-form__noBg__content__item {
    display: flex;
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-start;
    justify-items: flex-start;
    align-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 20px 20px 0;
}

/**checkbox custom text**/
.register .c-form__noBg__content__item-other {
    border: none;
    border-bottom: 1px solid #969696;
    width: 140px;
    margin: 0 0 0 10px;
    height: auto;
    padding: 0;
}

/****privacy****/
.register .c-form__privacy {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
}

.register .c-form__privacy__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.register .c-form__privacy__text__link {
    display: inline-block;
    width: auto;
    text-decoration: underline;
    text-underline-offset: 8px;
    opacity: 1;
    transition: opacity .4s ease-in-out;
}

.register .c-form__privacy__text__link:hover {
    text-decoration: underline;
    opacity: .7;
}

/*==============================*/
/*======== register end ========*/
/*==============================*/




/*====================================================================================================*/
/*=========================================== member start ===========================================*/
/*====================================================================================================*/
.member {
    display: block;
    overflow: hidden;
    background: rgba(255, 255, 255, .4);
    border: 1px solid #b8b9ba;
    margin: 100px auto 160px auto;
    animation-name: fadeInUp;
}

/****type tag****/
.member__menu {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: stretch;
    align-content: stretch;
    border-bottom: 1px solid #b8b9ba;
}

.member__menu__link {
    /*width: 50%;  20231123原設計*/
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .4);
    font-family: 'NotoSansTC-M';
    padding: 30px 20px;
    transition: background-color .4s ease-in-out, color .4s ease-in-out;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    height: 100%;
    flex: 0 1 auto;
}

.member__menu__link__title,
.member__menu__link__sub {
    display: block;
    width: auto;
    flex: 0 0 auto;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.member__menu__link.active {
    background: var(--mainColor);
    color: #fff;
    border: 1px solid var(--mainColor);
}

.member__inner {
    padding: 105px 30px 115px 30px;
    max-width: 1270px;
    margin: 0 auto;
}

.member__inner-download {
    padding: 65px 30px 120px 30px;
}

/****member info****/
/**form**/
.member__inner__form {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.member__inner__form__item {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 50%;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    padding: 0 20px 0 0;
    margin: 0 0 15px 0;
}

.member__inner__form__item:nth-child(2n) {
    padding: 0;
}

.member__inner__form__item.alignCenter {
    align-items: center;
    align-content: center;
}

.member__inner__form__item__title {
    display: block;
    width: auto;
    flex: 0 0 auto;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

.member__inner__form__item.alignStart .member__inner__form__item__title {
    top: calc(22.5px - .75em);
}

.member__inner__form__item input {
    display: block;
    width: 100%;
    flex: 0 1 auto;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    padding: 15px;
    height: 45px;
    border: 1px solid #eaeaea;
    margin: 0 10px 0 0;
    max-width: 300px;
}

.member__inner__form__item input:last-child {
    margin: 0;
}


.member__inner__form__item span {
    word-break: break-all;
}

.member__inner__form__item__title::after {
    content: '';
    position: relative;
    top: 4px;
    left: 0;
    display: inline-block;
    width: 1px;
    height: 1.2em;
    background: var(--textColor);
    margin: 0 10px;
    pointer-events: none;
}

.member__inner__form__item__password {
    width: 100%;
    flex: 0 1 auto;
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
}

.member__inner__form__btGroup {
    display: block;
    width: 100%;
    margin: 65px 0 0 0;
}

.member__inner__form__btGroup__bt {
    max-width: 200px;
    margin: 0 0 0 auto;
}

.member__inner__form__item__radio {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    flex: 0 1 auto;
}

.member__inner__form__item__radio__list {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: auto;
    cursor: pointer;
    margin: 0 30px 0 0;
}

.member__inner__form__item__radio__list input {
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
}

.member__inner__form__item__radio__list span {
    width: 100%;
    flex: 0 1 auto;
}

.member__inner__form[data-form="readOnly"],
.member__inner__form[data-form="edit"] {
    display: none;
}

#formReadCheck:checked~.member__inner__form[data-form="readOnly"] {
    display: flex;
    pointer-events: all;
}

#formEditCheck:checked~.member__inner__form[data-form="edit"] {
    display: flex;
    pointer-events: all;
}

#formEditCheck:checked~.member__inner__form[data-form="readOnly"] {
    display: none;
}

/****download area****/

.member__inner__content {
    max-width: 1245px;
}

/**type list**/
.member__inner__content__menu {
    display: block;
    width: calc(100% + 10px);
    margin: 0 auto 30px auto;
}

.member__inner__content__menu__label {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC';
    margin: 0 auto 20px auto;
}

.member__inner__content__menu__item {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: calc(100% + 10px);
}

.member__inner__content__menu__item__link {
    display: block;
    min-width: 120px;
    border: 1px solid #d0d0d0;
    background: transparent;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: center;
    width: auto;
    margin: 0 10px 10px 0;
    padding: 15px 10px;
}

.member__inner__content__menu__item__link.active {
    border: 1px solid var(--mainColor);
    background: var(--mainColor);
    color: #fff;
}

.member__inner__content__box {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: wrap;
    width: calc(100% + 50px);
    margin: 0 auto -40px auto;
}

.member__inner__content__box__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    padding: 35px 20px;
    border: 1px solid #d0d0d0;
    background: #fff;
    text-align: center;
    width: calc(25% - 50px);
    max-width: 275px;
    margin: 0 50px 40px 0;
}

.member__inner__content__box__item__icon {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid #e7e7e7;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    margin: 0 auto 20px auto;
    flex: 0 0 auto;
}

.member__inner__content__box__item__icon img {
    width: 23%;
}

.member__inner__content__box__item__bt {
    max-width: 120px;
    height: 45px;
    margin: 0 auto;
    flex: 0 0 auto;
    background: var(--mainColor);
    transition: background-color .4s ease-in-out;
}

.member__inner__content__box__item__title {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    min-height: 15px;
    flex: 0 1 auto;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    margin: 0 auto 30px auto;
    padding: 0 10px;
}

/*============================*/
/*======== member end ========*/
/*============================*/




/*====================================================================================================*/
/*========================================= cart menu start ==========================================*/
/*====================================================================================================*/
.c-cartMenu {
    display: block;
    width: 100%;
}

.c-cartMenu__list {
    display: block;
    width: 100%;
    border: 1px solid #a4a4a4;
}

.c-cartMenu__list__box {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: stretch;
    justify-content: stretch;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.c-cartMenu__list__box__item__link.active {
    background: var(--mainColor);
    color: #fff;
}

.c-cartMenu__list__box__item__link {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 0;
    font-size: 16px;
    line-height: 1.2;
    color: #a4a4a4;
    font-family: 'NotoSansTC-M';
    flex: 0 1 auto;
    word-break: break-all;
}

.c-cartMenu__list__box__item__link__sub {
    display: none;
    margin: 0 5px 0 0;
    width: auto;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}

/*===============================*/
/*======== cart menu end ========*/
/*===============================*/




/*====================================================================================================*/
/*============================================ cart start ============================================*/
/*====================================================================================================*/
/****cart__box__Menu****/
.cart__box__Menu {
    display: block;
    width: 100%;
    max-width: 930px;
    margin: 0 auto 60px auto;
}

.cart__box__Menu__list {
    display: block;
    width: 100%;
    border: 1px solid #a4a4a4;
}

.cart__box__Menu__list__content {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: stretch;
    justify-content: stretch;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    counter-reset: step;
}

.cart__box__Menu__list__content__item__link.active {
    background: var(--mainColor);
    color: #fff;
    z-index: 10;
}

.cart__box__Menu__list__content__item__link {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    padding: 25px 0;
    font-size: 16px;
    line-height: 1.2;
    color: #a4a4a4;
    font-family: 'NotoSansTC-M';
    flex: 0 1 auto;
    word-break: break-all;
    counter-increment: step;
}

.cart__box__Menu__list__content__item__link::before {
    content: "Step"counter(step, decimal);
    position: relative;
    top: -2px;
    left: 0;
    display: inline-block;
    width: auto;
    height: 1em;
    color: inherit;
    margin: 0 5px 0 0;
    display: none;
}

/****cart list****/
.cart {
    display: block;
    width: 100%;
    margin: 210px auto 150px auto;
    animation-name: fadeInUp;
}

.cart::before {
    content: '';
    position: absolute;
    top: -70px;
    left: calc(50% - 75px);
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--bgColor);
    pointer-events: none;
}

.cart::after {
    content: '';
    position: absolute;
    top: -70px;
    left: calc(50% - 75px);
    display: block;
    width: 150px;
    height: 150px;
    background:
        url(../images/common/icon_cart_gray.svg) center/contain no-repeat;
    background-size: 30%;
    pointer-events: none;
}

.cart__box {
    display: block;
    overflow: hidden;
    background: var(--bgColor);
    padding: 115px 30px 130px 30px;
}

.cart__box__title {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 60px auto;
}

.cart__box__title__main {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1;
    color: #999;
    font-family: 'Poppins-SB', 'NotoSansTC-SB';
    margin: 0 auto 5px auto;
}

.cart__box__title__sub {
    display: block;
    width: 100%;
    font-size: 42px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC';
}

.cart__box__inner__list {
    max-width: 930px;
    margin: 0 auto 60px auto;
}

.cart__box__inner {
    max-width: 930px;
    margin: 0 auto;
    width: 100%;
}

.cart__inner__sheet__title {
    margin: 0 auto 35px auto;
    border-bottom: 1px solid #d3d3d3;
}

.cart__inner__sheet__title__main {
    font-family: 'NotoSansTC';
    font-size: 23px;
}

.cart__box__inner__list__head {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: stretch;
    align-content: stretch;
    background: #1c1c1c;
    color: #fff;
    width: 100%;
}

.cart__box__inner__list__head__item {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
    font-family: 'NotoSansTC';
    border-right: 1px solid #d3d3d3;
    padding: 15px 10px;
}

.cart__box__inner__list__head__item[data-head="1"],
.cart__box__inner__list__content__item[data-list="1"] {
    width: 25%;
}

.cart__box__inner__list__head__item[data-head="2"],
.cart__box__inner__list__content__item[data-list="2"] {
    width: 45%;
}

.cart__box__inner__list__head__item[data-head="3"],
.cart__box__inner__list__content__item[data-list="3"],
.cart__box__inner__list__head__item[data-head="4"],
.cart__box__inner__list__content__item[data-list="4"] {
    width: 15%;
    flex: 1 1 auto;
}

.cart__box__inner__list__head__item[data-head="4"],
.cart__box__inner__list__content__item[data-list="4"] {
    border-right: none;
}

.cart__box__inner__list__content {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: stretch;
    align-content: stretch;
    background: #fff;
    border-bottom: 1px solid #d3d3d3;
}

.cart__box__inner__list__content:last-child {
    border-bottom: none;
}

.cart__box__inner__list__content__item {
    border-right: 1px solid #d3d3d3;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
}

.cart__box__inner__list__content__item__head {
    display: none;
}

.cart__box__inner__list__content__item__body {
    display: block;
    width: 100%;
    ;
}

.cart__box__inner__list__content__item__body__pic {
    display: block;
    width: 100%;
}

.cart__box__inner__list__content__item__body__text {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    text-align: center;
    padding: 20px;
}

.cart__box__inner__list__content__item__body__select {
    width: calc(100% - 40px);
    margin: 0 auto;
    flex: 0 1 auto;
    height: 40px;
    padding: 10px 15px;
    background-position: calc(100% - 15px) center;
}

.cart__box__inner__list__content__item__body__bt {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: calc(100% - 40px);
    max-width: 100%;
    border-radius: 20px;
    background: #c1c1c1;
    color: #fff;
    padding: 12px 5px;
    margin: 0 auto;
    transition: background-color .4s ease-in-out;
}

.cart__box__inner__list__content__item__body__bt__text {
    display: block;
    margin: 0 10px 0 0;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    font-family: 'NotoSansTC-M';
}

.cart__box__inner__list__content__item__body__bt::after {
    content: '';
    position: relative;
    display: block;
    width: 11px;
    height: 14px;
    background: url(../images/common/icon_delete_white.svg) center/contain no-repeat;
    overflow: hidden;
    flex: 0 0 auto;
}

.cart__box__inner__list__content__item__body__bt:hover {
    background: var(--mainColor);
}

/****form****/
.c-form__item {
    background: #fff;
}

.c-form__btGroup {
    margin: 50px 0 0 0;
}

.c-form__btGroup__bt {
    max-width: 200px;
}

.c-form__btGroup__bt button {
    font-family: 'NotoSansTC-M'
}

.cart__box__inner__sheet[data-type="done"] .cart__inner__sheet__form {
    margin: -20px auto 0 auto;
}

.cart__box__inner__sheet[data-type="done"] .c-form__item {
    background: none;
    padding: 0;
    min-height: 50px;
    margin: 0 auto;
    border: none;
}

.cart__box__inner__sheet[data-type="done"] .c-form__item textarea {
    min-height: auto;
}

.cart__box__inner__sheet[data-type="done"] .c-form__item__title {
    margin: 0;
}

.cart__box__inner__sheet[data-type="done"] .c-form__item.wrap .c-form__item__title {
    margin: 10px 0 10px 0;
}

.cart__box__inner__sheet[data-type="done"] .c-form__item__title::after {
    content: '';
    position: relative;
    top: 2px;
    right: 0;
    display: inline-block;
    width: 1px;
    height: 1em;
    background: var(--textColor);
    margin: 0 15px;
    pointer-events: none;
}

/****no prodcut****/
.cart__box__state {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    flex-direction: column;
    padding: 30px 0 0 0;
}

.cart__box__state[data-state="vacancy"] {
    display: none;
}

.cart__box__state__inner__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1c1c1c;
    margin: 0 auto 25px auto;
}


.cart__box__state[data-state="vacancy"] .cart__box__state__inner__icon::before,
.cart__box__state[data-state="vacancy"] .cart__box__state__inner__icon::after {
    content: '';
    position: absolute;
    top: calc(50% - .5px);
    left: calc(50% - 11px);
    display: block;
    width: 22px;
    height: 1px;
    background: #fff;
    transform: rotate(45deg);
    pointer-events: none;
}

.cart__box__state[data-state="vacancy"] .cart__box__state__inner__icon::after {
    transform: rotate(-45deg);
}

.cart__box__state__inner__text {
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC';
    margin: 0 auto 50px auto;
}

.cart__box__state .c-form__btGroup__bt {
    margin: 0 auto;
    background: var(--mainColor);
}

/***Finish***/
.cart__box__state[data-state="finish"] .cart__box__state__inner__icon::before {
    content: '';
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 9.5px);
    display: block;
    width: 19px;
    height: 14px;
    background: url(../images/common/icon_check_white.svg) center/contain no-repeat;
    pointer-events: none;
}

/*==========================*/
/*======== cart end ========*/
/*==========================*/




/*====================================================================================================*/
/*========================================== product start ===========================================*/
/*====================================================================================================*/
.product {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: space-between;
    margin: 40px auto 60px auto;
}

/****aside menu****/
.product__aside {
    max-width: 380px;
    margin: 0 115px 0 0;
    z-index: 100;
    animation-name: fadeIn;
}

/****main content****/
.product__main {
    display: block;
    width: 100%;
    flex: 0 1 auto;
}

/**switch menu**/
.product__main__swtich {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 50px 0;
}

.product__main__swtich__bt {
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: calc(50% - 5px);
    padding: 20px;
    font-size: 15px;
    line-height: 1.2;
    color: rgba(36, 72, 90, .4);
    font-family: 'NotoSansTC-M';
    border-radius: 5px;
    background: #edf3f6;
    transition: color .4s ease-in-out;
    overflow: hidden;
    flex: 0 1 auto;
}

.product__main__swtich__bt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #1b96d5 30%, #055eba 100%);
    opacity: 0;
    transition: opacity .4s ease-in-out;
}

.product__main__swtich__bt.active,
.product__main__swtich__bt:hover {
    color: #fff;
}

.product__main__swtich__bt.active::before,
.product__main__swtich__bt:hover::before {
    opacity: 1;
}

/**main content box**/
.product__main__box {
    display: block;
    width: 100%;
}

.product__main__box.j-pageTag-box {
    display: none;
}

.product__main__box.active {
    display: block;
}

.product__main__box__content {
    display: block;
    width: 100%;
    margin: 0 0 55px 0;
}

.product__main__box__content__title {
    margin: 0 0 25px 0;
    animation-name: fadeInUp;
}

.product__main__box__content__text {
    animation-name: fadeInUp;
}

.product__main__box__content__edit {
    animation-name: fadeInUp;
}

.product__main__box__list {
    left: -14px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    justify-content: flex-start;
    width: calc(100% + 28px);
}

.product__main__box__list.wow {
    animation-name: fadeInUp;
}

.product__main__box__list__item {
    width: calc(33.33% - 28px);
    margin: 0 14px 60px 14px;
    animation-name: fadeInUp;
}

.product__main__box__bt {
    max-width: 180px;
    height: 60px;
    margin: 45px auto 90px auto;
    border-radius: 5px;
}

.product__main__box__bt.hide {
    display: none;
}

/*===============================*/
/*======== product end ========*/
/*===============================*/




/*====================================================================================================*/
/*====================================== product detail start ========================================*/
/*====================================================================================================*/
.productDetailBox {
    margin: 260px auto 0 auto;
}

.productDetailBox .crumb {
    max-width: 1400px;
}

/****header intro****/
.detailHeader {
    display: flex;
    justify-content: space-between;
    justify-items: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    max-width: 1400px;
    margin: 65px auto 0 auto;
    overflow: hidden;
}

.detailHeader__pic {
    display: block;
    width: 35%;
    flex: 0 0 auto;
    animation-name: fadeInUp;
}

.detailHeader__pic__slick {
    display: block;
    width: 100%;
}

.detailHeader__pic__slick__item {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    width: 500px;
    padding: 70px 30px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.detailHeader__pic__slick__item img {
    object-fit: contain;
    object-position: center;
    height: 100%;
    max-width: 370px;
    max-height: 370px;
    margin: 0 auto;
}

.detailHeader__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 0 5%;
    flex: 0 1 auto;
    animation-name: fadeInUp;
}

.detailHeader__content__title {
    display: block;
    width: 100%;
    height: auto;
    font-size: 30px;
    line-height: 1.2;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
    letter-spacing: 1px;
    color: inherit;
    flex: 0 0 auto;
    border-bottom: var(--border);
    padding: 0 0 35px 0;
    margin: 0 0 30px 0;
}

.detailHeader__content__sub {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mainColor);
    font-family: 'Poppins', 'NotoSansTC';
    letter-spacing: 1px;
    text-align: justify;
    flex: 0 1 auto;
}

.detailHeader__content__text {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 0 70px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--textColor);
    font-family: inherit;
    flex: 0 1 auto;
}

.detailHeader__content__pic {
    margin: 0 auto 75px auto;
}

.detailHeader__content__pic__item {
    display: block;
    width: 100%;
}

.detailHeader__content__btGroup {
    display: flex;
    justify-content: space-between;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    border-bottom: var(--border);
    padding: 0 0 50px 0;
}

.detailHeader__content__btGroup__bt {
    max-width: 180px;
}

/**picture slick**/
.slick-dots li {
    background: #b1b1b1;
    margin: 0 7.5px;
}

.slick-dots li.slick-active {
    background: var(--mainColor);
}

/****detail content****/
.prodcutDetail {
    max-width: 1400px;
    margin: 85px auto 185px auto;
    animation-name: fadeInUp;
}

/****detail menu****/
.prodcutDetail__menu {
    margin: 0 auto -1px auto;
    z-index: 10;
}

.prodcutDetail__menu__list {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    border: 1px solid #eee;
    border-bottom: 1px solid #d4d4d4;
}

.prodcutDetail__menu__list__bt {
    display: block;
    width: 33.33%;
    background: rgba(221, 221, 221, .5);
    text-align: center;
    padding: 35px 20px;
    font-size: 18px;
    line-height: 1;
    color: #bababa;
    font-family: 'NotoSansTC-M';
    transition: background-color .4s ease-in-out, color .4s ease-in-out;
}

.prodcutDetail__menu__list__bt::after {
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 22.5px);
    display: block;
    width: 1px;
    height: 45px;
    background: rgba(177, 177, 177, .2);
    pointer-events: none;
}

.prodcutDetail__menu__list__bt:last-child:after {
    display: none;
}

.prodcutDetail__menu__list__bt.active {
    background: var(--mainColor);
    color: #fff;
}

.prodcutDetail__menu__list__select {
    margin: 0 0 -.5px 0;
    border: 1px solid #eee;
    display: none;
}

.prodcutDetail .detail__box__edit {
    display: none;
}

.prodcutDetail .detail__box__edit.active {
    display: block;
}

/*====================================*/
/*======== product detail end ========*/
/*====================================*/




/*====================================================================================================*/
/*========================================= message start ============================================*/
/*====================================================================================================*/
.message {
    display: flex;
    justify-content: flex-start;
    justify-items: flex-start;
    align-items: center;
    align-content: center;
    flex-direction: column;
    max-width: 1000px;
    margin: 0 auto;
    min-height: calc(100vh - 500px);
    overflow: hidden;
    animation-name: fadeInUp;
}

.message p {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 36px;
    line-height: 1;
    color: var(--textColor);
    font-family: 'NotoSansTC-M';
}

.message__title {
    margin: 0 auto 20px auto;
}

.message__bt {
    margin: 40px auto 0 auto;
    max-width: 180px;
}

/*=============================*/
/*======== message end ========*/
/*=============================*/
@media screen and (max-width: 1600px) {

    /*====================================================================================================*/
    /*=========================================== quality start ==========================================*/
    /*====================================================================================================*/
    /**process chart**/
    .quality__process__chart__box {
        left: -15px;
        flex-wrap: wrap;
        width: calc(100% + 30px);
        max-width: 800px;
    }

    .quality__process__chart__box__item {
        margin: 0 15px 30px 15px;
    }

    .quality__process__chart__box__item:nth-child(4n):before {
        display: none;
    }

    /*============================*/
    /*======== quality end========*/
    /*============================*/
}

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

    /*====================================================================================================*/
    /*=========================================== about start ============================================*/
    /*====================================================================================================*/
    /****gray background area****/
    .about__introbox {
        padding: 140px 150px 150px 150px;
    }

    /****core values****/
    /**core chart**/
    .about__value__inner__graph {
        margin: 0 0 0 10%;
    }

    /*===========================*/
    /*======== about end ========*/
    /*===========================*/
}

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

    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    /****quality****/
    .c-quality__inner__slick__content {
        padding: 0 0 0 100px;
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== about start ============================================*/
    /*====================================================================================================*/
    /****gray background area****/
    .about__introbox {
        padding: 120px 70px 120px 70px;
    }

    /****core values****/
    /**core chart**/
    .about__value__inner__graph {
        margin: 0 0 0 5%;
    }

    /*===========================*/
    /*======== about end ========*/
    /*===========================*/




    /*====================================================================================================*/
    /*============================================ list start ============================================*/
    /*====================================================================================================*/
    /****video list****/
    .list__box {
        left: -10px;
        width: calc(100% + 20px);
    }

    .list__box__item {
        width: calc(33.33% - 20px);
        margin: 0 10px 60px 10px;
    }

    /*==========================*/
    /*======== list end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*========================================== product start ===========================================*/
    /*====================================================================================================*/
    /****aside menu****/
    .product__aside {
        max-width: 300px;
        margin: 0 55px 0 0;
    }

    /****main content****/
    /**main content box**/
    .product__main__box__list {
        left: -8px;
        width: calc(100% + 16px);
    }

    .product__main__box__list__item {
        width: calc(33.33% - 16px);
        margin: 0 8px 55px 8px;
    }

    /*===============================*/
    /*======== product end ========*/
    /*===============================*/
}

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

    /*====================================================================================================*/
    /*=========================================== sitemap start ==========================================*/
    /*====================================================================================================*/
    .sitemap__box {
        left: -15px;
        width: calc(100% + 30px);
    }

    .sitemap__box__item {
        width: calc(100% / 3 - 30px);
        margin: 0 15px;
    }

    .sitemap__box__item__link__bold {
        margin: 0 0 18px 0;
        line-height: 1;
    }

    .sitemap__box__item__link__sub {
        display: block;
    }

    /*=============================*/
    /*======== sitemap end ========*/
    /*=============================*/
}

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

    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    /****button style****/
    /**download style**/
    .c-download {
        padding: 15px 30px;
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*========================================= calculate start ==========================================*/
    /*====================================================================================================*/
    /**calculate box body**/
    .calculate__inner__box__body {
        padding: 80px 50px 125px 50px;
    }

    /*===============================*/
    /*======== calculate end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*========================================== contact start ===========================================*/
    /*====================================================================================================*/

    /****google main****/
    .contact__inner {
        flex-wrap: wrap;
    }

    /**company info**/
    .contact__inner__info {
        width: 100%;
        max-width: none;
        margin: 0;
        order: 2;
    }

    /**company form**/
    .contact__inner__sheet {
        max-width: none;
        margin: 0 0 95px 0;
    }

    /*=============================*/
    /*======== contact end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*============================================ result start ==========================================*/
    /*====================================================================================================*/
    .result__box__item {
        width: calc(33.33% - 30px);
    }

    /*============================*/
    /*======== result end ========*/
    /*============================*/
}

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

    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    /****quality****/
    .c-quality {
        margin: 0 auto 80px auto;
    }

    .c-quality::after {
        display: none;
    }

    .c-quality__inner {
        display: block;
        width: calc(100% - 120px);
        margin: 0 auto;
        padding: 115px 0 0 0;
    }

    .c-quality::before {
        width: 1080px;
        height: calc(100% - 135px);
        left: -250px;
        right: auto;
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
    }

    .c-quality__inner__title__main {
        font-size: 50px;
        margin: 30px auto 25px auto;
    }

    .c-quality__inner__title__sub {
        width: 55%;
    }

    .c-quality__inner__title__text {
        font-size: 17px;
        width: calc(100% - 170px);
        margin: 0 auto 0 0;
    }

    .c-quality__inner__slick__content {
        width: calc(100% + 30px);
        padding: 0;
        margin: 65px auto 185px auto;
    }

    .c-quality__inner__slick__content__item {
        width: 500px;
        margin: 0 30px 0 0;
    }

    /**arrows**/
    .c-quality__inner__slick__content .slick-arrow {
        bottom: auto;
        top: -95px;
        left: auto;
    }

    .c-quality__inner__slick__content .slick-prev {
        right: 170px;
    }

    .c-quality__inner__slick__content .slick-next {
        right: 30px;
    }

    .c-quality__inner__slick__count {
        justify-content: flex-end;
        position: absolute;
        bottom: auto;
        top: -90px;
        left: auto;
        right: 48px;
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== about start ============================================*/
    /*====================================================================================================*/
    /****gray background area****/
    .about__introbox__bottom {
        justify-content: center;
        max-width: 640px;
        margin: 0 auto -40px auto;
    }

    .about__introbox__bottom__item {
        width: 50%;
        margin: 0 auto 40px auto;
    }

    /****core values****/
    .about__value {
        padding: 120px 0 150px 0;
    }

    .about__value__main {
        margin: 0 auto 60px auto;
    }

    .about__value__inner {
        display: block;
    }

    /**core**/
    .about__value__inner__textArea {
        margin: 0 auto 50px auto;
    }

    .about__value__inner__textArea__item {
        margin: 0 auto 35px auto;
    }

    .about__value__inner__textArea__item__title {
        margin: 0 auto 15px auto;
    }

    /**core chart**/
    .about__value__inner__graph {
        margin: 0 auto;
    }

    /*===========================*/
    /*======== about end ========*/
    /*===========================*/
}

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

    /*====================================================================================================*/
    /*=========================================== member start ===========================================*/
    /*====================================================================================================*/
    .member__inner-download {
        padding: 40px 30px 105px 30px;
    }

    /****download area****/

    .member__inner__content__box {
        width: calc(100% + 40px);
    }

    .member__inner__content__box__item {
        width: calc(33.33% - 40px);
        margin: 0 40px 40px 0;
        padding: 45px 20px 30px 20px;
        max-width: 100%;
    }

    .member__inner__content__box__item__icon {
        width: 100px;
        height: 100px;
        margin: 0 auto 25px auto;
    }

    .member__inner__content__box__item__icon img {
        width: 27%;
    }

    /*============================*/
    /*======== member end ========*/
    /*============================*/
}

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

    /*====================================================================================================*/
    /*=========================================== title start ============================================*/
    /*====================================================================================================*/
    /****title01****/
    .c-title01 {
        font-size: 50px;
    }

    /****title03****/
    .c-title03__sub {
        font-size: 17px;
    }

    .c-title03__main {
        margin: 30px 0 0 0;
        font-size: 45px;
    }

    /****title05****/
    .c-title05 {
        font-size: 28px;
    }


    /****title06****/
    .c-title06__main {
        font-size: 17px;
    }

    .c-title06__more {
        font-size: 16px;
    }

    /*===========================*/
    /*======== title end ========*/
    /*===========================*/




    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    .c-content {
        width: calc(100% - 60px);
    }

    /****crumb****/
    .crumb {
        width: calc(100% - 60px);
    }

    /****public banner****/
    .c-banner__content {
        width: calc(100% - 60px);
        padding: 150px 0 140px 0;
    }

    .c-banner__content__main {
        font-size: 50px;
    }

    /****mouse effects****/
    .hoverBg {
        display: none;
    }

    /****quality****/
    .c-quality__inner {
        width: calc(100% - 60px);
    }

    .c-quality__inner__slick__content__item {
        width: 450px;
    }

    .c-quality__inner__title__main {
        font-size: 50px;
    }

    .c-quality__inner__title__sub {
        width: calc(50vw + 85px);
        font-size: 17px;
    }

    /****submenu****/
    .c-subMenu {
        border: none;
    }

    .c-subMenu__list {
        display: none;
    }

    .c-subMenu__list__box__item__link {
        padding: 25px 0;
    }

    .c-subMenu__select {
        display: block;
    }

    /****catalog menu****/
    .c-catalog__main__type {
        min-width: 210px;
        margin: 0 20px 0 0;
    }

    /****aside****/
    /**open menu button**/
    .c-aside__bt {
        display: block;
    }

    /**aside menu**/
    /*first menu*/
    .c-aside__box {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
        justify-items: flex-start;
        justify-content: flex-start;
        height: calc(100% - 300px);
        max-height: 800px;
        padding: 50px 55px 0 55px;
        background: #fff;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .07);
        transform: translateY(100%);
        z-index: 100;
    }

    .c-aside__box__head {
        display: flex;
    }

    .c-aside__box__list {
        height: 100%;
        overflow-y: scroll;
        touch-action: auto;
    }

    .c-aside__box__list::after {
        content: '';
        position: sticky;
        position: -webkit-sticky;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 50px;
        margin: -50px 0 0 0;
        background: linear-gradient(to top, #fff 50%, rgba(255, 255, 255, 0) 100%);
        z-index: 10;
    }

    .c-aside__box__list.scrollBottom::after {
        opacity: 0;
        pointer-events: none;
    }

    /****news box****/
    /**content**/
    .c-news__content {
        margin: 15px 0 0 0;
    }

    .c-news__content__title {
        font-size: 15px;
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*========================================== lightbox start ==========================================*/
    /*====================================================================================================*/
    /****dialog****/
    .c-lightbox__inner__message {
        width: calc(100% - 60px);
    }

    .c-lightbox__inner__video__content {
        width: calc(100% - 60px);
    }

    /****login****/
    .c-lightbox__inner__member {
        width: calc(100% - 60px);
    }

    /*==============================*/
    /*======== lightbox end ========*/
    /*==============================*/




    /*====================================================================================================*/
    /*=========================================== about start ============================================*/
    /*====================================================================================================*/
    .about {
        padding: 100px 0 0 0;
    }

    /****company message****/
    .about__message__title {
        margin: 0 auto 30px auto;
    }

    .about__message__inner__intro {
        display: block;
        margin: 0 auto 60px auto;
    }

    .about__message__inner__intro__bold {
        width: 100%;
        margin: 0 auto 15px auto;
    }

    .about__message__inner__content {
        display: block;
        margin: 0 auto 145px auto;
    }

    .about__message__inner__content__pic {
        width: 100%;
        margin: 0 auto 20px auto;
    }

    .about__message__inner__content__pic:last-child {
        margin: 0 auto;
    }

    /****gray background area****/
    .about__introbox {
        padding: 100px 30px;
    }

    .about__introbox::after {
        top: -200px;
        right: -60px;
        width: 600px;
        font-size: 150px;
    }

    .about__introbox__content__item {
        margin: 0 auto 40px auto;
    }

    .about__introbox__content__item__highlights {
        margin: 5px 0 0 0;
    }

    .about__introbox__content__item__highlights__main {
        margin: 0 30px 10px 0;
    }

    /****video lightbox****/
    .about__video {
        margin: -275px auto 0 auto;
    }

    .about__video__bg__btOpen {
        top: calc((50% - 60px) + 140px);
        left: calc(50% - 60px);
        width: 120px;
        height: 120px;
    }

    /****core values****/
    /**title**/
    .about__value__main__title {
        font-size: 60px;
    }

    /*===========================*/
    /*======== about end ========*/
    /*===========================*/




    /*====================================================================================================*/
    /*========================================= calculate start ==========================================*/
    /*====================================================================================================*/
    .calculate .c-anchor {
        top: -220px;
    }

    .calculate {
        margin: 100px auto 115px auto;
    }

    /****calculate menu****/
    .calculate__menu.fixed {
        transform: translateX(-30px);
    }

    /****calculate box****/
    .calculate__inner__box {
        margin: 0 auto 80px auto;
    }

    /**calculate box title**/
    .calculate__inner__box__title {
        padding: 22.5px 160px;
    }

    /**calculate box body**/
    .calculate__inner__box__body {
        padding: 45px 20px 55px 20px;
    }

    .calculate__inner__box__body__notice {
        right: 25px;
        max-width: 160px;
    }

    /**calculate box body formula**/
    .calculate__inner__box__body__formula {
        margin: 0 auto 45px auto;
    }

    .calculate__inner__box__body__formula__item {
        width: 100%;
        margin: 0 0 50px 0;
    }

    .calculate__inner__box__body__formula__item::after {
        display: none;
    }

    .calculate__inner__box__body__formula__item:last-child {
        margin: 0;
    }

    /**calculate box body enter**/
    .calculate__inner__box__body__enter {
        padding: 35px 0 0 0;
    }

    .calculate__inner__box__body__enter__form {
        margin: 0 0 -25px 0;
    }

    .calculate__inner__box__body__enter__form__item {
        width: calc(50% - 30px);
        margin: 0 15px 25px 15px;
    }

    .calculate__inner__box__body+.calculate__inner__box__body .calculate__inner__box__body__form {
        margin: 0;
    }

    .calculate__inner__box__body__form__main__table[data-style="flow"] .c-table__body__box__item {
        width: 100%;
    }

    .calculate__inner__box__body__form__main__table[data-style="pressure"] .c-table__body__box__item {
        width: 100%;
    }

    /*===============================*/
    /*======== calculate end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*========================================== contact start ===========================================*/
    /*====================================================================================================*/
    .contact {
        margin: 110px auto 125px auto;
    }

    /****google map****/
    .contact__map {
        height: 350px;
        margin: 0 auto 60px auto;
    }

    /*=============================*/
    /*======== contact end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*============================================ list start ============================================*/
    /*====================================================================================================*/
    /****sub menu****/
    .list__menu {
        margin: 0 auto 55px auto;
    }

    /****list****/
    .list__box__item {
        width: calc(50% - 20px);
        margin: 0 10px 90px 10px;
    }

    /****catalog list****/
    .list__menu+.list__catalog {
        margin: 0 auto;
    }

    /*==========================*/
    /*======== list end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*============================================ detail start ==========================================*/
    /*====================================================================================================*/
    .detail {
        margin: 250px auto 100px auto;
    }

    .c-banner+.detail {
        margin: 0 auto 100px auto;
    }

    /****crumb****/
    .detail__crumb {
        margin: 0 auto 55px auto;
    }

    /****detail solo share****/
    .detail__share {
        margin: 0 0 25px 0;
    }

    .detail__crumb+.detail__share {
        margin: 0 0 25px 0;
    }

    /****base info****/
    .detail__info {
        display: block;
        margin: 0 auto 50px auto;
    }

    .detail__info__pic {
        width: 100%;
        max-width: none;
        margin: 0 0 35px 0;
    }

    .detail__info__content {
        display: block;
    }

    .detail__info__content__date {
        font-size: 13px;
    }

    .detail__info__content__title {
        font-size: 27px;
    }

    /****detail info****/
    .detail__box {
        padding: 75px 30px 100px 30px;
        border: 1px solid #eee;
    }

    /*============================*/
    /*======== detail end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== sitemap start ==========================================*/
    /*====================================================================================================*/
    .sitemap {
        margin: 50px auto 115px auto;
    }

    .sitemap__box {
        left: 0;
        width: 100%;
    }

    .sitemap__box__item {
        width: 100%;
        margin: 0;
    }

    .sitemap__box__item__link {
        padding: 40px 35px 40px 0;
        font-size: 25px;
    }

    .sitemap__box__item__link::after {
        opacity: 1;
    }

    .sitemap__box__item__link__bold {
        margin: 0 15px 0 0;
        font-size: 28px;
    }

    .sitemap__box__item__link__main {
        margin: 0 15px 0 0;
    }

    .sitemap__box__item__link__sub {
        display: inline-block;
    }

    /****second floor****/
    .sitemap__box__item__list {
        padding: 50px 0 30px 0;
    }

    .sitemap__box__item__list__link {
        margin: 0 0 30px 0;
    }

    /*=============================*/
    /*======== sitemap end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*=========================================== quality start ==========================================*/
    /*====================================================================================================*/
    .quality {
        margin: 100px auto 105px auto;
    }

    /****process****/
    .quality__process {
        margin: 0 0 70px 0;
    }

    /**title**/
    .quality__process__title {
        margin: 0 0 65px 0;
    }

    /****equipment and team****/
    .quality__team {
        padding: 80px 30px 30px 30px;
    }

    /**title**/
    .quality__team__title {
        margin: 0 0 60px 0;
    }

    /**equipment and team intro list**/
    .quality__team__box {
        left: -10px;
        width: calc(100% + 20px);
        margin: 0 auto;
    }

    .quality__team__box__item {
        width: calc(50% - 20px);
        margin: 0 10px 70px 10px;
    }

    .quality__team__box__item__content {
        margin: 15px 0 0 0;
    }

    .quality__team__box__item__content__text {
        font-size: 15px;
    }

    /*=============================*/
    /*======== quality end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*=========================================== privacy start ==========================================*/
    /*====================================================================================================*/

    /****intro****/
    .privacy__intro__text {
        font-size: 16px;
    }

    /****privacy tip****/
    .privacy__box__item {
        padding: 60px 30px 50px 30px;
        margin: 0 0 45px 0;
    }

    .privacy__box__item:last-child {
        margin: 0;
    }

    .privacy__box__item__content {
        margin: 30px 0 0 0;
        padding: 0;
        font-size: 15px;
    }

    /****contact info****/
    .privacy__contact__text {
        margin: 0 0 25px 0;
        font-size: 16px;
    }

    /*=============================*/
    /*======== privacy end ========*/
    /*=============================*/





    /*====================================================================================================*/
    /*============================================ result start ==========================================*/
    /*====================================================================================================*/
    .result {
        margin: 100px auto 115px auto;
    }

    /****search list****/
    .result__box {
        left: -12.5px;
        width: calc(100% + 25px);
    }

    .result__box__item {
        width: calc(50% - 25px);
        margin: 0 12.5px 55px 12.5px;
    }

    .result__box__item__content {
        margin: 15px 0 0 0;
    }

    .result__box__item__content__title {
        font-size: 16px;
    }

    /*****no result****/
    .result__content {
        padding: 0;
    }

    /*============================*/
    /*======== result end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== register start =========================================*/
    /*====================================================================================================*/
    .register {
        margin: 190px auto 140px auto;
    }

    .register__box {
        padding: 125px 30px 120px 30px;
    }

    .register__box__title__main {
        font-size: 16px;
    }

    .register__box__title__sub {
        font-size: 35px;
    }

    .register .c-form__btGroup {
        margin: 35px auto 0 auto;
    }

    /*==============================*/
    /*======== register end ========*/
    /*==============================*/




    /*====================================================================================================*/
    /*=========================================== member start ===========================================*/
    /*====================================================================================================*/
    .member {
        margin: 50px auto 110px auto;
    }

    .member__inner {
        padding: 65px 30px 85px 30px;
    }

    /****type tag****/
    .member__menu__link {
        font-size: 16px;
    }

    /**form**/
    .member__inner__form {
        display: block;
    }

    .member__inner__form__item {
        width: 100%;
        padding: 0;
    }

    /*============================*/
    /*======== member end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*========================================= cart menu start ==========================================*/
    /*====================================================================================================*/
    .c-cartMenu {
        border: none;
    }

    .c-cartMenu__list__box__item__link {
        padding: 25px 0;
    }

    /*===============================*/
    /*======== cart menu end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*============================================ cart start ============================================*/
    /*====================================================================================================*/
    /****cart__box__Menu****/
    .cart__box__Menu {
        border: none;
    }

    .cart__box__Menu__list__content__item__link {
        padding: 25px 0;
    }

    /****cart list****/
    .cart {
        margin: 190px auto 150px auto;
    }

    .cart__box {
        padding: 125px 30px 90px 30px;
    }

    .cart__box__title__main {
        font-size: 16px;
    }

    .cart__box__title__sub {
        font-size: 38px;
    }

    .cart__box__inner__list {
        margin: 0 auto 70px auto;
    }

    .cart__box__inner__list__head__item[data-head="1"],
    .cart__box__inner__list__content__item[data-list="1"] {
        width: 29%;
    }

    .cart__box__inner__list__head__item[data-head="2"],
    .cart__box__inner__list__content__item[data-list="2"] {
        width: 37%;
    }

    .cart__box__inner__list__head__item[data-head="3"],
    .cart__box__inner__list__content__item[data-list="3"],
    .cart__box__inner__list__head__item[data-head="4"],
    .cart__box__inner__list__content__item[data-list="4"] {
        width: 17%;
    }

    .cart__box__inner__list__content__item__body__bt {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    .cart__box__inner__list__content__item__body__bt__text {
        display: none;
    }

    /****form****/
    .c-form__btGroup {
        flex-wrap: wrap;
        margin: 0;
    }

    .c-form__btGroup__captcha {
        width: 100%;
        margin: 0 0 55px 0;
    }

    /****no prodcut****/
    .cart__box__state {
        padding: 25px 0 0 0;
    }

    /*==========================*/
    /*======== cart end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*========================================== product start ===========================================*/
    /*====================================================================================================*/
    .product {
        display: block;
        margin: 100px auto 90px auto;
    }

    .product::before {
        display: none;
    }

    /****aside menu****/
    .product__aside {
        max-width: none;
        margin: 0 0 60px 0;
    }

    /**main content box**/
    .product__main__box__bt {
        margin: 15px auto 90px auto;
    }

    /*===============================*/
    /*======== product end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*====================================== product detail start ========================================*/
    /*====================================================================================================*/
    /****header intro****/
    .detailHeader {
        display: block;
    }

    .detailHeader__pic {
        width: 100%;
    }

    .detailHeader__pic__slick__item {
        padding: 52px 30px;
    }

    .detailHeader__pic__slick__item img {
        max-width: 315px;
        max-height: 315px;
    }

    .detailHeader__content {
        margin: 0 auto;
    }

    .detailHeader__content__title {
        padding: 0 0 30px 0;
        margin: 0 0 30px 0;
    }

    /**picture slick**/
    .slick-dotted.slick-slider {
        margin-bottom: 60px;
    }

    .prodcutDetail {
        margin: 105px auto 135px auto;
    }

    /*====================================*/
    /*======== product detail end ========*/
    /*====================================*/
}

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

    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    /****anchor****/
    .c-anchor {
        top: -100px;
    }

    /****public banner****/
    .c-banner {
        padding: 65px 0 0 0;
    }

    .c-banner__content__title {
        padding: 0;
    }

    /****pubic table****/
    .c-table {
        padding: 0;
        overflow: hidden;
    }

    .c-table__head {
        display: none;
    }

    .c-table__body__box {
        display: block;
        margin: 0 0 20px 0;
        border: 1px solid rgba(234, 234, 234, .6);
    }

    .c-table__body__box__item {
        border: none;
        border-bottom: 1px solid rgba(234, 234, 234, .6);
    }

    .c-table__body__box__item__title {
        display: flex;
    }

    /****quality****/
    .c-quality__inner__slick__content__item {
        width: 340px;
    }

    /****form****/
    .c-form__item.two {
        width: 100%;
    }

    /****catalog menu****/
    .c-catalog__main {
        flex-wrap: wrap;
        padding: 30px 55px 30px 0;
    }

    .c-catalog__main::before {
        top: calc(50% - 20px);
        width: 40px;
        height: 40px;
    }

    .c-catalog__main__type {
        width: 100%;
        min-width: 0;
        margin: 0 0 10px 0;
    }

    .c-catalog__main__type__item {
        padding: 0 0 0 15px;
        border-radius: 0;
        border: none;
    }

    .c-catalog__main__type__item::before {
        content: '';
        position: absolute;
        top: calc(.6em - 2.5px);
        left: 0;
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--mainColor);
        overflow: hidden;
    }

    /****aside****/
    /**aside menu**/
    /*first menu*/
    .c-aside__box {
        height: calc(100% - 150px);
    }

    /****news info box****/
    .c-newsInfoBox {
        top: max(85px, calc(50vh - 170px));
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*========================================= calculate start ==========================================*/
    /*====================================================================================================*/
    .calculate .c-anchor {
        top: -170px;
    }

    /****calculate menu****/
    .calculate__menu {
        top: 65px;
        margin: 0 auto 40px auto;
    }

    /**calculate box title**/
    .calculate__inner__box__title {
        padding: 15px 0;
    }

    .calculate__inner__box__title__main {
        font-size: 16px;
    }

    .calculate__inner__box__title__sub {
        display: none;
    }

    /**calculate box body**/
    .calculate__inner__box__body {
        padding: 35px 20px 40px 20px;
    }

    .calculate__inner__box__body__notice {
        position: relative;
        bottom: 0;
        right: 0;
        margin: -25px 0 25px 0;
        padding: 0 10px 0 0;
        max-width: none;
        font-size: 14px;
        color: var(--textColor);
    }

    /**calculate box body enter**/
    .calculate__inner__box__body__enter__form {
        left: 0;
        width: 100%;
    }

    .calculate__inner__box__body__enter__form__item {
        width: 100%;
        margin: 0 0 25px 0;
    }

    .calculate__inner__box__body__enter__form__item__text {
        display: block;
    }

    .calculate__inner__box__body__enter__form__item__unit {
        display: block;
        margin: 5px 0 5px auto;
        text-align: right;
    }

    .calculate__inner__box__body__enter__form__item__unit:first-child {
        margin: 0 0 5px auto;
    }

    .calculate__inner__box__body__enter__form__item__unit:last-child {
        margin: 5px 0 0 auto;
    }

    .calculate__inner__box__body+.calculate__inner__box__body .calculate__inner__box__body__form {
        margin: -45px 0 0 0;
    }

    .calculate__inner__box__body__form__bt {
        display: flex;
    }

    .calculate__inner__box__body__form__main {
        display: none;
    }

    .calculate__inner__box__body__form__main__head {
        display: block;
        margin: 0 0 30px 0;
    }

    .calculate__inner__box__body__form__main__head__title {
        margin: 0 0 10px 0;
    }

    .calculate__inner__box__body__form__main__unit {
        display: none;
    }

    .calculate__inner__box__body__form__main__head__input {
        max-width: none;
        font-size: 14px;
    }

    .calculate__inner__box__body__form__main__table .c-table__head,
    .calculate__inner__box__body__form__main__table .c-table__body {
        min-width: 0;
    }

    /*===============================*/
    /*======== calculate end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*============================================ detail start ==========================================*/
    /*====================================================================================================*/
    .detail {
        margin: 120px auto 100px auto;
    }

    .c-banner+.detail {
        margin: 0 auto 100px auto;
    }

    /*============================*/
    /*======== detail end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== quality start ==========================================*/
    /*====================================================================================================*/
    /**process chart**/
    .quality__process__chart__box {
        left: 0;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 500px;
    }

    .quality__process__chart__box__item {
        width: 180px;
        margin: 0 40px;
    }

    .quality__process__chart__box__item:before {
        display: none;
    }

    .quality__process__chart__box__item__circle {
        width: 180px;
        height: 180px;
    }

    .quality__process__chart__box__item__content {
        max-width: 180px;
    }

    /*=============================*/
    /*======== quality end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*=========================================== privacy start ==========================================*/
    /*====================================================================================================*/
    .privacy {
        margin: 60px auto 170px auto;
    }

    /****intro****/
    .privacy__intro__text {
        font-size: 14px;
        line-height: 2.1;
    }

    /****privacy tip****/
    .privacy__box__item {
        margin: 0;
        padding: 55px 0;
        border: none;
        border-top: 1px solid #e8e8e8;
        background: none;
    }

    .privacy__box__item:last-child {
        border-bottom: 1px solid #e8e8e8;
    }

    .privacy__box__item__title::before {
        top: calc(.6em - 20px);
        width: 40px;
        height: 40px;
        margin: 0 18px calc(-20px - .1em) 0;
        font-family: 'Poppins-L', 'NotoSansTC-L';
    }

    .privacy__box__item__content {
        margin: 25px 0 0 0;
        font-size: 14px;
    }

    /****contact info****/
    .privacy__contact {
        margin: -15px auto 0 auto;
    }

    .privacy__contact::before {
        height: 65px;
        margin: 0 auto 30px auto;
    }

    .privacy__contact__text {
        margin: 0 0 35px 0;
        font-size: 15px;
    }

    .privacy__contact__bt {
        width: 100%;
    }

    /*=============================*/
    /*======== privacy end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*============================================ result start ==========================================*/
    /*====================================================================================================*/
    .result__box__item__pic {
        padding: 20px;
    }


    .result__box__item__tag {
        position: relative;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .result__box__item__tag__item {
        display: block;
        margin: 0 5px 5px 0;
        padding: 0 0 0 15px;
        color: var(--textColor);
        border-radius: 0;
        background: none;
    }

    .result__box__item__tag__item::before {
        content: '';
        position: absolute;
        top: calc(.5em - 2.5px);
        left: 0;
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--mainColor);
        overflow: hidden;
    }

    .result__box__item__content {
        margin: 0;
    }

    /*============================*/
    /*======== result end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== register start =========================================*/
    /*====================================================================================================*/
    .register {
        margin: 95px auto 90px auto;
    }

    .register::before,
    .register::after {
        top: -55px;
        left: calc(50% - 55px);
        width: 110px;
        height: 110px;
    }

    .register::after {
        background-size: 25%;
    }

    .register__box {
        padding: 70px 20px 95px 20px;
    }

    .register__inner__sheet__title {
        margin: 0 auto 20px auto;
    }

    .register .c-form__noBg {
        display: block;
    }

    .register .c-form__noBg__content__item {
        width: 100%;
    }

    .register .c-form__noBg__content[data-name="edm"] .c-form__noBg__content__item {
        width: auto;
    }

    .register .c-form__btGroup {
        display: block;
    }

    .register .c-form__btGroup__bt {
        max-width: 100%;
        margin: 0;
    }

    .register .c-form__btGroup__captcha {
        margin: 0 0 45px 0;
    }

    .register .c-form__item__sub {
        display: block;
    }

    .register__box__title__main {
        font-size: 14px;
    }

    .register__box__title__sub {
        font-size: 28px
    }

    .register .c-form__item__title+input::placeholder {
        opacity: 0;
        pointer-events: none;
    }

    .register .c-form__item.required::after {
        right: 20px;
    }

    .register .c-form__noBg__title {
        font-size: 15px;
    }

    .register .c-form__noBg__content__item-other {
        width: 100%;
        max-width: 160px;
        flex: 0 1 auto;
    }

    /*==============================*/
    /*======== register end ========*/
    /*==============================*/




    /*====================================================================================================*/
    /*=========================================== member start ===========================================*/
    /*====================================================================================================*/
    /****download area****/
    .member__inner__content__box__item {
        width: calc(50% - 40px);
    }

    /*============================*/
    /*======== member end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*========================================= cart menu start ==========================================*/
    /*====================================================================================================*/
    .c-cartMenu__list__box__item__link {
        padding: 22px 0;
        font-size: 14px;
        width: 100%;
    }

    .c-cartMenu__list__box__item__link:not(.active) {
        display: none;
    }

    .c-cartMenu__list__box__item__link__sub {
        display: block;
    }

    /*===============================*/
    /*======== cart menu end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*============================================ cart start ============================================*/
    /*====================================================================================================*/
    /****cart__box__Menu****/
    .cart__box__Menu {
        margin: 0 auto 30px auto;
    }

    .cart__box__Menu__list__content__item__link {
        position: absolute;
        top: 0;
        left: 0;
        padding: 22px 0;
        font-size: 14px;
        width: 100%;
    }

    .cart__box__Menu__list__content__item__link:first-child {
        position: relative;
    }

    .cart__box__Menu__list__content__item__link::before {
        display: block;
    }

    /****cart list****/
    .cart {
        margin: 95px auto 85px auto;
    }

    .cart__box {
        padding: 70px 20px 75px 20px;
    }

    .cart__box__inner__list {
        margin: 0 auto 65px auto;
    }

    .cart__box__inner__list__head {
        display: none;
    }

    .cart__box__inner__list__content {
        display: block;
        width: 100%;
        margin: 0 auto 25px auto;
    }

    .cart__box__inner__list__content:last-child {
        margin: 0 auto;
    }

    .cart__box__inner__list__content__item {
        flex-direction: row;
        width: 100%;
        align-items: stretch;
        align-content: stretch;
        border-bottom: 1px solid #d3d3d3;
        border-right: none;
    }

    .cart__box__inner__list__content__item:last-child {
        border-bottom: none;
    }

    .cart__box__inner__list__content__item[data-list="1"],
    .cart__box__inner__list__content__item[data-list="2"],
    .cart__box__inner__list__content__item[data-list="3"],
    .cart__box__inner__list__content__item[data-list="4"] {
        width: 100%;
    }

    .cart__box__inner__list__content__item[data-list="1"] {
        min-height: 150px;
    }

    .cart__box__inner__list__content__item[data-list="2"],
    .cart__box__inner__list__content__item[data-list="3"] {
        min-height: 80px;
    }

    .cart__box__inner__list__content__item[data-list="4"] {
        min-height: 50px;
    }

    .cart__box__inner__list__content__item__head {
        display: flex;
        justify-content: center;
        justify-items: center;
        align-items: stretch;
        align-content: stretch;
        flex-direction: column;
        width: 33%;
        background: #1c1c1c;
        color: #fff;
        font-size: 14px;
        text-align: center;
    }

    .cart__box__inner__list__content__item__body {
        width: 67%;
        align-self: center;
    }

    .cart__box__inner__list__content__item__body__select {
        width: 50%;
        height: 35px;
        padding: 10px;
        background-position: calc(100% - 10px) center;
    }

    /****form****/
    .cart__inner__sheet__title {
        margin: 0 auto 30px auto;
    }

    .c-form__btGroup::after {
        content: '';
        position: absolute;
        top: 115px;
        left: 0;
        display: block;
        width: 100%;
        height: 1px;
        background: #d3d3d3;
    }

    .c-form__btGroup-confirm::after {
        top: -30px;
    }

    .c-form__btGroup__captcha {
        padding: 0 0 70px 0;
        margin: 0;
    }

    .c-form__btGroup__bt {
        max-width: 100%;
        margin: 0 auto 10px auto;
    }

    .c-form__btGroup-confirm {
        margin: 65px 0 0 0;
    }

    /****no prodcut****/
    .cart__box__state {
        padding: 10px 0 0 0;
    }

    .cart__box__state__inner__text {
        font-size: 16px;
        margin: 0 auto 35px auto;
    }

    .cart__box__state .c-form__btGroup__bt {
        max-width: 180px;
    }

    /*==========================*/
    /*======== cart end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*========================================== product start ===========================================*/
    /*====================================================================================================*/
    /****main content****/
    /**main content box**/
    .product__main__box__list {
        left: -4px;
        width: calc(100% + 8px);
    }

    .product__main__box__list__item {
        width: calc(50% - 8px);
        margin: 0 4px 40px 4px;
    }

    /*===============================*/
    /*======== product end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*====================================== product detail start ========================================*/
    /*====================================================================================================*/
    .productDetailBox {
        margin: 120px 0 0 0;
    }

    /****header intro****/
    .detailHeader {
        margin: 35px auto 0 auto;
    }

    .detailHeader__pic__slick__item {
        padding: 30px 30px;
    }

    .detailHeader__pic__slick__item img {
        max-width: 250px;
        max-height: 250px;
    }

    .detailHeader__content__btGroup {
        display: block;
    }

    .detailHeader__content__btGroup__bt {
        max-width: 100%;
        margin: 30px 0 0 0;
    }

    /****detail menu****/
    .prodcutDetail {
        margin: 60px auto 85px auto;
    }

    .prodcutDetail__menu__list {
        display: none;
    }

    .prodcutDetail__menu__list__select {
        display: block;
    }

    /*====================================*/
    /*======== product detail end ========*/
    /*====================================*/

}

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

    /*====================================================================================================*/
    /*============================================ base start ============================================*/
    /*====================================================================================================*/
    select,
    input,
    textarea {
        height: 50px;
        padding: 14px 20px;
        font-size: 14px;
    }

    select {
        background-position: calc(100% - 20px) center;
    }

    input[type="radio"] {
        width: 30px;
        height: 30px;
    }

    /*==========================*/
    /*======== base end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*=========================================== title start ============================================*/
    /*====================================================================================================*/
    /****title01****/
    .c-title01 {
        font-size: 34px;
    }

    /****title02****/
    .c-title02 {
        padding: 0 0 20px 0;
    }

    .c-title02::after {
        width: 40px;
    }

    .c-title02__main {
        margin: 0;
        font-size: 20px;
        line-height: 1;
    }

    .c-title02__sub {
        display: none;
        margin: 0;
        font-size: 20px;
    }

    .c-title02__required {
        bottom: -30px;
        font-size: 15px;
    }

    /****title03****/
    .c-title03__sub {
        padding: 0 0 15px 0;
        font-size: 15px;
    }

    .c-title03__main {
        margin: 25px 0 0 0;
        font-size: 28px;
    }

    .c-title03__text {
        margin: 25px 0 0 0;
        font-size: 15px;
    }

    /****title03****/
    .c-title04 {
        font-size: 16px;
    }

    /****title05****/
    .c-title05 {
        padding: 0 0 15px 0;
        font-size: 23px;
    }

    /****title06****/
    .c-title06 {
        padding: 0 0 20px 0;
    }

    .c-title06__main {
        font-size: 15px;
    }

    .c-title06__more {
        font-size: 14px;
    }

    .c-title06__more::after {
        width: 5px;
        height: 10px;
        margin: 0 0 0 13px;
    }

    /*===========================*/
    /*======== title end ========*/
    /*===========================*/




    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    .c-content {
        width: calc(100% - 40px);
    }

    .c-text {
        font-size: 14px;
    }

    .c-formula {
        font-size: 15px;
    }

    /****crumb****/
    .crumb {
        width: calc(100% - 40px);
    }

    .crumb ol li::after {
        margin: 0 15px;
    }

    /****public banner****/
    .c-banner {
        padding: 65px 0 0 0;
    }

    .c-banner__content {
        width: calc(100% - 40px);
        padding: 90px 0 80px 0;
    }

    .c-banner__content__main {
        font-size: 40px;
    }

    .c-banner__content__title {
        font-size: 28px;
    }

    /****button style****/
    [class^="c-bt"] {
        padding: 18px 5px;
        font-size: 14px;
    }

    /**download style**/
    .c-download {
        padding: 25px 20px;
    }

    /****quality****/
    .c-quality {
        margin: 0 auto;
    }

    .c-quality::before {
        height: 100%;
        left: -80px;
    }

    .c-quality__inner {
        width: calc(100% - 40px);
        padding: 60px 0 70px 0;
    }
    .c-quality__inner__title {
        min-width: 250px;
    }
    .c-quality__inner__title__main {
        margin: 30px auto 20px auto;
        font-size: 34px
    }

    .c-quality__inner__title__sub {
        width: 100%;
        font-size: 15px;
        padding: 0 0 25px 0;
    }

    .c-quality__inner__title__text {
        font-size: 16px;
        width: 100%;
    }

    .c-quality__inner__slick__content {
        margin: 25px auto 35px auto;
    }

    .c-quality__inner__slick__content__item {
        width: 280px;
    }
    .c-quality__inner__title__logo__item {
        width: 50px;
    }

    /**arrows**/
    .c-quality__inner__slick__content .slick-arrow {
        bottom: -50px;
        top: auto;
    }

    .c-quality__inner__slick__content .slick-next {
        left: calc(50% + 40px);
    }

    .c-quality__inner__slick__content .slick-prev {
        right: auto;
        left: calc(50% - 80px)
    }

    .c-quality__inner__slick__count {
        justify-content: center;
        position: relative;
        bottom: 0;
        top: auto;
        right: 0;
        width: auto;
    }

    /****page****/
    .c-page {
        padding: 30px 0 0 0;
    }

    /**prev & next**/
    .c-page__count a {
        width: 30px;
        height: 30px;
    }

    /**prev & next**/
    .c-page__prev {
        margin: 0 20px 0 0;
    }

    .c-page__next {
        margin: 0 0 0 20px;
    }

    /**arrow style**/
    .c-page__next::after {
        margin: 0 0 0 15px;
    }

    .c-page__prev::before {
        margin: 0 15px 0 0;
    }

    /**back button**/
    .c-page__back {
        width: 100%;
        max-width: none;
        margin: 0 auto 10px auto;
    }

    /**detail page**/
    .c-page-detail {
        flex-wrap: wrap;
    }

    .c-page-detail .c-page__prev,
    .c-page-detail .c-page__next {
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        margin: 0 0 10px 0;
        border: 1px solid var(--textColor);
        order: 2;
    }

    .c-page-detail .c-page__prev::before,
    .c-page-detail .c-page__next::after {
        width: 8px;
        height: 16px;
    }

    .c-page-detail .c-page__prev:last-child,
    .c-page-detail .c-page__next:last-child {
        margin: 0;
    }

    /****form****/
    .c-form__item {
        min-height: 50px;
        padding: 0 20px;
    }

    .c-form__item select {
        min-height: 48px;
    }

    .c-form__item__title {
        margin: 0 10px 0 0;
    }

    /**wrap style**/
    .c-form__item.wrap {
        padding: 20px;
    }

    /**button group**/
    .c-form__btGroup {
        flex-wrap: wrap;
        margin: 15px 0 0 0;
    }

    .c-form__btGroup__captcha {
        width: 310px;
        margin: 0 calc(50% - 155px) 20px calc(50% - 155px);
    }

    .c-form__btGroup__bt {
        max-width: none;
        margin: 0 auto 10px auto;
    }

    .c-form__btGroup__bt:last-child {
        margin: 0 auto;
    }

    /****submenu****/
    .c-subMenu__list__box__item__link {
        padding: 22px 0;
        font-size: 14px;
    }

    .c-subMenu__select {
        height: 50px;
        padding: 0 20px;
    }

    /****aside****/
    /**open menu button**/
    .c-aside__bt {
        padding: 15px 50px 15px 15px;
        font-size: 14px;
        background-position: center right 15px;
    }

    /**aside menu**/
    .c-aside__box {
        padding: 25px 25px 0 25px;
    }

    .c-aside__box__head {
        margin: 0 0 20px 0;
    }

    .c-aside__box__head__title {
        font-size: 16px;
    }

    /*****product box****/
    /**content**/
    .c-product__content__sub {
        display: none;
    }

    .c-product__content__title {
        font-size: 15px;
    }

    /****news box****/
    /**content**/
    .c-news__content__sub {
        margin: 0 0 2.5px 0;
    }

    .c-news__content__title {
        font-size: 14px;
    }

    /****editor****/
    .c-edit {
        font-size: 14px;
        line-height: 2.1;
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*========================================== lightbox start ==========================================*/
    /*====================================================================================================*/
    /****dialog****/
    .c-lightbox__inner__message {
        width: calc(100% - 40px);
        padding: 75px 20px 50px 20px;
    }

    .c-lightbox__close,
    .c-lightbox__inner__message__close {
        width: 60px;
        height: 60px;
    }

    .c-lightbox__inner__box__sub {
        font-size: 13px;
    }

    .c-lightbox__inner__box__title {
        font-size: 25px;
    }

    .c-lightbox__inner__box__title::after {
        margin: 15px auto;
    }

    .c-lightbox__inner__box__text {
        font-size: 14px;
    }

    .c-lightbox__inner__box__btGroup {
        margin: 15px auto 0 auto;
    }

    .c-lightbox__inner__video__content {
        width: calc(100% - 40px);
    }

    /****login****/
    .c-lightbox__inner__member {
        width: calc(100% - 40px);
        padding: 80px 20px 50px 20px;
    }

    .c-lightbox__inner__member__title {
        margin: 0 auto 15px auto;
    }

    .c-lightbox__inner__member__title__sub {
        font-size: 13px;
    }

    .c-lightbox__inner__member__title__main {
        font-size: 25px;
    }

    .c-lightbox__inner__member__title__text::before {
        left: calc(50% - 17.5px);
        width: 35px;
    }

    .c-lightbox__inner__member__form__item.required::after {
        right: 0;
    }

    .c-lightbox__inner__member__form__item input {
        max-width: 100%;
        padding: 15px 15px 15px 0;
    }

    .c-lightbox__inner__member__form__btGroup__bt {
        max-width: 100%;
    }

    /*==============================*/
    /*======== lightbox end ========*/
    /*==============================*/




    /*====================================================================================================*/
    /*=========================================== about start ============================================*/
    /*====================================================================================================*/
    .about {
        padding: 40px 0 0 0;
    }

    /****company message****/
    .about__message__title {
        margin: 0 auto 20px auto;
    }

    .about__message__inner__intro {
        margin: 0 auto 40px auto;
    }

    .about__message__inner__intro__bold {
        font-size: 15px;
        margin: 0 auto 5px auto;
    }

    .about__message__inner__content {
        margin: 0 auto -44px auto;
        z-index: 10;
    }

    /****gray background area****/
    .about__introbox {
        width: 100%;
        padding: 105px 20px 80px 20px;
        margin: -45px auto 0 auto;
        z-index: -1;
    }

    .about__introbox::after {
        display: none;
    }

    .about__introbox__content__item__title {
        margin: 0 auto 10px auto;
    }

    .about__introbox__content__item__highlights {
        display: block;
    }

    .about__introbox__content__item__highlights__main {
        width: 100%;
        margin: 0 auto 5px auto;
    }

    .about__introbox__content__item__highlights__main::before {
        top: 10px;
        width: 30px;
        height: 30px;
        margin: 0 .5em 0 0;
    }

    .about__introbox__bottom {
        max-width: 400px;
        width: calc(100% + 20px);
        left: min(0px, calc(50% - 50vw + 10px));
    }

    .about__introbox__bottom__item__sub {
        display: none;
    }

    .about__introbox__bottom__item__number,
    .about__introbox__bottom__item__unit {
        font-size: 34px;
    }

    .about__introbox__bottom__item__main {
        font-size: 15px;
        margin: 5px auto 0 auto;
    }

    /****video lightbox****/
    .about__video {
        height: 300px;
        margin: 0;
    }

    .about__video__bg__btOpen {
        top: calc(50% - 45px);
        left: calc(50% - 45px);
        width: 90px;
        height: 90px;
        font-size: 14px;
    }

    .about__video__bg__btOpen::before {
        left: calc(50% - 8px);
        border-width: 9px 0 9px 16px;
        margin: 0 0 5px 0;
    }

    /****core values****/
    .about__value {
        padding: 80px 0 95px 0;
    }

    /**title**/
    .about__value__main {
        margin: 0 auto 35px auto;
    }

    .about__value__main__title {
        font-size: 35px;
    }

    /**core**/
    .about__value__inner__textArea {
        margin: 0 auto 30px auto;
    }

    .about__value__inner__textArea__item {
        margin: 0 auto 25px auto;
    }

    .about__value__inner__textArea__item__title {
        margin: 0 auto 10px auto;
    }

    /**core chart**/
    .about__value__inner__graph {
        width: 298px;
    }

    .about__value__inner__graph__content {
        width: 150px;
        height: 150px;
        text-align: center;
    }

    .about__value__inner__graph__content[data-target="1"] .about__value__inner__graph__content__text {
        width: 60%;
    }

    .about__value__inner__graph__content[data-target="2"] {
        margin: -22px auto 0 0;
    }

    .about__value__inner__graph__content[data-target="2"] .about__value__inner__graph__content__text {
        width: 50%;
    }

    .about__value__inner__graph__content[data-target="3"] {
        margin: -150px 0 0 auto;
    }

    .about__value__inner__graph__content[data-target="3"] .about__value__inner__graph__content__text {
        width: 70%;
    }

    /*===========================*/
    /*======== about end ========*/
    /*===========================*/




    /*====================================================================================================*/
    /*========================================= calculate start ==========================================*/
    /*====================================================================================================*/
    .calculate .c-anchor {
        top: -150px;
    }

    .calculate {
        margin: 50px auto 80px auto;
    }

    /****calculate menu****/
    .calculate__menu.fixed {
        transform: translateX(-20px);
    }

    /****calculate box****/
    .calculate__inner__box {
        margin: 0 auto 45px auto;
    }

    /*===============================*/
    /*======== calculate end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*========================================== contact start ===========================================*/
    /*====================================================================================================*/
    .contact {
        margin: 45px auto 95px auto;
    }

    /****google map****/
    .contact__map {
        height: 300px;
        margin: 0 auto 40px auto;
    }

    /**company info**/
    .contact__inner__info__name {
        margin: 0 0 10px 0;
        font-size: 15px;
    }

    .contact__inner__info__box__item {
        font-size: 14px;
    }

    /**company form**/
    .contact__inner__sheet {
        margin: 0 0 65px 0;
    }

    .contact__inner__sheet__title {
        margin: 0 0 45px 0;
    }

    /*=============================*/
    /*======== contact end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*============================================ list start ============================================*/
    /*====================================================================================================*/
    .list {
        margin: 45px auto 90px auto;
    }

    /****sub menu****/
    .list__menu {
        margin: 0 auto 50px auto;
    }

    /****video list****/
    .list__box {
        left: 0;
        width: 100%;
    }

    .list__box__item {
        width: 100%;
        margin: 0 0 35px 0;
    }

    /****catalog list****/
    .list__menu+.list__catalog {
        margin: -10px auto 0 auto;
    }

    /*==========================*/
    /*======== list end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*============================================ detail start ==========================================*/
    /*====================================================================================================*/
    .detail {
        margin: 120px auto 70px auto;
    }

    .c-banner+.detail {
        margin: 0 auto 70px auto;
    }

    /****crumb****/
    .detail__crumb {
        margin: 0 auto 30px auto;
    }

    /****detail solo share****/
    .detail__share {
        margin: 40px 0 25px 0;
    }

    .detail__crumb+.detail__share {
        margin: 40px 0 25px 0;
    }

    .detail__share .c-share {
        justify-items: flex-start;
        justify-content: flex-start;
    }

    /****base info****/
    .detail__info {
        margin: 0 auto 35px auto;
    }

    .detail__info__pic {
        margin: 0 0 20px 0;
    }

    .detail__info__content {
        padding: 0 0 30px 0;
    }

    .detail__info__content__date {
        margin: 0;
    }

    .detail__info__content__title {
        font-size: 23px;
    }

    .detail__info__content__text {
        min-height: 70px;
        margin: 15px 0 0 0;
        padding: 15px 0 0 0;
        font-size: 14px;
    }

    /****detail info****/
    .detail__box {
        padding: 55px 20px 65px 20px;
    }

    .detail__box__title {
        margin: 0 0 25px 0;
    }

    .detail__box__edit {
        margin: 0 auto 50px auto;
    }

    /*============================*/
    /*======== detail end ========*/
    /*============================*/





    /*====================================================================================================*/
    /*=========================================== sitemap start ==========================================*/
    /*====================================================================================================*/
    .sitemap {
        margin: 30px auto 90px auto;
    }

    .sitemap__box__item__link {
        padding: 25px 35px 25px 0;
        font-size: 18px;
    }

    .sitemap__box__item__link__bold {
        font-size: 20px;
    }

    .sitemap__box__item__link__main {
        margin: 0;
    }

    .sitemap__box__item__link__sub {
        display: none;
    }

    /****second floor****/
    .sitemap__box__item__list {
        padding: 30px 0 0 0;
    }

    .sitemap__box__item__list__link {
        margin: 0 0 25px 0;
    }

    /*=============================*/
    /*======== sitemap end ========*/
    /*=============================*/





    /*====================================================================================================*/
    /*=========================================== quality start ==========================================*/
    /*====================================================================================================*/
    .quality {
        margin: 45px auto 0 auto;
    }

    /****process****/
    .quality__process {
        margin: 0 0 70px 0;
    }

    /**title**/
    .quality__process__title {
        margin: 0 0 40px 0;
    }

    /****equipment and team****/
    .quality__team {
        left: -20px;
        width: calc(100% + 40px);
        padding: 60px 20px 65px 20px;
    }

    /**title**/
    .quality__team__title {
        margin: 0 0 45px 0;
    }

    /**equipment and team intro list**/
    .quality__team__box {
        left: 0;
        width: 100%;
    }

    .quality__team__box__item {
        width: 100%;
        margin: 0 0 45px 0;
    }

    .quality__team__box__item__content {
        margin: 15px 0 0 0;
    }

    .quality__team__box__item__content__text {
        font-size: 14px;
    }

    /*=============================*/
    /*======== quality end ========*/
    /*=============================*/




    /*====================================================================================================*/
    /*============================================ result start ==========================================*/
    /*====================================================================================================*/
    .result {
        margin: 50px auto 80px auto;
    }

    /****search result****/
    .result__title {
        margin: 0 0 25px 0;
        padding: 0 0 0 25px;
        font-size: 15px;
    }

    .result__title__keyword {
        font-size: 20px;
    }

    /****search list****/
    .result__box {
        left: -5px;
        width: calc(100% + 10px);
    }

    .result__box__item {
        width: calc(50% - 10px);
        margin: 0 5px 35px 5px;
    }

    .result__box__item__tag__item {
        font-size: 14px;
    }

    .result__box__item__content__title {
        font-size: 15px;
    }

    /*****no result****/
    .result__content {
        margin: 60px auto 0 auto;
    }

    .result__content__text {
        font-size: 16px;
    }

    /*============================*/
    /*======== result end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*=========================================== member start ===========================================*/
    /*====================================================================================================*/
    .member {
        margin: 50px auto 60px auto;
        border: none;
        background: none;
    }

    .member__menu {
        border: 1px solid #b8b9ba;
    }

    .member__inner {
        padding: 35px 20px 50px 20px;
    }

    .member__inner-download {
        padding: 40px 20px 55px 20px;
    }

    /****type tag****/
    .member__menu__link {
        font-size: 15px;
        padding: 15px 10px;
    }

    .member__menu__link__sub {
        display: none;
    }

    /****member info****/
    /**form**/
    .member__inner__form__item__password {
        flex-wrap: wrap;
    }

    .member__inner__form__item__password input {
        margin: 0 0 10px 0;
    }

    .member__inner__form__item__radio__list {
        margin: 0 20px 5px 0;
    }

    .member__inner__form__item__radio__list input {
        width: 30px;
        height: 30px;
    }

    .member__inner__form__btGroup {
        margin: 50px 0 0 0;
    }

    .member__inner__form__btGroup__bt {
        max-width: 100%;
    }

    /****download area****/
    /**type list**/
    .member__inner__content__menu {
        width: calc(100% - 40px);
    }

    .member__inner__content__box {
        display: block;
        width: 100%;
    }

    .member__inner__content__box__item {
        width: calc(100% - 40px);
        min-width: 200px;
        margin: 0 auto 40px auto;
        max-width: 100%;
        padding: 30px 10px 35px 10px;
    }

    .member__inner__content__box__item__icon {
        width: 80px;
        height: 80px;
    }

    .member__inner__content__box__item__title {
        margin: 0 auto 25px auto;
    }

    /*============================*/
    /*======== member end ========*/
    /*============================*/




    /*====================================================================================================*/
    /*============================================ cart start ============================================*/
    /*====================================================================================================*/
    .cart::before,
    .cart::after {
        width: 110px;
        height: 110px;
        left: calc(50% - 55px);
        top: -45px;
    }

    .cart__box__title {
        margin: 0 auto 35px auto;
    }

    .cart__box__title__main {
        font-size: 14px;
    }

    .cart__box__title__sub {
        font-size: 28px;
    }

    .cart__inner__sheet__title__main {
        display: block;
        font-size: 20px;
    }

    .cart__inner__sheet__title__required {
        bottom: 20px;
    }

    /*==========================*/
    /*======== cart end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*========================================== product start ===========================================*/
    /*====================================================================================================*/
    .product {
        margin: 50px auto 50px auto;
    }

    /****aside menu****/
    .product__aside {
        margin: 0 0 30px 0;
    }

    /****main content****/
    /**switch menu**/
    .product__main__swtich {
        margin: 0 0 25px 0;
    }

    .product__main__swtich__bt {
        padding: 15px;
    }

    /**main content box**/
    .product__main__box__content {
        margin: 0 0 45px 0;
    }

    .product__main__box__content__title {
        margin: 0 0 15px 0;
    }

    .product__main__box__list__item[data-style="product"] {
        width: 100%;
    }

    /**main content box**/
    .product__main__box__bt {
        height: 50px;
        margin: 0 auto 110px auto;
    }

    /*===============================*/
    /*======== product end ========*/
    /*===============================*/




    /*====================================================================================================*/
    /*====================================== product detail start ========================================*/
    /*====================================================================================================*/
    /****header intro****/
    .detailHeader__pic__slick__item {
        padding: 15px 30px;
    }

    .detailHeader__pic__slick__item img {
        max-width: 150px;
        max-height: 150px;
    }

    .detailHeader__content__text {
        font-size: 14px;
    }

    /*====================================*/
    /*======== product detail end ========*/
    /*====================================*/




    /*====================================================================================================*/
    /*========================================= message start ============================================*/
    /*====================================================================================================*/
    .message p {
        font-size: 20px;
    }

    .message__title {
        margin: 0 auto 10px auto;
    }

    .message__bt {
        max-width: 160px;
        margin: 20px auto 0 auto;
    }

    /*=============================*/
    /*======== message end ========*/
    /*=============================*/
}

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

        .about__value__inner__graph {
            width: 100%;
        }

        .about__value__inner__graph__content {
            width: 120px;
            height: 120px;
        }
        .about__value__inner__graph__content[data-target="3"] {
            margin: -120px 0 0 auto;
        }
    }

/*=========================================== touch screen ===========================================*/
@media (any-hover: none) {

    /*========================================================================================*/
    /*===================================== public start =====================================*/
    /*========================================================================================*/
    .c-cover {
        display: none;
    }

    /****button style****/
    /**download style**/
    .c-download::after {
        background: url(../images/common/icon_download_black.svg) center no-repeat #fff;
        background-size: 40% auto;
    }
}

/*============================================= IOS style =============================================*/
@supports (-webkit-touch-callout: none) {

    /*========================================================================================*/
    /*====================================== base start ======================================*/
    /*========================================================================================*/
    input::placeholder {
        line-height: 2;
    }

    /*==========================*/
    /*======== base end ========*/
    /*==========================*/




    /*====================================================================================================*/
    /*=========================================== public start ===========================================*/
    /*====================================================================================================*/
    /*****product box****/
    /**picture**/
    .c-product[data-style="product"]:hover {
        box-shadow: none;
    }

    .c-product__pic__cover {
        display: none;
    }

    .c-product[data-style="product"] .c-product__pic__cover {
        display: block;
        background: none;
        opacity: 1;
    }

    .c-product[data-style="product"] .c-product__pic__cover::before {
        display: none;
    }

    .c-product[data-style="product"] .c-product__pic__cover::after {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        background: url(../images/common/icon_arrow_next_long_white.svg) center no-repeat var(--mainColor);
        background-size: 44% auto;
        border-radius: 50%;
    }

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

        /*****product box****/
        .c-product[data-style="product"] .c-product__pic__cover::after {
            bottom: 15px;
            right: 15px;
        }
    }

    /*============================*/
    /*======== public end ========*/
    /*============================*/
}

.cert-wrapper{padding-bottom: 100px;}
.cert-box {display: grid; grid-template-columns: repeat(3, 1fr);gap:58px;}
.cert-box .cert-item {position: relative;}
.cert-box .cert-item .float{position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 0;font-size: 0;z-index: 2;}
.cert-box .cert-item .frame{padding: 40px 28px;background: #F5F5F5;border: 1px solid #ebebeb;z-index: 1;margin-bottom: 20px;}
.cert-box .cert-item .frame .pho{position: relative;overflow: hidden;width: 100%;height: 0;padding-bottom: 134.048%;z-index: 1;}
.cert-box .cert-item .title{text-align: center;padding: 0 10px;font-size: 18px;}
.cert-box .cert-item .frame::before{position: absolute;content: "";top: 0;left: 0;width: 100%;height: 100%;background: rgb(0 0 0 / 88%);z-index: 2;opacity: 0;}
.cert-box .cert-item .frame::after{position: absolute;content: "";top: 50%;left: 50%;transform: translate(-50%,-50%);background: url('../../upload-files/cert/magnifier.svg')no-repeat; background-size: cover;width: 70px;height: 64px;z-index: 3;opacity: 0;}
.cert-box .cert-item:hover .frame::before{opacity: 1;}
.cert-box .cert-item:hover .frame::after{opacity: 1;}

@media screen and (max-width: 980px) {
	.cert-box {grid-template-columns: repeat(2, 1fr);}
	
}

@media screen and (max-width: 570px) {
	.cert-box {grid-template-columns: 1fr;}
	
}