/*--------------copyright by vicky start-------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html {
    font-size: 10px;
}

body {
    line-height: 1.5;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Shippori Mincho', 'Playfair Display', serif;
    overflow-x: hidden;
    color: #1a1a1a;
    background: #fff;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    vertical-align: top;
}

a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #303030;
}

img {
    max-width: 100%;
}

::selection {
    background: rgba(204, 204, 204, 1);
}


/************************************************************************************************************************************************
************************************************************************************************************************************************
************************************************************************************************************************************************/
/****overlay start****/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 40;
    display: none;
}

.overscroll {
    overflow: hidden;
}

/****overlay end****/
/************************/
/****head001 start****/
header {
    z-index: 90;
    position: relative;
}

/*mibutton*/
.mibutton {
    position: fixed;
    top: 2em;
    right: 2em;
    z-index: 50;
    cursor: pointer;
    width: 40px;
    height: 30px;
    text-align: left;
    display: none;
}

.mibutton span {
    display: block;
    text-align: center;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    transition: .3s ease all;
}

.mibutton span:nth-child(2) {
    top: 10px;
}

.mibutton span:nth-child(3) {
    top: 20px;
}

.mibutton_ani span {
    opacity: 1;
    background: #fff;
}

.mibutton_ani span:nth-child(1) {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

.mibutton_ani span:nth-child(2) {
    opacity: 0;
}

.mibutton_ani span:nth-child(3) {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    -webkit-transform-origin: center left;
    transform-origin: center left;
    top: 23px;
}

/*navbar*/
.navbar {
    background: #fff;
    padding: 2rem 3rem;
    text-align: left;
    border-radius: 0;
    min-height: auto;
    margin: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.navtop,
.intop {
    position: fixed;
    z-index: 30;
    opacity: 1;
    pointer-events: auto;
    background: rgb(2 23 44 / 1);
    transition: .5s ease-in;
}

/*ilogo*/
.ilogo {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    text-align: right;
}

.ilogo a {
    display: inline-block;
    transition: .3s ease all;
}

.ilogo a:hover {
    opacity: .7;
}

/*ibutton*/
.ibutton {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    width: 75%;
}

.ibutton ul {}

.ibutton li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 2em 0 1.5rem;
    letter-spacing: 3px;
    text-align: left;
    position: relative;
    width: 11%;
}

.ibutton li:before {
    content: '';
    background: url(../../images/ibut_icon.png) left center no-repeat;
    width: 26px;
    max-width: 100%;
    min-height: 26px;
    position: absolute;
    top: 0;
    left: -1.5rem;
}

.ibutton a {
    position: relative;
    overflow: hidden;
    transition: .2s ease all;
    height: 30px;
    letter-spacing: 1px;
    font-size: 18px;
}

p.ch {
    transition: .3s ease all;
    color: #f3d250;
}

p.en {
    transition: .3s ease all;
    color: #f5974c;
    border-bottom: 1px #f5974c solid;
    padding-bottom: 5px;
    font-weight: 400;
    letter-spacing: 0;
}

.ibutton a:hover p.ch {
    transform: translateY(-100%);
}

.ibutton a:hover p.en {
    transform: translateY(-100%);
}
@media (max-width:1600px){
    .ibutton li {
    width: 13%;
}
}
@media (max-width:1024px) {
    .ilogo {
        width: 25%;
    }

    .ibutton {
        width: 70%;
    }
}

@media (max-width:1080px) {

    .mibutton {
        display: block;
        top: 1em;
    }

    .ilogo {
        width: 100%;
        text-align: left;
        padding: .3em 2em;
    }

    .ilogo a {
        display: inline-block;
        width: 200px;
    }

    .ibutton {
        width: 100%;
        text-align: center;
        display: none;
        padding-bottom: 1em;
    }

    .ibutton li {
        display: block;
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .ibutton li:before {
        display: none;
    }

    .ibutton li a {
        padding: 1em;
        transition: .2s ease all;
        height: auto;
    }

    .ibutton li a:hover {
        background: #4c4c4c;
    }

    p.en {
        font-size: 16px;
    }

    .ibutton a:hover p.en,
    .ibutton a:hover p.ch {
        transform: translateY(0);
    }

    .navbar {
        padding: .5rem 0 0 0;
        position: fixed;
        opacity: 1;
        pointer-events: auto;
        background: rgb(2 23 44 / 1);
    }
}

@media (max-width:600px) {
    .ilogo a {
        width: 160px;
    }

    .mibutton {
        top: 1em;
    }
}

@media (max-width:500px) {
    .mibutton {
        right: 1em;
        top: .8em;
    }

    .ibutton a {
        font-size: 16px;
    }

    .ilogo {
        padding: .3em 1em;
    }
}

@media (max-width:350px) {
    .mibutton {
        top: 1em;
    }
}

/****head001 end****/
/***********************/
/***banner start***/
.banner {
    position: relative;
    background: url(../../images/banner.jpg) top center no-repeat;
    background-size: cover;
    padding: 9rem 0 7em;
    min-height: 956px;
}

.ban_inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    padding: 27rem 0 20rem 0;
}

.ban_inner img {
    padding-bottom: 3rem;
}

.ban_inner h3 {
    font-size: 100px;
    color: #fff;
    font-family: 'Playfair Display';
    text-transform: uppercase;
    font-weight: bold;
    font-style: italic;
    padding-bottom: 2.3rem;
}

.ban_inner h2 {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
}

/***scroll***/
.scroll {
    padding-top: 5rem;
    text-align: center;
    animation: push 1s infinite alternate;
}

@keyframes push {
    to {
        transform: scale(.8);
    }
}
@media screen and (max-width:1600px){
    .banner {
    min-height: 766px;
}
.ban_inner {
    padding: 14rem 0 20rem 0;
}
}
@media screen and (max-width:1500px){
    .ibutton li {
    width: 15%;
}
}
@media screen and (max-width:1366px){
    .banner {
    min-height: 676px;
}
.ban_inner {
    padding: 9rem 0 20rem 0;
}
}
@media screen and (max-width:1100px){
    .ibutton li {
    width: auto;
}
}
@media screen and (max-width:768px) {
    .banner {
        min-height: 760px;
    }

    .ban_inner {
        padding: 18rem 0 0 0;
    }

    .ban_inner h3 {
        font-size: 70px;
    }
}

@media screen and (max-width:576px) {
    .banner {
        min-height: 670px;
    }

    .ban_inner {
        padding: 15rem 0 0 0;
    }

    .ban_inner h3 {
        font-size: 52px;
    }
}

@media screen and (max-width:450px) {
    .banner {
        min-height:450px;
    }

    .ban_inner {
        padding: 13rem 0 0 0;
    }

    .ban_inner h3 {
        font-size: 32px;
    }

    .ban_inner h2 {
        font-size: 20px;
    }
    .ban_inner img:last-child {
    display: none;
}
    
}
@media screen and (max-width:414px){
       .banner {
        min-height:250px;
    }
        .ban_inner {
        padding: 6rem 0 0 0;
    }
    .ban_inner img {
    padding-bottom: 1rem;
}
    .ban_inner img:first-child {
    width: 21%;
}
.ban_inner h3 {
    padding-bottom: 1rem;
}
}
@media screen and (max-width:360px) {
    .ban_inner h3 {
        font-size: 30px;
    }

    .ban_inner h2 {
        font-size: 20px;
    }
}

/***banner end***/
/***********************/
/***A005 start***/
.A005 {
    width: 100%;
    display: flex;
}

.A005 .A0051 {}

.A005 .A0052 {
    width: 28%;
    padding-top: 10.7rem;
    text-align: center;
}

.A0052 .A0052_title {
    margin-bottom: 3.3rem;
}

.A0052_title img {}

.A0052_title h3 {
    font-size: 50px;
    color: #02172c;
    font-weight: bold;
    font-style: italic;
    font-family: 'Playfair Display';
    letter-spacing: 0px;
}

.A0052_title h2 {
    font-size: 20px;
    color: #02172c;
    font-weight: bold;
    padding-top: 1rem;
}

.A0052_text {
    margin-bottom: 11rem;
}

.A0052_text h4 {
    font-size: 20px;
    color: #f3d250;
    font-weight: bold;
}

.A0052_text p {
    font-size: 16px;
    color: #1a1a1a;
    padding: 3.4rem 10.7rem 0;
    text-align: justify;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.8;
}

.A0052_deco02 {
    text-align: right;
    padding-right: 2.5rem;
}

.A005 .A0053 {}



@media screen and (max-width:1800px) {
    .A005 .A0052 {
        padding-top: 8rem;
    }

    .A0052_text {
        margin-bottom: 5rem;
    }
}

@media screen and (max-width:1700px) {
    .A005 .A0052 {
        padding-top: 3rem;
    }

    .A0052_text p {
        padding: 3.4rem 4.7rem 0;
    }
}
@media screen and (max-width:1600px){
    .A005 .A0052 {
        width: 40%;
    }
}
@media screen and (max-width:1500px) {
    .A0052_text p {
        padding: 3.4rem 3rem 0;
    }

    .A0052_text {
        margin-bottom: 3rem;
    }

    .A0052_deco02 {
        text-align: center;
        padding-right: 0;
    }
}

@media screen and (max-width:1400px) {
    .A005 .A0052 {
        width: 50%;
    }

    .A0052_text {
        margin-bottom: 1rem;
    }

    .A0052_deco02 {
        padding-right: 2rem;
        width: 50%;
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width:1200px) {
    .A005 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .A005 .A0051 {
        margin-bottom: 3rem;
    }

    .A005 .A0052 {
        order: -1;
        padding: 3rem 0;
    }
}

@media screen and (max-width:768px) {
    .A005 .A0052 {
        width: 80%;
    }

    .A0052_deco02 {
        width: 65%;
    }
}

@media screen and (max-width:450px) {
    .A005 .A0052 {
        width: 95%;
    }
}

@media screen and (max-width:360px) {
    .A005 .A0051 {
        margin-bottom: 2.5rem;
    }

    .A0052_text p {
        padding: 3.4rem 1rem 0;
    }
}

/***A005 end****/
/***********************/
/***footer***/
footer {
    background: #02172c;
    position: relative;
    z-index: 10;
    padding: 5.1rem 0 3.3rem;
}

.ftwrap {
    padding-top: 0rem;
    padding-bottom: 1.6rem;
    max-width: 918px;
    margin: 0 auto;
    text-align: center;
}

.ftinfo {
    text-align: center;
    width: 480px;
    max-width: 100%;
    margin: 0 auto;
}

.ftinfo h6 {
    padding-bottom: 4.3rem;
    text-align: center;
}

.ftinfo ul {
    padding-top: .5em;
}

.ftinfo ul li span {
    position: relative;
    font-family: 'Playfair Display';
    text-align: left;
}

.ftinfo ul li span:nth-of-type(1) {
    display: inline-block;
    width: 20%;
    color: #fff;
    font-size: 14px;
}

.ftinfo ul li span:nth-of-type(2) {
    display: inline-block;
    width: 75%;
    color: #ffffff;
    font-size: 20px;
}

/*ft_link*/
.ft_link {
    margin-top: 5rem;
}

.ft_link a {
    transition: .3s ease all;
    display: inline-block;
    width: 20%;
    text-align: center;
}

.ft_link a:hover {
    opacity: .5;
}

/*ft_website*/
.ft_website {
    width: 810px;
    max-width: 100%;
    padding: 1.3rem 2rem;
    border-top: 1px solid #33485d;
    border-bottom: 1px solid #33485d;
    margin: 2.8rem auto 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.ft_website .website {
    width: 70%;
    text-align: left;
}

.website ul {}

.website ul li {
    display: inline-block;
    width: 23%;
    position: relative;
}

.website ul li:not(:last-child):after {
    content: '/';
    color: #e9b892;
    position: absolute;
    top: -2px;
    right: 25px;
}

.website ul li a {
    font-size: 14px;
    color: #e9b892;
    transition: .5s all;
}

.website ul li a:hover {
    color: #fff;
}

.ft_website .ft_mark {}

.footer_bot {
    max-width: 810px;
    text-align: left;
    margin: 0 auto;
    color: #33485d;
    letter-spacing: 0;
}

/*share*/
.share {
    color: #33485d;
    font-size: 12px;
    display: inline-block;
    width: 26%;
    text-align: right;
}

.share a {
    font-size: 14px;
    display: inline-block;
}

.share a:hover {
    opacity: .7;
}


/*ft_copyright*/
.ft_copyright {
    color: #33485d;
    font-size: 14px;
    display: inline-block;
    width: 72%;
    text-align: left;
}

.ft_copyright a,
.ft_copyright a h1 {
    color: #33485d;
    display: inline-block;
    font-size: 14px;
    transition: .5s all;
}

.ft_copyright a:hover,
.ft_copyright a h1:hover {
    color: #e9b892;
}

@media screen and (max-width:768px) {
    .ft_website {
        max-width: 95%;
    }

    .footer_bot {
        max-width: 95%;
    }

    .ft_copyright {
        width: 100%;
        text-align: center;
    }

    .share {
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width:650px) {
    .ft_website .website {
        width: 80%;
    }

    .website ul li:not(:last-child):after {
        right: 13px;
    }
}

@media screen and (max-width:450px) {
    .ft_website {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .ft_website .website {
        width: 100%;
        margin-bottom: 3rem;
        text-align: center;
    }

    .ft_website .ft_mark {
        width: 100%;
        text-align: center;
    }

    .website ul li:not(:last-child):after {
        right: -9px;
    }

}
@media screen and (max-width:360px){
    .ftinfo ul li span:nth-of-type(1){
        vertical-align: top;
    }
    .ftinfo ul li span:nth-of-type(2) {
    width: 59%;
}
}
@media screen and (max-width:310px) {
    .website ul li {
        width: 40%;
    }

    .website ul li:nth-child(2):after {
        display: none;
    }
    .ftinfo ul li span:nth-of-type(1) {
    width: 25%;
}
}

/***********************/
/***ibanner start***/

.ibanner {
    width: 100%;
    min-height: 630px;
    background: url(../../images/ibanner.jpg) top center no-repeat;
    background-size: cover;
    position: relative;
}

.ibanner .iban_inner {
    position: absolute;
    width: 316px;
    max-width: 100%;
    height: 100%;
    background: rgba(2, 23, 44, .75);
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 24.2rem 1rem 0;
    text-align: center;
}

.iban_inner .iban_top img {}

.iban_inner .iban_top h3 {
    font-size: 50px;
    color: #ffffff;
    font-family: 'Playfair Display';
    font-weight: bold;
    font-style: italic;
}

.iban_inner .iban_top h2 {
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
    margin-top: .5rem;
}

.iban_inner .iban_bot {
    position: absolute;
    bottom: 6.2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.iban_inner .iban_bot p {
    font-size: 16px;
    color: #fff;
    font-family: 'Playfair Display';
    opacity: .35;
}

@media screen and (max-width:991px) {
    .ibanner {
        min-height: 430px;
    }

    .ibanner .iban_inner {
        padding: 14rem 1rem 0;
    }

    .iban_inner .iban_bot {
        bottom: 3rem;
    }
}

@media screen and (max-width:768px) {
    .ibanner {
        min-height: 380px;
    }

    .iban_inner .iban_bot {
        bottom: 1rem;
    }
}

@media screen and (max-width:576px) {
    .ibanner {
        min-height: 300px;
    }

    .ibanner .iban_inner {
        padding: 8rem 1rem 0;
    }
}

@media screen and (max-width:414px) {
    .ibanner .iban_inner {
        padding: 8rem 1rem 0;
        width: 290px;
    }
}

@media screen and (max-width:330px) {
    .ibanner .iban_inner {
        width: 250px;
    }

    .iban_inner .iban_top h3 {
        font-size: 36px;
    }
}

/***ibanner end****/
/***********************/
/***********************/
/***instruction start***/
.instruction {
    padding: 4.4rem 0 0;
}

.instruction .F_other06 {
    width: 1384px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 7.5rem;
}

.F_other06 .F_other06_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5rem;
}

.F_other06_top .commodity {
    width: 46%;
}

.F_other06_top .commodity ul {}

.F_other06_top .commodity ul li {
    margin-bottom: 1.5rem;
}
.commodity .name{
    line-height: 1;
}
.commodity .name span {
    font-size: 18px;
    letter-spacing: 0;
}

.commodity .name span:first-child {
    color: #f5974c;
    font-family: 'Playfair Display';
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
}

.commodity .name span:last-child {
    color: #1a1a1a;
    font-weight: bold;
    display: inline-block;
}

.commodity .text {}

.commodity .text p {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
}

.F_other06 .F_other06_bot {
    width: 1150px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    letter-spacing: 0;
}

.F_other06 .F_other06_bot:before {
    content: '';
    width: 918px;
    max-width: 100%;
    min-height: 460px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 1px #2a2a2a solid;
    z-index: -1;
}

.F_other06_bot .pro_title {
    text-align: center;
    padding-top: 5rem;
    margin-bottom: 4.8rem;
}

.F_other06_bot .pro_title h4 {
    font-size: 30px;
    color: #595959;
    font-family: 'Playfair Display';
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.F_other06_bot .pro_title p {
    font-size: 16px;
    color: #464646;
}

.F_other06_bot .com_cards {}

.F_other06_bot .com_cards ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.F_other06_bot .com_cards ul li {
    width: 22%;
    background: #facba5;
    border-radius: 10px;
    padding: 2.4rem 1.8rem 1.8rem;
    text-align: center;
    margin: 0 4rem 3rem 0;

}

.F_other06_bot .com_cards ul li:nth-child(4),
.F_other06_bot .com_cards ul li:nth-child(8),
.F_other06_bot .com_cards ul li:nth-child(12),
.F_other06_bot .com_cards ul li:nth-child(16) {
    margin: 0 0 4rem 0;
}

.com_cards .combo {
    font-size: 12px;
    color: #2a2a2a;
    font-family: 'Playfair Display';
    font-weight: 400;
    margin-bottom: 1rem;
}

.com_cards .chtxt {
    font-size: 30px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 2rem;
}

.com_cards .no {
    font-size: 20px;
    color: #2a2a2a;
    font-family: 'Playfair Display';
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.com_cards .txt {
    font-size: 12px;
    color: #2a2a2a;
    font-weight: 500;
    font-family: 'Playfair Display';
    letter-spacing: 1px;
}

@media screen and (max-width:1100px) {
    .instruction .F_other06 {
        padding: 0 3rem;
    }
}

@media screen and (max-width:1000px) {
    .F_other06 .F_other06_bot:before {
        max-width: 90%;
    }

    .F_other06_bot .com_cards ul {
        justify-content: flex-start;
    }

    .F_other06_bot .com_cards ul li {
        width: 31%;
        margin: 0 3rem 3rem 0;
    }

    .F_other06_bot .com_cards ul li:nth-child(4),
    .F_other06_bot .com_cards ul li:nth-child(8),
    .F_other06_bot .com_cards ul li:nth-child(12),
.F_other06_bot .com_cards ul li:nth-child(16) {
        margin: 0 3rem 3rem 0;
    }

    .F_other06_bot .com_cards ul li:nth-child(3),
    .F_other06_bot .com_cards ul li:nth-child(6),
    .F_other06_bot .com_cards ul li:nth-child(9),
    .F_other06_bot .com_cards ul li:nth-child(12),
    .F_other06_bot .com_cards ul li:nth-child(15) {
        margin: 0 0 3rem 0;
    }
}

@media screen and (max-width:834px) {
    .F_other06_bot .com_cards ul li {
        width: 30%;
    }
}

@media screen and (max-width:768px) {
    .instruction .F_other06 {
        padding: 0 2rem;
    }

    .F_other06_bot .com_cards ul li {
        margin: 0 2rem 3rem 0;
        width: 31%;
    }

    .F_other06_bot .com_cards ul li:nth-child(4),
    .F_other06_bot .com_cards ul li:nth-child(8)  {
        margin: 0 2rem 3rem 0;
    }
}

@media screen and (max-width:576px) {
    .F_other06_bot .com_cards ul li {
        width: 48%;
    }

    .F_other06_bot .com_cards ul li:nth-child(even) {
        margin: 0 0 3rem 0;
    }

    .F_other06_bot .com_cards ul li:nth-child(3), .F_other06_bot .com_cards ul li:nth-child(9) {
        margin: 0 2rem 3rem 0;
    }
}

@media screen and (max-width:450px) {
    .F_other06 .F_other06_top {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .F_other06_top .commodity {
        width: 100%;
    }

    .F_other06_bot .com_cards ul {
        justify-content: center;
    }

    .F_other06_bot .com_cards ul li {
        width: 85%;
        margin: 0 0 3rem 0;
    }

    .F_other06_bot .com_cards ul li:nth-child(3), .F_other06_bot .com_cards ul li:nth-child(9) {
        margin: 0 0 3rem 0;
    }

}

@media screen and (max-width:393px) {
    .F_other06 .F_other06_bot:before {
        max-width: 100%;
    }
}

@media screen and (max-width:360px) {
    .instruction .F_other06 {
        padding: 0 1rem;
    }
}

/***instruction end****/
/***********************/

/**/
#about,
#pro {
    transform: translateY(-75px);
}

#con {
    transform: translateY(-78px);
}

@media (max-width:991px) {}

@media (max-width:768px) {
    #con {
        transform: translateY(-60px);
    }

}

/***********************/
/***top***/
#gotop {
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    z-index: 50;
    cursor: pointer;
    display: none;
    transition: .5s all;
}

#gotop:hover {
    transform: translateY(-5px);
}

@media (max-width:768px) {
    #gotop {
        bottom: 1rem;
        text-align: right;
    }

    #gotop img {
        width: 80%;
    }
}

/***********************/
button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    background: #cabaaa;
    border: solid 1px #303030;
    color: #303030;
    border-radius: 2px;
    font-weight: 400;
    transition: .2s linear;
    padding: 0em 1em;
    height: auto;
    line-height: 2;
    font-size: 16px;
    margin: 5px;
}

