@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: 'Noto Sans SC', 'Microsoft JhengHei', 'PingFang', sans-serif;

    color: var(--textColor);

    overflow: visible;

}



h1, h2, h3, h4, h5, h6 {font-family: 'Noto Sans SC', '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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 600;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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', 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

}



.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', 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



/****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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

    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', 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



/**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', 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

}



.c-product__content__title {

    display: block;

    width: 100%;

    font-size: 16px;

    line-height: 1.5;

    color: var(--textColor);

    font-family: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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% - 40px);

    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;

}



.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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



/****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', 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

}



.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', 'Noto Sans SC';

	font-weight: 600;

    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', 'Noto Sans SC';

    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: 'Noto Sans SC';

    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: 'Noto Sans SC';

    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: 'Noto Sans SC';

}



.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: 'Noto Sans SC';

}



.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: 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 300;

    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', 'Noto Sans SC';

    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', 'Noto Sans SC';

	font-weight: 500;

}



.about__introbox__bottom__item__main {

    display: block;

    width: 100%;

    font-size: 16px;

    line-height: 1.5;

    color: var(--textColor);

    font-family: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

	font-weight: 300;

}



/**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: 'Noto Sans SC';

    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% 43% 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: 'Noto Sans SC';

	font-weight: 500;

}



.calculate__inner__box__title__sub {

    display: block;

    width: 100%;

    font-size: 16px;

    line-height: 1.5;

    color: #dedede;

    font-family: 'Noto Sans SC';

	font-weight: 500;

}



/**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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

    flex: 0 0 auto;

}



.detail__info__content__title {

    display: block;

    width: 100%;

    font-size: 30px;

    line-height: 1.5;

    color: var(--textColor);

    font-family: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

    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', 'Noto Sans SC';

	font-weight: 500;

}



.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', 'Noto Sans SC';

	font-weight: 500;

}



.quality__process__chart__box__item__circle__title {

    display: block;

    width: 100%;

    font-size: 16px;

    line-height: 1.2;

    color: inherit;

    font-family: 'Poppins-B', 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

}



/*=============================*/

/*======== 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', 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

}



/*****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: 'Noto Sans SC';

	font-weight: 500;

}



.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', 'Noto Sans SC';

    margin: 0 auto 5px auto;

}



.register__box__title__sub {

    display: block;

    width: 100%;

    font-size: 42px;

    line-height: 1;

    color: var(--textColor);

    font-family: 'Noto Sans SC';

}



.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: 'Noto Sans SC';

}



.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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

    margin: 0 auto 5px auto;

}



.cart__box__title__sub {

    display: block;

    width: 100%;

    font-size: 42px;

    line-height: 1;

    color: var(--textColor);

    font-family: 'Noto Sans SC';

}



.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: 'Noto Sans SC';

    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: 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

	font-weight: 500;

}



.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: 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

    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', 'Noto Sans SC';

    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: 'Noto Sans SC';

	font-weight: 500;

    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: 'Noto Sans SC';

	font-weight: 500;

}



.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', 'Noto Sans SC';

		font-weight: 200;

    }



    .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;}
	
}