/*--------------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;
    vertical-align: baseline;
}

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

body {
    line-height: 1.8;
    letter-spacing: 1px;
    font-size: 10px;
    color: #5f5b56;
    font-family: 'Bona Nova', serif, 'Noto Sans TC', sans-serif, 'Zilla Slab', serif;
    ;
    overflow-x: hidden;
    cursor: none;
}

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: #333;
    text-decoration: none;
}

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

.clear {
    clear: both;
}

img {
    max-width: 100%;
}

::-webkit-scrollbar {
    width:10px;
}
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin:0 0 5px 0;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background:rgba(202, 204, 205, .8);/*捲軸顏色*/
}

::selection {
    background: rgba(36, 52, 75, .8);
    color: #fff;
}

/************************************************************************************************************************************************
************************************************************************************************************************************************
************************************************************************************************************************************************/
/*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;
}

.carousel-inner>.item>img {
    display: inline-block;
}

/*---header---------------------------------------------------------------------------------------------------------------------------*/
header {
    position: relative;
}
.banner{
    width: 100%;
    background: url(../../images/dex_bg.jpg) top center repeat;
    background-size: 100%;
    position: relative;
}
.banner .dex_deco{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.deximg{
    background: url(../../images/dex.jpg) top right no-repeat;
    width: 100%;
    max-width: 1453px;
    min-height: 968px;
    margin: 0 0 0 auto;
    position: relative;
}
.deximg .dex_txt{
    position: absolute;
    bottom: 6rem;
    right: 5rem;
}
.banner .dex_inner{
    position: absolute;
        bottom: 29.6rem;
    left: 5.1rem;
    z-index: 2;
}
.dex_inner .enter{
        position: absolute;
    bottom: -38px;
    left: 9px;
}
.dex_inner .enter a{
    transition: .5s all;
	padding-left: 15rem;
}
.dex_inner .enter a img{
    vertical-align: middle;
    transition: .5s all;
}
.dex_inner .enter a:hover{
    filter: contrast(0.5);
}
.dex_inner .enter a:hover img:last-child{
    transform: translateX(10px);
}

@media screen and (max-width: 1700px){
}
@media screen and (max-width: 1600px){
}
@media screen and (max-width: 1500px){
.banner .dex_inner {
    left: 3rem;
}
.banner .dex_deco {
    width: 85%;
}
}
@media screen and (max-width: 1400px){
.banner .dex_deco {
    width: 78%;
}
}
@media screen and (max-width: 1300px){
    .deximg {
    background-position: top left;
}
}
@media screen and (max-width: 1200px){
.deximg .dex_txt {
    right: 2rem;
}
}
@media screen and (max-width: 1100px){
}
@media screen and (max-width:1000px){
}
@media screen and (max-width:900px){
    .banner .dex_inner {
    width: 70%;
}
    .deximg {
    background-position: top left -9rem;
}
}
@media screen and (max-width: 800px){
}
@media screen and (max-width: 768px){
.banner {
    height: 100vh;
    background-position: bottom 25rem left -9rem;
    background-size: 136%, contain;
}
.banner .dex_deco {
    width: 100%;
}
    .banner .dex_inner {
    position: relative;
    top: 2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.deximg {
    min-height: 765px;
}
}
@media screen and (max-width: 576px){
    .banner {
    background-position: bottom 25rem left -11rem;
}
.dex_inner .enter a {
    padding-left: 12rem;
}
}
@media screen and (max-width: 450px){
.banner {
    background-position: bottom 13.6rem left -11rem;
}
    .deximg {
    min-height: 586px;
    background-size: cover;
}
.deximg .dex_txt {
    right: 1rem;
    width: 56%;
    bottom: 3rem;
}
.dex_inner .enter a {
    padding-left: 10rem;
}
}
@media screen and (max-width: 414px){
    .banner {
        background-position: bottom 37% left -11rem;
    height: 90vh;
}
    .deximg {
    min-height: 68%;
    background-position: top left -12rem;

}
.banner .dex_inner {
    top: 3.5rem;
}
.dex_inner .enter {
    bottom: -29px;
}
.dex_inner .enter a {
    padding-left: 9rem;
}
}
@media screen and (max-width: 390px){
    .banner {
    height: 80vh;
}
.deximg {
    background-position: top left -10rem;
}
}
@media screen and (max-width: 360px){
    .banner {
    height: 76vh;
}
.banner {
    background-position: bottom 36.2% left -11rem;
}
.deximg {
    background-position: top left -7rem;
}
.banner .dex_inner {
    top: 3.2rem;
}
.dex_inner .enter a {
    padding-left: 8rem;
}
}
@media screen and (max-width: 340px){
.banner {
    height: 82vh;
}	
	}
@media screen and (max-width: 320px){
.dex_inner .enter a {
    padding-left: 7rem;
}
	}
/*---menu---------------------------------------------------------------------------------------------------------------------------*/
.header-section {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: transparent;
    border-bottom: none;
    transition: border-bottom 0s, background-color 0s, padding 0s;  
    z-index: 50;
    opacity: 0;

}
.navslow, .navslow2{
    opacity: 1;
}
.page-width{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-nav, .top-nav2{
    background-color: rgba(0, 0, 0, 0.65);
    transition: border-bottom .4s, background-color .4s;
    opacity: 1;
}

.menu {
    width: 100%;
    max-width: 950px;
    text-align: center;
}

.menu_logo{
	line-height:0;
}

.menu ul{
    display: flex;
    justify-content: center;
}
.menu ul li {
    display: inline-block;
    position: relative;
    padding: 0 2.5rem;

}
.menu ul li a {
    position: relative;
    white-space: nowrap;
    transition: .5s all;
    text-align: center;
    letter-spacing: 3px;
	color:#fff;
}

.menu ul li a h2{
font-size: 18px;
text-align: center;
transition: .5s all;
position: relative;
}
.menu ul li a h3{
font-size: 18px;
font-family: 'Zilla Slab';
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s all;
}
.menu ul li a:hover h2{
    opacity: 0;
}
.menu ul li a:hover h3{
    opacity: 1;
}
.menu ul li img{
    position: relative;
    bottom: 0;
    right: -30px;
}
.menu ul li:nth-of-type(5) img{
    position: relative;
    bottom: 0;
    right: -50px;
}
.menu li ul {    
    display: block;
    position: absolute;
    padding: 7px 0 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    top: 100%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
}
.menu li ul:before{
    content: '';
    background: rgba(0, 0, 0, .65);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1.9rem;
    left: 0;
}
.menu li:hover > ul {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.menu ul ul li{
    position: relative;
}
.menu ul ul li > a {
    padding: 6px 9px;
    font-size: 16px;
    color: #fff;
    transition: .5s all;
}
.menu ul ul li > a:hover{
    color: #604304;
}
.menu ul ul li > a:before{
   display: none;
}
.menu li > ul ul {
    left: 100%;
    top: -15px;
}
.menu li > ul i {
    position: absolute;
    right: 20px;
    top: 15px;
}
.menu li > ul {       
    top: 4rem;
}
.menu li > ul li{
    width: 100%;
    padding: 0;
}
.menu li > ul li img{
    bottom: 0;
    right: 0;
    padding-right: 15px;
    vertical-align: middle;
}
.menu li > ul ul {
    left: -100%;
    right: 0;
}
/*Menu Close Icon css Start*/
.m-menu-btn {
    cursor: pointer;
    display: none;
    height: 27px;
    width: 30px;
    position: absolute;
    top: 8px;
    right: 15px;
}
.m-menu-btn span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.m-menu-btn span:nth-child(1) {
    top: 5px;
}
.m-menu-btn span:nth-child(2), .m-menu-btn span:nth-child(3) {
    top: 15px;
}
.m-menu-btn span:nth-child(4) {
    top: 24px;
}
.m-menu-btn.m-menu-btn-ext span:nth-child(1) {
    top: 15px;
    width: 0%;
    left: 50%;
}
.m-menu-btn.m-menu-btn-ext span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.m-menu-btn.m-menu-btn-ext span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.m-menu-btn.m-menu-btn-ext span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

/*Menu Close Icon css End*/

@media screen and (max-width: 1500px){
    .header-section{
        padding: 0 1rem;
    }
    .menu li ul:before {
    top: 2.6rem;
}
}
@media screen and (max-width: 1270px){
    .menu li > ul {
    top: 5rem;
}
.menu li ul:before {
    top: 1.4rem;
}
}
@media screen and (max-width: 1200px){
    .menu li ul:before {
    top: 0.96rem;
}

}
@media all and (max-width: 1100px) {
.header-section{
    background: rgba(0, 0, 0, 1);
}
.page-width {
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
}
.menu  {
        width: 100%;
    display: none;
    padding-bottom: 20px;
}
.menu ul {
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.m-menu-btn {
    display: block;
}
.menu > ul > li {
    display: block;
    padding: 1.5rem 0;
}
.menu ul li:before {
    bottom: 9px;
    right: 4px;
}

.menu_logo {
  
}
.menu li > ul {
    position: relative;
    margin: 0 auto;   
    left: 0;
    top: 0;
    opacity: 1;
    visibility: visible;
    display: none;
    box-shadow: none;
    border: none;
    background-color: rgba(0,0,0,0.05);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: none;
    -webkit-transition: none;
    transition: none;
}
.menu li > ul ul {
    left: 0;
    top: 0;
}
.menu li.submenu-right > ul {
    display: none;   
    top: 0;
}

}
@media screen and (max-width:450px){
    .menu_logo {
    width: 60%;
    margin-bottom: 0;
}
}


/*---cursor---------------------------------------------------------------------------------------------------------------------------*/
.cursor-dot,
.cursor-dot-outline {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  background: #000;
}

.cursor-dot-outline {
  width: 40px;
  height: 40px;
  border:1px #000 solid;
  mix-blend-mode: difference;
  background-color: #fff;
}

@media screen and (max-width: 1100px){
.cursor-dot, .cursor-dot-outline{
    display:none;
}
}
/*---main----------------------------------------------------------------------------------------------------------------------------*/
main {
    z-index: 2;
}
.inwrap{
    position: relative;
    z-index: 0;
}

.indeco{
    position: absolute;
    top: 36rem;
    right: 0;
    z-index: 1;
}
.thumbnail{
    box-shadow:none;
        background-color: transparent;
    border: none;
}
.inbg_top{
    background: url(../../images/inbg_top.png)bottom center no-repeat;
    background-size: contain;
    width: 100%;
    min-height: 397px;
}
.inbg_bot{
    background: rgba(255, 255, 255, .65);
}
.in_cont{
   position: relative;
   top: -10rem;
   margin-bottom: -10rem;
}
@media screen and (max-width:1600px){
    .indeco {
    top: 27rem;
}
}
@media screen and (max-width:1560px){
.inbg_top {
    min-height: 326px;
}
    .in_cont {
    top: -6rem;
    margin-bottom: -6rem;
}
}
@media screen and (max-width: 1440px){
   
.indeco {
    top: 21rem;
}
.inbg_top {
    min-height: 295px;
}
}
@media screen and (max-width:1400px){
    .in_cont {
    top: -1rem;
    margin-bottom: -1rem;
}
}
@media screen and (max-width: 1280px){
   
.indeco {
    width: 23%;
}
}
@media screen and (max-width:1200px){
    .inbg_top {
    min-height: 255px;
}
}
@media screen and (max-width: 1100px){
    .inbg_top {
    min-height: 232px;
}
}
@media screen and (max-width: 834px){
   .inbg_top {
    min-height: 178px;
}
}
@media screen and (max-width: 768px){
   .inbg_top {
    min-height: 163px;
}
.indeco {
    top: 20rem;
}
}
@media screen and (max-width: 576px){
   .inbg_top {
    min-height: 124px;
}
}
@media screen and (max-width: 450px){
   .inbg_top {
    min-height: 98px;
}
.indeco {
    top: 12rem;
}
}
@media screen and (max-width: 414px){
   
.indeco {
    top: 12rem;
}
.inbg_top {
    min-height: 91px;
}
}
@media screen and (max-width: 390px){
   
}
@media screen and (max-width: 340px){
   
}
/*---intop----------------------------------------------------------------------------------------------------------------------------*/
.intop{
    position: relative;
    z-index: 2;
    padding: 0 4rem  2rem;
}
.breadcrumb{
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    display: flex;
    background-color:transparent;
}
.breadcrumb li{
    padding: 0 7px;
}
.breadcrumb a{
    text-decoration: none;
    color: #7c8a95;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    display: inline-block;
}
.breadcrumb a:hover,
.breadcrumb li:last-child a{
    color: #7c8a95;
}
.breadcrumb li + li{
    padding-left: 0;
}
.breadcrumb li:first-child:before{
    content: '．';
    color: #7c8a95;
    font-size: 14px;
}
.breadcrumb li + li:before{
    content: '>';
    color: #7c8a95;
    margin-right: 7px;
    font-size: 14px;
    padding: 0;
    top: -1px;
    position: relative;
}
@media screen and (max-width:1600px){
   
}
@media screen and (max-width:1440px){
    
}
@media screen and (max-width:991px){
   .intop {
    padding: 0 1rem 3rem;
}
}
@media screen and (max-width:834px){
    .intop {
    padding: 0 1rem 9rem;
}
}
@media screen and (max-width:7684px){
    .intop {
    padding: 0 1rem 5rem;
}
}
@media screen and (max-width:450px){
   .intop {
    padding: 0 1rem 1rem;
}
}
@media screen and (max-width:360px){
    .intop {
    padding: 0 1rem 1rem;
}
}
/*---inner-----------------------------------------------*/
.inner{
    width: 100%;
    margin: 0 auto;    
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
}




/*---title------------------------------------------------*/
.title{
    width: 100%;
    max-width: 612px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
}
.title .title_en{
    text-align: right;
    margin: 0 0 0 1.7rem;
}
.title .title_en h3{
    font-size: 60px;
    color: #d1bc7a;
    font-family: 'Zilla Slab';
    letter-spacing: 2px;
    text-transform:capitalize;
        padding-bottom: 2.5rem;
}
.title .title_en img{}
.title .title_ch{
text-align: right;
}
.title .title_ch h2{
    font-size: 22px;
    color: #5f5b56;
    font-family: 'Noto Sans TC';
    letter-spacing: 4px;
    font-weight: 300;
    
}

@media screen and (max-width:1024px){
    .title .title_en h3 {
    font-size: 88px;
}
}
@media screen and (max-width:991px){
    .title .title_en h3 {
    font-size: 80px;
}
}
@media screen and (max-width: 960px){
    .title .title_en h3 {
    font-size: 75px;
}
}
@media screen and (max-width:768px){
    .title .title_en h3 {
    font-size: 90px;
}
}
@media screen and (max-width:550px){
    .title {
    justify-content: center;
}

}
@media screen and (max-width:500px){
    .title .title_en h3 {
    font-size: 65px;
}
}
@media screen and (max-width:450px){
.title {
    align-items: flex-end;
}       
 .title img:nth-child(1){
    width: 18%;
}
 .title img:nth-child(2){
    width: 95%;
}
.title .title_en {
    margin: 0;
        width: 75%;
}
.title .title_ch h2 {
    font-size: 17px;
}
}
@media screen and (max-width:414px){
    .title .title_en h3 {
    font-size: 57px;
}
}
@media screen and (max-width:390px){
    .title .title_en h3 {
    font-size: 55px;
}
}
@media screen and (max-width:360px){
    .title .title_en h3 {
    font-size: 52px;
}
}
@media screen and (max-width:330px){
    .title .title_en h3 {
    font-size: 47px;
}
}
/*---about-----------------------------------------------------------------------------------------*/

/*ab1*/
.ab1{
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 5rem;
}
.ab11{
    width: 100%;
    max-width: 1368px;
    margin: 0 auto;
    padding-left: 5.9rem;
    display: flex;
    justify-content: space-between;
}
.ab11 .ab11_lt{
    width: 100%;
    max-width: 570px;
    padding-top: 5rem;
}
.ab11 .ab11_lt .ab11_txt{
    margin-top: 6rem;
}
.ab11_txt .a11_txtinner{
    display: flex;
    justify-content: flex-start;
    padding: 0 0 5rem 6.6rem;

}
.ab11_txt .a11_txtinner .ab11_txt1{
    margin-right: 3.6rem;
}
.ab11_txt .a11_txtinner .ab11_txt1 span{
    font-size: 16px;
    color: #7c8a95;
    font-family: 'Zilla Slab';    
}
.ab11_txt .a11_txtinner .ab11_txt1 dl{
   font-size: 16px;
    color: #5f5b56;
    font-family: 'Noto Sans TC';
    -webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
height: 236px;
margin: 0 -3rem 0 auto;
text-align: justify;
}
.ab11_txt .a11_txtinner .ab11_txt1 dl dd{
    line-height: 28px;
}
.ab11 .ab11_lt .ab11_txt .ab11_txt2{
    
}
.ab11 .ab11_lt .ab11_txt .ab11_txt2 h2{
    font-size: 20px;
    color: #7c8a95;
    font-family: 'Noto Sans TC';
    -webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
letter-spacing: 3px;
line-height: 35px;
text-orientation: upright;
}
.ab11 .ab11_rt{}
.ab11 .ab11_rt img{}


@media screen and (max-width: 1800px){
    .ab1:before {
    background-size: 90%;
}

}
@media screen and (max-width: 1700px){
    .ab1:before {
    background-size: 75%;
    top: 20rem;
    right: 2rem;
}
}
@media screen and (max-width: 1600px){
    .ab1:before {
    background-size: 65%;
    top: 20rem;
    min-height: 341px;
}
}
@media screen and (max-width: 1440px){}
@media screen and (max-width: 1366px){
    .ab1:before {
    background-size: 50%;
    top: 2rem;
    min-height: 182px;
    width: 17%;
}
}
@media screen and (max-width: 1280px){}
@media screen and (max-width: 1152px){
    .ab11_txt .a11_txtinner {
    padding: 0 0 1rem 6.6rem;
}
}
@media screen and (max-width: 1024px){
    .ab11 {
    padding-left: 0.9rem;
        align-items: center;
}
.ab11 .ab11_lt {
    width: 50%;
    padding-top: 0;
}


}

@media screen and (max-width: 834px){
   .ab1:before {
    background-size: 90%;
    top: 64rem;
    min-height: 212px;
    width: 20%;
}
    .ab11 {
    flex-wrap: wrap;
    flex-direction: column;
    padding-left: 0;
}
.ab11_txt .a11_txtinner {
    padding: 0 0 1rem 3.6rem;
}
.ab11 .ab11_lt {
    width: 95%;
}
.ab11 .ab11_rt {
    margin-top: 3rem;
}
}
@media screen and (max-width: 576px){}
@media screen and (max-width: 450px){
   .ab1:before {
    top: 56rem;
    min-height: 127px;
}
    .ab11_txt .a11_txtinner {
    padding: 0 0 1rem 0;
        justify-content: center;
}
.ab11_txt .a11_txtinner .ab11_txt1 {
    margin-right: 0.6rem;
}
.ab11_txt .a11_txtinner .ab11_txt1 span {
    font-size: 14px;
}
}
@media screen and (max-width: 414px){
   .ab1:before {
    top: 64rem;
    min-height: 120px;
}
   .ab11 .ab11_lt .ab11_txt {
    margin-top: 5rem;
}
    .ab11_txt .a11_txtinner {
    flex-wrap: wrap;
}
.ab11_txt .a11_txtinner .ab11_txt1 {
    margin-right: 0;
    width: 85%;
    text-align: center;
}
.ab11 .ab11_lt .ab11_txt .ab11_txt2 {
    order: -1;
        margin-bottom: 1.52rem;
}
.ab11 .ab11_lt .ab11_txt .ab11_txt2 h2 {
        writing-mode: initial;
}
}
@media screen and (max-width: 390px){
    .ab11_txt .a11_txtinner .ab11_txt1 {
    width: 95%;
}
.ab11_txt .a11_txtinner .ab11_txt1 dl {
    margin: 3.2rem 0 0 auto;
    position: relative;
    left: 1rem;
}
.ab11_txt .a11_txtinner .ab11_txt1 dl dd {
    line-height: 26px;
}
}
@media screen and (max-width: 360px){
    .ab11_txt .a11_txtinner .ab11_txt1 dl {
    height: 260px;
}
}
@media screen and (max-width:340px){
   .ab1:before {
    top: 70rem;
    min-height: 98px;
}
.ab11_txt .a11_txtinner .ab11_txt1 span {
    font-size: 12px;
}
    .ab11_txt .a11_txtinner .ab11_txt1 dl {
    height: 300px;
}


}
/*ab2*/

.ab2{
    background: url(../../images/ab2_bg.jpg) top left;
    width: 100%;
    position: relative;
}
.ab2 .ab2_deco01{
    position: absolute;
    top: 10.3rem;
    left: 7.7rem;
    z-index: 1;
}
.ab21{
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    padding-top: 16rem;
    display: flex;
    justify-content: flex-end;
}
.ab21 .ab21_img{
    position: relative;
    padding-top: 6.6rem;
    margin-right: 13.9rem;
}
.ab21 .ab21_img:before{
        content: 'gradation';
    font-size: 72px;
    color: #c9a76e;
    font-family: 'Zilla Slab';
    position: absolute;
    top: 0;
    right: -16px;
    text-transform: uppercase;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    line-height: 0;
    letter-spacing: 0;
    z-index: -1;
}
.ab21 .ab21_txt{
    padding-top: 8.6rem;
    width: 35%;
}
.ab21 .ab21_txt p{
    font-size: 16px;
    color: #5f5b56;
    width: 100%;
    max-width: 425px;
    text-align: justify;

}

@media screen and (max-width: 1800px){
    .ab2:after {
    background-size: 90%;
}
}
@media screen and (max-width: 1700px){
    .ab2:after {
    background-size: 75%;
    top: -15rem;
    right: 8rem;
}
.ab2:before {
    background-size: 90%;
    min-height: 685px;
}
.ab2 .ab2_deco01 {
    top: 6.3rem;
}
}
@media screen and (max-width: 1600px){
    .ab2:after {
    right: 2rem;
    min-height: 255px;
}
}
@media screen and (max-width: 1440px){}
@media screen and (max-width: 1366px){
    .ab2:after {
    right: 2rem;
    min-height: 195px;
    background-size: 60%;
    width: 10%;
    top: -13rem;
}
}
@media screen and (max-width: 1280px){
    .ab2:after {
    top: -18rem;
}
.ab2_deco01{
    width: 25%;
}
}
@media screen and (max-width: 1152px){    
.ab21 .ab21_img {
    margin-right: 7.9rem;
}
.ab21 {
    padding: 7rem 1rem 0;
}
.ab2 .ab2_deco01 {
    top: 34.3rem;
    left: auto;
    right: 7rem;
    width: 22%;
}
}
@media screen and (max-width: 1024px){
    .ab2:after {
    top: -16rem;
    right: 1rem;
    min-height: 118px;
}
.ab2 .ab2_deco01 {
    top: 37.3rem;
    width: 15%;
}
}
@media screen and (max-width: 991px){
    .ab2 .ab2_deco01 {
    top: 39.3rem;
}
}
@media screen and (max-width: 834px){

.ab2:before {
    background-size: 98%;
    min-height: 347px;
}
    .ab2:after {
    top: -10rem;
    right: 2rem;
    min-height: 138px;
    background-size: 100%;
}
.ab2 .ab2_deco01 {
    top: auto;
    width: 20%;
    right: 6rem;
    bottom: 7rem;
}
.ab21 {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem 11rem;
}
.ab21 .ab21_img {
    padding-top: 2.6rem;
}
.ab21 .ab21_txt {
    padding-top: 2.6rem;
    width: 95%;
}
.ab21 .ab21_txt p {
    max-width: 70%;
}
}
@media screen and (max-width: 576px){}
@media screen and (max-width: 450px){
   .ab2:after {
    top: -8.5rem;
    right: 1rem;
    min-height: 80px;
}
   .ab2 .ab2_deco01 {
    top: 0;
    width: 20%;
    right: auto;
    bottom: auto;
    left: 3rem;
}
   .ab21 .ab21_img {
    margin-right: 1.9rem;
    width: 95%;
}
    .ab21 .ab21_img:before {
    font-size: 37px;
    right: -7px;
}
.ab21 .ab21_txt p {
    max-width: 98%;
}
}
@media screen and (max-width: 450px){
    .ab2:before {
    min-height: 197px;
}
}
@media screen and (max-width: 390px){
   .ab2:before {
    min-height: 170px;
    background-size: 90%;
}
.ab21 {
    padding: 3rem 1rem 8rem;
}
    .ab21 .ab21_img {
    width: 90%;
        padding-top: 1.6rem;
}
.ab21 .ab21_img:before {
    font-size: 34px;
    right: -6px;
}
}
@media screen and (max-width: 360px){
    .ab2:after {
    top: -7.8rem;
    min-height: 66px;
}
.ab2:before {
    background-size: 94%;
    min-height: 167px;
}
}


/*ab3*/

.ab3{
    background:url(../../images/ab3_mask.png) top left no-repeat, url(../../images/ab3_bg.png) top left;
    background-size: 100%, contain;
    background-position: top left;
    position: relative;
    margin: -3rem 0 -5rem;
    padding-bottom: 7.5rem;

}
.ab3:before{
    content: '';
    background-size: 100%;
    width: 100%;
    max-width: 1852px;
    min-height: 750px;
    position: absolute;
    top: -3rem;
    right: 0;
}

.ab31{
    width: 100%;
    max-width: 1480px;
    margin: 0 15.4rem 0 auto;
    display: flex;
    padding: 6.5rem 0 2.5rem 0;
    justify-content: flex-end;
}
.ab31 .ab31_lt{
    padding-top: 16rem;
    width: 100%;
    max-width: 506px;
    margin-right: 0;
    position: relative;
    z-index: 2;
}
.ab31 .ab31_lt .ab31lt_txt{
    width: 100%;
    max-width: 475px;
    margin-bottom: 9rem;
    text-align: justify;
}
.ab31 .ab31_lt .ab31lt_txt p{
    font-size: 16px;
    color: #5f5b56;

}
.ab31 .ab31_lt .ab31lt_txt p:nth-child(1){
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    padding-bottom: 4rem;

}

.ab31 .ab31_lt .ab31lt_img{}
.ab31 .ab31_lt .ab31lt_img img{}
.ab31 .ab31_lt .ab31lt_img span{
    font-size: 72px;
    color: #c9a76e;
    text-transform:uppercase;
    font-family: 'Zilla Slab';
    line-height: 1;
}
.ab31 .ab31_rt{
    position: relative;
    z-index: 1;
    padding-left: 12rem;
}
/*ab32*/
.ab32{
    width: 100%;
    max-width: 1728px;
    margin: 0 auto 2.9rem;
    position: relative;
    z-index: 1;
}

/*ab33*/
.ab33{
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
    padding-top: 4.3rem;
}
.ab33 .ab33_top{
    background: url(../../images/ab33_bg_01.png) top center no-repeat, url(../../images/ab33_bg_04.png) bottom center no-repeat, url(../../images/ab33_bg_03.png) top center repeat-y;
    background-size: 100%;
    width: 100%;
    max-width: 1228px;
    min-height: 496px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 3;
}
.ab33 .ab33_top .ab33_deco01{
    position: absolute;
    top: -11rem;
    left: -16rem;
}
.ab33 .ab33_top .ab33_txt{
    height: 280px;
    margin: 8.2rem 12rem 0 0;
}
.ab33 .ab33_top .ab33_txt p{
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-size: 16px;
color: #5f5b56;
text-align: justify;
}
.ab33 .ab33_top .ab33_img{
   margin-right: -6rem;
   display: grid;
    grid-auto-flow: column;
    position: relative;
}
.ab33 .ab33_top .ab33_img img{
    padding: 0 1rem;
    border-radius: 50px;
}

.ab33 .ab33_bot{
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    text-align: right;
    padding-right: 2.8rem;
}
.ab33 .ab33_bot img{
    padding: 1.8rem 0 3rem;
}
.ab33 .ab33_bot p{
  font-size: 16px;
  color: #5f5b56;
  padding-bottom: 2.5rem;
}
@media screen and (max-width: 1700px){
    .ab3:after {
    background-size: 70%;
}
}
@media screen and (max-width: 1600px){
    .ab3:after {
    top: -1rem;
    width: 20%;
    min-height: 236px;
}
}
@media screen and (max-width: 1500px){
    .ab31 {
    margin: 0 0 0 auto;
    padding: 6.5rem 2rem 2.5rem 0;
}
.ab32 {
    padding: 0 2rem;
}
.ab33 .ab33_top .ab33_deco01 {
    left: -7rem;
    width: 35%;
}
}
@media screen and (max-width: 1400px){
    .ab3:after {
    top: 2rem;
    min-height: 193px;
}
.ab33 .ab33_top {
    width: 85%;
}
}
@media screen and (max-width: 1300px){
    .ab31 {
    padding: 6.5rem 2rem 2.5rem 2rem;
}
.ab31 .ab31_rt {
    padding-left: 1rem;
}
}
@media screen and (max-width:1200px){
    .ab31 .ab31_rt:after {
    background-size: 63%;
    width: 27%;
}
}
@media screen and (max-width: 1100px){
  .ab31 .ab31_rt:before {
    background-size: 100%;
    min-height: 335px;
    bottom: -5rem;
    width: 53%;
}
.ab31 .ab31_rt:after {
    bottom: 17rem;
}
    .ab33 .ab33_top {
    width: 90%;
}
.ab33 .ab33_top .ab33_deco01 {
    left: 0;
}
.ab33 .ab33_top .ab33_txt {
    margin: 2.2rem 5rem 0 0;
}
.ab33 .ab33_top .ab33_img {
    margin-right: -2rem;
    width: 70%;
}
.ab33 .ab33_bot {
    padding-right: 7.8rem;
}
}
@media screen and (max-width: 1000px){
    .ab31 .ab31_lt {
    padding-top: 8rem;
}
.ab33 .ab33_top {
    min-height: 440px;
}
}
@media screen and (max-width: 834px){
    .ab3:before {
    background-size: 98%;
    min-height: 350px;
    top: -1rem;
}
.ab31 {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.ab31 .ab31_lt {
    margin-right: 0;
    margin-bottom: 4rem;
}
.ab31 .ab31_rt:before {
    bottom: -8rem;
    left: auto;
    right: 0rem;
}
.ab31 .ab31_rt:after {
    bottom: 13rem;
    left: auto;
    right: 24rem;
}
.ab33 .ab33_top {
        min-height: 720px;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
.ab33 .ab33_top .ab33_deco01 {
    left: 2rem;
}
.ab33 .ab33_top .ab33_img {
    width: 90%;
        margin-right: 0;
}
.ab33 .ab33_top .ab33_txt {
    margin: 0;
}
}
@media screen and (max-width: 768px){
.ab3:after {
    width: 35%;
}
.ab33 .ab33_top {
    min-height: 660px;
}
.ab33 .ab33_top .ab33_deco01 {
    width: 45%;
}
   .ab33 .ab33_top .ab33_txt {
    width: 80%;
    height: auto;
    margin-bottom: 2rem;
}
    .ab33 .ab33_top .ab33_txt p {
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}
.ab33 .ab33_bot {
    padding-right: 3.8rem;
}
}
@media screen and (max-width: 576px){
  .ab31 .ab31_rt {
    padding-left: 0;
}
  .ab31 .ab31_rt:before {
    bottom: -2rem;
    right: 7rem;
    min-height: 230px;
    width: 36%;
}
.ab31 .ab31_rt:after {
    bottom: 12rem;
    right: 18rem;
}
    .ab33 .ab33_top {
    min-height: auto;
        padding: 4rem 0;
}
.ab33 .ab33_top .ab33_img:before {
    bottom: 1rem;
    background-size: 50%;
}
}
@media screen and (max-width: 450px){
   .ab3:after {
    width: 55%;
    top: -4rem;
    min-height: 163px;
}
.ab31 .ab31_rt:after {
    bottom: 8rem;
    right: 12rem;
}

.ab31 .ab31_lt .ab31lt_txt {
    margin-bottom: 5rem;
}
.ab31 .ab31_rt:before {
    bottom: -3rem;
    right: 4rem;
    min-height: 178px;
}
.ab33 .ab33_top {
    width: 100%;
        background-size: 95%;
}
    .ab33 .ab33_top .ab33_img {
    grid-auto-flow: initial;
    width: 100%;
    text-align: center;
    justify-items: center;
    overflow-x: hidden;    
}
.ab33 .ab33_top .ab33_img img {
    padding: 1rem;
}
.ab33 .ab33_top .ab33_img:before {
    bottom: 5rem;
    background-size: 90%;
    right: 4rem;
}
}
@media screen and (max-width: 414px){
    .ab31 .ab31_lt .ab31lt_img span {
    font-size: 62px;
}
.ab31 .ab31_rt:after {
    bottom: 7rem;
}
}
@media screen and (max-width: 390px){
   .ab31 {
    padding: 2.5rem 2rem 2.5rem 2rem;
}
    .ab31 .ab31_lt .ab31lt_img span {
    font-size: 56px;
}
.ab31 .ab31_rt:before {
    min-height: 147px;
    bottom: -2rem;
}
.ab33 {
    padding-top: 0.3rem;
}
.ab33 .ab33_top .ab33_deco01 {
    top: -6.5rem;
}
.ab33 .ab33_top .ab33_img:before {
    right: 3rem;
    background-size: 70%;
}
.ab33 .ab33_bot {
    padding-right: .9rem;
}
.ab33 .ab33_bot img {
    padding: 1.8rem 0 1rem;
}
.ab33 .ab33_bot p {
    padding-bottom: 0.5rem;
}
}
@media screen and (max-width:360px){
    .ab31 .ab31_rt:after {
    bottom: 6.5rem;
    right: 11rem;
}
}
@media screen and (max-width: 350px){
    .ab31 .ab31_rt:after {
    bottom: 6rem;
}
    .ab33 .ab33_top {
    width: 95%;
    background-size: 90%;
}
.ab33 .ab33_top .ab33_img:before {
    right: 1rem;
    min-height: 27px;
}
}
@media screen and (max-width:330px){
  .ab31 .ab31_lt .ab31lt_img span {
    font-size: 49px;
}
.ab31 .ab31_rt:after {
    bottom: 5.5rem;
    right: 10rem;
}
   .ab33 .ab33_bot {
    padding-right: 2.3rem;
}
    .ab33 .ab33_bot p {
    font-size: 13px;
    padding-bottom: 1.5rem;
}
}

/*---index----------------------------------------------------------------------------------------------------------------------------*/

.inbg{    
    position: relative;
    padding-top: 11.8rem;
}
.inbg:before{
    content: '';
    display: block;
    position: fixed;
    background: url(../../images/inbg01.png) top center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    top: 0;
}
.inbg .inshadow {
    position: fixed;
    top: -3rem;
    right: 0;
    mix-blend-mode: difference;
    z-index: 2;
    pointer-events: none;
    transform-origin: top right;
    animation: breeze 3s ease-in-out alternate infinite;
}
@keyframes breeze {
  to {
    transform: rotate(2deg);
  }
}


@media screen and (max-width:1280px){
    .inbg .inshadow {
    width: 60%;
}
}
@media screen and (max-width:450px){
    .inbg {
    padding-top: 7.8rem;
}
.inbg .inshadow {
    top: -1rem;
}
}
/*---footer-----------------------------------------------------------------------------------------*/
footer {  
background:#f0e8d8;
background-size: cover;
    text-align: center;
    padding: 0;
    position: relative;
    z-index: 1;  
}
.ft_bg{  
   width: 100%;
   position: relative;
}
.ft_deco01{
   background: #d4cbc1;
   clip-path: polygon(42% 0%, 100% 0, 100% 20%, 45% 20%, 29% 100%, 0 209%);
   width: 100%;
   min-height: 116%;
   position: absolute;
   top: -7.3rem;
   right: 0;
   z-index: 1;
   pointer-events: none;
}
.ft_deco02{
   background: #dbdbdb;
   clip-path: polygon(7% 0%, 100% 0, 100% 20%, 7.3% 20%, 0% 100%, 0 78%);
   width: 100%;
   min-height: 162px;
   position: absolute;
   top: -5.3rem;
   left: 0;
}
.ft_inner{
   
   width: 100%;
   position: relative;
   z-index: 1;
   background: #000;

}
.ft_inner2{
   width: 100%;
   position: relative;
   z-index: 1;
}

.ft_cont{
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    padding: 4rem 0;
    display: flex;
    justify-content: space-between;
}
.ft_cont .ft_lt{}
.ft_cont .ft_lt .ft_logo{
    margin-bottom: 6rem;
}
.ft_cont .ft_lt .ftbtn{
    text-align: left;
}
.ft_cont .ft_lt .ftbtn ul{
    display: inline-block;
    
}
.ft_cont .ft_lt .ftbtn ul li{
display: inline-block;
   padding-right: 2rem;
}
.ft_cont .ft_lt .ftbtn ul a img{
    transition: .5s all;
}
.ft_cont .ft_lt .ftbtn ul a:hover img{
    transform: translateY(-5px);
}
.ft_cont .ft_lt .ftbtn img{
    display: inline-block;
    vertical-align: middle;
}
.ft_cont .ft_rt{
    width: 100%;
    max-width: 800px;
    text-align: left;
    padding-top: 3.6rem;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.ft_cont .ft_rt .ft_warp{
    padding-top: 3rem;
}
.ft_cont .ft_rt .ft_warp .ftinfo{}
.ft_cont .ft_rt .ft_warp .ftinfo h3{
    font-size: 60px;
    color: #5f5b56;
    font-family: 'Bona Nova';
    margin-bottom: 4rem;
}
.ft_cont .ft_rt .ft_warp .ftinfo ul{}
.ft_cont .ft_rt .ft_warp .ftinfo ul li{
    font-size: 16px;
    color: #fff;
    font-family: 'Noto Sans TC';
    text-align: left;
    vertical-align: middle;
    line-height: 2;
}
.ft_cont .ft_rt .ft_warp .ftinfo ul li img{
    vertical-align: middle;
    padding-right: 2rem;
}


.ft_cont .ft_rt .ft_map {
    position:relative;
    width:100%;
    max-width:420px;
    min-height:264px;
}
.ft_cont .ft_rt .ft_map iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


.ft_bg .ft_bot{
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    text-align: center;
}
.ft_bg .ft_bot .ft_share{
    width: 100%;
    max-width: 869px;
    margin: 1.9rem auto 0;
    display: flex;
    justify-content: space-between;
	color: #fff;
}
.ft_bg .ft_bot .icon{
    font-size: 12px;
}
.ft_bg .ft_bot .icon a{
    display: inline-block;
    color: #fff;
    padding: 0 .5rem;
    transition: .5s all;
}
.ft_bg .ft_bot .icon a:hover{
    transform: translateY(-5px);
    -webkit-filter:invert(1);
    filter: invert(1);
}

.ft_bg .ft_bot .copyright{}
.ft_bg .ft_bot .copyright a{
    color: #fff;
    font-size: 14px;
    display: inline-block;
    transition: .5s all;
}
.ft_bg .ft_bot .copyright a:hover{
    color: #695634;
}

@media screen and (max-width: 1550px){
   .ft_deco01 {
    clip-path: polygon(40% 0%, 100% 0, 100% 20%, 42% 20%, 25% 100%, 0 190%);
}
    .ft_cont {
    width: 85%;
    margin: 0 0 0 14rem;
}
}
@media screen and (max-width: 1370px){
    .ft_cont {
    margin: 0 0 0 11rem;
}
    .ft_bg .ft_bot{
        padding: 0 2rem;
    }
    .ft_cont .ft_rt {
    width: 70%;
}
}
@media screen and (max-width: 1200px){
   
    .ft_deco01 {
    clip-path: polygon(20% 0%, 100% 0, 100% 12%, 24% 12%, 0% 87%, 0 65%);
}
    .ft_cont {
    flex-wrap: wrap;
    flex-direction: column;
        margin: 0 auto;
}
.ft_cont .ft_lt .ftbtn {
    text-align: center;
}
.ft_cont .ft_rt {
    width: 100%;
}
}
@media screen and (max-width:980px){
    .ft_deco01 {
    clip-path: polygon(15% 0%, 100% 0, 100% 12%, 17% 12%, 0% 51%, 0 37%);
}
}
@media screen and (max-width:850px){
 .ft_deco02 {
    clip-path: polygon(7% 0%, 100% 0, 100% 13%, 8.3% 13%, 0% 84%, 0 58%);
    top: -4rem;
}
  
     .ft_deco01 {
    clip-path: polygon(17% 0%, 100% 0, 100% 8%, 21% 8%, 0% 40%, 0 26%);
    min-height: 100%;
    top: -6.3rem;
}
   .ft_cont {
    padding: 7rem 0;
}
    .ft_cont .ft_rt {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.ft_cont .ft_rt .ft_warp{
    margin-bottom: 2rem;
}
}
    @media screen and (max-width:800px) {
        .ft_cont .ft_rt .ft_map {
            min-height:500px;
        }
    }
    @media screen and (max-width:768px){
        footer{
            background-attachment: initial;
            background-size: 100%;
        }
		.ft_cont {
    padding: 3rem 0;
}
        
.ft_deco01 {
    clip-path: polygon(17% 0%, 100% 0, 100% 6%, 21% 6%, 0% 30%, 0 20%);
}
.ft_bg .ft_bot {
    padding: 0 1rem;
}
.ft_bg .ft_bot .ft_share {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
    }

    @media screen and (max-width:600px) {
        .ft_cont .ft_rt .ft_map {
            min-height:400px;
        }
    }
    @media screen and (max-width:450px) {
      footer {
    padding: 0;
}  
.ft_deco02 {
    clip-path: polygon(5% 0%, 100% 0, 100% 6%, 7% 7%, 0% 42%, 0 26%);
    top: -2rem;
}
.ft_deco01 {
    clip-path: polygon(15% 0%, 100% 0, 100% 4%, 17% 4%, 0% 15%, 0 11%);
    top: -3.3rem;
}
.ft_cont {
    width: 95%;
    padding: 0 0 3rem;
}
.ft_cont .ft_lt .ft_logo {
    margin-bottom: 3rem;
}
.ft_cont .ft_rt .ft_warp .ftinfo h3 {
    margin-bottom: 2rem;
}
        .ft_cont .ft_rt .ft_map {
            min-height:300px;
        }
    }
@media screen and (max-width:414px){
    .ft_inner2 {
    padding: 0 1rem;
}
}
    @media screen and (max-width:350px) {
        .ft_cont .ft_rt .ft_warp .ftinfo h3 {
    font-size: 50px;
}
        .ft_cont .ft_rt .ft_map {
            min-height:270px;
        }
        .ft_cont .ft_rt .ft_warp .ftinfo ul li img {
    padding-right: 1rem;
}
    }

/*gotop*/
#gotop {
    position:fixed;
    bottom:5%;
    right:1em;
    cursor:pointer;
    display:none;
    z-index:999;
    text-align:center;
    transition:.3s ease-in-out;
        margin:5px 0;
}
        #gotop img {
            max-width:100%;
        }
        #gotop:hover {
            transform:translateY(-5px);
        }
    @media screen and (max-width:768px) {
        #gotop {
            width:7%;
            bottom: 12%;
        }
    }


/*---designer-----------------------------------------------*/

.designer{}

.designer .des_top{
    width: 100%;
    max-width: 1248px;
    margin: -4rem auto 0;
        display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.designer .des_top .des_deco01{
    width: 30%;
}

.designer .des_bot{    
    margin: 4.6rem auto 0;
    background: url(../../images/des_bg.png) bottom center no-repeat;
    background-size: 100%;
    width: 100%;
    max-width: 1235px;
    min-height: 704px;
    display: flex;
    justify-content: space-between;
    padding: 3.6rem 1.8rem 3.8rem 7rem;
    position: relative;
}

.designer .des_bot .des_deco02{
  position: absolute;
  top: 0;
  left: 0;
}
.designer .des_bot .des_deco03{
  position: absolute;
  top: 0;
  right: -12px;
  z-index: 1;
}
.designer .des_bot .des_txt{
    width: 100%;
    max-width: 730px;
}
.designer .des_bot .des_txt ul{}
.designer .des_bot .des_txt ul li{
   display: flex;
    justify-content: flex-start;
}
.designer .des_bot .des_txt ul li:nth-child(even){
   margin-bottom: 2.5rem;   
}
.designer .des_bot .des_txt li p{
    display: inline-block;
    font-size: 16px;
    font-family: 'Noto Sans TC';
}
.designer .des_bot .des_txt li p:nth-child(1){
    font-weight: bold;
    vertical-align: top;
    padding-right: 1rem;
}
.designer .des_bot .des_txt li p:nth-child(2){
    font-weight: 400;
}
@media screen and (max-width: 1280px){
    .designer .des_top {
    padding: 0 2rem;
}
.designer .des_bot .des_deco03 {
    right: 0;
}
}
@media screen and (max-width:1060px){
    
}
@media screen and (max-width:991px){
    .designer .des_top .des_deco01 {
    width: 36%;
}
.designer .des_top .des_deco01 img {
    width: 60%;
}

}
@media screen and (max-width: 840px){
.designer .des_top {
    margin: -9rem auto 0;
}
    .designer .des_bot .des_deco02 {
    width: 50%;
}

}
@media screen and (max-width: 768px){
  .designer {
    padding: 0 2rem;
}
    .designer .des_top {
    margin: 0rem auto 0;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
}
.designer .des_top .des_deco01 {
    display: none;
}
.designer .des_bot {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;

}
.designer .des_bot {
    padding: 3.6rem 0 3.8rem;
}
.designer .des_bot .des_txt {
    margin-bottom: 5rem;
}

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

}
@media screen and (max-width: 450px){
.designer {
    padding: 0 2rem;
}
    
.designer .des_bot .des_img{
    width: 80%;
}
}
@media screen and (max-width: 414px){
  .designer .des_bot {
    background-position:bottom 1rem center ;
}
.designer .des_bot .des_txt {
    padding: 0 2rem;
}
    .designer .des_bot .des_txt ul li {
    flex-wrap: wrap;
    flex-direction: column;
}


.designer .des_bot .des_img {
    width: 90%;
}

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

/*---concept-----------------------------------------------*/
.concept{
        margin-bottom: -5rem;
}

.concept .ct_top{
    width: 100%;
    max-width: 1248px;
    margin: -14rem auto 0;
        display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.concept .ct_top .ct_deco01{
    width: 30%;
}

/*ct11*/
.concept .ct11 {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    padding-top: 6.2rem;
}
.concept .ct11 .ct11_txt{
    display: flex;
    justify-content: space-between;
    padding: 6.5rem 5rem 10rem 3rem;
}
.concept .ct11 .ct11_txt .ct11_lt{
   width: 100%;
    max-width: 400px;
}
.concept .ct11 .ct11_txt .ct11_lt img{}
.concept .ct11 .ct11_txt .ct11_lt p{
    font-size: 16px;
    text-align: justify;
    padding-top: 4rem;
    font-family: 'Noto Sans TC';
    
}
.concept .ct11 .ct11_txt .ct11_rt{
    width: 100%;
    max-width: 460px;

}
.concept .ct11 .ct11_txt .ct11_rt img{
  
}
.concept .ct11 .ct11_txt .ct11_rt p{
    font-size: 16px;
    padding-top: 3.2rem;
    text-align: justify;
    font-family: 'Noto Sans TC';
}
.concept .ct11 .ct11_txt .ct11_rt p:first-of-type{
    padding-top: 2.4rem;
    margin-left: 12rem;
    text-align: right;
    position: relative;
}
.concept .ct11 .ct11_txt .ct11_rt p:first-of-type:before{
    content: '';
    background: #5f5b56;
    width: 123px;
    height: 0.75px;
    position: absolute;
    bottom: 6px;
    left: 0;
}

/*ct12*/

.concept .ct12 {
    background: url(../../images/ct12_bg.jpg) bottom center no-repeat;
    background-size: 100%;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20rem;
}
.concept .ct12 .ct12_top {
  width: 100%;
  margin: 0 auto;
  max-width: 1738px;
}

.concept .ct12 .ct12_top .ct12_img01 {
  overflow: hidden;
}
.concept .ct12 .ct12_top .ct12_img01 img {
  position: relative;
  clip: rect(0, 0, 0, 0);
}


.concept .ct12 .ct12_bot{
    padding-top: 9rem;
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.concept .ct12 .ct12_bot .ct12_lt{}


.concept .ct12 .ct12_bot .ct12_lt .ct12_img02{
    padding-top: 8.5rem;
}


.concept .ct12 .ct12_bot .ct12_rt{}

.concept .ct12 .ct12_bot .ct12_rt .ct12_txt{
    width: 100%;
    max-width: 506px;
}

.concept .ct12 .ct12_bot .ct12_rt .ct12_txt p{
    font-size: 16px;
    font-weight: 400;
}
.concept .ct12 .ct12_bot .ct12_rt .ct12_txt p:first-of-type{
    padding-bottom: 2.7rem;
}
@media screen and (max-width: 1740px){
    .concept .ct12 .ct12_top{
        padding: 0 2rem ;
    }
}
@media screen and (max-width: 1200px){
    .concept .ct_top{
        padding: 0 2rem;
    }
    .concept .ct11{
        padding: 6.2rem 2rem 0;
    }
    .concept .ct12{
        background-size: cover;
    }
    .concept .ct12 .ct12_bot{
        padding: 9rem 2rem 0;
    }
}
@media screen and (max-width:1100px){
    .concept .ct12 .ct12_bot .ct12_lt {
    width: 80%;
}
.concept .ct12 .ct12_bot .ct12_rt {
    padding-left: 1rem;
}
}
@media screen and (max-width:1000px){
    .concept .ct11 .ct11_txt {
    padding: 6.5rem 0rem 7rem 0rem;
}
}
@media screen and (max-width: 991px){
   .concept .ct_top .ct_deco01{
    width: 36%;
}
.concept .ct_top .ct_deco01 img{
    width: 60%;
}
    .concept .ct12 .ct12_bot {
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}
.concept .ct12 .ct12_bot .ct12_lt {
    width: 100%;
    margin: 0 auto;
}
.concept .ct12 .ct12_bot .ct12_lt .title{
    margin: 0 auto;
}
.concept .ct12 .ct12_bot .ct12_lt .ct12_img02 {
    text-align: center;
}
.concept .ct12 .ct12_bot .ct12_rt {
    padding-top: 5rem;
}
}
@media screen and (max-width: 840px){
  .concept .ct_top {
    margin: -9rem auto 0;
}
    .concept .ct11 .ct11_txt {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.concept .ct11 .ct11_txt .ct11_lt {
    padding-bottom: 5rem;
}
}
@media screen and (max-width: 768px){
    .concept .ct_top {
    margin: 0rem auto 0;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 2rem;
}
    .concept .ct_top .ct_deco01 {
    display: none;
}
.concept .ct11 .ct11_txt .ct11_lt {
    max-width: 80%;
}
.concept .ct11 .ct11_txt .ct11_rt{
    max-width: 80%;
}
.concept .ct11 .ct11_txt .ct11_rt p:first-of-type {
    margin-left: 26rem;
}
.concept .ct12 {
    padding-bottom: 8rem;
}
.concept .ct12 .ct12_bot .ct12_rt .ct12_txt {
    max-width: 80%;
    margin: 0 auto;
}
}
@media screen and (max-width: 576px){
   .concept .ct11 .ct11_txt .ct11_lt {
    max-width: 90%;
}
.concept .ct11 .ct11_txt .ct11_rt {
    max-width: 90%;
}
    .concept .ct11 .ct11_txt .ct11_rt p:first-of-type {
    margin-left: 9rem;
}
.ct12_bot .ct12_lt .title .title_en h3 {
    font-size: 75px;
}
.concept .ct12 .ct12_bot .ct12_rt .ct12_txt {
    max-width: 90%;
}
}
@media screen and (max-width: 450px){
    .concept .ct11 {
   padding: 3.6rem 2rem 3.8rem;
}
    .concept .ct11 .ct11_txt .ct11_rt p:first-of-type {
    margin-left: 2rem;
}
.ct12_bot .ct12_lt .title .title_en h3 {
    font-size: 55px;
}
}
@media screen and (max-width: 414px){
 .concept .ct11 .ct11_txt {
    padding: 3.5rem 0rem 4rem 0rem;
}
    .concept .ct11 .ct11_txt .ct11_rt p:first-of-type {
    margin-left: 0;
}
.concept .ct11 .ct11_txt .ct11_lt {
    max-width: 95%;
}
.concept .ct11 .ct11_txt .ct11_lt p {
    padding-top: 2rem;
}
.concept .ct11 .ct11_txt .ct11_rt {
    max-width: 95%;    
}
.concept .ct12 .ct12_bot {
    padding: 6rem 2rem 0;
}
.concept .ct12 .ct12_bot .ct12_lt .ct12_img02 {
    padding-top: 5.5rem;
}
.concept .ct12 .ct12_bot .ct12_rt {
    padding-top: 3rem;
}
.concept .ct12 .ct12_bot .ct12_rt {
    padding-left: 0;
}
.concept .ct12 .ct12_bot .ct12_rt .ct12_txt {
    max-width: 100%;
}
}
@media screen and (max-width: 390px){
    .ct12_bot .ct12_lt .title .title_en h3 {
    font-size: 50px;
}
}
@media screen and (max-width: 360px){
    .concept .ct11 .ct11_txt .ct11_rt p:first-of-type:before {  
    width: 85px;
}
.ct12_bot .ct12_lt .title .title_en h3 {
    font-size: 45px;
}
}
@media screen and (max-width:340px){
    .concept .ct11 .ct11_txt .ct11_rt p:first-of-type:before {
    width: 75px;
}
}

/*service*/
.service{}
.service .se_top{
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.service .se_top .title .title_en h3 {
    letter-spacing: 1px;
}
.service .se_top .se_deco01 {
    width: 30%;
}
.service .se_top .se_title{
       text-align: right;
    padding-bottom: 3.5rem;
}
.tabname .no1{
    display: block;
}
.service .se_top .se_title h3{
    font-size: 60px;
    color: #d1bc7a;
    font-family: 'Zilla Slab';
    padding-bottom: 2.5rem;
}
.service .se_top .se_title h2{
    font-size: 32px;
    color: #5f5b56;
    font-weight: 300;

}
.service .se_bot{
    width: 100%;
    margin-bottom: 65rem;
;
}
.tabs {
  width: 100%;
  max-width: 1248px;
  margin: 5.2rem auto 0;
  float: none;
  list-style: none;
  position: relative;
  text-align: right;
  z-index: 1;
}
.tabs .se_deco{
    position: absolute;
    top: 54px;
    left: 0;
}
.tabs ul{
    height: auto;
}
.tabs li {
  display: inline-block;
  text-align: left;
}
.tabs input[type="radio"] {
  position: absolute;
  top: 0;
  left: -9999px;
}
.tabs label {
  display: block;
  margin-left: 1rem;
  padding: 4px 20px 10px 13px;
  background: #d1bc7a;
  border-radius: 20px 20px 0 0;
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  top: 2px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  z-index: 999;
}
.tabs label:hover {
   background: transparent;
}
.tabs label:after{
    content: '';
    border: 1px #5f5b56 solid;
    border-radius: 20px 20px 0 0;
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: .2s all;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 18px;
  padding: 2.5rem 0 0;
  position: absolute;
  top: 53px;
  left: 0;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  background: transparent;
}
.tabs [id^="tab"]:checked + label:after{
    background: transparent;
}
.service [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}


/*se11*/
.se11{
    display: grid;
    grid-auto-flow: column;
}
.se11 .se11_phase1{}
.se11 .se11_phase1 .se11_no, .se11 .se11_phase2 .se11_no, .se11 .se11_phase3 .se11_no{
    margin-bottom: 3rem;
}
.se11 .se11_phase1 .se11_no img{}
.se11 .se11_phase1 ul{}
.se11 .se11_phase1 ul li, .se11 .se11_phase2 ul li, .se11 .se11_phase3 ul li{
    display: flex;
    align-items: stretch;
    margin-bottom: 0.5rem;
    vertical-align: middle;
	justify-content: center;
}
.se11 .se11_phase1 ul li p, .se11 .se11_phase2 ul li p, .se11 .se11_phase3 ul li p{
    width: 20%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.se11 .se11_phase1 ul li p:last-of-type, .se11 .se11_phase2 ul li p:last-of-type, .se11 .se11_phase3 ul li p:last-of-type{
    background: #e3ddd7;
    padding: 1.4rem 5rem;
    width: 60%;    
}



.se12{
    display: grid;
    grid-auto-flow: column;
}
.se12 .se12_phase1{}
.se12 .se12_phase1 .se12_no, .se12 .se12_phase2 .se12_no, .se12 .se12_phase3 .se12_no{
    margin-bottom: 3rem;
}
.se12 .se12_phase1 .se12_no img{}
.se12 .se12_phase1 ul{}
.se12 .se12_phase1 ul li, .se12 .se12_phase2 ul li, .se12 .se12_phase3 ul li{
    display: flex;
    align-items: stretch;
    margin-bottom: 0.5rem;
    vertical-align: middle;
	justify-content: center;
}
.se12 .se12_phase1 ul li p, .se12 .se12_phase2 ul li p, .se12 .se12_phase3 ul li p{
    width: 20%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.se12 .se12_phase1 ul li p:last-of-type, .se12 .se12_phase2 ul li p:last-of-type, .se12 .se12_phase3 ul li p:last-of-type{
    background: #e3ddd7;
    padding: 1.4rem 2rem;
    width: 80%;    
}

@media screen and (max-width: 1200px){
  .service .se_top{
        padding: 0 2rem;
    }
    .service .se_top .se_title h3 {
    font-size: 50px;
}
  .tabs .se_deco {
    width: 50%;
}
}
@media screen and (max-width: 1000px){
  .service .se_top .se_title h3 {
    font-size: 40px;
}
.service .se_bot {
    margin-bottom: 125rem;
}

.se12 .se12_phase3 ul li:last-of-type p:nth-of-type(2), .se12 .se12_phase3 ul li:last-of-type p:nth-of-type(3) {
    padding: 1.4rem 6.1rem;
}
}
@media screen and (max-width:991px){
 .service .se_top {
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
.service .se_top .se_title{
    padding-top: 5rem;
    text-align: center;
}
  .service .se_bot {
    margin-bottom: 135rem;
}
    .service .se_top .se_title h3 {
    font-size: 40px;
}
}
@media screen and (max-width: 834px){
 

.service .se_bot {
    margin-bottom: 145rem;
}

.service .se_top .se_title h3 {
    font-size: 50px;
}
    .tabs .se_deco {
    width: 38%;
}
}
@media screen and (max-width: 768px){

 
.service .se_top .se_deco01 {
    display: none;
}
  .tabs .se_deco {
    width: 32%;
}
    .se11 {
    grid-auto-flow: initial;
    padding: 0 2rem 0 10rem;
}
.se11 .se11_phase1, .se11 .se11_phase2, .se11 .se11_phase3 {
    margin-bottom: 5rem;
}
    .se12 {
    grid-auto-flow: initial;
    padding: 0 2rem 0 10rem;
}
.se12 .se12_phase1, .se12 .se12_phase2, .se12 .se12_phase3 {
    margin-bottom: 5rem;
}
}
@media screen and (max-width: 576px){
   .service .se_top {
    padding: 0 2rem;
}
.service .se_bot {
    margin-bottom: 160rem;
}
    .tabs .se_deco{
        display: none;
    }
    .tabs {
    text-align: center;
}

}
@media screen and (max-width: 450px){
 .service .se_top {
    margin: 1rem auto 0;
}
 .service .se_bot {
    margin-bottom: 160rem;
}
 .service .se_top .se_title {
    margin-top: 2rem;
}
.service .se_top .se_title h3 {
    font-size: 35px;
}
   .se11 {
    padding: 0 2rem 0 3rem;
}
.se12 {
    padding: 0 2rem 0 3rem;
}
    .tabs label {
    font-size: 18px;
}
.tabs .tab-content {
    padding: 3.5rem 0 0;
}

}
@media screen and (max-width: 414px){
 .service .se_bot {
    margin-bottom: 140rem;
}
.tabs .tab-content{
    font-size: 16px;
}
.se11 .se11_phase1 ul li p:last-of-type, .se11 .se11_phase2 ul li p:last-of-type, .se11 .se11_phase3 ul li p:last-of-type {
    width: 81%;
}
.se12 .se12_phase1 ul li p:last-of-type, .se12 .se12_phase2 ul li p:last-of-type, .se12 .se12_phase3 ul li p:last-of-type {
    width: 81%;
}

}
@media screen and (max-width: 390px){
   .service .se_top .se_title h3 {
    font-size: 30px;
}
    .tabs label {
    font-size: 16px;
}
.tabs .tab-content {
    font-size: 15px;
}

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

    .tabs label {
    padding: 4px 9px 10px 4px;
}
.tabs .tab-content {
    font-size: 14px;
}

}
@media screen and (max-width:350px){
.tabs .tab-content {
    font-size: 12px;
}

}
@media screen and (max-width:340px){
   
.service .se_bot {
    margin-bottom: 120rem;
}
   .tabs label {
    padding: 2px 9px 10px 1px;
}
    

}
@media screen and (max-width:330px){
   .service .se_top .se_title h3 {
    font-size: 28px;
}

}


/***news*************************************************************************************************/
.news {
    
}
.news .news_top{
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
        display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}


.news .news_top .news_title{
    text-align: right;
}
.news .news_top .news_title h3{
    font-size: 60px;
    color: #d1bc7a;
    font-family: 'Zilla Slab';
    padding-bottom: 2.5rem;
}
.news .news_top .news_title h2{
    font-size: 32px;
    color: #5f5b56;
    font-weight: 300;

}

.news_deco{
    text-align: left;
    margin-bottom: 6rem;
}
.newslist {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    text-align: center;
    padding: 7rem 0;
    font-size: 16px;
    font-family: 'Noto Sans TC';
}

.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: 2em 1em 1em;
}

.newslist_rwd a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
    text-align: center;
}

/*npic*/
.npic {
    position: relative;
    width: 300px;
    min-height: 400px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 1.7rem;
}
.npic:before{
    content: '';
    border: 1px #5f5b56 solid;
    width: 300px;
    max-width: 100%;
    min-height: 400px;
    position: absolute;
    top: 1rem;
    left: 1rem;
    pointer-events: none;
    z-index: 1;
}
.npicimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
}
.npicimg img{
    border-radius: 50%;
}
.newslist_rwd a:hover .npic {
    transform: translateY(-5px);
}

/*ntitle*/
.ntitle {
    text-align: center;
    position: relative;
    margin: 1em 0 .5em 0;
    width: 100%;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

.inews .ntitle p {
    font-size: 22px;
    color: #3d6680;
    font-family: 'Noto Sans TC';
    font-weight: bold;
}

.ntitle p {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #000;
    font-size: 24px;
    color: #606060;
    font-family: 'Noto Sans TC';
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.3;
}

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

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

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

.ntitle b {
    color: #adadad;
    font-weight: 500;
    font-size: 12px;
    padding: 0;
}

.newslist_rwd a:hover .ntitle span {
    color: #d0771c;
}

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

.page_num a {
    display: inline-block;
}

.inews .page_num {
    display: none;
}


/*--------------------------------------------------*/

/***newslist_rwd2***/
.newslist_rwd2 {
    padding-bottom: 1em;
    text-align: left;
    padding: 2em 1em 1em;
}

.newslist_rwd2 a {
    position: relative;
    transition: .3s ease all;
    line-height: 1.5;
    color: #000;
    text-align: center;
}

/*npic2*/
.npic2 {
    position: relative;
    width: 350px;
    min-height: 250px;
    transition: .3s ease all;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 1.7rem;
}
.npic2:before{
    content: '';
    border: 1px #5f5b56 solid;
    width: 350px;
    max-width: 100%;
    min-height: 250px;
    position: absolute;
    top: 1rem;
    left: 1rem;
    pointer-events: none;
    z-index: 1;
}


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


@media screen and (max-width: 1300px){
   .news {
    padding: 0 2rem 5rem;
}
}
@media screen and (max-width: 1200px){
    .news .news_top{
        padding: 0 2rem;
    }
    .news .news_top .news_title h3 {
    font-size: 45px;
}
}
@media(max-width:1080px) {
   
}
@media screen and (max-width: 991px){
  .news .news_top {
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.news .news_top .news_title {
    text-align: center;
    margin-top: 6rem;
}
}
@media screen and (max-width: 840px){
  .news .news_top {
    margin: -9rem auto 0;
}
}

@media screen and (max-width: 768px){
    .news .news_top {
    margin: 0rem auto 0;
}
}
@media screen and (max-width: 650px){
   
   
}
@media(max-width:600px) {
   

    .newslist_rwd {
        text-align: left;
        padding: 0em .5em 4em;
    }

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

}
@media(max-width:500px) {
   
.newslist {
    padding: 1rem 0;
}
   
    .ntitle p {
        font-size: 16px;
    }

    .ntitle {
        margin: .2em 0;
    }
}
@media screen and (max-width:450px){
    .news .news_top .news_title {
    margin-top: 4rem;
}
}

@media screen and (max-width: 390px){    
.news {
    padding: 0 1rem 1rem;
}
.newslist_rwd2 {
    padding: 2em 0em 1em;
}
.newslist_rwd2 a {
    text-align: left;
}
}
@media(max-width:360px) {
.newslist_rwd2 a {
  padding-left: 1rem;
}
.npic2{
max-width: 90%;
min-height: 210px;	
}
.npic2:before{
min-height: 210px;		
}
}
@media screen and (max-width: 330px){
.newslist_rwd {
    text-align: left;
    padding: 0em 2rem 4em;
}
.newslist_rwd a {
    text-align: left;
}
.npic {
    width: 250px;
    min-height: 350px;
}
.npic:before{
	width: 250px;
    min-height: 350px;
	}
.newslist_rwd2 {
    padding: 1em 0em 1em;
}
.npic2 {
    min-height: 170px;
}
.npic2:before {
    min-height: 170px;
}
}
@media screen and (max-width:300px){
	.newslist_rwd {
    padding: 0em 1rem 4em;
}
	}

/*---press------------------------------------------------*/
.news .press_top{
    width: 100%;
    max-width: 1248px;
    margin: -4rem auto 0;
        display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.news .press_top .press_deco01{
    width: 30%;
}

@media screen and (max-width: 1200px){
    .news .press_top{
        padding: 0 2rem;
    }
}

@media screen and (max-width: 991px){
   .news .press_top .press_deco01{
    width: 36%;
}
}

@media screen and (max-width: 840px){
  .news .press_top {
    margin: -9rem auto 0;
}
}

@media screen and (max-width: 768px){
    .news .press_top {
    margin: 0rem auto 0;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 2rem;
}
    .news .press_top .press_deco01 {
    display: none;
}
}