button:hover,
html input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    background: #655749;
    color: #ffffff;
}

.table-responsive {
    border: 0;
    margin: 10px 0;
}

/***products*************************************************************************************************/
.products {
    width: 1385px;
    margin: 0 auto;
    max-width: 100%;
    padding: 6em 0 3em;
    color: #000;
    font-size: 16px;
}

.newslist {
    min-height: 300px;
    text-align: center;
}

.newslist table .h1,
.newslist table .h2,
.newslist table .h3,
.newslist table .h4,
.newslist table .h5,
.newslist table .h6,
.newslist table h1,
.newslist table h2,
.newslist table h3,
.newslist table h4,
.newslist table h5,
.newslist table h6 {
    line-height: normal;
}

/***newslist_rwd***/
.newslist_rwd {
    padding-bottom: 1em;
    text-align: left;
    padding: 0em 1em 1em;
}

.newslist_rwd a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
    text-align: center;
}
.newslist_rwd a:not(:first-child){
    display: inline-block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/*npic*/
.newslist_rwd .npic {
    position: relative;
    width: 303px;
    max-width: 100%;
    min-height: 303px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
    box-shadow: 4px 13px 27px rgba(0, 0, 0, .3);
}

.newslist_rwd .npicimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
}

.newslist_rwd a:hover .npic {
    transform: translateY(-5px);
}

