section {position: relative;padding: 4vw 0 3vw 0;background: no-repeat 50% / cover;}
section.page_title{padding: 4vw 6vw;margin: 0vw 12vw 0;overflow: auto;}
section.page_title h2 {margin-bottom: 0px;font-weight: 500;font-size: 50px;line-height: 130%;color: #505050;font-family: "Cormorant Garamond", "Noto Serif TC", serif;text-transform: uppercase;}
section.page_title em,.titleSet em {font-size: 16px;font-weight: bold;font-family: 'Poppins', sans-serif;color: #8c8c8c;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;letter-spacing: 2px;font-style: inherit;}
section.page_title em:before, .titleSet em:before {content: '';display: inline-block;width: 67px;height: 1px;background-color: #c5c5c5;margin-right: 14px;}
section.page_title .more {position: absolute;right: 120px;bottom: 0;}
section.page_title .more {position: absolute;bottom: 80px;}
#productBox .more{display: none;}
section.page_title .more a {position: relative;display: block;width: 130px;height: 38px;text-transform: uppercase;font-family: 'Poppins', 'Noto Sans TC', sans-serif;font-weight: 400;color: #585858;font-size: 16px;line-height: 110%;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;overflow: hidden;z-index: 1;font-style: italic;padding: 18px 0px 0px 86px;}
section.page_title .more a:before {content: '';position: absolute;top: 0px;left: 0;display: block;width: 100%;height: 100%;background-color: #720400;z-index: -1;-webkit-transition: -webkit-transform .5s;transition: -webkit-transform .5s;-o-transition: transform .5s;transition: transform .5s;transition: transform .5s, -webkit-transform .5s;-webkit-transform-origin: right;-ms-transform-origin: right;transform-origin: right;-webkit-transform: scale(0, 1);-ms-transform: scale(0, 1);transform: scale(0, 1);}
section.page_title .more a:before{background-color: #ebebeb;}
section.page_title .more a{color: #7b7b7b;width: 150px;}
section.page_title .more a:hover:before {content: '';-webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left;-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);transform: scale(1, 1);}
section.page_title .more a:after {content: '';position: absolute;top: 20px;left: 0px;display: block;width: 74px;height: 20px;background-image: url(../../images/38/arrow.png);background-repeat: no-repeat;background-position: center;-webkit-transition: all .8s;-o-transition: all .8s;transition: all .8s;vertical-align: top;}
section.page_title .more a:after{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(100%);}
section .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }

/* aboutBox */
#aboutBox .workframe {overflow: hidden;}
#aboutBox .left_box {padding-bottom: 30px;overflow: hidden;width: 100%;bottom: 0;z-index: 10;}
#aboutBox .left_box .info_box h4 {margin: 10px 0 5px;font-weight: 400;font-size: 45px;line-height: 100%;font-family: "Cormorant Garamond", "Noto Serif TC", serif;color: #9c9c9c;}

#aboutBox .left_box .info_box h2 {
font-size: 32px;
font-weight: 500;
color: #292929;
line-height: 30px;
margin-top: 15px;
letter-spacing: 2.5px;
border-bottom: 2px solid #ebebeb;
padding-bottom: 40px;
}

@media (max-width: 1180px) {
#aboutBox .left_box .info_box h2 br {display:none}
}

#aboutBox .left_box .info_box h2 span {color: #ec466b;font-size: 32px;}
#aboutBox .left_box .info_box p {font-size: 18px;line-height: 30px;color: #000;letter-spacing: 1px;margin-top: 20px}
#aboutBox .img_box_cover {float: right;width: 52%;position: relative;z-index: 0;padding: 20px 23px 50px;}
#customBox ul li img {
    width: 100%;
    object-fit: cover;
}
#aboutBox .left_box .img_box_cover:before {position: absolute;width: 94%;height: 86%;display: block;border: 1px #e6e6e6 solid;top: 35px;left: 9px;opacity: 1;z-index: 4;content: "";}
#aboutBox .img_box_cover .slick-dots{
    bottom: -48px;
    z-index: 20;
}
#aboutBox .img_box_cover .slick-dots li button{
    background: transparent;
    color: rgb(185 185 185 / 78%);
}
#aboutBox .img_box_cover .slick-dots li.slick-active button:before {
    opacity: .75;
    color: #f495aa;
}
#aboutBox .left_box .info_box{float: left;width: 34%;margin: 20px 0 70px 40px;}
#aboutBox .more{text-align: left;position: initial;margin-top: 0px;bottom: 100px;right: 0px;z-index: 40;}
#aboutBox .more.white a{position: relative;border: 1px #f48da4 solid;background: #ffffff;display: inline-block;color: #f48da4;letter-spacing: 0.2px;font-size: 12px;font-weight: 500;}

