/*--------------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;
    line-height: 1.8;
}

body {
    font-family: 'Zen Maru Gothic', serif, 'Ubuntu', sans-serif;
    position: relative;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 1px;
    color: #000;
    overflow-x: hidden;
}

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: inherit;
    text-decoration: none;
    outline: none;
    transition: .3s ease all;
    box-sizing: border-box;
}

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

img {
    max-width: 100%;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}


.h1,
.h2,
.h3,
h1,
h2,
h3 {
    line-height: 1.2;
    margin: 0;
}

.clear {
    clear: both;
}

::-webkit-scrollbar {
    width: 13px;
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 0 0;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: rgb(96,111,123, .8);
    /*捲軸顏色*/
}

::selection {
    background: rgba(96,111,123, .9);
    color: #fff;
}

/****************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*gotop*/
#gotop {
    position: fixed;
    bottom: 2rem;
    right: 8px;
    cursor: pointer;
    display: none;
    z-index: 9;
    transition: .3s ease-in-out;
}

#gotop:hover {
    transform: scale(.9);
}


#btn {
    position: fixed;
    bottom: 16rem;
    right: 8px;
    cursor: pointer;
    z-index: 9;
    transition: .3s ease-in-out;
}

#btn ul {}

#btn ul li {
    position: relative;
    margin-bottom: 3rem;
}

#btn ul li a {}

#btn ul li a img {
    transition: .3s linear;
}

#btn ul li a .ibut1 {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    opacity: 0;
    transition: .3s linear;
}

@media (any-hover: hover) {
    #btn ul li a:hover img {
        opacity: 0;
    }

    #btn ul li a:hover .ibut1 {
        opacity: 1;
    }
}


@media screen and (max-width:768px) {
    #btn ul li {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width:500px) {
    #gotop {
        width: 15%;
    }

    #gotop img {
        width: 100%;
    }
}

@media screen and (max-width:450px) {
    #btn {
        bottom: 0;
        right: 0;
        width: 100%;
        padding: 2rem 0;
        background: url(../../images/btnmob_bg.jpg) top left repeat;
        -webkit-filter: drop-shadow(0px -3px 6px rgba(26, 23, 23, 0.15));
        filter: drop-shadow(0px -3px 6px rgba(26, 23, 23, 0.15));

    }

    #btn ul {
        display: flex;
        text-align: center;
    }

    #btn ul li {
        width: 25%;
    }
}


/*carousel-fade*/
.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*---header-------------------------------------------------------------------------------------------------------------------------------*/
header {
    position: relative;
    width: 1868px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.thumbnail {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.dexlogo {
    width: 256px;
    max-width: 100%;
    position: absolute;
    top: 10rem;
    left: 15rem;
}

.dexlogo img {
    margin-bottom: 7.5rem;
}

.dexlogo .dex_txt {}

.dexlogo .dex_txt h3 {
    font-size: 21px;
    color: #606f7b;
    font-family: 'naikaifont';
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 1px;
}

.dexlogo .dex_txt p {
    font-size: 10px;
    color: #6c747e;
    font-family: 'Ubuntu';
    line-height: 1;
    opacity: .5;
    letter-spacing: 0;
}


/***enter***/
.enter {
    position: absolute;
    width: 20%;
    margin: 0 auto;
    bottom: -10rem;
    left: -7rem;
    right: 0;
    text-align: center;
}

.enter2 {
    position: relative;
    width: 20%;
    margin: 0 auto;
    bottom: -4rem;
    left: 0;
    right: 0;
    text-align: center;
    display: none;
}

.enter img {
    margin-top: 1em;
}

.enter p,
.enter2 p {
    font-family: 'Ubuntu';
    font-size: 16px;
    color: #221815;
    position: relative;
    top: 3rem;
}

/*circle*/
.circle {
    width: 12px;
    height: 12px;
    border: 1px solid #221815;
    border-radius: 100%;
    background: transparent;
    margin: 0 auto 10%;
    animation: moving 1.5s infinite alternate;
}

/*line*/
.line {
    width: 1px;
    height: 75px;
    background-color: #221815;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    margin-right: auto;
    margin-left: auto;
}

@keyframes moving {
    0% {
        -webkit-transform: translateY(-160%);
        transform: translateY(-160%);
    }

    100% {
        -webkit-transform: translateY(160%);
        transform: translateY(160%);
    }
}


.dex_inner {
    width: 1868px;
    max-width: 100%;
    margin: 2.6rem auto 0;
    display: flex;
    justify-content: flex-end;
}

.dex_inner .dex_lt {
    width: 36%;
    position: relative;
    margin-right: -32rem;
    pointer-events: none;
}

.dex_inner .dex_lt img:first-child {
    position: absolute;
    bottom: 0;
    right: 0;
}

.dex_inner .dex_lt img:last-child {
    position: absolute;
    bottom: 3rem;
    right: 27rem;
    z-index: 1;
}

.dex_inner .dex_rt {
    width: 81%;

}

.carousel {
    position: relative;
}

.carousel .dex_deco {
    display: block;
}

.carousel .dex_deco img:first-child {
    position: absolute;
    top: 1.7rem;
    right: 4.3rem;
    z-index: 1;
}

.carousel .dex_deco img:last-child {
    position: absolute;
    bottom: 2.4rem;
    right: 15.6rem;
    z-index: 1;
}

.carousel .dex_txt2 {
    position: absolute;
    top: 4rem;
    right: 4rem;
    z-index: 1;
    display: none;
}

.carousel .dex_txt2 h3 {
    font-size: 12px;
    color: #606f7b;
    font-family: 'naikaifont';
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 1px;

}

.carousel .dex_txt2 p {
    font-size: 6px;
    color: #6c747e;
    font-family: 'Ubuntu';
    line-height: 1;
    opacity: .5;
    letter-spacing: -1px;
}

.carousel-inner {
    
}



/*item*/
.item {
    width: 100%;
    height: 1052px;
}

.carousel .item:nth-of-type(1) {
    background: url(../../flash/dex1.png) top center no-repeat;
    background-size: contain;

}

.carousel .item:nth-of-type(2) {
    background: url(../../flash/dex2.png) top center no-repeat;
    background-size: contain;
}

.carousel .item:nth-of-type(3) {
    background: url(../../flash/dex3.png) top center no-repeat;
    background-size: contain;
}

.carousel .item:nth-of-type(4) {
    background: url(../../flash/dex4.png) top center no-repeat;
    background-size: contain;
}


@media screen and (max-width:1700px) {
    .dexlogo {
        top: 6rem;
        left: 7rem;
    }

    .item {
        height: 980px;
    }
}

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

    .dex_inner .dex_lt img:last-child {
        width: 40%;
    }

    .dex_inner .dex_lt img:first-child {
        width: 95%;
    }

    .item {
        height: 880px;
    }
}

@media screen and (max-width:1400px) {
    .dexlogo img {
        margin-bottom: 3.5rem;
    }

    .dex_inner .dex_lt {
        margin-right: -27rem;
    }

    .dex_inner .dex_lt img:first-child {
        width: 85%;
    }

    .dex_inner .dex_lt img:last-child {
        width: 35%;
        right: 21rem;
    }

    .item {
        height: 780px;
    }
}

@media screen and (max-width:1300px) {
    .dexlogo {
        top: 3rem;
        left: 3rem;
    }

    .item {
        height: 700px;
    }
}

@media screen and (max-width:1200px) {
    .item {
        height: 680px;
    }

    .carousel .dex_deco img:first-child {
        width: 14%;
    }

    .carousel .dex_deco img:last-child {
        right: 8.6rem;
        width: 20%;
    }
}

@media screen and (max-width:1100px) {
    .dexlogo {
        top: 3rem;
        left: 0;
        position: relative;
        margin: 0 auto 20rem;
    }

    .dex_inner {
        justify-content: center;
    }

    .dex_inner .dex_lt {
        width: 39%;
        margin-right: -20rem;
    }

    .dex_inner .dex_lt img:first-child {
        width: 97%;
    }

    .dex_inner .dex_lt img:last-child {
        width: 42%;
        right: 15rem;
    }

    .dex_inner .dex_rt {
        width: 95%;
    }
}

@media screen and (max-width:1000px) {
    .item {
        height: 600px;
    }
}

@media screen and (max-width:834px) {
    .item {
        height: 530px;
    }
}

@media screen and (max-width:768px) {
    .item {
        height: 510px;
    }

}

@media screen and (max-width:650px) {
    .dex_inner .dex_lt {
        width: 41%;
        margin-right: -24rem;
    }

    .dex_inner .dex_lt img:first-child {
        width: 100%;
    }

    .item {
        height: 440px;
    }
}

@media screen and (max-width:576px) {
    .item {
        height: 400px;
    }
}

@media screen and (max-width:450px) {
    .dexlogo {
        margin: 0 auto;
        width: 30%;
    }

    .dexlogo .dex_txt {
        display: none;
    }

    .enter {
        display: none;
    }

    .dex_inner {
        flex-wrap: wrap;
        align-content: normal;
    }

    .dex_inner .dex_lt {
        width: 41%;
        margin-right: 0;
        position: absolute;
        bottom: -80px;
        left: 0;
    }

    .dex_inner .dex_lt img:last-child {
        width: 42%;
        right: 5rem;
        bottom: 5rem;
    }

    .dex_inner .dex_rt {
        width: 100%;
    }

    .carousel .dex_deco img:first-child {
        width: 22%;
        right: 2rem;
        top: -0.3rem;
    }

    .dex_inner .dex_lt img:first-child {
        width: 90%;
        bottom: 5rem;
        right: 0;
    }

    .dex_inner .dex_lt img:last-child {
        width: 65%;
        right: 4rem;
        bottom: 8rem;
    }

    .carousel .dex_deco img:last-child {
        right: 0.6rem;
        width: 35%;
        bottom: -6.6rem;
    }

    .carousel .dex_txt2 {
        display: block;
    }

    .item {
        height: 473px;
    }

    .carousel .item:nth-of-type(1) {
        background: url(../../flash/dex_mob1.png) top center no-repeat;
        background-size: cover;

    }

    .carousel .item:nth-of-type(2) {
        background: url(../../flash/dex_mob2.png) top center no-repeat;
        background-size: cover;
    }

    .carousel .item:nth-of-type(3) {
        background: url(../../flash/dex_mob3.png) top center no-repeat;
        background-size: cover;
    }

    .carousel .item:nth-of-type(4) {
        background: url(../../flash/dex_mob4.png) top center no-repeat;
        background-size: cover;
    }

    .enter2 {
        display: block;
    }
}

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

    .item {
        height: 414px;
    }

    .carousel .dex_deco img:last-child {
        bottom: -6rem;
    }

    .dex_inner .dex_lt img:first-child {
        bottom: 7rem;
    }

    .dex_inner .dex_lt img:last-child {
        right: 2rem;
    }

    .circle {
        width: 5px;
        height: 5px;
        margin: 0 auto 1%;
    }

    .enter2 {
        bottom: -2rem;
    }

    .enter2 p {
        font-size: 7px;
    }

    .line {
        height: 45px;
    }

    @keyframes moving {
        0% {
            -webkit-transform: translateY(-180%);
            transform: translateY(-180%);
        }

        100% {
            -webkit-transform: translateY(180%);
            transform: translateY(180%);
        }
    }
}