/*ntitle*/
.newslist_rwd .ntitle {
    text-align: left;
    position: absolute;
    width: 241px;
    max-width: 100%;
    min-height: 141px;
    vertical-align: top;
    background: rgba(255, 255, 255, .75);
    top: 24rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 3.3rem 2rem;
}

.newslist_rwd .ntitle h3 {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #02172c;
    font-size: 20px;
    margin: 0em 0 0em;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: left;
    line-height: 1.3;
    transition: .5s all;
}
.newslist_rwd .ntitle h3 a:nth-child(1) {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.newslist_rwd .ntitle:after {
    content: '';
    background: rgba(51, 72, 93, 1.0);
    width: 62px;
    height: 5px;
    position: absolute;
    bottom: 3rem;
    left: 2rem;
}

.newslist_rwd:hover .ntitle h3 {
    color: #d0771c;
}

.newslist_rwd .ntxt {
    width: 337px;
    max-width: 100%;
    padding: 9rem 0 0 1rem;
    margin: 0 auto;
    height: 150px;
}

.newslist_rwd .ntxt p {
    font-size: 16px;
    color: #1a1a1a;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
}

.newslist_rwd .nmore {
    width: 63px;
    max-width: 100%;
    min-height: 34px;
    background: rgba(51, 72, 93, 1.0);
    font-size: 14px;
    color: #ffffff;
    font-family: 'Playfair Display';
    padding: .5rem;
    margin: 1.7rem 0 0 auto;
    transition: .5s all;
    text-align: center;
}

.newslist_rwd:hover .nmore {
    background: rgba(199, 157, 37, 1.0);
    color: #000;
}

.products table.tableimg {
        width: 100%;
	    padding: 0 2rem;
    }
.products table.tableimg img {
    display: block;
    margin: 0 auto;
}

@media screen and (max-width:1200px) {
    .newslist_rwd {
        width: 33%;
        margin-bottom: 3rem;
    }

    table.tableimg {
        width: 95%;
        margin: 0 auto;
    }

}

@media screen and (max-width:834px) {
    .newslist_rwd {
        width: 48%;
    }

    .newslist_rwd .ntxt {
        padding: 9rem 1rem 0 1rem;
    }

    .newslist_rwd a .nmore {
        margin: 1.7rem 3rem 0 auto;
    }
}

@media screen and (max-width:600px) {
    .products {
    width: 1385px;
    margin: 0 auto;
    max-width: 100%;
    padding: 6em 0 3em;
    color: #000;
    font-size: 16px;
}
    .newslist_rwd {
        width: 70%;
        float: none;
        margin: 0 auto 4rem;
    }
}

@media screen and (max-width:414px) {
    .newslist_rwd {
        width: 90%;
    }
	.products table.tableimg {
    width: 90%;
}
}

@media screen and (max-width:360px) {
    .newslist_rwd {
        width: 100%;
    }
}


/***evidence*************************************************************************************************/
.evidence {
    width: 100%;
    position: relative;
}

.evidence:before {
    content: '';
    background: rgba(235, 196, 36, .3);
    width: 15%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.evid {
    width: 1150px;
    margin: 0 auto;
    max-width: 100%;
    padding: 6em 0 3em 11.6rem;
}

/***newslist_rwd2***/
.newslist_rwd2 {
    text-align: left;
    float: none;
    padding: 0 0 5rem 0;
}

.newslist_rwd2 a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
    text-align: center;
    vertical-align: top;
}
.newslist_rwd2 a:not(:first-of-type){
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.newslist_rwd2 a:first-of-type{
    display: inline-block;
}
/*npic*/
.newslist_rwd2 .npic {
    position: relative;
    width: 423px;
    max-width: 100%;
    min-height: 423px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
}

.newslist_rwd2 .npicimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
}

.newslist_rwd2:hover .npic {
    transform: translateY(-5px);
}

.newslist_rwd2 .ninner {
    width: 57%;
    display: inline-block;
    padding: 8rem 0 6rem 4.2rem;
    position: relative;
}
.newslist_rwd2 .ninner a:first-child{
    display: none;
}
.newslist_rwd2 .ninner:after {
    content: '';
    background: rgba(235, 196, 36, .5);
    position: absolute;
    width: 101%;
    min-height: 17px;
    bottom: 0;
    left: -6px;
    z-index: -1;
}

/*ntitle*/
.newslist_rwd2 .ninner .ntitle {}

.newslist_rwd2 .ninner .ntitle h3 {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #02172c;
    font-size: 36px;
    margin: 0;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: left;
    line-height: 1.3;
    transition: .5s all;
}
.newslist_rwd2 .ninner .ntitle h3 a:nth-child(1) {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-align: left;
}

.newslist_rwd2:hover .ninner .ntitle h3 {
    color: #d0771c;
}

.newslist_rwd2 .ninner .ntxt {
    padding: 3rem 0 0 0;
}

.newslist_rwd2 .ninner .ntxt p {
    font-size: 16px;
    color: #1a1a1a;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
}

.newslist_rwd2 .ninner .nmore {
    width: 130px;
    max-width: 100%;
    font-size: 16px;
    color: #b18f09;
    font-weight: bold;
    padding: .5rem;
    margin: 5rem 0 0 auto;
    transition: .5s all;
}

.newslist_rwd2 .ninner .nmore img {
    padding-right: .5rem;
    vertical-align: inherit;
}

.newslist_rwd2:hover .ninner .nmore {
    color: #000;
}

.evid table.tableimg {
        width: 100%;
    }
@media screen and (max-width:1100px) {
    .evid {
        padding: 6em 1rem 3em 1rem;
    }
}

@media screen and (max-width:1000px) {
    .newslist_rwd2 .ninner {
        width: 45%;
        padding: 8rem 0 6rem 2rem;
    }

}

@media screen and (max-width:768px) {
    .newslist_rwd2 .npic {
        max-width: 50%;
    }

    .newslist_rwd2 .ninner {
        width: 47%;
    }
}

@media screen and (max-width:450px) {
   .evidence:before {
    width: 15%;
}
    .newslist_rwd2 {
        padding: 0 0 5rem 0;

    }

    .newslist_rwd2 .npic {
        max-width: 100%;
    }

    .newslist_rwd2 .ninner {
        width: 100%;
        padding: 4rem 0 6rem 0;
    }

    .newslist_rwd2 .ninner:after {
        width: 100%;
        left: 0;
    }
}

@media screen and (max-width:414px) {
    .newslist_rwd2 a:first-of-type{
        display: block;
    }
    .newslist_rwd2 .npic {
        min-height: 390px
    }
}

@media screen and (max-width:360px) {
    .newslist_rwd2 .npic {
        min-height: 340px;
    }
}

@media screen and (max-width:320px) {
    .newslist_rwd2 .npic {
        min-height: 300px;
    }
}

@media screen and (max-width:300px) {
    .newslist_rwd2 .npic {
        min-height: 280px;
    }
}

/*page_num*/
.page_num {
    padding: 1em 0;
}

.page_num a {
    display: inline-block;
}

/***inbanner***/
.inbanner {
    background: url(../../images/inbanner.jpg) top center no-repeat;
    background-size: cover;
    min-height: 598px;
    position: relative;
}

.intitle {
    width: auto;
    margin: 0 auto;
    max-width: 90%;
    color: #303030;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.intitle p {
    font-size: 85px;
    line-height: 1;
    text-align: right;
}

.intitle sub {
    font-size: 26px;
    position: relative;
    line-height: 1;
    bottom: 0;
    display: block;
    padding-left: .2em;
}

.intitle sub:before {
    content: '';
    background: #fff;
    width: 40%;
    height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
}

.intitle span {
    display: block;
    text-align: right;
    font-style: italic;
    letter-spacing: 1px;
    font-size: 14px;
}

@media(max-width:1200px) {
    .inbanner {
        min-height: 475px;
    }
}

@media(max-width:900px) {
    .intitle p {
        font-size: 65px;
    }

    .intitle sub {
        font-size: 24px;
    }

    .intitle {
        top: 60%;
    }

    .inbanner {
        min-height: 350px;
    }
}

@media(max-width:600px) {
    .intitle p {
        font-size: 65px;
    }

    .intitle sub {
        font-size: 18px;
    }

    .intitle sub:before {
        width: 40%;
    }

    .intitle span {
        font-size: 12px;
    }

    .inbanner {
        min-height: 300px;
    }
}

@media(max-width:450px) {
    .intitle sub {
        font-size: 16px;
    }
}