/* CSS Document */
body {	
    margin:0;
    font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4, Arial, sans-serif; 
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    font-size: 16px;
    color: #000;
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}
@media only screen and (max-width: 767px) {
    body{
        font-size: 14px;
    }  
}
a { text-decoration:none; 
    transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-ms-transition: 0.3s all;
    color: #000;
}
a:hover { text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}


*:after {
	content: "";
    display: block;
    clear: both;
	font-size:0;
}

span:after,
strong:after{
    content: none;
}

input,button,select,textarea{outline:none}
 *:focus { outline: none; }

img {max-width:100%;height: auto; vertical-align: bottom; border: 0;}
img.absolute{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: top;
}
.container{
    width: 1300px;
    max-width: 90%;
    margin: auto;
    position: relative;
}
form{
    width: 100%;
    margin: 0;
    padding: 0;
}
input[type=text], 
input[type=button], 
input[type=submit], 
input[type=password], 
input[type=email], 
input[type=file], 
input[type=reset], 
input[type=tel], 
input[type=search],
input[type=date], 
textarea, 
select, 
button{
    -webkit-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #5f2726;
    padding: 7px;
    font-family:Arial,sans-serif,\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4; 
    font-size: 16px;  
    background: rgba(255,255,255,.8);
}
input[type=text], 
input[type=password], 
input[type=email], 
input[type=file], 
input[type=tel], 
input[type=search],
input[type=date], 
textarea, 
select{
    flex: 1;
}
textarea{
    height: 150px;
}
input[type=button], 
input[type=submit], 
input[type=reset],
button{
    cursor: pointer;
    transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-ms-transition: 0.3s all;
    background: #5f2726;
    color: #fff;
}
input[type=button]:hover, 
input[type=submit]:hover, 
input[type=reset]:hover{
    background: rgba(255,255,255,.8);
    color: #5f2726;
}
select {
    background-image: url(../images/arrow.png);
    background-position:right 10px center;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 9px;
    padding-right: 30px;
}

select::-ms-expand {
    display: none;
}
@media only screen and (max-width: 767px) {
    input[type=text],
    input[type=password], 
    input[type=email], 
    input[type=file], 
    input[type=tel], 
    input[type=search],
    input[type=date], 
    textarea, 
    select{
        flex: none;
        width: 100%;
        margin-top: 5px;
    }
}

.owl-theme .owl-nav.disabled+.owl-dots{
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background: #dc5519;
}