@media screen and (max-width:393px) {
    .dexlogo img {
        margin-bottom: 2.5rem;
    }

    .item {
        height: 392px;
    }
}

@media screen and (max-width:390px) {
    .item {
        height: 388px;
    }
}

@media screen and (max-width:380px) {
    .item {
        height: 379px;
    }
}

@media screen and (max-width:360px) {
    .item {
        height: 358px;
    }

    .carousel .dex_txt2 {
        top: 3rem;
        right: 3rem;
    }
}

@media screen and (max-width:350px) {
    .item {
        height: 347px;
    }
}

@media screen and (max-width:330px) {
    .item {
        height: 325px;
    }
}

@media screen and (max-width:310px) {
    .item {
        height: 305px;
    }
}

@media screen and (max-width:300px) {
    .item {
        height: 293px;
    }
}

/*ibutton*/

.ibutton {
    position: fixed;
    top: 12rem;
    right: 8.9rem;
    z-index: 100;
    padding: 10rem 0;
    opacity: 0;
    transition: .6s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
    width: 599px;
    max-width: 100%;
    border-radius: 80px;
    background: url(../../images/ibutton_bg.jpg) top left repeat;
    padding: 4.7rem 6.3rem 2rem 8rem;
}

.ibutton:before {
    content: '';
    width: 599px;
    max-width: 100%;
    min-height: 564px;
    position: absolute;
    top: 4px;
    left: -8px;
    border: 1px solid #12100b;
    border-radius: 80px;
    pointer-events: none;
}

.show {
    opacity: 1;
    pointer-events: visible;
}



.ibutton .menu_logo {
    margin-bottom: 5.2rem;
    text-align: center;
}


.ibutton ul {
    display: flex;
    flex-wrap: wrap;
}

.ibutton ul li {
    width: 50%;
    position: relative;
    margin-bottom: 3.3rem;
}

.ibutton ul li:nth-child(even) {
    text-align: right;
}

.ibutton ul li a img {
    transition: .5s all;
}

.ibutton ul li a .ibut1 {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    opacity: 0;
    transition: .3s linear;
}

.ibutton ul li:nth-child(even) a .ibut1 {
    right: 0;
    left: auto;
}

@media (any-hover: hover) {
    .ibutton ul li a:hover img {
        opacity: 0;
    }

    .ibutton ul li a:hover .ibut1 {
        opacity: 1;
    }
}



.logo {
    position: fixed;
    top: 2.4rem;
    left: 10rem;
    z-index: 100;
    opacity: 0;
}

/***mibutton***/
.mibutton {
    background: #8d9e9a;
    background-size: 100%;
    border-radius: 50%;
    position: fixed;
    top: 2.4rem;
    right: 3rem;
    z-index: 101;
    cursor: pointer;
    width: 90px;
    max-width: 100%;
    height: 90px;
    overflow: visible;
    opacity: 0;
    transition: .3s all;

}

.mibutton:before {
    content: 'MENU';
    font-size: 16px;
    font-family: 'Ubuntu';
    color: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: auto;
    text-align: center;

}

.mibutton_ani {
    opacity: 1;
}

.mibutton_ani {
    background: transparent;
    border: 2px solid #8d9e9a;
}

.mibutton_ani:before {
    content: '✖︎';
    color: #768b86;
    font-size: 42px;
}

.navtop,
.ontop {
    opacity: 1;
}

.navtop2,
.ontop2 {
    opacity: 1;
}

@media screen and (max-width:1500px) {
    .logo {
        left: 5rem;
    }
}

@media screen and (max-width:834px) {
    .logo {
        left: 2rem;
    }
}

@media screen and (max-width:768px) {
    .logo {
        left: 3rem;
        width: 15%;
    }
}

@media screen and (max-width:650px) {
    .ibutton {
        top: 13rem;
        right: 1rem;
    }
}

@media screen and (max-width:576px) {
    .ibutton {
        max-width: 90%;
    }
}

@media screen and (max-width:450px) {
    .logo {
        left: .5rem;
        width: 15%;
        top: .5rem;
    }

    .mibutton {
        top: 1rem;
        right: 2rem;
        width: 70px;
        height: 70px;
    }

    .ibutton {
        top: 11rem;
        right: 1rem;
        padding: 4.7rem 3rem 2rem 3rem;
    }

    .ibutton:before {
        min-height: 540px;
    }
}

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

    .ibutton .menu_logo {
        margin-bottom: 3rem;
    }

    .ibutton:before {
        min-height: 500px;
    }
}

@media screen and (max-width:393px) {
    .mibutton {
        top: 1rem;
        right: 1rem;
        width: 60px;
        height: 60px;
    }

    .ibutton {
        top: 8rem;
        padding: 4.7rem 2rem 1rem 2rem;
    }

    .ibutton:before {
        min-height: 490px;
    }
}

@media screen and (max-width:360px) {
    .ibutton:before {
        min-height: 470px;
    }
}

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

@media screen and (max-width:300px) {
    .ibutton:before {
        min-height: 435px;
    }
}


/***********************/
/***index_inner start***/

.index_inner {
    width: 100%;
    position: relative;
    padding: 17.4rem 0 0 0;
}

.index_inner:after {
    content: '';
    background: url(../../images/inews_bg.png) top center no-repeat;
    width: 100%;
    min-height: 717px;
    position: absolute;
    top: 16rem;
    bottom: 0;
    left: 0;
    z-index: -1;
}

@media screen and (max-width:834px) {
    .index_inner {
        padding: 13rem 0 0 0;
    }
}

@media screen and (max-width:450px) {
    .index_inner {
        padding: 23rem 0 0 0;
    }
}

@media screen and (max-width:393px) {
    .index_inner {
        padding: 19rem 0 0 0;
    }
}

/***index_inner end****/
/***********************/

/*****************************/
/***inews start***/
.inews {
    width: 1330px;
    margin: 0 auto 12.4rem;
    padding: 5rem 6rem;
    position: relative;
    border: 1px solid #606f7b;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
}

.inews:after {
    content: '';
    background: url(../../images/inews_title.png) top center no-repeat, #fff;
    width: 198px;
    max-width: 100%;
    min-height: 92px;
    position: absolute;
    top: -6.8rem;
    left: 0;
    right: 0;
    margin: 0 auto;

}

.inewslist {
    display: inline-block;
    padding: 0 !important;
    width: 48%;
}

.inewslist .ntitle {
    margin: 4rem 0 0 0;
	width: 85%;
}

@media screen and (max-width:1300px) {
    .inews {
        width: 95%;
        padding: 5rem 2rem;
    }
}

@media screen and (max-width:1200px) {
    .inewslist .ntitle {
        width: 37%;
    }
}

@media screen and (max-width:1100px) {
    .inewslist .ntitle {
        width: 67%;
    }
}

@media screen and (max-width:768px) {
    .inews {
        margin: 0 auto 8rem;
    }

    .inewslist .ntitle {
        width: 98%;
    }
}

@media screen and (max-width:650px) {
    .inews {
        flex-wrap: wrap;
    }

    .inewslist {
        width: 100%;
        margin-bottom: 3rem;
    }

    .inewslist .npic {
        width: 45%;
    }

    .inewslist .ntitle {
        width: 45%;
    }
}

@media screen and (max-width:576px) {
    .inews {
        margin: 0 auto 6rem;
        padding: 5rem 2rem 2rem;
    }

    .inewslist .npic {
        min-height: 190px;
    }

    .inewslist .ntitle {
        margin: 2rem 0 0 0;
    }
}

@media screen and (max-width:450px) {
    .inewslist .npic {
        min-height: 250px;
        width: 90%;
    }

    .inewslist .ntitle {
        width: 90%;
    }
}

@media screen and (max-width:414px) {
    .inewslist .npic {
        width: 100%;
    }

    .inewslist .ntitle {
        width: 100%;
    }
}

@media screen and (max-width:393px) {
    .inewslist .ntitle p {
        margin: 0 0 1rem 0;
    }
}

@media screen and (max-width:330px) {
    .inewslist .npic {
        min-height: 200px;
    }
}

/***inews end***/
/*****************************/
/***news*************************************************************************************************/
.news {
    width: 1062px;
    margin: 0 auto;
    max-width: 100%;
    padding: 6em 0 3em;
    color: #1a1a1a;
    font-size: 18px;
}

.newslist {
    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 5rem;
}

.newslist_rwd a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
    text-align: left;
}
.newslist_rwd a:nth-of-type(1) {
    display: inline-block;
}
/*npic*/
.npic {
    position: relative;
    width: 323px;
    min-height: 241px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
}

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

