@charset "utf-8";
.header{background: white; position: relative; z-index: 2;}
.pc-header .top{padding: 20px 0}
.pc-header .logo img{width: 174px; height: auto; display: block;}
.pc-header .form{width: 280px;height: 35px;border: 2px solid var(--red);border-radius: 10px;}
.pc-header .form .input, .pc-header .form .btn{background: none; border: 0 none; height: 38px; line-height: 38px; font-size: 14px;}
.pc-header .form .input{padding: 0 15px; width: 100%}
.pc-header .form .btn{width: 38px; background: url(../img/icon-search.png) no-repeat center; flex-shrink: 0; cursor: pointer;}
.pc-header .nav-wrap{background: var(--red); padding-top: 2px}
.pc-header .top-nav{position: relative; transition: all 300ms}
.pc-header .top-nav>a{position: relative; color: white; height: 53px; line-height: 53px; display: block; padding: 0 5px; white-space: nowrap;}
.pc-header .top-nav.on, .pc-header .top-nav:hover{background: #fff5ec;}
.pc-header .top-nav.on>a, .pc-header .top-nav:hover>a{color: var(--red);}
.pc-header .top-nav>a .arrow{position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.pc-header .top-nav>a .arrow::before, .pc-header .top-nav>a .arrow::after{content: ' '; display: block; position: absolute; top: 0; width: 2px; height: 6px; background: #262626; transition: all .25s ease-out;}
.pc-header .top-nav>a .arrow::before{right: 0; transform: rotate(-45deg); background: rgb(165, 165, 165);}
.pc-header .top-nav>a .arrow::after{right: -4px; transform: rotate(-135deg); background: rgb(165, 165, 165);}
.pc-header .top-nav:hover>a .arrow::before,.pc-header .top-nav:hover>a .arrow::after{background: var(--red);}
.pc-header .top-nav:hover>a .arrow::before{right: -4px;}
.pc-header .top-nav:hover>a .arrow::after{right: 0;}
.pc-header .top-nav.on>a .arrow::before,.pc-header .top-nav.on>a .arrow::after{background: var(--red);}
.pc-header .sub-nav{left: 50%; position: absolute; transform: translateX(-50%); background: white; border-radius: 5px; height: 0; display: flex; transition: all 300ms; overflow: hidden;}
.pc-header .top-nav:hover .sub-nav{height: 40px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1);}
.pc-header .sub-nav a{display: block; height: 34px; line-height: 34px; white-space: nowrap; padding: 0 15px; position: relative; font-size: 14px;}
.pc-header .head-info #date{font-size: 16px; margin-top: 10px;float:left;}
.pc-header .head-info .language{font-size: 16px; margin-top: 10px;float:right;}

.mobile-top-wrap{display: none; height: 50px;}
.mobile-top{height: 50px; background-color: var(--red); padding: 0 15px; position: fixed; left: 0; width: 100%; top: 0; z-index: 9;}
.mobile-top .mobile-logo{width: 100px; transition: all 300ms;}
.mobile-top.show-nav .mobile-logo{transform: translateX(-300px);}
.mobile-top .mobile-logo img{display: block; width: 100%; height: auto;}
.mobile-top .right{transition: all 300ms;}
.mobile-top.show-nav .right{transform: translateX(-272px);}
.mobile-top .mobile-search{width: 22px; height: 22px; background: url(../img/icon-search2.png) no-repeat center/100%;}
.mobile-top.show-nav .mobile-search{display: none;}
.mobile-top .nav-btn{width:22px; height:22px; overflow:hidden; position:relative; margin-left: 25px;}
.mobile-top .nav-btn span{width:100%; left:0; background:#D8D8D8; height:2px; position:absolute; transition:all 500ms;}
.mobile-top .nav-btn .line1{top:0; transform:rotate(0); transform-origin:left top;}
.mobile-top .nav-btn .line2{top:10px;}
.mobile-top .nav-btn .line3{bottom:0; transform:rotate(0); transform-origin:left bottom;}
.mobile-top .nav-btn.on .line1{width:145px; transform:rotate(41deg);}
.mobile-top .nav-btn.on .line2{left:-100%;}
.mobile-top .nav-btn.on .line3{width:145px; transform:rotate(-41deg);}
.mobile-nav{position: fixed; right: -272px; top: 0; bottom: 0; overflow-y: auto; z-index: 10; background-color: #000; width: 272px; transition: all 300ms;}
.mobile-nav.show{right: 0;}
.mobile-nav li>a{display: block; color: white; height: 50px; line-height: 50px; border-bottom: 1px solid #4e0604; padding-left: 50px; position: relative;}
.mobile-nav li .sub-nav a{height: 40px; line-height: 40px; padding-left: 80px; color: white; display: block;}

.index-title{margin-bottom: 15px;}
.index-title .t{margin: 0 8px; font-size: 26px; color: #363636; line-height: 1.1; cursor: default;}
.index-title .line{height: 6px; background-color: #f0f0f0; transform: translateY(24px);}

.common-list1{display: flex; flex-wrap: wrap;}
.common-list1 li{margin-right: 20px; width: 435px; margin-bottom: 30px}
.common-list1 li:nth-child(2n){margin-right: 0}
.common-list1 .img{width: 100%; height: 245px; display: block; margin-bottom: 8px; overflow: hidden;}
.common-list1 .img img{display: block; transition: all 300ms; width: 100%; height: 100%; object-fit: cover;}
.common-list1 .img img:hover{transform: scale(1.1);}
.common-list1 .tit{height: 56px; line-height: 28px; margin-bottom: 8px}
.common-list1 .btm{font-size: 13px}
.common-list1 .btm .label{background-color: #f1e5e5; padding: 4px 9px; border-radius: 99px 99px 99px 0; margin-right: 6px;}

.common-list1-with-desc{display: flex; flex-wrap: wrap;}
.common-list1-with-desc li{margin-right: 20px; width: 435px; margin-bottom: 30px}
.common-list1-with-desc li:nth-child(2n){margin-right: 0}
.common-list1-with-desc .img{width: 100%; height: 245px; display: block; margin-bottom: 8px; overflow: hidden; position: relative;}
.common-list1-with-desc .img .tit{position: absolute; left: 0; right: 0; bottom: 0; padding: 15px; background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));}
.common-list1-with-desc .img .tit span{height: 56px; color: white; line-height: 28px; transition: color 300ms}
.common-list1-with-desc .img:hover .tit span{color: var(--red);}

.common-list1-with-desc .img img{display: block; transition: all 300ms; width: 100%; height: 100%; object-fit: cover;}
.common-list1-with-desc .img img:hover{transform: scale(1.1);}
.common-list1-with-desc .desc{height: 56px; line-height: 28px; margin-bottom: 8px; font-size: 15px;}
.common-list1-with-desc .btm{font-size: 13px}
.common-list1-with-desc .btm .label{background-color: #f1e5e5; padding: 4px 9px; border-radius: 99px 99px 99px 0; margin-right: 6px;}

.common-list2 li{position: relative; margin-bottom: 15px;}
.common-list2 li:last-child{margin-bottom: 0}
.common-list2 .img{width: 232px; height: 145px; flex-shrink: 0; margin-right: 12px; overflow: hidden;}
.common-list2 .img img{display: block; width: 100%; height: 100%; object-fit: cover; transition: all 300ms}
.common-list2 .btn{position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; transition: all 300ms}
.common-list2 li:hover .img img{opacity: .8}
.common-list2 li:hover .btn{transform: rotate(180deg);}
.common-list2 li:hover .tit{color: var(--red);}
.common-list2 .tit{height: 56px; line-height: 28px; margin-bottom: 8px; font-size: 16px; color: #262626}
.common-list2.common-list2-with-desc .tit{font-size: 20px;}
.common-list2 .desc{font-size: 14px; color: #5f5f5f; height: 36px; line-height: 18px; margin-bottom: 20px;}
.common-list2 .btm{font-size: 13px}
.common-list2 .btm .label{background-color: #f1e5e5; padding: 4px 9px; border-radius: 99px 99px 99px 0; margin-right: 6px;}

.pagination{display: flex; align-items: center; justify-content: center; margin-top: 35px; flex-wrap: wrap;}
.pagination a, .pagination span{padding:9px 14px; font-size: 14px; margin-left: 10px; border-radius: 0; margin-bottom: 10px;color:#808080;}
.pagination a, .pagination .dot{border: 1px solid #e0e0e0}
.pagination a:hover, .pagination .current{background-color: var(--red); color: #fff !important; border-color: var(--red)}

.footer{background: #40434A; padding: 20px 0; margin-top: 50px; text-align: center; position: relative;}
.footer .logo{position: absolute; height: 50px; left: 10%; top: 50%; transform: translateY(-50%);}
.footer .brand-slogan{font-family: 'Noto Serif TC', serif; font-size: 32px; color: white; line-height: 1}
.footer .footer-navigation{padding: 15px 0 10px; display: flex; align-items: center; justify-content: center; font-size: 16px;}
.footer .footer-navigation a{color: white;}
.footer .footer-navigation a:hover{text-decoration: underline;}
.footer .footer-navigation i{margin: 0 20px; height: 16px; width: 1px; flex-shrink: 0; background-color: #78787a}
.footer p{color: #78787a; font-size: 14px; margin-top: 5px;}
.footer p a{color: #78787a;}
.footer p a:hover{color: var(--red);}

.caijing-title{line-height: 1; padding-bottom: 9px; border-bottom: 1px solid #e0e0e0; margin-bottom: 15px;}
.caijing-title .t{color: var(--red); font-weight: bold; font-size: 20px;}
.caijing-title img{position: relative; top: 3px}

.common-title1{line-height: 1; margin-bottom: 25px; margin-top: 55px; position: relative;}
.common-title1::after{content: ' '; left: 0; right: 0; bottom: 0; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; height: 7px; position: absolute;}
.common-title1 .t{font-size: 29px; color: #363636; position: relative; background: white; position: relative; z-index: 1; padding-right: 5px;}
.common-title1 img{position: relative; top: -3px;}

.common-list3{display: flex; justify-content: space-between;}
.common-list3 li{width: 627px; height: 353px; position: relative; overflow: hidden;}
.common-list3 .img, .common-list3 .img img{width: 100%; height: 100%; object-fit: cover; transition: all 300ms; display: block;}
.common-list3 li:hover .img img{transform: scale(1.1);}
.common-list3 .absolute{position: absolute; width: 100%; left: 0; bottom: 0; padding: 18px 22px; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));}
.common-list3 .tit{font-size: 25px; color: white; margin-bottom: 18px;}
.common-list3 .btm{font-size: 13px; color: white;}
.common-list3 .btm .label{background-color: #f1e5e5; color: #262626; padding: 4px 9px; border-radius: 99px 99px 99px 0; margin-right: 6px;}

.common-list4 li{margin-bottom: 30px;}
.common-list4 .img-wrap{width: 100%; height: 183px; display: block; margin-bottom: 10px; position: relative; overflow: hidden;}
.common-list4 .img-wrap .img{display: block; width: 100%; height: 100%; object-fit: cover; transition: all 300ms;}
.common-list4 li:hover .img-wrap .img{transform: scale(1.1);}
.common-list4 .btn{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.common-list4 .tit{font-size: 18px; color: #000}

.common-list5 li{margin-bottom: 30px;}
.common-list5 a{font-size: 16px;}

.breadcrumb{margin-top: 20px; font-size: 14px}
.breadcrumb i{font-style: normal; margin: 0 5px}

@media (max-width: 1299px) {
	.pc-header .top-nav>a{padding: 0 15px}
	.pc-header .top-nav>a .arrow{right: 5px}
	.footer .footer-navigation i{margin: 0 10px;}
	.footer .logo{height: 40px; left: 5%;}
}
@media (max-width: 991px) {
	.pc-header .top-nav>a{padding: 0 5px}
	.pc-header .top-nav>a .arrow{right: 0}
	.footer .footer-navigation i{margin: 0 5px;}
	.footer .logo{height: 30px; left: 15px;}
}
@media (max-width: 767px) {
    .header{background: none}
	.pc-header{display: none !important}
    .mobile-top-wrap{display: block;}
	.pagination a, .pagination span{padding: 5px 10px;}
	.footer .logo{position: static; display: block; margin: 30px auto 0; height: 20vw}
	.footer .brand-slogan{font-size: 18px;}
	.footer .footer-navigation{flex-wrap: wrap; padding-top: 15px}
	.footer .footer-navigation a{white-space: nowrap; margin-top: 15px}
	.footer .footer-navigation i{margin-top: 15px}
	.common-title1{margin-top: 30px;}
	.common-title1 .t{font-size: 24px;}
	.common-list4 .tit{font-size: 16px}
	.common-list4 li{margin-bottom: 20px;}
	.common-list4 .img-wrap{height: 40vw;}
}
@media (min-width: 768px){
.switch-view {display: none !important;}
}