/* indexbox */
.indexbox { position: relative; }
.indexbox h2.boxtit {font-size: 2.3vw;color: #1a1a1a;font-weight: 500;position: relative;word-spacing: 100vw;max-width: 100%;}
.indexbox h2.boxtit::after {
  content: "";
  display: block;
  width: 155px;
  height: 1px;
  position: absolute;
  bottom: 0;
  background-color: #828282;
  top: 50%;
  left: 0;
  transform: translate(-140%, -50%);
  z-index: -1;
}
.indexbox h2.boxtit::before {
    position: absolute;
    content: "";
    top: 0;
    background: #1d548d;
    left: -25px;
    width: 15px;
    height: 15px;
}
.indexbox .sub-title{
	    font-size: 1.2em;
    line-height: 1.5;
    margin: 20px 0 0;
    letter-spacing: 2px;
    font-weight: 400;
    color: #555;
}
.indexbox .more {position: relative;width: 250px;margin-top: 40px;}
.indexbox .more a {padding: 15px 0;width: 200px;border: 1px #cdcdcd solid;display: block;text-align: center;}
.indexbox .more a font {position: relative;font-size: 16px;color: #0c0b19;z-index: 2;-webkit-transition-duration: .3s;transition-duration: .3s;}
.indexbox .more a span {position: absolute;width: 70px;height: 1px;background: #000;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.indexbox .more a span:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 16px 7px 0; border-color: transparent transparent #0c0b19 transparent; right: -1px; bottom: 50%; content: ""; }
.indexbox .more a:after {position: absolute;width: 0;height: 100%;background: #1d548d;display: block;top: 0;left: 0;content: "";z-index: 1;-webkit-transition-duration: .2s;transition-duration: .2s;}
.indexbox .more:hover a font { color: #fff; }
.indexbox .more:hover a span {right: 10px;}
.indexbox .more:hover a:after {width: 202px;}
	
/* NewsBox */
#NewsBox {position: absolute;width: calc(50% - 110px);background: rgba(255, 255, 255, 0.87);right: 110px;bottom: 0;z-index: 2;}
#NewsBox .info{display:flex;flex-wrap: wrap;align-items: center;padding: 0 40px 0 20px;justify-content: space-between;height: 110px;}
#NewsBox h2 {font-family: 'Outfit', sans-serif;text-transform: uppercase;font-size: 20px;font-weight: 600;border-right: 1px solid #ddd;padding: 10px 35px 10px 10px;}
#NewsBox ul {width: calc(100% - 160px);}
#NewsBox ul li { position: relative; }
#NewsBox ul li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#NewsBox ul li .time {font-size: 15px;color: #b1b1b1;font-family: 'Outfit', sans-serif;font-weight: 300;}
#NewsBox ul li .txt {height: auto;-webkit-line-clamp: 1;}

/* aboutBox */
#aboutBox {padding-top: 5vw;padding-bottom: 60px;}
#aboutBox:before{content:'';width: 100%;height: 210px;position: absolute;bottom: 0;left: 0;background: #f4f4f4;}
#aboutBox:after{content:'';width: 1px;height: 290px;position: absolute;bottom: 0;left: 50%;background: #000000;opacity: .05;box-shadow: -660px 0px black;}
#aboutBox .fixTxt {position: absolute;right: 0;bottom: 250px;z-index: 1;}
#aboutBox #pictureBox {position: absolute;width: 380px;height: 245px;left: 280px;bottom: 20px;z-index: 6;}
#aboutBox #pictureBox a.photo { width: 100%; height: 245px; }
#aboutBox .aboutinfo {position: relative;font-size: 0;z-index: 5;}

#aboutBox .aboutinfo .row { width: 50%; display: inline-block; vertical-align: top; }
#aboutBox .aboutinfo .row.info {padding: 3vw 12vw 5vw 8vw;width: calc(50% - 20vw);}
#aboutBox .aboutinfo .row.info article {margin-top: 40px;font-weight: 400;line-height: 220%;font-size: 16px;text-align: justify;letter-spacing: .5px;}
#aboutBox .aboutinfo .row.img {background-repeat: no-repeat;background-position: 0% 50%;background-size: 100%;position: relative;}
#aboutBox .aboutinfo .row.img p{position:absolute;top: 60px;right: 50px;writing-mode: vertical-lr;font-size: 22px;background: #4d4d4d;background: rgba(26, 26, 26, .46);-webkit-backdrop-filter: blur(7.5px);backdrop-filter: blur(7.5px);color: #fff;padding: 20px 5px;letter-spacing: 3px;}
#aboutBox .aboutinfo .row.img a.photo { width: 100%; height: 100%; }

/* SeoStarRating */
#SeoStarRating { text-align: right; }
#cases_area{
    padding: 100px 0 60px;
}
#cases_area .workframe{
    width: 89%;
}
#cases_area .info{
    display: flex;
    justify-content: space-between;
}
#cases_area .Item_left{
    width: 370px;
}
#cases_area:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    background-size: cover;
    top: 0;
    left: 0;
    clip-path: polygon(210% 130%, 0 40%, 0 120%);
}

#cases_area:after {
    content: "";
    position: absolute;
    width: 690px;
    height: 100%;
    background: url(/images/36/title_bg.jpg)no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    background-position: top;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
#cases_area .Item_right{
    width: calc(100% - 640px);
}
#cases_area .more_ab_info:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #1d548d;
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translate(0,20%)
}