.newslist_rwd a:hover {
    opacity: .8;
}

/*ntitle*/
.ntitle {
    text-align: left;
    position: relative;
    margin: 4rem 0 0 2.4rem;
    width: 40%;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

.ntitle p {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #000;
    font-size: 18px;
    margin: 0 0 2rem 0;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: left;
    line-height: 1.3;
    font-weight: 600;
}

.ntitle p a {
    display: inline-block;
}

.ntitle p a:nth-of-type(1) {
    display: block;
    overflow: hidden;
    text-align: left;
}

.ntitle span {
    text-align: left;
    font-size: 16px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    transition: .2s ease all;
}


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

.page_num a {
    display: inline-block;
}

.inews .page_num {
    display: none;
}

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

@media screen and (max-width:768px) {
    .news {
        padding: 3em 0 3em;
    }
}

@media screen and (max-width:450px) {
    .npic {
        padding-right: 0;
            width: 100%;
    }

    .ntitle {
        margin: 3rem 0 0 2.4rem;
        width: 100%;
    }

    .ntitle p {
        margin: 0 0 1rem 0;
    }
}

@media screen and (max-width:393px) {
    .ntitle {
        margin: 3rem 0 0 0;
        width: 100%;
    }
}

@media screen and (max-width:360px) {
    .ntitle {
        padding-left: 0rem;
    }
}

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

    .ntitle {
        padding-left: 1rem;
    }
}

@media screen and (max-width:320px) {
    .npic {
        width: 280px;
    }
}

@media screen and (max-width:300px) {
    .npic {
        width: 260px;
    }
}

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

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

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

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

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

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

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

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

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

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

/***********************/
/***navbar start***/

.navbar {
    width: 1760px;
    max-width: 100%;
    display: flex;
    margin-bottom: 0;
}

.navbar .navbar_lt {
    width: 684px;
    max-width: 100%;
    min-height: 658px;
    background: url(../../images/navbar_bg.png) top left no-repeat;
    background-size: contain;
    position: relative;
    z-index: 0;

}

.navbar_lt .navbar_deco {}

.navbar_lt .navbar_deco img:nth-child(1) {
    position: absolute;
    top: 0rem;
    left: 14rem;
    z-index: -1;
}

.navbar_lt .navbar_deco img:nth-child(2) {
    position: absolute;
    bottom: 5.5rem;
    right: 5rem;
    z-index: -1;
}

.navbar_lt .navbar_deco img:nth-child(3) {
    position: absolute;
    top: 20.4rem;
    right: 8rem;
    z-index: -1;
}

.navbar_lt .navbar_txt {
    padding: 32.2rem 19rem 0 22.7rem;
    text-align: right;
}

.navbar_lt .navbar_txt h5 {
    font-size: 30px;
    color: #000;
    font-family: 'Ubuntu';
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0;
}

.navbar_lt .navbar_txt img {}

.navbar_lt .navbar_txt p {
    font-size: 18px;
    color: #12100b;
    line-height: 1.5;
}


.navbar .navbar_rt {
    width: 60%;
    margin: 0 0 0 auto;
    padding: 6rem 2.5rem 0;
}

.navbar .navbar_rt ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.navbar .navbar_rt ul li {
    position: relative;
    margin-bottom: 4rem;
}

.navbar .navbar_rt ul li a {}

.navbar .navbar_rt ul li a img {
    transition: .5s all;
}

.navbar .navbar_rt ul li .ibut1 {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    opacity: 0;
    transition: .3s linear;
}

@media (any-hover: hover) {
    .navbar .navbar_rt ul li a:hover img {
        opacity: 0;
    }

    .navbar .navbar_rt ul li a:hover .ibut1 {
        opacity: 1;
    }
}

@media screen and (max-width:1600px) {
    .navbar .navbar_lt {
        min-height: 640px;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        bottom: 1.5rem;
        right: 7rem;
    }

    .navbar_lt .navbar_txt {
        padding: 32.2rem 19rem 0 14.7rem;
    }

    .navbar .navbar_rt ul li {
        width: 33%;
    }
}

@media screen and (max-width:1536px) {
    .navbar .navbar_lt {
        min-height: 628px;
    }

}

@media screen and (max-width:1400px) {
    .navbar .navbar_lt {
        min-height: 600px;
    }
}

@media screen and (max-width:1366px) {
    .navbar .navbar_lt {
        min-height: 590px;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        width: 22%;
    }
}

@media screen and (max-width:1300px) {
    .navbar .navbar_lt {
        min-height: 580px;
    }

    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 11rem;
        width: 27%;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        width: 20%;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 22.4rem;
        right: 11rem;
        width: 40%;
    }
}

@media screen and (max-width:1200px) {
    .navbar .navbar_lt {
        min-height: 556px;
    }

    .navbar_lt .navbar_txt {
        padding: 32.2rem 19rem 0 4.7rem;
    }
}

@media screen and (max-width:1100px) {
    .navbar {
        flex-wrap: wrap;
    }

    .navbar .navbar_lt {
        min-height: 655px;
    }

    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 14rem;
    }

    .navbar .navbar_rt {
        width: 100%;
        margin: 0 auto;
        padding: 6rem 2rem 0;
    }
}

@media screen and (max-width:834px) {
    .navbar .navbar_lt {
        min-height: 490px;
    }

    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 14rem;
        width: 16%;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        width: 16%;
        bottom: 2.5rem;
        right: 25rem;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 15.4rem;
        right: 29rem;
        width: 22%;
    }

    .navbar_lt .navbar_txt {
        padding: 21rem 30rem 0 2rem;
    }
}

@media screen and (max-width:576px) {
    .navbar .navbar_lt {
        min-height: 400px;
    }

    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 9rem;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        bottom: 0.5rem;
        right: 22rem;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 10.4rem;
        right: 24rem;
    }

    .navbar_lt .navbar_txt {
        padding: 16rem 23rem 0 2rem;
    }

    .navbar .navbar_rt ul li {
        width: 49%;
    }
}

@media screen and (max-width:450px) {
    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 11rem;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        right: 10rem;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 13rem;
        right: 13rem;
    }

    .navbar_lt .navbar_txt {
        padding: 16rem 10rem 0 2rem;
    }
}

@media screen and (max-width:414px) {
    .navbar .navbar_lt {
        min-height: 360px;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 9rem;
        right: 14rem;
    }

    .navbar_lt .navbar_txt {
        padding: 12rem 10rem 0 2rem;
    }

    .navbar .navbar_rt ul li {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width:393px) {
    .navbar .navbar_rt {
        padding: 5rem 1rem 0;
    }
}

@media screen and (max-width:360px) {
    .navbar .navbar_lt {
        min-height: 300px;
    }

    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 9rem;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 8rem;
        right: 15rem;
    }

    .navbar_lt .navbar_txt {
        padding: 11rem 11rem 0 2rem;
    }

    .navbar_lt .navbar_txt h5 {
        font-size: 28px;
    }

    .navbar_lt .navbar_txt p {
        font-size: 16px;
    }
}

@media screen and (max-width:330px) {
    .navbar_lt .navbar_deco img:nth-child(2) {
        right: 7rem;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 8rem;
        right: 13rem;
    }

    .navbar_lt .navbar_txt {
        padding: 11rem 8rem 0 2rem;
    }
}

@media screen and (max-width:300px) {
    .navbar .navbar_lt {
        min-height: 260px;
    }

    .navbar_lt .navbar_deco img:nth-child(1) {
        left: 5rem;
    }

    .navbar_lt .navbar_deco img:nth-child(2) {
        width: 13%;
    }

    .navbar_lt .navbar_deco img:nth-child(3) {
        top: 7rem;
        right: 12rem;
    }

    .navbar_lt .navbar_txt {
        padding: 9rem 7rem 0 1rem;
    }
}

/***navbar end****/
/***********************/










/*---icons----------------------------------------------------------------------------------------------------------------------------------*/
.icons {}

.icons ul {
    list-style: none;
}

.icons li {
    margin: 5px 5px;
    display: inline-block;
    vertical-align: top;
    width: 21%;
    background: rgba(255, 255, 255, .6);
    border-radius: 7px;
    padding: 5px 0 8px;
    text-align: center;
    border: solid 1px #afafaf;
}

.icons li img {
    padding: 0 7px;
    margin: 0 auto;
}

.icons li span {
    display: block;
    font-size: 16px;
    line-height: 20px;
}

@media screen and (max-width:1199px) {
    .icons li {
        width: 10%;
    }
}

@media screen and (max-width:900px) {
    .icons li span {
        font-size: 12px;
    }
}

@media screen and (max-width:768px) {
    .icons li {
        width: 13%;
    }
}

@media screen and (max-width:600px) {
    .icons li {
        width: 17%;
    }
}

@media screen and (max-width:500px) {
    .icons li {
        width: 21%;
    }
}

@media screen and (max-width:430px) {
    .icons li {
        width: 27%;
        margin: 5px 8px;
        padding: 5px 4px 8px;
    }

    .icons li span {
        font-size: 13px;
    }
}

@media screen and (max-width:360px) {
    .icons li span {
        font-size: 12px;
    }
}

@media screen and (max-width:340px) {
    .icons li {
        width: 28%;
        margin: 5px 5px;
        padding: 5px 2px 8px;
    }
}

/*---r_icons-----------------------------------------------------------------------------------------------------------------------------------*/
.r_icons {
    text-align: left;
}

.r_icons ul {
    list-style: none;
}

.r_icons li {
    width: 11%;
}

@media screen and (max-width:815px) {
    .r_icons {
        text-align: left;
    }
}

@media screen and (max-width:765px) {
    .r_icons li {
        width: 20%;
    }
}

@media screen and (max-width: 765px) {
    .r_icons li {
        width: 17%;
    }
}

@media screen and (max-width:580px) {
    .r_icons li {
        width: 21%;
    }
}