/*webkit瀏覽器專用*/
::-webkit-input-placeholder { color: #000; }
/*Firefox 4-18瀏覽器專用*/
input::-moz-placeholder { color: #000; }
/*Firefox 19+瀏覽器專用*/
input::-moz-placeholder{color: #000;}
/*IE10瀏覽器專用*/
:-ms-input-placeholder{color: #000;}

.block{
    display: block;
}
.none{
    display: none;
}
@media only screen and (max-width: 767px) {
    .block{
        display: none;
    }
    .none{
        display: block;
    }
}

.edit *:after{
    content: none;
}
.edit{
    line-height:36px;
    width: 100%;
    float: left;
}
.edit p{
    padding: 10px 0;
    text-align:justify;
    text-justify: distribute;
}
.edit ul,
.edit ol{
    display: list-item;
    width: calc(100% - 25px);
    margin-left: 25px;
}
.edit ul li{
    list-style: decimal;
}
.edit ol li{
    list-style: disc;
}
@media only screen and (max-width: 767px) {
    .edit{
        line-height:28px; 
    }
}
section{
    width: 100%;
    float: left;
    position: relative;
}
header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: right;
    padding: 30px 5% 0 0;    
}
header>img{
    height: 60px;
}

.main header{
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    border-bottom: 1px solid #222;
}
.main header:after{
    content: none;
}
.main header img{
    height: 60px;
}
@media only screen and (max-width: 1100px) {
    header{
        padding: 20px 5% 0 0;
    }
    header>img{
        height: 40px;
    }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
    header{
        padding: 12px 5% 0 0;        
    }
    .main header{
        border-color: #c3c2c3;
    }
    header>img,
    .main header img{
        height: 30px;
    }
}
nav>a{
    display: block;
    padding: 0 10px;
    width: 50px;
    position: relative;
}
nav>a.off{
    margin-left: 180px;
}
nav>a em{
    background: #dc5519;
    display: block;
    width: 100%;
    height: 2px;
    margin: 3px 0;
    float: right;
    border-radius: 3px;
}
nav>a.off em:first-child{
    position: absolute;
    top: 0;
    left: 33px;
    width:28px;
    -webkit-transform: translateX(-10px) translateY(6px) rotate(45deg);
    -moz-transform: translateX(-10px) translateY(6px) rotate(45deg);
    -ms-transform: translateX(-10px) translateY(6px) rotate(45deg);
    -o-transform: translateX(-10px) translateY(6px) rotate(45deg);
    transform: translateX(-10px) translateY(6px) rotate(45deg);
    background: #222;
}
nav>a.off em:nth-child(2){
    position: absolute;
    top: 0;
    right: 0;
    width:28px;
    -webkit-transform: translateX(0) translateY(6px) rotate(-45deg);
    -moz-transform: translateX(0) translateY(6px) rotate(-45deg);
    -ms-transform: translateX(0) translateY(6px) rotate(-45deg);
    -o-transform: translateX(0) translateY(6px) rotate(-45deg);
    transform: translateX(0) translateY(6px) rotate(-45deg);
    background: #222;
}
nav>a.off em:last-child{
    height: auto;
    margin-top: 20px;
    content: none;
}
nav>ul{
    position: absolute;
    width: 250px;
    top: 0;
    bottom: 0;
    left: -270px;
    height: 100%;
    z-index: 99999;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    text-align: center;
    font-family: 'Noto Serif TC', serif;
    transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-ms-transition: 0.3s all;
    display: none;
}
nav>ul.off{
    left: 0;
}
nav>ul p{
    display: block;
    width: 100%;    
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}
nav>ul>li{
    width: 100%;
    float: left;    
    font-size: 22px;    
    border-bottom: 1px solid #ddd;
}
nav>ul>li a{
    display: block;
    padding: 15px 0;
}
nav>ul>li a:hover{
    background: #dc5519;
    color: #fff;
}
nav>ul>li ul{
    width: 100%;
    float: left;
    background: #f5f5f5;
}
nav>ul>li ul li{
    font-size: 20px;    
}
@media only screen and (max-width: 1279px) {
    nav>a.off{
        margin-left: 200px;
    }
}
@media only screen and (max-width: 767px) {
    nav>a.off{
        margin-left: 0;
    }
    nav>ul>li{
        font-size: 18px;
    }
    nav>ul>li ul li{
        font-size: 16px;
    }
    nav>ul{
        width: 100%;
        top: 61px;
        bottom: auto;
        left: 0;
        height: auto;
        box-shadow: 0 0 0 rgba(0,0,0,0);
        background: rgba(220,85,25,.95);
    }
    nav>ul>li,
    nav>ul p{
        border-color: #ed7742;
    }
    nav>ul>li a,
    nav>ul p{
        color: #fff;
    }
    nav>ul>li ul{
        background: rgba(0,0,0,.25);
    }
    nav>ul>li ul li{
        border-bottom: 1px solid #c17d5e;
    }
    nav>ul>li ul a{
        padding: 10px 0;
    }
    nav>a.off em:first-child{
        left: 22px;
    }
    nav>a.off em:nth-child(2){
        right: 11px;
    }
}

/* CSS Document */
a.tel, a.tel:hover { pointer-events: none; text-decoration:none !important; }
@media print, screen and (max-width: 999px){
a.tel, a.tel:hover { pointer-events: initial; }
}

/* Button Up */

.btn-up {
	width: 40px;
	height: 40px;

	position: fixed;
	z-index: 9999;
	bottom: 30px;
	right: 10px;
	background-color: rgba(52,56,59,0.3);
	border-radius: 100%;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
	opacity: 0;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.btn-up:before {
	content: "︿";
    font-weight: 600;
	display: inline-block;
	vertical-align: middle;
    font-size: 16px;
	color: #fff;
    margin-top: -5px;
}

.btn-up.active {
	opacity: 1;
}

/* 嵌入字型設定 */
@font-face {
    font-family: "NotoSerifTCSB";
	src: url('NotoSerifTCSB.eot'); /* IE9 Compatibility mode */
    src: url('NotoSerifTCSB.eot?#iefix') format('embedded-opentype'),
         url('NotoSerifTCSB.woff') format('woff'), /* Modern Browsers */
         url('NotoSerifTCSB.ttf') format('truetype'), /* Safari, Android, iOS */
         url('NotoSerifTCSB.svg#hank') format('svg'), /* Legacy iOS */
         url('NotoSerifTCSB.otf') format('opentype');
}
@font-face {
    font-family: "NotoSerifTCEL";
	src: url('NotoSerifTCEL.eot'); /* IE9 Compatibility mode */
    src: url('NotoSerifTCEL.eot?#iefix') format('embedded-opentype'),
         url('NotoSerifTCEL.woff') format('woff'), /* Modern Browsers */
         url('NotoSerifTCEL.ttf') format('truetype'), /* Safari, Android, iOS */
         url('NotoSerifTCEL.svg#hank') format('svg'), /* Legacy iOS */
         url('NotoSerifTCEL.otf') format('opentype');
}


main,
.in2,
.in2.a li,
.in2.a li a,
.in2 ul,
.in3{
    width: 100%;
    float: left;
}
h2{
    font-family: 'Noto Serif TC', serif;
    font-weight: 400;
    font-size: 50px;
}
h3{
    font-family: 'NotoSerifTCEL', serif;
    font-weight: 400;
    font-size: 32px;
}
@media screen and (max-width: 1199px) {
    h2{
        font-size: 40px;
    }
    h3{
        font-size: 22px;
    }
}
@media screen and (max-width: 767px) {
    h2{
        font-size: 32px;
    }
}
@media screen and (max-width: 500px) {
    h2{
        font-size: 26px;
    }
    h3{
        font-size: 18px;
    }
}
@media screen and (max-width: 360px) {
    h2{
        font-size: 22px;
    }
    h3{
        font-size: 14px;
    }
}
.in1{
    background: url(../images/in-bg1.svg) top 120px right no-repeat #dc5519;
    background-size: cover;
    height: 100vh;
}

.in1>div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.in1>div img{
    margin-top: 5%;
    width: 850px;
    padding: 0 5%;
}
@media only screen and (max-width: 1100px) {
    .in1{
        background-position: top 80px right;
    }
    .in1>div img{
        width: 750px;
    }
}
@media screen and (max-width: 1099px) and (max-height: 1399px) {
    .in1{
        height: 800px;
    }
}
@media screen and (max-width: 767px) {
    .in1{
        height: 600px;
    }
    .in1>div img{
        width: 550px;
        padding: 0 10%;
    }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
    .in1{
        height: 600px;
    }
    .in1>div img{
        width: 550px;
    }
}
@media screen and (max-width: 767px) and (orientation: landscape) {
    .in1{
        height: 100vh;
    }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
    header{
        padding: 12px 5% 0 0;
    }
    .in1{
        background-position: top 50px right;
        height: 350px;
    }
}
@media screen and (max-width: 500px) and (orientation: portrait) {    
    .in1{
        height: 250px;
        background-size: 750px;
    }
}
.in2{
    padding: 80px 5%;
}
.in2 ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 160px 0 80px;
}
.in2 li{
    width: 20%;
    padding: 15px;
}
.in2 li a{
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}
.in2 li a img{
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.in2 li a:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}
.in2 li a div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.6);
    font-size: 30px;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    text-align: center;
}
.in2 li a:hover div{
    opacity: 0;
}
.in2 li a div p{
    transform: scale(.9,1);
    color: #fff;
    font-weight: bold;
}
@media screen and (max-width: 1199px) {
    .in2 li a div{
        font-size: 22px;
    }
    .in2 ul{
        padding: 80px 0;
    }
}
@media screen and (max-width: 767px) {
    .in2{
        display: flex;
        justify-content: space-between;
    }    
    .in2 ul{
        padding: 5px 0 0;
        width: 60%;
    }
    .in2 li{
        width: 50%;
        padding: 5px;
    }
    .in2>div{
        flex: 1;
    }
}
@media screen and (max-width: 767px) {
    .in2 li a div{
        font-size: 16px;
    }
    .in2{
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 500px) {
    .in2{
        padding: 40px 5%;
    }
}
@media screen and (max-width: 350px) {
    .in2 li a div{
        font-size: 13px;
    }
}
.in2.a{
    background: url(../images/in-bg2.svg) top left no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 80px 0;
}
.in2.a>div{
    padding-left: 5%;
}
.in2.a:after{
    content: none;
}
.in2.a ul{
    width: 100%;
    padding: 80px 0 0;
    display: block;
}
.in2.a li{
    padding: 0;
}
.in2.a li a{
    display: flex;
    align-items: center;
    font-size: 24px;
    padding: 10px 0;
    transform: scale(.9,1);
    border-radius: 0;
}
.in2.a li span{
    color: #dc5519;
    margin-right: 15px;
}
.in2.a li p{
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    flex: 1;
    transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-ms-transition: 0.3s all;
}
.in2.a li a:hover p{
    color: #dc5519;
}
@media only screen and (max-width: 1680px) {
    .in2.a{
        background-position: top left -400px;
    }
}
@media only screen and (max-width: 1380px) {
    .in2.a>img{
        width: 50%;
    }
}
@media only screen and (max-width: 1100px) {
    .in2.a{
        background-position: top left -100px;
        padding: 40px 0;
    }
    .in2.a li a{
        font-size: 20px;
    }
}
@media only screen and (max-width: 500px) {
    .in2.a{
        background-position: top -50px left;
    }
    .in2.a li a{
        font-size: 18px;
        align-items: flex-start;
    }
    .in2.a ul{
        padding: 50px 0 0;
    }
    .in2.a li p{
        -webkit-line-clamp: 2;
    }
}
@media screen and (max-width: 360px) {
    .in2.a li a{
        font-size: 15px;
    }
}
.in2.b{
    background: url(../images/in-bg3.svg) top right no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 767px) {
    .in2.b{
        background: url(../images/in-bg3s.svg) top right no-repeat;
        background-size:100%;
    }
}
.in2.c{
    background: url(../images/in-bg4.svg) top left no-repeat;
    background-size: 100%;
    padding: 140px 5%;
}
@media only screen and (max-width: 767px) {
    .in2.c{
        background: url(../images/in-bg4s.svg) top right no-repeat;
        background-size:100%;
        padding: 70px 5%;
    }
}
.in2.d{
    padding: 0;
}
.in2.e ul{
    padding: 120px 0;
}
@media only screen and (max-width: 767px) {
    .in2.e ul{
        padding: 5px 0 0;
        justify-content: flex-start;
    }
}
.in2.f{
    background: url(../images/in-bg5.svg) top left no-repeat;
    background-size: 100%;
    padding: 80px 5% 100px;
}
.in2.f ul{
    padding: 120px 0 80px;
}
@media only screen and (max-width: 767px) {
    .in2.f{
        background: url(../images/in-bg5s.svg) top right no-repeat;
        background-size:100%;
        padding: 40px 5%;
    }
    .in2.f ul{
        padding: 5px 0 0;
    }
}
.in3{
    display: flex;
    justify-content: space-between;
    background: url(../images/in-bg6.svg) top left no-repeat;
    background-size: 100%;
    padding: 80px 5%;
}
.in3:after{
    content: none;
}
.in3 .info{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    font-size: 24px;
    padding-top: 5px;
}
.in3 .info>div{
    width: 33.33%;
}
.in3 .info ul{
    padding-bottom: 60px;
}
.in3 .info ul li{
    padding: 5px 0;
}
.in3 .info ul li:first-child{
    color: #dc5519;
}
@media only screen and (max-width: 1100px) {
    .in3 .info{
        font-size: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .in3{
        flex-wrap: wrap;
    }
    .in3 .info{
        width: 100%;
    }
    .in3 .info>div{
        margin: 0;
        padding: 20px;
        width: 33.33%
    }
}
@media only screen and (max-width: 767px) {
    .in3{
        background: url(../images/in-bg6s.svg) top right no-repeat;
        background-size:100%;
        padding: 40px 5%;
        flex-wrap: wrap;
    }    
    .in3 .info{
        font-size: 14px;
    }
    .in3 .info ul{
        padding-bottom: 30px;
    }
    .in3 .info ul li{
        padding: 2px 0;
    }
}
footer{
    width: 100%;
    float: left;
    background: url(../images/in-bg7.svg) top right no-repeat #dc5519; 
    padding: 80px 5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: #fff;
}
.main footer{
    padding: 40px 5%;
}
footer:after{
    content: none;
}
footer h3{
    color: #000;
}
footer>p{
    flex: 1;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 30px;
    line-height: 80px;
}
footer>div{
    width: 100%;
    font-size: 20px;
}
footer>div img{
    width: 400px;
    margin: -100px 0 5px;
}
.main footer>div img{
    margin: 0;
}
footer>div p{
    padding: 3px 8px;
}
@media only screen and (max-width: 1100px) {
    footer>p{
        font-size: 24px;
        line-height: 60px;
    }
    footer>div img{
        width: 350px;
    }
}
@media only screen and (max-width: 767px) {
    footer>p{
        height: 500px;
    }
    footer>div img{
        margin: 0 0 5px;
    }
}
@media only screen and (max-width: 767px) {
    footer{
        padding: 40px 5%;
    }
    footer>p{
        height: 300px;
        font-size: 16px;
        line-height: 36px;
    }
    footer>div{
        font-size: 12px;
        padding-top: 40px;
    }
    footer>div p{
        padding: 2px 6px;
    }
    footer>div img{
        width: 200px;
    }
    .main footer{
        background: #dc5519; 
    }
    .main footer>div{
        padding-top: 0;
    }
    .main footer{
        padding: 25px 5% 20px;
    }
}
@media only screen and (max-width: 350px) {
    footer>p{
        height: 250px;
        font-size: 13px;
        line-height: 30px;
    }
}

.page{
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px 5% 20px;
}
.page.a{
    padding: 20px 0;
}
.page.a a{
    border: 1px solid #aaa;
    border-radius: 5px;
    margin: 0;
}
.page a,
.page span{
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px;
}
.page a:hover{
    background: #eee;
}
.page span{
    background: #dc5519;
    color: #fff;
}
.news,
.case{
    background: url(../images/in-bg2.svg) top -10px left -600px no-repeat;
    padding: 80px 5%;
}
.news.a{
    background: none;
}
.news ul{
    width: 100%;
    padding: 40px 0 20px;
    display: block;
}
.news li{
    padding: 10px 10%;
}
.news li a{
    display: flex;
    align-items: center;
    font-size: 24px;
    padding: 10px 0;
    transform: scale(.9,1);
    border-radius: 0;
}
.news li a .img{
    overflow: hidden;
    border: 1px solid #aaa;
    width: 250px;
    background: #fff;
}
.news li a img{
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    width: 100%;
}
.news li a:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}
.news li a .text{
    flex: 1;
    padding-left: 20px;
}
.news li span{
    color: #dc5519;
    margin-right: 15px;
    display: block;
}
.news li p{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    flex: 1;
    transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-ms-transition: 0.3s all;
    width: 100%;
}
.news li a:hover p{
    color: #dc5519;
}

@media only screen and (max-width: 1100px) {
    .news,
    .case{
        background-position: top left -500px;
        padding: 40px 5%;
    }
    .news li a{
        font-size: 20px;
    }
    .news li a .img{
        width: 200px;
    }
}
@media only screen and (max-width: 900px) {
    .news,
    .case{
        background-position: top -100px left;
    }
}
@media only screen and (max-width: 767px) {
    .news li{
        padding: 10px 0;
    }
    .news ul{
        padding: 20px 0;
    }
    .case{
        background-position: top -10px left;
    }
}
@media only screen and (max-width: 500px) {
    .news{
        background-position: top -50px left;
    }
    .news li a{
        font-size: 18px;
    }
    .news li a .img{
        width: 130px;
    }
    .news li a .text{
        padding-left: 10px;
    }
    .news li{
        padding: 0;
    }
}
@media screen and (max-width: 360px) {
    .news li a{
        font-size: 15px;
    }
}
.news-main,
.heading,
.video,
.date,
.link,
.images{
    width: 100%;
    float: left;
}
.news-main{    
    padding: 40px 0;
    font-size: 22px;
    color: #444;
}
.heading{
    font-size: 32px;
    color: #dc5519;
    border-top: 1px dotted #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
}
.date{    
    padding: 10px;
    background: #f5f5f5;
}
.video{
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    margin: 20px 0;
}
.video iframe,
.video object,
.video embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.link,
.images{
    padding: 20px 0;
}
.link p,
.images p{
    border-bottom: 1px dotted #ccc;
    padding-bottom: 20px;
    margin-bottom: 15px;
    width: 100%;
    display: block;
}
.link a{
    font-size: 20px;
    display: block;
    padding: 5px 0;
}
.link a:hover{
    color:#dc5519; 
}
.images{
    display: flex;
    flex-wrap: wrap;
}
.images a{
    width: calc(25% - 30px);
    margin: 15px;
    position: relative;
    overflow: hidden;
}
.images img{
    border: 1px solid #aaa;
}
@media only screen and (max-width: 767px) {
    .news-main{    
        padding: 20px 0;
        font-size: 18px;
    }
    .heading{
        font-size: 22px;
        padding-top: 10px;
        padding-bottom: 10px;        
    }
    .link p,
    .images p{
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .images a{
        width: calc(33.33% - 30px);
        margin: 15px;
    }
    .link a{
        font-size: 16px;
    }
}
@media only screen and (max-width: 500px) {
    .images a{
        width: calc(50% - 20px);
        margin: 10px;
    }
    .video{
        margin: 10px 0;
    }
    .link,
    .images{
        padding: 10px 0;
    }
}
.case-table{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.case-table:after{
    content: none;
}
.choose{
    font-size: 20px;
    padding-bottom: 10px;
}
.choose a,
.choose span{
    display: inline-block;
    padding: 0 10px;
}
.choose span,
.choose a:hover{
    color:  #dc5519;
}
.case ul{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0;
}
.case li{
    width: 20%;
    padding: 15px;
}
.case li a{
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}
.case li a img{
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.case li a:hover img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}
.case li a div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.6);
    font-size: 30px;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
    text-align: center;
}
.case li a:hover div{
    opacity: 0;
}
.case li a div p{
    transform: scale(.9,1);
    color: #fff;
    font-weight: bold;
}
@media screen and (max-width: 1199px) {
    .case li a div{
        font-size: 22px;
    }
    .case ul{
        padding: 80px 0;
    }
    .case li{
        width: 25%;
    }
}
@media screen and (max-width: 767px) {
    .case li a div{
        font-size: 16px;
    }
    .case li{
        width: 33.33%;
    }
    .case ul{
        padding: 20px 0;
    }
    .case-table{
        flex-wrap: wrap;
/*        flex-direction:column-reverse;*/
        justify-content: flex-start;
    }
    .case-table .title{
        width: 100%;
    }
    .choose{
        font-size: 16px;
        width: 100%;
        padding-top: 5px;
        padding-bottom: 0;
    }
    .choose a,
    .choose span{
        padding: 5px 10px;
    }
}
@media screen and (max-width: 500px) {
    .case{
        padding: 40px 5%;
    }
    
    .case li{
        width: 50%;
    }
}
@media screen and (max-width: 350px) {
    .case li a div{
        font-size: 13px;
    }
}
.performance ul{
    width: 100%;
    float: left;
}
.performance ul li{
    width: 100%;
    float: left;
    border-bottom: 1px dotted #ccc;
    font-size: 20px;
    background: #fff;
}
.performance ul li:nth-child(even){
    background: #f5f5f5;
}
.performance ul li:first-child{
    background: #dc5519;
    color: #fff;
}
.performance a:hover{
    color: #dc5519;
}
@media screen and (max-width: 767px) {
    .performance ul li{
        font-size: 16px;
    }
}
.more{
    width: 100%;
    display: block;
    padding-top: 20px;
    text-align: center;
    
}
.in2>div.more{
    flex: none;
}
.in2.f .more{
    padding-bottom: 140px;
}
.more a{
    color: #999;
}
@media screen and (max-width: 767px) {
    .in2.f .more{
        padding-bottom:0;
    }
}

/*20211213*/
/*
.owl-carousel .owl-stage{
    display: flex;
}
.item{
    height: 100%;
}
*/
[class^='movie']{
    position: relative;
    width: 100%;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
[class^='movie'] iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}