#cases_area .more_ab_info {
    border-top: 1px solid #1d548d;
    padding-top: 15px;
    color: #000000;
    margin-top: 15vw;
    padding-left: 20px;
    position: relative
}
.Item_right .applicationList{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.Item_right .applicationList li{
    width: calc((100% / 3) - 60px);
    padding: 40px 30px;
    position: relative;
    background-color: #fff;
    box-shadow: 0 20px 50px rgba(0, 117, 175, 0.1);
    border-bottom: 1px solid #e9e9e9;
}
.Item_right .applicationList li .Img p{
    font-size: 1.4rem;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.3;
    margin-bottom: 2vw;
}
.Item_right .applicationList li .atag_item{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.Item_right .applicationList .professionalItem{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.Item_right .applicationList .professionalItem li{
    width: calc((100% / 2) - 30px);
    margin: 4px 0;
    color: #666;
    background-color: #fff0;
    box-shadow: 0 0px 0px rgba(0, 117, 175, 0.1);
    padding: 0;
    position: relative;
    padding-left: 20px;
}

.Item_right .applicationList .professionalItem li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: #d9d9d9;
}

/* productBox */
#productBox {padding: 0;z-index: 2;}
#productBox:before {position: absolute;width: 100%;height: 145px;background: #f4f4f4;display: block;top: 0;left: 0;z-index: 2;content: "";}
#productBox:after {z-index: 2;content: "";width: 1px;height: 145px;position: absolute;top: 0;left: 50%;background: #000000;opacity: .05;box-shadow: -660px 0px black;}
#productBox .bg {position: absolute;width: 300px;height: 157px;background: no-repeat 50% / cover;top: 7vw;left: -80px;z-index: 4;}
#productBox .fixTxt {position: absolute;right: 41%;bottom: 70px;z-index: 5;}
#productBox .productinfo { position: relative; z-index: 3; }
#productBox .productinfo .info{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-end;}
#productBox .productinfo .info .img {width: 50%;background: no-repeat 50% / cover;order: 2;}
#productBox .productinfo .info .img a{position:relative;display: block;}
#productBox .productinfo .info .img a img{width:100%;}
#productBox .productinfo .info .img p{position:absolute;top: 60px;left: 50px;writing-mode: vertical-lr;font-size: 23px;background: #2f2e2e;color: #fff;padding: 20px 5px;letter-spacing: 3px;margin: 0;font-weight: 400;}
#productBox .productinfo .info .p_info{width: calc(50% - 375px);padding: 60px 160px 90px 215px;}
#productBox .productinfo .info h3 {margin-bottom: 10px;height: auto;-webkit-line-clamp: 1;font-size: 45px;color: #1e1e1e;font-weight: 300;}
#productBox .productinfo .info article {height: 153px;color: #393939;overflow: hidden;margin-top: 80px;font-weight: 300;line-height: 190%;font-size: 16px;text-align: justify;letter-spacing: .5px;margin-bottom: 100px;}
#productBox .productinfo .info p{color: #5d8f5e;font-size: 25px;font-weight: 300;margin-bottom: 80px;}

/* bookBox */
#bookBox .fixTxt {position: absolute;left: 30%;top: -130px;z-index: 5;}
#bookBox h3.boxtit{width: 75%;margin: 40px auto;}
#bookBox .bg { position: absolute; width: 42%; height: calc(100% - 50px); left: 50%; bottom: 0; z-index: 2; background: #fff; }
#bookBox .bg >div { height: 100%; background: no-repeat 50% / cover; opacity: .2; }
#bookBox .bookinfo {position: relative;z-index: 3;}
#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { position: absolute; margin-left: calc(5% + 50px); width: 22%; text-align: left; font-size: 0; bottom: 50px; left: 62%; }
#bookBox .bookinfo .boxtit { font-size: 30px; bottom: calc(100% - 200px); }
#bookBox .bookinfo .list {position: relative;margin: 0 5px 5px;}
#bookBox .bookinfo ul li {font-size: 0;margin: 5px;position: relative;}
#bookBox .bookinfo ul li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#bookBox .bookinfo ul li .photo {display: inline-block;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#bookBox .bookinfo ul li .info {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#bookBox .bookinfo ul li .info h3{writing-mode: vertical-lr;font-size: 23px;background: #2f2e2e;color: #fff;padding: 20px 5px;letter-spacing: 3px;margin: 0;font-weight: 400;position: absolute;right: 40px;top: 40px;transform: translateY(-200%);transition: all linear 1s;}
#bookBox .bookinfo ul li:hover .info h3, #bookBox .bookinfo ul li:hover .info p{transform: translateY(0);}
#bookBox .bookinfo ul li .info p{writing-mode: vertical-lr;font-size: 16px;background: #fff;color: #2f2e2e;padding: 20px 5px;margin: 0;font-weight: 400;position: absolute;bottom: 40px;left: 40px;height: 280px;transform: translateY(200%);transition: all linear 1s;}
#bookBox .bookinfo ul li .info a { width: 90%; height: 170px; font-size: 20px; color: #292929; -webkit-line-clamp: 5; }
#bookBox .bookinfo .btns { margin: auto; width: 135px; right: 8%; left: auto; }
#bookBox .bookinfo .slick-dots li { margin: 0; }
#bookBox .bookinfo .slick-dots li button:before , #bookBox .bookinfo .slick-dots li.slick-active button:before { color: #0f2942; }
#bookBox .bookinfo .more { width: 90%; text-align: right; }

/* customBox */
#customBox{display:flex;flex-wrap: wrap;align-items: center;justify-content: space-between;padding: 50px 0 70px 0;flex-direction: column;}
#customBox .workframe{
    width: 92%;
}
#customBox:after{position:absolute;top: 0;content:"";width: 110%;height: 20%;background-color: #f4f4f4;z-index: -1;-webkit-transition:all 0.5s;transition:all 0.5s;right: 0;opacity: 1;clip-path: polygon(0 0, 100% 0, 100% 41%, 0% 100%);}

#customBox .paroller {position: absolute;width: 300px;height: 157px;background: no-repeat 50% / cover;top: -1vw;right: -80px;z-index: 4;}
#customBox .photbox {display: flex;z-index: 2;flex-wrap: wrap;justify-content: center;}
#customBox .photbox .box{width: calc((100%/5) - 20px);position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;/* background: #f6f6f6; */border-radius: 50px;}
#customBox .photbox .box .bg{
    z-index: 0;
}
#customBox .photbox .box .info::after {
  content: "";
  display: block;
  width: 50px;
  height: 20px;
  position: absolute;
  top: 40px;
  background: linear-gradient(to right, #1c4984 0%, #2383c6 100%);
  right: 0;
  z-index: 0;
}
#customBox .photbox .box .bg img{
    height: 370px;
    width: 100%;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 1 / 1;
}
#customBox .photbox .box:after{content:'';width: 100%;height: 70%;position: absolute;bottom: 0;opacity: 1;background: #f6f6f6;border-radius: 50px;z-index: -1;}
#customBox .photbox .box:hover:after{}
#customBox .photbox .box:before{content:'';position: absolute;width: 100%;height: 70%;bottom: 0px;left: 0px;opacity: 1;outline: 3px solid #ffffff;outline-offset: -18px;border-radius: 50px;z-index: 0;}
#customBox .photbox .box .info{position: relative;display: flex;flex-direction: column;align-items: center;padding: 30px 50px 50px;height: 230px;}
#customBox .photbox .box:hover .info{opacity:1;}
#customBox .photbox .box .info h3 {text-align: center;font-size: 22px;color: #000;letter-spacing: 2px;}
#customBox .photbox .box .info h4{
        padding-top: 15px;
        margin-top: 15px;
        border-top: 1px solid #ddd;
        font-weight: 400;
        font-size: 1rem;
        color: #747474;
}
#customBox .t_info{padding: 0 165px 80px 90px;display: flex;flex-direction: column;align-items: center;}
#customBox .t_info .boxtit{
    text-align: center;
}
#customBox .t_info p{margin-top: 30px;font-weight: 300;line-height: 190%;font-size: 16px;text-align: justify;letter-spacing: .5px;}
#customBox h2.boxtit::after{
    display: none;
}
@media screen and (min-width:1281px) {
	.indexbox .more a:hover { color: #fff; }
	.indexbox .more a:hover:before { width: 100%; }
	#aboutBox .aboutinfo::after {
  content: "";
  display: block;
  width: 330px;
  height: 90px;
  position: absolute;
  bottom: 80px;
  background: linear-gradient(to right, #1c4984 0%, #2383c6 100%);
  right: 0;
  transform: translate(0%, 0%);
  z-index: 0;
}
		#customBox:before{content:'';width: 95%;height: 410px;position: absolute;bottom: 0;right: 0;top: 40%;left: 50%;transform: translate(-50%, 0%);background: #dfe6ed;background: linear-gradient(to top, #fff 40%, #d7e8ff 100%);border-radius: 35px 35px 0 0;}

}
@media screen and (max-width:1680px) {
	#aboutBox .aboutinfo .row.info article{margin-top: 30px;}
#cases_area .Item_right {
    width: calc(100% - 420px);
}

}
@media screen and (max-width:1440px) {
	#productBox:before, #productBox:after{height: 50px;}
	#aboutBox #pictureBox{bottom: -70px;}
	#aboutBox .aboutinfo .row.info{padding-top:0;position: relative;}
	.indexbox h3.boxtit{font-size: 38px;}
	#aboutBox{padding-bottom: 60px;}
	#aboutBox:before, #aboutBox:after{height: 80px;}
	#aboutBox .fixTxt{bottom: 80px;right: -90px;}
	#customBox .photbox .box:hover:after{height: 55px;}

}
@media screen and (max-width:1280px) {
	#bookBox .bookinfo ul li .info p{height:180px;font-size: 15px;width: 53px;overflow: hidden;}
	#customBox .t_info{/* width: calc(42% - 130px); *//* padding: 0 65px; */}
	#productBox .productinfo .info p{margin-bottom:40px;}
	#productBox .productinfo .info article{margin-top:0;margin-bottom: 0;height: 205px;}
	#productBox .productinfo .info .p_info{width: calc(50% - 255px);padding: 60px 60px 90px 195px;}
	#productBox .fixTxt{right: 35%;}
	#aboutBox .fixTxt{right: -210px;}
	#aboutBox .aboutinfo .row.info{padding-bottom:0;}
	#aboutBox:before, #aboutBox:after{height: 190px;}
	#aboutBox .aboutinfo .row.img{background-size:cover;background-position: 50% 50%;}
	#productBox .productinfo ul li.slick-active .img { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); }
	#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { margin-left: 50px; }
	#bookBox .bookinfo ul li .info { margin-left: 0; }
	#customBox .paroller{width: 200px;}
	.Item_right .applicationList li{
    width: calc((100% / 2) - 60px);
}
#customBox .photbox .box{width: calc((100%/3) - 20px);position: relative;display: flex;margin: 10px;}
}
@media screen and (max-width: 1024px) {
	#bookBox .fixTxt{top: -30px;width: 160px;}
	#productBox .fixTxt{right: -15%;}
	#productBox:before, #productBox:after{display: none;}
	#aboutBox .fixTxt{right: -30px;z-index: 7;bottom: 290px;}
	#aboutBox .fixTxt img{width: 310px;}
	#aboutBox .aboutinfo .row.img p{left:40px;right:unset;}
	#aboutBox:before, #aboutBox:after{display:none;}
	#aboutBox #pictureBox{bottom: -240px;}
	#productBox .productinfo .info .img{width:100%;order:-1;}
	#NewsBox{width: calc(100% - 110px);}
	#productBox:before { width: 95vw; }
	#productBox {margin-top: 70px;}
	#aboutBox .aboutinfo .row{width: 100%;}
	#aboutBox{padding:0;}
	#aboutBox .aboutinfo .row.info{width: 90%;padding: 0;margin: 40px auto 0;display: block;}
	#productBox .bg{top: unset;bottom: 47vw;}
	#productBox .productinfo .info .p_info{padding: 0;margin: 40px auto 0;width: 90%;}
	#customBox .photbox{width:100%;}
	#customBox .paroller{display:none;}
	#customBox .t_info{width: 90%;margin: 40px auto 30px;padding: 0;}
	#bookBox h3.boxtit{width:90%;}
	#cases_area .info{
    display: flex;
    flex-direction: column;
}
	#cases_area .Item_left {
    width: auto;
    margin-bottom: 50px;
}
	#cases_area .more_ab_info{
    margin-top: 7vw;
}
	    #cases_area .Item_right {
        width: calc(100% - 0px);
    }
		.indexbox h2.boxtit{
    font-size: 4.3vw;
}
	#cases_area {
    padding: 20px 0 60px;
}
	.indexbox .sub-title{
    text-align: center;
    font-size: 1.1em;
}
}
@media screen and (max-width:980px) {
	#aboutBox { padding-top: 0; }
	#aboutBox .fixTxt {width: 200px;bottom: 350px;}
	#aboutBox .aboutinfo { padding: 5vw 0; }
	#aboutBox .aboutinfo .row.info { position: relative; padding: 3vw 10vw; width: 80%; z-index: 2; }
	#aboutBox .aboutinfo .row.info .more a { border-color: #25496b; color: #25496b; }
	#productBox .bg { display: none; }
	#customBox ul li .info article { width: 85%; }
			.Item_right .applicationList li{
    width: calc((100% / 1) - 60px);
}
	#customBox .photbox .box .info{
    height: auto;
}
}
@media screen and (max-width:640px) {
	#productBox .fixTxt{width: 200px;bottom: 330px;}
	#aboutBox #pictureBox{left: 40%;width: 130px;bottom: -275px;}
	.indexbox h3.boxtit, #productBox .productinfo .info h3{font-size: 30px;}
	#NewsBox ul{width: calc(100% - 125px);}
	#NewsBox {position: relative;width: 100%;right: 0;}
	#productBox .productinfo ul { margin: auto; width: 80%; }
	#bookBox .bookinfo ul li .img { margin: 30px; width: calc(100% - 60px); }
	#bookBox .bookinfo .btns { display: none; }
	#productBox .productinfo .info p{font-size: 22px;}
	#customBox .photbox .box .info img{width:30px;}
	#customBox .photbox .box .info h3{font-size: 24px;}
	#customBox .photbox .box .info{margin-top:0;width: auto;}
	#customBox .photbox .box{width: calc((100%/1) - 2px);}
	.indexbox h2.boxtit{
    font-size: 6.3vw;
}

}