@media screen and (max-width:480px) {
    .r_icons li {
        width: 23%;
        margin: 5px 0;
    }
}

@media screen and (max-width:440px) {
    .r_icons li {
        width: 30%;
        margin: 5px 3px;
        padding: 5px;
    }

    .r_icons li img {
        padding: 0 20px;
    }
}

@media screen and (max-width:360px) {
    .r_icons li {
        width: 31%;
        margin: 5px 0px;
    }

    .r_icons li img {
        padding: 0 12px;
    }
}

/*--note_icons--------------------------------------------------------------------------------------------------------------------------------*/
.note_icon {
    padding: 3% 0 0 0;
    text-align: left;
}

.note_icon ul {
    list-style: none;
}

.note_icon li {
    width: 10.666666%;
    padding: 5px 0 5px;
    border: solid 1px #d4d4d4;
    background: none;
}

.note_icon li img {
    padding-bottom: 5px;
    max-width: 100%;
}

@media screen and (max-width:1220px) {
    .note_icon li {
        width: 12%;
    }
}

@media screen and (max-width:1080px) {
    .note_icon li {
        width: 12%;
    }
}

@media screen and (max-width:760px) {
    .note_icon li {
        width: 14%;
    }
}

@media screen and (max-width:700px) {
    .note_icon li {
        width: 17%;
    }
}

@media screen and (max-width:580px) {
    .note_icon li {
        width: 19%;
        margin: 5px 0;
    }
}

@media screen and (max-width:505px) {
    .note_icon li {
        width: 23%;
        padding: 7px;
    }

    .note_icon li img {
        width: 100%;
    }
}

@media screen and (max-width:453px) {
    .note_icon li {
        width: 23%;
    }

    .icons li span {
        font-size: 12px;
    }
}

@media screen and (max-width:400px) {
    .note_icon li {
        width: 31%;
        padding: 6px;
    }
}

/*---footer----------------------------------------------------------------------------------------------------------------------------------*/
footer {
    width: 100%;
    position: relative;
    background: #fff;
}

/*ft_inner*/
.ft_inner {
    width: 100%;
    position: relative;
    margin-top: -1px;
}

.ft_inner:after {
    content: '';
    background: url(../../images/ft_ideco01.png) top right no-repeat;
    background-size: contain;
    width: 397px;
    max-width: 100%;
    min-height: 391px;
    position: absolute;
    bottom: -1px;
    right: 0;
}

.ft_wrap {
    width: 1712px;
    max-width: 100%;
    background: #f8e7a8;
    border-top-right-radius: 450px;
}

.ft_wrap .ft_top {
    width: 1356px;
    max-width: 100%;
    padding: 12rem 0 6rem 16rem;
    display: flex;
    justify-content: space-between;
}

.ft_top .ft_logo {
    width: 21%;
    text-align: left;
    padding-top: .4rem;
}

.ft_top .ft_info {
    width: 33%;
}

.ft_info .ft_list {}

.ft_info .ft_list ul {}

.ft_info .ft_list ul li {}

.ft_info .ft_list ul li span {
    font-size: 18px;
    color: #1a191a;
    display: inline-block;
}

.ft_info .ft_list ul li span:first-child {
    width: 8%;
    vertical-align: top;
}

.ft_info .ft_list ul li span:last-child {
    width: 90%;
}


.ft_top .ft_btn {
    width: 44%;
    padding-top: 2rem;
}

.ft_btn .ft_link {}

.ft_btn .ft_link ul {}

.ft_btn .ft_link ul li {
    position: relative;
    display: inline-block;
    width: 19%;
}

.ft_link ul li a {}

.ft_link ul li a img {
    transition: .3s linear;
}

.ft_link ul li a .ibut1 {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    opacity: 0;
    transition: .3s linear;
}

@media (any-hover: hover) {
    .ft_link ul li a:hover img {
        opacity: 0;
    }

    .ft_link ul li a:hover .ibut1 {
        opacity: 1;
    }
}

.ft_wrap .ft_bot {
    width: 1222px;
    max-width: 100%;
    padding: 0 0 2.6rem 16rem;
    display: flex;
}

.ft_bot .ft_btm {
    width: 63%;
}

.ft_bot .ft_btm ul {}

.ft_bot .ft_btm ul li {
    width: 13%;
    display: inline-block;
    position: relative;
}

.ft_bot .ft_btm ul li:not(:last-child) :after {
    content: '|';
    position: absolute;
    top: 0;
    right: 4px;
}

.ft_bot .ft_btm ul li a {
    transition: .5s all;
}

.ft_bot .ft_btm ul li a:hover {
    color: #eb6247;
}

.ft_btn .ft_icon {
    margin-top: 3rem;
}

.ft_btn .ft_icon ul {}

.ft_btn .ft_icon ul li {
    display: inline-block;
    margin-right: 2rem;
}

.ft_btn .ft_icon ul li img {
    display: inline-block;
}

.ft_btn .ft_icon ul li p {
    display: inline-block;
}


.ft_bottom {
    width: 100%;
    background: #768b86;
    padding: 3rem 0;
}