#aboutBox .more.white a {padding: 12px 20px;}
#aboutBox .more.white a font{font-size: 13px;}
#aboutBox .left_box .info_box article.text-clamp {margin: 30px 0 20px;height: 100%;line-height: 190%;-webkit-line-clamp: 3;font-weight: 300;color: #4c4c4c;}
#aboutBox .right_box {width: 100%;}
#aboutBox .right_box .list_box {margin: 30px 0 10px;width: calc(33% - 1px);display: inline-block;vertical-align: top;}
#aboutBox .right_box .list_box .relat_box { margin: 0 25px; }
#aboutBox .right_box .list_box .img_box_cover {float: left;width: 19%;padding: 0px 0px;}
#aboutBox .right_box .list_box .img_box_cover img{width: 160px;height: 80px;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#aboutBox .right_box .list_box:hover .img_box_cover img {-webkit-transform: scale(0.7);-ms-transform: scale(0.7);transform: scale(0.7);-webkit-filter: contrast(0) brightness(200%);filter: contrast(0) brightness(200%);}
#aboutBox .right_box .list_box:hover .img_box_cover {background-color: #f48da4;width: 80px;margin-right: 15px;height: 80px;border-radius: 99em;}
#aboutBox .right_box .list_box .info_box{float: right;width: 69%;overflow: visible;}
#aboutBox .right_box .list_box:hover .info_box h4{color: #f48da4;}
#aboutBox .right_box .list_box:hover .info_box h4::after{border: 1px solid #f48da4;background-color: #f48da4;color: #fff;}
#aboutBox .right_box .list_box .info_box h4 {padding-right: 165px;display: inline-block;position: relative;height: 38px;font-size: 19px;color: #4d4d4d;font-weight: 400;width: 100px;padding-top: 0px;}
#aboutBox .right_box .list_box .info_box h4::after {counter-increment: mainSection;content: "01";position: absolute;right: 0px;top: 43%;transform: translateY(-50%);width: 25px;height: 30px;font-size: 14px;padding: 0px 0px 0px 8px;border: 1px solid #f2f2f2;border-radius: 50%;pointer-events: none;}
#aboutBox .right_box .list_box:nth-child(2) .info_box h4::after{content: "02";}
#aboutBox .right_box .list_box:nth-child(3) .info_box h4::after{content: "03";}
#aboutBox .right_box .list_box .info_box h4::before {content: "";position: absolute;left: 84px;top: 50%;margin-top: -0.5px;width: 125px;height: 1px;background-color: #d6d6d6;}
#aboutBox .right_box .list_box .info_box article {color: #737373;font-weight: 300;font-size: 14px;}
#aboutBox.about_content_end { width: 100%; display: block; }

/* secabout */
#secabout { margin-top: 50px; }
#secabout:before { position: absolute; width: 60%; height: 100%; background: #dc8661; display: block; top: 0; left: 0; content: ""; }
#secabout >div { width: 50%; display: inline-block; vertical-align: top; }
#secabout .customBox ul { margin: 0 auto; width: 500px; }
#secabout .customBox ul li { padding: 60px 0; }
#secabout .customBox ul li .page_sub_title { margin-bottom: 25px; font-weight: 400; font-size: 36px; color: #fff; }
#secabout .customBox ul li article { font-weight: 200; font-size: 18px; color: #ece4e0; }
#secabout .youtubeBox { top: 45px; }
#secabout .youtubeBox iframe { width: 90%; height: 350px; }

