.tb_top {background:var(--main-color3); padding:10px 0; color:#fff; margin:0 0 50px 0;}
.tb_bottom {color:var(--main-color1);}
.pt {color:#ffa50f;}
.tt {font-size:1.2em; font-weight:600; color:#ffa50f;}

.pg-sub > .content-body { padding:0; }

.page-content { }

.page-content .section { position:relative; z-index:1; --sec-padding:30px; }
.page-content .section:not(.sec1) { padding-top:var(--sec-padding); }

.page-content > div:not(.sec1) .header .head { font-size:3rem; font-weight:600; color:var(--main-color3);}

.page-content .section.sec1,.page-content .section.sec2 { padding-bottom:var(--sec-padding); }
.page-content .section:not(:first-child) { padding-top:var(--sec-padding); }
.page-content .section.bg:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:-1; }

.page-content .section .header { text-align:center; margin-bottom:20px; }
.page-content .section .header .subhead { font-size:.875rem; font-weight:500; display:inline-block; margin:0 auto 30px; border-bottom:1px solid #ddd; padding-bottom:3px; }
.page-content .section .header .head { font-size:3rem; font-weight:500; /* border-bottom:1px solid var(--main-color4); */}
.page-content .section .header .desc { line-height:1.7; margin-top:20px; font-size:1.3rem; }

.page-content .hid-arrow { display:block; text-align:center; margin:0 auto; width:180px; padding:20px; border:1px solid #ddd; font-size:.875rem; }
.page-content .hid-arrow span { position:relative; margin-right:10px; transition:margin 300ms; }
.page-content .hid-arrow span i { font-size:.625rem; margin-left:-10px; opacity:0; transition-duration:300ms; }
.page-content .hid-arrow:hover { background:#fff; color:#111; }
.page-content .hid-arrow:hover span { margin-right:0; }
.page-content .hid-arrow:hover span i { position:relative; opacity:1; margin-left:5px; }

.page-content .sec1 .header { text-align:left; }
.page-content .sec1 .swiper-slide { border-radius:20px; overflow:hidden; }
.page-content .sec1 .swiper-slide .img { padding-bottom:25%; background:none no-repeat center/cover; transition:all 800ms; transform:scale(1.2); }
.page-content .sec1 .swiper-slide .img:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.2); }
.page-content .sec1 .swiper-slide-active .img { transform:scale(1); }
.page-content .sec1 .pg { position:absolute; text-align:center; z-index:99; }
.page-content .sec1 .pg span { width:10px; height:10px; opacity:1; background:none; border:2px solid #fff; }
.page-content .sec1 .pg span.swiper-pagination-bullet-active { background:#fff; }

.page-content .sec2 { /* background:#f8f8f8; */ padding-bottom:var(--sec-padding); }
.page-content .sec2 .header { margin-bottom:50px; }
.page-content > div:not(.sec2) .header .head { font-size:3rem; font-weight:600; color:var(--main-color3);}
.page-content .sec2 .tiles { display:flex; flex-wrap: wrap; }
.page-content .sec2 .tiles .tile { text-align:left; }
.page-content .sec2 .a .box { position:relative; background-size:0; padding:40px; height:100%; border-radius:30px; box-shadow:0 0 20px rgba(0,0,0,.05); overflow:hidden; transition-duration:300ms; }
.page-content .sec2 .a .box:before,
.page-content .sec2 .a .box:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; transition-duration:400ms; }
.page-content .sec2 .a .box:before { background:no-repeat center/700px; background-image:inherit; clip-path: circle(25% at center 190px); }
.page-content .sec2 .a .box:after { background:rgba(0,0,0,.5); opacity:0; }
.page-content .sec2 .a .box div { position:relative; z-index:2; transition-duration:300ms; }
.page-content .sec2 .a .head { font-size:1.25rem; font-weight:600; }
.page-content .sec2 .a .desc { font-size:1.25rem; margin-top:250px; line-height:1.4; }

.page-content .dy2 .c {justify-content:space-between; }
.page-content .dy2 .header { margin-bottom:120px; }
.page-content .dy2 ul { width:100%; display:flex; justify-content:space-between; }
.page-content .dy2 ul li { position:relative; height:55vh; width:22%; overflow:hidden; }
.page-content .dy2 ul li:nth-child(2) { transform:translateY(-70px); }
.page-content .dy2 ul li:before,.page-content .dy2 ul li:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; }
.page-content .dy2 ul li:before { background:none no-repeat center/cover; transform:scale(1.5); transition:all 600ms, transform 1.5s 200ms; filter:grayscale(1); }
.page-content .dy2 ul li:nth-child(1):before { background-image:url('../img/tenacity_cho3_bg1.jpg'); }
.page-content .dy2 ul li:nth-child(2):before { background-image:url('../img/tenacity_cho3_bg2.jpg'); }
.page-content .dy2 ul li:nth-child(3):before { background-image:url('../img/tenacity_cho3_bg3.jpg'); background-position:-110px;}
.page-content .dy2 ul li:after { background:rgba(0,0,0,.6); }
.page-content .dy2 ul li span { position:absolute; left:15px; bottom:15px; color:#fff; z-index:3; padding:0 10px;}
.page-content .dy2 ul li:hover:before { filter:grayscale(0);}
.page-content .dy2 ul li:hover:after { background:rgba(0,0,0,.4);}
.page-content .dy2.active ul li:before { transform:scale(1)}

.page-content .dy4 ul li { background:#f8f8f8; }
.page-content .dy4 ul li:nth-child(odd) { flex-direction:row-reverse; }
.page-content .dy4 ul li:nth-child(odd) .txt { padding-left:calc(50% - var(--main-width)/2); padding-right:70px; }
.page-content .dy4 ul li:nth-child(even) .txt { padding-right:calc(50% - var(--main-width)/2); padding-left:70px; }
.page-content .dy4 .subhead { color:var(--main-color1); display:inline-block; margin-bottom:25px; border-bottom:1px solid var(--main-color1); }

.page-content .sec3 .tiles .tile > .a { padding-bottom:100%; background:none no-repeat center/cover; border-radius:220px; overflow:hidden; }
/* .page-content .sec3 .tiles .tile > .a:before { background:rgba(0,0,0,.5); } */
.page-content .sec3 .a .content { top:38%; bottom:102px; text-align:center; display:flex; flex-direction:column; justify-content:space-between; align-items:center; color:#fff; }
.page-content .sec3 .a .head { font-size:1.5rem; font-weight:600;}
.page-content .sec3 .a .desc { line-height:1.6; margin-top:20px; flex:1; }
.page-content .sec3 .a .en { border-radius:99px; background:rgba(0,0,0,.5); color:#fff; padding:10px 20px; font-weight:600; }
.page-content .sec3 .a .en:first-letter { color:rgba(255,255,255,.7);}

.page-content .sidebyside ul li { display:flex; align-items:center; }
.page-content .sidebyside ul li > * { width:50%; margin:25px auto; }
.page-content .sidebyside ul li .img { background:none no-repeat center/cover; padding-bottom:60%; }
.page-content .sidebyside .head { font-size:1.6rem; font-weight:600; }
.page-content .sidebyside .desc { margin-top:20px; font-size:1.1em; line-height:1.6; }
.page-content .sidebyside .hid-arrow { margin:50px 0 0; border-color:var(--main-color3); color:var(--main-color3); }
.page-content .sidebyside .hid-arrow:hover { background:var(--main-color3); color:#fff; }

.page-content .sec4 ul li { /* background:#f8f8f8; */ }
.page-content .sec4 ul li:nth-child(odd) { flex-direction:row-reverse; }
/* .page-content .sec4 ul li:nth-child(odd) .txt { padding-left:calc(50% - var(--main-width)/2); padding-right:70px; } */
/* .page-content .sec4 ul li:nth-child(even) .txt { padding-right:calc(50% - var(--main-width)/2); padding-left:70px; } */
.page-content .sec4 .head {margin:30px 0 0 0;}
.page-content .sec4 .subhead { color:var(--main-color1); display:inline-block; margin:20px 0 10px 0; border-bottom:1px solid var(--main-color1); font-size:1.5rem; font-weight:600;}

.page-content .sec5 .c { max-width:calc(var(--main-width)*0.8); }
.page-content .sec5 ul li:nth-child(even) { flex-direction:row-reverse; margin:100px 0; }
.page-content .sec5 ul li:nth-child(odd) .txt { padding-left:80px; }
.page-content .sec5 ul li:nth-child(even) .txt { padding-right:80px; }

.page-content .sec6 .swiper { padding:0 1px; }
.page-content .sec6 .swiper-slide { border-bottom:1px solid #ddd; height:auto; }
.page-content .sec6 .swiper-slide:before { content:""; position:absolute; left:50%; bottom:0; height:5px; width:0; background:var(--main-color1); transform:translateX(-50%); transition-duration:400ms; }
.page-content .sec6 .swiper-slide .image { overflow:hidden; border: 1px solid #ddd; border-bottom: 0;}
.page-content .sec6 .swiper-slide .img { background:none no-repeat center/cover; padding-bottom:98%; transition-duration:400ms; }
.page-content .sec6 .swiper-slide .txt { border-left:1px solid #ddd; border-right:1px solid #ddd; padding:30px; height:100%; }
.page-content .sec6 .swiper-slide .head { font-size:1.1rem; font-weight:600; transition-duration:400ms; text-align:center;}
.page-content .sec6 .swiper-slide .desc { color:#777; margin-top:15px; line-height:1.7; }
.page-content .sec6 .swiper-slide:hover:before { width:100%; }
.page-content .sec6 .swiper-slide:hover .img { transform:scale(1.05); }
.page-content .sec6 .swiper-slide:hover .head { color:var(--main-color1); }
.page-content .sec6 .pg { text-align:center; margin-top:20px; display:none; }
.page-content .sec6 .pg span { position:relative; width:5px; height:5px; background:#333; margin:0 7px; opacity:1; }
.page-content .sec6 .pg span.swiper-pagination-bullet-active:before { content:""; position:absolute; left:-5px; top:-5px; right:-5px; bottom:-5px; border-radius:99px; border:1px solid #333; }

.page-content .sec7 { display:flex; color:#fff; }
.page-content .sec7 .header { position:relative; width:50%; z-index:1; padding-top:var(--sec-padding); padding-bottom:var(--sec-padding); margin-bottom:0; overflow:hidden; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.page-content .sec7 .header:before,
.page-content .sec7 .header:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; transition-duration:400ms; }
.page-content .sec7 .header:before { background:none no-repeat center/cover; }
.page-content .sec7 .header:after { background:rgba(0,0,0,.5); }
.page-content .sec7 .header:hover:before { transform:scale(1.1); }
.page-content .sec7 .header:hover:after { background:rgba(0,0,0,.8); }
.page-content .sec7 .header:nth-child(1):before { background-image:url('../img/business3-sec7-img1.jpg'); }
.page-content .sec7 .header:nth-child(2):before { background-image:url('../img/business3-sec7-img2.jpg'); }
.page-content .sec7 .header .head { font-size:2rem; }
.page-content .sec7 .header .desc { margin-bottom:50px; }

.page-content .sec8 { position:relative; z-index:2; /* background:url('../img/business6-sec8-bg1.jpg') no-repeat center/cover fixed; */ color:#fff; }
.page-content .sec8:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; /* background:rgba(0,0,0,.3); */ z-index:-1; }
.page-content .sec8 .bg { position:absolute; left:0; top:0; right:0; bottom:0; }
.page-content .sec8 .header { margin-bottom:0 !imporwjrjtant; }
.page-content .sec8 .desc { margin-bottom:15px; }
.page-content .sec8 .btn-box { margin-top:40px; }
.page-content .sec8 .btn-box .btn { background:#005ea9; padding:20px 30px; color:#fff; font-size:1rem;}
.page-content .sec8 .btn-box .btn:hover { color:#fff; }

.dy3 .header { text-align:center; }
.dy3 .value { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-content: space-between; height:calc(var(--circle-size) + 50px); --circle-size:400px; }
.dy3 .value:before,.dy3 .value:after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:-1; }
.dy3 .value:before { width:var(--circle-size); height:var(--circle-size); border-radius:100%; border:80px solid #f3f3f3; }
.dy3 .value:after { width:calc(var(--circle-size)/3); height:calc(var(--circle-size)/3); background:url('../img/logo.png') no-repeat center/contain; }
.dy3 .value .box { width:calc(50% - 60px); display:flex; align-items:center; --mini-circle:130px; --circle-gap:25px; }
.dy3 .value .box:nth-child(odd) { flex-direction:row-reverse; text-align:right; }
.dy3 .value .head { width:var(--mini-circle); height:var(--mini-circle); border-radius:100%; padding:20px; background:var(--main-color2); color:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column; line-height:1.3; margin:0 var(--circle-gap); }
.dy3 .value .head b { font-size:1.125rem; }
.dy3 .value .head span { opacity:.5; font-size:14px; text-align:center;}
.dy3 .value ul { width:calc(100% - var(--mini-circle) - var(--circle-gap)*2); color:#888; }
.dy3 .value ul li { display:inline-block; margin:5px 0; line-height:1.4; }
.dy3 .value ul li:before { content:""; display:inline-block; margin-right:10px; vertical-align:middle; margin-top:-3px; width:4px; height:4px; border-radius:5px; background:#ddd; }


.page-content .dy5 .content { display:flex; justify-content:space-between; --box-padding:30px; }
.page-content .dy5 .content .box { position:relative; width:calc(25% - 15px); height:530px; padding:var(--box-padding); display:flex; flex-direction:column; justify-content:flex-end; text-align:center; overflow:hidden; color:#fff; background:#eee no-repeat center/cover; backdrop-filter: grayscale(.8); transition-duration:400ms !important; }

.page-content .dy5 .content .box:not(.on) { filter: grayscale(1) brightness(0.5); }
.page-content .dy5 .content .box:not(.on) ul .head { position:absolute; left:var(--box-padding); top:50%; right:var(--box-padding); transform:translateY(-50%);  transition-delay:0ms; }

.page-content .dy5 .content ul { margin-bottom:-100%; transition-duration:400ms; }
.page-content .dy5 .content ul:before { content:""; position:absolute; left:calc(-1 * var(--box-padding)); top:calc(-1 * var(--box-padding)); right:calc(-1 * var(--box-padding)); bottom:calc(-1 * var(--box-padding)); background:linear-gradient(to bottom, var(--main-color1), var(--main-color3)); z-index:-1; opacity:0; }
.page-content .dy5 .content ul .head { font-size:1.5rem; font-weight:600; transition-duration:400ms; }
.page-content .dy5 .content ul .desc { margin-top:20px; }
.page-content .dy5 .content ul .more { margin-top:30px; }
.page-content .dy5 .content ul .more span { text-decoration:underline; }

.page-content .dy5 .content .box.on { width:calc(50% - 15px); }
.page-content .dy5 .content .box.on ul { position:relative; z-index:2; margin-bottom:0; }
.page-content .dy5 .content .box.on ul:before { opacity:.6; }

@media (min-width: 1025px) {
	.page-content .sec2 .a:hover .box { transform:scale(1.1); }
	.page-content .sec2 .a:hover .box:before { clip-path: circle(100% at center 44%); }
	.page-content .sec2 .a:hover .box:after { opacity:1; }
	.page-content .sec2 .a:hover .box div { color:#fff !important; }
}

@media (max-width: 1800px) {
	.page-content .sec4 ul li:nth-child(odd) .txt { padding-left:5%; }
	.page-content .sec4 ul li:nth-child(even) .txt { padding-right:5%; }
	.page-content .dy4 ul li:nth-child(odd) .txt { padding-left:5%; }
    .page-content .dy4 ul li:nth-child(even) .txt { padding-right:5%; }
}

@media (max-width: 1600px) {
	.page-content .sec4 ul li:nth-child(odd) .txt { padding-left:30px; padding-right:50px; }
	.page-content .sec4 ul li:nth-child(even) .txt { padding-right:30px; padding-left:30px; }
	.page-content .dy4 ul li:nth-child(odd) .txt { padding-left:30px; padding-right:50px; }
	.page-content .dy4 ul li:nth-child(even) .txt { padding-right:30px; padding-left:30px; }

	.page-content .sec5 ul li:nth-child(odd) .txt { padding-left:30px; }
	.page-content .sec5 ul li:nth-child(even) .txt { padding-right:20px; }
}

@media (max-width: 1200px) {
	.page-content .sec2 .header { margin-bottom:30px; }
	.page-content .sec2 .tiles .tile { width:50% !important; }

	.page-content .sec3 .tile .a { padding:15px; }

	.page-content .sidebyside ul li .img { padding-bottom:80%; }

	.page-content .sec5 ul li:nth-child(even) { margin:50px 0; }

}

@media (max-width: 1024px) {
	.page-content .section { --sec-padding:100px; }
	.page-content .section .header .head { font-size:2.2rem; }

	.page-content .sec3 .tiles { max-width:768px; margin:0 auto !important; }
	.page-content .sec3 .tiles .tile > .a { padding-bottom:30%; }
	.page-content .sec3 .a .content { top:30%;}
	.page-content .sec3 .a .head { font-size:1.25rem; }
	.page-content .sec3 .a .desc { margin-top:10px; }
	.page-content .sec3 .a .en { font-size:.875rem; }

	.page-content .dy2 .c { flex-direction:column; }
	.page-content .dy2 .header { width:100%; text-align:center; }
	.page-content .dy2 ul { width:100%; margin-top:130px; }

	.dy3 .value { flex-wrap:nowrap; flex-direction:column; height:auto; --circle-size:300px; }
	.dy3 .value:before { border-color:#f8f8f8; }
	.dy3 .value:after { background:none; }
	.dy3 .value .box { width:calc(50% + var(--mini-circle)/2 + var(--circle-gap)); --mini-circle:120px; --circle-gap:20px; }
	.dy3 .value .box:nth-child(odd) { margin-right:calc(50% - var(--mini-circle)/2 - var(--circle-gap)); }
	.dy3 .value .box:nth-child(even) { margin-left:calc(50% - var(--mini-circle)/2 - var(--circle-gap)); }
	.dy3 .value .head b { font-size:1rem; }
	.dy3 .value .head span { font-size:.875rem; }

	.page-content .dy5 .content { flex-direction:column; }
	.page-content .dy5 .content .box { width:100% !important; height:auto; padding:50px var(--box-padding); }
	.page-content .dy5 .content .box:not(.on) { filter:none; }

	.page-content .dy5 .content ul { position:relative; margin-bottom:0; }
	.page-content .dy5 .content ul:before { top:-50px; bottom:-50px; opacity:.6; }
	.page-content .dy5 .content .box:nth-child(odd) ul { margin-left:calc(50% + var(--box-padding)); }
	.page-content .dy5 .content .box:nth-child(even) ul { margin-right:calc(50% + var(--box-padding)); }


	.page-content .dy5 .content ul .head { font-size:1.25rem; }
	.page-content .dy5 .content .box:not(.on) ul .head { position:relative; left:0; right:0; transform:translateY(0); }

	.page-content .sidebyside .head { font-size:1.25rem; }
	.page-content .sidebyside .hid-arrow { margin-top:30px; }
	.page-content .sidebyside ul li .img { padding-bottom:100%; }

	.page-content .sec6 .pg { display:block; }

	.page-content .sec7 .header .head { font-size:1.8rem; }
	.page-content .sec8 .btn-box { margin-top:30px; }
}

@media (max-width: 767px) {
	.page-content .section { --sec-padding:30px; }
	.page-content .section .header { margin-bottom:30px; }
	.page-content .section .header .subhead { margin:0 auto 20px; }
	.page-content .section .header .head { font-size:1.5rem; }
	.page-content .section .header .desc { margin-top:10px; }

	.page-content .hid-arrow { width:140px; padding:15px; }

	.page-content .sec1 .swiper-slide .img { padding-bottom:35%; }

	.page-content .sec2 .tiles .tile { width:100% !important; }
	.page-content .sec2 .a .box { padding:35px 20px 35px 130px; }
	.page-content .sec2 .a .box:before { left:20px; top:50%; transform:translateY(-50%); width:90px; height:90px; border-radius:100%; background-size:cover; clip-path: none; }
	.page-content .sec2 .a .desc { font-size:1rem; margin-top:10px; }

	.page-content .dy2 ul { margin-top:80px; }
	.page-content .dy2 ul li { height:auto; width:calc(33.33% - 5px); }
	.page-content .dy2 ul li:before { position:relative; display:block; padding-bottom:170%; }
	.page-content .dy2 ul li:nth-child(2) { transform:translateY(-40px); }

	.page-content .sec3 .tiles { max-width:400px; }
	.page-content .sec3 .a .content { top:22%; }

	.dy3 { text-align:center; }
	.dy3 .value { width:auto; display:inline-block; --circle-size:250px; }
	.dy3 .value:before { display:none; }
	.dy3 .value .box { width:auto; text-align:left !important; --mini-circle:110px; --circle-gap:10px; }
	.dy3 .value .box:nth-child(odd) { margin-right:0; flex-direction:row; }
	.dy3 .value .box:nth-child(even) { margin-left:0; }
	/* .dy3 .value .head { margin:0 10px 0 0; } */
	.dy3 .value .head b { font-size:1rem; }
	.dy3 .value .head span { font-size:.75rem; }
	.dy3 .value ul { width:calc(100% - var(--mini-circle) - 10px); }
	.dy3 .value ul li { margin:3px 0; display:block; }
	.dy3 .value ul li:before { margin-right:5px; }

	.page-content .dy4 ul li .txt { padding:30px 15px 50px !important; }
	.page-content .dy4 .subhead { margin-bottom:20px; }

	.page-content .sidebyside ul li { display:block; }
	.page-content .sidebyside ul li > * { width:100%; }
	.page-content .sidebyside ul li .img { padding-bottom:60%; }
	.page-content .sidebyside .desc { margin-top:15px; }

	.page-content .sec4 ul li .txt { padding:0 10px 0 !important; }
	.page-content .sec4 .subhead { margin-bottom:20px; }

	.page-content .sec5 .c { max-width:var(--main-width); }
	.page-content .sec5 .header .desc { width:80%; margin:0 auto; }
	.page-content .sec5 ul li:nth-child(even) { margin:0; }
	.page-content .sec5 ul li .txt { padding:30px 0 50px !important; }

	.page-content .sec6 .swiper-slide .txt { padding:20px; }

	.page-content .sec7 { display:block; }
	.page-content .sec7 .header { width:100%; margin-bottom:0; }
	.page-content .sec7 .header .desc { margin-bottom:30px; }

	.page-content .sec8 .btn-box .btn { padding:15px 25px; }
}