.ft_bottom .bot_inner {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.bot_inner .ft_icon {}

.ft_icon .icon {}

.ft_icon .icon a {
    display: inline-block;
    transition: .5s all;
}

.ft_icon .icon a:hover {
    transform: translateY(-5px);
}

/*share*/
.share {
    color: #fff;
    font-size: 12px;
    font-family: 'Ubuntu';
    display: inline-block;
}

/*copyright*/
.copyright {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    width: 80%;
}

.copyright a {
    display: inline-block;
    color: #fff;
    transition: .3s linear;
}

.copyright a h1 {
    font-size: 16px;
}

.copyright a:hover {
    color: #000;
}

@media screen and (max-width:1600px) {
    .ft_wrap .ft_top {
        padding: 12rem 5rem 6rem 3rem;
    }

    .ft_bottom {
        padding: 3rem 2rem;
    }
}

@media screen and (max-width:1536px) {
    .ft_wrap .ft_top {
        padding: 12rem 15rem 6rem 3rem;
    }

    .ft_wrap .ft_bot {
        padding: 0 7rem 2.6rem 3rem;
    }
}

@media screen and (max-width:1400px) {
    .ft_inner:after {
        min-height: 280px;
    }
}

@media screen and (max-width:1200px) {
    .ft_wrap .ft_top {
        padding: 6rem 15rem 6rem 3rem;
    }

    .ft_inner:after {
        min-height: 190px;
    }
}

@media screen and (max-width:1000px) {
    .ft_wrap {
        border-top-right-radius: 180px;
    }

    .ft_wrap .ft_top {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ft_top .ft_logo {
        width: 33%;
    }

    .ft_top .ft_info {
        width: 60%;
    }

    .ft_top .ft_btn {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .ft_wrap .ft_bot {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ft_bot .ft_btm {
        width: 95%;
        margin-bottom: 2rem;
    }

    .ft_bottom .bot_inner {
        justify-content: center;
        flex-wrap: wrap;
    }

    .copyright {
        margin-bottom: 2rem;
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width:834px) {
    .ft_inner:after {
        min-height: 140px;
    }
}

@media screen and (max-width:768px) {
    .ft_wrap .ft_top {
        padding: 6rem 2rem 6rem 2rem;
    }
}

@media screen and (max-width:650px) {
    .ft_top .ft_logo {
        width: 100%;
        margin-bottom: 3rem;
        text-align: center;
    }

    .ft_inner:after {
        min-height: 120px;
        pointer-events: none;
    }

    .ft_wrap .ft_bot {
        padding: 0 2rem 2.6rem 2rem;
    }

    .ft_bot .ft_btm {
        width: 100%;
    }

    .ft_bot .ft_btm ul li:not(:last-child) :after {
        right: -4px;
    }
}

@media screen and (max-width:576px) {
    .ft_inner:after {
        min-height: 90px;
    }
}

@media screen and (max-width:450px) {
    .ft_wrap {
        border-top-right-radius: 100px;
    }
        .ft_wrap .ft_top {
        padding: 6rem 2rem 3rem 2rem;
    }

    .ft_top .ft_info {
        width: 100%;
    }

    .ft_btn .ft_link {
        display: none;
    }
    .ft_btn .ft_icon {
    margin-top: 1rem;
}

    .ft_bot .ft_btm {
        text-align: center;
    }

    .ft_bot .ft_btm ul li {
        width: 23%;
    }

    .ft_bot .ft_btm ul li:nth-child(4) :after {
        display: none;
    }

    .ft_bot .ft_btm ul li:not(:last-child) :after {
        right: -5px;
    }

    .ft_bottom {
        padding: 3rem 2rem 12rem;
    }
}

@media screen and (max-width:414px) {
    .ft_inner:after {
        min-height: 70px;
    }

    .ft_btn .ft_link ul li {
        width: 23%;
    }
}

@media screen and (max-width:360px) {
    .ft_inner:after {
        min-height: 55px;
    }
        .ft_bot .ft_btm ul li {
        width: 24%;
    }
    .ft_bot .ft_btm ul li:nth-child(3) :after, .ft_bot .ft_btm ul li:nth-child(6) :after {
        display: none;
    }
    .ft_bot .ft_btm ul li:nth-child(4) :after {
        display: block;
    }
    .ft_btn .ft_link ul li {
        width: 35%;
        margin-bottom: 2rem;
    }

    .ft_wrap .ft_top {
        padding: 6rem 2rem 1rem 2rem;
    }
}

@media screen and (max-width:330px) {
    .ft_wrap .ft_top {
        padding: 6rem 1rem 1rem 1rem;
    }

    .ft_bot .ft_btm ul li {
        width: 31%;
    }

    .ft_wrap .ft_bot {
        padding: 0 1rem 2.6rem 1rem;
    }

    .ft_btn .ft_icon ul li {
        margin-right: 1rem;
    }
}

@media screen and (max-width:310px) {
    .ft_info .ft_list ul li span {
        font-size: 16px;
    }
}

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

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



/***********************/
/***about start***/

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

.abtban .abtban_title {
    width: 744px;
    max-width: 100%;
    min-height: 541px;
    position: relative;
    top: 24rem;
    left: 40.5rem;
    background: url(../../images/abttxt_bg.png) top left no-repeat;
    padding: 18.7rem 20rem 0 10.7rem;
    background-size: cover;
}

.abtban .abtban_title:after {
    content: '';
    background: url(../../images/abt_title.png) top left no-repeat;
    width: 317px;
    max-width: 100%;
    min-height: 245px;
    position: absolute;
    top: -3rem;
    left: -10rem;
    background-size: contain;
}

.abtban .abtban_title h3 {
    font-family: 'Ubuntu';
    color: #000;
    margin-bottom: 2rem;
    font-size: 16px;
}

.abtban .abtban_title p {
    font-size: 18px;
    color: #12100b;
    line-height: 1.5;
}

.abtban .abtban_house {
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (max-width:1700px) {
    .abtban .abtban_title {
        left: 19.5rem;
    }
}

@media screen and (max-width:1500px) {
    .abtban .abtban_title {
        left: 10rem;
    }
}

@media screen and (max-width:1400px) {
    .abtban .abtban_house {
        width: 70%;
    }
}

@media screen and (max-width:1200px) {
    .abtban {
        min-height: 977px;
    }
}

@media screen and (max-width:1000px) {
    .abtban .abtban_title {
        left: 17rem;
        top: 8rem;
    }
}

@media screen and (max-width:834px) {
    .abtban {
        min-height: 840px;
    }

    .abtban .abtban_title {
        left: 0;
        top: 8rem;
        min-height: 539px;
        padding: 17.7rem 9rem 0 16.7rem;
        max-width: 90%;
        right: 0;
        margin: auto;
    }

    .abtban .abtban_title:after {
        min-height: 200px;
        top: -3rem;
        left: 0rem;
    }
}

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

    .abtban .abtban_title {
        min-height: 503px;
        padding: 15.7rem 9rem 0 10.7rem;
    }
}

@media screen and (max-width:650px) {
    .abtban {
        min-height: 710px;
    }

    .abtban .abtban_title {
        min-height: 423px;
        padding: 11.7rem 5rem 0 8.7rem;
    }

    .abtban .abtban_title:after {
        min-height: 140px;
        top: -2rem;
        left: 1rem;
    }
}

@media screen and (max-width:576px) {
    .abtban {
        min-height: 680px;
        padding-top: 3rem;
    }

    .abtban .abtban_title {
        background: url(../../images/abttxt_bg2.jpg) top left repeat;
        border-radius: 20px;
        min-height: 373px;
        padding: 6.7rem 4rem 0 6.7rem;
    }

    .abtban .abtban_title:after {
        min-height: 140px;
        top: -7rem;
        left: 0rem;
    }
}

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

    .abtban .abtban_title {
        padding: 6.7rem 2rem 0 2rem;
    }

    .abtban .abtban_title:after {
        top: -8rem;
    }
}

@media screen and (max-width:414px) {
    .abtban {
        min-height: 500px;
    }

    .abtban .abtban_title {
        min-height: 240px;
        padding: 6rem 1rem 0 1rem;
        max-width: 95%;
    }

    .abtban .abtban_title:after {
        min-height: 100px;
        top: -6rem;
    }

    .abtban .abtban_title p {
        font-size: 14px;
    }

    .abtban .abtban_title p .mob-none {
        display: none;
    }
}

@media screen and (max-width:393px) {
    .abtban {
        min-height: 490px;
    }
}

@media screen and (max-width:330px) {
    .abtban {
        min-height: 470px;
    }
}

/*abtbg*/
.abtbg {
    position: relative;
    padding: 11rem 0 4.6rem;

}

.abtbg:after {
    content: '';
    background: url(../../images/abt_deco.png) top left no-repeat;
    background-size: contain;
    width: 1101px;
    max-width: 100%;
    min-height: 1278px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


/*about1*/
.about1 {
    width: 1372px;
    max-width: 100%;
    padding-right: 14.8rem;
    margin: 0 0 4.5rem auto;
}

.about1 .abt11 {
    width: 1063px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-left: 3rem;
    margin: 0 0 9.9rem auto;

}

.abt11 .abt11_deco {}

.abt11 .abt11_deco img {}

.abt11 .abt11_txt {
    width: 62%;
    padding: 0 0 0 5.5rem;
}

.abt11 .abt11_txt p {
    font-size: 18px;
    color: #12100b;
    line-height: 1.5;
}

.abt11 .abt11_txt p:first-child {
    margin-bottom: 3rem;
}

.about1 .abt12 {
    width: 1205px;
    max-width: 100%;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width:1536px) {
    .abtbg:after {
        min-height: 848px;
    }
}

@media screen and (max-width:1400px) {
    .abtbg:after {
        min-height: 700px;
    }
}

@media screen and (max-width:1366px) {
    .about1 {
        padding: 0 2rem;
        margin: 0 auto 4.5rem;
    }

    .about1 .abt11 {
        padding-left: 0;
    }

    .about1 .abt12 {
        margin: 0 auto;
    }
}

@media screen and (max-width:1200px) {
    .abtbg:after {
        min-height: 540px;
    }

    .abt11 .abt11_deco {
        width: 30%;
    }

    .about1 .abt12 img {
        width: 49%;
    }
}

@media screen and (max-width:1100px) {
    .abtbg:after {
        min-height: 440px;
    }
}

@media screen and (max-width:834px) {
    .abtbg {
        padding: 5rem 0;
    }

    .abtbg:after {
        min-height: 400px;
    }
}

@media screen and (max-width:768px) {
    .abtbg:after {
        min-height: 300px;
    }

    .about1 .abt11 {
        align-items: center;
    }

    .abt11 .abt11_txt {
        width: 66%;
        padding: 0 0 0 3rem;
    }
}

@media screen and (max-width:650px) {
    .abtbg:after {
        min-height: 250px;
    }

    .about1 .abt11 {
        margin: 0 0 5rem auto;
    }

    .abt11 .abt11_txt {
        width: 66%;
        padding: 0;
    }

    .abt11 .abt11_txt p .mob-none {
        display: none;
    }
}

@media screen and (max-width:450px) {
    .about1 {
        margin: 0 auto 2rem;
    }

    .about1 .abt11 {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0 0 2rem auto;
    }

    .abt11 .abt11_deco {
        width: 40%;
        margin: 0 0 2rem auto;
    }

    .abt11 .abt11_txt {
        width: 100%;
    }
}

@media screen and (max-width:360px) {
    .abtbg:after {
        min-height: 200px;
    }

    .about1 {
        padding: 0 1rem;
    }
}

@media screen and (max-width:330px) {
    .abtbg:after {
        min-height: 170px;
    }
}

/*about2*/
.about2 {
    width: 1760px;
    max-width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.about2 .abt21 {}

.about2 .abt21 img {}

.about2 .abt22 {
    width: 45%;
    padding: 10.4rem 0 0 3.5rem;
    display: flex;
    justify-content: space-between;
}

.abt22 .abt22_lt {}

.abt22 .abt22_lt img {}

.abt22 .abt22_lt p {
    font-size: 18px;
    color: #cea18e;
    padding: 2.2rem 0 0 .2rem;
}

.abt22 .abt22_rt {
    padding-top: 10rem;
}


@media screen and (max-width:1400px) {
    .about2 .abt21 {
        width: 54%;
    }
}

@media screen and (max-width:1366px) {
    .about2 .abt22 {
        padding: 10.4rem 0 0 2rem;
    }

    .abt22 .abt22_rt {
        padding: 10rem 0 0 2rem;
    }
}

@media screen and (max-width:1200px) {
    .about2 .abt21 {
        width: 50%;
    }

    .about2 .abt22 {
        padding: 2rem 0 0 2rem;
        width: 50%;
    }

    .abt22 .abt22_lt {
        width: 50%;
    }
}

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

    .about2 .abt21 {
        width: 100%;
        text-align: center;
        padding: 0 2rem;
    }

    .about2 .abt22 {
        padding: 0 2rem;
        width: 65%;
        margin-bottom: 2rem;
        order: -1;
    }
}

@media screen and (max-width:834px) {
    .about2 .abt22 {
        width: 80%;
    }
}

@media screen and (max-width:650px) {
    .about2 .abt22 {
        width: 100%;
    }
}

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

    .abt22 .abt22_lt {
        width: 80%;
        text-align: center;
    }

    .abt22 .abt22_rt {
        padding: 2rem 2rem;
    }

    .about1 .abt12 {
        justify-content: center;
        flex-wrap: wrap;
    }

    .about1 .abt12 img {
        width: 100%;
    }

    .about1 .abt12 img:first-child {
        margin-bottom: 2rem;
    }
}

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

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

/***********************/
/***environment start***/

.envbg {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.envbg:before {
    background: url(../../images/env_bg.jpg) top center;
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
}

.environment1 {
    width: 100%;
    min-height: 477px;
    position: relative;
}

.environment1 .env1 {
    position: relative;
    top: 29.8rem;
    right: 23rem;
    text-align: right;
}


@media screen and (max-width:1400px) {
    .environment1 .env1 {
        top: 26rem;
        right: 8rem;
    }
}

@media screen and (max-width:1300px) {
    .environment1 {
        min-height: 447px;
    }
}

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

@media screen and (max-width:768px) {
    .envbg:before {
        background-position-x: -74rem;

    }

    .environment1 {
        min-height: 290px;
    }
}

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

    .environment1 .env1 {
        top: 19rem;
        right: 2rem;
        width: 60%;
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width:450px) {
    .envbg:before {
        background-position-x: -105rem;
    }

    .environment1 {
        min-height: 310px;
    }
}

@media screen and (max-width:414px) {
    .envbg:before {
        background-position-x: -70rem;
    }

    .environment1 {
        min-height: 220px;
    }
}

@media screen and (max-width:393px) {
    .envbg:before {
        background-position-x: -61rem;
    }
}

@media screen and (max-width:390px) {
    .envbg:before {
        background-position-x: -63rem;
    }

}

@media screen and (max-width:360px) {
    .envbg:before {
        background-position-x: -73rem;
    }
}

@media screen and (max-width:330px) {
    .environment1 {
        min-height: 160px;
    }
}

/*environment2*/
.environment2 {
    width: 100%;
    position: relative;

}

.environment2:before {
    content: '';
    background: url(../../images/env2_bg.png) top left no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 866px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

}

.environment2 .env2 {
    width: 1761px;
    max-width: 100%;
    margin: 0 0 0 auto;
    display: flex;
}

.env2 .env21 {
    width: 45%;
}

.env21 .env_title {
    padding-left: 4.7rem;
    margin-bottom: 3.7rem;
}

.env21 .env21_txt {
    padding-left: 15.6rem;
    margin-bottom: 6rem;
}

.env21 .env21_txt img {
    margin-bottom: 3rem;
}

.env21 .env21_txt p {
    font-size: 18px;
    color: #12100b;
}

.env2 .env22 {
    padding-top: 24rem;
}

.env2 .env22 img {}


@media screen and (max-width:1800px) {
    .environment2:before {
        min-height: 766px;
    }

    .env2 .env22 {
        padding-top: 14rem;
    }
}

@media screen and (max-width:1600px) {
    .environment2:before {
        min-height: 735px;
    }

    .env21 .env21_txt {
        padding-left: 4rem;
    }

}

@media screen and (max-width:1536px) {
    .environment2:before {
        min-height: 717px;
    }
}

@media screen and (max-width:1400px) {
    .environment2:before {
        min-height: 687px;
    }

    .env21 .env21_txt {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width:1300px) {
    .env21 .env21_txt {
        padding-left: 2rem;
    }
}

@media screen and (max-width:1200px) {
    .environment2:before {
        min-height: 1990px;
        background-position-x: -69rem;
    }

    .environment2 .env2 {
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 21rem;
    }

    .env2 .env21 {
        width: 65%;
    }

    .env2 .env22 {
        padding-top: 3rem;
    }
}

@media screen and (max-width:991px) {
    .env2 .env21 {
        width: 80%;
    }
}

@media screen and (max-width:768px) {
    .environment2:before {
        min-height: 1800px;
        background-position-x: -82rem;
    }

    .env2 .env21 {
        width: 100%;
        padding: 0 2rem;
    }

    .env2 .env22 {
        padding: 3rem 2rem;
    }
}

@media screen and (max-width:650px) {
    .environment2:before {
        min-height: 1650px;
    }
}

@media screen and (max-width:576px) {
    .environment2:before {
        min-height: 1470px;
    }

    .env21 .env_title {
        padding-left: 0;
        margin-bottom: 1.7rem;
        width: 45%;
    }

    .env21 .env21_txt {
        padding-left: 0;
    }
}

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

@media screen and (max-width:414px) {
    .environment2:before {
        min-height: 1240px;
		background-position-x: -76rem;
        z-index: 0;
    }

    .env21 .env21_txt p .mob-none {
        display: none;
    }

    .env21 .env21_txt p {
        text-align: justify;
    }
}

@media screen and (max-width:393px) {
    .environment2:before {
        min-height: 1200px;
		background-position-x: -82rem;
    }
}

@media screen and (max-width:390px) {
    .environment2:before {
        min-height: 1220px;
    }
}

@media screen and (max-width:360px) {
    .environment2:before {
        min-height: 1190px;
    }

    .env2 .env21 {
        padding: 0 1rem;
    }

    .env2 .env22 {
        padding: 2rem 1rem;
    }
}

@media screen and (max-width:330px) {
    .environment2:before {
        min-height: 1130px;
    }
}

@media screen and (max-width:310px) {
    .environment2:before {
        min-height: 1090px;
    }
}

@media screen and (max-width:300px) {
    .environment2:before {
        min-height: 1105px;
    }
}


/*environment3*/

.environment3 {
    width: 100%;
    min-height: 580px;
    position: relative;
    margin-top: -29.5rem;
}

.environment3 .env3 {
    position: relative;
    top: 17.5rem;
    right: 22rem;
    text-align: right;
}


@media screen and (max-width:1400px) {
    .environment3 {
        min-height: 460px;
    }
}

@media screen and (max-width:1200px) {
    .environment3 {
        margin-top: 0;
    }
}

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

@media screen and (max-width:576px) {
    .environment3 .env3 {
        top: 14rem;
        right: 2rem;
        width: 50%;
        margin: 0 0 0 auto;
    }
}

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

    .environment3 .env3 {
        top: 6rem;
    }
}

@media screen and (max-width:360px) {
    .environment3 {
        min-height: 200px;
    }
}



/*environment4*/
.environment4 {
    width: 100%;
    background: #fff;
    padding: 4rem 0 6rem;
}

.environment4 .env4 {
    width: 1760px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.env4 .env41 {
    width: 69%;
    position: relative;
}

.env4 .env41 img:last-child {
    position: absolute;
    bottom: -11rem;
    right: 2.1rem;
}

.env4 .env42 {
    width: 30%;
}

.env42 .env42_title {
    padding: 0 2rem 3rem 4.2rem;
}

.env42 .env42_txt {
    padding: 0 2rem 4rem 4.2rem;
}

.env42 .env42_txt p {
    font-size: 18px;
    color: #12100b;
    line-height: 1.5;
}

.env42 .env42_img {}

.env42 .env42_img img {}

@media screen and (max-width:1600px) {
    .env4 .env41 {
        width: 66%;
    }

    .env4 .env42 {
        width: 33%;
    }
}

@media screen and (max-width:1536px) {
    .env42 .env42_txt {
        padding: 0 1rem 4rem 1rem;
    }
}

@media screen and (max-width:1400px) {
    .env4 .env41 {
        width: 62%;
    }

    .env4 .env41 img:last-child {
        bottom: -14rem;
        right: -1rem;
    }

    .env4 .env42 {
        width: 36%;
    }
}

@media screen and (max-width:1200px) {
    .environment4 {
        padding: 4rem 0 18rem;
    }

    .environment4 .env4 {
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .env4 .env41 {
        width: 100%;
        padding: 0 2rem;
        text-align: center;
    }

    .env4 .env41 img:last-child {
        bottom: -14rem;
        right: 0rem;
    }

    .env4 .env42 {
        width: 45%;
        order: -1;
        margin-bottom: 3rem;
    }
}

@media screen and (max-width:991px) {
    .env4 .env42 {
        width: 65%;
    }
}

@media screen and (max-width:768px) {
    .env4 .env42 {
        width: 70%;
    }
}

@media screen and (max-width:576px) {
    .env4 .env41 img:last-child {
        bottom: -11rem;
    }

    .env4 .env42 {
        width: 100%;
        padding: 0 2rem;
    }
}

@media screen and (max-width:450px) {
    .environment4 {
        padding: 4rem 0 10rem;
    }

    .env4 .env41 img:last-child {
        bottom: -7rem;
        right: 1rem;
    }

    .env42 .env42_title {
        padding: 0 1rem 3rem 1rem;
    }
}

@media screen and (max-width:414px) {
    .env4 .env42 {
        margin-bottom: 2rem;
    }

    .env42 .env42_txt p .mob-none {
        display: none;
    }
}

@media screen and (max-width:393px) {
    .env42 .env42_txt {
        padding: 0 1rem 2rem 1rem;
    }
}

@media screen and (max-width:390px) {
    .env42 .env42_title {
        padding: 0 0rem 3rem 0rem;
    }

    .env42 .env42_txt {
        padding: 0 0rem 2rem 0rem;
    }
}

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

    .env4 .env41 img:last-child {
        right: 0rem;
    }

    .env4 .env42 {
        padding: 0 1rem;
    }

}


/***environment end****/
/***********************/
/***********************/
/***roomguide start***/

.rgbg {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.rgbg:before {
    background: url(../../images/rg_bg.jpg) top center;
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
}


.roomguide {}

.roomguide .rmge {
    width: 1760px;
    max-width: 100%;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
}

.rmge .rmge1 {
    width: 23%;
    padding-top: 38.9rem;
}

.rmge1 .rmge_title {
    text-align: right;
}

.rmge1 .rmge_title img {
    margin-bottom: 2.2rem;
}

.rmge1 .rmge_title p {
    font-size: 18px;
    color: #000;
}

.rmge .rmge2 {
    width: 70%;
    background: rgba(255, 255, 255, .75);
    padding: 11rem 0 0 6.7rem;
}

.rmge2 .rmge_deco {
    margin-bottom: 1.8rem;
}

.rmge2 .rmge_rgbt {}

.rmge2 .rmge_rgbt ul {}

.rmge2 .rmge_rgbt ul li {
    margin-bottom: 5rem;
}

.rmge2 .rmge_rgbt ul li a {
    transition: .5s all;
}

.rmge2 .rmge_rgbt ul li a:hover {
    transform: translate(10px, 10px);
    opacity: .75;
}

.rmge2 .rmge_rgbt ul li a img {}

@media screen and (max-width:1536px) {
    .rmge .rmge1 {
        padding: 38.9rem 0 0 2rem;
    }
}

@media screen and (max-width:991px) {
    .rmge .rmge1 {
        padding: 28rem 0 0 2rem;
        width: 25%;
    }
}

@media screen and (max-width:834px) {
    .rmge .rmge1 {
        width: 28%;
    }
}

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

    .rmge .rmge1 {
        padding: 9rem 0 3rem 0;
        width: 50%;
    }

    .rmge .rmge2 {
        width: 100%;
        padding: 6rem 2rem 0;
    }
}

@media screen and (max-width:450px) {
    .rmge .rmge1 {
        width: 80%;
    }

    .rmge1 .rmge_title {
        text-align: center;
    }

    .rmge1 .rmge_title img {
        width: 70%;
    }

    .rmge .rmge2 {
        padding: 3rem 2rem 0;
    }

    .rmge2 .rmge_deco {
        width: 50%;
    }
}

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

@media screen and (max-width:393px) {
    .rmge .rmge1 {
        padding: 7rem 0 3rem 0;
    }
}

/***roomguide end****/
/***********************/
/***********************/
/***inbanner start***/

.inbanner {
    width: 1760px;
    max-width: 100%;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.inbanner .inbr1 {
    width: 23%;
    padding-top: 27rem;
    position: relative;
    margin-right: -19rem;
    z-index: 1;
}

.inbanner .inbr2 {
    width: 87%;
    position: relative;
}
.inbanner .inbr2:before{
    content: '';
    background: url(../../images/inban_deco01.png) top left no-repeat;
    background-size: contain;
    width: 180px;
    max-width: 100%;
    min-height: 259px;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width:1600px) {
    .inbanner .inbr1 {
        padding-top: 25.3rem;
        width: 20%;
    }
}

@media screen and (max-width:1400px) {
    .inbanner .inbr1 {
        padding-top: 22rem;
    }
    .inbanner .inbr2:before {
    min-height: 190px;
    left: 4rem;
}
}

@media screen and (max-width:1200px) {
    .inbanner .inbr1 {
        padding-top: 18rem;
    }
    .inbanner .inbr2:before {
        min-height: 140px;
        left: 6rem;
    }
}

@media screen and (max-width:1100px) {
    .inbanner .inbr1 {
        padding-top: 17rem;
    }
}

@media screen and (max-width:991px) {
    .inbanner .inbr1 {
        padding-top: 16rem;
    }
}

@media screen and (max-width:834px) {
    .inbanner .inbr1 {
        padding-top: 13rem;
    }
    .inbanner .inbr2:before{
        display: none;
    }
}

@media screen and (max-width:768px) {
    .inbanner .inbr1 {
        padding-top: 12rem;
    }
}

@media screen and (max-width:650px) {
    .inbanner .inbr1 {
        padding-top: 10rem;
    }
}

@media screen and (max-width:576px) {
    .inbanner .inbr1 {
        padding-top: 9rem;
    }
}

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

    .inbanner .inbr1 {
        padding-top: 0;
        left: 9rem;
        position: absolute;
        width: 30%;
        bottom: -1rem;
        margin: 0;
    }

    .inbanner .inbr2 {
        width: 100%;
    }
}

@media screen and (max-width:393px) {
    .inbanner .inbr1 {
        left: 8rem;
    }
}

@media screen and (max-width:310px) {
    .inbanner .inbr1 {
        left: 6rem;
    }
}

/***inbanner end****/
/***********************/
/***********************/
/***note start***/

.notice {
    position: relative;
    padding: 11.3rem 0 15rem;
}

/*note*/
.note {
    position: relative;
    z-index: 3;
    padding-bottom: 1em;
    width: 1145px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.note ul {}

.note li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    width: 28%;
}

.note li a {
    z-index: 30;
    display: block;
}

.note li img {
    pointer-events: none;
}

img.nt {
    max-width: 100%;
    transition: .3s linear;
}

img.nt1 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    opacity: 0;
    transition: .3s linear;
}

.note li.active img.nt {
    opacity: 0;
}

.note li.active img.nt1 {
    opacity: 1;
}

/*hover*/
.note li a:hover img.nt {
    opacity: 0;
}

.note li a:hover img.nt1 {
    opacity: 1;
}

/*tab-content*/
.tab-content {
    border-radius: 10px;
    padding: 3em 2em;
    min-height: 500px;
    width: 1145px;
    max-width: 100%;
    margin: 0 auto;
}

/*note_info*/
.note_info {
    width: 900px;
    margin: 0 auto;
    max-width: 100%;
}

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

    .tab-content {
        min-height: 600px;
        padding: 2em;
    }
}

@media screen and (max-width:768px) {
    .notice {
        padding: 7.3rem 0 7rem;
    }
}

@media screen and (max-width:600px) {
    .notice {
        padding: 4rem 0 7rem;
    }

    .note {
        padding-bottom: 1em;
    }

    .note li {
        width: 30%;
        margin: 0;
    }

    .note li img {
        padding: 2%;
    }

    .note {
        padding-bottom: 0em;
    }

    .tab-content {
        padding: 1em;
    }
}

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

    .note,
    .tab-content {
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem;
    }
}

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

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

/***note end****/
/***********************/
/***********************/
/***scenic start***/

.scenic {
    width: 1165px;
    max-width: 100%;
    margin: 0 auto;
    padding: 11.2rem 0 25rem;
    position: relative;
    z-index: 3;
}

.scebtn {
    text-align: center;
    margin-bottom: 30px;
}

.scebtn h2 {
    display: inline-block;
    margin: 5px;
    color: #fff;
    padding: 25px 5px;
    font-size: 16px;
    border-radius: 100%;
    min-width: 82px;
    border: 3px solid #fff;
    cursor: pointer;
    line-height: 24px;
}

.scebtn h2.scebtn1 {
    background: #d85a51;
}

.scebtn h2.scebtn2 {
    background: #80a076;
}

.scebtn h2.scebtn3 {
    background: #89b5cb;
}

.scebtn h2.scebtn4 {
    background: #8dcfca;
}

.scebtn h2.scebtn5 {
    background: #b7ad6f;
}

.scebtn h2.scebtn6 {
    background: #8b8583;
}

.scebtn h2:hover.scebtn1,
.scebtn h2:hover.scebtn2,
.scebtn h2:hover.scebtn3,
.scebtn h2:hover.scebtn4,
.scebtn h2:hover.scebtn5,
.scebtn h2:hover.scebtn6 {
    background: #fff;
    border: #7e6b5a 3px solid;
    color: #656565;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

@media (max-width:1440px) {
    #services_sce {
        padding: 3em 1em 4em;
    }
}

@media (max-width:480px) {
    .scenic {
    padding: 3rem 0 10rem;
}
    .scebtn {
        padding: 0 0;
    }

    .scebtn h2 {
        margin: 5px;
    }
}

@media (max-width:400px) {
    .scebtn {
        margin-bottom: 10px;
    }
}

/***********/

.scebox {
    border: #c3c3c3 1px solid;
    border-radius: 5px;
    box-shadow: -1px 1px 6px 0.5px rgba(138, 138, 138, 0.75);
    padding: 0 10px 10px 10px;
}

.mount .sceimg {
    background-color: #80a076;
}

.sea .sceimg {
    background-color: #89b5cb;
}

.farm .sceimg {
    background-color: #8dcfca;
}

.city .sceimg {
    background-color: #b7ad6f;
}

.hot .sceimg {
    background-color: #d85a51;
}

.scebox:hover {
    cursor: pointer;
}

.scebox:hover .sceimg img {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    transform: scale(0.95);
    overflow: hidden;
}

.scebox_hot {
    padding: 0 80px;
}

.scebox_hot .scebox {
    display: inline-block;
    float: left;
    width: 23%;
    margin: 0 10px;
}

.scetag {
    float: right;
    color: #fff;
    padding: 4px 20px;
    margin-left: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.scetag1 {
    background: #d85a51;
}

.scetag2 {
    background: #80a076;
}

.scetag3 {
    background: #89b5cb;
}

.scetag4 {
    background: #8dcfca;
}

.scetag5 {
    background: #b7ad6f;
}

.scet h3 {
    clear: both;
    color: #3d3d3d;
    font-size: 23px;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

.sceimg img {
    margin: 0 auto;
    display: block !important;
}

.scep p {
    color: #616161;
    text-align: left;
    margin: 10px 0 0 0;
    line-height: 25px;
}

.scemore {
    text-align: right;
}

.scemore img {
    display: inline-block !important;
}

@media(max-width:1700px) {
    .scebox_hot {
        padding: 0 10px;
    }
}

@media(max-width:1400px) {
    .scebox_hot .scebox {
        width: 24%;
        margin: 0 5px;
    }
}

@media(max-width:1199px) {
    .scebox_hot .scebox {
        width: 48%;
        margin: 5px;
    }

    .scebox_hot .scebox:nth-child(3) {
        clear: both;
    }
}

@media(max-width:700px) {
    .scebox_hot .scebox {
        width: 100%;
        margin: 5px 0px;
    }

    .scet h3 {
        font-size: 22px;
    }

    .scep p {
        line-height: 24px;
    }
}

@media(max-width:550px) {

    .city .sceimg,
    .farm .sceimg,
    .hot .sceimg,
    .mount .sceimg,
    .sea .sceimg {
        background-color: #fff;
    }
}

@media(max-width:500px) {
    .scet h3 {
        letter-spacing: 0px;
    }
}

@media(max-width:450px) {
    .mount .sceimg {
        background-color: #80a076;
    }

    .sea .sceimg {
        background-color: #89b5cb;
    }

    .farm .sceimg {
        background-color: #8dcfca;

    }

    .city .sceimg {
        background-color: #b7ad6f;
    }

    .hot .sceimg {
        background-color: #d85a51;
    }
}

@media(max-width:350px) {
    .scet h3 {
        font-size: 20px;
    }
}


/*************/

.scebox_content {
    padding: 0 0px;
    margin-top: 30px;
}

.scebox_content .scebox {
    display: inline-block;
    float: left;
    width: 100%;
    margin: 5px;
}

@media (max-width: 1800px) {
    .scebox_content {
        padding: 0px;
    }
}

@media screen and (max-width:1700px) {
    .scebox_content {
        padding: 0 0px;
        margin-top: 30px;
    }
}

/*isce*/


.isce {
    padding-top: 0;
    padding-bottom: 60px;
}

.isce ul {
    margin: 0;
    padding: 0;
}

.isce ul li {
    display: inline-block;
    float: left;
    width: 25%;
    padding: 0 1em;
}

.isce ul li img {
    margin: 0 auto;
}

.isce h2 {
    font-size: 16px;
    padding: 2rem 0;
    text-align: center;
}

.isce ul li p {
    font-size: 15px;
}

@media(max-width:1700px) {
    .iscebg {
        padding: 0 100px;
    }
}

@media(max-width:1550px) {
    .iscebg {
        padding: 0 20px;
    }

    .isce ul li {
        padding: 0 15px;
    }
}

@media(max-width:1200px) {
    .isce ul li {
        width: 50%;
    }
}

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

@media(max-width:991px) {


    .isce ul li {
        display: inline-block;
        float: left;
        width: 50%;
    }

    .isce ul li:nth-child(3) {
        clear: both;
    }



    .isce {
        padding-top: 30px;
        padding-bottom: 30px;
    }

}

@media(max-width:900px) {
    .isce ul li {
        float: none;
        width: 22%;
        vertical-align: top;
    }

}

@media(max-width:700px) {
    .iscebg {
        padding: 0 15px;
    }


    .isce ul li {
        width: 23%;
    }
}

@media(max-width:600px) {
    .isce ul li {
        width: 45%;
    }
}

@media(max-width:450px) {

    .isce ul li {
        width: 48%;
    }
}

@media(max-width:380px) {
    .isce ul li {
        padding: 0 .5em;
    }

    .isce ul li p {
        font-size: 14px;
    }
}

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


.isce li:hover {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    transform: translateY(-10px);
}

.isce ul li:hover img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    opacity: 0.7;
}

/*********************** 20170328  以上 優質a****************/

.scecontainer {
    display: block;
    margin: 0 auto;
    width: 1500px;
    max-width: 100%;
    font-family: 'Noto Sans TC', sans-serif;
}

.scecontainer .item {
    margin: 0.5%;
    float: left;
    background: #ffffff;
    display: block;
    width: 24%;
    height: auto !important;
}

@media screen and (max-width: 1800px) {
    .scecontainer {
        width: 96%;
    }

    .scecontainer .item {
        width: 19%;
    }
}

@media screen and (max-width: 1400px) {
    .scecontainer .item {
        width: 24%;
    }
}

@media screen and (max-width: 991px) {
    .scecontainer .item {
        width: 32%;
    }
}

@media screen and (max-width:767px) {
    .scecontainer .item {
        width: 49%;
    }
}

@media screen and (max-width:550px) {
    .scecontainer .item {
        width: 99%;
        margin-bottom: 10px;
    }
}


/***scenic end****/
/***********************/
/***********************/
/***location start***/

.location {
    position: relative;
    padding: 9rem 0;
}

.location .loc {
    width: 1330px;
    max-width: 100%;
    margin: 0 auto;
}

.loc .loc_txt {}

.loc .loc_txt ul {}

.loc .loc_txt ul li {
    margin-bottom: 8rem;
}

.loc .loc_txt ul li img {
    margin-bottom: 4rem;
}

.loc .loc_txt ul li p {
    font-size: 18px;
    color: #000;
    padding-left: 3rem;
}

.loc .loc_map {}

.loc .loc_googlemap {
    width: 1145px;
    margin: 3rem auto 0;
    max-width: 100%;
    min-height: 745px;
    position: relative;
    border: 7px solid #8d9e9a;

}

.loc .loc_googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

@media screen and (max-width:1300px) {
    .loc .loc_txt {
        padding: 0 2rem;
    }

    .loc .loc_map {
        padding: 0 2rem;
    }
}
@media screen and (max-width:1000px){
    .loc .loc_googlemap {
    max-width: 95%;
}
}
@media screen and (max-width:768px){
    .loc .loc_googlemap {
        min-height: 600px;
    }
}
@media screen and (max-width:450px){
    .loc .loc_googlemap {
        min-height: 350px;
    }
}
@media screen and (max-width:414px) {
    .location {
        padding: 6rem 0;
    }

    .loc .loc_txt ul li {
        margin-bottom: 5rem;
    }

    .loc .loc_txt ul li img {
        width: 90%;
    }

    .loc .loc_txt ul li p {
        padding-left: 1rem;
    }
}

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

    .loc .loc_map {
        padding: 0 1rem;
    }
}

/***location end****/
/***********************/
/***********************/
/***room start***/

.room {
    width: 1600px;
    max-width: 100%;
    margin: 5rem auto;
    padding: 4rem;
    background: url(../../images/rm_bg.jpg) top left repeat;
    -webkit-filter: drop-shadow(2px 2px 7px rgba(26, 23, 23, 0.15));
    filter: drop-shadow(2px 2px 7px rgba(26, 23, 23, 0.15));

}


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

.room1 .rm_title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rm_title {}

.rm_title img {
    margin-right: 2.3rem;
}

.rm_title .rm_txt {
    color: #030303;
    padding-top: 2.5rem;
}

.rm_title .rm_txt h2 {
    font-size: 40px;
}

.rm_title .rm_txt h2 span {
    font-size: 48px;
    font-family: 'Ubuntu';
    font-weight: 300;
}

.rm_title .rm_txt .rm_line {
    background: #030303;
    width: 77%;
    height: 1px;
    margin: 1rem 0 2rem;
}

.rm_title .rm_txt h3 {
    font-size: 26px;
    margin-bottom: 2rem;
}

.rm_title .rm_txt h3 span {
    font-size: 18px;
    font-family: 'Ubuntu';
    font-weight: 300;

}

.rm_title .rm_txt img {}

.room1 .rm_bt {
    width: 17%;


}

.rm_bt .rmbt {
    margin-bottom: 1.6rem;
}

.rm_bt .rmbt ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rm_bt .rmbt ul li {
    width: 25%;
    text-align: right;
    margin-bottom: 1.4rem;
}

.rm_bt .rmbt ul li a {
    cursor: default;
}

.rm_bt .rmbt ul li a img {}

.rm_bt a .rmother {
    background: #000000;
    border-radius: 20px;
    text-align: center;
    transition: .5s all;
    padding: .2rem;
}

.rm_bt a .rmother p {
    font-size: 22px;
    color: #fff;
    transition: .5s all;
}

.rm_bt a .rmother p span {
    font-size: 14px;
    font-family: 'Ubuntu';
    vertical-align: text-bottom;
    text-transform: uppercase;
}

.rm_bt a:hover .rmother {
    background: #ffb702;
}

.rm_bt a:hover .rmother p {
    color: #000;
}

.room .room3 {
    width: 1330px;
    max-width: 100%;
    margin: 7rem auto 0;
}

/***rmbtm***/
.rmbtm {
    width: 1270px;
    max-width: 100%;
    position: relative;
    z-index: 3;
}

/*roombs*/
.roombs {
    display: inline-block;
    vertical-align: top;
    padding: 0 2em 0 0;
}

.roomb {
    width: 100%;
    padding: 0 0 2em 0;
}

.roomb h5 {
    margin-bottom: 3rem;
}

.roomb td {
    vertical-align: middle;
    border: 0;
    padding: .5em .2em;
    border: 1px solid #000;
}

.roomb table {
    text-align: center;
}

.roomb table tr {
    border-bottom: solid 1px #000;
}

/*rinfo*/
.rinfo {
    text-align: left;
    padding: 3% 0%;
}

.rinfo li span {
    display: inline-block;
    vertical-align: top;
}

.rinfo li span:nth-of-type(1) {}

.rinfo li span:nth-of-type(2) {
    width: 90%;
}

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

@media screen and (max-width:1536px) {
    .room1 .rm_bt {
        width: 20%;
    }
}

@media screen and (max-width:1200px) {
    .room1 .rm_bt {
        width: 27%;
    }
}

@media screen and (max-width:1000px) {
    .room1 .rm_bt {
        width: 30%;
    }
}

@media screen and (max-width:834px) {
    .room {
        padding: 2rem;
    }

    .room .room1 {
        flex-wrap: wrap;
        margin-bottom: 4rem;
    }

    .room1 .rm_title {
        margin-bottom: 3rem;
    }

    .room1 .rm_bt {
        width: 36%;
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width:650px) {
    .room1 .rm_bt {
        width: 47%;
    }

}

@media screen and (max-width:450px) {
    .rm_title img {
        margin-right: 1rem;
        width: 40%;
    }

    .rm_title .rm_txt img {
        width: 90%;
    }

    .rm_title .rm_txt h2 {
        font-size: 30px;
    }

    .rm_title .rm_txt h2 span {
        font-size: 32px;
    }

    .rm_title .rm_txt h3 {
        font-size: 20px;
        margin-bottom: 0rem;
    }

    .rm_title .rm_txt h3 span {
        font-size: 12px;
        letter-spacing: 0;
    }

    .room1 .rm_bt {
        width: 65%;
    }

    .rm_bt .rmbt ul li {
        margin-bottom: .5rem;
    }

    .rm_bt .rmbt {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width:414px) {
    .rm_title .rm_txt .rm_line {
        width: 100%;
    }

    .room1 .rm_bt {
        width: 76%;
    }

    .rm_bt a .rmother p {
        font-size: 20px;
    }
}

@media screen and (max-width:393px) {
    .rm_title .rm_txt {
        padding-top: 1rem;
    }

    .rm_title .rm_txt .rm_line {
        margin: 1rem 0;
    }

    .room1 .rm_bt {
        width: 80%;
    }
}

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

    .rm_title .rm_txt h2 {
        font-size: 25px;
    }

    .rm_title .rm_txt h2 span {
        font-size: 25px;
    }

    .rm_title .rm_txt h3 {
        font-size: 17px;
    }

    .room1 .rm_bt {
        width: 85%;
    }
}

@media screen and (max-width:320px) {
    .room1 .rm_bt {
        width: 90%;
    }
}

@media screen and (max-width:300px) {
    .rm_title .rm_txt h3 {
        font-size: 15px;
    }

    .room1 .rm_bt {
        width: 93%;
    }
}

/***room end****/
/***********************/