/* productBox */
#productBox {position: relative;}
#productBox:before {position: absolute;width: 90%;height: 50%;background: rgb(246 246 246 / 66%);display: block;top: 0px;right: 320px;z-index: -1;content: "";}
#productBox .list_box {position: relative;padding: 0;margin-right: auto;margin-left: 150px;width: 88%;}
#productBox .relat_box:before {position: absolute;width: 100%;height: 100%;background: rgb(33 33 33 / 40%);display: block;top: 0;left: 0;z-index: 3;content: "";}
#productBox ul li{padding: 0px 10px;}
#productBox ul li .img_box_cover img {height: 570px;}
#productBox ul li .textBox {pointer-events: none;position: absolute;top: 20px;left: 0;width: 100%;height: 100%;text-align: center;letter-spacing: 1px;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;z-index: 5;}
#productBox ul li .info_box.abso_box {height: auto;top: calc((100% - 400px) / 2);left: 0;position: absolute;width: 100%;height: 100%;z-index: 4;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
#productBox ul li .info_box >* {margin: 5px auto;width: 38%;text-align: center;}
#productBox ul li .info_box h4 {height: 37%;display: inline;font-weight: 200;font-size: 18px;color: #fff;-webkit-writing-mode: vertical-lr;-ms-writing-mode: tb-lr;writing-mode: vertical-rl;letter-spacing: 3px;width: 8%;font-weight: 400;}
#productBox ul li .info_box article {margin: 20px auto 15px;line-height: 160%;-webkit-line-clamp: 2;opacity: 1;margin-top: 20px;width: 100%;height: 44px;font-size: 14px;font-weight: 400;color: #fff;padding-bottom: 15px;border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
#productBox ul li .info_box .more_box {opacity: 0;color: #fff;}
#productBox .btn a { position: absolute; width: 26px; height: 26px; border: solid #444; display: block; top: calc((100% - 26px) / 2); }
#productBox .btn a#product_prev { border-width: 1px 0 0 1px; transform: rotate(-45deg); left: -50px; }
#productBox .btn a#product_next { border-width: 1px 1px 0 0; transform: rotate(45deg); right: -50px; }
#productBox .slick-slider { margin-bottom: 60px; }
#productBox .slick-dots li button:before { width: 12px; height: 12px; background: transparent; border: 1px #000 solid;  border-radius: 50%; text-align: center; opacity: 1; content: ""; }
#productBox .slick-dots li.slick-active button:before { background: #000; }
#productBox ul li .relat_box >*{padding-bottom: 0px;background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0 0 0 / 12%) 63%,rgb(0 0 0 / 30%) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a6000000',GradientType=0 );transition: all ease-in-out .3s;}

/* newsBox */
#first-box .aboutnewspro{padding: 30px 0 90px;overflow:hidden;z-index: 3;}
#first-box .aboutnewspro #newshot{width: 600px;padding-right: 40px;float: left;position: relative;}
#first-box .aboutnewspro #about{width: 540px;float: right;}
#first-box .aboutnewspro #about .ssbanner .roomttile {overflow: hidden;margin-bottom: 50px;}
#first-box .aboutnewspro #about .ssbanner .roomttile h2 font {float: left;color: #051b27;display: inline-block;line-height: 110%;letter-spacing: 0.2em;font-weight: 700;font-size: 38px;margin-top: 20px;font-family: 'Noto Serif TC' , serif;}
#first-box .aboutnewspro #about .ssbanner .roomttile p {overflow: hidden;float: right;margin-top: 20px;max-width: 30%;color: #595757;font-size: 14px;line-height: 160%;letter-spacing: .1em;}
#first-box .aboutnewspro #about .ssbanner .slick-slide{transition: all linear 0.3s;box-shadow: 0 2px 15px rgb(70 70 70 / 12%);margin: 20px 10px;background-color: #fff;}
#first-box .aboutnewspro #about .ssbanner .bxslider a{display:block;background-repeat:no-repeat;background-position:50% 50%;position:relative;z-index:2;background-size: contain;}
#first-box .aboutnewspro #about .ssbanner .bxslider a img{height: 240px;}
#first-box .aboutnewspro #about .ssbanner .bxslider{z-index: 5;margin: 40px 0 0;}
#first-box .aboutnewspro #about .ssbanner .bxslider 
h3 a.category{color: #f5abbb;border-bottom: 1px solid #d7d7d7;padding: 16px 0;font-size: 22px;font-weight: 600;}
#first-box .aboutnewspro #about .ssbanner .bxslider 
p a.category{color: #545454;padding: 20px 0;font-weight: 600;max-height: initial;overflow: hidden;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}
.ssbanner .bxslider h3 a.category,.ssbanner .bxslider p a.category {color: #4e4e4e;}
#first-box .aboutnewspro #about .ssbanner .bxslider .btn {width: 100%;}
#first-box .aboutnewspro #about .ssbanner .bxslider .btn .moreBtn a{color: #ffffff;line-height: 10px;padding: 15px 44px;background: #5cacd5;display: inline-block;margin: 10px 0;}

#first-box .aboutnewspro #about .ssbanner .titleBox h3:after {content: '';position: absolute;width: 130px;height: 1px;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;background-color: #005490;}
/* customBox */
#customBox .workframe { z-index: 2; font-size: 0; }
#customBox .row { vertical-align: top; }
#customBox ul li a {
    width: 100%;
    object-fit: cover;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
}

.titleSet h2{font-size: 40px;line-height: 100%;font-family: "Cormorant Garamond", "Noto Serif TC", serif;font-weight: 500;line-height: 130%;}
#first-box #newshot .stxt a{float:right;font-size: 17px;}
#first-box #newshot ul.newsList{padding: 42px 0;}
#first-box #newshot li{overflow:hidden;margin-bottom: 0px;margin: 0px 0 0px 0;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;padding-top: 20px;padding-bottom: 18px;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#first-box #newshot li:hover{-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#first-box #newshot li .date{float:left;color: #000000;width: 10%;-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;width: 90px;min-height: 66px;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;text-align: center;margin-right: 25px;}
#first-box #newshot li .date p{text-align: center;line-height: 140%;font-size: 14px;font-weight: 400;letter-spacing: 0.06em;color: #5F5F5F;text-transform: uppercase;}
#first-box #newshot li:hover .date{-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#first-box #newshot li:hover .intro h3 a{width: 100%;color: #f59baf;white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#first-box #newshot li:hover .intro article{color: #252525;line-height: 25px;margin-top: 5px;}
/* NewsBox */
#first-box #newshot .stxt{margin-bottom:18px;}
#first-box #newshot li .date{float:left;color:#4e4d4c;font-size:18px;width: 14%;}
#first-box #newshot li .date .big{font-size:25px;font-weight:bold;font-weight: 400;letter-spacing: 0.06em;color: #585858;}
#first-box #newshot li .intro{width: calc(100% - 5px);position: relative;max-width: 430px;border-left: 1px solid #d7d7d7;padding-left: 20px;}
#first-box #newshot li .intro h3,
#first-box #newshot li .intro article{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing: 0.06em;}
#first-box #newshot li .intro h3 a{color: #5d5d5d;font-size: 18px;font-weight: 500;}
#first-box #newshot li .intro article{color: #757575;font-size: 15px;margin-top:5px;letter-spacing: 0.06em;font-weight: 300;width: 330px;}
#first-box #newshot li .intro .btn{float: left;}
#first-box #newshot li .intro .moreBtn{float: right;max-width: 80px;}
h2.boxTitle:first-letter {color: #2881bc;}


/* bookBox */
#bookBox ul { margin: 0 auto; width: 1200px; display: grid; grid-gap: 0; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
#bookBox ul li { overflow: hidden; }
#bookBox ul li img { height: 275px; }
#bookBox ul li:first-child { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
#bookBox ul li:nth-child(8) { grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 4; }
#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 550px; }




@media screen and (max-width: 1500px){
	#aboutBox .left_box {}
	#first-box .aboutnewspro #newshot{width: 540px;}
	#first-box #newshot ul.newsList{padding: 10px 0;}
	#first-box .aboutnewspro #about{width: 500px;}
	#first-box #newshot li .date{float:left;color: #000000;width: 18%;padding: 1px 0;}
	#first-box #newshot li .intro {width: 80%;max-width: 80%;}
	#first-box #newshot li .intro article{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
	#first-box #newshot li .intro h3 a{font-size: 19px;}
	#first-box #newshot li .intro article{font-size: 14px;margin-top: 3px;}
}
@media screen and (max-width: 1440px) {
	#first-box .aboutnewspro #newshot{width: 570px;}
	#first-box #newshot ul.newsList{}
	#first-box .aboutnewspro #about{width: 550px;}
	#productBox ul li .img_box_cover img {height: 430px;}
}
@media screen and (max-width: 1366px) {
	#first-box .aboutnewspro #newshot{overflow:hidden;padding-left: 20px;width: 500px;}
	#aboutBox .right_box .list_box .img_box_cover {float: left;width: 25%;padding: 0px 0px;}
	#aboutBox .right_box .list_box .info_box,#aboutBox .right_box .list_box:nth-child(3) .info_box{width: 74%;}
	#aboutBox .right_box .list_box .info_box h4{padding-right: 175px;}
	#aboutBox .right_box .list_box .info_box h4::after{right: 5px;}
	#productBox ul li .img_box_cover img {height: 510px;}
}
@media screen and (min-width: 1281px){
	#productBox ul li:hover .relat_box:before  {background: rgb(25 25 25 / 49%);}
	#productBox ul li:hover .info_box.abso_box {top: calc((100% - 640px) / 2);}
	#productBox ul li:hover .info_box article {margin: 10px auto 15px;height: 35px;opacity: 1;border-bottom: 1px solid rgb(255 255 255 / 0%);}
	#productBox ul li:hover .info_box .more_box { opacity: 1; }
	#productBox ul li:hover .info_box .more_box {padding: 5px 30px;border: 1px rgba(255, 255, 255, .3) solid;display: inline-block;color: #fff;}
	#aboutBox .more.white a:hover {background: #ea6e8a;border-color: #ea6e8a;color: #ffffff;}
	#aboutBox .more.white a:hover font {color: #ffd8e1;}
}
@media screen and (max-width: 1280px){
	#bookBox ul { width: 90%; }
	#bookBox ul li img { height: 22.5vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 45vw; }
	#first-box #newshot li .date{    padding: 2px 0;}
	#first-box .aboutnewspro #newshot,#first-box .aboutnewspro #about{width: 460px;}
	#first-box .aboutnewspro:after{display: none;}
	#first-box #newshot li .intro h3 a{font-size: 14px;}
	#first-box #newshot ul.newsList {padding: 10px 0;}
	.titleSet {padding-bottom: 20px;}
	section.page_title h2,#first-box #newshot h2{font-size: 32px;}
	#aboutBox .right_box .list_box{width: calc(49% - 0px);text-align: center;margin: 10px 0;}
	#aboutBox .right_box .list_box:nth-child(3){width: calc(100% - 0px);}
	#aboutBox .right_box .list_box:nth-child(3) .img_box_cover {width: 9%;}
	#aboutBox .right_box .list_box:nth-child(3) .info_box {/* float: right; *//* width: 88%; */}
	#aboutBox .right_box .list_box .info_box:nth-child(3){}
	#aboutBox .right_box .list_box .img_box_cover img {width: 100%;height: 100%;}
	section.page_title{padding: 4vw 6vw;margin: 0vw 0vw 0;}
	section.page_title .more{right: 30px;bottom: 50px;}
}

@media screen and (max-width:1140px) {
	#first-box .aboutnewspro #newshot, #first-box .aboutnewspro #about {width: 440px;}
	#first-box #newshot li .intro article {width: 200px;}
	#first-box .aboutnewspro #about .ssbanner .bxslider{margin: 0px 0 0;}
#aboutBox .left_box .img_box_cover:before {width: 92%;height: 82%;}
}
@media screen and (max-width: 1024px){
	#aboutBox .left_box {margin-bottom: 40px;}
	#aboutBox .right_box {}
	#aboutBox .right_box .list_box {width: calc(100% - 1px);}
	#aboutBox .right_box .list_box .img_box_cover,#aboutBox .right_box .list_box:nth-child(3) .img_box_cover {width: 22%;}
	#aboutBox .right_box .list_box:nth-child(2n) .info_box h4 { margin: 15px 0; }
	#secabout:before { width: 90%; height: calc(100% - 300px); }
	#secabout >div{ width: 95%; }
	#secabout .customBox ul { width: 80%; }


	#secabout .youtubeBox { width: 100%; text-align: right; top: 0; }
	#productBox ul li .img_box_cover img {height: 430px;}
	#productBox ul li .info_box.abso_box{
    top: calc((100% - 370px) / 2);
}
	#first-box .aboutnewspro #newshot, #first-box .aboutnewspro #about {width: 420px;}
	#aboutBox .right_box .list_box:nth-child(3){width: calc(100% - 1px);}
	#aboutBox .right_box .list_box:nth-child(3) .img_box_cover {/* width: 25%; */}
	#aboutBox .right_box .list_box:nth-child(3) .info_box {/* width: 74%; */}
	#productBox .list_box{width: 86%;margin: auto;}
#aboutBox .left_box .info_box h2, #aboutBox .left_box .info_box h2 span {
    font-size: 21px;
    padding-bottom: 20px;
    vertical-align: revert;
}
#aboutBox .left_box .info_box h4{
    font-size: 35px;
}
}
@media screen and (max-width: 960px){
	#first-box .aboutnewspro #newshot,#first-box .aboutnewspro #about {width: 100%;float: none;padding-right: 0;padding-bottom: 0px;padding-left: 0px;}
	#first-box .aboutnewspro #about .ssbanner .bxslider{margin: 0;}
	#aboutBox .img_box_cover{float: none;width: 96%;}
	#aboutBox .left_box .info_box {float: none;width: 94%;margin: auto;}
	#aboutBox .more{position: initial;}
	#first-box #newshot li .intro article {width: 550px;}
#aboutBox .left_box .img_box_cover:before {width: 94%;height: 93%;}
}
@media screen and (max-width: 768px){
	#aboutBox .left_box .img_box_cover:before{width: 94%;height: 86%;top: 33px;left: 9px;}
	#aboutBox .left_box {margin-bottom: 20px;width: 100%;height: auto;}
	#aboutBox .right_box { width: 100%; }
	#aboutBox .right_box .list_box:nth-child(2n) { border-right: 0; }
	#aboutBox .right_box .list_box .relat_box { margin: 0 15px; }
	#aboutBox .right_box .list_box .img_box_cover {height: 100%;}
	#aboutBox .right_box .list_box .info_box h4 {height: 30px;font-size: 18px;padding-right: 115px;overflow: visible;}
	#aboutBox .right_box .list_box .info_box h4::before{width: 75px;}
	#newsBox ul li { margin: 20px 5px 20px 0; width: calc((100% - 10px) / 2); }
	#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 5px; }
	#bookBox ul { grid-template-rows: repeat(4, 1fr); }
	#bookBox ul li:first-child { grid-column-end: 4; }
	#bookBox ul li:nth-child(8) { grid-column-start: 3; grid-column-end: 5; grid-row-start: 3; grid-row-end: 5; }
	#first-box .aboutnewspro{padding: 0px 0 30px;}
	.titleSet h2, h2.boxTitle{font-size: 35px;}
	#first-box #newshot li .date{float:left;color: #000000;width: 18%;padding: 1px 0;}
	#first-box #newshot li .intro {width: 70%;max-width: 70%;}
	#first-box #newshot .stxt a{margin-top:5px;}
	#first-box #newshot li .intro article {width: 350px;}
}
@media screen and (max-width: 640px){
	#bookBox ul { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
	#bookBox ul li:first-child { grid-column-end: 3; }
	#bookBox ul li:nth-child(8) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; }
	#bookBox ul li:nth-child(7) { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 5; }
	#bookBox ul li img , #bookBox ul li:nth-child(8) img { height: 30vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(7) img { height: 60vw; }
	#first-box .aboutnewspro #newshot{    padding-bottom: 20px;}
	.wrap:after {height: 26%;}
	#first-box #newshot li .date{float:left;color: #000000;width: 18%;padding: 1px 0;}
	#first-box #newshot li .intro {width: 80%;max-width: 65%;}
	#first-box #newshot li .intro .btn{float: initial;}
	#first-box #newshot li .intro .moreBtn{float: left;}
	#first-box .aboutnewspro #about .ssbanner .bxslider a img{height: 160px;}
	section.page_title .more {position: absolute;bottom: 0px;right: -40px;}
	.titleSet {padding-bottom: 10px;}

}

@media screen and (max-width: 550px){
	#secabout:before { width: 100%; }
	#productBox .list_box {margin: 0 auto;width: 500px;}
	#productBox .btn { display: none; }
	#productBox ul li .img_box_cover img {height: 490px;}

	#newsBox ul li , #newsBox ul li:nth-child(2n) { margin: 20px 0; width: 100%; }
	#first-box #newshot li .date{width: 20%;min-height: 85px;margin-right: 12px;}
	#first-box #newshot li .date .big{font-size: 31px;}
	#first-box #newshot li .intro{width: 80%;}
	#aboutBox .left_box .img_box_cover:before{width: 89%;height: 88%;}
	#first-box #newshot li .intro article {width: 100%;}
}
@media screen and (max-width: 480px){
	#aboutBox .left_box .img_box_cover:before{width: 85%;height: 77%;top: 30px;}
	#productBox .list_box {width: 92%;}
}
@media screen and (max-width: 380px){
	#aboutBox .left_box .img_box_cover:before{width: 85%;height: 74%;top: 30px;}
}
@media screen and (max-width: 320px){
	#aboutBox .right_box .list_box { width: 100%; border-right: 0; }
	#productBox .list_box { width: 100%; }
}