/**/ . /**/ .pages {display:flex; justify-content:center; align-items:center; text-align:center;} .pages .box {display:flex; justify-content:center;} .pages a, .pages span {display:flex; justify-content:center; align-items:center; margin:4.5rem 0.625rem; font-size:1rem; width:2.5rem; height:2.5rem; text-align:center; background:#F2F2F2; transition:background 0.3s , color 0.3s;} .pages a.a1:first-child {display:none;} .pages a.a1:nth-child(2) {text-indent:-999999px; background-image:url("images/page_prev.svg"); background-position:0 center; background-repeat:no-repeat; background-size:5rem auto;} .pages a.a1:nth-child(2):hover {background-position:-2.5rem center;} .pages a.a1:last-child {text-indent:-999999px; background-image:url("images/page_next.svg"); background-position:-2.5rem center; background-repeat:no-repeat; background-size:5rem auto;} .pages a.a1:last-child:hover {background-position:0 center;} .pages a:hover {color:#FFFFFF; background:#009FAB;} .pages span {color:#FFFFFF; background:#009FAB;} /**/ .s_superscript {} .s_superscript em {vertical-align:super;} .s_superscript_font_16 {} .s_superscript_font_16 em {font-size:1rem;} .s_superscript_font_12 {} .s_superscript_font_12 em {font-size:0.75rem;} /****************************************/ /* home */ /****************************************/ /**/ .sel_home {} /**/ .sel_home .navigation {background:transparent;} .sel_home .navigation .inner_navigation {} .sel_home .navigation .logo {background-image:url('images/logo_white.svg');} .sel_home .navigation .dropdowns {background:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0));} .sel_home .navigation .dropdowns dd {width:auto; transition:all 0.3s;} .sel_home .navigation .dropdowns dd a {opacity:0.8;} .sel_home .navigation .dropdowns dd:last-child a {border:none;} .sel_home .navigation .dropdowns dd:hover a {opacity:1;} .sel_home .navigation .dropdowns:after {border-bottom-color:rgba(255, 255, 255, 0.2);} .sel_home .navigation .menu {} .sel_home .navigation ul {} .sel_home .navigation ul li a {color:#ffffff; opacity:0.8;} .sel_home .navigation ul li a:hover {opacity:1;} .sel_home .navigation .options a {color:#ffffff; opacity:0.8;} .sel_home .navigation .options a:hover {opacity:1;} .sel_home .navigation .options .o_user > a {background-image:url("images/o_user_white.svg");} .sel_home .navigation .options .o_lang > a {background-image:url("images/o_lang_white.svg");} .sel_home .sticky_nav {background:#FFFFFF;} .sel_home .sticky_nav .logo {background-image:url('images/logo.svg');} .sel_home .sticky_nav ul li a {color:#1e1e1e;} .sel_home .sticky_nav .dropdowns {top:69px; background:#FFFFFF;} .sel_home .sticky_nav .dropdowns:after {border-bottom-color:rgba(255, 255, 255, 1);} .sel_home .sticky_nav .options a {color:#1e1e1e;} .sel_home .sticky_nav .options .o_user > a {background-image:url("images/o_user.svg");} .sel_home .sticky_nav .options .o_lang > a {background-image:url("images/o_lang.svg");} /* kv */ .kv {} .kv .swiper-container {height:100vh; background:#000000;} .kv .swiper-wrapper {} .kv .swiper-slide {background-position:center center; background-repeat:no-repeat; background-size:cover; cursor:default; overflow:hidden;} .kv .swiper-slide .text {position:absolute; z-index:3; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:50%; margin:2.5rem 0 0 -1.25rem; padding:0 2.5rem; text-align:center; color:#ffffff; opacity:0;} .kv .swiper-slide .text h1 {font-size:4.5rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .kv .swiper-slide .ma {display:none;} .kv .swiper-slide .video {position:absolute; left:0; top:0; width:100%; height:100%;} .kv .swiper-slide .video video {position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:auto; height:auto; min-width:100%; min-height:100%;} .kv .swiper-slide .btn_area {display:flex; justify-content:center; margin-top:2.5rem;} .kv .swiper-slide .btn_area a {padding:1rem 2.5rem; font-size:1rem; color:#FFFFFF; background:linear-gradient(to bottom, rgba(0,177,173,0.5), rgba(0,177,173,0.05)); opacity:0.8; transition:opacity 0.3s;} .kv .swiper-slide .btn_area a:hover {opacity:1;} .kv .swiper-slide .mask {width:100%; height:100%; position:absolute; z-index:2; left:0; top:0; background:#000000; opacity:0;} .kv .swiper-slide-active .text {opacity:1; margin-left:0; transition-delay:0.3s; transition-duration:1s;} .kv .swiper-pagination {bottom:1.25rem;} /* p_type */ .p_type {border-bottom:1px solid #f2f2f2;} .p_type ul {display:flex;} .p_type ul li {width:33.33%; border-right:1px solid #f2f2f2;} .p_type ul li:last-child {border:none;} .p_type ul li a {display:block; margin:auto; padding:60px 0; background:#ffffff;} .p_type ul li a .cell {} .p_type ul li a .cover {width:50%; margin:auto;} .p_type ul li a .cover span {display:block; transform:scale(0.95,0.95); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s;} .p_type ul li a .text h4 {text-align:center; font-size:1.375rem;} .p_type ul li a:hover .cover span {transform:scale(1,1);} /* p_story */ .p_story {padding:3.75rem 0 0;} .p_story h1 {font-size:2.75rem; text-align:center; margin-bottom:3.75rem;} .p_story ul {display:flex; flex-wrap:wrap;} .p_story ul li {width:50%;} .p_story ul li a {display:block; background:#f8f8f8; overflow:hidden; transition:background 0.3s;} .p_story ul li a .cell {display:flex; position:relative;} .p_story ul li a .cover {width:50%; text-align:center; position:relative; overflow:hidden;} .p_story ul li a .cover::after {content:""; position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:0; height:0; border-right:20px solid #f8f8f8; border-top:20px solid transparent; border-bottom:20px solid transparent; transition:all 0.3s;} .p_story ul li a .cover span {display:block; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s;} .p_story ul li:nth-child(3) a .cell, .p_story ul li:nth-child(4) a .cell {flex-direction:row-reverse;} .p_story ul li:nth-child(3) a .cover::after, .p_story ul li:nth-child(4) a .cover::after {transform:translateY(-50%) rotate(180deg); right:auto; left:-10px;} .p_story ul li a .text {width:50%; padding:3.75rem 2.5rem 0;} .p_story ul li a .text h2 {font-size:1.375rem; margin-bottom:1.25rem; display:block; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:color 0.3s; overflow:hidden;} .p_story ul li a .text p {font-size:1rem; opacity:0.7; display:block; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; transition:color 0.3s; overflow:hidden;} .p_story ul li a:hover {z-index:1; background:#009FAB;} .p_story ul li a:hover .cover::after {border-right-color:#009FAB;} .p_story ul li a:hover .cover span {transform:scale(1.05,1.05);} .p_story ul li a:hover .text {color:#ffffff;} .p_story ul li a:hover .text p {} /****************************************/ /* sub page */ /****************************************/ /**/ /**/ .temp_banner {margin-top:6.25rem; width:100%; position:relative; background-color:rgba(0, 0, 0, 1.0); background-position:center center; background-repeat:no-repeat; background-size:cover;} .temp_banner:before {position:absolute; left:0; top:0; content:""; width:100%; height:100%; background:rgba(0, 0, 0, 0);} .temp_banner .inner_section {position:relative; height:100%;} .temp_banner .page_title{padding:15.625rem 0; text-align:center;} .temp_banner .page_title h1{font-size:5.625rem; color:#ffffff; line-height:1.2;} .temp_banner .page_title p{margin-top:0.625rem; width:80%; line-height:1.2; font-size:1.5rem; color:#ffffff;} /**/ .temp_main .sidebar {width:20%;} .temp_main .sidebar ul {} .temp_main .sidebar ul li {} .temp_main .sidebar ul li a {display:flex; align-items:center; padding:1.25rem 0 1.25rem 2.5rem; font-size:1rem; border-bottom:1px solid #f2f2f2;} .temp_main .sidebar ul li.current a {color:#ffffff; color:#009FAB;} /**/ .anchor_list {width:100%; text-align:center; background:#ffffff;} .anchor_list .row {} .anchor_list .swiper-slide {width:auto!important;} .anchor_list .al {font-size:0;/*解决a标签换行后产生空白问题*/} .anchor_list a {display:flex; justify-content:center; align-items:center; margin:1.25rem 1.25rem 1.25rem 0; padding:0 1.875rem; width:auto; height:2.75rem; font-size:0.875rem; background:#f8f8f8; overflow:hidden; transition:background 0.3s , color 0.3s;} .anchor_list a:hover {color:#ffffff; background:#009FAB;} .anchor_list a.on {/*color:#ffffff; background:#009FAB;*/} .anchor {display:block; height:0; position:relative; top:calc(-9.625rem + 1px);/*负值：导航高度*/ overflow:hidden;} /**/ .page_blank {padding:12.5rem 0; text-align:center;} .page_blank .picon {margin:0 auto 1.25rem; display:block; width:6.25rem; height:6.25rem; background:url("images/picon.svg") no-repeat scroll top center / 100% auto; opacity:0.2;} .page_blank h6 {font-size:1.375rem; font-weight:normal;} .page_blank p {font-size:1.125rem; opacity:0.5;} /****************************************/ /* about */ /****************************************/ /**/ .sel_about {} /**/ .sel_about .navigation{background:transparent;} .sel_about .navigation .inner_navigation {} .sel_about .navigation .logo {background-image:url('images/logo_white.svg');} .sel_about .navigation .dropdowns {background:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0));} .sel_about .navigation .dropdowns dd {width:auto; transition:all 0.3s;} .sel_about .navigation .dropdowns dd a {opacity:0.8; height:50px; line-height:50px; border-bottom:1px solid rgba(255,255,255,0.1);} .sel_about .navigation .dropdowns dd:last-child a {border:none;} .sel_about .navigation .dropdowns dd:hover a {opacity:1;} .sel_about .navigation .dropdowns:after {position:absolute; top:-20px; left:50%; width:0; height:0; margin-left:-10px; content:''; border:solid transparent; border-width:10px; border-color:rgba(255, 255, 255, 0); border-bottom-color:rgba(255, 255, 255, 0.2);} .sel_about .navigation .menu {} .sel_about .navigation ul {} .sel_about .navigation ul li a {color:#ffffff; opacity:0.8;} .sel_about .navigation ul li a:hover {opacity:1;} .sel_about .navigation .options a {color:#ffffff; opacity:0.8;} .sel_about .navigation .options a:hover {opacity:1;} .sel_about .navigation .options .o_user > a {background-image:url("images/o_user_white.svg");} .sel_about .navigation .options .o_lang > a {background-image:url("images/o_lang_white.svg");} .sel_about .sticky_nav {background:#FFFFFF;} .sel_about .sticky_nav .logo {background-image:url('images/logo.svg');} .sel_about .sticky_nav ul li a {color:#1e1e1e;} .sel_about .sticky_nav .dropdowns {top:69px; background:#FFFFFF;} .sel_about .sticky_nav .dropdowns:after {border-bottom-color:rgba(255, 255, 255, 1);} .sel_about .sticky_nav .options a {color:#1e1e1e;} .sel_about .sticky_nav .options .o_user > a {background-image:url("images/o_user.svg");} .sel_about .sticky_nav .options .o_lang > a {background-image:url("images/o_lang.svg");} /**/ .ag_1 {background-color:#009FAB; background-repeat:no-repeat; background-position:center center; background-size:cover;} .ag_1 .text {display:flex; justify-content:center; align-items:center; text-align:center; height:100vh;} .ag_1 .text h1 {width:70%; margin:auto; font-size:5rem; color:#ffffff; text-shadow:0 0px 1.25rem rgba(0,0,0,0.2);} .ag_1 .text p {font-size:2.75rem; color:#ffffff; text-shadow:0 0.3125rem 1.25rem #8d8d8d;} /**/ .ag_2 {padding:9.375rem 0 12.5rem; text-align:center;} .ag_2 .main {} .ag_2 .text {} .ag_2 .text p {margin:0 auto 6.25rem; font-size:2rem; width:70%;} .ag_2 ul {display:flex; flex-wrap:wrap; justify-content:space-between;} .ag_2 ul li {width:33.333333%;} .ag_2 ul li .cell {} .ag_2 ul li img {display:block; width:9.375rem; height:auto; margin:auto;} .ag_2 ul li h3 {margin-top:1.875rem; font-size:1.75rem; font-weight:normal;} /**/ .ag_3 {padding:9.375rem 0 3.125rem; text-align:center; background:#f1f1f1;} .ag_3 h2 {font-size:4.5rem;} .ag_3 .img {} .ag_3 .img .lr {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2.5rem auto 0;} .ag_3 .img .lr h3 {font-size:2.75rem; color:#00b1ad;} .ag_3 .img .lr .line {margin:1.25rem auto 1.25rem; width:80%; height:1px; background:#000000;} .ag_3 .img .lr p {font-size:1.125rem; color:#333333; line-height:1.4;} .ag_3 .img .lr h4 {display:inline-block; position:relative; line-height:1; font-size:7.5rem;} .ag_3 .img .lr h4 i {display:inline-block; position:absolute; right:-1.25rem; top:0.625rem; width:0.625rem; height:0.625rem;} .ag_3 .img .lr h4 i::before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:1.5px; background:#000000;} .ag_3 .img .lr h4 i::after {content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:1.5px; height:100%; background:#000000;} .ag_3 .img .lr .l {width:50%;} .ag_3 .img .lr .l h3 {margin-bottom:2.5rem;} .ag_3 .img .lr .l p {width:50%; margin:auto;} .ag_3 .img .lr .r {width:50%;} .ag_3 .img .lr .r .cbox {display:flex; flex-wrap:wrap; justify-content:space-between;} .ag_3 .img .lr .r .c {width:50%;} .ag_3 .img .citys {} /**/ .ag_4 {padding:9.375rem 0; text-align:center;} .ag_4 .shead {} .ag_4 .shead h2 {font-size:4.5rem; width:70%; margin:auto;} .ag_4 .shead p {width:70%; font-size:1.75rem; margin:2.5rem auto 3.125rem;} .ag_4 h2 {font-size:7.5rem;} .ag_4 h3 {font-size:2.75rem; color:#00b1ad;} .ag_4 .line {margin:2.5rem auto; height:2.5rem; width:62%; position:relative; border-bottom:1px solid #333333;} .ag_4 .line .vline {width:1px; height:2.5rem; position:absolute; left:50%; bottom:0; background:#333333;} .ag_4 .text {margin:auto; width:75%; overflow:hidden;} .ag_4 .text h2 {font-size:4.5rem; display:inline-block; position:relative; color:#333333; line-height:1.2;} .ag_4 .text h2 i {display:inline-block; position:absolute; right:-20px; top:0.625rem; width:0.625rem; height:0.625rem;} .ag_4 .text h2 i::before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:1.5px; background:#000000;} .ag_4 .text h2 i::after {content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:1.5px; height:100%; background:#000000;} .ag_4 .text p {font-size:1.5rem;} .ag_4 .l {float:left; width:50%;} .ag_4 .r {float:left; width:50%;} .ag_4 .desc {width:70%; margin:5rem auto 0; font-size:1.75rem;} /**/ .ag_5 {padding:9.375rem 0; text-align:center; color:#ffffff; background:url("images/ag_4.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .ag_5 h2 {font-size:4.5rem;} .ag_5 h3 {font-size:2.75rem; margin-bottom:6.25rem;} .ag_5 p {font-size:1.75rem; width:60%; margin:auto;} /**/ .ag_6 {padding:9.375rem 0; text-align:center;} .ag_6 .shead {margin-bottom:2.5rem;} .ag_6 .shead h2 {font-size:4.5rem; color:#00b1ad;} .ag_6 ul {display:flex; flex-wrap:wrap; margin:auto; width:80%;} .ag_6 ul li {width:50%; padding:0.625rem; position:relative;} .ag_6 ul li .cell {padding:3.75rem 2.5rem; height:100%; border:2px solid rgba(0, 0, 0, 0.05);} .ag_6 ul li p {font-size:1.375rem; line-height:1.4;} .ag_6 ul li h3 {font-size:1.75rem; margin:1.25rem 0;} .ag_6 ul li span {display:block; font-size:1rem;} .ag_6 ul li .icon {position:absolute; right:1.25rem; bottom:1.25rem; width:2.25rem; height:2.25rem; background-size:100% auto; background-repeat:no-repeat; background-position:right bottom;} /**/ .ag_7 {padding:6.25rem 0; background:#f8f8f8;} .ag_7 h2 {font-size:4.5rem; text-align:center;} .about_timeline {padding:6.25rem 0 0;} .about_timeline .community-carousel {width:100%; position:relative;} .about_timeline .community-carousel::before {content:""; width:100%; height:2px; position:absolute; left:0; top:8.5625rem; background:#00B0AD;} .about_timeline .community-carousel .swiper-slide {width:30%;} .about_timeline .community-carousel .swiper-slide .slide-holder {transition:all 0.3s;} .about_timeline .community-carousel .swiper-slide .slide-holder:hover {color:#00B0AD;} .about_timeline .community-carousel .swiper-slide-prev {} .about_timeline .community-carousel .swiper-slide .author-wrap {position:relative; padding:0 0 0 2.5rem;} .about_timeline .community-carousel .swiper-slide .author-wrap::before {content:""; position:absolute; left:2.5rem; bottom:-1.6875rem; border-radius:100%; width:1.25rem; height:1.25rem; background:#00B0AD;} .about_timeline .community-carousel .swiper-slide .author-wrap .name {display:block; height:2.5rem; font-size:1.375rem; font-weight:bold;} .about_timeline .community-carousel .swiper-slide .author-wrap .role {display:block; height:5rem; font-size:4rem; font-weight:bold;} .about_timeline .community-carousel .swiper-slide p {width:80%; font-size:1.125rem; padding:2.5rem 0 0 2.5rem;} .about_timeline .community-carousel .swiper-slide-active {} .about_timeline .community-carousel .swiper-slide-active .slide-holder {color:#00B0AD;} .about_timeline .community-carousel .swiper-slide-active .slide-holder .role {} .about_timeline .community-carousel .swiper-slide-next .slide-holder {transform-origin:50% 50% 0;} .about_timeline .community-carousel .swiper-slide-prev .slide-holder {transform-origin:50% 50% 0;} .about_timeline .community-carousel .swiper-slide-active .slide-holder , .about_timeline .community-carousel .swiper-slide-next .slide-holder , .about_timeline .community-carousel .swiper-slide-prev .slide-holder {} .about_timeline .community-carousel .swiper-pagination {width:100%; text-align:center;} .about_timeline .community-carousel .swiper-pagination span {opacity:1; margin:0 0.4375rem; background:#424882;} .about_timeline .community-carousel .swiper-pagination .swiper-pagination-bullet-active {background: #FFFFFF;} .about_timeline .community-carousel .swiper-btn-next, .about_timeline .community-carousel .swiper-btn-prev {position:absolute; width:1.125rem; height:2rem; z-index:0.625rem; opacity:0.8; cursor:pointer; transition: all 0.3s ease;} .about_timeline .community-carousel .swiper-btn-next:hover, .about_timeline .community-carousel .swiper-btn-prev:hover {opacity:1; transform:scale(1.2);} .about_timeline .community-carousel .swiper-btn-prev {left:0; top:50%; margin-top:-1rem;} .about_timeline .community-carousel .swiper-btn-next {right:0; top:50%; margin-top:-1rem;} .about_timeline .community-carousel .swiper-slide-active .slide-holder {} /****************************************/ /* news */ /****************************************/ /**/ .sel_news {} .sel_news .news_list_wrap {display:flex; flex-wrap:wrap; justify-content:space-between; padding-top:5rem;} /**/ .news_list {width:80%; border-right:1px solid #f2f2f2;} .news_list ul {padding-right:5rem;} .news_list ul li {margin:0 0 5rem 0;} .news_list ul li:last-child {margin:0;} .news_list ul li a {display:block;} .news_list ul li a .cell {display:flex; flex-wrap:wrap; justify-content:space-between;} .news_list ul li a .cover {width:40%; overflow:hidden;} .news_list ul li a .cover span {display:block; background-color:rgba(0, 0, 0, 0.02); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s ease;} .news_list ul li a .text {width:60%; padding-left:2.5rem;} .news_list ul li a .text h2 {font-size:1.375rem; margin-bottom:0.625rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .news_list ul li a .text span {font-size:0.875rem; opacity:0.3;} .news_list ul li a .text p {margin-top:1.25rem; font-size:1rem; color:#4d4d4d; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;} .news_list ul li a:hover .cover span {transform:scale(1.05,1.05);} /****************************************/ /* news detail */ /****************************************/ /**/ .sel_news_detail {} .sel_news_detail .navigation {border-bottom:1px solid #f2f2f2;} /**/ .news_detail {margin:6.25rem auto 0; padding:9.375rem 0; width:80%; font-size:1.125rem; line-height:2;} .news_detail .title {margin-bottom:3.75rem;} .news_detail .title h1 {text-align:center; font-size:2.25rem; line-height:1.2;} .news_detail .title p {display:none; margin:0; text-align:center; font-size:0.875rem; color:#b2b2b2;} .news_detail p {margin-bottom:1.25rem; font-size:1.125rem;} .news_detail img {display:inline-block; width:100%!important; height:auto!important;} .news_detail video {width:100%;} .news_detail .note {display:inline-block; width:100%; font-size:0.875rem; text-align:center; font-style:italic; line-height:1.4; opacity:0.3;} .news_detail .quote_source {display:block; width:100%; font-size:0.875rem; font-style:italic; line-height:1.4; opacity:0.3;} .news_detail .style_1 {display:inline-block; width:100%; text-align:center;} .news_detail .style_1 strong {display:block; font-size:1.875rem; line-height:1;} .news_detail .style_1 em {font-size:1rem; font-style:normal; line-height:1;} .news_detail h2 {font-size:1.875rem; line-height:1.4;} /****************************************/ /* events */ /****************************************/ /**/ .sel_events {} .sel_events .temp_banner {background-position:center top;} /**/ .events_tab {} .events_tab .main {display:flex; justify-content:center;} .events_tab a {display:flex; justify-content:center; align-items:center; margin:1.25rem 0.625rem; padding:0 1.875rem; width:auto; height:2.75rem; font-size:0.875rem; background:#f8f8f8; overflow:hidden; transition:background 0.3s , color 0.3s;} .events_tab a:hover, .events_tab a.active {color:#FFFFFF; background:#009FAB;} /**/ .events_list {padding:4.5rem 0; background:#f5f5f5;} .events_list ul {display:flex; justify-content:flex-start; flex-wrap:wrap; margin:-1.25rem;} .events_list ul li {width:50%; padding:1.25rem;} .events_list ul li a {display:block; padding:1.75rem; height:100%; cursor:default; background:#FFFFFF;} .events_list ul li a .cell {display:flex; justify-content:space-between; align-items:flex-start;} .events_list ul li a .cover {width:40%;} .events_list ul li a .cover span {display:block; width:100%; padding-top:56.25%; background-color:rgba(0, 0, 0, 0.02); background-position:center center; background-repeat:no-repeat; background-size:cover;} .events_list ul li a .text {width:60%; padding-left:1.75rem;} .events_list ul li a .text .tag {display:flex; justify-content:flex-start; flex-wrap:wrap;} .events_list ul li a .text .tag i {display:inline-block; margin:0 0.625rem 0.625rem 0; padding:0.25rem 0.625rem; font-size:0.625rem; font-style:normal; white-space:nowrap; color:#FFFFFF;} .events_list ul li a .text .tag i:last-child {margin-right:0;} .events_list ul li a .text .tag i.type_1 {background:#009DA9;} .events_list ul li a .text .tag i.type_2 {background:#009DA9;} .events_list ul li a .text .tag i.type_3 {background:#009DA9;} .events_list ul li a .text .tag i.type_4 {background:#009DA9;} .events_list ul li a .text .tag i.type_5 {background:#F6AB00;} .events_list ul li a .text .tag i.type_6 {background:#00923F;} .events_list ul li a .text .tag i.type_7 {background:#009DA9;} .events_list ul li a .text .tag i.type_8 {background:#8A2B91;} .events_list ul li a .text h2 {font-size:1.125rem; margin:0 0 0.3125rem;} .events_list ul li a .text p {margin-bottom:0.75rem; font-size:0.875rem; color:rgba(0,0,0,0.5); line-height:1.4;} .events_list ul li a .text span {display:flex; align-items:center; font-size:0.75rem;} .events_list ul li a .text span em {display:block; margin:0 0.625rem; width:1px; height:0.75rem; background:rgba(0, 0, 0, 0.2);} /****************************************/ /* products */ /****************************************/ /**/ .sel_products {} .sel_products .page_title {padding:18.75rem 0 6.25rem; text-align:left;} .sel_products .temp_main {background:#f5f5f5;} /**/ #anchor_list_cate{display:none; position:fixed; left:0; top:4.375rem; z-index:9;} #anchor_list_cate.target_fix {display:block;} /**/ .p_group {padding:1.875rem 0; background:#f5f5f5;} .p_group h2 {font-size:1.375rem;} .p_group .sub {} .p_group ul {display:flex; flex-wrap:wrap; margin:1.25rem -0.625rem;} .p_group ul li {padding:0.625rem; width:25%;} .p_group ul li .cell {padding:2.5rem 1.25rem; display:block; height:100%; position:relative; background:#ffffff;} .p_group ul li a {} .p_group ul li .tag {display:block; color:#ffffff; font-size:0.75rem; padding:0.375rem 0.3125rem; background:#F6AB00; position:absolute; right:0.625rem; top:0.625rem;} .p_group ul li .cover {width:50%; margin:1.25rem auto;} .p_group ul li .cover span {display:block; transform:scale(0.95,0.95); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s ease;} .p_group ul li .desc {text-align:center;} .p_group ul li .desc h4 {font-size:1.125rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .p_group ul li .desc p {font-size:0.875rem; color:rgba(0, 0, 0, 0.4); text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .p_group ul li a:hover .cover span {transform:scale(1.0,1.0);} .p_group ul li .btn_area {margin-top:1.875rem; text-align:center;} .p_group ul li .btn_area a.btn {width:calc(100% - 2.5rem);} /**/ .p-g-long {} .p-g-long ul li {width:100%;} .p-g-long ul li a {padding:0;} .p-g-long ul li a img {display:block;} /****************************************/ /* products: veterinary */ /****************************************/ /**/ .sel_products_veterinary {} /**/ .sel_products_veterinary .spv {margin-top:6.25rem; height:31.25rem;} .sel_products_veterinary .spv .swiper-slide {cursor:move;cursor:grab;background-color:#009FAB; background-attachment:scroll; background-position:center center; background-size:cover; overflow:hidden;} .sel_products_veterinary .spv .swiper-slide .text { position:absolute; z-index:3; right:4.375rem; top:50%; transform:translateY(-50%); width:45%; margin-right:1.25rem; padding-right:1.25rem; color:#ffffff; opacity:0;} .sel_products_veterinary .spv .swiper-slide .text h1 {font-size:3.5rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .sel_products_veterinary .spv .swiper-slide .text p {display:none; margin:0; font-size:2rem; line-height:1;} .sel_products_veterinary .spv .swiper-slide .mask {width:100%; height:100%; position:absolute; z-index:2; left:0; top:0; background:#000000; opacity:0;} .sel_products_veterinary .spv .swiper-slide-active .text {opacity:1; margin-right:0; -webkit-transition-delay:1s;transition-delay:1s;-webkit-transition-duration:1s; transition-duration:1s;/* Safari 5.1 - 6.0 */} .sel_products_veterinary .spv .swiper-pagination {bottom:1.25rem;} /**/ .sel_products_veterinary .use_case {padding:6.25rem 0 3.75rem; border-bottom:1px solid #F2F2F2; text-align:center;} .sel_products_veterinary .use_case .inner {} .sel_products_veterinary .use_case h2 {font-size:2.75rem; width:60%; margin:auto;} .sel_products_veterinary .use_case ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2.5rem -0.625rem -0.625rem;} .sel_products_veterinary .use_case ul li {width:20%; padding:0.625rem;} .sel_products_veterinary .use_case ul li .cell {} .sel_products_veterinary .use_case ul li .cover {margin-bottom:0.625rem;} .sel_products_veterinary .use_case ul li .cover span {display:block; background-position:center center; background-repeat:no-repeat; background-size:cover;} .sel_products_veterinary .use_case ul li .text {} .sel_products_veterinary .use_case ul li .text p {font-size:1.125rem;} /**/ .sel_products_veterinary .anchor_list {display:none!important;} .sel_products_veterinary .p_group {padding:0;} .sel_products_veterinary .p_group h2 {padding:2.5rem 0; font-size:2.75rem; text-align:center; background:#FFFFFF;} .sel_products_veterinary .pg_inner {padding:2.5rem 0;} /**/ .sel_products_veterinary .vlt_wrap {padding:0 0 1.875rem; background:#FFFFFF;} .sel_products_veterinary .v_list_tab {padding-left:1.25rem;} .sel_products_veterinary .v_list_tab .swiper-wrapper {justify-content:center;} .sel_products_veterinary .v_list_tab .swiper-slide {margin:0 0.625rem; width:auto!important; background:#f8f8f8; transition:all 0.3s ease-out 0s;} .sel_products_veterinary .v_list_tab .swiper-slide:hover {color:#ffffff; background:#009FAB;} .sel_products_veterinary .v_list_tab .swiper-slide.on {color:#ffffff; background:#009FAB;} .sel_products_veterinary .v_list_tab .swiper-slide .t_list {display:flex;} .sel_products_veterinary .v_list_tab .swiper-slide .text {} .sel_products_veterinary .v_list_tab .swiper-slide .text span {display:flex; justify-content:center; align-items:center; padding:0 1.25rem; cursor:pointer; text-align:center; width:auto; height:2.75rem; font-size:0.875rem; overflow:hidden;} .sel_products_veterinary .v_list_tab_wrap {visibility:hidden; opacity:0; height:0;} /****************************************/ /* service */ /****************************************/ /**/ .sel_service {} /**/ .support_box {} .support_box img {display:block; margin:auto;} .support_box .world_map {padding-top:3.125rem;} .support_box .anchor {top:calc(-8.125rem + 1px);} /**/ .service_type {padding:1.25rem 0;} .service_type ul {display:flex; justify-content:center; flex-wrap:wrap; margin:-0.625rem;} .service_type ul li {width:25%; padding:0.625rem; text-align:center; color:#ffffff;} .service_type ul li a {display:block; padding:2.5rem 0; color:#ffffff; background:#f8f8f8; transition:none;} .service_type ul li a .cell {position:relative; display:block; transition:all 0.3s;} .service_type ul li a span {display:block; width:4rem; height:4rem; margin:auto; background-position:center center; background-repeat:no-repeat; background-size:cover;} .service_type ul li a span img {width:100%;} .service_type ul li p {margin-top:0.625rem; line-height:1.6; font-size:1.125rem; color:#333333;} #s1 ul li a:hover .inner {z-index:2; transform:translate3d(0,-0.625rem,0); transition-delay:0.05s; transition-duration:0.35s;} #s2 ul li a:hover .inner {opacity:0.5;} #s2 {display:none; position:fixed; left:0; top:4.375rem; z-index:9; width:100%; background:#ffffff;} #s2 ul {margin:0; text-align:center;} #s2 ul li {padding:0; width:auto; display:inline-block;} #s2 ul li a {padding:1rem 2.5rem; background:none;} #s2 ul li a span {width:1.75rem; height:1.75rem;} #s2 ul li p {display:none;} #s2.target_fix {display:block; padding:0; box-shadow:0 1.25rem 2.5rem rgba(0,0,0,0.05);} /**/ .sb_1 {padding:6.25rem 0; text-align:center; background:#e9edef url("images/sb_1_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .sb_1 h2 {font-size:2.75rem; margin-bottom:2.5rem;} /**/ .sb_2 { padding:6.25rem 0; text-align:center; background:#e9edef url("images/sb_2_bg.jpg") no-repeat scroll right top / 100% auto; background-size:cover;} .sb_2 .main {} .sb_2 .text {padding:6.25rem 2.5rem 5rem; width:50%; background:rgba(255,255,255,0.96);} .sb_2 .text h2 {font-size:2.75rem; margin-bottom:1.875rem;} .sb_2 .text p {font-size:1.375rem; font-weight:bold; margin:auto;} .sb_2 .text .t {margin-bottom:5rem;} .sb_2 .text h3 {font-size:2rem; margin-bottom:1.25rem;} .sb_2 .text .b {margin:0;} .sb_2 .text .b p {font-size:1.125rem; font-weight:normal;} .sb_2 .text a.btn {display:none; margin-top:3.75rem; cursor:help;} .sb_2 .dlist { margin-top:2.5rem; padding:1.25rem 0 0; border-top:1px solid #e0e0e0;} .sb_2 .dlist ul {} .sb_2 .dlist ul li {padding:0.3125rem 0.625rem 0.3125rem 1.25rem; position:relative; overflow:hidden;} .sb_2 .dlist ul li:hover {background:#f5f5f5;} .sb_2 .dlist ul li::before {content:""; width:0.25rem; height:0.25rem; background:#cccccc; position:absolute; left:0; top:50%; transform:translateY(-50%); border-radius:100%;} .sb_2 .dlist ul li p {margin:0; color:#4d4d4d; font-weight:normal; text-align:left; width:90%; font-size:1.125rem; } .sb_2 .dlist ul li a { display:block; width:2.5rem; height:2rem; position:absolute; right:0; top:50%; transform:translateY(-50%); color:#00b1ad; line-height:1.8; background:url("images/download.svg") no-repeat scroll center center / 45% auto;} .sb_2 .dlist ul li a:hover {opacity:0.5;} /**/ .sb_3 {padding:9.375rem 0 6.25rem; text-align:center;} .sb_3 .shead {width:60%; margin:0 auto 5rem;} .sb_3 .shead h2 {font-size:2.75rem; margin-bottom:1.25rem;} .sb_3 .shead p {font-size:1.375rem;} .sb_3 ul {} .sb_3 ul li {} .sb_3 ul li .cell {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .sb_3 ul li .cover {width:50%;} .sb_3 ul li .cover span {display:block; width:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .sb_3 ul li .text {width:50%; padding:0 0 0 6%; text-align:left;} .sb_3 ul li .text h3 {font-size:1.75rem; margin-bottom:1.25rem;} .sb_3 ul li .text p {font-size:1.375rem;} .sb_3 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} .sb_3 ul li:nth-child(2n) .text {padding:0 6% 0 0;} /**/ .sb_4 {padding:0 0 6.25rem 0; text-align:center;} .sb_4 .text {margin-bottom:2.5rem;} .sb_4 .text h2 {font-size:2.75rem; margin-bottom:1.25rem;} .sb_4 .text p {font-size:1.375rem; width:60%; margin:auto;} /**/ .sb_5 {padding:9.375rem 0; text-align:center; background:#f8f8f8;} .sb_5 .text { text-align:center; margin-bottom:1.875rem;} .sb_5 .text h2 { font-size:2.75rem;} .sb_5 .text p {font-size:1.375rem;} .sb_5 .info {margin:auto; overflow:hidden;} .sb_5 .info .i {display:flex; flex-wrap:wrap; justify-content:center;} .sb_5 .info img {display:block; margin:0 1.25rem 0 0; width:8.125rem;} .sb_5 .info p {text-align:left; font-size:1rem; line-height:2;} /****************************************/ /* join us */ /****************************************/ /**/ .sel_join_us {} /**/ .career_type {padding-top:1.25rem;} .career_type ul {margin:-0.625rem; display:flex; flex-wrap:wrap;} .career_type ul li {padding:0.625rem; width:25%; text-align:center; color:#ffffff;} .career_type ul li a {display:block; padding:2.5rem 0; color:#ffffff; background:#f8f8f8; cursor:default;} .career_type ul li a .cell {position:relative; display:block;} .career_type ul li a span {display:block; width:4rem; height:4rem; margin:auto; background-position:center center; background-repeat:no-repeat; background-size:cover;} .career_type ul li p {margin-top:0.625rem; padding:0 0.625rem; line-height:1.6; font-size:1.125rem; color:#333333; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} /**/ .cg_1 {padding:6.25rem 0; text-align:center;} .cg_1 h2 {font-size:4.5rem; margin-bottom:1.25rem;} .cg_1 h3 {font-size:1.375rem; font-weight:normal; line-height:1.8; width:50%; margin:auto;} .cg_1 .tg {margin-top:3.125rem;} .cg_1 .tg h3 {font-size:2.75rem; line-height:1.4; font-weight:bold;} .cg_1 .tg .line {position:relative; margin:2.5rem auto; width:60%; height:2.5rem; border-bottom:1px solid #333333;} .cg_1 .tg .line .vline {position:absolute; left:50%; bottom:0; width:1px; height:2.5rem; background:#333333;} .cg_1 .tg .text {display:flex; justify-content:space-between; width:60%; margin:auto;} .cg_1 .tg .text h2 {font-size:4.5rem; color:#333333;} .cg_1 .tg .text p {font-size:1.5rem; line-height:1.2;} .cg_1 .tg .text .l {width:calc(50% - 1.25rem);} .cg_1 .tg .text .l p {} .cg_1 .tg .text .r {width:calc(50% - 1.5rem);} .cg_1 .tg .text .r p {} /**/ .cg_list {padding:3.75rem 0; background:#f2f2f2;} .cg_list .t {display:flex; flex-wrap:wrap; margin:-0.625rem;} .cg_list .t li {width:33.333333%; padding:0.625rem;} .cg_list .t li .cell {padding:2.5rem; height:100%; background:#ffffff;} .cg_list .t li h3 {font-size:2.75rem; margin-bottom:1.25rem;} .cg_list .t li p {font-size:1.125rem; font-weight:bold; margin-bottom:1.25rem;} .cg_list .t li p span {display:block; line-height:1.4; padding:0.625rem 0; position:relative;} .cg_list .t li p span::before {display:none; content:""; position:absolute; left:0; top:1.25rem; width:0.25rem; height:0.25rem; border-radius:100%; background:rgba(0, 0, 0, 0.3);} .cg_list .t li a {} .cg_list .b {display:flex; flex-wrap:wrap; margin:0.625rem -0.625rem;} .cg_list .b li {width:33.333333%; padding:0.625rem;} .cg_list .b li .cell {position:relative; padding:3.75rem 2.5rem; height:100%; background:#ffffff;} .cg_list .b li .cell::before {content:""; position:absolute; left:2.5rem; top:1.25rem; width:1.25rem; height:1.25rem; background:url("images/quote_l_green.png") no-repeat scroll center center / 100% auto;} .cg_list .b li .cell::after {content:""; position:absolute; right:2.5rem; bottom:1.25rem; width:1.25rem; height:1.25rem; background:url("images/quote_r_green.png") no-repeat scroll center center / 100% auto;} .cg_list .b li:nth-child(1) .cell {background:#f8f8f8;} .cg_list .b li:nth-child(2) {width:66.666667%;} .cg_list .b li:nth-child(2) .cell {} .cg_list .b li:nth-child(2) .cell p {} .cg_list .b li:nth-child(3) {width:50%;} .cg_list .b li:nth-child(4) {width:50%;} .cg_list .b li:nth-child(4) .cell {background:#f8f8f8;} .cg_list .b li p {} .cg_list .link {display:flex; align-items:center; padding:2.5rem 0;} .cg_list .link a.linkedin {display:block; margin:0 2.5rem 0 0;} .cg_list .link .cu {} .cg_list .link .cu a {text-decoration:underline;} .cg_list .link span { display:block; font-size:1.125rem; font-weight:bold; margin-bottom:2px;} .cg_list .link img {display:block; width:9.375rem;} /****************************************/ /* single_page */ /****************************************/ /**/ .sel_single_page {} .sel_single_page .navigation {border-bottom:1px solid #f2f2f2;} /* terms */ .terms_box {margin:6.25rem auto 0; padding:9.375rem 0; width:60%;} .terms_box h1 {text-align:center; font-size:2rem; margin-bottom:2.5rem;} .terms_box .col {padding:1.25rem 0;} .terms_box h2 {font-size:1.375rem; margin-bottom:1.25rem;} .terms_box p {font-size:1rem; margin-bottom:0.625rem;} /****************************************/ /* products detail */ /****************************************/ /**/ .sel_products_detail {} .sel_products_detail .navigation {border-bottom:1px solid rgba(0, 0, 0, 0.05);} .sel_products_detail .p_detail {margin-top:6.25rem;} /**/ .sel_products_detail .swiper-container {padding:4rem 0;} .sel_products_detail .swiper-container .swiper-wrapper {align-items:flex-start;} .sel_products_detail .swiper-container .img_box {display:flex; justify-content:center; align-items:center; position:relative; width:100%; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .sel_products_detail .swiper-container .img_box img {width:80%;} .sel_products_detail .swiper-container .text {margin-top:1.25rem; text-align:center; color:#ffffff;} .sel_products_detail .swiper-container .text h4 {font-size:1rem;} .sel_products_detail .swiper-container .text p {font-size:0.875rem;} .sel_products_detail .swiper-button-next, .sel_products_detail .swiper-button-prev {} /**/ .sel_products_detail .p_detail_normal {padding:6.25rem 0 0;} .sel_products_detail .p_detail_normal .text {margin-bottom:2.5rem; text-align:center;} .sel_products_detail .p_detail_normal .text h2 {font-size:4rem;} .sel_products_detail .p_detail_normal .text h3 {font-size:1.75rem;} .sel_products_detail .p_detail_normal .img {margin-bottom:5rem;} .sel_products_detail .p_detail_normal .img img {margin:auto; display:block; width:70%;} .sel_products_detail .p_detail_normal .img p {margin:2.5rem auto 0; font-size:1.375rem; width:70%; line-height:1.8;} .sel_products_detail .p_detail_normal .img p em.note {} .sel_products_detail .p_detail_normal .img p em.note strong {display:block; padding:2px 0; font-size:0.75rem; font-weight:normal; line-height:1; opacity:0.5;} .sel_products_detail .p_detail_normal .img .related {width:70%; display:flex; justify-content:center; margin:1.875rem auto 0;} .sel_products_detail .p_detail_normal .img .related li {padding:0 2.5rem; text-align:center;} .sel_products_detail .p_detail_normal .img .related li img {width:100%; max-width:200px; margin-bottom:1.25rem;} .sel_products_detail .p_detail_normal .img .related li h4 {font-size:1.375rem;} .sel_products_detail .p_detail_normal .img .related li p {margin:0 0 1.25rem; font-size:1rem; width:100%;} .sel_products_detail .p_detail_normal .img .related li a {font-size:0.875rem; color:#00a0a9;} .sel_products_detail .p_detail_normal .pdn_sc {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .sel_products_detail .p_detail_normal .pdn_sc h2 {font-size:2.75rem; color:#ffffff; text-align:center;} .sel_products_detail .p_detail_normal .pdn_sc .text {margin-bottom:0;} /****************************************/ /* products detail: X5 */ /****************************************/ /**/ .sel_products_detail_1 {} /**/ .d1_1 {padding:6.25rem 0; background:#000000;} .d1_1 .main {position:relative;} .d1_1 .text {position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:100%; color:#ffffff; text-align:center;} .d1_1 .text h1 {font-size:4.5rem;} .d1_1 .text p {font-size:2.75rem;} .d1_1 img {display:block; margin:auto; width:60%; height:auto;} /**/ .d1_2 {padding:12.5rem 0; background:url("../images/p1/002_bg.jpg") no-repeat scroll right bottom / 100% auto; background-size:cover;} .d1_2 .main {display:flex; justify-content:flex-end;} .d1_2 .text {width:50%;} .d1_2 .text p {font-size:1.375rem;} /**/ .d1_3 {padding:12.5rem 0 0; background:#000000;} .d1_3 .text {color:#ffffff; text-align:center;} .d1_3 .text h1 {font-size:4rem; margin-bottom:3.125rem;} .d1_3 .text p {margin:auto; width:80%; font-size:1.375rem;} /**/ .d1_4 {padding:6.25rem 0; background:#000000;} .d1_4 .text {color:#ffffff; text-align:center; width:70%; margin:0 auto 6.25rem;} .d1_4 .text h1 {font-size:4rem; margin-bottom:2.5rem;} .d1_4 .text p {font-size:1.375rem;} .d1_4 ul {width:50%; margin:auto; overflow:hidden;} .d1_4 ul li {color:#ffffff; margin:0 0 4.6875rem;} .d1_4 ul li h3 {font-size:2rem; margin-bottom:1.25rem;} .d1_4 ul li p {font-size:1.125rem;} /**/ .d1_5 {padding:6.25rem 0; background:#333333;} .d1_5 .text {text-align:center; color:#ffffff;} .d1_5 .text h1 {font-size:4rem; margin-bottom:2.5rem;} .d1_5 .text p {font-size:1.375rem;} .cover_up_move {margin:0 auto 7.5rem; max-width:100%; position:relative;} .cum {position:absolute; left:0; top:0; opacity:0; background-size:75rem 37.5rem;} .cum img {display:block; width:100%; height:auto;} .cum_1 {z-index:1; animation:sliderArrow 4s ease-in-out 0.2s 1 alternate forwards; animation-play-state:paused;} .cum_2 {z-index:2; animation:sliderArrow 3s ease-in-out 0.2s 1 alternate forwards; animation-play-state:paused;} .cum_3 {z-index:3; animation:sliderArrow 2s ease-in-out 0.2s 1 alternate forwards; animation-play-state:paused;} .cum_4 {position:static; z-index:4; animation:sliderArrow 1s ease-in-out 0.2s 1 alternate forwards; animation-play-state:paused;} .move {animation-play-state:running;} /**/ @keyframes sliderArrow { 0% { opacity:0; } 100% { opacity:1; } } /**/ .d1_6 {padding:9.375rem 0;} .d1_6 ul {} .d1_6 ul li {display:flex; align-items:center;} .d1_6 ul li:nth-child(even) {flex-direction:row-reverse;} .d1_6 ul li .l {width:50%;} .d1_6 ul li .l img {} .d1_6 ul li .r {width:50%; padding:3.125rem 5rem;} .d1_6 ul li .r h2 {font-size:1.375rem; margin-bottom:1.25rem;} .d1_6 ul li .r p {font-size:1.125rem;} .d1_6 ul li:nth-child(even) .r {padding-left:0;} /****************************************/ /* products detail: HD-500 */ /****************************************/ /**/ .sel_products_detail_2 {} /**/ .d2_1 {padding:9.375rem 0; background:#000000;} .d2_1 .text {text-align:center;} .d2_1 h1 {font-size:4.5rem; color:#ffffff;} .d2_1 img {width:70%; margin:2.5rem auto;} .d2_1 p {font-size:1.375rem; color:#ffffff; width:70%; margin:auto;} /**/ .d2_2 {padding:6.25rem 0; text-align:center;} .d2_2 .text {width:70%; margin:0 auto 5rem;} .d2_2 h2 {font-size:2.75rem;} .d2_2 h3 {font-size:1.375rem;} .d2_2 img {margin:2.5rem 0;} .d2_2 p {font-size:1.375rem;} .d2_2 ul {margin:auto; overflow:hidden;} .d2_2 ul li {margin:auto; padding:5rem 0;} .d2_2 ul li:nth-child(1) {background:#f2f2f2;} .d2_2 ul li .w {width:60%; margin:auto; max-width:1200px;} .d2_2 ul li h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d2_2 ul li p {font-size:1.375rem;} /****************************************/ /* products detail: SC 8000 */ /****************************************/ /**/ .sel_products_detail_3 {} /**/ .d3_1 { padding:100px 0 0; overflow:hidden;} .d3_1 .text { margin:0 0 20px; text-align:center;} .d3_1 h1 { font-size:64px;} .d3_1 p { font-size:28px;} .d3_1 .img { margin:auto; width:50%; height:500px; background:url("../images/p3/001.jpg") no-repeat scroll top center / 100% auto;} /**/ .d3_2 { padding:100px 0px; color:#ffffff; text-align:center; background:#80abc7;} .d3_2 ul {} .d3_2 ul li {float:left; width:25%;} .d3_2 ul li .inner {padding:0 20px;} .d3_2 ul li img {width:150px; height:150px; margin:0 auto 30px;} .d3_2 ul li h2 {margin-bottom:20px; font-size:18px;} .d3_2 ul li p {text-align:left;} /**/ .d3_3 { padding:150px 0 0;} .d3_3 .text {float:left; width:45%; margin-top:100px;} .d3_3 .text h1 {margin-bottom:40px;} .d3_3 .text p {line-height:2.4;} .d3_3 .img {float:right; width:55%; height:620px; background:url("../images/p3/003.jpg") no-repeat scroll top center / 100% auto;} /**/ .d3_4 { padding:150px 0; color:#ffffff; background:#333333 url("../images/p3/004.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d3_4 .text {text-align:center;} .d3_4 .text h1 {margin-bottom:60px;} .d3_4 .text img {margin:auto; width:600px; height:auto;} .d3_4 ul {margin-top:80px;} .d3_4 ul li {float:left; width:33.333333%; text-align:center;} .d3_4 ul li .inner {padding:0 50px 0 50px;} .d3_4 ul li h2 {font-size:22px; margin-bottom:20px;} .d3_4 ul li p {font-size:14px; text-align:left;} /**/ .d3_5 { padding:100px 0; color:#ffffff;} .d3_5 .img { margin:auto; width:60%; height:400px; background:url("../images/p3/005.jpg") no-repeat scroll top center / 100% auto;} .d3_5 ul {color:#333333; text-align:center; padding:60px 0 0;} .d3_5 ul li {float:left; width:25%;} .d3_5 ul li .inner {padding-right:20px;} .d3_5 ul li h2 {font-size:18px; margin-bottom:20px;} .d3_5 ul li p {text-align:left;} /**/ .d3_6 { padding:200px 0; text-align:center; color:#ffffff; background:#333333 url("../images/p3/006.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d3_6 .text {width:60%; margin:auto;} .d3_6 .text h1 {margin-bottom:40px;} .d3_6 .text p {} /**/ .d3_7 { margin-top:10px; padding:200px 0; text-align:center; color:#ffffff; background:#333333 url("../images/p3/007.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d3_7 .text {width:60%; margin:auto;} .d3_7 .text h1 {margin-bottom:40px;} .d3_7 .text p {} /****************************************/ /* products detail: E3 */ /****************************************/ /**/ .sel_products_detail_4 {} /**/ .d4_1 { padding:100px 0 0; height:800px;} .d4_1 .text { float:left; width:45%; margin-top:200px; text-align:center;} .d4_1 h1 { font-size:64px;} .d4_1 p { font-size:28px;} .d4_1 .img {float:right; width:50%; height:800px; background:url("../images/p4/001.jpg") no-repeat scroll top center / 100% auto;} /**/ .d4_2 { padding:200px 0; color:#ffffff; background:url("../images/p4/002.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d4_2 .text {float:right; width:40%;} .d4_2 .text p {font-size:18px;} .d4_2 ul {margin-top:60px;} .d4_2 ul li {float:left; width:50%; margin-bottom:10px;} /**/ .d4_3 {padding:150px 0;} .d4_3 .img {float:left; width:40%; height:550px; background:url("../images/p4/003.jpg") no-repeat scroll top center / 100% auto;} .d4_3 .text {float:right; width:60%; padding-left:40px;} .d4_3 .text ul {margin-bottom:40px;} .d4_3 .text ul li {float:left; width:25%;} .d4_3 .text ul li .inner { margin-bottom:20px; padding-right:20px;} .d4_3 .text ul li img {} .d4_3 .text h1 {margin-bottom:20px;} .d4_3 .text p {} /**/ .d4_4 {padding:150px 0; background:#f2f2f2;} .d4_4 .text {float:left; width:50%;} .d4_4 .text h1 {margin-bottom:40px;} .d4_4 .text ul {} .d4_4 .text ul li {float:left; width:50%; margin-bottom:10px;} .d4_4 .img {float:right; margin-top:-250px; width:50%; height:650px; background:url("../images/p4/004.png") no-repeat scroll top center / 100% auto;} /****************************************/ /* products detail: P50 */ /****************************************/ /**/ .sel_products_detail_5 {} /**/ .d5_1 {padding:6.25rem 0 0; color:#ffffff; position:relative; height:50rem; background:#000000 url("../images/p5/001.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d5_1::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; opacity:0.1;} .d5_1 .text {float:right; width:auto; margin-top:12.5rem; padding-right:6.25rem; text-align:center; position:relative;} .d5_1 h1 {font-size:4.5rem;} .d5_1 p {font-size:2.75rem;} /**/ .d5_2 {} .d5_2 .main {display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row-reverse;} .d5_2 .text {width:40%;} .d5_2 .text p {margin:14.375rem 0 1.25rem 0; font-size:1.375rem;} .d5_2 .img {width:60%; margin-bottom:6.25rem;} /**/ .d5_3 {padding:7.5rem 0 0; text-align:center; background:url("../images/p5/003_skin.jpg") repeat-x scroll top center;} .d5_3 .text {} .d5_3 .text h1 {margin-bottom:1.25rem;} .d5_3 .text p {margin:auto; width:70%; font-size:1.375rem; text-align:left;} .d5_3 .text ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:2.5rem -1.25rem 5rem; width:100%;} .d5_3 .text ul li {width:25%; padding:0 1.25rem;} .d5_3 .text ul li .cell {} .d5_3 .text ul li img {width:100%;} .d5_3 .text ul li p {margin-top:0.625rem; font-size:1rem; width:100%; text-align:center;} .d5_3 .img {} .d5_3 .img img {display:block;} /**/ .d5_4 {padding:7.5rem 0; color:#ffffff; text-align:center; background:#333333;} .d5_4 ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -2.5rem;} .d5_4 ul li {width:33.333333%; padding:0 2.5rem;} .d5_4 ul li .cell {} .d5_4 ul li h2 {font-size:1.125rem; margin-bottom:1.875rem;} .d5_4 ul li img {margin-bottom:1.875rem;} .d5_4 ul li p {font-size:0.875rem; text-align:left; overflow:hidden;} /**/ .d5_5 {position:relative; padding:7.5rem 0; text-align:center; background:url("../images/p5/005.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d5_5 .d55_icon {position:absolute; top:0; width:75rem;} .d5_5 .d55_icon img {display:block; width:9.375rem;} .d5_5 .text {} .d5_5 .text h1 {font-size:2.75rem; margin:0 auto 3.125rem; width:50%;} .d5_5 .text h2 {font-size:2rem; margin-bottom:1.875rem;} .d5_5 .text p {font-size:1.125rem; width:70%; margin:auto;} /**/ .d5_6 {padding:0; background:#000000;} .d5_6 ul {} .d5_6 ul li {display:flex; justify-content:space-between; flex-wrap:wrap;} .d5_6 ul li:nth-child(even) {flex-direction:row-reverse;} .d5_6 ul li .l {width:50%;} .d5_6 ul li .l img {display:block; width:100%;} .d5_6 ul li .r {width:50%; padding:6.25rem; background:#333333;} .d5_6 ul li .r h2 { color:#ffffff; font-size:2rem; margin-bottom:1.25rem;} .d5_6 ul li .r p {font-size:1rem; color:#ffffff;} /**/ .d5_7 {position:relative; padding:12.5rem 0; text-align:center; background:url("../images/p5/007.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d5_7 .d57_icon {position:absolute; top:0; width:75rem;} .d5_7 .d57_icon img {display:block; width:9.375rem;} .d5_7 .text {} .d5_7 .text h1 {font-size:2.75rem; margin:0 auto 3.125rem; width:50%;} .d5_7 .text h2 {font-size:2rem; margin-bottom:1.875rem;} .d5_7 .text p {font-size:1.125rem; width:70%; margin:auto;} /**/ .d5_8 {padding:6.25rem 0; background:#333333;} .d5_8 .main {} .d5_8 ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -1.875rem;} .d5_8 ul li {color:#ffffff; width:50%; margin:0 0 5rem; padding:0 1.875rem;} .d5_8 ul li .cell {} .d5_8 ul li h2 {margin-bottom:1.25rem;} .d5_8 ul li img {} .d5_8 ul li p {margin-top:1.25rem;} /**/ .d5_9 {position:relative; padding:12.5rem 0; text-align:center; background:url("../images/p5/009.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d5_9 .d59_icon {position:absolute; top:0; width:75rem;} .d5_9 .d59_icon img {display:block; width:9.375rem;} .d5_9 .text {} .d5_9 .text h1 {font-size:2.75rem; margin:0 auto 3.125rem; width:50%;} .d5_9 .text h2 {font-size:2rem; margin-bottom:1.875rem;} .d5_9 .text p {font-size:1.125rem; width:70%; margin:auto;} /**/ .d5_10 { padding:6.25rem 0; background:#333333;} .d5_10 ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -1.875rem;} .d5_10 ul li {color:#ffffff; width:50%; margin:0 0 5rem; padding:0 1.875rem;} .d5_10 ul li .cell {} .d5_10 ul li h2 {margin-bottom:1.25rem;} .d5_10 ul li img {} .d5_10 ul li p {margin-top:1.25rem;} /**/ .d5_11 {padding:6.25rem 0; color:#ffffff; text-align:center; background:rgba(0, 0, 0, 0.9);} .d5_11 h2 {font-size:2.75rem;} /****************************************/ /* products detail: S40 */ /****************************************/ /**/ .sel_products_detail_6 {} /**/ .d6_1 { padding:100px 0 0;} .d6_1 .text { float:left; color:#333333; width:45%; margin-top:200px; text-align:center;} .d6_1 h1 { font-size:64px;} .d6_1 p { font-size:28px;} .d6_1 .img { float:right; width:55%; height:768px; background:url("../images/p6/001.jpg") no-repeat scroll top center / 100% auto;} /**/ .d6_2 { padding:100px 0 0; background:#f2f2f2;} .d6_2 .text {float:right; width:45%; margin-top:50px;} .d6_2 .text p { margin-bottom:50px;} .d6_2 .text img {width:80%; margin:auto;} .d6_2 .img { float:left; width:45%; height:800px; background:url("../images/p6/002.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} /**/ .d6_3 { text-align:center; padding:120px 0; background:url("../images/p6/003.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} .d6_3 .text {} .d6_3 .text img {width:400px; margin:0 auto 60px;} .d6_3 .text h1 {color:#d9b766; margin-bottom:30px;} .d6_3 .text p {} /**/ .d6_4 {padding:120px 0;} .d6_4 .text {float:right; width:50%; padding-left:60px;} .d6_4 .text h1 {color:#d9b766; margin-bottom:30px;} .d6_4 .text p {} .d6_4 .text ul {margin-top:50px;} .d6_4 .text ul li {margin-bottom:30px;} .d6_4 .text ul li h3 {margin-bottom:10px; font-size:16px;} .d6_4 .text ul li p {font-size:14px;} .d6_4 .img { float:left; width:50%; height:700px; background:url("../images/p6/004.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} /**/ .d6_5 {padding:120px 0;} .d6_5 .text {float:left; width:50%; padding-right:60px;} .d6_5 .text h1 {color:#d9b766; margin-bottom:30px;} .d6_5 .text p {margin-bottom:50px;} .d6_5 .text ul {} .d6_5 .text ul li {float:left; width:50%; margin-bottom:20px;} .d6_5 .img { float:right; width:50%; height:400px; background:url("../images/p6/005.jpg") no-repeat scroll top center / 100% auto; background-size:cover;} /**/ .d6_6 {padding:40px 0 150px; text-align:center;} .d6_6 .text {} .d6_6 .text h1 {color:#d9b766; margin-bottom:30px;} .d6_6 .text p {} .d6_6 .img { margin:50px auto 0; width:80%; height:1000px; background:url("../images/p6/006.jpg") no-repeat scroll top center / 100% auto;} /****************************************/ /* products detail: S50 */ /****************************************/ /**/ .sel_products_detail_7 {} /**/ .d7_1 {padding:9.375rem 0 0; background:#000000 url("../images/p7/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d7_1 .main {display:flex; justify-content:space-between; flex-wrap:wrap;} .d7_1 .text {width:50%; margin-top:12.5rem; text-align:center;} .d7_1 h1 {font-size:4.5rem; color:#ffffff;} .d7_1 p {font-size:2.75rem; color:#ffffff;} .d7_1 .img {width:50%; text-align:center;} .d7_1 .img img {display:block; width:100%;} /**/ .d7_2 {padding:15.625rem 0; background:#000000 url("../images/p7/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d7_2 p {font-size:1.375rem; color:#ffffff; width:70%; margin:auto;} /**/ .d7_3 {display:none; padding:6.25rem 0 2.5rem;} .d7_3 .text {text-align:center;} .d7_3 h1 {margin-bottom:1.25rem; font-size:2.75rem;} .d7_3 p {font-size:1.125rem;} .d7_3 ul {display:flex; justify-content:space-between; flex-wrap:wrap;} .d7_3 ul li {margin-bottom:2.5rem; width:33.333333%;} .d7_3 ul li .inner {padding:0 3.75rem 0 0;} .d7_3 ul li h2 {margin-bottom:1.25rem; padding-bottom:0.625rem; font-size:1.75rem; border-bottom:2px solid #000000;} .d7_3 ul li img {} /**/ .d7_4 {padding:7.5rem 0 31.25rem; text-align:center; background:#f2f2f2 url("../images/p7/004_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d7_4 .text {text-align:center;} .d7_4 .text h2 {font-size:2.75rem; width:50%; margin:auto;} .d7_4 .text p {margin:2.5rem auto 0; width:70%; font-size:1.5rem;} /**/ .d7_5 {padding:9.375rem 0; background:#d0d0d0;} .d7_5 ul {display:flex; justify-content:space-between; flex-wrap:wrap;} .d7_5 ul li {width:25%; text-align:center;} .d7_5 ul li img {display:block; width:80%; margin:auto;} .d7_5 ul li h3 {margin-top:1.875rem; font-size:1.125rem;} /**/ .d7_6 {padding:9.375rem 0 6.25rem;} .d7_6 .text {position:relative;} .d7_6 p.intro {font-size:1.375rem; margin:0 auto 2.5rem; text-align:center; width:70%;} .d7_6 ul {position:absolute; left:0; top:18.75rem; width:100%; overflow:hidden;} .d7_6 ul li {float:left; width:50%; margin-bottom:7.5rem; padding:0 10%; text-align:center;} .d7_6 ul li img {display:block; margin:0 auto 1.25rem; width:4rem; height:auto;} .d7_6 ul li h4 {line-height:1;} .d7_6 ul li:nth-child(5) {width:100%; margin-top:6.25rem;} .d7_6 .bg_img {margin:auto; width:28.125rem; height:auto;} .d7_6 .intro {width:60%; margin:15.625rem auto 0; text-align:center;} .d7_6 .intro .t {margin-bottom:5rem;} .d7_6 .intro h2 {font-size:2.75rem; margin-bottom:1.875rem;} .d7_6 .intro p {font-size:1.375rem;} /**/ .d7_7 {padding:9.375rem 0 6.25rem; background:#000000;} .d7_7 .main {} .d7_7 .text {color:#ffffff;} .d7_7 .text p {font-size:1.5rem; margin:0 auto 5rem; padding:0 2.5rem; width:80%;} .d7_7 ul {display:flex; justify-content:space-between; flex-wrap:wrap; width:80%; margin:auto; color:#ffffff;} .d7_7 ul li {width:50%; margin-bottom:2.5rem; padding:0 2.5rem;} .d7_7 ul li img {display:block; padding:1.25rem; border:1px solid rgba(255,255,255,0.2);} .d7_7 ul li h4 {font-size:1.375rem; margin:1.25rem 0 0.625rem;} /**/ .d7_8 {padding:9.375rem 0 6.25rem; background:#333333;} .d7_8 ul {width:60%; margin:auto; overflow:hidden;} .d7_8 ul li {color:#ffffff; text-align:center; margin-bottom:5rem;} .d7_8 ul li h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d7_8 ul li p {font-size:1.375rem;} /**/ .d7_9 {padding:6.25rem 0; color:#ffffff; text-align:center; background:rgba(0, 0, 0, 0.9);} .d7_9 h2 {font-size:2.75rem;} /****************************************/ /* products detail: P40 */ /****************************************/ /**/ .sel_products_detail_8 {} /**/ .d8_1 {padding:200px 0 400px; background:#f2f2f2 url("../images/p8/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d8_1 .text { text-align:center; color:#333333;} .d8_1 h1 { font-size:56px; line-height:1;} .d8_1 p { font-size:28px; line-height:1; margin-top:5px;} .d8_1 h2 { font-size:50px; margin-top:20px;} /**/ .d8_2 {padding:250px 0; background:#000000 url("../images/p8/002.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d8_2 .text {text-align:center; color:#ffffff;} .d8_2 .text h1 {font-size:64px; margin-bottom:40px;} .d8_2 .text p {width:50%; margin:auto;} /**/ .d8_3 {padding:150px 0;} .d8_3 .text {} .d8_3 h1 { font-size:56px; margin-bottom:20px; text-align:center;} .d8_3 p { font-size:18px;} .d8_3 ul {margin-top:80px;} .d8_3 ul li {float:left; width:33.333333%; padding-right:60px;} .d8_3 ul li h3 {font-size:22px; margin-bottom:30px;} .d8_3 ul li img { display:block; width:100%; height:auto; margin:auto;} .d8_3 ul li h4 {margin:40px 0 10px; font-size:22px;} .d8_3 ul li p {font-size:14px; font-size:16px;} /**/ .d8_4 {padding:150px 0; background:#000000;} .d8_4 .text {color:#ffffff;} .d8_4 h1 { font-size:56px; margin-bottom:20px; text-align:center;} .d8_4 p { font-size:18px;} .d8_4 ul {margin-top:80px;} .d8_4 ul li {float:left; width:33.333333%; padding-right:30px;} .d8_4 ul li h3 {font-size:22px; margin-bottom:30px;} .d8_4 ul li img {height:auto; margin:auto;} .d8_4 ul li h4 {margin:40px 0 10px; font-size:22px;} .d8_4 ul li p {font-size:14px; font-size:16px; opacity:0.8;} .d8_4 ul li p span {display:block; height:32px; line-height:32px; position:relative;} .d8_4 ul li p span::before {content:""; width:3px; height:3px; border-radius:100%; background:rgba(255,255,255,0.5); position:absolute; left:-8px; top:50%; margin-top:-1.5px;} /**/ .d8_5 { padding:150px 0;} .d8_5 .text {position:relative;} .d8_5 h1 { font-size:56px; margin-bottom:80px; text-align:center;} .d8_5 p { font-size:18px;} .d8_5 ul { position:absolute; left:0; top:150px; overflow:hidden;} .d8_5 ul li {float:left; margin-bottom:100px; width:50%;} .d8_5 ul li h3 {font-size:22px; margin-bottom:30px;} .d8_5 ul li img {float:left; width:100px; height:auto; margin:auto;} .d8_5 ul li .rt { margin-left:100px; padding-left:20px; width:60%;} .d8_5 ul li h4 {margin:0 0 10px; font-size:22px;} .d8_5 ul li p {font-size:16px;} .d8_5 .bg_img { margin:auto; width:600px; height:600px; background:url("../images/p8/005.jpg") no-repeat scroll bottom center / 100% auto;} .d8_5 ul li:nth-child(1) {padding-left:10%;} .d8_5 ul li:nth-child(2) { padding-left:10%;} .d8_5 ul li:nth-child(2) .rt {width:100%;} .d8_5 ul li:nth-child(4) {padding-left:15%;} .d8_5 ul li:nth-child(4) .rt {width:auto;} .d8_5 ul li:nth-child(5) {padding-left:10%;} .d8_5 ul li:nth-child(6) {padding-left:10%;} .d8_5 ul li:nth-child(6) .rt {width:auto;} /**/ .d8_6 { padding:0 0 150px;} .d8_6 .text {position:relative;} .d8_6 h1 {font-size:56px; margin-bottom:80px; text-align:center;} .d8_6 ul {position:absolute; left:0; top:110px; overflow:hidden;} .d8_6 ul li {float:left; width:50%; padding:0 10%;} .d8_6 ul li img {float:left; width:auto; height:150px; } .d8_6 ul li h4 {line-height:150px;} .d8_6 .bg_img { margin:auto; width:250px; height:auto;} /**/ .d8_7 { padding:150px 0; background:#000000;} .d8_7 .text {color:#ffffff; text-align:center;} .d8_7 h1 {font-size:56px; margin-bottom:80px;} .d8_7 ul {overflow:hidden;} .d8_7 ul li {float:left; margin-bottom:20px; width:33.333333%;} .d8_7 ul li .inner {margin-right:20px; padding:20px; border:1px solid rgba(255,255,255,0.2);} .d8_7 ul li img { } .d8_7 ul li h4 { margin:20px 0; color:#ffffff; text-align:center;} /****************************************/ /* products detail: X3 */ /****************************************/ /**/ .sel_products_detail_9 {} /**/ .d9_1 {padding:100px 0; background:#f7f7f7;} .d9_1 .text { float:left; margin-top:250px; width:40%; text-align:center;} .d9_1 .text h1 {font-size:56px;} .d9_1 .text p {font-size:24px;} .d9_1 .img {float:right; width:60%;} /**/ .d9_2 {padding:300px 0; background:#000000 url("../images/p9/002.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d9_2 .text {float:right; width:40%;} /**/ .d9_3 {padding:80px 0; border-bottom:1px solid rgba(255,255,255,0.2); background:#000000;} .d9_3 .text {text-align:center; color:#ffffff;} .d9_3 .text ul {} .d9_3 .text ul li {float:left; width:50%;} .d9_3 .text ul li h2 {margin-bottom:20px;} .d9_3 .text ul li span {margin:0 4px; padding:5px 10px; font-size:14px; display:inline-block; border:1px solid rgba(255,255,255,0.5); border-radius:4px;} /**/ .d9_4 {padding:100px 0 0; background:#000000;} .d9_4 .img {float:left; width:55%;} .d9_4 .text { margin-top:50px; float:right; width:30%; color:#ffffff;} .d9_4 .text ul {} .d9_4 .text ul li {margin-bottom:40px;} .d9_4 .text ul li h3 {color:#009FAB; margin-bottom:10px; font-size:22px;} .d9_4 .text ul li p {font-size:16px; line-height:2;} /**/ .d9_5 {padding:100px 0; background:#000000 url("../images/p9/005.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d9_5 ul {float:left; width:35%;} .d9_5 ul li {float:left; width:50%;} .d9_5 ul li .inner {padding:0 20px 20px 0;} .d9_5 ul li img {display:block;} .d9_5 .text {float:left; margin-top:50px; padding-left:100px; width:50%; overflow:hidden;} /**/ .d9_6 {} .d9_6 ul {} .d9_6 ul li { margin:5px 0; padding:100px 0;} .d9_6 ul li .text {text-align:center; color:#ffffff;} .d9_6 ul li .text h2 {font-size:24px; margin-bottom:30px;} .d9_6 ul li .text p {width:50%; margin:auto;} .d9_6 ul li:nth-child(1) {background:#000000 url("../images/p9/006-1.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d9_6 ul li:nth-child(2) {background:#000000 url("../images/p9/006-2.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d9_6 ul li:nth-child(3) {background:#000000 url("../images/p9/006-3.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} /****************************************/ /* products detail: E2 */ /****************************************/ /**/ .sel_products_detail_10 {} /**/ .d10_1 {padding:200px 0; background:#000000 url("../images/p10/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d10_1 .text { text-align:center; color:#ffffff;} .d10_1 h1 { font-size:64px; line-height:1;} .d10_1 p { font-size:18px; line-height:1; margin-top:5px;} .d10_1 h2 {font-size:64px; margin-top:20px;} .d10_1 p.desc { font-size:22px; margin:50px auto 0; width:70%; line-height:1.8;} /**/ .d10_2 {padding:150px 0;} .d10_2 .bg_img { float:left; width:50%; height:auto;} .d10_2 .text {float:right; width:50%; padding-left:60px;} .d10_2 .text ul {margin-top:100px;} .d10_2 .text ul li {margin-bottom:60px;} .d10_2 .text ul li h2 {font-size:24px; margin-bottom:10px;} .d10_2 .text ul li p {font-size:18px;} /**/ .d10_3 {padding:100px 0; background:#000000;} .d10_3 .bg_img { float:right; width:50%; height:auto;} .d10_3 .text {float:left; width:50%; padding-right:100px; color:#ffffff;} .d10_3 .text ul {margin-top:50px;} .d10_3 .text ul li {margin-bottom:60px;} .d10_3 .text ul li h2 {font-size:24px; margin-bottom:10px;} .d10_3 .text ul li p {font-size:18px;} /**/ .d10_4 {padding:150px 0;} .d10_4 .text {text-align:center;} .d10_4 .text h1 {font-size:60px; margin-bottom:10px;} .d10_4 .text p {font-size:18px;} .d10_4 ul {margin-top:40px;} .d10_4 ul li {float:left; width:33.333333%;} .d10_4 ul li .inner {padding:0 20px 20px 0;} .d10_4 ul li img {display:block;} /****************************************/ /* products detail: HD-350 */ /****************************************/ /**/ .sel_products_detail_11 {} /**/ .d11_1 {padding:9.375rem 0 6.25rem;} .d11_1 .main {} .d11_1 .text {text-align:center;} .d11_1 h1 {font-size:4.5rem;} .d11_1 img {width:70%; margin:2.5rem auto;} .d11_1 p {font-size:1.375rem; width:70%; margin:auto;} /**/ .d11_2 {padding:6.25rem 0; text-align:center; background:#f2f2f2;} .d11_2 .text {width:80%; margin:0 auto 5rem;} .d11_2 h1 {font-size:2.75rem;} .d11_2 h2 {font-size:1.375rem;} .d11_2 img {margin:2.5rem 0;} .d11_2 p {font-size:1.125rem;} .d11_2 ul {width:60%; margin:auto; overflow:hidden;} .d11_2 ul li {margin-bottom:5rem;} .d11_2 ul li:last-child {margin:0;} .d11_2 ul li h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d11_2 ul li p {font-size:1.375rem;} /****************************************/ /* products detail: X5V */ /****************************************/ /**/ .sel_products_detail_12 {} /**/ .d12_1 {padding:6.25rem 0; background:#000000;} .d12_1 .text { margin-top:12.5rem; position:relative; z-index:2; color:#ffffff; text-align:center;} .d12_1 h1 { font-size:6rem; line-height:1;} .d12_1 p { font-size:3.5rem;} .d12_1 .topic {display:block; margin:-26.875rem auto 0; width:60%; height:auto;} /**/ .d12_2 {padding:12.5rem 0; position:relative; background:url("../images/p12/002.jpg") no-repeat scroll center bottom / 100% auto; background-size:cover;} .d12_2::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; opacity:0;} .d12_2 .text { margin:auto; width:70%; padding:3.75rem; text-align:center; color:#ffffff; position:relative; background:rgba(0,159,171,0.8);} .d12_2 .text p {font-size:1.375rem;} /**/ .d12_3 {padding:6.25rem 0;} .d12_3 h1 {margin-bottom:1.875rem; font-size:2.75rem; color:#009FAB; text-align:center;} .d12_3 .l {width:70%; margin:auto;} .d12_3 .l p {font-size:1.375rem; text-align:center;} .d12_3 .r { width:70%; margin:2.5rem auto 0; text-align:center;} .d12_3 .r p {display:inline-block; font-size:1.375rem; text-align:left;} .d12_3 .r p span {display:inline-block; margin-right:0.625rem;} .d12_3 .img {margin:auto; padding:3.125rem 0 0; width:70%;} /**/ .d12_4 {padding:12.5rem 0; position:relative; background:url("../images/p12/004.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d12_4::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#ffffff; opacity:0.1;} .d12_4 .text { position:relative; margin:auto; width:70%; color:#ffffff;} .d12_4 .text h2 { margin-bottom:1.25rem; font-size:2.75rem; text-align:center;} .d12_4 .text p {font-size:1.375rem; text-align:center;} .d12_4 .spe {position:relative; margin:2.5rem auto 0; width:70%; padding:2.5rem; background:rgba(255,255,255,0.8);} .d12_4 .spe ul {} .d12_4 .spe ul li {display:flex; align-items:center; padding:1.25rem 0; width:100%;} .d12_4 .spe ul li img {display:block; width:2.5rem; height:auto;} .d12_4 .spe ul li span {display:block; margin-left:3.75rem; font-size:1.125rem;} /**/ .d12_5 {padding:6.25rem 0; background:#000000;} /**/ .d12_6 {padding:6.25rem 0 0;} .d12_6 .text {margin:auto; padding-bottom:6.25rem; width:70%;} .d12_6 .text h2 {margin-bottom:1.875rem; font-size:2.75rem; text-align:center;} .d12_6 .text p {font-size:1.375rem; text-align:center;} .d12_6 .spe {padding:6.25rem 0; background:#000000 url("../images/p12/006.jpg") no-repeat scroll center right / 100% auto; background-size:cover;} .d12_6 .spe ul {width:50%;} .d12_6 .spe ul li {display:flex; align-items:center; padding:1.25rem 0;} .d12_6 .spe ul li img {display:block; width:2.5rem; height:auto;} .d12_6 .spe ul li span {display:block; margin-left:4.375rem; color:#ffffff; font-size:1.125rem;} /**/ .d12_7 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d12_7 h2 {font-size:2.75rem; color:#ffffff; text-align:center;} /****************************************/ /* products detail 13: 500 Series */ /****************************************/ /**/ .sel_products_detail_13 {} /**/ .d13_1 {padding:9.375rem 0 40.625rem; background:#ffffff url("../images/p13/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d13_1 h1 {font-size:4.5rem; text-align:center; color:#ffffff;} /**/ .d13_2 { padding:6.25rem 0; text-align:center;} .d13_2 .text {width:70%; margin:0 auto 5rem;} .d13_2 .text h1 {font-size:2.75rem; margin-bottom:1.25rem;} .d13_2 .text p {font-size:1.375rem;} .d13_2 ul {width:70%; margin:auto;} .d13_2 ul li {margin-bottom:5rem;} .d13_2 ul li:last-child {margin:0;} .d13_2 ul li img {width:12.5rem; margin:auto; border-radius:100%;} .d13_2 ul li p {font-size:1.375rem; margin:1.25rem auto 0;} /****************************************/ /* products detail: HDL-500X */ /****************************************/ /**/ .sel_products_detail_14 {} /**/ .d14_1 {padding:6.25rem 0;} .d14_1 h1 {font-size:4.5rem; text-align:center;} .d14_1 img {display:block; width:90%; margin:auto;} /**/ .d14_2 {padding:6.25rem 0; text-align:center; background:rgba(0, 0, 0, 0.02);} .d14_2 .text {width:70%; margin:auto;} .d14_2 .text p {font-size:1.375rem; margin-bottom:2.5rem;} .d14_2 .text p:last-child {margin:0;} /****************************************/ /* products detail: HD-330 */ /****************************************/ /**/ .sel_products_detail_15 {} /**/ .d15_1 {padding:9.375rem 0;} .d15_1 .text {text-align:center;} .d15_1 h1 {font-size:4.5rem;} .d15_1 img {width:70%; margin:2.5rem auto;} .d15_1 p {font-size:1.375rem; width:70%; margin:auto;} /**/ .d15_2 {padding:6.25rem 0; text-align:center; background:#f2f2f2;} .d15_2 .text {width:80%; margin:0 auto 5rem;} .d15_2 h1 {font-size:2.75rem;} .d15_2 h2 {font-size:1.375rem;} .d15_2 img {margin:2.5rem 0;} .d15_2 p {font-size:1.125rem;} .d15_2 ul {width:70%; margin:auto; overflow:hidden;} .d15_2 ul li {margin-bottom:5rem;} .d15_2 ul li:last-child {margin:0;} .d15_2 ul li h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d15_2 ul li p {font-size:1.25rem;} /****************************************/ /* products detail: HDL-35E */ /****************************************/ /**/ .sel_products_detail_16 {} /**/ .d16_1 {padding:6.25rem 0;} .d16_1 h1 {font-size:4.5rem; text-align:center;} .d16_1 img {display:block; width:90%; margin:40px auto;} /**/ .d16_2 {padding:6.25rem 0; text-align:center; background:rgba(0, 0, 0, 0.02);} .d16_2 .text {width:70%; margin:auto;} .d16_2 .text p {font-size:1.375rem; margin-bottom:2.5rem;} .d16_2 .text p:last-child {margin:0;} /****************************************/ /* products detail: HDL-330X */ /****************************************/ /**/ .sel_products_detail_17 {} /**/ .d17_1 {padding:100px 0;} .d17_1 h1 {font-size:72px; text-align:center;} .d17_1 img { display:block; width:70%; margin:auto;} /**/ .d17_2 { padding:100px 0 50px; text-align:center;} .d17_2 .text {width:70%; margin:0 auto 80px;} .d17_2 .text p {font-size:22px; margin-top:40px;} /****************************************/ /* products detail 18: 430 Series */ /****************************************/ /**/ .sel_products_detail_18 {} /**/ .d18_1 {padding:9.375rem 0 40.625rem; background:#ffffff url("../images/p18/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d18_1 h1 {font-size:4.5rem; text-align:center; color:#ffffff;} /**/ .d18_2 { padding:6.25rem 0; text-align:center;} .d18_2 .text {width:70%; margin:0 auto 5rem;} .d18_2 .text h1 {font-size:2.75rem; margin-bottom:1.25rem;} .d18_2 .text p {font-size:1.375rem;} .d18_2 ul {width:70%; margin:auto;} .d18_2 ul li {margin-bottom:5rem;} .d18_2 ul li:last-child {margin:0;} .d18_2 ul li img {width:12.5rem; margin:auto; border-radius:100%;} .d18_2 ul li p {font-size:1.375rem; margin:1.25rem auto 0;} /****************************************/ /* products detail: 330 Series */ /****************************************/ /**/ .sel_products_detail_19 {} /**/ .d19_1 {padding:9.375rem 0 40.625rem; background:#ffffff url("../images/p18/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d19_1 h1 {font-size:4.5rem; text-align:center; color:#ffffff;} /**/ .d19_2 { padding:6.25rem 0; text-align:center;} .d19_2 .text {width:70%; margin:0 auto 5rem;} .d19_2 .text h1 {font-size:2.75rem; margin-bottom:1.25rem;} .d19_2 .text p {font-size:1.375rem;} .d19_2 ul {width:70%; margin:auto;} .d19_2 ul li {margin-bottom:5rem;} .d19_2 ul li:last-child {margin:0;} .d19_2 ul li img {width:12.5rem; margin:auto; border-radius:100%;} .d19_2 ul li p {font-size:1.375rem; margin:1.25rem auto 0;} /****************************************/ /* products detail: S60 */ /****************************************/ /**/ .sel_products_detail_20 {} /**/ .d20_1 {padding:6.25rem 0 9.375rem;} .d20_1 .w {display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row-reverse; align-items:center;} .d20_1 .img {width:50rem; height:40rem; background:url("../images/p20/001_bg.png") no-repeat scroll center center / 100% auto;} .d20_1 .text {width:calc(100% - 50rem);} .d20_1 .text h1 {font-size:3.5rem; margin:0 0 0.625rem 0; color:#5d5d5d; text-transform:uppercase;} .d20_1 .text h2 {font-size:4.5rem; color:#f6aa00; margin-top:2.5rem;} .d20_1 .text h3 {font-size:1.375rem; font-weight:normal;} .d20_1 .intro {padding:0 5%; font-size:1.75rem; color:#4d4d4d; margin-top:5rem; line-height:1.4; text-align:center;} /**/ .d20_2 {position:relative; padding:12.5rem 0; background:#000000 url("../images/p20/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d20_2 .text {position:relative; z-index:10; text-align:center; color:#ffffff; width:60%; margin:auto;} .d20_2 .text h2 {font-size:6.25rem; color:#f6aa00;} .d20_2 .text h3 {font-size:2rem; padding:0 10%;} .d20_2 .text p {font-size:1.375rem; margin-top:2.5rem;} .d20_2 .video {} .d20_2 .video .mask {background:rgba(0,0,0,0.5);} .d20_2 .video video {width:auto; height:auto; min-width:100%; min-height:100%; position:absolute; z-index:1; top:50%; left:50%; transform:translateX(-50%) translateY(-50%);} /**/ .d20_3 {padding:15.625rem 0; background:#000000 url("../images/p20/003.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d20_3 .main {display:flex; justify-content:flex-end;} .d20_3 .text {width:50%; padding:6.25rem 0 0; text-align:center; color:#5d5d5d;} .d20_3 .text h2 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .d20_3 .text h3 { margin-bottom:2.5rem; font-size:1.75rem;} .d20_3 .text .rect {display:none; margin:1.875rem auto; width:1.625rem; height:12.5rem; background:url("../images/p20/003_1.jpg") no-repeat scroll center center / 100% auto;} .d20_3 .img {display:none; float:right; width:60%;} .d20_3 .img .r {height:60rem; background:url("../images/p20/003_bg.jpg") no-repeat scroll center center / 100% auto;} .d20_3 p {font-size:1.375rem;} /**/ .d20_4 {padding:9.375rem 0 6.25rem; background:#000000;} .d20_4 .main {display:flex; flex-wrap:wrap; justify-content:space-between;} .d20_4 .img {width:40%;} .d20_4 .l {position:relative; width:25rem; height:37.5rem; background:url("../images/p20/004_1.jpg") no-repeat scroll center bottom / 100% auto;} .d20_4 .l .shine {position:absolute; left:3.75rem; top:4.25rem; width:12.5rem; height:12.5rem; background:url("../images/p20/004_3.png") no-repeat scroll center bottom / 100% auto;} .d20_4 .text {width:60%; padding-right:2%;} .d20_4 .text .m {margin:0.625rem 0 0;} .d20_4 .text .m video {} .d20_4 .text .num {margin-top:1.25rem; color:#ffffff; font-size:1.375rem; text-align:center;} .d20_4 .text .num p {display:inline-block;} .d20_4 .text .num span {color:#f6aa00; padding:0 4px; font-weight:bold;} /**/ .d20_5 {padding:15.625rem 0; background:#000000 url("../images/p20/005_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d20_5_add {padding:15.625rem 0; background:#000000 url("../images/p20/005_add_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d20_6 {padding:15.625rem 0; background:#000000 url("../images/p20/006_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d20_7 {padding:15.625rem 0; background:#000000 url("../images/p20/007_bg.jpg") no-repeat scroll center bottom / 100% auto; background-size:cover; background-attachment:fixed;} .con567 .text {position:relative; z-index:2; text-align:center; color:#ffffff;} .con567 .text h2 {font-size:4.5rem; margin-bottom:1.25rem; padding:0 10%; line-height:1;} .con567 .text h3 {font-size:2rem; margin-bottom:2.5rem; padding:0 10%;} .con567 .text p {font-size:1.375rem; padding:0 10%;} /**/ .d20_8 {padding:6.25rem 0; background:#f2f2f2;} .d20_8 .text {text-align:center;} .d20_8 .text ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -1.25rem;} .d20_8 .text ul li {width:33.333333%; padding:0 1.25rem;} .d20_8 .text ul li .img {display:block; margin:auto;} .d20_8 .text ul li p {margin-top:1.25rem;} /**/ .d20_9 {padding:6.25rem 0 0; overflow:hidden;} .d20_9 .main {display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center;} .d20_9 .text {width:40%;} .d20_9 .text h2 {font-size:4rem; line-height:1; margin-bottom:1.25rem;} .d20_9 .text h3 {font-size:2rem; padding-left:2px; font-weight:bold; color:#8d8d8d;} .d20_9 .text p {font-size:1.375rem; color:#4d4d4d; margin-top:2.5rem; line-height:1.4; padding:0 15% 0 0;} .d20_9 .img {width:43.75rem; height:43.75rem; background:url("../images/p20/009.jpg") no-repeat scroll center center / 100% auto;} /**/ .d20_10 {padding:6.25rem 0; background:#f2f2f2;} .d20_10 .text {text-align:center;} .d20_10 .text ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -1.25rem;} .d20_10 .text ul li {width:25%; padding:0 1.25rem;} .d20_10 .text ul li .img {} .d20_10 .text ul li p {margin-top:1.25rem;} /**/ .d20_11 {padding:9.375rem 0 6.25rem; position:relative; background:url("../images/p20/011_bg.jpg") no-repeat scroll left bottom / 40% auto;} .d20_11 .main {display:flex; justify-content:flex-end;} .d20_11 .text {width:55%;} .d20_11 .text h2 {font-size:3.5rem; margin-bottom:0.625rem;} .d20_11 .text h3 {font-size:1.375rem; margin-bottom:2.5rem; color:#8d8d8d;} .d20_11 .text p {font-size:1.375rem;} .d20_11 .text ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:2.5rem -1.25rem -1.25rem;} .d20_11 .text ul li {display:flex; align-items:center; width:50%; padding:1.25rem} .d20_11 .text ul li .img {display:block; margin-right:1.25rem; width:2.5rem; height:2.5rem;} .d20_11 .text ul li .i1 {background:url("../images/p20/011_1.jpg") no-repeat scroll center center / 100% auto;} .d20_11 .text ul li .i2 {background:url("../images/p20/011_2.jpg") no-repeat scroll center center / 100% auto;} .d20_11 .text ul li .i3 {background:url("../images/p20/011_3.jpg") no-repeat scroll center center / 100% auto;} .d20_11 .text ul li .i4 {background:url("../images/p20/011_4.jpg") no-repeat scroll center center / 100% auto;} .d20_11 .text ul li .i5 {background:url("../images/p20/011_5.jpg") no-repeat scroll center center / 100% auto;} .d20_11 .text ul li .i6 {background:url("../images/p20/011_6.jpg") no-repeat scroll center center / 100% auto;} .d20_11 .text ul li h4 {line-height:1.4; font-size:1.125rem; font-weight:normal;} /**/ .d20_12 {padding:15.625rem 0; background:url("../images/p20/012_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d20_12 .text {} .d20_12 .text h2 {font-size:3.5rem; margin-bottom:0.625rem;} .d20_12 .text h3 {font-size:1.375rem; margin-bottom:2.5rem; color:#8d8d8d;} .d20_12 .text p {font-size:1.375rem; padding:0 64% 0 0;} /**/ .d20_13 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d20_13 h2 {font-size:2.75rem; color:#ffffff; text-align:center;} .d20_13 .img_box h4 {display:none;} /****************************************/ /* products detail: P60 */ /****************************************/ /**/ .sel_products_detail_21 {} .sel_products_detail_21 .note {padding:2.5rem 0 0;} .sel_products_detail_21 .note p {max-width:40rem; margin:auto; text-align:center; color:#FFFFFF; font-size:0.75rem; opacity:0.3;} /**/ .d21_1 {position:relative; padding:12.5rem 0 9.375rem; background:#000000 url("../images/p21/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d21_1 .text {text-align:center; color:#ffffff; position:relative; z-index:1;} .d21_1 .text h2 {font-size:4.5rem; text-shadow:0px 4px 4px rgba(0,0,0,0.5);} .d21_1 .text h1 {font-size:4.5rem; color:#f0b16d; margin:2.5rem 0 12.5rem; text-shadow:0px 4px 8px rgba(0,0,0,0.5);} .d21_1 .text p {font-size:1.125rem; padding:0 10%;} /**/ .d21_2 {position:relative; padding:12.5rem 0; background:#000000 url("../images/p20/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d21_2 .text {position:relative; z-index:10; text-align:center; color:#ffffff; width:60%; margin:auto;} .d21_2 .text h2 {font-size:6.25rem; color:#f0b16d; line-height:1; margin-bottom:1.875rem;} .d21_2 .text h2 em {font-size:4rem; font-weight:normal; vertical-align:super;} .d21_2 .text h3 {font-size:2rem; padding:0 10%;} .d21_2 .text p {font-size:1.375rem; margin-top:2.5rem;} .d21_2 ul {display:flex; position:relative; z-index:8; justify-content:space-between; text-align:center; margin:6.25rem 0 0; padding:0 10%;} .d21_2 ul li {} .d21_2 ul li span {display:block; margin:0 auto 0.625rem; width:5rem; height:5rem;} .d21_2 ul li:nth-child(1) span {background:url("../images/p21/002_icon_1.svg") no-repeat scroll center center / 100% auto;} .d21_2 ul li:nth-child(2) span {background:url("../images/p21/002_icon_2.svg") no-repeat scroll center center / 100% auto;} .d21_2 ul li:nth-child(3) span {background:url("../images/p21/002_icon_3.svg") no-repeat scroll center center / 100% auto;} .d21_2 ul li p {font-size:1.125rem; color:#ffffff;} .d21_2 .video {} .d21_2 .video .mask {background:rgba(0,0,0,0.5);} .d21_2 .video video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:auto; height:auto; min-width:100%; min-height:100%;} /**/ .d21_3 {position:relative; padding:12.5rem 0; background:#000000 url("../images/p21/003_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d21_3 .main {display:flex; justify-content:flex-end;} .d21_3 .text {position:relative; z-index:2; width:55%; text-align:center; color:#f0b16d;} .d21_3 .text h2 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .d21_3 .text h2 em {font-size:1.75rem; vertical-align:super;} .d21_3 .text h3 { margin-bottom:3.75rem; font-size:2rem; font-weight:200;} .d21_3 p {font-size:1.125rem; color:#ffffff;} .d21_3 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /**/ .d21_4 {background:#000000; overflow:hidden;} .d21_4 .row {position:relative;} .d21_4 .pin_d21_4 {height:100vh; display:flex; align-items:center;} .d21_4 .it {margin:auto; position:relative; width:100%; height:100%;} .d21_4 .im {width:100%; height:36.125rem;/*需要设置高度与.img一致，否则微信浏览器会按照高度100%计算*/ margin-top:7.5rem; position:relative; left:50%; top:50%; transform:translate(-50%,-50%);} .d21_4 .img {opacity:0.5; position:relative; width:25rem; height:36.125rem; margin:auto; background:url("../images/p21/004_bg.jpg") no-repeat scroll center center / 100% auto;} .d21_4 .img .cover {width:16.5rem; height:9.375rem; position:absolute; left:16.45%; top:9.15%;} .d21_4 .img .cover video {} .d21_4 .m_info {} .d21_4 .m_info .con {opacity:0; position:absolute; width:27.5%; left:0; top:50%; transform:translateY(-50%);} .d21_4 .m_info .con .inner {display:inline-block; color:#ffffff; border:2px solid #f0b16d; width:18.75rem; padding:1.25rem; background:#000000; position:relative; z-index:8;} .d21_4 .m_info .con .inner p {font-size:0.875rem; line-height:1.8;} .d21_4 .m_info .con span {display:block; padding:0.625rem 0; color:#f0b16d; font-size:0.875rem;} .d21_4 .m_info .con .line {position:absolute; left:18.75rem; top:2.5rem; width:100%; height:2px; background-image:linear-gradient(to right, rgba(240,177,109,1), rgba(240,177,109,0));} .d21_4 .m_info .con .tumor {padding-bottom:1.25rem; border-bottom:1px solid #f0b16d;} .d21_4 .m_info .con .tumor ul {} .d21_4 .m_info .con .tumor ul li {display:flex; justify-content:space-between; padding:0.3125rem 0;} .d21_4 .m_info .con .tumor ul li span {padding:0;} .d21_4 .m_info .con .tumor ul li span:nth-child(1) {color:#FFFFFF;} .d21_4 .m_info .con .tumor ul li span em {vertical-align:super; font-size:0.625rem; font-style:normal;} .d21_4 .m_info .con .mid {padding:1.25rem 0; border-bottom:1px solid #f0b16d;} .d21_4 .m_info .con .mid ul {} .d21_4 .m_info .con .mid ul li {padding:0.3125rem 0;} .d21_4 .m_info .con .mid ul li p {} .d21_4 .m_info .con .mid ul li .lr_t {display:flex; justify-content:space-between;} .d21_4 .m_info .con .mid ul li .lr_t span {padding:0;} .d21_4 .m_info .con .mid ul li .lr_t span:nth-child(1) {padding-right:0.625rem;} .d21_4 .m_info .con .total {display:flex; justify-content:space-between;} .d21_4 .m_info .con .total span:nth-child(1) {color:#FFFFFF;} .d21_4 .m_info .con .advice {display:flex; justify-content:space-between;} .d21_4 .m_info .mi_1 {top:17.5%;} .d21_4 .m_info .mi_2 {top:47.8%;} .d21_4 .text {margin-top:7.5rem;/* 配合类名为.im的偏移量 */position:absolute; width:100%; left:50%; top:50%; transform:translate(-50%,-50%); color:#ffffff; text-align:center; padding:0 10%;} .d21_4 .text h2 {font-size:3.5rem; margin-bottom:1.875rem;} .d21_4 .text h2 em {font-size:1.75rem; vertical-align:super;} .d21_4 .text p {font-size:1.375rem;} /**/ .d21_5 {} .d21_5 .note {padding:2.5rem 0;} .d21_5 .pin_d21_5 {height:100vh; display:flex; align-items:center;} .d21_5 .it {} .d21_5 .im {} .d21_5 .img {background:url("../images/p21/005_bg.jpg") no-repeat scroll center center / 100% auto;} .d21_5 .m_info {} .d21_5 .m_info .mi_1 {top:39.55%;} .d21_5 .m_info .mi_2 {top:42.55%;} .d21_5 .m_info .mi_2 .line {top:50%;} /**/ .d21_6 {position:relative;} .d21_6 .inner {background:url("../images/p21/006_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d21_6 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /* 三款产品第6、7、8屏复用 */ .con678 {background:#000000;} .con678 .inner {padding:12.5rem 0;} .con678 .text {margin:auto; text-align:center; color:#f0b16d; position:relative; z-index:1;} .con678 .text h2 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .con678 .text h3 { margin-bottom:3.75rem; font-size:2rem; font-weight:200; padding:0 33%;} .con678 p {font-size:1.125rem; color:#ffffff; padding:0 20%;} .con678 .list {padding:6.25rem 0; position:relative; z-index:1;} .con678 .list ul {display:flex; justify-content:space-between; margin:0 -0.625rem;} .con678 .list ul li {text-align:center; width:20%; padding:0 0.625rem;} .con678 .list ul li img {display:block; margin:0 auto 1.25rem;} .con678 .list ul li p {font-size:0.875rem; padding:0 5%;} /**/ .d21_7 {position:relative;} .d21_7 .inner {background:url("../images/p21/007_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d21_7 .list ul li {width:20%;} .d21_7 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /**/ .d21_8 {position:relative;} .d21_8 .inner {background:url("../images/p21/008_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d21_8 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /**/ .d21_9 {padding:12.5rem 0; background:#000000 url("../images/p21/009_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d21_9 .text {color:#FFFFFF; text-align:center; padding-left:25%;} .d21_9 .text h2 {font-size:4.5rem; color:#f0b16d;} .d21_9 .text h3 {font-size:2rem; color:#f0b16d; font-weight:200; margin:1.25rem 0 6.25rem;} .d21_9 .text p {font-size:1.125rem;} /**/ .d21_10 {padding:12.5rem 0; background:#000000 url("../images/p21/010_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d21_10 .text {color:#FFFFFF; text-align:center; padding-right:25%;} .d21_10 .text h2 {font-size:4.5rem; color:#f0b16d;} .d21_10 .text h3 {font-size:2rem; color:#f0b16d; font-weight:200; margin:1.25rem 0 6.25rem;} .d21_10 .text p {font-size:1.125rem; text-shadow:0px 1px 2px rgba(0,0,0,0.5);} .d21_10 .text p b {display:block; font-size:1.75rem;} /**/ .d21_11 {position:relative; padding:12.5rem 0 6.25rem; background:#000000;} .d21_11 .inner {display:flex; justify-content:space-between;} .d21_11 .img {position:relative; width:40.625rem; height:81.25rem; background:url("../images/p21/011_bg.jpg") no-repeat scroll center center / 100% auto;} .d21_11 .img ul {} .d21_11 .img ul li {position:absolute; display:inline-block; width:3.125rem; height:3.125rem; line-height:2.625rem; font-size:2rem; font-weight:bold; text-align:center; color:#f0b16d; border:2px solid #f0b16d; border-radius:100%;} .d21_11 .img ul li:nth-child(1) {left:25.5%; top:5.5%;} .d21_11 .img ul li:nth-child(2) {left:55.5%; top:26.5%;} .d21_11 .img ul li:nth-child(3) {left:50.5%; top:39.5%;} .d21_11 .img ul li:nth-child(4) {left:26.5%; top:44.5%;} .d21_11 .img ul li:nth-child(5) {left:63.5%; top:51.5%;} .d21_11 .text {width:45%; padding:0 0 3.125rem; color:#FFFFFF;} .d21_11 .text ul {height:100%; display:flex; flex-direction:column; justify-content:space-between;} .d21_11 .text ul li {padding:1.875rem 0 1.875rem 4.375rem; background-repeat:no-repeat; background-position:left center; background-size:15% auto;} .d21_11 .text ul li:nth-child(1) {background-image:url("../images/p21/011_num_1.png");} .d21_11 .text ul li:nth-child(2) {background-image:url("../images/p21/011_num_2.png");} .d21_11 .text ul li:nth-child(3) {background-image:url("../images/p21/011_num_3.png");} .d21_11 .text ul li:nth-child(4) {background-image:url("../images/p21/011_num_4.png");} .d21_11 .text ul li:nth-child(5) {background-image:url("../images/p21/011_num_5.png");} .d21_11 .text ul li h4 {margin-bottom:1.25rem; font-size:1.75rem;} .d21_11 .text ul li p {font-size:1.125rem; opacity:0.7;} /**/ .d21_12 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d21_12 h2 {font-size:2.75rem; color:#ffffff; text-align:center;} /****************************************/ /* products detail: P60 Exp */ /****************************************/ /**/ .sel_products_detail_22 {} .sel_products_detail_22 .note {padding:2.5rem 0 0;} .sel_products_detail_22 .note p {max-width:40rem; margin:auto; text-align:center; color:#FFFFFF; font-size:0.75rem; opacity:0.3;} /**/ .d22_1 {position:relative; padding:12.5rem 0 9.375rem; background:#000000 url("../images/p22/001.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d22_1:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; opacity:0.1;} .d22_1 .text {text-align:center; color:#ffffff; position:relative;} .d22_1 .text h2 {font-size:4.5rem; padding:0 15%; text-shadow:0px 4px 4px rgba(0,0,0,0.2);} .d22_1 .text h1 {font-size:4.5rem; color:#f0b16d; margin:2.5rem 0 12.5rem; text-shadow:0px 4px 4px rgba(0,0,0,0.2);} .d22_1 .text p {font-size:1.125rem; padding:0 10%;} /**/ .d22_2 { position:relative; padding:12.5rem 0; background:#000000 url("../images/p20/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d22_2 .text {position:relative; z-index:10; text-align:center; color:#ffffff; width:60%; margin:auto;} .d22_2 .text h2 {font-size:6.25rem; color:#f0b16d; line-height:1; margin-bottom:1.875rem;} .d22_2 .text h2 em {font-size:4rem; font-weight:normal; vertical-align:super;} .d22_2 .text h3 {font-size:2rem; padding:0 10%;} .d22_2 .text p {font-size:1.875rem; margin-top:2.5rem;} .d22_2 ul {display:flex; position:relative; z-index:8; justify-content:space-between; text-align:center; margin:6.25rem 0 0; padding:0 10%;} .d22_2 ul li {} .d22_2 ul li span {display:block; margin:0 auto 0.625rem; width:5rem; height:5rem;} .d22_2 ul li:nth-child(1) span {background:url("../images/p22/002_icon_1.svg") no-repeat scroll center center / 100% auto;} .d22_2 ul li:nth-child(2) span {background:url("../images/p22/002_icon_2.svg") no-repeat scroll center center / 100% auto;} .d22_2 ul li:nth-child(3) span {background:url("../images/p22/002_icon_3.svg") no-repeat scroll center center / 100% auto;} .d22_2 ul li p {font-size:1.125rem; color:#ffffff;} .d22_2 .video {} .d22_2 .video .mask {background:rgba(0,0,0,0.5);} .d22_2 .video video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:auto; height:auto; min-width:100%; min-height:100%;} /**/ .d22_3 {padding:12.5rem 0; background:#000000 url("../images/p22/003_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d22_3 .main {display:flex; justify-content:flex-end;} .d22_3 .text {width:55%; text-align:center; color:#f0b16d;} .d22_3 .text h2 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .d22_3 .text h2 em {font-size:1.75rem; vertical-align:super;} .d22_3 .text h3 {margin-bottom:3.75rem; font-size:2rem; font-weight:200;} .d22_3 p {font-size:1.125rem; color:#000000;} /**/ .d22_4 {background:#ededed; overflow:hidden;} .d22_4 .row {position:relative;} .d22_4 .pin_d22_4 {height:100vh; display:flex; align-items:center;} .d22_4 .it {margin:auto; position:relative; width:100%; height:100%;} .d22_4 .im {width:100%; height:36.125rem;/*需要设置高度与.img一致，否则微信浏览器会按照高度100%计算*/ margin-top:7.5rem; position:relative; left:50%; top:50%; transform:translate(-50%,-50%);} .d22_4 .img {opacity:0.1; position:relative; width:25rem; height:36.125rem; margin:auto; background:url("../images/p22/004_bg.jpg") no-repeat scroll center center / 100% auto;} .d22_4 .img .cover {width:16.5rem; height:9.375rem; position:absolute; left:16.85%; top:8.15%;} .d22_4 .img .cover video {} .d22_4 .m_info {} .d22_4 .m_info .con {opacity:0; position:absolute; width:27.5%; left:0; top:50%; transform:translateY(-50%);} .d22_4 .m_info .con .inner {display:inline-block; color:#ffffff; border:2px solid #f0b16d; width:18.75rem; padding:1.25rem; background:#000000; position:relative; z-index:8;} .d22_4 .m_info .con .inner p {font-size:0.875rem; line-height:1.8;} .d22_4 .m_info .con span {display:block; padding:0.625rem 0; color:#f0b16d;} .d22_4 .m_info .con .line {position:absolute; left:18.75rem; top:2.5rem; width:100%; height:2px; background-image:linear-gradient(to right, rgba(240,177,109,1), rgba(240,177,109,0));} .d22_4 .m_info .con .tumor {padding-bottom:1.25rem; border-bottom:1px solid #f0b16d;} .d22_4 .m_info .con .tumor ul {} .d22_4 .m_info .con .tumor ul li {display:flex; justify-content:space-between; padding:0.3125rem 0;} .d22_4 .m_info .con .tumor ul li span {padding:0;} .d22_4 .m_info .con .tumor ul li span:nth-child(1) {color:#FFFFFF;} .d22_4 .m_info .con .tumor ul li span em {vertical-align:super; font-size:0.625rem; font-style:normal;} .d22_4 .m_info .con .mid {padding:1.25rem 0; border-bottom:1px solid #f0b16d;} .d22_4 .m_info .con .mid ul {} .d22_4 .m_info .con .mid ul li {padding:0.3125rem 0;} .d22_4 .m_info .con .mid ul li p {} .d22_4 .m_info .con .mid ul li .lr_t {display:flex; justify-content:space-between;} .d22_4 .m_info .con .mid ul li .lr_t span {padding:0;} .d22_4 .m_info .con .mid ul li .lr_t span:nth-child(1) {padding-right:2.5rem;} .d22_4 .m_info .con .total {display:flex; justify-content:space-between;} .d22_4 .m_info .con .total span:nth-child(1) {color:#FFFFFF;} .d22_4 .m_info .con .advice {display:flex; justify-content:space-between;} .d22_4 .m_info .mi_1 {top:7.5%;} .d22_4 .m_info .mi_2 {top:44.55%;} .d22_4 .m_info .mi_2 .line {} .d22_4 .text {margin-top:7.5rem;/* 配合类名为.im的偏移量 */ position:absolute; width:100%; left:50%; top:50%; transform:translate(-50%,-50%); color:#000000; text-align:center; padding:0 10%;} .d22_4 .text h2 {font-size:3.5rem; margin-bottom:1.875rem;} .d22_4 .text h2 em {font-size:1.75rem; vertical-align:super;} .d22_4 .text p {font-size:1.375rem;} /**/ .d22_5 {background:#dbdbdb;} .d22_5 .note {padding:2.5rem 0;} .d22_5 .note p {color:#000000;} .d22_5 .row {} .d22_5 .pin_d22_5 {height:100vh; display:flex; align-items:center;} .d22_5 .it {} .d22_5 .im {} .d22_5 .img {background:url("../images/p22/005_bg.jpg") no-repeat scroll center center / 100% auto;} .d22_5 .m_info {} .d22_5 .m_info .mi_1 {top:3.5%;} .d22_5 .m_info .mi_2 {top:39.15%;} .d22_5 .m_info .mi_2 .line {top:50%;} /**/ .d22_6 {position:relative;} .d22_6 .inner {background:url("../images/p22/006_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d22_6 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /* 三款产品第6、7、8屏复用 */ .con678_exp {background:#000000;} .con678_exp .inner {padding:12.5rem 0;} .con678_exp .text {margin:auto; text-align:center; color:#f0b16d; position:relative; z-index:1;} .con678_exp .text h2 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .con678_exp .text h3 {margin-bottom:3.75rem; font-size:2rem; font-weight:200; padding:0 33%;} .con678_exp p {font-size:1.125rem; color:#ffffff; padding:0 20%;} .con678_exp .list {padding:6.25rem 0; position:relative; z-index:1; background:#FFFFFF;} .con678_exp .list ul {display:flex; justify-content:space-between; margin:0 -10px;} .con678_exp .list ul li {text-align:center; width:25%; padding:0 0.625rem;} .con678_exp .list ul li img {display:block; margin:0 auto 1.25rem;} .con678_exp .list ul li p {font-size:0.875rem; color:#000000; padding:0 5%;} /**/ .d22_7 {position:relative;} .d22_7 .inner {background:url("../images/p22/007_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d22_7 .list ul li {width:25%;} .d22_7 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /**/ .d22_8 {position:relative;} .d22_8 .inner {background:url("../images/p22/008_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d22_8 .mask {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} /**/ .d22_9 {} .d22_9 .inner {padding:12.5rem 0; background:#000000 url("../images/p22/009_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d22_9 .text {color:#FFFFFF; text-align:center; padding-right:25%;} .d22_9 .text h2 {font-size:4.5rem; color:#f0b16d; text-shadow:1px 1px 0 rgba(0,0,0,0.5);} .d22_9 .text h3 {font-size:2rem; color:#f0b16d; font-weight:200; margin:0.625rem 0 7.5rem; text-shadow:0 1px 0 rgba(0,0,0,0.8);} .d22_9 .text p {font-size:1.125rem; color:#000000;} .d22_9 .list {padding:6.25rem 0;} .d22_9 .list ul {display:flex; flex-wrap:wrap; margin:0 -0.625rem;} .d22_9 .list ul li {width:16.666666%; padding:0 0.625rem; text-align:center;} .d22_9 .list ul li img {display:block; margin:0 auto 1.25rem;} .d22_9 .list ul li p {font-size:0.875rem;} /**/ .d22_10 {position:relative; padding:12.5rem 0; background:#000000 url("../images/p22/010_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed;} .d22_10:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; opacity:0;} .d22_10 .text {color:#FFFFFF; text-align:center; padding-left:25%; position:relative; z-index:1;} .d22_10 .text h2 {font-size:4.5rem; color:#f0b16d; text-shadow:1px 2px 0 rgba(0,0,0,0.5);} .d22_10 .text h3 {font-size:2rem; color:#f0b16d; font-weight:200; margin:0.625rem 0 7.5rem; text-shadow:1px 1px 0 rgba(0,0,0,0.5);} .d22_10 .text p {font-size:1.125rem; color:#000000;} .d22_10 .text p b {display:block; font-size:1.75rem;} /**/ .d22_11 {position:relative; padding:12.5rem 0 6.25rem; background:#ededed;} .d22_11 .inner {display:flex; justify-content:space-between;} .d22_11 .img {position:relative; width:40.625rem; height:81.25rem; background:url("../images/p22/011_bg.jpg") no-repeat scroll center center / 100% auto;} .d22_11 .img ul {} .d22_11 .img ul li {position:absolute; display:inline-block; width:3.125rem; height:3.125rem; line-height:2.625rem; font-size:2rem; font-weight:bold; text-align:center; color:#f0b16d; border:2px solid #f0b16d; border-radius:100%;} .d22_11 .img ul li:nth-child(1) {left:25%; top:5%;} .d22_11 .img ul li:nth-child(2) {left:58.5%; top:26.5%;} .d22_11 .img ul li:nth-child(3) {left:37.5%; top:38.5%;} .d22_11 .img ul li:nth-child(4) {left:13.5%; top:45.5%;} .d22_11 .img ul li:nth-child(5) {left:58.5%; top:56.5%;} .d22_11 .text {width:45%; padding:0 0 3.125rem; color:#000000;} .d22_11 .text ul {height:100%; display:flex; flex-direction:column; justify-content:space-between;} .d22_11 .text ul li {padding:1.875rem 0 1.875rem 4.375rem; background-repeat:no-repeat; background-position:left center; background-size:15% auto;} .d22_11 .text ul li:nth-child(1) {background-image:url("../images/p22/011_num_1.png");} .d22_11 .text ul li:nth-child(2) {background-image:url("../images/p22/011_num_2.png");} .d22_11 .text ul li:nth-child(3) {background-image:url("../images/p22/011_num_3.png");} .d22_11 .text ul li:nth-child(4) {background-image:url("../images/p22/011_num_4.png");} .d22_11 .text ul li:nth-child(5) {background-image:url("../images/p22/011_num_5.png");} .d22_11 .text ul li h4 {margin-bottom:1.25rem; font-size:1.75rem;} .d22_11 .text ul li p {font-size:1.125rem; opacity:0.7;} /**/ .d22_12 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d22_12 h2 {font-size:2.75rem; color:#ffffff; text-align:center;} .d22_12 .img_box h4 {display:none;} /****************************************/ /* products detail: P50 Elite */ /****************************************/ /**/ .sel_products_detail_23 {} .sel_products_detail_23 .p_detail {overflow:hidden;} /*公共*/ /*标题*/ .sel_products_detail_23 .con_t {position:relative; padding-top:6.25rem;} .sel_products_detail_23 .con_t .rect_d {display:block; margin:0 auto 5rem; width:2.5rem; height:2.5rem; position:relative; z-index:1; background-color:#009ba4;} .sel_products_detail_23 .con_t h2 {font-size:2.75rem; color:#009ba4; width:100%; position:relative; z-index:1;} .sel_products_detail_23 .con_t h2 span {display:block;} .sel_products_detail_23 .con_t .t_bg {margin-top:-6.25rem;} .sel_products_detail_23 .con_t .t_bg img {opacity:0.3;} .sel_products_detail_23 .text .desc {font-size:1.375rem; color:#4d4d4d; margin-top:2.5rem; padding:0 15%;} /*d23_con模块*/ .d23_con {padding-bottom:6.25rem;} .d23_con .topic {height:100vh; background-position:center center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed;} .d23_con .text {text-align:center;} .d23_con .text .con_t {} .d23_con .text .con_t h2 {} .d23_con ul {display:flex; flex-wrap:wrap; margin:6.25rem -1.25rem 0;} .d23_con ul li {width:50%; padding:1.25rem;} .d23_con ul li .inner {padding:2.5rem; height:100%; background:#FFFFFF; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);;} .d23_con ul li img {display:block; width:100%; margin-bottom:1.875rem;} .d23_con ul li h4 {font-size:1.375rem; margin-bottom:0.625rem;} .d23_con ul li p { font-size:1.125rem;} /**/ .d23_1 {position:relative; padding:6.25rem 0 0; color:#FFFFFF; background-color:#009ba4;} .d23_1 .machine {max-width:120rem; margin:auto; position:relative;} .d23_1 .machine .inner {opacity:0; width:75rem; height:93.75rem; background-image:url("../images/p23/001_1.jpg"); background-position:center top; background-repeat:no-repeat; background-size:100% auto; animation:d23_1_move_inner 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0;} /**/ @keyframes d23_1_move_inner { 0% { opacity:0; margin-top:2.5rem; } 100% { opacity:1; margin-top:0px; } } .d23_1 .mrect {position:absolute; left:0; top:12.5rem; width:100%;} .d23_1 .mrect .inner {max-width:93.75rem; margin:auto; position:relative;} .d23_1 .mrect i {opacity:0; display:block; width:12.5rem; height:9.375rem; position:absolute; background-image:linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d23_1 .mrect i:nth-child(1) {top:0; animation:d23_1_move_mrect_1 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(2) {top:12.5rem; animation:d23_1_move_mrect_2 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(3) {top:25rem; animation:d23_1_move_mrect_3 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(4) {top:3.125rem; width:18.75rem; height:14.0625rem; animation:d23_1_move_mrect_4 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(5) {top:12.5rem; /*opacity:0.5;*/ animation:d23_1_move_mrect_5 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(6) {top:18.75rem; animation:d23_1_move_mrect_6 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(7) {top:28.125rem; width:6.25rem; height:4.6875rem; animation:d23_1_move_mrect_7 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d23_1 .mrect i:nth-child(8) {top:25rem; width:6.25rem; height:4.6875rem; animation:d23_1_move_mrect_8 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} /**/ @keyframes d23_1_move_mrect_1 { 0% { opacity:0; right:3.125rem; } 100% { opacity:1; right:0; } } /**/ @keyframes d23_1_move_mrect_2 { 0% { opacity:0; right:-6.25rem; } 100% { opacity:0.5; right:-12.5rem; } } /**/ @keyframes d23_1_move_mrect_3 { 0% { opacity:0; right:3.125rem; } 100% { opacity:1; right:0; } } /**/ @keyframes d23_1_move_mrect_4 { 0% { opacity:0; right:21.875rem; } 100% { opacity:1; right:12.5rem; } } /**/ @keyframes d23_1_move_mrect_5 { 0% { opacity:0; right:31.25rem; } 100% { opacity:1; right:18.75rem; } } /**/ @keyframes d23_1_move_mrect_6 { 0% { opacity:0; right:9.375rem; } 100% { opacity:1; right:6.25rem; } } /**/ @keyframes d23_1_move_mrect_7 { 0% { opacity:0; right:31.25rem; } 100% { opacity:1; right:25rem; } } /**/ @keyframes d23_1_move_mrect_8 { 0% { opacity:0; right:15.625rem; } 100% { opacity:1; right:12.5rem; } } .d23_1 .s_title {width:100%; position:absolute; left:50%; top:25rem; transform:translateX(-50%);} .d23_1 .s_title .row {display:flex; justify-content:flex-end;} .d23_1 .s_title .row .text {text-align:center;} .d23_1 .s_title .row .text h1 {font-size:4.5rem; margin-bottom:1.875rem;} .d23_1 .s_title .row .text h2 {font-size:2.75rem; color:#FFFFFF;} .d23_1 .s_pic {width:100%; position:absolute; left:50%; bottom:-6.25rem; transform:translateX(-50%);} .d23_1 .s_pic .row {} .d23_1 .s_pic .row .bi {position:relative; padding:0.625rem; background-color:#FFFFFF; box-shadow:0 1.25rem 1.25rem rgba(0,0,0,0.1);} .d23_1 .s_pic .row .bi .ibox {width:30%; height:50%; position:absolute; right:0; top:0;} .d23_1 .s_pic .row .bi i {display:block; width:3.75rem; height:3.75rem; position:absolute; background:#009ba4;} .d23_1 .s_pic .row .bi i:nth-child(1) {left:6.25rem; top:0.625rem;} .d23_1 .s_pic .row .bi i:nth-child(2) {left:0; top:6.25rem;} .d23_1 .s_pic .row .bi i:nth-child(3) {left:6.25rem; top:10rem;} .d23_1 .s_pic .row .bi i:nth-child(4) {left:10rem; top:13.75rem;} .d23_1 .s_pic .row .bi img {display:block;} /**/ .d23_2 {padding:18.75rem 0 12.5rem; background:#090405;} .d23_2 .text {} .d23_2 .con_t {padding:0;} .d23_2 .con_t .rect_d {margin:0 0 1.5625rem 0; width:1.25rem; height:1.25rem; transform:none;} .d23_2 .con_t h2 {font-size:2rem;} .d23_2 .con_t .t_bg {margin-top:-9.0625rem;} .d23_2 .con_t .t_bg img {opacity:1;} .d23_2 ul {display:flex; margin:2.5rem -1.25rem 0;} .d23_2 ul li {padding:1.25rem; width:25%;} .d23_2 ul li .inner {padding:2.5rem; font-size:1.125rem; height:100%; background:#e9e9e9; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);} .d23_2 ul li p {} /**/ .d23_3 {background:#000000; overflow:hidden;} .d23_3 .topic {position:relative; background-image:url("../images/p23/003_bg.jpg"); background-size:cover; background-position:center center; background-repeat:no-repeat;} .d23_3 .img {width:40%; margin:0 0 2.5rem auto; position:relative; z-index:2;} .d23_3 .img img {display:block; width:100%;} .d23_3 .img img:nth-child(2) {width:30%; position:absolute; right:12%; top:16%;} .d23_3 .notes {margin-bottom:100px; width:100%; position:relative; z-index:1;} .d23_3 .notes p {font-size:1rem; color:#666666;} .d23_3 .topic .sha {width:100%; height:100%; position:absolute; left:0; bottom:0; background-image:linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,1));} /**/ .d23_4 {background-color:#e9e9e9;} .d23_4 .topic {background-image:url("../images/p23/004_bg.jpg");} /**/ .d23_5 {} .d23_5 .topic {background-image:url("../images/p23/005_bg.jpg");} .d23_5 ul li .inner {background-color:#e9e9e9;} /**/ .d23_6 {background-color:#e9e9e9;} .d23_6 .topic {background-image:url("../images/p23/006_bg.jpg");} /**/ .d23_7 {padding:6.25rem 0;} .d23_7 .text {text-align:center;} .d23_7 .grad {display:flex; flex-wrap:wrap; margin-top:6.25rem;} .d23_7 ul {width:50%; display:flex;} .d23_7 ul li {position:relative; width:100%; background:#595757; overflow:hidden;} .d23_7 ul li .inner {position:relative; height:100%; display:flex; align-items:center;} .d23_7 ul li span {position:absolute; z-index:1; left:1.25rem; top:1.25rem; display:inline-block; display:none; font-size:1.125rem; color:#FFFFFF; width:2.5rem; height:2.5rem; line-height:2.5rem; text-align:center; border:1px solid #FFFFFF; border-radius:100%;} .d23_7 ul li img {display:block; margin:auto auto 0; flex-shrink:0; width:100%;} .d23_7 ul li p {padding:1.875rem; font-size:1.125rem; line-height:1.4; text-align:center; width:100%; color:#FFFFFF; position:absolute; z-index:1; left:0; bottom:0;} .d23_7 ul:nth-child(2) {flex-wrap:wrap;} .d23_7 ul:nth-child(2) li {width:50%;} .d23_7 ul:nth-child(2) li span {font-size:0.875rem; width:1.875rem; height:1.875rem; line-height:1.875rem; top:auto; bottom:1.25rem; left:auto; right:1.25rem;} .d23_7 ul:nth-child(2) li:nth-child(1), .d23_7 ul:nth-child(2) li:nth-child(4) {background:#e9e9e9;} .d23_7 ul:nth-child(2) li:nth-child(1) span, .d23_7 ul:nth-child(2) li:nth-child(4) span {color:#8d8d8d; border-color:#8d8d8d;} .d23_7 ul:nth-child(2) li:nth-child(1) p, .d23_7 ul:nth-child(2) li:nth-child(4) p {color:#4d4d4d; display:flex; align-items:center; height:100%;} .d23_7 ul:nth-child(2) li:nth-child(2) p, .d23_7 ul:nth-child(2) li:nth-child(3) p {bottom:auto; top:0;} .d23_7 ul:nth-child(1) li .sha {content:""; position:absolute; left:0; bottom:0; width:100%; height:50%; background-image:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));} .d23_7 ul:nth-child(2) li:nth-child(2) .sha, .d23_7 ul:nth-child(2) li:nth-child(3) .sha {content:""; position:absolute; left:0; top:0; width:100%; height:50%; background-image:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0));} /**/ .d23_8 {} .d23_8 ul {} .d23_8 ul li {margin-bottom:2.5rem; padding:3.75rem; display:flex; align-items:center; background:#e9e9e9; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);} .d23_8 ul li img {width:40%;} .d23_8 ul li .t {margin-left:2.5rem; width:60%;} .d23_8 ul li .t h4 {font-size:1.375rem; margin-bottom:1.25rem;} .d23_8 ul li .t p {font-size:1.125rem;} .d23_8 ul li:nth-child(2), .d23_8 ul li:nth-child(4) {flex-direction:row-reverse; text-align:right;} .d23_8 ul li:nth-child(2) .t, .d23_8 ul li:nth-child(4) .t {margin:0 2.5rem 0 0;} /**/ .d23_9 {padding:6.25rem 0;} .d23_9 h2 {font-size:2.75rem; text-align:center; color:#009ba4;} .d23_9 .swiper-pagination-bullet {background:#000000;} /****************************************/ /* products detail: S50 Elite */ /****************************************/ /**/ .sel_products_detail_24 {} .sel_products_detail_24 .p_detail {overflow:hidden;} /*公共*/ /*标题*/ .sel_products_detail_24 .con_t {display:flex;} .sel_products_detail_24 .con_t .text {width:50%;} .sel_products_detail_24 .con_t .text .rect_d {display:block; width:2rem; height:2rem; position:relative; z-index:1; background-color:#009ba4;} .sel_products_detail_24 .con_t .text h2 {margin-top:2.5rem; font-size:2.75rem; color:#FFFFFF;} .sel_products_detail_24 .con_t .text h2 span {display:block;} .sel_products_detail_24 .con_t .t_bg {width:50%; margin-top:5rem;} .sel_products_detail_24 .con_t .t_bg img {display:block; margin:0 0 0 auto; width:80%;} .sel_products_detail_24 .text .desc {font-size:1.375rem; color:#4d4d4d; margin-top:2.5rem; padding:0 15%;} /**/ .d24_1 {position:relative; z-index:1; padding:6.25rem 0 0; color:#FFFFFF; background-color:#009ba4;} .d24_1 .machine {max-width:120rem; margin:auto; position:relative;} .d24_1 .machine .inner {opacity:0; width:62.5rem; height:93.75rem; background-image:url("../images/p24/001_1.jpg"); background-position:center top; background-repeat:no-repeat; background-size:100% auto; animation:d24_1_move_inner 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0;} /**/ @keyframes d24_1_move_inner { 0% { opacity:0; margin-top:40px; } 100% { opacity:1; margin-top:0px; } } .d24_1 .mrect {position:absolute; left:0; top:12.5rem; width:100%;} .d24_1 .mrect .inner {max-width:93.75rem; margin:auto; position:relative;} .d24_1 .mrect i {opacity:0; display:block; width:12.5rem; height:9.375rem; position:absolute; background-image:linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d24_1 .mrect i:nth-child(1) {top:0; animation:d24_1_move_mrect_1 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(2) {top:12.5rem; animation:d24_1_move_mrect_2 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(3) {top:25rem; animation:d24_1_move_mrect_3 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(4) {top:3.125rem; width:18.75rem; height:14.0625rem; animation:d24_1_move_mrect_4 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(5) {top:12.5rem; /*opacity:0.5;*/ animation:d24_1_move_mrect_5 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(6) {top:18.75rem; animation:d24_1_move_mrect_6 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(7) {top:28.125rem; width:6.25rem; height:4.6875rem; animation:d24_1_move_mrect_7 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_1 .mrect i:nth-child(8) {top:25rem; width:6.25rem; height:4.6875rem; animation:d24_1_move_mrect_8 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} /**/ @keyframes d24_1_move_mrect_1 { 0% { opacity:0; right:3.125rem; } 100% { opacity:1; right:0; } } /**/ @keyframes d24_1_move_mrect_2 { 0% { opacity:0; right:-6.25rem; } 100% { opacity:0.5; right:-12.5rem; } } /**/ @keyframes d24_1_move_mrect_3 { 0% { opacity:0; right:3.125rem; } 100% { opacity:1; right:0; } } /**/ @keyframes d24_1_move_mrect_4 { 0% { opacity:0; right:21.875rem; } 100% { opacity:1; right:12.5rem; } } /**/ @keyframes d24_1_move_mrect_5 { 0% { opacity:0; right:31.25rem; } 100% { opacity:1; right:18.75rem; } } /**/ @keyframes d24_1_move_mrect_6 { 0% { opacity:0; right:9.375rem; } 100% { opacity:1; right:6.25rem; } } /**/ @keyframes d24_1_move_mrect_7 { 0% { opacity:0; right:31.25rem; } 100% { opacity:1; right:25rem; } } /**/ @keyframes d24_1_move_mrect_8 { 0% { opacity:0; right:15.625rem; } 100% { opacity:1; right:12.5rem; } } .d24_1 .s_title {width:100%; position:absolute; left:50%; top:25rem; transform:translateX(-50%);} .d24_1 .s_title .row {display:flex; justify-content:flex-end;} .d24_1 .s_title .row .text {text-align:center;} .d24_1 .s_title .row .text h1 {font-size:4.5rem; margin-bottom:1.875rem;} .d24_1 .s_title .row .text h2 {font-size:2.75rem; color:#FFFFFF;} .d24_1 .s_pic {width:100%; position:absolute; left:50%; bottom:-6.25rem; transform:translateX(-50%);} .d24_1 .s_pic .row {} .d24_1 .s_pic .row .bi {position:relative; padding:0.625rem; background-color:#FFFFFF; box-shadow:0 1.25rem 1.25rem rgba(0,0,0,0.1);} .d24_1 .s_pic .row .bi i {display:block; width:3.75rem; height:3.75rem; position:absolute; background:#009ba4;} .d24_1 .s_pic .row .bi i:nth-child(1) {right:6.25rem; top:0.625rem;} .d24_1 .s_pic .row .bi i:nth-child(2) {right:16.25rem; top:6.25rem;} .d24_1 .s_pic .row .bi i:nth-child(3) {right:12.5rem; top:10rem;} .d24_1 .s_pic .row .bi i:nth-child(4) {right:6.25rem; top:13.75rem;} .d24_1 .s_pic .row .bi img {display:block;} /**/ .d24_2 {background:#090405;} .d24_2 .topic {position:relative; padding:25rem 0 12.5rem; color:#FFFFFF; background-image:url("../images/p24/002_bg.jpg"); background-position:left center; background-repeat:no-repeat; background-size:cover;} .d24_2 .topic .sha {width:100%; height:100%; position:absolute; left:0; bottom:0; background-image:linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,1));} .d24_2 .con_t {width:30%; margin:0 0 0 auto; position:relative; z-index:1;} .d24_2 .con_t .text {width:100%;} .d24_2 .con_t .text .rect_d {display:inline-block; margin-right:1.25rem;} .d24_2 .con_t .text h2 {display:inline-block; margin-bottom:1.875rem;} .d24_2 .con_t .text p {font-size:1.125rem;} .d24_2 .dep {display:flex; position:relative;} .d24_2 .dep .d_l {width:25%; padding-right:5%;} .d24_2 .dep .d_r {width:75%; position:relative; margin-top:2rem;} .d24_2 .dep ul {display:flex; justify-content:space-between; position:relative; height:100%; z-index:3;} .d24_2 .dep ul li {width:auto; position:relative; transition:all 1s ease 1s; -webkit-transition:all 1s ease 1s;} .d24_2 .dep ul li img {display:block; max-width:none;} .d24_2 .dep ul li img:nth-child(1) {width:3.75rem; position:absolute; left:0; top:50%; transform:translateY(-50%);} .d24_2 .dep ul li img:nth-child(2) {width:auto; height:1.875rem; margin-top:5rem;} .d24_2 .dep span {display:block; height:0.25rem; background:#ccc; position:absolute; left:0; top:50%; transform:translateY(-50%); transition:all 1s ease 1.95s;} .d24_2 .dep.move span {animation:d24_2_move_span 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d24_2 .dep.move ul li {animation:d24_2_move_li 1s cubic-bezier(0, 0, 0, 0) 1 alternate forwards; animation-delay:0s;} @keyframes d24_2_move_span { 0% { width:0; } 100% { width:100vw; } } /**/ @keyframes d24_2_move_li { 0% { margin-left:6.25rem; } 100% { margin-left:0； } } .d24_2 .notes {margin-top:100px; width:100%; position:relative; z-index:1;} .d24_2 .notes p {font-size:1rem; color:#666666;} /**/ .d24_3 {padding-top:18.75rem; color:#FFFFFF; background:#090405;} .d24_3 .pcgc {width:40%; margin-bottom:6.25rem;} .d24_3 .pcgc h3 {font-size:2rem; margin-bottom:1.25rem;} .d24_3 .pcgc p {font-size:1.125rem; margin-bottom:1.25rem;} .d24_3 .pcgc em {font-style:normal; font-size:0.875rem; opacity:0.3;} .d24_3 .perfor {padding:12.5rem 0; background-image:url("../images/p24/003_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d24_3 ul {display:flex; margin:6.25rem 0; } .d24_3 ul li {width:33.333333%; display:flex; align-items:center;} .d24_3 ul li img {display:block; margin-right:1.25rem; width:35%;} .d24_3 ul li .t {width:65%; padding-right:1.25rem;} .d24_3 ul li .t h4 {font-size:2rem; line-height:1; margin-bottom:1.25rem;} .d24_3 ul li .t p {font-size:1.125rem; line-height:1.2;} /**/ .d24_4 {padding:0 0 12.5rem 0; color:#FFFFFF; background:#090405; overflow:hidden;} .d24_4 .con_t {justify-content:space-between; align-items:center; background:#009ba4;} .d24_4 .con_t .text {width:75%; padding:5rem;} .d24_4 .con_t .text .rect_d {background-color:#FFFFFF;} .d24_4 .con_t .t_bg {margin:0; width:25%;} .d24_4 .con_t .t_bg img {width:100%;} .d24_4 ul {display:flex; flex-wrap:wrap; margin:0 -3.125rem; overflow:hidden;} .d24_4 ul li {width:50%; margin-top:6.25rem; padding:0 3.125rem;} .d24_4 ul li .inner {} .d24_4 ul li img {display:block; margin-bottom:1.875rem; width:60%;} .d24_4 ul li .t {width:100%;} .d24_4 ul li .t h4 {font-size:1.375rem; margin-bottom:1.25rem;} .d24_4 ul li .t p {font-size:1.125rem;} /**/ .d24_5 {color:#FFFFFF; background:#090405;} .d24_5 .text {} .d24_5 .text h2 {text-align:left; width:50%;} .d24_5 .text h2::before {left:0;} .d24_5 .con_t {flex-direction:row-reverse;} .d24_5 .con_t .t_bg img {margin:0 auto 0 0;} .d24_5 ul {margin-top:6.25rem;} .d24_5 ul li {margin-bottom:2.5rem;} .d24_5 ul li .inner {display:flex; align-items:center; flex-direction:row-reverse;} .d24_5 ul li img {width:40%;} .d24_5 ul li .t {margin:0 2.5rem 0 0; width:60%;} .d24_5 ul li .t h4 {font-size:1.375rem; margin-bottom:1.25rem;} .d24_5 ul li .t p {font-size:1.125rem;} .d24_5 ul li:nth-child(2) .inner, .d24_5 ul li:nth-child(4) .inner {flex-direction:row;} .d24_5 ul li:nth-child(2) .t, .d24_5 ul li:nth-child(4) .t {margin:0 0 0 2.5rem;} .d24_5 ul li:last-child {margin:0;} /**/ .d24_6 {padding:12.5rem 0; background:#090405;} .d24_6 .text {margin-bottom:9.375rem;} .d24_6 .topic {background-image:url("../images/p24/006_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d24_6 .swiper-container {width:50%; height:56.25rem; margin:0 0 0 auto; padding:0;} .d24_6 .swiper-container .swiper-wrapper {} .d24_6 .swiper-container .swiper-slide {} .d24_6 .swiper-container .img_box {display:block; text-align:left; padding:0 1.25rem; background:transparent;} .d24_6 .swiper-container .img_box img {display:block; width:100%;} .d24_6 .swiper-container .text {margin:1.25rem auto 0; padding:0 1.25rem; text-align:left;} .d24_6 .swiper-container .text h4 {font-size:1.125rem;} .d24_6 .swiper-container .text p {font-size:1rem;} .d24_6 .swiper-container-vertical > .swiper-pagination-bullets{right:0;} .d24_6 .swiper-button-next, .d24_6 .swiper-button-prev {width:3.75rem; height:3.75rem;} .d24_6 .swiper-button-prev {left:50%; top:0; margin:0 0 0 -1.875rem; background:url("../images/p24/v_prev.png") no-repeat center center / 100% auto;} .d24_6 .swiper-button-prev::after {display:none;} .d24_6 .swiper-button-next {background:red; left:50%; top:auto; bottom:0; margin:0 0 0 -1.875rem; background:url("../images/p24/v_next.png") no-repeat center center / 100% auto;} .d24_6 .swiper-button-next::after {display:none;} /**/ .d24_7 {background:#090405; overflow:hidden;} .d24_7 .con_t {} .d24_7 .con_t .text {} .d24_7 .con_t .text .rect_d {margin:0 0 0 auto;} .d24_7 .con_t .text h2 {text-align:right;} .d24_7 .con_t .text h2 img {display:block; margin-top:2.5rem;} .d24_7 ul {display:flex; flex-wrap:wrap; margin:5rem -1.25rem 0;} .d24_7 ul li {width:33.333333%; padding:1.25rem;} .d24_7 ul li .inner {} .d24_7 ul li .inner a {display:block; position:relative; padding-bottom:6.25rem; overflow:hidden;} .d24_7 ul li img {display:block;} .d24_7 ul li .t {width:100%; height:6.25rem; padding:1.25rem; border-top:4px solid #009ba4; color:#FFFFFF; position:absolute; left:0; bottom:0; background-image:linear-gradient(to left, rgba(59,54,55,1), rgba(35,30,30,1)); transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;} .d24_7 ul li .t h4 {font-size:1.125rem; margin-bottom:0.9375rem;} .d24_7 ul li .t p {visibility:hidden; opacity:0; font-size:0.875rem; transition:all 0.3s ease 0s;} .d24_7 ul li .inner a:hover .t {height:100%;} .d24_7 ul li .inner a:hover .t p {opacity:1; visibility:visible;} /**/ .d24_8 {color:#FFFFFF; background:#090405;} .d24_8 .topic {padding:6.25rem 0 0; background-image:url("../images/p24/008_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d24_8 .topic .p_design {margin-top:12.5rem; padding:2.5rem; width:50%; background:#000000;} .d24_8 .topic .p_design h3 {font-size:1.375rem; color:#009ba4; margin-bottom:1.25rem;} .d24_8 .topic .p_design p {font-size:1.125rem;} .d24_8 .text {} .d24_8 .grad {display:flex; flex-wrap:wrap; margin:6.25rem -0.3125rem 0;} .d24_8 ul {width:50%; display:flex;} .d24_8 ul li {} .d24_8 ul li .inner {position:relative; height:100%; display:flex; align-items:center; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d24_8 ul li img {display:block; margin:auto; flex-shrink:0; width:100%;} .d24_8 ul li p {opacity:0; padding:1.25rem; font-size:1.125rem; line-height:1.4; text-align:center; width:100%; color:#FFFFFF; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:all 0.3s ease-out 0s;} .d24_8 ul:nth-child(1) {height:25rem; position:relative; overflow:hidden;} .d24_8 ul:nth-child(1) li {position:absolute; left:0; top:0; width:100%; height:100%; padding:0.3125rem;} .d24_8 ul:nth-child(2) {flex-wrap:wrap;} .d24_8 ul:nth-child(2) li {width:33.333333%; padding:0.3125rem;} .d24_8 ul:nth-child(2) li .inner {background-position:center center; background-repeat:no-repeat; background-size:cover;} .d24_8 ul:nth-child(2) li .inner a {display:block; width:100%; height:100%;} .d24_8 ul:nth-child(2) li .inner a:hover p {opacity:1;} /**/ .d24_9 {color:#FFFFFF; padding-top:9.375rem; background:#090405;} .d24_9 ul {} .d24_9 ul li {margin-bottom:2.5rem; padding:3.75rem; background-image:linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d24_9 ul li .inner {display:flex; align-items:center;} .d24_9 ul li img {width:40%;} .d24_9 ul li .t {margin-left:2.5rem; width:60%;} .d24_9 ul li .t h4 {font-size:1.375rem; margin-bottom:1.25rem;} .d24_9 ul li .t p {font-size:1.125rem;} .d24_9 ul li:nth-child(2), .d24_9 ul li:nth-child(4) {background-image:linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d24_9 ul li:nth-child(2) .inner, .d24_9 ul li:nth-child(4) .inner {flex-direction:row-reverse; text-align:right;} .d24_9 ul li:nth-child(2) .t, .d24_9 ul li:nth-child(4) .t {margin:0 2.5rem 0 0;} .d24_9 ul li:last-child {margin:0;} /**/ .d24_10 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d24_10 h2 {font-size:2.75rem; color:#FFFFFF; text-align:center;} /****************************************/ /* products detail: ProPet 70 */ /****************************************/ /**/ .sel_products_detail_25 {} /*公共*/ .sel_products_detail_25 img {display:block; width:100%;} .sel_products_detail_25 .d25_con {} .sel_products_detail_25 .d25_con .topic {padding:6.25rem; background-color:#000000; background-position:center center; background-repeat:no-repeat; background-size:cover;} .sel_products_detail_25 .d25_con .topic .text {width:50%;} .sel_products_detail_25 .d25_con .topic .text h2 {font-size:2.75rem; margin-bottom:1.25rem;} .sel_products_detail_25 .d25_con .topic .text p {font-size:1.375rem;} .sel_products_detail_25 .d25_con_ul ul {display:flex; flex-wrap:wrap; margin:0 -1.25rem; padding:6.25rem 0;} .sel_products_detail_25 .d25_con_ul ul li {width:50%; padding:1.25rem;} .sel_products_detail_25 .d25_con_ul ul li .inner {padding:2.5rem; height:100%; background:#FFFFFF; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);;} .sel_products_detail_25 .d25_con_ul ul li img {display:block; width:100%; margin-bottom:1.875rem;} .sel_products_detail_25 .d25_con_ul ul li h4 {font-size:1.375rem; margin-bottom:0.625rem; color:#009FAB;} .sel_products_detail_25 .d25_con_ul ul li p { font-size:1.125rem;} /**/ .d25_1 {position:relative; height:100vh; color:#FFFFFF; background-color:#000000; background-image:url('../images/p25/001_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d25_1 h1 {font-size:0; text-align:center; position:absolute; left:50%; top:43%; width:50%; transform:translateX(-50%) translateY(-50%); animation:d25_1_h1 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} /**/ /* @keyframes d25_1_h1 { 0% { opacity:0; transform:translateX(-50%) translateY(40px); } 100% { opacity:1; transform:translateX(-50%) translateY(0); } } */ .d25_1 .img {/*opacity:0;*/ width:48%; margin:auto; position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:1; animation:d25_1_img 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0.5s;} /**/ /* @keyframes d25_1_img { 0% { opacity:0; transform:translateX(-50%) translateY(40px); } 100% { opacity:1; transform:translateX(-50%) translateY(0); } } */ .d25_1 .text {/*opacity:0; */position:absolute; z-index:20; left:5%; bottom:15%; width:31.25rem; animation:d25_1_text 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:1s;} /**/ /* @keyframes d25_1_text { 0% { opacity:0; transform:translateY(40px); } 100% { opacity:1; transform:translateY(0); } } */ .d25_1 .text h2 {font-size:2rem; color:#009FAB; margin-bottom:1.25rem;} .d25_1 .text p {font-size:1.125rem; color:#FFFFFF; opacity:0.3;} .d25_1 .ornament {display:block; position:absolute;} .d25_1 .ornament img {display:block; width:100%;} .d25_1 .o_1 {width:12.5rem; left:6.25rem; top:6.25rem;} .d25_1 .o_2 {width:9.375rem; right:0; top:6.25rem;} /**/ .d25_2 {} .d25_2 .t {padding:9.375rem 0 0; background-color:#000000; background-image:url('../images/p25/002_t_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d25_2 .t .box {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;} .d25_2 .t img {width:calc(60% - 2.5rem);} .d25_2 .t .text {color:#FFFFFF; width:calc(35%);} .d25_2 .t .text .tt {} .d25_2 .t .text h3 {font-size:2rem; margin-bottom:1.25rem;} .d25_2 .t .text p {font-size:1rem;} .d25_2 .t .text p .division {display:block; height:1.25rem;} .d25_2 .t .text img {width:100%; margin-top:2.5rem;} .d25_2 .b {padding:9.375rem 0 12.5rem; border-bottom:0.625rem solid #009FAB; background-color:#000000; background-image:url('../images/p25/002_b_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d25_2 .b .box {} .d25_2 .b .text {width:50%;} .d25_2 .b .text h3 {font-size:2.75rem; color:#009FAB;} /**/ .d25_3 {padding:6.25rem 0;} .d25_3 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:-12.5rem;} .d25_3 .img {} .d25_3 .text h4 {font-size:1.125rem; color:#009FAB; margin-bottom:1.25rem;} .d25_3 .text p {font-size:1rem;} .d25_3 .img_1 {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d25_3 .img_1 img {display:block; width:calc(50% - 2.5rem);} .d25_3 .img_1 ul {width:calc(50% - 2.5rem);} .d25_3 .img_1 ul li {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:1.875rem 0;} .d25_3 .img_1 ul li .cover {width:7.5rem; border:1px solid rgba(0,0,0,0.3);} .d25_3 .img_1 ul li .cover img {display:block; width:100%;} .d25_3 .img_1 ul li .text {width:calc(100% - 7.5rem - 2.5rem);} .d25_3 .img_2 {width:calc(50% - 2.5rem);} .d25_3 .img_2 img, .d25_3 .img_3 img {display:block; width:100%;} .d25_3 .img_2 ul, .d25_3 .img_3 ul { margin-top:2.5rem; } .d25_3 .img_3 {width:calc(50% - 2.5rem);} /**/ .d25_4 {background-color:#e9e9e9;} .d25_4 .topic {background-image:url("../images/p25/004_bg.jpg");} .d25_4 .topic .text {margin:0 0 0 auto;} .d25_4 .topic .text h2 {color:#009FAB;} .d25_4 .topic .text p {opacity:0.8;} .d25_4 .topic .text img {margin-top:2.5rem; width:80%;} /**/ .d25_5 {background-color:#e9e9e9;} .d25_5 .topic {background-image:url("../images/p25/005_bg.jpg");} .d25_5 .topic .text {margin:auto; text-align:center;} .d25_5 .topic .text h2 {color:#009FAB;} .d25_5 .topic .text p {color:#FFFFFF;} .d25_5 ul li .inner {background-color:#e9e9e9;} /**/ .d25_6 {background-color:#e9e9e9;} .d25_6 .topic {position:relative; background-image:url("../images/p25/006_bg.jpg");} .d25_6 .topic img {width:53.125rem; position:absolute; left:0; bottom:-1.375rem;} .d25_6 .topic .text {margin:0 0 0 auto; width:60%!important; text-align:right; color:#FFFFFF; position:relative; z-index:1;} .d25_6 ul {} .d25_6 ul li {padding:6.25rem 0;} .d25_6 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d25_6 ul li .text {width:calc(50% - 2.5rem);} .d25_6 ul li .img {width:calc(50% - 2.5rem);} .d25_6 ul li .img img {display:block; width:100%;} .d25_6 ul li .text h2 {font-size:2rem; margin-bottom:2.5rem; color:#009FAB;} .d25_6 ul li .text p {font-size:1.125rem;} .d25_6 ul li .text dl {margin-top:1.25rem; display:flex; flex-wrap:wrap;} .d25_6 ul li .text dl dt {width:20%; text-align:center;} .d25_6 ul li .text dl dt img {display:block; margin:auto;} .d25_6 ul li .text dl dt p {} .d25_6 ul li:nth-child(2n+1) {background:#212325;} .d25_6 ul li:nth-child(2n+1) .text p {color:#FFFFFF;} .d25_6 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} .d25_6 ul li:last-child {position:relative; overflow:hidden;} .d25_6 ul li:last-child dl {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:3.75rem;} .d25_6 ul li:last-child dl dt {display:flex; align-items:center; width:33.333333%;} .d25_6 ul li:last-child dl dt img {display:block; width:3.125rem; height:3.125rem; margin-right:1.25rem; flex-shrink:0;} .d25_6 ul li:last-child dl dt .r {width:calc(100% - 3.125rem); text-align:left;} .d25_6 ul li:last-child dl dt h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.25rem;} .d25_6 ul li:last-child dl dt p {font-size:1rem;} .d25_6 ul li:last-child .cell .text {width:70%; position:relative; z-index:1;} .d25_6 ul li:last-child .machine {position:absolute; right:0; top:0; width:37.5rem;} .d25_6 ul li:nth-child(3) .cell .text {width:calc(45% - 2.5rem);} .d25_6 .sc_wrap {width:calc(55%); padding:0 5rem; position:relative;} .d25_6 .swiper-container {padding:0; position:static;} .d25_6 .swiper-container .img_box {padding:0; border:none;} .d25_6 .swiper-container .swiper-pagination {bottom:-2.5rem;} .d25_6 .swiper-container .swiper-button-prev {left:0;} .d25_6 .swiper-container .swiper-button-next {right:0;} /**/ .d25_7 {padding:9.375rem 0;} .d25_7 .topic {text-align:center; width:75%; margin:auto;} .d25_7 .topic h2 {font-size:2.75rem; color:#009FAB; margin-bottom:1.25rem;} .d25_7 .topic p {font-size:1.375rem;} .d25_7 .t {margin:6.25rem 0;} .d25_7 .t .ts {margin:2.5rem 0; background:#F1F1F1;} .d25_7 .t h3 {font-size:1.375rem;} .d25_7 .t .sc_wrap {position:relative; padding:5rem 0;} .d25_7 .t .swiper-container {position:static; max-width:77.5rem; margin:auto; padding:0 1.25rem;} .d25_7 .t .swiper-container .swiper-slide {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d25_7 .t .swiper-container .swiper-slide .text {width:calc(35% - 2.5rem); text-align:left; color:#000000;} .d25_7 .t .swiper-container .swiper-slide .text h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .d25_7 .t .swiper-container .swiper-slide .text p {font-size:1.125rem;} .d25_7 .t .swiper-container .swiper-slide .img_box {width:calc(65% - 2.5rem); padding:0; border:none; position:relative;} .d25_7 .t .swiper-container .swiper-slide .img_box img {display:block; width:100%;} .d25_7 .t .swiper-container .swiper-pagination {bottom:1.875rem;} .d25_7 .t .swiper-container .swiper-pagination-bullet {background:#000000;} .d25_7 .b {} .d25_7 .b h3 {font-size:1.375rem;} .d25_7 .b ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:2.5rem;} .d25_7 .b ul li {width:calc(50% - 2.5rem);} .d25_7 .b ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between;} .d25_7 .b ul li img {display:block; width:100%;} .d25_7 .b ul li .text {width:100%; margin-top:1.25rem;} .d25_7 .b ul li .text h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .d25_7 .b ul li .text p {font-size:1.125rem;} /**/ .d25_8 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d25_8 .topic {text-align:center;} .d25_8 .topic h2 {font-size:2.75rem; color:#009ba4; margin-bottom:1.25rem;} .d25_8 .topic p {font-size:1.375rem; color:#FFFFFF;} .d25_8 img {display:block; margin:auto;} /****************************************/ /* products detail: ProPet 80 */ /****************************************/ /**/ .sel_products_detail_26 {} /*公共*/ .sel_products_detail_26 img {display:block; width:100%;} .sel_products_detail_26 .d26_con {} .sel_products_detail_26 .d26_con .topic {padding:6.25rem; background-color:#000000; background-position:center center; background-repeat:no-repeat; background-size:cover;} .sel_products_detail_26 .d26_con .topic .text {} .sel_products_detail_26 .d26_con .topic .text h2 {font-size:2.75rem; margin-bottom:1.25rem;} .sel_products_detail_26 .d26_con .topic .text p {font-size:1.375rem;} .sel_products_detail_26 .d26_con_ul ul {display:flex; flex-wrap:wrap; margin:0 -1.25rem; padding:6.25rem 0;} .sel_products_detail_26 .d26_con_ul ul li {width:50%; padding:1.25rem;} .sel_products_detail_26 .d26_con_ul ul li .inner {padding:2.5rem; height:100%; background:#FFFFFF; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);;} .sel_products_detail_26 .d26_con_ul ul li img {display:block; width:100%; margin-bottom:1.875rem;} .sel_products_detail_26 .d26_con_ul ul li h4 {font-size:1.375rem; margin-bottom:0.625rem; color:#009FAB;} .sel_products_detail_26 .d26_con_ul ul li p {font-size:1.125rem;} /**/ .d26_1 {position:relative; height:100vh; color:#FFFFFF; background-color:#000000; background-image:url('../images/p26/001_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d26_1 h1 {font-size:0; text-align:center; position:absolute; left:50%; top:43%; width:50%; transform:translateX(-50%) translateY(-50%); animation:d26_1_h1 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} /**/ /* @keyframes d26_1_h1 { 0% { opacity:0; transform:translateX(-50%) translateY(40px); } 100% { opacity:1; transform:translateX(-50%) translateY(0); } } */ .d26_1 .img {/*opacity:0;*/ width:42%; margin:auto; position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:1; animation:d26_1_img 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0.5s;} /**/ /* @keyframes d26_1_img { 0% { opacity:0; transform:translateX(-50%) translateY(40px); } 100% { opacity:1; transform:translateX(-50%) translateY(0); } } */ .d26_1 .text {/*opacity:0;*/ position:absolute; z-index:20; left:5%; bottom:15%; width:31.25rem; animation:d26_1_text 1s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:1s;} /**/ /* @keyframes d26_1_text { 0% { opacity:0; transform:translateY(40px); } 100% { opacity:1; transform:translateY(0); } } */ .d26_1 .text h2 {font-size:2rem; color:#009FAB; margin-bottom:1.25rem;} .d26_1 .text p {font-size:1.125rem; color:#FFFFFF; opacity:0.3;} .d26_1 .ornament {display:block; position:absolute;} .d26_1 .ornament img {display:block; width:100%;} .d26_1 .o_1 {width:12.5rem; left:6.25rem; top:6.25rem;} .d26_1 .o_2 {width:9.375rem; right:0; top:6.25rem;} /**/ .d26_2 {background-color:#000000; background-image:url('../images/p26/002_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d26_2 .t {} .d26_2 .t .box {padding:6.25rem 0 50vh 0;} .d26_2 .t .text {color:#FFFFFF; width:50%; margin:0 0 0 auto; padding:3.75rem; background:rgba(5, 75, 81, 0.8); mix-blend-mode:hard-light;} .d26_2 .t .text h3 {font-size:2rem; margin-bottom:1.25rem;} .d26_2 .t .text p {font-size:1.125rem;} .d26_2 .t .text p .division {display:block; height:1.25rem;} /**/ .d26_3 {background-color:#e9e9e9;} .d26_3 .topic {padding:6.25rem 0!important; background-image:url("../images/p26/003_bg.jpg"); background-position:right top!important;} .d26_3 .topic .text {margin:auto; max-width:77.5rem; width:100%!important; padding:0 6.25rem 0 1.25rem;} .d26_3 .topic .text h2 {color:#009FAB;} .d26_3 .topic .text p {color:#FFFFFF;} .d26_3 .sc {background:#212325; position:relative;} .d26_3 .sc .swiper-container {padding:6.25rem 0; position:static;} .d26_3 .sc .swiper-container .swiper-wrapper {} .d26_3 .sc .swiper-container .swiper-slide {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d26_3 .sc .swiper-container .swiper-slide .img_box {width:calc(50% - 1.25rem); padding:0; border:none; position:relative;} .d26_3 .sc .swiper-container .swiper-slide .img_box img {display:block;} .d26_3 .sc .swiper-container .swiper-slide .text {width:calc(50% - 1.25rem); color:#FFFFFF; text-align:left;} .d26_3 .sc .swiper-container .swiper-slide .text h3 {font-size:1.375rem; margin-bottom:1.25rem;} .d26_3 .sc .swiper-container .swiper-slide .text p {font-size:1rem;} .d26_3 .sc .swiper-container .swiper-slide .text p span {display:block;} .d26_3 .sc .swiper-container .swiper-slide .text p em {display:block; font-weight:bold; margin:0.625rem 0; font-style:normal;} .d26_3 .sc .swiper-container .swiper-pagination {bottom:2.5rem!important;} /**/ .d26_4 {background-color:#e9e9e9;} .d26_4 .topic {background-image:url("../images/p26/004_bg.jpg");} .d26_4 .topic .text {margin:auto; max-width:50rem; text-align:center;} .d26_4 .topic .text h2 {color:#009FAB;} .d26_4 .topic .text h2 span {display:block;} .d26_4 .topic .text p {} .d26_4 ul li .inner {background-color:#e9e9e9;} /**/ .d26_5 {background-color:#e9e9e9;} .d26_5 .topic {position:relative; background-image:url("../images/p26/005_bg.jpg");} .d26_5 .topic img {position:absolute; left:0; bottom:0; width:37.5rem;} .d26_5 .topic .text {margin:0 0 0 auto; max-width:50rem; text-align:right; color:#FFFFFF; position:relative; z-index:1;} .d26_5 ul {} .d26_5 ul li {padding:6.25rem 0;} .d26_5 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; position:relative; z-index:1;} .d26_5 ul li .text {width:calc(50% - 2.5rem);} .d26_5 ul li .img {width:calc(50% - 2.5rem);} .d26_5 ul li .img img {display:block; width:100%;} .d26_5 ul li .text h2 {font-size:2rem; margin-bottom:1.25rem; color:#009FAB;} .d26_5 ul li .text p {font-size:1.125rem;} .d26_5 ul li .text dl {margin-top:1.25rem; display:flex; flex-wrap:wrap;} .d26_5 ul li .text dl dt {width:20%; text-align:center;} .d26_5 ul li .text dl dt img {display:block; margin:auto;} .d26_5 ul li .text dl dt p {} .d26_5 ul li:last-child {position:relative; overflow:hidden;} .d26_5 ul li:nth-child(2n+1) {background:#212325;} .d26_5 ul li:nth-child(2n+1) .text p {color:#FFFFFF;} .d26_5 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} .d26_5 ul li:last-child dl {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:2.5rem;} .d26_5 ul li:last-child dl dt {display:flex; align-items:center; width:33.333333%;} .d26_5 ul li:last-child dl dt img {display:block; width:3.125rem; height:3.125rem; margin-right:1.25rem; flex-shrink:0;} .d26_5 ul li:last-child dl dt .r {width:calc(100% - 3.125rem); text-align:left;} .d26_5 ul li:last-child dl dt h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.25rem;} .d26_5 ul li:last-child dl dt p {font-size:1rem;} .d26_5 ul li:last-child .cell .text {width:80%;} .d26_5 ul li:last-child .machine {position:absolute; right:0; top:0; width:37.5rem;} .d26_5 ul li:nth-child(3) .cell .text {width:calc(45% - 2.5rem);} .d26_5 .sc_wrap {width:calc(55%); padding:0 5rem; position:relative;} .d26_5 .swiper-container {padding:0; position:static;} .d26_5 .swiper-container .img_box {padding:0; border:none;} .d26_5 .swiper-container .swiper-pagination {bottom:-2.5rem;} .d26_5 .swiper-container .swiper-button-prev {left:0;} .d26_5 .swiper-container .swiper-button-next {right:0;} /**/ .d26_6 {background:#F1F1F1;} .d26_6 .topic {position:relative; background-image:url("../images/p26/006_bg.jpg"); background-position:left center!important;} .d26_6 .topic::after {opacity:0; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000;} .d26_6 .topic .text {margin:auto; max-width:50rem; text-align:center; position:relative; z-index:1;} .d26_6 .topic .text h2 {color:#009FAB;} .d26_6 .topic .text p {} .d26_6 .t {padding:6.25rem 0 2.5rem;} .d26_6 .t h3 {font-size:1.375rem;} .d26_6 .t ul {margin:2.5rem 0;} .d26_6 .t ul li {margin-bottom:2.5rem;} .d26_6 .t ul li:last-child {margin:0;} .d26_6 ul li:nth-child(2n+1) .cell {flex-direction:row-reverse;} .d26_6 .t ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:3.75rem; background:#FFFFFF;} .d26_6 .t ul li .text {width:calc(50% - 1.25rem);} .d26_6 .t ul li .text h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .d26_6 .t ul li .text p {font-size:1.125rem;} .d26_6 .t ul li .img {width:calc(50% - 1.25rem);} .d26_6 .t ul li .img img {display:block; width:100%;} .d26_6 .b {} .d26_6 .b h3 {font-size:1.375rem;} .d26_6 .b ul {display:flex; flex-wrap:wrap; margin:0 -1.25rem; padding:1.25rem 0;} .d26_6 .b ul li {width:50%; padding:1.25rem;} .d26_6 .b ul li .cell {padding:2.5rem; height:100%; background:#FFFFFF; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);} .d26_6 .b ul li img {display:block; width:100%; margin-bottom:1.875rem;} .d26_6 .b ul li h4 {font-size:1.375rem; margin-bottom:0.625rem; color:#009FAB;} /**/ .d26_7 {} .d26_7 .topic {background-image:url("../images/p26/007_bg.jpg"); background-position:center top!important;} .d26_7 .topic .text {margin:auto; max-width:50rem; text-align:center; color:#009FAB;} .d26_7 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; padding:6.25rem 0;} .d26_7 .img {} .d26_7 .text h4 {font-size:1.125rem; color:#009FAB; margin-bottom:0.625rem;} .d26_7 .text p {font-size:1rem;} .d26_7 .img_1 {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-bottom:3.75rem;} .d26_7 .img_1 img {display:block; width:calc(50% - 2.5rem);} .d26_7 .img_1 ul {width:calc(50% - 2.5rem);} .d26_7 .img_1 ul li {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:1.875rem 0;} .d26_7 .img_1 ul li .cover {width:7.5rem; border:1px solid rgba(0,0,0,0.3);} .d26_7 .img_1 ul li .cover img {display:block; width:100%;} .d26_7 .img_1 ul li .text {width:calc(100% - 7.5rem - 2.5rem);} .d26_7 .img_2 {width:calc(50% - 2.5rem);} .d26_7 .img_2 ul, .d26_7 .img_3 ul { margin-top:2.5rem; } .d26_7 .img_3 {width:calc(50% - 2.5rem);} /**/ .d26_8 {} .d26_8 .topic {width:80%; margin:auto; text-align:center;} .d26_8 .topic h2 {font-size:2.75rem; color:#009ba4; margin-bottom:1.25rem;} .d26_8 .topic p {font-size:1.375rem;} .d26_8 img {display:block; margin:auto;} .d26_8 .swiper-container {margin-top:3.75rem; padding:6.25rem; background:rgba(0, 0, 0, 0.9);} .d26_8 .swiper-slide .row {padding:0;} .d26_8 .swiper-container .swiper-slide .img_box {padding:0; border:none;} .d26_8 .swiper-container .swiper-pagination {bottom:2.5rem;} /****************************************/ /* products detail: P9 Elite */ /****************************************/ /**/ .sel_products_detail_27 {} /**/ .d27_1 {padding:6.25rem 0;} .d27_1 .shead {text-align:center;} .d27_1 .shead h1 {font-size:4rem;} .d27_1 .shead p {font-size:2rem;} .d27_1 .img {width:30%; margin:3.75rem auto;} .d27_1 .intro {font-size:1.375rem; line-height:1.8;} /**/ .d27_2 {padding:9.375rem 0; color:#FFFFFF; background:#2F302F;} .d27_2 .shead {} .d27_2 .shead h2 {margin-bottom:2.5rem; text-align:center; font-size:2.75rem; color:#009FAB;} .d27_2 .shead p {font-size:1.375rem;} .d27_2 ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2.5rem -2.5rem -2.5rem;} .d27_2 ul li {width:50%; padding:2.5rem;} .d27_2 ul li .cell {} .d27_2 ul li .text {} .d27_2 ul li .text h3 {font-size:2rem; position:relative; color:#009FAB; margin-bottom:2.5rem; padding-bottom:1.25rem;} .d27_2 ul li .text h3::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));} .d27_2 ul li .text p {font-size:1.375rem;} .d27_2 ul li .img {margin-bottom:2.5rem;} /**/ .d27_3 {padding:9.375rem 0;} .d27_3 .shead {} .d27_3 .shead h2 {font-size:2.75rem; padding:0 6.25rem;} .d27_3 .shead h2 span {display:block;} .d27_3 ul {margin-top:6.25rem;} .d27_3 ul li {margin-bottom:2.5rem;} .d27_3 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:3.75rem; background:#E3E3E3;} .d27_3 ul li .text {width:calc(50% - 1.25rem);} .d27_3 ul li .text h3 {font-size:1.375rem; margin-bottom:1.25rem;} .d27_3 ul li .text p {font-size:1.125rem;} .d27_3 ul li .img {width:calc(50% - 1.25rem);} .d27_3 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} /**/ .d27_4 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p27/004_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d27_4 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d27_4 .text {width:50%;} .d27_4 .text .shead {} .d27_4 .text .shead h2 {font-size:2.75rem; color:#009FAB;} .d27_4 ul {margin-top:6.25rem;} .d27_4 ul li {padding:1.25rem 0;} .d27_4 ul li .cell {display:flex; align-items:center;} .d27_4 ul li .cell img {width:6.25rem; margin-right:1.25rem; flex-shrink:0;} .d27_4 ul li p {font-size:1.125rem; font-weight:bold;} .d27_4 .img {width:50%;} /**/ .d27_5 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p27/005_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d27_5 .shead {} .d27_5 .shead h2 {font-size:2.75rem; color:#009FAB; text-align:center;} .d27_5 ul {margin-top:3.75rem;} .d27_5 ul li {padding:2.5rem 0;} .d27_5 ul li .cell {} .d27_5 ul li h3 {margin-bottom:0.625rem; font-size:2rem; color:#009FAB;} .d27_5 ul li p {font-size:1.375rem;} /****************************************/ /* products detail: P11 Elite */ /****************************************/ /**/ .sel_products_detail_28 {} /**/ .d28_1 {padding:9.375rem 0;} .d28_1 .shead {text-align:center;} .d28_1 .shead h1 {font-size:4rem;} .d28_1 .shead p {font-size:2rem;} .d28_1 .img {width:30%; margin:3.75rem auto;} .d28_1 .img img {width:100%;} .d28_1 .intro {font-size:1.375rem; line-height:1.8;} /**/ .d28_2 {padding:9.375rem 0; background:#F1F1F1;} .d28_2 .shead {} .d28_2 .shead h2 {margin-bottom:2.5rem; text-align:center; font-size:2.75rem; color:#009FAB;} .d28_2 .shead p {font-size:1.375rem;} .d28_2 ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2.5rem -2.5rem -2.5rem;} .d28_2 ul li {width:50%; padding:2.5rem;} .d28_2 ul li .cell {} .d28_2 ul li .text {} .d28_2 ul li .text h3 {font-size:2rem; position:relative; color:#009FAB; margin-bottom:1.25rem; padding-bottom:1.25rem;} .d28_2 ul li .text h3::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));} .d28_2 ul li .text p {font-size:1.375rem;} .d28_2 ul li .img {margin-bottom:1.875rem;} /**/ .d28_3 {padding:9.375rem 0; color:#FFFFFF; background:#2F302F;} .d28_3 .shead {} .d28_3 .shead h2 {font-size:2.75rem; color:#009FAB; text-align:center;} .d28_3 ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:6.25rem;} .d28_3 ul li {margin-bottom:5rem;} .d28_3 ul li:nth-child(2), .d28_3 ul li:nth-child(3), .d28_3 ul li:nth-child(7), .d28_3 ul li:nth-child(8) {width:calc(50% - 2.5rem);} .d28_3 ul li:nth-child(2) .cell, .d28_3 ul li:nth-child(3) .cell, .d28_3 ul li:nth-child(7) .cell, .d28_3 ul li:nth-child(8) .cell {flex-direction:column-reverse; justify-content:flex-end;} .d28_3 ul li:nth-child(2) .text, .d28_3 ul li:nth-child(3) .text, .d28_3 ul li:nth-child(7) .text, .d28_3 ul li:nth-child(8) .text {width:100%; padding:0;} .d28_3 ul li:nth-child(2) .img, .d28_3 ul li:nth-child(3) .img, .d28_3 ul li:nth-child(7) .img , .d28_3 ul li:nth-child(8) .img {width:100%; margin-bottom:1.25rem; padding:0;} .d28_3 ul li:nth-child(5), .d28_3 ul li:nth-child(6) {width:calc(50% - 2.5rem);} .d28_3 ul li:nth-child(5) .cell, .d28_3 ul li:nth-child(6) .cell {padding:0; background:transparent;} .d28_3 ul li:nth-child(5) .text, .d28_3 ul li:nth-child(6) .text {width:100%;} .d28_3 ul li:nth-child(5) .text h3, .d28_3 ul li:nth-child(6) .text h3 {width:100%; position:relative; margin-bottom:2.5rem; padding-bottom:1.25rem; color:#009FAB;} .d28_3 ul li:nth-child(5) .text h3::after, .d28_3 ul li:nth-child(6) .text h3::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, rgba(0,159,171,1), rgba(0,159,171,0));} .d28_3 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; height:100%; padding:3.75rem; background:#009FAB;} .d28_3 ul li .text {width:calc(50% - 1.25rem);} .d28_3 ul li .text h3 {font-size:2rem; margin-bottom:1.25rem;} .d28_3 ul li .text p {font-size:1.375rem;} .d28_3 ul li .img {width:calc(50% - 1.25rem);} /**/ .d28_4 {padding:9.375rem 0; background:#F2F2F2;} .d28_4 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;} .d28_4 .text {width:40%;} .d28_4 .text .shead {} .d28_4 .text .shead h2 {font-size:2.75rem; color:#009FAB;} .d28_4 ul {margin-top:6.25rem;} .d28_4 ul li {padding:0.625rem 0;} .d28_4 ul li .cell {display:flex; align-items:center; flex-direction:column; padding:1.25rem 0 1.875rem; background:#FFFFFF;} .d28_4 ul li .cell img {width:6.25rem; flex-shrink:0;} .d28_4 ul li p {font-size:1.125rem; font-weight:bold;} .d28_4 .img {width:50%;} /**/ .d28_5 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p28/005_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d28_5 .shead {} .d28_5 .shead h2 {font-size:2.75rem; color:#009FAB; text-align:center;} .d28_5 ul {margin-top:3.75rem;} .d28_5 ul li {padding:2.5rem 0;} .d28_5 ul li .cell {} .d28_5 ul li h3 {margin-bottom:0.625rem; font-size:2rem; color:#009FAB;} .d28_5 ul li p {font-size:1.375rem;} /**/ .d28_6 {padding:6.25rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 0.9);} .d28_6 h2 {font-size:2.75rem; text-align:center;} /****************************************/ /* products detail: P12 Elite */ /****************************************/ /**/ .sel_products_detail_29 {} /**/ .d29_1 {padding:37.5rem 0 9.375rem; background-image:url('../images/p29/001_bg.jpg'); background-position:center top; background-repeat:no-repeat; background-size:cover;} .d29_1 .shead {} .d29_1 .shead h1 {font-size:4.5rem;} .d29_1 .shead p {font-size:2rem;} /**/ .d29_2 {padding:9.375rem 0 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p29/002_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d29_2 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d29_2 .img {width:calc(50% - 2.5rem); position:relative;} .d29_2 .img .gmovie {position:absolute; right:11.55%; top:3.15%; width:40.25%; overflow:hidden;} .d29_2 .img .gmovie img {} .d29_2 .text {width:calc(50% - 2.5rem);} .d29_2 .text p {font-size:1.375rem;} .d29_2 .text p .division {display:block; height:1.25rem;} /**/ .d29_3 {padding:9.375rem 0;} .d29_3 .shead {} .d29_3 .shead h2 {font-size:2.75rem; color:#54C3CD; text-align:center;} .d29_3 .shead h2 span {display:block;} .d29_3 ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:6.25rem -1.25rem -1.25rem;} .d29_3 ul li {width:20%; padding:1.25rem;} .d29_3 ul li .cell {} .d29_3 ul li .text {text-align:center; margin-bottom:1.25rem;} .d29_3 ul li .text p {font-size:1rem; font-weight:bold; line-height:1.4;} .d29_3 ul li .img {} .d29_3 ul li:nth-child(2n) {margin-top:6.25rem;} /**/ .d29_4 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p29/004_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d29_4 .inner {} .d29_4 .shead {text-align:center;} .d29_4 .shead h2 {font-size:2.75rem; color:#54C3CD; margin-bottom:1.25rem;} .d29_4 .shead p {font-size:1.375rem;} .d29_4 .sc_wrap {position:relative;} .d29_4 .swiper-container {position:static;} .d29_4 .swiper-container .swiper-wrapper {align-items:flex-start;} .d29_4 .swiper-container .swiper-slide {} .d29_4 .swiper-container .img_box {} .d29_4 .swiper-container .text {text-align:left;} .d29_4 .swiper-container .text h3 {font-size:2rem; color:#54C3CD; position:relative; margin-bottom:1.75rem; padding-bottom:1.25rem;} .d29_4 .swiper-container .text h3::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, rgba(84,195,205,1), rgba(84,195,205,0));} .d29_4 .swiper-container .text p {font-size:1.375rem;} /**/ .d29_5 {overflow:hidden;} .d29_5 .topic {height:80vh; position:relative; background-color:#000000; background-image:url('../images/p29/005_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d29_5 .topic img {width:50%; position:absolute; right:0; bottom:0;} .d29_5 .shead {margin-top:9.375rem;} .d29_5 .shead h2 {font-size:2.75rem; text-align:center; color:#71C1CF;} .d29_5 .sc_wrap {position:relative; padding:0 0 3.75rem 0;} .d29_5 .swiper-container {position:static;} .d29_5 .swiper-container .swiper-wrapper {align-items:flex-start;} .d29_5 .swiper-container .swiper-slide {display:flex; flex-wrap:wrap; justify-content:space-between;} .d29_5 .swiper-container .swiper-slide .img_box {} .d29_5 .swiper-container .swiper-slide .text {margin-top:1.75rem; text-align:left; color:#000000;} .d29_5 .swiper-container .swiper-slide .text h3 { font-size:2rem; color:#54C3CD; margin-bottom:0.625rem;} .d29_5 .swiper-container .swiper-slide .text p {font-size:1.375rem;} .d29_5 .swiper-container .swiper-pagination-bullet {background:#000000;} .d29_5 .swiper-container .swiper-pagination {bottom:3.75rem;} .d29_5 .swiper-container .swiper-button-prev {background-image:url("images/prev_black.svg");} .d29_5 .swiper-container .swiper-button-next {background-image:url("images/next_black.svg");} .d29_5 .swiper-container .swiper-button-prev:hover, .d29_5 .swiper-container .swiper-button-next:hover {background-color:rgba(0, 0, 0, 0.05);} /**/ .d29_6 {padding:9.375rem 0; background-image:url('../images/p29/006_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d29_6 h2 {font-size:2.75rem; text-align:center;} .d29_6 .box {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:3.75rem;} .d29_6 .text {width:calc(50%);} .d29_6 .text ul {} .d29_6 .text ul li {padding:1.25rem 0;} .d29_6 .text ul li .cell {display:flex; flex-direction:row-reverse; align-items:center;} .d29_6 .text ul li .cell img {width:6.25rem; margin-left:1.25rem;} .d29_6 .text ul li p {font-size:1.125rem; font-weight:bold; text-align:right;} .d29_6 .img {width:calc(50% - 2.5rem);} /**/ .d29_7 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p29/007_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d29_7 .shead {} .d29_7 .shead h2 {font-size:2.75rem; color:#54C3CD; text-align:center;} .d29_7 ul {margin-top:3.75rem;} .d29_7 ul li {padding:2.5rem 0;} .d29_7 ul li .cell {} .d29_7 ul li h3 {margin-bottom:0.625rem; font-size:2rem; color:#54C3CD;} .d29_7 ul li p {font-size:1.375rem;} /**/ .d29_8 {padding:6.25rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 0.9);} .d29_8 h2 {font-size:2.75rem; text-align:center;} /****************************************/ /* products detail: P20 Elite */ /****************************************/ /**/ .sel_products_detail_30 {} /*公共*/ .sel_products_detail_30 img {display:block; width:100%;} .sel_products_detail_30 .d30_con .topic {padding:18.75rem 6.25rem; background-color:#000000; background-position:center center; background-repeat:no-repeat; background-size:cover;} .sel_products_detail_30 .d30_con .topic .text {color:#FFFFFF; width:50%; margin:0 0 0 auto; text-align:center;} .sel_products_detail_30 .d30_con .topic .text h2 {font-size:2.75rem;} /**/ .d30_1 {padding:25rem 0; background-image:url('../images/p30/001_bg.jpg'); background-position:left top; background-repeat:no-repeat; background-size:cover;} .d30_1 .text {text-align:center;} .d30_1 .text h1 {font-size:4rem; display:inline-block; background-image:-webkit-linear-gradient(left,#9A6BA8,#644275); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .d30_1 .text p {font-size:1.75rem; color:#595757;} /**/ .d30_2 {color:#FFFFFF; background:#000000;} .d30_2 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d30_2 .img {width:calc(50% - 2.5rem);} .d30_2 .text {width:calc(50% - 2.5rem);} .d30_2 .text h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d30_2 .text p {font-size:1.375rem;} /**/ .d30_3 {} .d30_3 .topic {background-image:url('../images/p30/003_bg.jpg'); background-attachment:fixed;} .d30_3 .box {padding:1.25rem 0; position:relative; background-color:#181718;} .d30_3 .swiper-container {position:static;} .d30_3 .swiper-container .swiper-slide {display:flex; flex-wrap:wrap; flex-direction:row-reverse; justify-content:space-between; align-items:center;} .d30_3 .swiper-container .swiper-slide .img_box {width:calc(50% - 2.5rem); position:relative; padding:0; border:none;} .d30_3 .swiper-container .swiper-slide .text {width:calc(50% - 2.5rem); color:#FFFFFF;} .d30_3 .swiper-container .swiper-slide .text h3 {font-size:2rem; margin-bottom:1.25rem;} .d30_3 .swiper-container .swiper-slide .text p {font-size:1.375rem;} .d30_3 .swiper-container .swiper-slide .text p .division {display:block; height:1.25rem;} .d30_3 .swiper-container .swiper-pagination {bottom:2.5rem;} /**/ .d30_4 .topic {background-image:url('../images/p30/004_bg.jpg'); background-attachment:fixed;} .d30_4 .list {background:#000000;} .d30_4 ul {display:flex; flex-wrap:wrap; margin:0 -1.25rem; padding:5rem 0;} .d30_4 ul li {width:50%; padding:1.25rem;} .d30_4 ul li .inner {} .d30_4 ul li .inner a {display:block; position:relative; padding-bottom:6.25rem; overflow:hidden;} .d30_4 ul li img {display:block;} .d30_4 ul li .t {width:100%; height:6.25rem; padding:1.25rem; border-top:4px solid #91619E; color:#FFFFFF; position:absolute; left:0; bottom:0; background-image:linear-gradient(to left, rgba(59,54,55,1), rgba(35,30,30,1)); transition:all 0.3s ease 0s;} .d30_4 ul li .t h4 {font-size:1.375rem; margin-bottom:0.9375rem;} .d30_4 ul li .t p {visibility:hidden; opacity:0; font-size:1.125rem; transition:all 0.3s ease 0s;} .d30_4 ul li .inner a:hover .t {height:100%;} .d30_4 ul li .inner a:hover .t p {opacity:1; visibility:visible;} /**/ .d30_5 .topic {background-image:url('../images/p30/005_bg.jpg'); background-attachment:fixed;} .d30_5 .list {padding:6.25rem 0; background:#000000;} .d30_5 ul {} .d30_5 ul li {margin-bottom:2.5rem; padding:3.75rem; background-image:linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d30_5 ul li:last-child {margin:0;} .d30_5 ul li .cell {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;} .d30_5 ul li .img {width:calc(40% - 2.5rem);} .d30_5 ul li .text {width:calc(60% - 2.5rem); color:#FFFFFF;} .d30_5 ul li .text h3 {font-size:1.375rem; margin-bottom:1.25rem;} .d30_5 ul li .text p {font-size:1.125rem;} .d30_5 ul li:nth-child(2), .d30_5 ul li:nth-child(4) {background-image:linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d30_5 ul li:nth-child(2) .cell, .d30_5 ul li:nth-child(4) .cell {flex-direction:row-reverse;} .d30_5 ul li:nth-child(2) .text, .d30_5 ul li:nth-child(4) .text {margin:0 2.5rem 0 0;} /**/ .d30_6 .topic {background-image:url('../images/p30/006_bg.jpg'); background-attachment:fixed;} .d30_6 .box {position:relative; padding:9.375rem 0;} .d30_6 ul {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:-2.5rem 0;} .d30_6 ul li {width:35%; padding:2.5rem 0; display:flex;} .d30_6 ul li .cell {width:80%;} .d30_6 ul li .cell .text {margin-top:1.25rem;} .d30_6 ul li img {display:block; width:100%;} .d30_6 .img {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:30%;} .d30_6 .img img {display:block; width:100%;} .d30_6 ul li:nth-child(2), .d30_6 ul li:nth-child(4) {justify-content:flex-end;} /****************************************/ /* products detail: P25 Elite */ /****************************************/ /**/ .sel_products_detail_31 {} /**/ .d31_1 {padding:6.25rem 0;} .d31_1 .shead {text-align:center;} .d31_1 .shead h1 {font-size:4rem; color:#534479;} .d31_1 .shead p {font-size:2rem;} .d31_1 .img {width:30%; margin:3.75rem auto;} .d31_1 .img img {display:block; width:100%;} .d31_1 .intro {font-size:1.375rem; line-height:1.8;} /**/ .d31_2 {padding:9.375rem 0; background:#EDEDED;} .d31_2 .shead {} .d31_2 .shead h2 {margin-bottom:2.5rem; text-align:center; font-size:2.75rem; color:#5B4D7F;} .d31_2 .shead p {font-size:1.375rem;} .d31_2 ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2.5rem -2.5rem -2.5rem;} .d31_2 ul li {width:50%; padding:2.5rem;} .d31_2 ul li:nth-child(1) {width:100%;} .d31_2 ul li:nth-child(1) .cell {display:flex; flex-wrap:wrap; justify-content:space-between; flex-direction:row-reverse;} .d31_2 ul li:nth-child(1) .text {width:calc(50% - 2.5rem);} .d31_2 ul li:nth-child(1) .img {width:calc(50% - 2.5rem);} .d31_2 ul li .cell {} .d31_2 ul li .text {} .d31_2 ul li .text h3 {font-size:2rem; position:relative; color:#5B4D7F; margin-bottom:1.25rem; padding-bottom:1.25rem;} .d31_2 ul li .text h3::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, rgba(91,77,127,1), rgba(91,77,127,0));} .d31_2 ul li .text p {font-size:1.375rem;} .d31_2 ul li .text p .division {display:block; height:1.25rem;} .d31_2 ul li .img {margin-bottom:1.875rem;} .d31_2 ul li .img img {display:block; width:100%;} /**/ .d31_3 {padding:9.375rem 0;} .d31_3 .shead {text-align:center;} .d31_3 .shead h2 {font-size:2.75rem; color:#5B4D7F; margin-bottom:1.25rem;} .d31_3 .shead p {font-size:1.375rem;} .d31_3 ul {margin:3.75rem -2.5rem -2.5rem; display:flex; flex-wrap:wrap; justify-content:space-between;} .d31_3 ul li {width:25%; padding:2.5rem;} .d31_3 ul li .cell {} .d31_3 ul li .text {text-align:center;} .d31_3 ul li .text h3 {font-size:2.25rem; margin-bottom:1.25rem;} .d31_3 ul li .text p {font-size:1.375rem;} .d31_3 ul li .img {margin-bottom:1.25rem;} .d31_3 ul li .img img {display:block; width:100%;} /**/ .d31_4 {padding:9.375rem 0; background:#F1F1F1;} .d31_4 ul {} .d31_4 ul li {margin-bottom:2.5rem;} .d31_4 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; padding:3.75rem; background:#E3E3E3;} .d31_4 ul li .text {width:calc(50% - 1.25rem);} .d31_4 ul li .text h3 {font-size:2rem; margin-bottom:1.25rem;} .d31_4 ul li .text p {font-size:1.375rem;} .d31_4 ul li .img {width:calc(50% - 1.25rem);} .d31_4 ul li .img img {display:block; width:100%;} .d31_4 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} /**/ .d31_5 {padding:9.375rem 0;} .d31_5 h2 {margin-bottom:6.25rem; font-size:2.75rem; text-align:center; color:#534479;} .d31_5 .box {position:relative;} .d31_5 ul {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:-2.5rem 0;} .d31_5 ul li {width:35%; padding:2.5rem 0; display:flex;} .d31_5 ul li .cell {width:80%;} .d31_5 ul li .cell .text {margin-top:1.25rem;} .d31_5 ul li .cell .text p {font-size:1rem;} .d31_5 ul li img {display:block; width:100%;} .d31_5 .img {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:30%;} .d31_5 .img img {display:block; width:100%;} .d31_5 ul li:nth-child(2), .d31_5 ul li:nth-child(4) {justify-content:flex-end;} /**/ .d31_6 {padding:6.25rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 0.9);} .d31_6 h2 {font-size:2.75rem; text-align:center;} /****************************************/ /* products detail: P40 Elite */ /****************************************/ /**/ .sel_products_detail_32 {} /*d32_con模块*/ .d32_con {} .d32_con .topic {padding:12.5rem 0; background-color:#000000; background-position:center center; background-size:cover; background-repeat:no-repeat;} .d32_con .topic .text {color:#FFFFFF; text-align:center;} .d32_con .topic .text h2 {font-size:2.75rem; margin-bottom:1.875rem;} .d32_con .topic .text p {font-size:1.375rem;} .d32_con ul {display:flex; flex-wrap:wrap; margin:6.25rem -1.25rem 0;} .d32_con ul li {width:50%; padding:1.25rem;} .d32_con ul li .inner {padding:2.5rem; height:100%; background:#FFFFFF; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);;} .d32_con ul li img {display:block; width:100%; margin-bottom:1.875rem;} .d32_con ul li h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .d32_con ul li p { font-size:1.125rem;} /**/ .d32_1 {position:relative; padding:25rem 0; color:#FFFFFF; background-color:#009ba4; background-image:url("../images/p32/001_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d32_1 .mrect {display:none; position:absolute; left:0; top:12.5rem; width:100%;} .d32_1 .mrect .inner {max-width:93.75rem; margin:auto; position:relative;} .d32_1 .mrect i {opacity:0; display:block; width:12.5rem; height:9.375rem; position:absolute; background-image:linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0));} .d32_1 .mrect i:nth-child(1) {top:0; animation:d32_1_move_mrect_1 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(2) {top:12.5rem; animation:d32_1_move_mrect_2 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(3) {top:25rem; animation:d32_1_move_mrect_3 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(4) {top:3.125rem; width:18.75rem; height:14.0625rem; animation:d32_1_move_mrect_4 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(5) {top:12.5rem; /*opacity:0.5;*/ animation:d32_1_move_mrect_5 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(6) {top:18.75rem; animation:d32_1_move_mrect_6 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(7) {top:28.125rem; width:6.25rem; height:4.6875rem; animation:d32_1_move_mrect_7 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} .d32_1 .mrect i:nth-child(8) {top:25rem; width:6.25rem; height:4.6875rem; animation:d32_1_move_mrect_8 2s cubic-bezier(0.5, 0, 0, 0.5) 1 alternate forwards; animation-delay:0s;} /**/ @keyframes d32_1_move_mrect_1 { 0% { opacity:0; right:3.125rem; } 100% { opacity:1; right:0; } } /**/ @keyframes d32_1_move_mrect_2 { 0% { opacity:0; right:-6.25rem; } 100% { opacity:0.5; right:-12.5rem; } } /**/ @keyframes d32_1_move_mrect_3 { 0% { opacity:0; right:3.125rem; } 100% { opacity:1; right:0; } } /**/ @keyframes d32_1_move_mrect_4 { 0% { opacity:0; right:21.875rem; } 100% { opacity:1; right:12.5rem; } } /**/ @keyframes d32_1_move_mrect_5 { 0% { opacity:0; right:31.25rem; } 100% { opacity:1; right:18.75rem; } } /**/ @keyframes d32_1_move_mrect_6 { 0% { opacity:0; right:9.375rem; } 100% { opacity:1; right:6.25rem; } } /**/ @keyframes d32_1_move_mrect_7 { 0% { opacity:0; right:31.25rem; } 100% { opacity:1; right:25rem; } } /**/ @keyframes d32_1_move_mrect_8 { 0% { opacity:0; right:15.625rem; } 100% { opacity:1; right:12.5rem; } } .d32_1 .s_title {width:100%;} .d32_1 .s_title .row .text {text-align:center;} .d32_1 .s_title .row .text h1 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .d32_1 .s_title .row .text h2 {font-size:2rem; font-weight:normal; color:#FFFFFF;} /**/ .d32_2 {padding:12.5rem 0; background-color:#009ba4; background-image:url("../images/p32/002_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d32_2 .row {position:relative;} .d32_2 .img {position:absolute; right:0; top:50%; transform:translateY(-50%); width:40%; z-index:2;} .d32_2 .img img {display:block; width:100%;} .d32_2 .text {width:100%; position:relative; z-index:1; padding:3.75rem 6.25rem; background:linear-gradient(to right, rgba(0,155,164,0.8), rgba(0,155,164,0));} .d32_2 .text ul {width:60%;} .d32_2 .text ul li {padding:0.625rem 0; border-bottom:1px solid rgba(255, 255, 255, 1.0);} .d32_2 .text ul li:last-child {border:none;} .d32_2 .text ul li p {color:#FFFFFF; font-size:1.375rem;} .d32_2 .text ul li p span {font-size:44px; font-weight:bold;} /**/ .d32_3 {} .d32_3 .perfor {padding:12.5rem 0; background-color:#000000; background-image:url("../images/p32/003_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d32_3 ul {display:flex; flex-wrap:wrap; margin:6.25rem 0; } .d32_3 ul li {width:33.333333%; display:flex; align-items:center;} .d32_3 ul li img {display:block; margin-right:1.875rem; width:35%; border:2px solid #FFFFFF; flex-shrink:0;} .d32_3 ul li .t {width:65%; padding-right:1.25rem; color:#FFFFFF;} .d32_3 ul li .t h4 {font-size:2rem; line-height:1; margin-bottom:1.25rem;} .d32_3 ul li .t h4 span {display:inline-block; font-size:4rem; margin-right:0.625rem;} .d32_3 ul li .t h4 em {font-style:normal; font-size:1.375rem;} .d32_3 ul li .t p {font-size:1.125rem; line-height:1.2;} /**/ .d32_4 {} .d32_4 .topic {background-image:url("../images/p32/004_bg.jpg");} .d32_4 ul li {width:33.333333%;} .d32_4 .sc_wrap {position:relative; padding:6.26rem 0; background-color:#e9e9e9; background-image:url("../images/p32/004_bg_2.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d32_4 .swiper-container {position:static; padding:0 1.25rem 4.375rem; max-width:77.5rem;} .d32_4 .swiper-container .swiper-wrapper {align-items:flex-start;} .d32_4 .swiper-container .img_box {} .d32_4 .swiper-container .text {color:#000000; text-align:left;} .d32_4 .swiper-container .text h4 {font-size:1.375rem; margin-bottom:0.625rem;} .d32_4 .swiper-container .text p {} .d32_4 .swiper-container .swiper-pagination-bullet {background:#000000;} .d32_4 .swiper-container .swiper-pagination {bottom:6.25rem;} .d32_4 .swiper-container .swiper-button-prev {background-image:url("images/prev_black.svg");} .d32_4 .swiper-container .swiper-button-next {background-image:url("images/next_black.svg");} .d32_4 .swiper-container .swiper-button-prev:hover, .d32_4 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1.0);} /**/ .d32_5 {padding-bottom:6.25rem;} .d32_5 .topic {background-image:url("../images/p32/005_bg.jpg");} .d32_5 ul li .inner {background-color:#e9e9e9;} /**/ .d32_6 {position:relative; padding:0 0 6.25rem 0; overflow:hidden;} .d32_6 .row {position:relative; z-index:1;} .d32_6 .topic {height:50rem; background-image:url("../images/p32/006_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d32_6 .shead {padding:6.25rem 0; text-align:center;} .d32_6 .shead h2 {font-size:2.75rem; color:#009FAB;} .d32_6 .shead p {font-size:1.375rem;} .d32_6 ul {display:flex; flex-wrap:wrap; margin:-1.25rem;} .d32_6 ul li {width:50%; padding:1.25rem;} .d32_6 ul li .inner {padding:2.5rem; height:100%; background:#e9e9e9; box-shadow:1.25rem 1.25rem 1.25rem rgba(0,0,0,0.05);} .d32_6 ul li img {margin-bottom:1.875rem;} .d32_6 ul li h4 {font-size:1.375rem; margin-bottom:0.625rem;} .d32_6 .rects_bg {position:absolute; right:0; top:50rem; width:40.625rem; height:35.875rem; background-image:url("../images/p32/006_bg_2.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d32_7 {padding:0 0 6.25rem 0; position:relative;} .d32_7 .topic {height:50rem; background-image:url("../images/p32/007_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d32_7 .shead {padding:6.25rem 0; position:relative; z-index:1; text-align:center;} .d32_7 .shead h2 {font-size:2.75rem; color:#009FAB; margin-bottom:1.875rem;} .d32_7 .shead p {font-size:1.375rem;} .d32_7 .sc_wrap {position:relative; z-index:1;} .d32_7 .swiper-container {position:static; padding:0 1.25rem 4.375rem; max-width:77.5rem;} .d32_7 .swiper-container .swiper-wrapper {align-items:flex-start;} .d32_7 .swiper-container .img_box {} .d32_7 .swiper-container .text {color:#000000; text-align:left;} .d32_7 .swiper-container .text h4 {font-size:1.375rem; margin-bottom:0.625rem;} .d32_7 .swiper-container .text p {} .d32_7 .swiper-container .swiper-pagination-bullet {background:#000000;} .d32_7 .swiper-container .swiper-button-prev {background-image:url("images/prev_black.svg");} .d32_7 .swiper-container .swiper-button-next {background-image:url("images/next_black.svg");} .d32_7 .swiper-container .swiper-button-prev:hover, .d32_7 .swiper-container .swiper-button-next:hover {background-color:rgba(0, 0, 0, 0.05);} .d32_7 .rects_bg {position:absolute; left:0; top:50rem; width:40.625rem; height:35.875rem; background-image:url("../images/p32/007_bg_2.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d32_8 {padding:9.375rem 0; background:#F2F2F2;} .d32_8 .shead {text-align:center;} .d32_8 .shead h2 {font-size:2.75rem; color:#009FAB; margin-bottom:1.875rem;} .d32_8 .shead p {font-size:1.375rem;} .d32_8 .box {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:6.25rem;} .d32_8 .box .text {width:45%;} .d32_8 .box .text ul {} .d32_8 .box .text ul li {padding:1.25rem 0;} .d32_8 .box .text ul li .cell {display:flex; align-items:flex-start;} .d32_8 .box .text ul li img {width:6.25rem; margin-right:1.25rem; flex-shrink:0; border:1px solid rgba(0, 0, 0, 0.05);} .d32_8 .box .text ul li p {} .d32_8 .box .text ul li p strong {display:block; margin-bottom:0.625rem; font-size:1.125rem; line-height:1; color:#009FAB;} .d32_8 .box .text ul li p span {} .d32_8 .box .img {width:40%;} /**/ .d32_9 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url('../images/p32/009_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d32_9 .shead {} .d32_9 .shead h2 {font-size:2.75rem; color:#54C3CD; text-align:center;} .d32_9 ul {margin-top:3.75rem;} .d32_9 ul li {padding:2.5rem 0;} .d32_9 ul li .cell {} .d32_9 ul li h3 {margin-bottom:0.625rem; font-size:2rem; color:#54C3CD;} .d32_9 ul li p {font-size:1.375rem;} /**/ .d32_10 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d32_10 h2 {font-size:2.75rem; text-align:center; color:#FFFFFF;} /****************************************/ /* products detail: ProPet 60 */ /****************************************/ /**/ .sel_products_detail_37 {} /*公共*/ .sel_products_detail_37 img {display:block; width:100%;} /**/ .d37_1 {padding:9.375rem 0; text-align:center; background:#EFEFEF;} .d37_1 h2 {font-size:2.75rem;} .d37_1 h1 {font-size:2.75rem; margin:2.5rem 0 0.625rem; color:#009FAB;} .d37_1 h3 {font-size:1.375rem;} .d37_1 .img {width:20%; margin:2.5rem auto 0;} .d37_1 p {font-size:1.375rem; max-width:50rem; margin:auto; text-align:left;} /**/ .d37_2 {} .d37_2 .t {padding:9.375rem 0 0; background-color:#000000; background-image:url('../images/p37/002_t_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d37_2 .t .box {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;} .d37_2 .t img {width:calc(65%);} .d37_2 .t .text {color:#FFFFFF; width:calc(35% - 1.25rem);} .d37_2 .t .text .tt {} .d37_2 .t .text h2 {font-size:2.75rem; margin-bottom:1.875rem;} .d37_2 .t .text p {font-size:1rem; margin-bottom:1.25rem;} .d37_2 .b {padding:9.375rem 0; background-color:#000000; background-image:url('../images/p37/002_b_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d37_2 .b .box {} .d37_2 .b .text {margin:auto; color:#FFFFFF; text-align:center;} .d37_2 .b .text h3 {font-size:2.75rem; color:#009FAB; margin-bottom:1.25rem;} .d37_2 .b .text p {font-size:1.375rem;} /**/ .d37_3 {} .d37_3 ul {} .d37_3 ul li {padding:6.25rem 0;} .d37_3 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .d37_3 ul li .text {width:calc(50% - 2.5rem);} .d37_3 ul li .img {width:calc(50% - 2.5rem);} .d37_3 ul li .img img {display:block; width:100%;} .d37_3 ul li .text h2 {font-size:2rem; margin-bottom:1.25rem; color:#009FAB;} .d37_3 ul li .text p {font-size:1.125rem;} .d37_3 ul li .text dl {margin-top:1.25rem; display:flex; flex-wrap:wrap;} .d37_3 ul li .text dl dt {width:20%; text-align:center;} .d37_3 ul li .text dl dt img {display:block; margin:auto;} .d37_3 ul li .text dl dt p {} .d37_3 ul li:nth-child(2n) {background:#e9e9e9;} .d37_3 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} .d37_3 ul li:nth-child(2n+1) {background:#212325;} .d37_3 ul li:nth-child(2n+1) .text {color:#FFFFFF;} .d37_3 ul li:last-child {position:relative; overflow:hidden;} .d37_3 ul li:last-child dl {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:3.75rem;} .d37_3 ul li:last-child dl dt {display:flex; align-items:center; width:33.333333%;} .d37_3 ul li:last-child dl dt img {display:block; width:3.125rem; height:3.125rem; margin-right:1.25rem; flex-shrink:0;} .d37_3 ul li:last-child dl dt .r {width:calc(100% - 3.125rem); text-align:left;} .d37_3 ul li:last-child dl dt h4 {font-size:1.375rem; color:#009FAB; margin-bottom:0.25rem;} .d37_3 ul li:last-child dl dt p {font-size:1rem;} .d37_3 ul li:last-child .cell .text {width:80%; position:relative; z-index:1;} .d37_3 ul li:last-child .machine {position:absolute; right:0; top:0; width:37.5rem;} .d37_3 ul li:nth-child(3) .cell .text {width:calc(45% - 2.5rem);} .d37_3 .sc_wrap {width:calc(55%); padding:0 5rem; position:relative;} .d37_3 .swiper-container {padding:0; position:static;} .d37_3 .swiper-container .img_box {padding:0; border:none;} .d37_3 .swiper-container .swiper-pagination {bottom:-2.5rem;} .d37_3 .swiper-container .swiper-button-prev {left:0;} .d37_3 .swiper-container .swiper-button-next {right:0;} .d37_3 .swiper-container .swiper-pagination-bullet {} /**/ .d37_4 {} .d37_4 .topic {padding:5rem 0; background-color:#000000; background-image:url('../images/p37/004_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d37_4 .topic .text {text-align:center; max-width:75rem; margin:auto; padding:0 2.5rem; color:#FFFFFF;} .d37_4 .topic h2 {font-size:2.75rem; color:#009FAB; margin-bottom:1.25rem;} .d37_4 .topic p {font-size:1.375rem;} .d37_4 .sc_wrap {position:relative;} .d37_4 .swiper-container {position:static; padding:6.25rem 0;} .d37_4 .swiper-container .swiper-wrapper {align-items:flex-start;} .d37_4 .swiper-container .swiper-slide {} .d37_4 .swiper-container .img_box {margin-bottom:1.875rem; padding:0; border:none;} .d37_4 .swiper-container .text {text-align:left; color:#000000;} .d37_4 .swiper-container .text h3 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .d37_4 .swiper-container .text p {font-size:1.125rem;} .d37_4 .swiper-container .swiper-pagination {bottom:2.5rem;} .d37_4 .swiper-container .swiper-pagination-bullet {background:#000000;} /**/ .d37_5 {} .d37_5 .topic {padding:5rem 0; background-color:#000000; background-image:url('../images/p37/005_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d37_5 .topic .text {text-align:center; max-width:75rem; margin:auto; padding:0 2.5rem; color:#FFFFFF;} .d37_5 .topic h2 {font-size:2.75rem; color:#009FAB; margin-bottom:20px;} .d37_5 .topic p {font-size:1.375rem;} .d37_5 .list {margin:3.75rem 0;} .d37_5 .list ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:-1.25rem;} .d37_5 .list ul li {width:50%; padding:1.25rem;} .d37_5 .list ul li .cell {} .d37_5 .list ul li h3 {font-size:1.375rem; color:#009FAB;} .d37_5 .list ul li img {margin:1.25rem 0;} .d37_5 .list ul li p {} /**/ .d37_6 {padding:9.375rem 0 0; background-color:#EFEFEF; background-image:url('../images/p37/006_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d37_6 .topic {margin-bottom:5rem;} .d37_6 .topic .text {text-align:center; max-width:50rem; margin:auto; padding:0 2.5rem;} .d37_6 .topic h2 {font-size:2.75rem; color:#009FAB; margin-bottom:1.25rem;} .d37_6 .topic p {font-size:1.375rem;} .d37_6 .list {} .d37_6 .list h2 {font-size:2rem;} .d37_6 .list ul {margin:2.5rem 0 0;} .d37_6 .list ul li {margin-bottom:2.5rem;} .d37_6 .list ul li:last-child {margin:0;} .d37_6 .list ul li:nth-child(2n) .cell {flex-direction:row-reverse;} .d37_6 .list ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:3.75rem; background:#FFFFFF;} .d37_6 .list ul li .text {width:calc(50% - 1.25rem);} .d37_6 .list ul li .text h3 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .d37_6 .list ul li .text p {font-size:1.125rem;} .d37_6 .list ul li .img {width:calc(50% - 1.25rem);} .d37_6 .st_wrap {margin-top:6.25rem; padding:3.75rem 0; position:relative; background:#FFFFFF;} .d37_6 .st_wrap h2 {font-size:2rem;} .d37_6 .st_wrap .swiper-container {padding:2.5rem 0; position:static;} .d37_6 .st_wrap .swiper-container .swiper-slide {display:flex; justify-content:space-between; flex-direction:row-reverse; flex-wrap:wrap; align-items:center;} .d37_6 .st_wrap .swiper-container .text {width:calc(50% - 2.5rem); text-align:left; color:#000000;} .d37_6 .st_wrap .swiper-container .text h3 {font-size:1.375rem; color:#009FAB; margin-bottom:1.25rem;} .d37_6 .st_wrap .swiper-container .img_box {padding:0; width:calc(50% - 2.5rem);} .d37_6 .st_wrap .swiper-container .swiper-pagination {bottom:2.5rem;} .d37_6 .st_wrap .swiper-container .swiper-pagination-bullet {background:#000000;} /**/ .d37_7 {padding:6.25rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 0.9);} .d37_7 h2 {font-size:2.75rem; color:#009FAB; text-align:center;} /****************************************/ /* products detail: DVT */ /****************************************/ /**/ .sel_products_detail_38 {} .sel_products_detail_38 .con {} .sel_products_detail_38 .con .text {} .sel_products_detail_38 .con .text h2 {font-size:2.75rem; text-align:center;} .sel_products_detail_38 .con .text ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:3.75rem; overflow:hidden;} .sel_products_detail_38 .con .text ul li {margin-bottom:2.5rem; width:calc(50% - 2.5rem);} .sel_products_detail_38 .con .text ul li:last-child {margin-bottom:0;} .sel_products_detail_38 .con .text ul li .cell {} .sel_products_detail_38 .con .text ul li img {display:block; border-radius:1.25rem; border:1px solid rgba(0, 0, 0, 0.1);} .sel_products_detail_38 .con .text ul li .name {margin-top:2.5rem;} .sel_products_detail_38 .con .text ul li h3 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .sel_products_detail_38 .con .text ul li p {font-size:1.125rem;} /**/ .d38_1 {padding:32rem 0 9.375rem; background:url("../images/p38/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d38_1 .text {text-align:center;} .d38_1 .text h1 {font-size:4.5rem;} /**/ .d38_2 {padding:6.25rem 0; background:#f2f2f2;} /**/ .d38_3 {padding:6.25rem 0;} /**/ .d38_4 {padding:6.25rem 0; background:#f2f2f2;} /**/ .d38_5 {padding:6.25rem 0;} /****************************************/ /* products detail: SV-M2K30 */ /****************************************/ /**/ .sel_products_detail_39 {} /**/ .d39_1 {padding:6.25rem 0;} .d39_1 .main {display:flex; align-items:center;} .d39_1 .text {width:45%;} .d39_1 .text h1 {font-size:4rem; margin-bottom:3.75rem;} .d39_1 .text h2 {font-size:2.75rem; color:#009ca5;} .d39_1 .text p {font-size:1.375rem;} .d39_1 .img {width:55%;} /**/ .d39_2 {padding:9.375rem 0; color:#ffffff; background:#000000;} .d39_2 .text {margin-bottom:5rem; text-align:center;} .d39_2 .text h2 {font-size:2.75rem; margin-bottom:2.5rem;} .d39_2 .text p {padding:0 10%; font-size:1.375rem; color:#8d8d8d;} .d39_2 .img {margin:auto;} .d39_2 .img .bp {display:block; margin:auto; width:60%; text-align:center;} .d39_2 .img .bp img {margin-bottom:2.5rem;} .d39_2 .img .bp h3 {font-size:2rem;} .d39_2 .img .bp p{font-size:1.125rem; opacity:0.8;} .d39_2 .img ul {display:none; float:left; width:50%; padding-left:3.75rem;} .d39_2 .img ul li {margin-bottom:3.125rem;} .d39_2 .img ul li:last-child {margin:0;} .d39_2 .img ul li h3 {font-size:2rem;} .d39_2 .img ul li p {margin-bottom:1.25rem; text-align:left; font-size:1.125rem; opacity:0.8;} .d39_2 .img ul li .pix_show {position:relative; padding-right:7%;} .d39_2 .img ul li .pix_show span {position:absolute; font-size:0.875rem; opacity:0.5;} .d39_2 .img ul li .pix_show span:nth-child(1) {top:8%; right:0;} .d39_2 .img ul li .pix_show span:nth-child(2) {bottom:-4%; right:49%;} .d39_2 .img ul li:nth-child(2) .pix_show span:nth-child(1) {top:-6%; right:0;} .d39_2 .img ul li:nth-child(2) .pix_show span:nth-child(2) {bottom:-6%; right:78%;} /**/ .d39_3 {padding:0 0 9.375rem; background:#000000;} .d39_3 .text {text-align:center; color:#ffffff; margin-bottom:2.5rem;} .d39_3 .text h2 {font-size:2.75rem; margin-bottom:2.5rem;} .d39_3 .text p {font-size:1.375rem; color:#8d8d8d; padding:0 10%;} .d39_3 .img {} .d39_3 .img .t {position:relative; margin-bottom:3.75rem; padding:0 15%;} .d39_3 .img .t ul {display:flex; justify-content:space-between; flex-wrap:wrap;} .d39_3 .img .t ul li {width:50%; text-align:center; color:#ffffff;} .d39_3 .img .t ul li .i {position:relative; width:50%; margin:0 auto 1.25rem;} .d39_3 .img .t ul li .i .num {display:flex;} .d39_3 .img .t ul li .i .num i {width:25%; font-style:normal; font-size:0.75rem; color:#ffffff; text-indent:0; position:static; text-align:left;} .d39_3 .img .t ul li p {} .d39_3 .img .t span {display:block; width:6.25rem; height:0.75rem; position:absolute; left:50%; top:50%; margin-left:-3.125rem; margin-top:-2.5rem; background:url("../images/p39/003_2.png") no-repeat scroll center center / 100% auto;} .d39_3 .img .b {} .d39_3 .img .b ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -1.25rem;} .d39_3 .img .b ul li {width:50%; padding:0 1.25rem;} /**/ .d39_4 {padding:9.375rem 0 0;} .d39_4 .img {width:50%; margin:0 auto 2.5rem;} .d39_4 .t {} .d39_4 .t .text {text-align:center; } .d39_4 .t .text h2 {font-size:2.75rem;} .d39_4 .t .text p {font-size:2rem; color:#009ca5;} .d39_4 .t .text ul {display:flex; flex-wrap:wrap; margin:2.5rem -0.625rem -0.625rem;} .d39_4 .t .text ul li {width:33.333333%; padding:0.625rem; text-align:center; } .d39_4 .t .text ul li .inner {padding:1.875rem 1.25rem; height:100%; border:2px solid rgba(0,0,0,0.05);} .d39_4 .t .text ul li img {display:block; margin:0 auto; width:40%;} .d39_4 .t .text ul li p {font-size:1.125rem; color:#000000; line-height:1.4; opacity:0.8;} .d39_4 .spe {margin:5rem auto 0.625rem; overflow:hidden;} .d39_4 .spe ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -0.3125rem; overflow:hidden;} .d39_4 .spe ul li {width:33.333333%; padding:0 0.3125rem;} .d39_4 .spe ul li .inner {background:#eeeeee;} .d39_4 .spe ul li .inner .w_inner {padding:5rem 2.5rem 0 5rem; width:100%; margin:auto;} .d39_4 .spe ul li .inner .fit_img {} .d39_4 .spe ul li h4 {margin-bottom:1.25rem; font-size:1.375rem;} .d39_4 .spe ul li dl {height:12.5rem; overflow:hidden;} .d39_4 .spe ul li dl dt {font-size:0.875rem; padding:0.25rem 0 0.25rem 0.625rem; position:relative;} .d39_4 .spe ul li dl dt:before {content:""; width:0.1875rem; height:0.1875rem; border-radius:100%; background:rgba(0,0,0,0.5); position:absolute; left:0; top:50%; margin-top:-1.5px;} /**/ .d39_5 {padding:9.375rem 0; background:#000000;} .d39_5 .text {text-align:center; color:#ffffff;} .d39_5 .text h2 {font-size:2.75rem; margin-bottom:2.5rem;} .d39_5 .text p {font-size:1.375rem; color:#8d8d8d; padding:0 10%;} .d39_5 .img {margin:auto; padding:0 2%; color:#ffffff;} .d39_5 .img ul {display:flex; justify-content:center;} .d39_5 .img ul li {width:50%;} .d39_5 .img ul li .inner {display:flex; align-items:center; flex-direction:column-reverse; overflow:hidden;} .d39_5 .img ul li .fl {text-align:center;} .d39_5 .img ul li .fr {} .d39_5 .img ul li p {opacity:0.6;} .d39_5 .img ul li h4 {font-size:2rem; margin-bottom:1.25rem; color:#05d6e1;} .d39_5 .img ul li dl {} .d39_5 .img ul li dl dt {font-size:0.875rem; padding:0.25rem 0 0.25rem 0.625rem; position:relative; opacity:0.8;} /**/ .d39_6 {padding:9.375rem 0; background:url("../images/p39/006_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d39_6 .main {} .d39_6 .text {text-align:center;} .d39_6 .text h2 {margin-bottom:0.625rem; font-size:2.75rem;} .d39_6 .text h2 span {display:inline-block; padding:0 0.625rem;} .d39_6 .text p {width:50%; margin:auto; font-size:1.375rem; color:rgba(0, 0, 0, 0.5); line-height:1.4;} .d39_6 .img {margin:5rem 0 0;} .d39_6 .img ul {display:flex; flex-wrap:wrap; align-items:flex-end;} .d39_6 .img ul li {width:33.333333%;} .d39_6 .img ul li .cell {} .d39_6 .img ul li img {display:block; margin:auto; width:70%;} .d39_6 .img ul li .name {margin:1.25rem 0 0;} .d39_6 .img ul li .name h4 {font-size:1.125rem; color:rgba(0, 0, 0, 0.5); text-align:center;} /****************************************/ /* products detail: SV-M4K30 */ /****************************************/ /**/ .sel_products_detail_40 {} /**/ .d40_1 {padding:3.375rem 0;} .d40_1 .main {display:flex; justify-content:space-between; flex-direction:row-reverse; align-items:center;} .d40_1 .text {width:45%; padding-left:3.75rem;} .d40_1 .text h1 {font-size:4rem; margin-bottom:3.75rem;} .d40_1 .text h2 {font-size:2.75rem; color:#009ca5;} .d40_1 .text p {font-size:1.375rem;} .d40_1 .img {width:55%;} /**/ .d40_2 {padding:9.375rem 0; background:rgba(0, 0, 0, 0.05);} .d40_2 .main {} .d40_2 .text {text-align:center;} .d40_2 .text h2 {font-size:2.75rem;} .d40_2 .text p {display:flex; justify-content:center; flex-wrap:wrap; margin:2.5rem 0 0; font-size:1.375rem;} .d40_2 .text p span {display:inline-block; margin:0 0.625rem; padding:0.625rem 1.25rem; font-size:1.125rem; color:#FFFFFF; border-radius:0.625rem; background:linear-gradient(to right, rgba(92,68,151,1), rgba(33,93,170,1));} .d40_2 .spec_col_1 {margin:3.75rem 0;} .d40_2 .spec_col_1 h3 {font-size:2rem; color:rgba(0, 0, 0, 0.8); text-align:center;} .d40_2 .spec_col_1 .sc1_t {margin:2.5rem auto 0; width:60%; text-align:center;} .d40_2 .spec_col_1 .sc1_t img {} .d40_2 .spec_col_1 .sc1_t p {margin-top:1.25rem; font-size:1.375rem;} .d40_2 .spec_col_1 .sc1_b {display:flex; justify-content:center; align-items:center; flex-wrap:wrap;} .d40_2 .spec_col_1 .sc1_b img {width:35%;} .d40_2 .spec_col_1 .sc1_b p {width:35%; padding-left:3.75rem; font-size:1.125rem;} .d40_2 .spec_col_1 .sc1_b p strong {display:inline-block; margin-bottom:0.625rem; font-size:1.375rem;} .d40_2 .spec_col_1 .sc1_b p em {font-style:normal; font-weight:bold;} .d40_2 .spec_col_1 .sc1_b p span {} .d40_2 .spec_col_1 .sc1_b p span:nth-child(1) {} .d40_2 .spec_col_1 .sc1_b p span:nth-child(2) {display:block; margin-top:0.625rem;} .d40_2 .spec_col_1 .sc1_b p span:nth-child(2) em {display:block; font-weight:normal;} .d40_2 .spec_col_2 {text-align:center;} .d40_2 .spec_col_2 h3 {font-size:2rem; color:rgba(0, 0, 0, 0.8);} .d40_2 .spec_col_2 ul {margin:2.5rem 5.2rem 0;} .d40_2 .spec_col_2 ul li {margin-bottom:3.75rem} .d40_2 .spec_col_2 ul li:last-child {margin:0;} .d40_2 .spec_col_2 ul li .cell {} .d40_2 .spec_col_2 ul li .lr {display:flex; justify-content:space-between; align-items:flex-start; position:relative;} .d40_2 .spec_col_2 ul li .lr img {width:calc(50% - 2.5rem);} .d40_2 .spec_col_2 ul li .lr i {display:block; width:0; height:0; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d40_2 .spec_col_2 ul li .lr i::before, .d40_2 .spec_col_2 ul li .lr i::after {content:""; position:absolute; left:50%; top:50%; opacity:0.3; width:1rem; height:1rem; border-color:rgba(0, 0, 0, 1); border-width:2px 2px 0 0; border-style:solid; transform:translateX(-50%) translateY(-50%) rotate(45deg);} .d40_2 .spec_col_2 ul li .lr i::after {left:-0.625rem; opacity:0.2} .d40_2 .spec_col_2 ul li p {margin-top:1.875rem; font-size:1.125rem;} /**/ .d40_3 {padding:9.375rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 1.0);} .d40_3 .main {} .d40_3 .text {text-align:center;} .d40_3 .text h2 {margin:0 0 1.25rem 0; font-size:2.75rem;} .d40_3 .text p {font-size:1.375rem; opacity:0.5;} .d40_3 .text p span {display:block;} .d40_3 .img {margin:2.5rem 0 0;} .d40_3 .img .t {width:60%; margin:auto;} .d40_3 .img .m {margin:2.5rem auto; width:70%;} .d40_3 .img .b {display:flex; padding: 0 0 0 5.5rem; align-items:center;} .d40_3 .img .b img {width:50%;} .d40_3 .img .b .name {width:50%; padding-left:5rem;} .d40_3 .img .b .name h3 {margin-bottom:1.25rem; font-size:2rem;} .d40_3 .img .b .name h3 span {display:block;} .d40_3 .img .b .name p {font-size:1.375rem; color:rgba(255, 255, 255, 0.5);} .d40_3 .img .b .name p span {display:block;} /**/ .d40_4 {padding:9.375rem 0; background:url("../images/p40/004_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d40_4 .main {} .d40_4 .text {text-align:center;} .d40_4 .text h2 {margin-bottom:0.625rem; font-size:2.75rem;} .d40_4 .text h2 span {display:inline-block; padding:0 0.625rem;} .d40_4 .text p {width:50%; margin:auto; font-size:1.375rem; color:rgba(0, 0, 0, 0.5); line-height:1.4;} .d40_4 .img {margin:5rem 0 0;} .d40_4 .img ul {display:flex; flex-wrap:wrap; align-items:flex-end;} .d40_4 .img ul li {width:33.333333%;} .d40_4 .img ul li .cell {} .d40_4 .img ul li img {display:block; margin:auto; width:70%;} .d40_4 .img ul li .name {margin:1.25rem 0 0;} .d40_4 .img ul li .name h4 {font-size:1.125rem; color:rgba(0, 0, 0, 0.5); text-align:center;} /****************************************/ /* products detail: SV-M4K40 */ /****************************************/ /**/ .sel_products_detail_41 {} .sel_products_detail_41 .shead {margin-bottom:3.75rem; text-align:center;} .sel_products_detail_41 .shead h2 {font-size:2.75rem;} .sel_products_detail_41 .shead p {font-size:1.375rem; max-width:60rem; margin:1.25rem auto 0;} /**/ .d41_1 {} .d41_1 .main {padding:9.375rem 0; position:relative; display:flex; justify-content:space-between; flex-direction:row-reverse; align-items:center;} .d41_1 .text {width:45%; padding-left:3.75rem;} .d41_1 .text h1 {font-size:3.5rem; margin-bottom:3.75rem;} .d41_1 .text h2 {font-size:2.75rem; color:#009FAB;} .d41_1 .text p {margin-top:1.25rem; font-size:1.375rem; line-height:1.4;} .d41_1 .img {width:55%;} /**/ .d41_2 {padding:9.375rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 1);} .d41_2 .main {} .d41_2 .col_move_img {text-align:center; padding:1.25rem 6.25rem 0;} .d41_2 .col_move_img ul {display:flex; flex-wrap:wrap;} .d41_2 .col_move_img ul li {width:22.55%; padding-right:3.5%; opacity:0;} .d41_2 .col_move_img ul li:last-child .t {position:relative;} .d41_2 .col_move_img ul li:last-child .t img:nth-child(2), .d41_2 .col_move_img ul li:last-child .t img:nth-child(3), .d41_2 .col_move_img ul li:last-child .t img:nth-child(4) {position:absolute;} .d41_2 .col_move_img ul li:last-child .t img:nth-child(2) {left:35%;} .d41_2 .col_move_img ul li:last-child .t img:nth-child(3) {left:70%;} .d41_2 .col_move_img ul li:last-child .t img:nth-child(4) {left:1.25rem; bottom:-2.5rem; width:calc(100% - 1.25rem); max-width:17.5rem;} .d41_2 .col_move_img ul li .cell {} .d41_2 .col_move_img ul li .t {display:flex; justify-content:space-between; align-items:flex-start; position:relative;} .d41_2 .col_move_img ul li .t::after {content:""; position:absolute; right:-13.5%; top:50%; transform:translateY(-50%); width:1.25rem; height:6.25rem; background-image:url('../images/p41/002_arrow.html'); background-position:center center; background-repeat:no-repeat; background-size:100% auto;} .d41_2 .col_move_img ul li:last-child .t::after {display:none;} .d41_2 .col_move_img ul li .t img {display:block; width:100%;} .d41_2 .col_move_img ul li .b {padding:6.25rem 0.625rem 0 1.25rem; text-align:left; position:relative;} .d41_2 .col_move_img ul li .b::before {content:""; position:absolute; left:0; top:0; width:1px; height:6.875rem; background-color:#94CFBF;} .d41_2 .col_move_img ul li .b::after {content:""; position:absolute; left:0; top:6.875rem; transform:translateX(-0.25rem); width:0.5625rem; height:0.5625rem; border-radius:100%; background-color:#94CFBF;} .d41_2 .col_move_img ul li:first-child .b::before, .d41_2 .col_move_img ul li:first-child .b::after {display:none;} .d41_2 .col_move_img ul li .b h3 {font-size:1.375rem; margin-bottom:0.625rem; color:#009FAB;} .d41_2 .col_move_img ul li .b p {font-size:0.875rem; opacity:0.8;} .d41_2 .col_move_img.move ul li {animation:cmi_move_h 1s 1 0.3s forwards;} @keyframes cmi_move_h { %0 {} 100% {opacity:1; transform:translateX(10px);} } .d41_2 .col_move_img.move ul li:nth-child(2) {animation-delay:0.3s;} .d41_2 .col_move_img.move ul li:nth-child(3) {animation-delay:0.4s;} .d41_2 .col_move_img.move ul li:nth-child(4) {animation-delay:0.5s;} /**/ .d41_3 {padding:9.375rem 0;} .d41_3 .main {} .d41_3 .img {display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row-reverse; padding-top:1.25rem;} .d41_3 .img img {display:block; width:55%;} .d41_3 .img .l {width:45%; padding-right:3.75rem;} .d41_3 .img .l ul {display:flex; flex-direction:column; justify-content:space-between; height:100%;} .d41_3 .img .l ul li {} .d41_3 .img .l ul li .cell {} .d41_3 .img .l ul li h3 {font-size:1.75rem; color:#009FAB; margin-bottom:0.625rem;} .d41_3 .img .l ul li p {font-size:1.125rem; opacity:0.8;} .d41_3 .img .l ul li p span {display:block;} /**/ .d41_4 {padding:9.375rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 1.0);} .d41_4 .main {} .d41_4 .spec_col {padding-top:1.25rem;} .d41_4 .spec_col ul {} .d41_4 .spec_col ul li {margin-bottom:6.25rem} .d41_4 .spec_col ul li:last-child {margin:0;} .d41_4 .spec_col ul li .cell {} .d41_4 .spec_col ul li .lr {display:flex; justify-content:space-between; align-items:flex-start; position:relative;} .d41_4 .spec_col ul li .lr img {width:calc(50% - 3.75rem); border:1px solid rgba(255, 255, 255, 0.5);} .d41_4 .spec_col ul li .lr i {display:flex; justify-content:center; align-items:center; text-align:center; padding:0 0.3125rem; width:7.5rem; height:7.5rem; color:rgba(255, 255, 255, 1.0); font-style:normal; font-size:0.875rem; text-indent:0; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background-image:url('../images/p41/004_arrow.png'); background-position:center center; background-repeat:no-repeat; background-size:contain;} .d41_4 .spec_col ul li p {margin-top:1.875rem; font-size:1.125rem;} /**/ .d41_5 {padding:9.375rem 0;} .d41_5 .img {display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row-reverse; padding-top:1.25rem;} .d41_5 .img img {display:block; width:50%;} .d41_5 .img .l {width:50%; padding:2.5rem 2.5rem 2.5rem 0;} .d41_5 .img .l ul {display:flex; flex-direction:column; justify-content:space-between; height:100%;} .d41_5 .img .l ul li {} .d41_5 .img .l ul li .cell {display:flex; align-items:center; justify-content:space-between;} .d41_5 .img .l ul li span {display:block; margin-right:1.25rem; width:4rem; height:4rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d41_5 .img .l ul li:nth-child(1) span {background-image:url('../images/p41/005_icon_1.svg');} .d41_5 .img .l ul li:nth-child(2) span {background-image:url('../images/p41/005_icon_2.svg');} .d41_5 .img .l ul li:nth-child(3) span {background-image:url('../images/p41/005_icon_3.svg');} .d41_5 .img .l ul li .name {width:calc(100% - 4rem);} .d41_5 .img .l ul li h3 {font-size:1.75rem; color:#009FAB; margin-bottom:0.625rem;} .d41_5 .img .l ul li p {font-size:1.125rem; opacity:0.8;} /**/ .d41_6 {padding:0 0 9.375rem; overflow:hidden;} .d41_6 .main {} .d41_6 ul {display:flex; margin:0 -1.25rem; padding-top:1.25rem;} .d41_6 ul li {width:33.333333%; padding:0 1.25rem; text-align:center;} .d41_6 ul li .cell {} .d41_6 ul li img {display:block; width:100%;} .d41_6 ul li .name {margin-top:2.5rem;} .d41_6 ul li .name h3 {font-size:1.375rem; color:#009FAB;} .d41_6 ul li .name p {font-size:1.125rem; margin-top:0.625rem; opacity:0.8;} /**/ .d41_7 {padding:9.375rem 0; background-color:rgba(0, 0, 0, 0.05); background-image:url('../images/p41/007_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d41_7 .shead h2 {display:flex; justify-content:center; flex-wrap:wrap;} .d41_7 .img {padding-top:1.25rem;} .d41_7 ul {display:flex; justify-content:space-between;} .d41_7 ul li {width:33.333333%; text-align:center;} .d41_7 ul li:nth-child(2) {margin-top:6.25rem;} .d41_7 ul li .cell {} .d41_7 ul li img {display:block; width:70%; margin:auto;} .d41_7 ul li .name {margin-top:2.5rem;} .d41_7 ul li .name h4 {font-size:1.375rem;} .d41_7 ul li .name p {font-size:0.875rem; margin-top:0.625rem; line-height:1.6;} /****************************************/ /* products detail: DT */ /****************************************/ /**/ .sel_products_detail_42 {} /**/ .d42_1 {padding:34.375rem 0 9.375rem; background:url("../images/p42/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d42_1 .text {text-align:center;} .d42_1 .text h1 {font-size:4.5rem;} /* 公共部分 */ .con {} .con .text {} .con .text h2 {font-size:2.75rem; text-align:center;} .con .text ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:3.75rem; overflow:hidden;} .con .text ul li {margin-bottom:2.5rem; width:calc(50% - 2.5rem);} .con .text ul li:last-child {margin-bottom:0;} .con .text ul li .cell {} .con .text ul li img {display:block; border-radius:1.25rem; border:1px solid rgba(0, 0, 0, 0.1);} .con .text ul li .name {margin-top:2.5rem;} .con .text ul li h3 {font-size:1.375rem; color:#009FAB; margin-bottom:0.625rem;} .con .text ul li p {font-size:1.125rem;} /**/ .d42_2 {padding:6.25rem 0; background:#f2f2f2;} /**/ .d42_3 {padding:6.25rem 0;} /**/ .d42_4 {padding:6.25rem 0; background:#f2f2f2;} /**/ .d42_5 {padding:6.25rem 0;} /**/ .d42_6 {padding:6.25rem 0; background:#f2f2f2;} /**/ .d42_7 {padding:6.25rem 0;} /****************************************/ /* products detail: X-2600 */ /****************************************/ /**/ .sel_products_detail_43 {} .sel_products_detail_43 .shead {max-width:53.75rem; margin:auto; text-align:center;} .sel_products_detail_43 .shead h2 {margin-bottom:1.25rem; font-size:2.75rem; color:#009ca5;} .sel_products_detail_43 .shead p {font-size:1.375rem; opacity:0.5;} /**/ .d43_1 {margin-top:6.25rem; padding:12.5rem 0 9.375rem; background:linear-gradient(to right, #EEEEEF 50%, #C8C9CA 100%);} .d43_1 .main {display:flex; justify-content:space-between;} .d43_1 .text {width:40%;} .d43_1 .text h1 {display:flex; flex-direction:column; align-items:flex-start; margin-bottom:6.25rem; font-size:3.5rem;} .d43_1 .text h1 span {} .d43_1 .text h1 span:nth-child(1) {position:relative;} .d43_1 .text h1 span:nth-child(1) i {display:block; width:0; height:0; position:absolute;} .d43_1 .text h1 span:nth-child(1) i:nth-child(1) {left:-1.25rem; top:0;} .d43_1 .text h1 span:nth-child(1) i:nth-child(1)::before {content:""; position:absolute; left:0; top:0; width:0.3125rem; height:1.875rem; background:#000000;} .d43_1 .text h1 span:nth-child(1) i:nth-child(1)::after {content:""; position:absolute; left:0; top:0; width:1.25rem; height:0.3125rem; background:#000000;} .d43_1 .text h1 span:nth-child(1) i:nth-child(2) {right:-1.25rem; bottom:0; top:auto;} .d43_1 .text h1 span:nth-child(1) i:nth-child(2)::before {content:""; position:absolute; right:0; bottom:0; width:0.3125rem; height:1.875rem; background:#000000;} .d43_1 .text h1 span:nth-child(1) i:nth-child(2)::after {content:""; position:absolute; right:0; bottom:0; width:1.25rem; height:0.3125rem; background:#000000;} .d43_1 .text h2 {font-size:2.75rem; color:#009ca5;} .d43_1 .text p {font-size:1.375rem; opacity:0.5;} .d43_1 .text ul {margin-top:1.25rem; display:flex;} .d43_1 .text ul li {width:6.25rem; margin-right:0.625rem;} .d43_1 .text ul li:last-child {margin:0;} .d43_1 .text ul li .cell {} .d43_1 .text ul li img {display:block; width:100%;} .d43_1 .img {width:55%;} .d43_1 .img img {display:block; width:100%;} /**/ .d43_2 {padding:9.375rem 0;} .d43_2 .main {} .d43_2 .text {} .d43_2 .text h2 {} .d43_2 .text p {} .d43_2 .img {display:flex; justify-content:space-between; align-items:center; margin-top:6.25rem;} .d43_2 .img img {display:block;} .d43_2 .img img:nth-child(1) {width:calc(60% - 2.5rem);} .d43_2 .img img:nth-child(2) {width:calc(40% - 2.5rem);} /**/ .d43_3 {padding:9.375rem 0; background:linear-gradient(to right, #EEEEEF 50%, #C8C9CA 100%);} .d43_3 .main {} .d43_3 .text {} .d43_3 .text h2 {} .d43_3 .text p {} .d43_3 .text ul {margin-top:3.75rem;} .d43_3 .text ul li {margin-bottom:2.5rem;} .d43_3 .text ul li:last-child {margin:0;} .d43_3 .text ul li .cell {} .d43_3 .text ul li .t {display:flex; align-items:center; max-width:31.25rem; margin:auto;} .d43_3 .text ul li .t img {display:block; width:6.25rem; flex-shrink:0;} .d43_3 .text ul li .t .t_r {margin-left:1.25rem;} .d43_3 .text ul li .t .t_r h3 {font-size:1.75rem; line-height:1; margin-bottom:0.625rem;} .d43_3 .text ul li .t .t_r p {opacity:0.5; line-height:1;} .d43_3 .text ul li .b {max-width:53.75rem; margin:1.875rem auto 0; font-size:1.125rem; line-height:1.6; opacity:0.65; text-align:center;} .d43_3 .img {margin-top:6.25rem;} .d43_3 .img ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 -1.25rem;} .d43_3 .img ul li {width:33.33%; padding:0 1.25rem; text-align:center;} .d43_3 .img ul li .cell {} .d43_3 .img ul li img {display:block; width:100%;} .d43_3 .img ul li p {font-size:1.125rem; margin-top:1.25rem;} /**/ .d43_4 {padding:9.375rem 0;} .d43_4 .main {display:flex; flex-wrap:wrap; justify-content:center; flex-direction:row-reverse; align-items:center;} .d43_4 .text {width:50%; padding-left:6.25rem;} .d43_4 .text .shead {max-width:none; text-align:left;} .d43_4 .text h2 {} .d43_4 .text p {} .d43_4 .text ul {margin-top:3.75rem;} .d43_4 .text ul li {margin-bottom:3.75rem;} .d43_4 .text ul li:last-child {margin:0;} .d43_4 .text ul li .cell {display:flex; align-items:center;} .d43_4 .text ul li img {display:block; width:5rem; height:5rem; flex-shrink:0; border-radius:100%; border:1px solid #009ca5;} .d43_4 .text ul li .r {margin-left:1.25rem;} .d43_4 .text ul li .r h3 {font-size:1.375rem; margin-bottom:0.625rem;} .d43_4 .text ul li .r p {font-size:1.125rem; opacity:0.65;} .d43_4 .img {width:25%; margin-left:6.25rem;} .d43_4 .img img {} /**/ .d43_5 {padding:9.375rem 0; background:linear-gradient(to right, #EEEEEF 50%, #C8C9CA 100%);} .d43_5 .main {} .d43_5 .text {} .d43_5 .text h2 {} .d43_5 .text p {} .d43_5 .text h2:nth-child(3) {margin-top:3.75rem;} .d43_5 .text ul {display:flex; justify-content:center; margin:2.5rem -2.5rem 0;} .d43_5 .text ul li {padding:0 2.5rem;} .d43_5 .text ul li .cell {display:flex; align-items:center;} .d43_5 .text ul li img {display:block; width:5rem; height:5rem; border-radius:100%; border:1px solid #009ca5;} .d43_5 .text ul li .r {margin-left:1.25rem;} .d43_5 .text ul li .r p {display:flex; flex-direction:column;} .d43_5 .img {margin-top:6.25rem; position:relative;} .d43_5 .img img {display:block; width:100%;} .d43_5 .img p {} .d43_5 .img p span {position:absolute; font-size:0.875rem;} .d43_5 .img p span:nth-child(1) {bottom:calc(39% - 1.25rem); left:0;} .d43_5 .img p span:nth-child(2) {bottom:calc(2.95% - 1.25rem); left:20.65%;} /****************************************/ /* products detail: MARVO S80 ELITE */ /****************************************/ /**/ .sel_products_detail_44 {} /**/ .d44_1 {margin-top:6.25rem; padding:9.375rem 0 0; background:#000000 url("../images/p44/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d44_1 .main {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .d44_1 .text {width:60%;} .d44_1 .text h1 {font-size:4.5rem; color:#ffffff; margin-bottom:2.5rem} .d44_1 .text p {font-size:2.25rem; color:#ffffff; line-height:1.2;} .d44_1 .img {width:40%; text-align:center;} .d44_1 .img img { display:block; width:100%;} /**/ .d44_2 {padding:15.625rem 0; background:#000000 url("../images/p44/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d44_2 p {font-size:1.375rem; color:#ffffff; width:70%; margin:auto;} /**/ .d44_3 {padding:9.375rem 0 31.25rem; text-align:center; background:#f2f2f2 url("../images/p44/003_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d44_3 .text {text-align:center; color:#FFFFFF;} .d44_3 .text h2 {font-size:2.75rem; width:50%; margin:auto;} .d44_3 .text p {margin:2.5rem auto 0; width:70%; font-size:1.5rem;} /**/ .d44_4 {padding:9.375rem 0; background:#333333;} .d44_4 ul {display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 -2.5rem;} .d44_4 ul li {width:50%; padding:0 2.5rem;} .d44_4 ul li .cell {display:flex; align-items:center;} .d44_4 ul li img {display:block; width:40%; margin:auto;} .d44_4 ul li .text {padding-left:2.5rem; width:60%; color:#FFFFFF; opacity:0.6;} .d44_4 ul li .text h3 {font-size:1.125rem;} .d44_4 ul li .text p {margin-bottom:1.25rem;} /**/ .d44_5 {padding:9.375rem 0 6.25rem;} .d44_5 .text {position:relative;} .d44_5 p.intro {font-size:1.375rem; margin:0 auto 2.5rem; text-align:center; width:70%;} .d44_5 ul {position:absolute; left:0; top:18.75rem; display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; overflow:hidden;} .d44_5 ul li {width:50%; margin-bottom:6.25rem; padding:0 10%; text-align:center;} .d44_5 ul li img {display:block; margin:0 auto 1.25rem; width:4rem; height:auto;} .d44_5 ul li h4 {line-height:1;} .d44_5 ul li:nth-child(5) {width:100%; margin-top:9.375rem;} .d44_5 .bg_img {margin:auto; width:18.75rem; height:auto;} .d44_5 .intro {width:60%; margin:15.625rem auto 0; text-align:center;} .d44_5 .intro .t {margin-bottom:5rem;} .d44_5 .intro h2 {font-size:2.75rem; margin-bottom:1.875rem;} .d44_5 .intro p {font-size:1.375rem;} /**/ .d44_6 {padding:9.375rem 0; background:#000000;} .d44_6 .text {color:#ffffff;} .d44_6 p.intro {font-size:1.375rem; margin:0 auto 5rem; padding:0 2.5rem; width:80%;} .d44_6 ul {width:80%; margin:auto; display:flex; justify-content:space-between; flex-wrap:wrap;} .d44_6 ul li {width:50%; margin-bottom:2.5rem; padding:0 2.5rem;} .d44_6 ul li:nth-last-child(2), .d44_6 ul li:last-child {margin:0;} .d44_6 ul li img {display:block; padding:1.25rem; border:1px solid rgba(255,255,255,0.2);} .d44_6 ul li h4 {font-size:1.375rem; margin:1.25rem 0 0.625rem;} /**/ .d44_7 {padding:9.375rem 0 6.25rem; background:#333333;} .d44_7 ul {width:60%; margin:auto; overflow:hidden;} .d44_7 ul li {color:#ffffff; text-align:center; margin-bottom:5rem;} .d44_7 ul li h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d44_7 ul li p {font-size:1.375rem;} /**/ .d44_sc {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d44_sc h2 {font-size:2.75rem; color:#ffffff; text-align:center;} .d44_sc .swiper-container {padding:4rem 0;} .d44_sc .swiper-container .swiper-slide .text {text-align:center; color:#FFFFFF;} /****************************************/ /* products detail: X-2600-MIS */ /****************************************/ /**/ .sel_products_detail_45 {} .sel_products_detail_45 .shead {max-width:53.75rem; margin:auto; text-align:center;} .sel_products_detail_45 .shead h2 {margin-bottom:1.25rem; font-size:2.75rem; color:#009ca5;} .sel_products_detail_45 .shead p {font-size:1.375rem; opacity:0.5;} /**/ .d45_1 {margin-top:6.25rem; padding:12.5rem 0 9.375rem; background:linear-gradient(to right, #EEEEEF 50%, #C8C9CA 100%);} .d45_1 .main {display:flex; justify-content:space-between;} .d45_1 .text {width:40%;} .d45_1 .text h1 {display:flex; flex-direction:column; align-items:flex-start; margin-bottom:6.25rem; font-size:3.5rem;} .d45_1 .text h1 span {} .d45_1 .text h1 span:nth-child(1) {position:relative;} .d45_1 .text h1 span:nth-child(1) i {display:block; width:0; height:0; position:absolute;} .d45_1 .text h1 span:nth-child(1) i:nth-child(1) {left:-1.25rem; top:0;} .d45_1 .text h1 span:nth-child(1) i:nth-child(1)::before {content:""; position:absolute; left:0; top:0; width:0.3125rem; height:1.875rem; background:#000000;} .d45_1 .text h1 span:nth-child(1) i:nth-child(1)::after {content:""; position:absolute; left:0; top:0; width:1.25rem; height:0.3125rem; background:#000000;} .d45_1 .text h1 span:nth-child(1) i:nth-child(2) {right:-1.25rem; bottom:0; top:auto;} .d45_1 .text h1 span:nth-child(1) i:nth-child(2)::before {content:""; position:absolute; right:0; bottom:0; width:0.3125rem; height:1.875rem; background:#000000;} .d45_1 .text h1 span:nth-child(1) i:nth-child(2)::after {content:""; position:absolute; right:0; bottom:0; width:1.25rem; height:0.3125rem; background:#000000;} .d45_1 .text h2 {font-size:2.75rem; color:#009ca5;} .d45_1 .text p {font-size:1.375rem; opacity:0.5;} .d45_1 .text ul {margin-top:1.25rem; display:flex;} .d45_1 .text ul li {width:6.25rem; margin-right:0.625rem;} .d45_1 .text ul li:last-child {margin:0;} .d45_1 .text ul li .cell {} .d45_1 .text ul li img {display:block; width:100%;} .d45_1 .img {width:55%;} .d45_1 .img img {display:block; width:100%;} /**/ .d45_2 {padding:9.375rem 0;} .d45_2 .main {} .d45_2 .text {} .d45_2 .text h2 {} .d45_2 .text p {} .d45_2 .img {display:flex; justify-content:space-between; align-items:center; margin-top:6.25rem;} .d45_2 .img img {display:block;} .d45_2 .img img:nth-child(1) {width:calc(60% - 2.5rem);} .d45_2 .img img:nth-child(2) {width:calc(40% - 2.5rem);} /**/ .d45_3 {padding:9.375rem 0; background:linear-gradient(to right, #EEEEEF 50%, #C8C9CA 100%);} .d45_3 .main {} .d45_3 .text {} .d45_3 .text h2 {} .d45_3 .text p {} .d45_3 .text ul {margin-top:3.75rem;} .d45_3 .text ul li {margin-bottom:2.5rem;} .d45_3 .text ul li:last-child {margin:0;} .d45_3 .text ul li .cell {} .d45_3 .text ul li .t {display:flex; align-items:center; max-width:31.25rem; margin:auto;} .d45_3 .text ul li .t img {display:block; width:6.25rem; flex-shrink:0;} .d45_3 .text ul li .t .t_r {margin-left:1.25rem;} .d45_3 .text ul li .t .t_r h3 {font-size:1.75rem; line-height:1; margin-bottom:0.625rem;} .d45_3 .text ul li .t .t_r p {opacity:0.5; line-height:1;} .d45_3 .text ul li .b {max-width:53.75rem; margin:1.875rem auto 0; font-size:1.125rem; opacity:0.65; text-align:center;} .d45_3 .img {margin-top:6.25rem;} .d45_3 .img ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 -1.25rem;} .d45_3 .img ul li {width:25%; padding:0 1.25rem; text-align:center;} .d45_3 .img ul li .cell {} .d45_3 .img ul li img {display:block; width:100%;} .d45_3 .img ul li p {font-size:1.125rem; margin-top:1.25rem;} /**/ .d45_4 {padding:9.375rem 0;} .d45_4 .main {display:flex; flex-wrap:wrap; justify-content:center; flex-direction:row-reverse; align-items:center;} .d45_4 .text {width:50%; padding-left:6.25rem;} .d45_4 .text .shead {max-width:none; text-align:left;} .d45_4 .text h2 {} .d45_4 .text p {} .d45_4 .text ul {margin-top:3.75rem;} .d45_4 .text ul li {margin-bottom:3.75rem;} .d45_4 .text ul li:last-child {margin:0;} .d45_4 .text ul li .cell {display:flex; align-items:center;} .d45_4 .text ul li img {display:block; width:5rem; height:5rem; flex-shrink:0; border-radius:100%; border:1px solid #009ca5;} .d45_4 .text ul li .r {margin-left:1.25rem;} .d45_4 .text ul li .r h3 {font-size:1.375rem; margin-bottom:0.625rem;} .d45_4 .text ul li .r p {font-size:1.125rem; opacity:0.65;} .d45_4 .img {width:25%; margin-left:6.25rem;} .d45_4 .img img {} /**/ .d45_5 {padding:9.375rem 0; background:linear-gradient(to right, #EEEEEF 50%, #C8C9CA 100%);} .d45_5 .main {} .d45_5 .text {} .d45_5 .text h2 {} .d45_5 .text p {} .d45_5 .text h2:nth-child(3) {margin-top:3.75rem;} .d45_5 .text ul {display:flex; justify-content:center; margin:2.5rem -2.5rem 0;} .d45_5 .text ul li {padding:0 2.5rem;} .d45_5 .text ul li .cell {display:flex; align-items:center;} .d45_5 .text ul li img {display:block; width:5rem; height:5rem; border-radius:100%; border:1px solid #009ca5;} .d45_5 .text ul li .r {margin-left:1.25rem;} .d45_5 .text ul li .r p {display:flex; flex-direction:column;} .d45_5 .img {margin-top:6.25rem; position:relative;} .d45_5 .img img {display:block; width:100%;} .d45_5 .img p {} .d45_5 .img p span {position:absolute; font-size:0.875rem;} .d45_5 .img p span:nth-child(1) {bottom:calc(37% - 1.25rem); left:0;} .d45_5 .img p span:nth-child(2) {bottom:calc(-2.05% - 1.25rem); left:20.05%;} /****************************************/ /* products: P80 Elite */ /****************************************/ /**/ .sel_products_detail_46 {} .sel_products_detail_46 img {display:block; width:100%;} .sel_products_detail_46 .anchor {top:-4.375rem;} /**/ .d46_1 {position:relative; color:#FFFFFF; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d46_1 .wrap {background:#000000 url("../images/p46/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d46_1 .main {height:calc(100vh - 6.25rem); padding:9.375rem 0; position:relative; z-index:1;} .d46_1 .shead {position:relative; z-index:1;} .d46_1 .shead .model {display:block; width:6rem; height:2.5rem; margin-bottom:1.25rem; padding:0 1rem 0.125rem 1rem; background:linear-gradient(180deg, rgba(121, 83, 58, 1), rgba(54, 34, 24, 1)); border-radius:0.3125rem;} .d46_1 .shead .model i {display:block; position:static; width:100%; height:100%; background:url("../images/p46/001_model.png") no-repeat scroll center center / 100% auto;} .d46_1 .shead h1 {font-size:4.5rem;} .d46_1 .shead h2 {font-size:2.5rem;} .d46_1 .shead p {margin-top:1.5rem; font-size:1.25rem; line-height:1.3; color:rgba(255, 255, 255, 0.8);} .d46_1 .cssnow {width:100%; height:100%; pointer-events:none; position:absolute; z-index:1; left:0; bottom:0;} .d46_1 .cssnow span {display:block; background:#AC6D4C; border-radius:100%; width:0.3125rem; height:0.3125rem; rotate:35deg; filter:blur(0px); position:absolute; top:150%; z-index:9999; animation-name:cssnowflakes-fall, cssnowflakes-shake; animation-duration:10s, 3s; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite, infinite; animation-play-state:running, running;} @keyframes cssnowflakes-fall { 0% { top:-10%; } 100% { top:100%; } } @keyframes cssnowflakes-shake { 0% { transform:translateX(0px); } 50% { transform:translateX(5rem); } 100% { transform:translateX(0px); } } .d46_1 .cssnow span:nth-child(1) {left:1%; animation-delay:0s, 0s;} .d46_1 .cssnow span:nth-child(1) {left:10%; animation-delay:1s, 1s; scale:1.5;} .d46_1 .cssnow span:nth-child(2) {left:20%; animation-delay:6s, 0.5s;} .d46_1 .cssnow span:nth-child(3) {left:30%; animation-delay:4s, 2s;} .d46_1 .cssnow span:nth-child(4) {left:40%; animation-delay:2s, 2s;} .d46_1 .cssnow span:nth-child(5) {left:50%; animation-delay:8s, 3s; scale:2;} .d46_1 .cssnow span:nth-child(6) {left:60%; animation-delay:6s, 2s; scale:1.25; filter:blur(1.25rem);} .d46_1 .cssnow span:nth-child(7) {left:70%; animation-delay:2.5s, 1s;} .d46_1 .cssnow span:nth-child(8) {left:80%; animation-delay:1s, 0s;} .d46_1 .cssnow span:nth-child(9) {left:90%; animation-delay:3s, 1.5s;} .d46_1 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} .d46_1 .intro {padding:6.25rem 0; position:relative; z-index:1; background:linear-gradient(180deg, rgba(5, 5, 5, 1) 80%, rgba(54, 33, 6, 1)); overflow:hidden;} .d46_1 .intro p {position:relative; z-index:2; width:80%; margin:auto; font-size:1.375rem; text-align:center;} .d46_1 .intro p sup {font-size:0.625rem;} /**/ .d46_2 {color:#FFFFFF; text-align:center; background:#000000 url("../images/p46/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d46_2 .wrap {position:relative;} .d46_2 .wrap::before {content:""; position:absolute; z-index:1; left:0; top:0; width:100%; height:50%; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .d46_2 .wrap::after {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));} .d46_2 .main {padding:9.375rem 0 4.5rem; display:flex; flex-direction:column; justify-content:space-between; height:100vh; position:relative; z-index:2;} .d46_2 .text {} .d46_2 .text h2 {font-size:2.75rem;} .d46_2 .text h2 sup {font-size:1rem;} .d46_2 .text p {font-size:1.375rem;} .d46_2 .img {} .d46_2 .img ul {display:flex; flex-wrap:wrap; justify-content:center;} .d46_2 .img ul li {width:50%; color:#CCCCCC;} .d46_2 .img ul li .l_icon {display:block; margin:auto; width:3rem; height:3rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d46_2 .img ul li h4 {margin:0.625rem auto 1.25rem; font-size:1.125rem;} .d46_2 .img ul li dl {display:flex; justify-content:space-between; padding-top:1.25rem; position:relative;} .d46_2 .img ul li dl::after {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:90%; height:1px; background:#969696} .d46_2 .img ul li dl dd {flex:1; margin:0 0.125rem;} .d46_2 .img ul li dl dd .d_icon {display:block; margin:auto; width:2.5rem; height:2.5rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d46_2 .img ul li dl dd p {font-size:1rem; line-height:1.2; margin-top:0.625rem;} .d46_2 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} /**/ .d46_3 {color:#FFFFFF; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)); overflow:hidden;} .d46_3 .slide_box {padding:9.375rem 0 0;} .d46_3 .topic {width:80%; margin:0 auto 4.5rem;} .d46_3 .topic h2 {font-size:2.75rem;} .d46_3 .topic p {font-size:1.375rem; margin-top:1.25rem;} .d46_3 .pin {display:flex; justify-content:center; align-items:center; flex-direction:column; flex-wrap:wrap;} .d46_3 .t_l_s {width:100%;} .d46_3 .t_l_s .text {width:60%; margin:auto;} .d46_3 .t_l_s .text h3 {font-size:2.25rem;} .d46_3 .t_l_s .text p {font-size:1.125rem; margin-top:1.25rem;} .d46_3 .t_l_s .list {margin:6.25rem auto 0; position:relative; width:60rem; height:15rem;} .d46_3 .t_l_s .list .box {visibility:hidden; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%;} .d46_3 .t_l_s .list .box.active {visibility:visible; opacity:1;} .d46_3 .t_l_s .list .box .swiper-container {padding:0; height:100%; overflow:visible;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide {display:flex; align-items:center;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide .img_box {padding-top:100%; position:relative; background:transparent; opacity:0; transform:scale(0.5);} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-prev-3 .img_box {opacity:0; transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-prev-2 .img_box {opacity:0.1; transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-prev .img_box {opacity:0.5; transform:translateX(-10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-active .img_box {opacity:1; transform:translateX(0%) translateY(-30%) scale(1); transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-next .img_box {opacity:0.5; transform:translateX(10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-next-2 .img_box {opacity:0.1; transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-slide-next-3 .img_box {opacity:0; transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-button-prev, .d46_3 .t_l_s .list .box .swiper-container .swiper-button-next {opacity:0.5; width:4.5rem; height:4.5rem; background-position:center center; background-repeat:no-repeat; background-size:50% auto; transition:all 0.3s;} .d46_3 .t_l_s .list .box .swiper-container .swiper-button-prev {left:-10%; background-image:url("../images/p46/003_swiper_button_prev.svg");} .d46_3 .t_l_s .list .box .swiper-container .swiper-button-next {right:-10%; background-image:url("../images/p46/003_swiper_button_next.svg");} .d46_3 .t_l_s .list .box .swiper-container .swiper-button-prev:hover, .d46_3 .t_l_s .list .box .swiper-container .swiper-button-next:hover {opacity:1; background-color:transparent;} .d46_3 .t_l_s .s_tab {display:flex; justify-content:space-between; max-width:60rem; margin:auto;} .d46_3 .t_l_s .s_tab span {flex:1; margin:0 0.3125rem; cursor:pointer; position:relative;} .d46_3 .t_l_s .s_tab span em {display:block; font-style:normal; font-size:0.875rem; color:rgba(255, 255, 255, 0.5); width:100%; height:100%; padding:1rem; border-top:2px solid rgba(255, 255, 255, 0.2); transition:all 0.3s;} .d46_3 .t_l_s .s_tab span b {width:0; height:2px; position:absolute; left:50%; top:0; transform:translateX(-50%); background:#C0845D; transition:all 0.3s;} .d46_3 .t_l_s .s_tab span:hover em {color:rgba(255, 255, 255, 0.8);} .d46_3 .t_l_s .s_tab span.active em {color:#C0845D;} .d46_3 .t_l_s .s_tab span.active b {width:100%;} .d46_3 .scale_box {padding:6.25rem 0 0;} .d46_3 .scale_box .title {width:60%; margin:0 auto 2.5rem;} .d46_3 .scale_box .title h3 {font-size:2.5rem;} .d46_3 .scale_box .title p {font-size:1.125rem; margin-top:1.25rem;} .d46_3 .scale_box ul {display:flex; flex-direction:column; overflow:hidden;} .d46_3 .scale_box ul li {opacity:0.5; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(89, 86, 86, 1)); overflow:hidden; transition:all 1s;} .d46_3 .scale_box ul li .cell {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; max-width:70rem; margin:auto;} .d46_3 .scale_box ul li .cover {width:60%; padding:0 4.5rem; transition:all 1s;} .d46_3 .scale_box ul li .cover span {display:block; width:100%; transform:translateY(4.5rem) scale(0.8); padding-top:75%; border-radius:1.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 1s;} .d46_3 .scale_box ul li .text {width:40%; padding:4.5rem 0; text-align:left;} .d46_3 .scale_box ul li .text h3 {font-size:1.875rem;} .d46_3 .scale_box ul li .text p {font-size:1.125rem; margin-top:1.25rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d46_3 .scale_box ul li.active {opacity:1; background:linear-gradient(180deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0.8));} .d46_3 .scale_box ul li.active .cover {padding:4.5rem;} .d46_3 .scale_box ul li.active .cover span {width:100%; margin:auto; transform:translateY(0) scale(1);} .d46_3 .scale_box ul li.active .text p {-webkit-line-clamp:10;} /**/ .d46_4 {padding:9.375rem 0; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.4)); overflow:hidden;} .d46_4 .main {height:calc(100vh - 4.375rem); display:flex; justify-content:center; align-items:center; flex-direction:column; flex-wrap:wrap; } .d46_4 .main.reset_vertical {height:auto;} .d46_4 .pin {width:100%;} .d46_4 .topic {color:#FFFFFF;} .d46_4 .topic h2 {font-size:2.75rem;} .d46_4 .topic p {font-size:1.375rem; max-width:80rem; width:100%; margin:1.25rem auto 0;} .d46_4 .sc_slider_col {display:flex; justify-content:center; align-items:center; margin-top:3.75rem;} .d46_4 .sc_slider_col .film {width:40%; position:relative;} .d46_4 .sc_slider_col .film .machine {display:block; width:100%; height:100%; position:absolute; left:0; top:50%; transform:translateY(-50%);} .d46_4 .sc_slider_col .film .machine p {display:block; position:absolute; z-index:1; left:0; top:50%; transform:translateY(-56.25%); width:6.25rem; height:6.25rem; background:url("../images/p46/004_camera.svg") no-repeat scroll center center / 100% auto; background-size:100% auto;} .d46_4 .sc_slider_col .film .machine p span {display:block; position:absolute; border-radius:100%; background:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));} .d46_4 .sc_slider_col .film .machine p span:nth-child(1) {width:3.75rem; height:3.75rem; left:-16.5%; top:-9.5%;} .d46_4 .sc_slider_col .film .machine p span:nth-child(2) {width:2.75rem; height:2.75rem; right:0.5%; top:-10.5%;} .d46_4 .sc_slider_col .film .machine p strong {display:block; width:1.5rem; height:1.5rem; cursor:pointer; position:absolute; right:30%; bottom:32%; background-image:url("../images/p46/004_camera_play.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d46_4 .sc_slider_col .film .machine p strong.pause {background-image:url("../images/p46/004_camera_pause.svg");} .d46_4 .sc_slider_col .film .machine p strong:hover {opacity:0.5;} .d46_4 .sc_slider_col .film .machine p span em {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:65%; height:65%; opacity:0.2; background:url("../images/p46/004_camera_co.svg") no-repeat scroll center center / 100% auto; background-size:100% auto; animation:d46_3_camera 4s linear; animation-iteration-count:infinite; animation-play-state:paused;} @keyframes d46_3_camera { 0% { transform:translateX(-50%) translateY(-50%) rotate(0deg); } 100% { transform:translateX(-50%) translateY(-50%) rotate(360deg); } } .d46_4 .sc_slider_col .film .machine i {display:block; position:absolute; left:6.25rem; top:50%; transform:translateY(-50%); width:calc(100% - 6.25rem); height:72%; background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); clip-path:polygon(0% 46.75%, 100% 0%, 100% 100%, 0% 53.25%);} .d46_4 .sc_slider_col .film .tab {margin-left:9.375rem; height:30rem; background:url("../images/p46/004_tape.png") no-repeat scroll left center; background-size:auto 100%; overflow:hidden;} .d46_4 .sc_slider_col .film .tab .box {--w:9rem;/*继承宽度*/ display:flex; flex-direction:column; justify-content:center; transform:translateY(calc(50%));} .d46_4 .sc_slider_col .film .tab span {opacity:0.5; width:calc(var(--w)); height:calc(var(--w)*0.66); position:relative; filter:grayscale(100%); background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:100%; transition:all 0.3s;} .d46_4 .sc_slider_col .film .tab span i {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:calc(var(--w)*0.42); height:calc(var(--w)*0.42); cursor:pointer; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d46_4 .sc_slider_col .film .tab span em {position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:0.625rem; width:12.5rem; text-align:left; font-size:1rem; font-style:normal; color:#FFFFFF;} .d46_4 .sc_slider_col .film .tab span.hover, .d46_4 .sc_slider_col .film .tab span.active {opacity:1; filter:grayscale(0);} .d46_4 .sc_slider_col section {width:60%; position:relative;} .d46_4 .sc_slider_col section .s_con {visibility:hidden; opacity:0;} .d46_4 .sc_slider_col section .s_con:not(:first-child) {position:absolute; left:0; top:0; width:100%; height:100%;} .d46_4 .sc_slider_col section .s_con .thumbs {width:55%; margin:0; padding:0;} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide {display:flex; flex-direction:column; cursor:pointer; opacity:0.5; transition:all 0.3s;} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide .text {text-align:left; margin:0 0 0.3125rem;} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide .text p {font-size:0.75rem; color:#FFFFFF; white-space:nowrap; border-bottom:0.125rem solid rgba(255, 255, 255, 0.3);} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide .img_box {padding-top:75%;} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide .img_box img {display:block; width:100%; height:100%; position:absolute; left:0; top:0;} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide-thumb-active {opacity:1;} .d46_4 .sc_slider_col section .s_con .thumbs .swiper-slide-thumb-active .text p {border-color:#C0845D;} .d46_4 .sc_slider_col section .s_con .gallery {width:100%; margin-top:10px; padding:0;} .d46_4 .sc_slider_col section .s_con .gallery .swiper-slide {display:flex;} .d46_4 .sc_slider_col section .s_con .gallery .swiper-slide .img_box {width:55%; padding-top:41.25%;} .d46_4 .sc_slider_col section .s_con .gallery .swiper-slide .img_box img {margin:0; width:100%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:auto;} .d46_4 .sc_slider_col section .s_con .gallery .swiper-slide .text {width:45%; margin:0; padding:0 2.5rem; text-align:left; color:#FFFFFF;} .d46_4 .sc_slider_col section .s_con .gallery .swiper-slide .text h3 {font-size:1.375rem; margin-bottom:1.25rem;} .d46_4 .sc_slider_col section .s_con .gallery .swiper-slide .text p {font-size:1rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;} .d46_4 .sc_slider_col section .s_con.show {visibility:visible; opacity:1;} .d46_4 .scroll_arrow {display:block; width:2.5rem; height:2.5rem; cursor:pointer; margin:2.5rem auto 0; background:url("../images/p46/arrow.svg") no-repeat scroll center center / 100% auto; background-size:cover; animation:d46_4_scroll_arrow 2s ease-out both; animation-iteration-count:infinite;} @keyframes d46_4_scroll_arrow { 0%, 100% { opacity:0.5; } 50% { opacity:1; } } /**/ .d46_5 {padding:9.375rem 0; position:relative; z-index:auto; background:url("../images/p46/005_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d46_5::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.3);} .d46_5 .main {position:relative; z-index:1;} .d46_5 .topic {text-align:center;} .d46_5 .topic h2 {font-size:2.75rem;} .d46_5 .topic p {font-size:1.375rem; max-width:80rem; width:100%; margin:1.25rem auto 0;} .d46_5 .sector {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:4.5rem auto 10rem; position:relative;} .d46_5 .sector .c_l {position:relative;} .d46_5 .sector .c_l .disabled_area {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:60%; height:60%; border-radius:100%; background:transparent;} .d46_5 .sector .c_l .pie {width:36rem; height:36rem; position:relative;} .d46_5 .sector .c_l .pie p {display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border-radius:100%; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.2) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg); transition:all 0.3s;} .d46_5 .sector .c_l .pie p em {display:block; margin-bottom:28rem; font-size:1rem; font-style:normal; transition:all;} .d46_5 .sector .c_l .pie p:nth-child(1) {z-index:1; transform:translateX(-50%) translateY(-50%) rotate(90deg);} .d46_5 .sector .c_l .pie p:nth-child(2) {z-index:2; transform:translateX(-50%) translateY(-50%) rotate(30deg);} .d46_5 .sector .c_l .pie p:nth-child(3) {z-index:3; transform:translateX(-50%) translateY(-50%) rotate(-30deg);} .d46_5 .sector .c_l .pie p:nth-child(4) {z-index:4; transform:translateX(-50%) translateY(-50%) rotate(-90deg);} .d46_5 .sector .c_l .pie p:nth-child(5) {z-index:5; transform:translateX(-50%) translateY(-50%) rotate(-150deg);} .d46_5 .sector .c_l .pie p:nth-child(6) {z-index:6; transform:translateX(-50%) translateY(-50%) rotate(-210deg);} .d46_5 .sector .c_l .pie p:nth-child(2), .d46_5 .sector .c_l .pie p:nth-child(4), .d46_5 .sector .c_l .pie p:nth-child(6) {width:90%; height:90%;} .d46_5 .sector .c_l .pie p:nth-child(2) em, .d46_5 .sector .c_l .pie p:nth-child(4) em, .d46_5 .sector .c_l .pie p:nth-child(6) em {margin-bottom:27rem;} .d46_5 .sector .c_l .pie p:nth-child(7) em, .d46_5 .sector .c_l .pie p:nth-child(8) em, .d46_5 .sector .c_l .pie p:nth-child(9) em {margin-bottom:16.5rem;} .d46_5 .sector .c_l .pie p:nth-child(7) {z-index:7; transform:translateX(-50%) translateY(-50%) rotate(70deg); width:60%; height:60%; background:conic-gradient(from -60deg, #C9C9BC 0deg , #C9C9BC 120deg, transparent 0deg);} .d46_5 .sector .c_l .pie p:nth-child(7)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d46_5 .sector .c_l .pie p:nth-child(8) {z-index:8; transform:translateX(-50%) translateY(-50%) rotate(190deg); width:60%; height:60%; background:conic-gradient(from -60deg, #B9ADB3 0deg , #B9ADB3 120deg, transparent 0deg);} .d46_5 .sector .c_l .pie p:nth-child(8)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:85.6%; background:#CCCCCC;} .d46_5 .sector .c_l .pie p:nth-child(9) {z-index:9; transform:translateX(-50%) translateY(-50%) rotate(310deg); width:60%; height:60%; background:conic-gradient(from -60deg, #D1C9C6 0deg , #D1C9C6 120deg, transparent 0deg);} .d46_5 .sector .c_l .pie p:nth-child(9)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d46_5 .sector .c_l .pie p:nth-child(10) {display:flex; justify-content:center; align-items:center; transform:translateX(-50%) translateY(-50%) rotate(-5deg); z-index:11; width:35%; height:35%; border:0.1875rem solid #CCCCCC; background:#AF9687;} .d46_5 .sector .c_l .pie p:nth-child(10)::before {display:none;} .d46_5 .sector .c_l .pie p:nth-child(10) strong {font-size:1.375rem; color:#FFFFFF; line-height:1.2; text-transform:uppercase; margin-bottom:0.625rem; padding:0 2.5rem;} .d46_5 .sector .c_l .pie p:nth-child(10) strong i {display:block; margin:0 auto 0.625rem; width:3rem; height:3rem; background:url("../images/p46/005_wa_icon.png") no-repeat scroll center center / 100% auto; background-size:cover;} .d46_5 .sector .c_l .pie p.hover {color:#b66a45;} .d46_5 .sector .c_l .pie p.active .ripple {display:none;} .d46_5 .sector .c_l .pie p.active {color:#b66a45; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.8) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg)} .d46_5 .sector .c_l .pie.r789 p:nth-child(7) {transform:translateX(-50%) translateY(-50%) rotate(60deg); transition:all 2s;} .d46_5 .sector .c_l .pie.r789 p:nth-child(8) {transform:translateX(-50%) translateY(-50%) rotate(180deg); transition:all 2s;} .d46_5 .sector .c_l .pie.r789 p:nth-child(9) {transform:translateX(-50%) translateY(-50%) rotate(300deg); transition:all 2s;} .d46_5 .sector .c_l .pie.r789 p:nth-child(10) {transform:translateX(-50%) translateY(-50%) rotate(0deg); transition:all 1s;} .d46_5 .sector .c_l .pie p .ripple {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#d38557; animation:d46_5_ripple 2s ease-out both; animation-iteration-count:infinite;} @keyframes d46_5_ripple { 0%{ transform:translateX(-50%) scale(0.5); } 50% { transform:translateX(-50%) scale(1); opacity:0.1; } 100% { transform:translateX(-50%) scale(0.5); } } .d46_5 .sector .c_l .pie p:nth-child(2) .ripple, .d46_5 .sector .c_l .pie p:nth-child(4) .ripple, .d46_5 .sector .c_l .pie p:nth-child(6) .ripple {width:0.3125rem; height:0.3125rem; top:5%;} .d46_5 .sector .c_l .pie p .ripple_hit {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%;} .d46_5 .sector .c_l .pie p:nth-child(2) .ripple_hit, .d46_5 .sector .c_l .pie p:nth-child(4) .ripple_hit, .d46_5 .sector .c_l .pie p:nth-child(6) .ripple_hit {width:0.3125rem; height:0.3125rem; top:5%;} .d46_5 .sector .c_l .pie p .ripple_hit i {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border:1px solid rgba(255, 255, 255, 1.0); border-radius:100%;} .d46_5 .sector .c_l .pie p .ripple_hit i:nth-child(1) {opacity:1.0; width:calc(100% + 0.0rem); height:calc(100% + 0.0rem); animation:d46_5_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d46_5 .sector .c_l .pie p .ripple_hit i:nth-child(2) {opacity:0.8; width:calc(100% + 0.8rem); height:calc(100% + 0.8rem); animation:d46_5_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d46_5 .sector .c_l .pie p .ripple_hit i:nth-child(3) {opacity:0.6; width:calc(100% + 1.6rem); height:calc(100% + 1.6rem); animation:d46_5_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} @keyframes d46_5_ripple_hit { 0% { } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } .d46_5 .sector .c_l .pie_hit_zone {position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:100%;} .d46_5 .sector .c_l .pie_hit_zone span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; border-radius:100%; clip-path:polygon(20% 0%, 80% 0%, 50% 50%);} .d46_5 .sector .c_l .pie_hit_zone span:nth-child(1) {transform:rotate(90deg);} .d46_5 .sector .c_l .pie_hit_zone span:nth-child(2) {transform:rotate(30deg);} .d46_5 .sector .c_l .pie_hit_zone span:nth-child(3) {transform:rotate(-30deg);} .d46_5 .sector .c_l .pie_hit_zone span:nth-child(4) {transform:rotate(-90deg);} .d46_5 .sector .c_l .pie_hit_zone span:nth-child(5) {transform:rotate(-150deg);} .d46_5 .sector .c_l .pie_hit_zone span:nth-child(6) {transform:rotate(-210deg);} .d46_5 .sector .c_l .pie_hit_zone span.active {pointer-events:none;} .d46_5 .sector .c_r {position:absolute; right:0; top:10%; width:20rem;} .d46_5 .sector .c_r .img {width:100%; height:10rem; background:red;} .d46_5 .sector .c_r .text {display:none; position:absolute; left:0; top:0; width:100%; color:#b66a45;} .d46_5 .sector .c_r .text:nth-child(1) {display:block;} .d46_5 .sector .c_r .text h3 {display:inline-block; margin-bottom:0.625rem; position:relative; font-size:1.375rem;} .d46_5 .sector .c_r .text h3 .v_icon {display:block; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); cursor:pointer; width:2rem; height:2rem; border-radius:100%; border:1px solid #b66a45; background:url("../images/p46/play_icon.svg") no-repeat scroll 60% center / 40% auto;} .d46_5 .sector .c_r .text p {font-size:0.875rem; word-break:break-all;} .d46_5 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.9);} .d46_5 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d46_5 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d46_5 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#333333; border-radius:100%; transition:opacity 0.3s;} .d46_5 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d46_5 .lightbox .close i::before, .d46_5 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d46_5 .lightbox .close i::before {width:0.125rem; height:40%;} .d46_5 .lightbox .close i::after {width:40%; height:0.125rem;} .d46_5 .lightbox .close:hover i {opacity:1;} /**/ .d46_6 {position:relative; background:rgba(0, 0, 0, 1.0);} .d46_6 .main {} .d46_6 ul {width:100%; height:calc(100vh - 4.375rem); position:relative;} .d46_6 ul li {opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d46_6 ul li .cell {width:100%; height:100%; position:relative;} .d46_6 ul li p {opacity:0; position:absolute; font-size:2.75rem; color:#FFFFFF; transition:all 0.3s;} .d46_6 ul li:nth-child(1) p {z-index:1; right:12%; top:35%;} .d46_6 ul li:nth-child(2) p {z-index:2; right:18%; top:35%;} .d46_6 ul li:nth-child(3) p {z-index:3; left:5%; bottom:10%;} .d46_6 ul li:nth-child(4) p {left:10%; top:10%;} .d46_6 ul li:nth-child(5) p {left:10%; top:10%;} /* 动态复制后应用第四屏的样式 */ .d46_6 ul li span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d46_6 ul li.active {opacity:1;} .d46_6 ul li.active p {opacity:1; transform:translateY(-10px); transition-delay:0.3s;} .d46_6 .pagination {display:flex; justify-content:center; position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);} .d46_6 .pagination span {display:block; margin:0 0.3125rem; width:0.615rem; height:0.615rem; border-radius:100%; border:1px solid rgba(255, 255, 255, 1.0); background:transparent; transition:all 0.3s;} .d46_6 .pagination span.active {background:#d38557;} /**/ .d46_7 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d46_7 h2 {font-size:2.75rem; color:#FFFFFF; text-align:center;} .d46_7 .swiper-container {padding:4rem 0;} .d46_7 .swiper-container .swiper-slide .img_box {padding-top:75%; overflow:hidden;} .d46_7 .swiper-container .swiper-slide .img_box img {display:block; position:absolute; left:0; top:0; width:100%; height:auto;} .d46_7 .swiper-container .swiper-slide .video {position:relative;} .d46_7 .swiper-container .swiper-slide .video .v_icon {display:block; position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); cursor:pointer; width:2.5rem; height:2.5rem; border-radius:100%; border:1px solid #FFFFFF; background:#000000 url("../images/p47/play_icon_white.svg") no-repeat scroll 60% center / 40% auto; transition:all 0.3s;} .d46_7 .swiper-container .swiper-slide .video .v_icon:hover {background-color:rgba(211, 133, 87, 1);} .d46_7 .swiper-container .swiper-slide .video .a_icon {display:block; cursor:pointer; position:absolute; z-index:13; right:1.25rem; bottom:1.25rem; width:2.5rem; height:2.5rem;} .d46_7 .swiper-container .swiper-slide .video .a_icon i {display:block; position:absolute; width:60%; height:60%; background:rgba(255, 255,255, 0.3); border-radius:100%; transition:all 0.3s;} .d46_7 .swiper-container .swiper-slide .video .a_icon i::before, .d46_7 .swiper-container .swiper-slide .video .a_icon i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#000000;} .d46_7 .swiper-container .swiper-slide .video .a_icon i::before {width:0.125rem; height:40%;} .d46_7 .swiper-container .swiper-slide .video .a_icon i::after {width:40%; height:0.125rem;} .d46_7 .swiper-container .swiper-slide .video .a_icon:hover i {background:rgba(211, 133, 87, 1);} .d46_7 .swiper-container .swiper-slide .img_box video {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:auto;} .d46_7 .swiper-container .swiper-pagination {bottom:0;} .d46_7 .swiper-container .swiper-pagination .swiper-pagination-bullet {transition:all 0.3s;} .d46_7 .swiper-container .swiper-pagination .swiper-pagination-bullet-active {background:#d38557;} .d46_7 .swiper-container .swiper-button-prev, .d46_7 .swiper-container .swiper-button-next {opacity:0.8; width:2.5rem; height:2.5rem; border-radius:0.3125rem; background:linear-gradient(180deg, rgba(211, 133, 87, 0.6), rgba(182, 106, 69, 0.3)); transition:all 0.3s;} .d46_7 .swiper-container .swiper-button-prev i, .d46_7 .swiper-container .swiper-button-next i {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d46_7 .swiper-container .swiper-button-prev i {background-image:url("../images/p46/prev.svg");} .d46_7 .swiper-container .swiper-button-next i {background-image:url("../images/p46/next.svg");} .d46_7 .swiper-container .swiper-button-prev:hover, .d46_7 .swiper-container .swiper-button-next:hover {opacity:1;} .d46_7 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100vh; background:#333333;} .d46_7 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d46_7 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d46_7 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#000000; border-radius:100%; transition:opacity 0.3s;} .d46_7 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d46_7 .lightbox .close i::before, .d46_7 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d46_7 .lightbox .close i::before {width:0.125rem; height:40%;} .d46_7 .lightbox .close i::after {width:40%; height:0.125rem;} .d46_7 .lightbox .close:hover i {opacity:1;} /**/ .d46_side_nav {visibility:hidden; opacity:0; position:fixed; z-index:22; right:0; top:50%; transform:translateY(-50%); width:6.25rem; display:flex; flex-direction:column; transition:all 0.3s;} .d46_side_nav.show {visibility:visible; opacity:1;} .d46_side_nav.hide {visibility:hidden; opacity:0;} .d46_side_nav a {width:100%; height:3.75rem; margin-top:1px; cursor:pointer; background-color:#666666; transition:all 0.3s;} .d46_side_nav a i {display:block; opacity:0.5; position:static; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d46_side_nav a:nth-child(1) i {background-image:url("../images/p46/side_nav_icon_1.png");} .d46_side_nav a:nth-child(2) i {background-image:url("../images/p46/side_nav_icon_2.png");} .d46_side_nav a:nth-child(3) i {background-image:url("../images/p46/side_nav_icon_3.png");} .d46_side_nav a:nth-child(4) i {background-image:url("../images/p46/side_nav_icon_4.png");} .d46_side_nav a:nth-child(5) i {background-image:url("../images/p46/side_nav_icon_5.png");} .d46_side_nav a:hover {background-color:#d38557;} .d46_side_nav a:hover i {opacity:1;} .d46_side_nav a.active {background-color:#d38557;} .d46_side_nav a.active i {opacity:1;} /****************************************/ /* products: P80 */ /****************************************/ /**/ .sel_products_detail_47 {} .sel_products_detail_47 img {display:block; width:100%;} .sel_products_detail_47 .anchor {top:-4.375rem;} /**/ .d47_1 {position:relative; color:#b66a45; overflow:hidden;} .d47_1 .wrap {background:url("../images/p47/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d47_1 .wrap::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(90deg, rgb(250, 225, 189) 0%, rgba(250, 225, 189, 0) 50%);} .d47_1 .main {display:flex; justify-content:flex-start; align-items:center; height:calc(100vh - 6.25rem); padding:9.375rem 0; position:relative; z-index:1;} .d47_1 .shead {position:relative; z-index:1;} .d47_1 .shead .model {display:block; width:6rem; height:2.5rem; margin-bottom:1.25rem; padding:0 1rem 0.125rem 1rem; background:linear-gradient(180deg, rgba(174, 111, 77, 1), rgba(214, 173, 138, 1)); border-radius:0.3125rem;} .d47_1 .shead .model i {display:block; position:static; width:100%; height:100%; background:url("../images/p47/001_model.png") no-repeat scroll center center / 100% auto;} .d47_1 .shead h1 {font-size:4.5rem;} .d47_1 .shead h2 {font-size:2.5rem;} .d47_1 .shead p {margin-top:1.5rem; font-size:1.25rem; line-height:1.3;} .d47_1 .cssnow {width:100%; height:100%; pointer-events:none; position:absolute; z-index:1; left:0; bottom:0;} .d47_1 .cssnow span {display:block; background:#C8885F; border-radius:100%; width:0.3125rem; height:0.3125rem; rotate:35deg; filter:blur(0px); position:absolute; top:150%; z-index:9999; animation-name:cssnowflakes-fall, cssnowflakes-shake; animation-duration:10s, 3s; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite, infinite; animation-play-state:running, running;} @keyframes cssnowflakes-fall { 0% { top:-10%; } 100% { top:100%; } } @keyframes cssnowflakes-shake { 0% { transform:translateX(0px); } 50% { transform:translateX(5rem); } 100% { transform:translateX(0px); } } .d47_1 .cssnow span:nth-child(1) {left:1%; animation-delay:0s, 0s;} .d47_1 .cssnow span:nth-child(1) {left:10%; animation-delay:1s, 1s; scale:1.5;} .d47_1 .cssnow span:nth-child(2) {left:20%; animation-delay:6s, 0.5s;} .d47_1 .cssnow span:nth-child(3) {left:30%; animation-delay:4s, 2s;} .d47_1 .cssnow span:nth-child(4) {left:40%; animation-delay:2s, 2s;} .d47_1 .cssnow span:nth-child(5) {left:50%; animation-delay:8s, 3s; scale:2;} .d47_1 .cssnow span:nth-child(6) {left:60%; animation-delay:6s, 2s; scale:1.25; filter:blur(1.25rem);} .d47_1 .cssnow span:nth-child(7) {left:70%; animation-delay:2.5s, 1s;} .d47_1 .cssnow span:nth-child(8) {left:80%; animation-delay:1s, 0s;} .d47_1 .cssnow span:nth-child(9) {left:90%; animation-delay:3s, 1.5s;} .d47_1 .intro {padding:6.25rem 0; position:relative; z-index:1; background:linear-gradient(180deg, rgba(54, 33, 6, 1) 80%, rgba(101, 69, 20, 1)); overflow:hidden;} .d47_1 .intro p {position:relative; z-index:2; width:80%; margin:auto; font-size:1.375rem; text-align:center; color:#FFFFFF;} .d47_1 .intro p sup {font-size:0.625rem;} /**/ .d47_2 {color:#FFFFFF; text-align:center; background:#000000 url("../images/p47/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d47_2 .wrap {position:relative;} .d47_2 .wrap::before {content:""; position:absolute; z-index:1; left:0; top:0; width:100%; height:50%; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .d47_2 .wrap::after {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));} .d47_2 .main {padding:9.375rem 0 4.5rem; display:flex; flex-direction:column; justify-content:space-between; height:100vh; position:relative; z-index:2;} .d47_2 .text {} .d47_2 .text h2 {font-size:2.75rem;} .d47_2 .text h2 sup {font-size:1rem;} .d47_2 .text p {font-size:1.375rem;} .d47_2 .img {} .d47_2 .img ul {display:flex; flex-wrap:wrap; justify-content:center;} .d47_2 .img ul li {width:50%; color:#CCCCCC;} .d47_2 .img ul li .l_icon {display:block; margin:auto; width:3rem; height:3rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d47_2 .img ul li h4 {margin:0.625rem auto 1.25rem; font-size:1.125rem;} .d47_2 .img ul li dl {display:flex; justify-content:space-between; padding-top:1.25rem; position:relative;} .d47_2 .img ul li dl::after {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:90%; height:1px; background:#969696} .d47_2 .img ul li dl dd {flex:1; margin:0 0.125rem;} .d47_2 .img ul li dl dd .d_icon {display:block; margin:auto; width:2.5rem; height:2.5rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d47_2 .img ul li dl dd p {font-size:1rem; line-height:1.2; margin-top:0.625rem;} .d47_2 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} /**/ .d47_3 {padding:9.375rem 0; color:#FFFFFF; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5));} .d47_3 .main {} .d47_3 .topic {} .d47_3 .topic .text {width:80%; margin:auto;} .d47_3 .topic .text h2 {font-size:2.25rem;} .d47_3 .topic .text p {font-size:1.125rem; margin-top:1.25rem;} .d47_3 .topic .slider {margin:2.5rem auto 0; width:80%;} .d47_3 .topic .slider .s_tab {display:flex; justify-content:center; flex-wrap:wrap; margin:0 -0.3125rem;} .d47_3 .topic .slider .s_tab span {display:block; flex:1; cursor:pointer; padding:0 0.3125rem;} .d47_3 .topic .slider .s_tab span em {display:block; font-style:normal; font-size:1rem; color:rgba(255, 255, 255, 1); padding:1rem 0.3125rem; border-bottom:0.25rem solid rgba(255, 255, 255, 0.2);} .d47_3 .topic .slider .s_tab span.active em {color:#C0845D; border-color:#C0845D;} .d47_3 .topic .slider ul {margin-top:1.25rem; position:relative;} .d47_3 .topic .slider ul li {display:none;} .d47_3 .topic .slider ul li.active {display:block;} .d47_3 .topic .slider ul li .cell {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:2.5rem 4.5rem; background:linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));} .d47_3 .topic .slider ul li .cover {width:50%;} .d47_3 .topic .slider ul li span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d47_3 .topic .slider ul li p {width:50%; padding:0 0 0 2.5rem; font-size:1.125rem; text-align:left;} /**/ .d47_4 {padding:9.375rem 0; position:relative; z-index:auto; background:url("../images/p47/004_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d47_4::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.3);} .d47_4 .main {position:relative; z-index:1;} .d47_4 .topic {text-align:center;} .d47_4 .topic h2 {font-size:2.75rem;} .d47_4 .topic p {font-size:1.375rem; max-width:80rem; width:100%; margin:1.25rem auto 0;} .d47_4 .sector {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:4.5rem auto 10rem; position:relative;} .d47_4 .sector .c_l {position:relative;} .d47_4 .sector .c_l .disabled_area {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:60%; height:60%; border-radius:100%; background:transparent;} .d47_4 .sector .c_l .pie {width:36rem; height:36rem; position:relative;} .d47_4 .sector .c_l .pie p {display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border-radius:100%; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.2) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg); transition:all 0.3s;} .d47_4 .sector .c_l .pie p em {display:block; margin-bottom:28rem; font-size:1rem; font-style:normal; transition:all;} .d47_4 .sector .c_l .pie p:nth-child(1) {z-index:1; transform:translateX(-50%) translateY(-50%) rotate(90deg);} .d47_4 .sector .c_l .pie p:nth-child(2) {z-index:2; transform:translateX(-50%) translateY(-50%) rotate(30deg);} .d47_4 .sector .c_l .pie p:nth-child(3) {z-index:3; transform:translateX(-50%) translateY(-50%) rotate(-30deg);} .d47_4 .sector .c_l .pie p:nth-child(4) {z-index:4; transform:translateX(-50%) translateY(-50%) rotate(-90deg);} .d47_4 .sector .c_l .pie p:nth-child(5) {z-index:5; transform:translateX(-50%) translateY(-50%) rotate(-150deg);} .d47_4 .sector .c_l .pie p:nth-child(6) {z-index:6; transform:translateX(-50%) translateY(-50%) rotate(-210deg);} .d47_4 .sector .c_l .pie p:nth-child(2), .d47_4 .sector .c_l .pie p:nth-child(4), .d47_4 .sector .c_l .pie p:nth-child(6) {width:90%; height:90%;} .d47_4 .sector .c_l .pie p:nth-child(2) em, .d47_4 .sector .c_l .pie p:nth-child(4) em, .d47_4 .sector .c_l .pie p:nth-child(6) em {margin-bottom:27rem;} .d47_4 .sector .c_l .pie p:nth-child(7) em, .d47_4 .sector .c_l .pie p:nth-child(8) em, .d47_4 .sector .c_l .pie p:nth-child(9) em {margin-bottom:16.5rem;} .d47_4 .sector .c_l .pie p:nth-child(7) {z-index:7; transform:translateX(-50%) translateY(-50%) rotate(70deg); width:60%; height:60%; background:conic-gradient(from -60deg, #C9C9BC 0deg , #C9C9BC 120deg, transparent 0deg);} .d47_4 .sector .c_l .pie p:nth-child(7)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d47_4 .sector .c_l .pie p:nth-child(8) {z-index:8; transform:translateX(-50%) translateY(-50%) rotate(190deg); width:60%; height:60%; background:conic-gradient(from -60deg, #B9ADB3 0deg , #B9ADB3 120deg, transparent 0deg);} .d47_4 .sector .c_l .pie p:nth-child(8)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:85.6%; background:#CCCCCC;} .d47_4 .sector .c_l .pie p:nth-child(9) {z-index:9; transform:translateX(-50%) translateY(-50%) rotate(310deg); width:60%; height:60%; background:conic-gradient(from -60deg, #D1C9C6 0deg , #D1C9C6 120deg, transparent 0deg);} .d47_4 .sector .c_l .pie p:nth-child(9)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d47_4 .sector .c_l .pie p:nth-child(10) {display:flex; justify-content:center; align-items:center; transform:translateX(-50%) translateY(-50%) rotate(-5deg); z-index:11; width:35%; height:35%; border:0.1875rem solid #CCCCCC; background:#AF9687;} .d47_4 .sector .c_l .pie p:nth-child(10)::before {display:none;} .d47_4 .sector .c_l .pie p:nth-child(10) strong {font-size:1.375rem; color:#FFFFFF; line-height:1.2; text-transform:uppercase; margin-bottom:0.625rem; padding:0 2.5rem;} .d47_4 .sector .c_l .pie p:nth-child(10) strong i {display:block; margin:0 auto 0.625rem; width:3rem; height:3rem; background:url("../images/p47/004_wa_icon.png") no-repeat scroll center center / 100% auto; background-size:cover;} .d47_4 .sector .c_l .pie p.hover {color:#b66a45;} .d47_4 .sector .c_l .pie p.active .ripple {display:none;} .d47_4 .sector .c_l .pie p.active {color:#b66a45; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.8) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg)} .d47_4 .sector .c_l .pie.r789 p:nth-child(7) {transform:translateX(-50%) translateY(-50%) rotate(60deg); transition:all 2s;} .d47_4 .sector .c_l .pie.r789 p:nth-child(8) {transform:translateX(-50%) translateY(-50%) rotate(180deg); transition:all 2s;} .d47_4 .sector .c_l .pie.r789 p:nth-child(9) {transform:translateX(-50%) translateY(-50%) rotate(300deg); transition:all 2s;} .d47_4 .sector .c_l .pie.r789 p:nth-child(10) {transform:translateX(-50%) translateY(-50%) rotate(0deg); transition:all 1s;} .d47_4 .sector .c_l .pie p .ripple {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#d38557; animation:d47_4_ripple 2s ease-out both; animation-iteration-count:infinite;} @keyframes d47_4_ripple { 0%{ transform:translateX(-50%) scale(0.5); } 50% { transform:translateX(-50%) scale(1); opacity:0.1; } 100% { transform:translateX(-50%) scale(0.5); } } .d47_4 .sector .c_l .pie p:nth-child(2) .ripple, .d47_4 .sector .c_l .pie p:nth-child(4) .ripple, .d47_4 .sector .c_l .pie p:nth-child(6) .ripple {width:0.3125rem; height:0.3125rem; top:5%;} .d47_4 .sector .c_l .pie p .ripple_hit {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%;} .d47_4 .sector .c_l .pie p:nth-child(2) .ripple_hit, .d47_4 .sector .c_l .pie p:nth-child(4) .ripple_hit, .d47_4 .sector .c_l .pie p:nth-child(6) .ripple_hit {width:0.3125rem; height:0.3125rem; top:5%;} .d47_4 .sector .c_l .pie p .ripple_hit i {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border:1px solid rgba(255, 255, 255, 1.0); border-radius:100%;} .d47_4 .sector .c_l .pie p .ripple_hit i:nth-child(1) {opacity:1.0; width:calc(100% + 0.0rem); height:calc(100% + 0.0rem); animation:d47_4_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d47_4 .sector .c_l .pie p .ripple_hit i:nth-child(2) {opacity:0.8; width:calc(100% + 0.8rem); height:calc(100% + 0.8rem); animation:d47_4_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d47_4 .sector .c_l .pie p .ripple_hit i:nth-child(3) {opacity:0.6; width:calc(100% + 1.6rem); height:calc(100% + 1.6rem); animation:d47_4_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} @keyframes d47_4_ripple_hit { 0% { } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } .d47_4 .sector .c_l .pie_hit_zone {position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:100%;} .d47_4 .sector .c_l .pie_hit_zone span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; border-radius:100%; clip-path:polygon(20% 0%, 80% 0%, 50% 50%);} .d47_4 .sector .c_l .pie_hit_zone span:nth-child(1) {transform:rotate(90deg);} .d47_4 .sector .c_l .pie_hit_zone span:nth-child(2) {transform:rotate(30deg);} .d47_4 .sector .c_l .pie_hit_zone span:nth-child(3) {transform:rotate(-30deg);} .d47_4 .sector .c_l .pie_hit_zone span:nth-child(4) {transform:rotate(-90deg);} .d47_4 .sector .c_l .pie_hit_zone span:nth-child(5) {transform:rotate(-150deg);} .d47_4 .sector .c_l .pie_hit_zone span:nth-child(6) {transform:rotate(-210deg);} .d47_4 .sector .c_l .pie_hit_zone span.active {pointer-events:none;} .d47_4 .sector .c_r {position:absolute; right:0; top:10%; width:20rem;} .d47_4 .sector .c_r .img {width:100%; height:10rem; background:red;} .d47_4 .sector .c_r .text {display:none; position:absolute; left:0; top:0; width:100%; color:#b66a45;} .d47_4 .sector .c_r .text:nth-child(1) {display:block;} .d47_4 .sector .c_r .text h3 {display:inline-block; margin-bottom:0.625rem; position:relative; font-size:1.375rem;} .d47_4 .sector .c_r .text h3 .v_icon {display:block; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); cursor:pointer; width:2rem; height:2rem; border-radius:100%; border:1px solid #b66a45; background:url("../images/p46/play_icon.svg") no-repeat scroll 60% center / 40% auto;} .d47_4 .sector .c_r .text p {font-size:0.875rem; word-break:break-all;} .d47_4 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.9);} .d47_4 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d47_4 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d47_4 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#333333; border-radius:100%; transition:opacity 0.3s;} .d47_4 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d47_4 .lightbox .close i::before, .d47_4 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d47_4 .lightbox .close i::before {width:0.125rem; height:40%;} .d47_4 .lightbox .close i::after {width:40%; height:0.125rem;} .d47_4 .lightbox .close:hover i {opacity:1;} /**/ .d47_5 {position:relative; background:rgba(0, 0, 0, 1.0);} .d47_5 .main {} .d47_5 ul {width:100%; height:calc(100vh - 4.375rem); position:relative;} .d47_5 ul li {opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d47_5 ul li:first-child {opacity:1;} .d47_5 ul li .cell {width:100%; height:100%; position:relative;} .d47_5 ul li p {opacity:0; position:absolute; font-size:2.75rem; color:#FFFFFF; transition:all 0.3s;} .d47_5 ul li:nth-child(1) p {right:12%; top:35%;} .d47_5 ul li:nth-child(2) p {right:18%; top:35%;} .d47_5 ul li:nth-child(3) p {left:5%; bottom:10%;} .d47_5 ul li:nth-child(4) p {left:10%; top:10%;} .d47_5 ul li:nth-child(5) p {left:10%; top:10%;} /* 动态复制后应用第四屏的样式 */ .d47_5 ul li span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d47_5 ul li.active {opacity:1;} .d47_5 ul li.active p {opacity:1; transform:translateY(-10px); transition-delay:0.3s;} .d47_5 .pagination {display:flex; justify-content:center; position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);} .d47_5 .pagination span {display:block; margin:0 0.3125rem; width:0.615rem; height:0.615rem; border-radius:100%; border:1px solid rgba(255, 255, 255, 1.0); background:transparent; transition:all 0.3s;} .d47_5 .pagination span.active {background:#d38557;} /**/ .d47_6 {color:#FFFFFF; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)); overflow:hidden;} .d47_6 .slide_box {padding:9.375rem 0 0;} .d47_6 .topic {width:80%; margin:0 auto 4.5rem;} .d47_6 .topic h2 {font-size:2.75rem;} .d47_6 .topic p {font-size:1.375rem; margin-top:1.25rem;} .d47_6 .pin {display:flex; justify-content:center; align-items:center; flex-direction:column; flex-wrap:wrap;} .d47_6 .t_l_s {width:100%;} .d47_6 .t_l_s .text {width:60%; margin:auto;} .d47_6 .t_l_s .text h3 {font-size:2.25rem;} .d47_6 .t_l_s .text p {font-size:1.125rem; margin-top:1.25rem;} .d47_6 .t_l_s .list {margin:6.25rem auto 0; position:relative; width:60rem; height:15rem;} .d47_6 .t_l_s .list .box {visibility:hidden; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%;} .d47_6 .t_l_s .list .box.active {visibility:visible; opacity:1;} .d47_6 .t_l_s .list .box .swiper-container {padding:0; height:100%; overflow:visible;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide {display:flex; align-items:center;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide .img_box {padding-top:100%; position:relative; background:transparent; opacity:0; transform:scale(0.5);} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide .img_box span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-prev-3 .img_box {opacity:0; transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-prev-2 .img_box {opacity:0.1; transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-prev .img_box {opacity:0.5; transform:translateX(-10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-active .img_box {opacity:1; transform:translateX(0%) translateY(-30%) scale(1); transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-next .img_box {opacity:0.5; transform:translateX(10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-next-2 .img_box {opacity:0.1; transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-slide-next-3 .img_box {opacity:0; transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-button-prev, .d47_6 .t_l_s .list .box .swiper-container .swiper-button-next {opacity:0.5; width:4.5rem; height:4.5rem; background-position:center center; background-repeat:no-repeat; background-size:50% auto; transition:all 0.3s;} .d47_6 .t_l_s .list .box .swiper-container .swiper-button-prev {left:-10%; background-image:url("../images/p47/006_swiper_button_prev.svg");} .d47_6 .t_l_s .list .box .swiper-container .swiper-button-next {right:-10%; background-image:url("../images/p47/006_swiper_button_next.svg");} .d47_6 .t_l_s .list .box .swiper-container .swiper-button-prev:hover, .d47_6 .t_l_s .list .box .swiper-container .swiper-button-next:hover {opacity:1; background-color:transparent;} .d47_6 .t_l_s .s_tab {display:flex; justify-content:space-between; max-width:60rem; margin:auto;} .d47_6 .t_l_s .s_tab span {flex:1; margin:0 0.3125rem; cursor:pointer; position:relative;} .d47_6 .t_l_s .s_tab span em {display:block; font-style:normal; font-size:0.875rem; color:rgba(255, 255, 255, 0.5); width:100%; height:100%; padding:1rem; border-top:2px solid rgba(255, 255, 255, 0.2); transition:all 0.3s;} .d47_6 .t_l_s .s_tab span b {width:0; height:2px; position:absolute; left:50%; top:0; transform:translateX(-50%); background:#C0845D; transition:all 0.3s;} .d47_6 .t_l_s .s_tab span:hover em {color:rgba(255, 255, 255, 0.8);} .d47_6 .t_l_s .s_tab span.active em {color:#C0845D;} .d47_6 .t_l_s .s_tab span.active b {width:100%;} .d47_6 .scale_box {padding:6.25rem 0 0;} .d47_6 .scale_box .title {width:60%; margin:0 auto 2.5rem;} .d47_6 .scale_box .title h3 {font-size:2.5rem;} .d47_6 .scale_box .title p {font-size:1.125rem; margin-top:1.25rem;} .d47_6 .scale_box ul {display:flex; flex-direction:column; overflow:hidden;} .d47_6 .scale_box ul li {opacity:0.5; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(89, 86, 86, 1)); overflow:hidden; transition:all 1s;} .d47_6 .scale_box ul li .cell {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; max-width:70rem; margin:auto;} .d47_6 .scale_box ul li .cover {width:60%; padding:0 4.5rem; transition:all 1s;} .d47_6 .scale_box ul li .cover span {display:block; width:100%; transform:translateY(4.5rem) scale(0.8); padding-top:75%; border-radius:1.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 1s;} .d47_6 .scale_box ul li .text {width:40%; padding:4.5rem 0; text-align:left;} .d47_6 .scale_box ul li .text h3 {font-size:1.875rem;} .d47_6 .scale_box ul li .text p {font-size:1.125rem; margin-top:1.25rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d47_6 .scale_box ul li.active {opacity:1; background:linear-gradient(180deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0.8));} .d47_6 .scale_box ul li.active .cover {padding:4.5rem;} .d47_6 .scale_box ul li.active .cover span {width:100%; margin:auto; transform:translateY(0) scale(1);} .d47_6 .scale_box ul li.active .text p {-webkit-line-clamp:10;} /**/ .d47_7 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d47_7 h2 {font-size:2.75rem; color:#FFFFFF; text-align:center;} .d47_7 .swiper-container {padding:4rem 0;} .d47_7 .swiper-container .swiper-slide .img_box {padding-top:75%; overflow:hidden;} .d47_7 .swiper-container .swiper-slide .img_box img {display:block; position:absolute; left:0; top:0; width:100%; height:auto;} .d47_7 .swiper-container .swiper-slide .video {position:relative;} .d47_7 .swiper-container .swiper-slide .video .v_icon {display:block; position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); cursor:pointer; width:2.5rem; height:2.5rem; border-radius:100%; border:1px solid #FFFFFF; background:#000000 url("../images/p47/play_icon_white.svg") no-repeat scroll 60% center / 40% auto; transition:all 0.3s;} .d47_7 .swiper-container .swiper-slide .video .v_icon:hover {background-color:rgba(211, 133, 87, 1);} .d47_7 .swiper-container .swiper-slide .video .a_icon {display:block; cursor:pointer; position:absolute; z-index:13; right:1.25rem; bottom:1.25rem; width:2.5rem; height:2.5rem;} .d47_7 .swiper-container .swiper-slide .video .a_icon i {display:block; position:absolute; width:60%; height:60%; background:rgba(255, 255,255, 0.3); border-radius:100%; transition:all 0.3s;} .d47_7 .swiper-container .swiper-slide .video .a_icon i::before, .d47_7 .swiper-container .swiper-slide .video .a_icon i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#000000;} .d47_7 .swiper-container .swiper-slide .video .a_icon i::before {width:0.125rem; height:40%;} .d47_7 .swiper-container .swiper-slide .video .a_icon i::after {width:40%; height:0.125rem;} .d47_7 .swiper-container .swiper-slide .video .a_icon:hover i {background:rgba(211, 133, 87, 1);} .d47_7 .swiper-container .swiper-slide .img_box video {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:auto;} .d47_7 .swiper-container .swiper-pagination {bottom:0;} .d47_7 .swiper-container .swiper-pagination .swiper-pagination-bullet {transition:all 0.3s;} .d47_7 .swiper-container .swiper-pagination .swiper-pagination-bullet-active {background:#d38557;} .d47_7 .swiper-container .swiper-button-prev, .d47_7 .swiper-container .swiper-button-next {opacity:0.8; width:2.5rem; height:2.5rem; border-radius:0.3125rem; background:linear-gradient(180deg, rgba(211, 133, 87, 0.6), rgba(182, 106, 69, 0.3)); transition:all 0.3s;} .d47_7 .swiper-container .swiper-button-prev i, .d47_7 .swiper-container .swiper-button-next i {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d47_7 .swiper-container .swiper-button-prev i {background-image:url("../images/p47/prev.svg");} .d47_7 .swiper-container .swiper-button-next i {background-image:url("../images/p47/next.svg");} .d47_7 .swiper-container .swiper-button-prev:hover, .d47_7 .swiper-container .swiper-button-next:hover {opacity:1;} .d47_7 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100vh; background:#333333;} .d47_7 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d47_7 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d47_7 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#000000; border-radius:100%; transition:opacity 0.3s;} .d47_7 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d47_7 .lightbox .close i::before, .d47_7 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d47_7 .lightbox .close i::before {width:0.125rem; height:40%;} .d47_7 .lightbox .close i::after {width:40%; height:0.125rem;} .d47_7 .lightbox .close:hover i {opacity:1;} /**/ .d47_side_nav {visibility:hidden; opacity:0; position:fixed; z-index:10; right:0; top:50%; transform:translateY(-50%); width:6.25rem; display:flex; flex-direction:column; transition:all 0.3s;} .d47_side_nav.show {visibility:visible; opacity:1;} .d47_side_nav.hide {visibility:hidden; opacity:0;} .d47_side_nav a {width:100%; height:3.75rem; margin-top:1px; cursor:pointer; background-color:#666666; transition:all 0.3s;} .d47_side_nav a i {display:block; opacity:0.5; position:static; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d47_side_nav a:nth-child(1) i {background-image:url("../images/p47/side_nav_icon_1.png");} .d47_side_nav a:nth-child(2) i {background-image:url("../images/p47/side_nav_icon_2.png");} .d47_side_nav a:nth-child(3) i {background-image:url("../images/p47/side_nav_icon_3.png");} .d47_side_nav a:nth-child(4) i {background-image:url("../images/p47/side_nav_icon_4.png");} .d47_side_nav a:nth-child(5) i {background-image:url("../images/p47/side_nav_icon_5.png");} .d47_side_nav a:hover {background-color:#d38557;} .d47_side_nav a:hover i {opacity:1;} .d47_side_nav a.active {background-color:#d38557;} .d47_side_nav a.active i {opacity:1;} /****************************************/ /* products: S80 Elite */ /****************************************/ /**/ .sel_products_detail_48 {} .sel_products_detail_48 img {display:block; width:100%;} .sel_products_detail_48 .anchor {top:-4.375rem;} /**/ .d48_1 {position:relative; color:#FFFFFF; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d48_1 .wrap {background:#000000 url("../images/p48/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d48_1 .main {height:calc(100vh - 6.25rem); padding:9.375rem 0; position:relative; z-index:1;} .d48_1 .shead {position:relative; z-index:1;} .d48_1 .shead .model {display:block; width:6rem; height:2.5rem; margin-bottom:1.25rem; padding:0 1rem 0.125rem 1rem; background:linear-gradient(180deg, rgba(62, 143, 152, 1), rgba(25, 61, 76, 1)); border-radius:0.3125rem;} .d48_1 .shead .model i {display:block; position:static; width:100%; height:100%; background:url("../images/p48/001_model.png") no-repeat scroll center center / 100% auto;} .d48_1 .shead h1 {font-size:4.5rem;} .d48_1 .shead h2 {font-size:2.5rem;} .d48_1 .shead p {margin-top:1.5rem; font-size:1.25rem; color:rgba(255, 255, 255, 0.8); line-height:1.3;} .d48_1 .cssnow {width:100%; height:100%; pointer-events:none; position:absolute; z-index:1; left:0; bottom:0;} .d48_1 .cssnow span {display:block; background:#3A8BD0; border-radius:100%; width:0.3125rem; height:0.3125rem; rotate:35deg; filter:blur(0px); position:absolute; top:150%; z-index:9999; animation-name:cssnowflakes-fall, cssnowflakes-shake; animation-duration:10s, 3s; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite, infinite; animation-play-state:running, running;} @keyframes cssnowflakes-fall { 0% { top:-10%; } 100% { top:100%; } } @keyframes cssnowflakes-shake { 0% { transform:translateX(0px); } 50% { transform:translateX(5rem); } 100% { transform:translateX(0px); } } .d48_1 .cssnow span:nth-child(1) {left:1%; animation-delay:0s, 0s;} .d48_1 .cssnow span:nth-child(1) {left:10%; animation-delay:1s, 1s; scale:1.5;} .d48_1 .cssnow span:nth-child(2) {left:20%; animation-delay:6s, 0.5s;} .d48_1 .cssnow span:nth-child(3) {left:30%; animation-delay:4s, 2s;} .d48_1 .cssnow span:nth-child(4) {left:40%; animation-delay:2s, 2s;} .d48_1 .cssnow span:nth-child(5) {left:50%; animation-delay:8s, 3s; scale:2;} .d48_1 .cssnow span:nth-child(6) {left:60%; animation-delay:6s, 2s; scale:1.25; filter:blur(1.25rem);} .d48_1 .cssnow span:nth-child(7) {left:70%; animation-delay:2.5s, 1s;} .d48_1 .cssnow span:nth-child(8) {left:80%; animation-delay:1s, 0s;} .d48_1 .cssnow span:nth-child(9) {left:90%; animation-delay:3s, 1.5s;} .d48_1 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} .d48_1 .intro {padding:6.25rem 0; position:relative; z-index:1; background:linear-gradient(180deg, rgba(5, 5, 5, 1) 80%, rgba(42, 100, 101, 1)); overflow:hidden;} .d48_1 .intro p {position:relative; z-index:2; width:80%; margin:auto; font-size:1.375rem; text-align:center;} /**/ .d48_2 {color:#FFFFFF; text-align:center; background:#000000 url("../images/p48/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d48_2 .wrap {position:relative;} .d48_2 .wrap::before {content:""; position:absolute; z-index:1; left:0; top:0; width:100%; height:50%; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .d48_2 .wrap::after {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));} .d48_2 .main {padding:9.375rem 0 4.5rem; display:flex; flex-direction:column; justify-content:space-between; height:100vh; position:relative; z-index:2;} .d48_2 .text {} .d48_2 .text h2 {font-size:2.75rem;} .d48_2 .text h2 sup {font-size:1rem;} .d48_2 .text p {font-size:1.375rem;} .d48_2 .img {} .d48_2 .img ul {display:flex; flex-wrap:wrap; justify-content:center;} .d48_2 .img ul li {width:50%; color:#CCCCCC;} .d48_2 .img ul li .l_icon {display:block; margin:auto; width:3rem; height:3rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d48_2 .img ul li h4 {margin:0.625rem auto 1.25rem; font-size:1.125rem;} .d48_2 .img ul li dl {display:flex; justify-content:space-between; padding-top:1.25rem; position:relative;} .d48_2 .img ul li dl::after {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:90%; height:1px; background:#969696} .d48_2 .img ul li dl dd {flex:1; margin:0 0.125rem;} .d48_2 .img ul li dl dd .d_icon {display:block; margin:auto; width:2.5rem; height:2.5rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d48_2 .img ul li dl dd p {font-size:1rem; line-height:1.2; margin-top:0.625rem;} .d48_2 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} /**/ .d48_3 {color:#FFFFFF; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)); overflow:hidden;} .d48_3 .slide_box {padding:9.375rem 0 0;} .d48_3 .topic {width:80%; margin:0 auto 4.5rem;} .d48_3 .topic h2 {font-size:2.75rem;} .d48_3 .topic p {font-size:1.375rem; margin-top:1.25rem;} .d48_3 .pin {display:flex; justify-content:center; align-items:center; flex-direction:column; flex-wrap:wrap;} .d48_3 .t_l_s {width:100%;} .d48_3 .t_l_s .text {width:60%; margin:auto;} .d48_3 .t_l_s .text h3 {font-size:2.25rem;} .d48_3 .t_l_s .text p {font-size:1.125rem; margin-top:1.25rem;} .d48_3 .t_l_s .list {margin:6.25rem auto 0; position:relative; width:60rem; height:15rem;} .d48_3 .t_l_s .list .box {visibility:hidden; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%;} .d48_3 .t_l_s .list .box.active {visibility:visible; opacity:1;} .d48_3 .t_l_s .list .box .swiper-container {padding:0; height:100%; overflow:visible;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide {display:flex; align-items:center;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide .img_box {padding-top:100%; position:relative; background:transparent; opacity:0; transform:scale(0.5);} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide .img_box span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-prev-3 .img_box {opacity:0; transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-prev-2 .img_box {opacity:0.1; transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-prev .img_box {opacity:0.5; transform:translateX(-10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-active .img_box {opacity:1; transform:translateX(0%) translateY(-30%) scale(1); transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-next .img_box {opacity:0.5; transform:translateX(10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-next-2 .img_box {opacity:0.1; transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-slide-next-3 .img_box {opacity:0; transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-button-prev, .d48_3 .t_l_s .list .box .swiper-container .swiper-button-next {opacity:0.5; width:4.5rem; height:4.5rem; background-position:center center; background-repeat:no-repeat; background-size:50% auto; transition:all 0.3s;} .d48_3 .t_l_s .list .box .swiper-container .swiper-button-prev {left:-10%; background-image:url("../images/p48/003_swiper_button_prev.svg");} .d48_3 .t_l_s .list .box .swiper-container .swiper-button-next {right:-10%; background-image:url("../images/p48/003_swiper_button_next.svg");} .d48_3 .t_l_s .list .box .swiper-container .swiper-button-prev:hover, .d48_3 .t_l_s .list .box .swiper-container .swiper-button-next:hover {opacity:1; background-color:transparent;} .d48_3 .t_l_s .s_tab {display:flex; justify-content:space-between; max-width:60rem; margin:auto;} .d48_3 .t_l_s .s_tab span {flex:1; margin:0 0.3125rem; cursor:pointer; position:relative;} .d48_3 .t_l_s .s_tab span em {display:block; font-style:normal; font-size:0.875rem; color:rgba(255, 255, 255, 0.5); width:100%; height:100%; padding:1rem; border-top:2px solid rgba(255, 255, 255, 0.2); transition:all 0.3s;} .d48_3 .t_l_s .s_tab span b {width:0; height:2px; position:absolute; left:50%; top:0; transform:translateX(-50%); background:rgba(0, 159, 168, 1); transition:all 0.3s;} .d48_3 .t_l_s .s_tab span:hover em {color:rgba(255, 255, 255, 0.8);} .d48_3 .t_l_s .s_tab span.active em {color:rgba(0, 159, 168, 1);} .d48_3 .t_l_s .s_tab span.active b {width:100%;} .d48_3 .scale_box {padding:6.25rem 0 0;} .d48_3 .scale_box .title {width:60%; margin:0 auto 2.5rem;} .d48_3 .scale_box .title h3 {font-size:2.5rem;} .d48_3 .scale_box .title p {font-size:1.125rem; margin-top:1.25rem;} .d48_3 .scale_box ul {display:flex; flex-direction:column; overflow:hidden;} .d48_3 .scale_box ul li {opacity:0.5; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(89, 86, 86, 1)); overflow:hidden; transition:all 1s;} .d48_3 .scale_box ul li .cell {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; max-width:70rem; margin:auto;} .d48_3 .scale_box ul li .cover {width:60%; padding:0 4.5rem; transition:all 1s;} .d48_3 .scale_box ul li .cover span {display:block; width:100%; transform:translateY(4.5rem) scale(0.8); padding-top:75%; border-radius:1.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 1s;} .d48_3 .scale_box ul li .text {width:40%; padding:4.5rem 0; text-align:left;} .d48_3 .scale_box ul li .text h3 {font-size:1.875rem;} .d48_3 .scale_box ul li .text p {font-size:1.125rem; margin-top:1.25rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d48_3 .scale_box ul li.active {opacity:1; background:linear-gradient(180deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0.8));} .d48_3 .scale_box ul li.active .cover {padding:4.5rem;} .d48_3 .scale_box ul li.active .cover span {width:100%; margin:auto; transform:translateY(0) scale(1);} .d48_3 .scale_box ul li.active .text p {-webkit-line-clamp:10;} /**/ .d48_4 {padding:9.375rem 0; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.6));} .d48_4 .main {height:calc(100vh - 4.375rem); display:flex; justify-content:center; align-items:center; flex-direction:column; flex-wrap:wrap; } .d48_4 .main.reset_vertical {height:auto;} .d48_4 .pin {width:100%;} .d48_4 .topic {color:#FFFFFF;} .d48_4 .topic h2 {font-size:2.75rem;} .d48_4 .topic p {font-size:1.375rem; max-width:80rem; width:100%; margin:1.25rem auto 0;} .d48_4 .sc_slider_col {display:flex; justify-content:center; align-items:center; margin-top:3.75rem;} .d48_4 .sc_slider_col .film {width:40%; position:relative;} .d48_4 .sc_slider_col .film::after {content:''; position:absolute; left:50%; top:50%; transform:translateX(-100%) translateY(-50%); width:100%; height:120%; border-radius:100%; background-image:radial-gradient(circle at 150%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 60%);} .d48_4 .sc_slider_col .film .machine {display:block; width:100%; height:100%; position:absolute; z-index:1; left:0; top:50%; transform:translateY(-50%);} .d48_4 .sc_slider_col .film .machine p {display:block; position:absolute; z-index:1; left:0; top:50%; transform:translateY(-50%); width:6.25rem; height:6.25rem; background:url("../images/p48/004_probe.svg") no-repeat scroll center center / 100% auto; background-size:100% auto;} .d48_4 .sc_slider_col .film .machine p span {display:none; position:absolute; border-radius:100%; background:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));} .d48_4 .sc_slider_col .film .machine p span:nth-child(1) {width:3.75rem; height:3.75rem; left:-16.5%; top:-9.5%;} .d48_4 .sc_slider_col .film .machine p span:nth-child(2) {width:2.75rem; height:2.75rem; right:0.5%; top:-10.5%;} .d48_4 .sc_slider_col .film .machine p strong {display:none; width:1.5rem; height:1.5rem; cursor:pointer; position:absolute; right:30%; bottom:32%; background-image:url("../images/p48/004_camera_play.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d48_4 .sc_slider_col .film .machine p strong.pause {background-image:url("../images/p48/004_camera_pause.svg");} .d48_4 .sc_slider_col .film .machine p strong:hover {opacity:0.5;} .d48_4 .sc_slider_col .film .machine p span em {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:65%; height:65%; opacity:0.2; background:url("../images/p48/004_camera_co.svg") no-repeat scroll center center / 100% auto; background-size:100% auto; animation:d48_3_camera 4s linear; animation-iteration-count:infinite; animation-play-state:paused;} @keyframes d48_3_camera { 0% { transform:translateX(-50%) translateY(-50%) rotate(0deg); } 100% { transform:translateX(-50%) translateY(-50%) rotate(360deg); } } .d48_4 .sc_slider_col .film .machine i {display:block; position:absolute; left:6.25rem; top:50%; transform:translateY(-50%); width:calc(100% - 6.25rem); height:72%; background:url("../images/p48/004_probe_wave.svg") no-repeat scroll center center / 100% auto; background-size:100% auto;} .d48_4 .sc_slider_col .film .tab {height:30rem; position:relative; z-index:1; overflow:hidden;} .d48_4 .sc_slider_col .film .tab .box {--w:9rem;/*继承宽度*/ width:100%; display:flex; flex-direction:column; justify-content:flex-end; transform:translateY(calc(50%));} .d48_4 .sc_slider_col .film .tab span[data-index='0'] i {background-image:url('../images/p48/004_tape_s_1.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='1'] i {background-image:url('../images/p48/004_tape_s_2.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='2'] i {background-image:url('../images/p48/004_tape_s_3.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='3'] i {background-image:url('../images/p48/004_tape_s_4.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='4'] i {background-image:url('../images/p48/004_tape_s_5.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='5'] i {background-image:url('../images/p48/004_tape_s_6.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='6'] i {background-image:url('../images/p48/004_tape_s_7.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='7'] i {background-image:url('../images/p48/004_tape_s_8.svg');} .d48_4 .sc_slider_col .film .tab span[data-index='8'] i {background-image:url('../images/p48/004_tape_s_9.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='0'] i {background-image:url('../images/p48/004_tape_s_1_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='1'] i {background-image:url('../images/p48/004_tape_s_2_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='2'] i {background-image:url('../images/p48/004_tape_s_3_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='3'] i {background-image:url('../images/p48/004_tape_s_4_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='4'] i {background-image:url('../images/p48/004_tape_s_5_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='5'] i {background-image:url('../images/p48/004_tape_s_6_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='6'] i {background-image:url('../images/p48/004_tape_s_7_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='7'] i {background-image:url('../images/p48/004_tape_s_8_active.svg');} .d48_4 .sc_slider_col .film .tab span.active[data-index='8'] i {background-image:url('../images/p48/004_tape_s_9_active.svg');} .d48_4 .sc_slider_col .film .tab span {width:calc(var(--w)); height:calc(var(--w)*0.66); margin:auto; position:relative; background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:100%; transition:all 0.3s;} .d48_4 .sc_slider_col .film .tab span i {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:calc(var(--w)*0.6); height:calc(var(--w)*0.6); border-radius:100%; cursor:pointer; background-color:#333333; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d48_4 .sc_slider_col .film .tab span em {position:absolute; left:100%; top:50%; transform:translateY(-50%); width:9.375rem; text-align:left; font-size:1rem; font-style:normal; color:#999999;} .d48_4 .sc_slider_col .film .tab span.p_1, .d48_4 .sc_slider_col .film .tab span.p_2, .d48_4 .sc_slider_col .film .tab span.p_3, .d48_4 .sc_slider_col .film .tab span.n_1, .d48_4 .sc_slider_col .film .tab span.n_2, .d48_4 .sc_slider_col .film .tab span.n_3 {} .d48_4 .sc_slider_col .film .tab span.p_1 {transform:translateX(-15%) scale(0.8);} .d48_4 .sc_slider_col .film .tab span.p_2 {transform:translateX(-40%) translateY(20%) scale(0.6);} .d48_4 .sc_slider_col .film .tab span.p_3 {transform:translateX(-70%) translateY(70%) scale(0.4);} .d48_4 .sc_slider_col .film .tab span.p_4 {transform:translateX(-60%) translateY(120%) scale(0.2);} .d48_4 .sc_slider_col .film .tab span.hover i {background-color:#666666;} .d48_4 .sc_slider_col .film .tab span.active {} .d48_4 .sc_slider_col .film .tab span.active i{background-color:#FFFFFF;} .d48_4 .sc_slider_col .film .tab span.active em {color:#FFFFFF;} .d48_4 .sc_slider_col .film .tab span.n_1 {transform:translateX(-15%) scale(0.8);} .d48_4 .sc_slider_col .film .tab span.n_2 {transform:translateX(-40%) translateY(-20%) scale(0.6);} .d48_4 .sc_slider_col .film .tab span.n_3 {transform:translateX(-70%) translateY(-70%) scale(0.4);} .d48_4 .sc_slider_col .film .tab span.n_4 {transform:translateX(-60%) translateY(-120%) scale(0.2);} .d48_4 .sc_slider_col section {width:60%; position:relative;} .d48_4 .sc_slider_col section .s_con {visibility:hidden; opacity:0;} .d48_4 .sc_slider_col section .s_con:not(:first-child) {position:absolute; left:0; top:0; width:100%; height:100%;} .d48_4 .sc_slider_col section .s_con .thumbs {display:none; width:55%; height:20%; margin:0; padding:0;} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide {display:flex; flex-direction:column; cursor:pointer; opacity:0.5; transition:all 0.3s;} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide .text {text-align:left; margin:0 0 0.3125rem;} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide .text p {font-size:0.75rem; color:#FFFFFF; white-space:nowrap; border-bottom:0.125rem solid rgba(255, 255, 255, 0.3);} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide .img_box {margin-top:0.3125rem;} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide .img_box img {display:block; width:100%;} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide-thumb-active {opacity:1;} .d48_4 .sc_slider_col section .s_con .thumbs .swiper-slide-thumb-active .text p {border-color:#C0845D;} .d48_4 .sc_slider_col section .s_con .gallery {width:100%; height:100%; padding:0; overflow:visible;} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide {display:flex;} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide .img_box {width:55%; padding-top:41.25%; z-index:1;} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide .img_box img {margin:0; padding:0; position:absolute; left:0; top:0; width:100%; height:auto;} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide .text {width:45%; margin:0; padding:0 2.5rem; display:flex; align-items:center; word-wrap:anywhere; text-align:left; color:#FFFFFF; background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide .text p {font-size:1rem;} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide-active {position:relative;} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide-active::before {content:""; position:absolute; left:1.25rem; top:-2.5rem; width:calc(55%); height:calc(100%); background:rgba(255, 255, 255, 0.05);} .d48_4 .sc_slider_col section .s_con .gallery .swiper-slide-active::after {content:""; position:absolute; left:2.5rem; top:-4.5rem; width:calc(55%); height:calc(100%); background:rgba(255, 255, 255, 0.01);} .d48_4 .sc_slider_col section .s_con.show {visibility:visible; opacity:1;} .d48_4 .scroll_arrow {display:block; width:2.5rem; height:2.5rem; cursor:pointer; margin:auto; background:url("../images/p48/arrow.svg") no-repeat scroll center center / 100% auto; background-size:cover; animation:d48_4_scroll_arrow 2s ease-out both; animation-iteration-count:infinite;} @keyframes d48_4_scroll_arrow { 0%, 100% { opacity:0.5; } 50% { opacity:1; } } /**/ .d48_5 {padding:9.375rem 0; position:relative; z-index:auto; background:url("../images/p48/005_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d48_5::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.1);} .d48_5 .main {position:relative; z-index:1;} .d48_5 .topic {text-align:center;} .d48_5 .topic h2 {font-size:2.75rem;} .d48_5 .topic p {font-size:1.375rem; max-width:80rem; width:100%; margin:1.25rem auto 0;} .d48_5 .sector {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:4.5rem auto 10rem; position:relative;} .d48_5 .sector .c_l {position:relative;} .d48_5 .sector .c_l .disabled_area {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:60%; height:60%; border-radius:100%; background:transparent;} .d48_5 .sector .c_l .pie {width:36rem; height:36rem; position:relative;} .d48_5 .sector .c_l .pie p {display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border-radius:100%; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.2) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg); transition:all 0.3s;} .d48_5 .sector .c_l .pie p em {display:block; margin-bottom:28rem; font-size:1rem; font-style:normal;} .d48_5 .sector .c_l .pie p:nth-child(1) {z-index:1; transform:translateX(-50%) translateY(-50%) rotate(90deg);} .d48_5 .sector .c_l .pie p:nth-child(2) {z-index:2; transform:translateX(-50%) translateY(-50%) rotate(30deg);} .d48_5 .sector .c_l .pie p:nth-child(3) {z-index:3; transform:translateX(-50%) translateY(-50%) rotate(-30deg);} .d48_5 .sector .c_l .pie p:nth-child(4) {z-index:4; transform:translateX(-50%) translateY(-50%) rotate(-90deg);} .d48_5 .sector .c_l .pie p:nth-child(5) {z-index:5; transform:translateX(-50%) translateY(-50%) rotate(-150deg);} .d48_5 .sector .c_l .pie p:nth-child(6) {z-index:6; transform:translateX(-50%) translateY(-50%) rotate(-210deg);} .d48_5 .sector .c_l .pie p:nth-child(2), .d48_5 .sector .c_l .pie p:nth-child(4), .d48_5 .sector .c_l .pie p:nth-child(6) {width:90%; height:90%;} .d48_5 .sector .c_l .pie p:nth-child(2) em, .d48_5 .sector .c_l .pie p:nth-child(4) em, .d48_5 .sector .c_l .pie p:nth-child(6) em {margin-bottom:27rem;} .d48_5 .sector .c_l .pie p:nth-child(7) em, .d48_5 .sector .c_l .pie p:nth-child(8) em, .d48_5 .sector .c_l .pie p:nth-child(9) em {margin-bottom:16.5rem;} .d48_5 .sector .c_l .pie p:nth-child(7) {z-index:7; transform:translateX(-50%) translateY(-50%) rotate(70deg); width:60%; height:60%; background:conic-gradient(from -60deg, #B8C3C1 0deg , #B8C3C1 120deg, transparent 0deg);} .d48_5 .sector .c_l .pie p:nth-child(7)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d48_5 .sector .c_l .pie p:nth-child(8) {z-index:8; transform:translateX(-50%) translateY(-50%) rotate(190deg); width:60%; height:60%; background:conic-gradient(from -60deg, #ABA9B9 0deg , #ABA9B9 120deg, transparent 0deg);} .d48_5 .sector .c_l .pie p:nth-child(8)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:85.6%; background:#CCCCCC;} .d48_5 .sector .c_l .pie p:nth-child(9) {z-index:9; transform:translateX(-50%) translateY(-50%) rotate(310deg); width:60%; height:60%; background:conic-gradient(from -60deg, #A3B1B5 0deg , #A3B1B5 120deg, transparent 0deg);} .d48_5 .sector .c_l .pie p:nth-child(9)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d48_5 .sector .c_l .pie p:nth-child(10) {display:flex; justify-content:center; align-items:center; transform:translateX(-50%) translateY(-50%) rotate(-5deg); z-index:11; width:35%; height:35%; border:0.1875rem solid #CCCCCC; background:#009FA8;} .d48_5 .sector .c_l .pie p:nth-child(10)::before {display:none;} .d48_5 .sector .c_l .pie p:nth-child(10) strong {font-size:1.375rem; color:#FFFFFF; line-height:1.2; text-transform:uppercase; margin-bottom:0.625rem; padding:0 2.5rem;} .d48_5 .sector .c_l .pie p:nth-child(10) strong i {display:block; margin:0 auto 0.625rem; width:3rem; height:3rem; background:url("../images/p48/005_wa_icon.png") no-repeat scroll center center / 100% auto; background-size:cover;} .d48_5 .sector .c_l .pie p.hover {color:#459DA6;} .d48_5 .sector .c_l .pie p.active .ripple {display:none;} .d48_5 .sector .c_l .pie p.active {color:#459DA6; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.8) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg)} .d48_5 .sector .c_l .pie.r789 p:nth-child(7) {transform:translateX(-50%) translateY(-50%) rotate(60deg); transition:all 2s;} .d48_5 .sector .c_l .pie.r789 p:nth-child(8) {transform:translateX(-50%) translateY(-50%) rotate(180deg); transition:all 2s;} .d48_5 .sector .c_l .pie.r789 p:nth-child(9) {transform:translateX(-50%) translateY(-50%) rotate(300deg); transition:all 2s;} .d48_5 .sector .c_l .pie.r789 p:nth-child(10) {transform:translateX(-50%) translateY(-50%) rotate(0deg); transition:all 1s;} .d48_5 .sector .c_l .pie p .ripple {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#459DA6; animation:d48_5_ripple 2s ease-out both; animation-iteration-count:infinite;} @keyframes d48_5_ripple { 0%{ transform:translateX(-50%) scale(0.5); } 50% { transform:translateX(-50%) scale(1); opacity:0.1; } 100% { transform:translateX(-50%) scale(0.5); } } .d48_5 .sector .c_l .pie p:nth-child(2) .ripple, .d48_5 .sector .c_l .pie p:nth-child(4) .ripple, .d48_5 .sector .c_l .pie p:nth-child(6) .ripple {width:0.3125rem; height:0.3125rem; top:5%;} .d48_5 .sector .c_l .pie p .ripple_hit {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%;} .d48_5 .sector .c_l .pie p:nth-child(2) .ripple_hit, .d48_5 .sector .c_l .pie p:nth-child(4) .ripple_hit, .d48_5 .sector .c_l .pie p:nth-child(6) .ripple_hit {width:0.3125rem; height:0.3125rem; top:5%;} .d48_5 .sector .c_l .pie p .ripple_hit i {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border:1px solid rgba(255, 255, 255, 1.0); border-radius:100%;} .d48_5 .sector .c_l .pie p .ripple_hit i:nth-child(1) {opacity:1.0; width:calc(100% + 0.0rem); height:calc(100% + 0.0rem); animation:d48_5_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d48_5 .sector .c_l .pie p .ripple_hit i:nth-child(2) {opacity:0.8; width:calc(100% + 0.8rem); height:calc(100% + 0.8rem); animation:d48_5_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d48_5 .sector .c_l .pie p .ripple_hit i:nth-child(3) {opacity:0.6; width:calc(100% + 1.6rem); height:calc(100% + 1.6rem); animation:d48_5_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} @keyframes d48_5_ripple_hit { 0% { } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } .d48_5 .sector .c_l .pie_hit_zone {position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:100%;} .d48_5 .sector .c_l .pie_hit_zone span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; border-radius:100%; clip-path:polygon(20% 0%, 80% 0%, 50% 50%);} .d48_5 .sector .c_l .pie_hit_zone span:nth-child(1) {transform:rotate(90deg);} .d48_5 .sector .c_l .pie_hit_zone span:nth-child(2) {transform:rotate(30deg);} .d48_5 .sector .c_l .pie_hit_zone span:nth-child(3) {transform:rotate(-30deg);} .d48_5 .sector .c_l .pie_hit_zone span:nth-child(4) {transform:rotate(-90deg);} .d48_5 .sector .c_l .pie_hit_zone span:nth-child(5) {transform:rotate(-150deg);} .d48_5 .sector .c_l .pie_hit_zone span:nth-child(6) {transform:rotate(-210deg);} .d48_5 .sector .c_r {position:absolute; right:0; top:10%; width:20rem;} .d48_5 .sector .c_r .img {width:100%; height:10rem; background:red;} .d48_5 .sector .c_r .text {display:none; position:absolute; left:0; top:0; width:100%; color:#009FAB;} .d48_5 .sector .c_r .text:nth-child(1) {display:block;} .d48_5 .sector .c_r .text h3 {display:inline-block; margin-bottom:0.625rem; position:relative; font-size:1.375rem;} .d48_5 .sector .c_r .text h3 .v_icon {display:block; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); cursor:pointer; width:2rem; height:2rem; border-radius:100%; border:1px solid #459DA6; background:url("../images/p48/play_icon.svg") no-repeat scroll 60% center / 40% auto;} .d48_5 .sector .c_r .text p {font-size:0.875rem; word-break:break-all;} .d48_5 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.9);} .d48_5 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d48_5 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d48_5 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#333333; border-radius:100%; transition:opacity 0.3s;} .d48_5 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d48_5 .lightbox .close i::before, .d48_5 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d48_5 .lightbox .close i::before {width:0.125rem; height:40%;} .d48_5 .lightbox .close i::after {width:40%; height:0.125rem;} .d48_5 .lightbox .close:hover i {opacity:1;} /**/ .d48_6 {position:relative; background:rgba(0, 0, 0, 1.0);} .d48_6 .main {} .d48_6 ul {width:100%; height:calc(100vh - 4.375rem); position:relative;} .d48_6 ul li {opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d48_6 ul li:first-child {opacity:1;} .d48_6 ul li .cell {width:100%; height:100%; position:relative;} .d48_6 ul li p {opacity:0; position:absolute; font-size:2.75rem; color:#FFFFFF; transition:all 0.3s;} .d48_6 ul li:nth-child(1) p {right:12%; top:35%;} .d48_6 ul li:nth-child(2) p {left:25%; top:35%;} .d48_6 ul li:nth-child(3) p {right:10%; bottom:15%;} .d48_6 ul li:nth-child(4) p {left:10%; top:10%;} .d48_6 ul li:nth-child(5) p {left:10%; top:10%;} /* 动态复制后应用第四屏的样式 */ .d48_6 ul li span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d48_6 ul li.active {opacity:1;} .d48_6 ul li.active p {opacity:1; transform:translateY(-10px); transition-delay:0.3s;} .d48_6 .pagination {display:flex; justify-content:center; position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);} .d48_6 .pagination span {display:block; margin:0 0.3125rem; width:0.615rem; height:0.615rem; border-radius:100%; border:1px solid rgba(255, 255, 255, 1.0); background:transparent; transition:all 0.3s;} .d48_6 .pagination span.active {background:#009fa8;} /**/ .d48_7 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d48_7 h2 {font-size:2.75rem; color:#FFFFFF; text-align:center;} .d48_7 .swiper-container {padding:4rem 0;} .d48_7 .swiper-container .swiper-slide .img_box {padding-top:75%; overflow:hidden;} .d48_7 .swiper-container .swiper-slide .img_box img {display:block; position:absolute; left:0; top:0; width:100%; height:auto;} .d48_7 .swiper-container .swiper-slide .video {position:relative;} .d48_7 .swiper-container .swiper-slide .video .v_icon {display:block; position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); cursor:pointer; width:2.5rem; height:2.5rem; border-radius:100%; border:1px solid #FFFFFF; background:#000000 url("../images/p47/play_icon_white.svg") no-repeat scroll 60% center / 40% auto; transition:all 0.3s;} .d48_7 .swiper-container .swiper-slide .video .v_icon:hover {background-color:rgba(0, 159, 168, 1);} .d48_7 .swiper-container .swiper-slide .video .a_icon {display:block; cursor:pointer; position:absolute; z-index:13; right:1.25rem; bottom:1.25rem; width:2.5rem; height:2.5rem;} .d48_7 .swiper-container .swiper-slide .video .a_icon i {display:block; position:absolute; width:60%; height:60%; background:rgba(255, 255,255, 0.3); border-radius:100%; transition:all 0.3s;} .d48_7 .swiper-container .swiper-slide .video .a_icon i::before, .d48_7 .swiper-container .swiper-slide .video .a_icon i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#000000;} .d48_7 .swiper-container .swiper-slide .video .a_icon i::before {width:0.125rem; height:40%;} .d48_7 .swiper-container .swiper-slide .video .a_icon i::after {width:40%; height:0.125rem;} .d48_7 .swiper-container .swiper-slide .video .a_icon:hover i {background:rgba(0, 159, 168, 1);} .d48_7 .swiper-container .swiper-slide .img_box video {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:auto;} .d48_7 .swiper-container .swiper-pagination {bottom:0;} .d48_7 .swiper-container .swiper-pagination .swiper-pagination-bullet {transition:all 0.3s;} .d48_7 .swiper-container .swiper-pagination .swiper-pagination-bullet-active {background:rgba(0, 159, 168, 1);} .d48_7 .swiper-container .swiper-button-prev, .d48_7 .swiper-container .swiper-button-next {opacity:0.8; width:2.5rem; height:2.5rem; border-radius:0.3125rem; background:linear-gradient(180deg, rgba(0, 159, 168, 0.6), rgba(0, 159, 168, 0.3)); transition:all 0.3s;} .d48_7 .swiper-container .swiper-button-prev i, .d48_7 .swiper-container .swiper-button-next i {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d48_7 .swiper-container .swiper-button-prev i {background-image:url("../images/p48/prev.svg");} .d48_7 .swiper-container .swiper-button-next i {background-image:url("../images/p48/next.svg");} .d48_7 .swiper-container .swiper-button-prev:hover, .d48_7 .swiper-container .swiper-button-next:hover {opacity:1;} .d48_7 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100vh; background:#333333;} .d48_7 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d48_7 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d48_7 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#000000; border-radius:100%; transition:opacity 0.3s;} .d48_7 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d48_7 .lightbox .close i::before, .d48_7 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d48_7 .lightbox .close i::before {width:0.125rem; height:40%;} .d48_7 .lightbox .close i::after {width:40%; height:0.125rem;} .d48_7 .lightbox .close:hover i {opacity:1;} /**/ .d48_side_nav {visibility:hidden; opacity:0; position:fixed; z-index:22; right:0; top:50%; transform:translateY(-50%); width:6.25rem; display:flex; flex-direction:column; transition:all 0.3s;} .d48_side_nav.show {visibility:visible; opacity:1;} .d48_side_nav.hide {visibility:hidden; opacity:0;} .d48_side_nav a {width:100%; height:3.75rem; margin-top:1px; cursor:pointer; background-color:#666666; transition:all 0.3s;} .d48_side_nav a i {display:block; opacity:0.5; position:static; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d48_side_nav a:nth-child(1) i {background-image:url("../images/p48/side_nav_icon_1.png");} .d48_side_nav a:nth-child(2) i {background-image:url("../images/p48/side_nav_icon_2.png");} .d48_side_nav a:nth-child(3) i {background-image:url("../images/p48/side_nav_icon_3.png");} .d48_side_nav a:nth-child(4) i {background-image:url("../images/p48/side_nav_icon_4.png");} .d48_side_nav a:nth-child(5) i {background-image:url("../images/p48/side_nav_icon_5.png");} .d48_side_nav a:hover {background-color:#009fa8;} .d48_side_nav a:hover i {opacity:1;} .d48_side_nav a.active {background-color:#009fa8;} .d48_side_nav a.active i {opacity:1;} /****************************************/ /* products: S80 */ /****************************************/ /**/ .sel_products_detail_49 {} .sel_products_detail_49 img {display:block; width:100%;} .sel_products_detail_49 .anchor {top:-4.375rem;} /**/ .d49_1 {position:relative; color:#FFFFFF; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d49_1 .wrap {background:#000000 url("../images/p49/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d49_1 .main {height:calc(100vh - 6.25rem); padding:9.375rem 0; position:relative; z-index:1;} .d49_1 .shead {position:relative; z-index:1;} .d49_1 .shead .model {display:block; width:6rem; height:2.5rem; margin-bottom:1.25rem; padding:0 1rem 0.125rem 1rem; background:linear-gradient(180deg, rgba(62, 143, 152, 1), rgba(25, 61, 76, 1)); border-radius:0.3125rem;} .d49_1 .shead .model i {display:block; position:static; width:100%; height:100%; background:url("../images/p49/001_model.png") no-repeat scroll center center / 100% auto;} .d49_1 .shead h1 {font-size:4.5rem;} .d49_1 .shead h2 {font-size:2.5rem;} .d49_1 .shead p {margin-top:1.5rem; font-size:1.25rem; color:rgba(255, 255, 255, 0.8); line-height:1.3;} .d49_1 .cssnow {width:100%; height:100%; pointer-events:none; position:absolute; z-index:1; left:0; bottom:0;} .d49_1 .cssnow span {display:block; background:#3A8BD0; border-radius:100%; width:0.3125rem; height:0.3125rem; rotate:35deg; filter:blur(0px); position:absolute; top:150%; z-index:9999; animation-name:cssnowflakes-fall, cssnowflakes-shake; animation-duration:10s, 3s; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite, infinite; animation-play-state:running, running;} @keyframes cssnowflakes-fall { 0% { top:-10%; } 100% { top:100%; } } @keyframes cssnowflakes-shake { 0% { transform:translateX(0px); } 50% { transform:translateX(5rem); } 100% { transform:translateX(0px); } } .d49_1 .cssnow span:nth-child(1) {left:1%; animation-delay:0s, 0s;} .d49_1 .cssnow span:nth-child(1) {left:10%; animation-delay:1s, 1s; scale:1.5;} .d49_1 .cssnow span:nth-child(2) {left:20%; animation-delay:6s, 0.5s;} .d49_1 .cssnow span:nth-child(3) {left:30%; animation-delay:4s, 2s;} .d49_1 .cssnow span:nth-child(4) {left:40%; animation-delay:2s, 2s;} .d49_1 .cssnow span:nth-child(5) {left:50%; animation-delay:8s, 3s; scale:2;} .d49_1 .cssnow span:nth-child(6) {left:60%; animation-delay:6s, 2s; scale:1.25; filter:blur(1.25rem);} .d49_1 .cssnow span:nth-child(7) {left:70%; animation-delay:2.5s, 1s;} .d49_1 .cssnow span:nth-child(8) {left:80%; animation-delay:1s, 0s;} .d49_1 .cssnow span:nth-child(9) {left:90%; animation-delay:3s, 1.5s;} .d49_1 .intro {padding:6.25rem 0; position:relative; z-index:1; background:linear-gradient(180deg, rgba(5, 5, 5, 1) 80%, rgba(42, 100, 101, 1)); overflow:hidden;} .d49_1 .intro p {position:relative; z-index:2; width:80%; margin:auto; font-size:1.375rem; text-align:center;} .d49_1 .intro p sup {font-size:0.625rem;} /**/ .d49_2 {color:#FFFFFF; text-align:center; background:#000000 url("../images/p49/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d49_2 .wrap {position:relative;} .d49_2 .wrap::before {content:""; position:absolute; z-index:1; left:0; top:0; width:100%; height:50%; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .d49_2 .wrap::after {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));} .d49_2 .main {padding:9.375rem 0 4.5rem; display:flex; flex-direction:column; justify-content:space-between; height:100vh; position:relative; z-index:2;} .d49_2 .text {} .d49_2 .text h2 {font-size:2.75rem;} .d49_2 .text h2 sup {font-size:1rem;} .d49_2 .text p {font-size:1.375rem;} .d49_2 .img {} .d49_2 .img ul {display:flex; flex-wrap:wrap; justify-content:center;} .d49_2 .img ul li {width:50%; color:#CCCCCC;} .d49_2 .img ul li .l_icon {display:block; margin:auto; width:3rem; height:3rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d49_2 .img ul li h4 {margin:0.625rem auto 1.25rem; font-size:1.125rem;} .d49_2 .img ul li dl {display:flex; justify-content:space-between; padding-top:1.25rem; position:relative;} .d49_2 .img ul li dl::after {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:90%; height:1px; background:#969696} .d49_2 .img ul li dl dd {flex:1; margin:0 0.125rem;} .d49_2 .img ul li dl dd .d_icon {display:block; margin:auto; width:2.5rem; height:2.5rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d49_2 .img ul li dl dd p {font-size:1rem; line-height:1.2; margin-top:0.625rem;} .d49_2 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} /**/ .d49_3 {padding:9.375rem 0; color:#FFFFFF; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5));} .d49_3 .main {} .d49_3 .topic {} .d49_3 .topic .text {width:80%; margin:auto;} .d49_3 .topic .text h2 {font-size:2.25rem;} .d49_3 .topic .text p {font-size:1.125rem; margin-top:1.25rem;} .d49_3 .topic .slider {margin:1.25rem auto 0; width:80%;} .d49_3 .topic .slider .s_tab {display:flex; justify-content:center; flex-wrap:wrap; margin:0 -0.3125rem;} .d49_3 .topic .slider .s_tab span {display:block; flex:1; cursor:pointer; padding:0 0.3125rem;} .d49_3 .topic .slider .s_tab span em {display:block; font-style:normal; font-size:1rem; color:rgba(255, 255, 255, 1); padding:1rem 0.3125rem; border-bottom:0.25rem solid rgba(255, 255, 255, 0.2);} .d49_3 .topic .slider .s_tab span.active em {color:#459DA6; border-color:#459DA6;} .d49_3 .topic .slider ul {margin-top:1.25rem; position:relative;} .d49_3 .topic .slider ul li {display:none;} .d49_3 .topic .slider ul li.active {display:block;} .d49_3 .topic .slider ul li .cell {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:2.5rem 4.5rem; background:linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));} .d49_3 .topic .slider ul li .cover {width:50%;} .d49_3 .topic .slider ul li span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d49_3 .topic .slider ul li p {width:50%; padding:0 0 0 2.5rem; font-size:1.125rem; text-align:left;} /**/ .d49_4 {padding:9.375rem 0; position:relative; z-index:auto; background:url("../images/p49/004_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d49_4::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.1);} .d49_4 .main {position:relative; z-index:1;} .d49_4 .topic {text-align:center;} .d49_4 .topic h2 {font-size:2.75rem;} .d49_4 .topic p {font-size:1.375rem; max-width:80rem; width:100%; margin:1.25rem auto 0;} .d49_4 .sector {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:4.5rem auto 10rem; position:relative;} .d49_4 .sector .c_l {position:relative;} .d49_4 .sector .c_l .disabled_area {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:60%; height:60%; border-radius:100%; background:transparent;} .d49_4 .sector .c_l .pie {width:36rem; height:36rem; position:relative;} .d49_4 .sector .c_l .pie p {display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border-radius:100%; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.2) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg); transition:all 0.3s;} .d49_4 .sector .c_l .pie p em {display:block; margin-bottom:28rem; font-size:1rem; font-style:normal;} .d49_4 .sector .c_l .pie p:nth-child(1) {z-index:1; transform:translateX(-50%) translateY(-50%) rotate(90deg);} .d49_4 .sector .c_l .pie p:nth-child(2) {z-index:2; transform:translateX(-50%) translateY(-50%) rotate(30deg);} .d49_4 .sector .c_l .pie p:nth-child(3) {z-index:3; transform:translateX(-50%) translateY(-50%) rotate(-30deg);} .d49_4 .sector .c_l .pie p:nth-child(4) {z-index:4; transform:translateX(-50%) translateY(-50%) rotate(-90deg);} .d49_4 .sector .c_l .pie p:nth-child(5) {z-index:5; transform:translateX(-50%) translateY(-50%) rotate(-150deg);} .d49_4 .sector .c_l .pie p:nth-child(6) {z-index:6; transform:translateX(-50%) translateY(-50%) rotate(-210deg);} .d49_4 .sector .c_l .pie p:nth-child(2), .d49_4 .sector .c_l .pie p:nth-child(4), .d49_4 .sector .c_l .pie p:nth-child(6) {width:90%; height:90%;} .d49_4 .sector .c_l .pie p:nth-child(2) em, .d49_4 .sector .c_l .pie p:nth-child(4) em, .d49_4 .sector .c_l .pie p:nth-child(6) em {margin-bottom:27rem;} .d49_4 .sector .c_l .pie p:nth-child(7) em, .d49_4 .sector .c_l .pie p:nth-child(8) em, .d49_4 .sector .c_l .pie p:nth-child(9) em {margin-bottom:16.5rem;} .d49_4 .sector .c_l .pie p:nth-child(7) {z-index:7; transform:translateX(-50%) translateY(-50%) rotate(70deg); width:60%; height:60%; background:conic-gradient(from -60deg, #B8C3C1 0deg , #B8C3C1 120deg, transparent 0deg);} .d49_4 .sector .c_l .pie p:nth-child(7)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d49_4 .sector .c_l .pie p:nth-child(8) {z-index:8; transform:translateX(-50%) translateY(-50%) rotate(190deg); width:60%; height:60%; background:conic-gradient(from -60deg, #ABA9B9 0deg , #ABA9B9 120deg, transparent 0deg);} .d49_4 .sector .c_l .pie p:nth-child(8)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:85.6%; background:#CCCCCC;} .d49_4 .sector .c_l .pie p:nth-child(9) {z-index:9; transform:translateX(-50%) translateY(-50%) rotate(310deg); width:60%; height:60%; background:conic-gradient(from -60deg, #A3B1B5 0deg , #A3B1B5 120deg, transparent 0deg);} .d49_4 .sector .c_l .pie p:nth-child(9)::before {display:none; content:""; position:absolute; left:50%; top:50%; transform-origin:bottom left; transform:translateY(-100%) rotate(-60deg); width:0.1875rem; height:78.6%; background:#CCCCCC;} .d49_4 .sector .c_l .pie p:nth-child(10) {display:flex; justify-content:center; align-items:center; transform:translateX(-50%) translateY(-50%) rotate(-5deg); z-index:11; width:35%; height:35%; border:0.1875rem solid #CCCCCC; background:#009FA8;} .d49_4 .sector .c_l .pie p:nth-child(10)::before {display:none;} .d49_4 .sector .c_l .pie p:nth-child(10) strong {font-size:1.375rem; color:#FFFFFF; line-height:1.2; text-transform:uppercase; margin-bottom:0.625rem; padding:0 2.5rem;} .d49_4 .sector .c_l .pie p:nth-child(10) strong i {display:block; margin:0 auto 0.625rem; width:3rem; height:3rem; background:url("../images/p49/004_wa_icon.png") no-repeat scroll center center / 100% auto; background-size:cover;} .d49_4 .sector .c_l .pie p.hover {color:#459DA6;} .d49_4 .sector .c_l .pie p.active .ripple {display:none;} .d49_4 .sector .c_l .pie p.active {color:#459DA6; background:conic-gradient(from -30deg, rgba(255, 255, 255, 0.8) 0deg , rgba(255, 255, 255, 0.02) 60deg, transparent 0deg)} .d49_4 .sector .c_l .pie.r789 p:nth-child(7) {transform:translateX(-50%) translateY(-50%) rotate(60deg); transition:all 2s;} .d49_4 .sector .c_l .pie.r789 p:nth-child(8) {transform:translateX(-50%) translateY(-50%) rotate(180deg); transition:all 2s;} .d49_4 .sector .c_l .pie.r789 p:nth-child(9) {transform:translateX(-50%) translateY(-50%) rotate(300deg); transition:all 2s;} .d49_4 .sector .c_l .pie.r789 p:nth-child(10) {transform:translateX(-50%) translateY(-50%) rotate(0deg); transition:all 1s;} .d49_4 .sector .c_l .pie p .ripple {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#459DA6; animation:d49_4_ripple 2s ease-out both; animation-iteration-count:infinite;} @keyframes d49_4_ripple { 0%{ transform:translateX(-50%) scale(0.5); } 50% { transform:translateX(-50%) scale(1); opacity:0.1; } 100% { transform:translateX(-50%) scale(0.5); } } .d49_4 .sector .c_l .pie p:nth-child(2) .ripple, .d49_4 .sector .c_l .pie p:nth-child(4) .ripple, .d49_4 .sector .c_l .pie p:nth-child(6) .ripple {width:0.3125rem; height:0.3125rem; top:5%;} .d49_4 .sector .c_l .pie p .ripple_hit {position:absolute; left:50%; top:7%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%;} .d49_4 .sector .c_l .pie p:nth-child(2) .ripple_hit, .d49_4 .sector .c_l .pie p:nth-child(4) .ripple_hit, .d49_4 .sector .c_l .pie p:nth-child(6) .ripple_hit {width:0.3125rem; height:0.3125rem; top:5%;} .d49_4 .sector .c_l .pie p .ripple_hit i {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border:1px solid rgba(255, 255, 255, 1.0); border-radius:100%;} .d49_4 .sector .c_l .pie p .ripple_hit i:nth-child(1) {opacity:1.0; width:calc(100% + 0.0rem); height:calc(100% + 0.0rem); animation:d49_4_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d49_4 .sector .c_l .pie p .ripple_hit i:nth-child(2) {opacity:0.8; width:calc(100% + 0.8rem); height:calc(100% + 0.8rem); animation:d49_4_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} .d49_4 .sector .c_l .pie p .ripple_hit i:nth-child(3) {opacity:0.6; width:calc(100% + 1.6rem); height:calc(100% + 1.6rem); animation:d49_4_ripple_hit 0.3s ease-out both; animation-iteration-count:1; animation-delay:0.1s;} @keyframes d49_4_ripple_hit { 0% { } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } .d49_4 .sector .c_l .pie_hit_zone {position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:100%;} .d49_4 .sector .c_l .pie_hit_zone span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; border-radius:100%; clip-path:polygon(20% 0%, 80% 0%, 50% 50%);} .d49_4 .sector .c_l .pie_hit_zone span:nth-child(1) {transform:rotate(90deg);} .d49_4 .sector .c_l .pie_hit_zone span:nth-child(2) {transform:rotate(30deg);} .d49_4 .sector .c_l .pie_hit_zone span:nth-child(3) {transform:rotate(-30deg);} .d49_4 .sector .c_l .pie_hit_zone span:nth-child(4) {transform:rotate(-90deg);} .d49_4 .sector .c_l .pie_hit_zone span:nth-child(5) {transform:rotate(-150deg);} .d49_4 .sector .c_l .pie_hit_zone span:nth-child(6) {transform:rotate(-210deg);} .d49_4 .sector .c_r {position:absolute; right:0; top:10%; width:20rem;} .d49_4 .sector .c_r .img {width:100%; height:10rem; background:red;} .d49_4 .sector .c_r .text {display:none; position:absolute; left:0; top:0; width:100%; color:#459DA6;} .d49_4 .sector .c_r .text:nth-child(1) {display:block;} .d49_4 .sector .c_r .text h3 {display:inline-block; margin-bottom:0.625rem; position:relative; font-size:1.375rem;} .d49_4 .sector .c_r .text h3 .v_icon {display:block; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); cursor:pointer; width:2rem; height:2rem; border-radius:100%; border:1px solid #459DA6; background:url("../images/p49/play_icon.svg") no-repeat scroll 60% center / 40% auto;} .d49_4 .sector .c_r .text p {font-size:0.875rem; word-break:break-all;} .d49_4 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.9);} .d49_4 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d49_4 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d49_4 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#333333; border-radius:100%; transition:opacity 0.3s;} .d49_4 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d49_4 .lightbox .close i::before, .d49_4 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d49_4 .lightbox .close i::before {width:0.125rem; height:40%;} .d49_4 .lightbox .close i::after {width:40%; height:0.125rem;} .d49_4 .lightbox .close:hover i {opacity:1;} /**/ .d49_5 {position:relative; background:rgba(0, 0, 0, 1.0);} .d49_5 .main {} .d49_5 ul {width:100%; height:calc(100vh - 4.375rem); position:relative;} .d49_5 ul li {opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d49_5 ul li:first-child {opacity:1;} .d49_5 ul li .cell {width:100%; height:100%; position:relative;} .d49_5 ul li p {opacity:0; position:absolute; font-size:2.75rem; color:#FFFFFF; transition:all 0.3s;} .d49_5 ul li:nth-child(1) p {right:12%; top:35%;} .d49_5 ul li:nth-child(2) p {left:25%; top:35%;} .d49_5 ul li:nth-child(3) p {right:10%; bottom:15%;} .d49_5 ul li:nth-child(4) p {left:10%; top:10%;} .d49_5 ul li:nth-child(5) p {left:10%; top:10%;} /* 动态复制后应用第四屏的样式 */ .d49_5 ul li span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d49_5 ul li.active {opacity:1;} .d49_5 ul li.active p {opacity:1; transform:translateY(-10px); transition-delay:0.3s;} .d49_5 .pagination {display:flex; justify-content:center; position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);} .d49_5 .pagination span {display:block; margin:0 0.3125rem; width:0.615rem; height:0.615rem; border-radius:100%; border:1px solid rgba(255, 255, 255, 1.0); background:transparent; transition:all 0.3s;} .d49_5 .pagination span.active {background:#009fa8;} /**/ .d49_6 {color:#FFFFFF; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)); overflow:hidden;} .d49_6 .slide_box {padding:9.375rem 0 0;} .d49_6 .topic {width:80%; margin:0 auto 4.5rem;} .d49_6 .topic h2 {font-size:2.75rem;} .d49_6 .topic p {font-size:1.375rem; margin-top:1.25rem;} .d49_6 .pin {display:flex; justify-content:center; align-items:center; flex-direction:column; flex-wrap:wrap;} .d49_6 .t_l_s {width:100%;} .d49_6 .t_l_s .text {width:60%; margin:auto;} .d49_6 .t_l_s .text h3 {font-size:2.25rem;} .d49_6 .t_l_s .text p {font-size:1.125rem; margin-top:1.25rem;} .d49_6 .t_l_s .list {margin:6.25rem auto 0; position:relative; width:60rem; height:15rem;} .d49_6 .t_l_s .list .box {visibility:hidden; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%;} .d49_6 .t_l_s .list .box.active {visibility:visible; opacity:1;} .d49_6 .t_l_s .list .box .swiper-container {padding:0; height:100%; overflow:visible;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide {display:flex; align-items:center;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide .img_box {padding-top:100%; position:relative; background:transparent; opacity:0; transform:scale(0.5);} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide .img_box span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-prev-3 .img_box {opacity:0; transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-prev-2 .img_box {opacity:0.1; transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-prev .img_box {opacity:0.5; transform:translateX(-10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-active .img_box {opacity:1; transform:translateX(0%) translateY(-30%) scale(1); transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-next .img_box {opacity:0.5; transform:translateX(10%) translateY(-15%) scale(0.8); transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-next-2 .img_box {opacity:0.1; transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-slide-next-3 .img_box {opacity:0; transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-button-prev, .d49_6 .t_l_s .list .box .swiper-container .swiper-button-next {opacity:0.5; width:4.5rem; height:4.5rem; background-position:center center; background-repeat:no-repeat; background-size:50% auto; transition:all 0.3s;} .d49_6 .t_l_s .list .box .swiper-container .swiper-button-prev {left:-10%; background-image:url("../images/p49/006_swiper_button_prev.svg");} .d49_6 .t_l_s .list .box .swiper-container .swiper-button-next {right:-10%; background-image:url("../images/p49/006_swiper_button_next.svg");} .d49_6 .t_l_s .list .box .swiper-container .swiper-button-prev:hover, .d49_6 .t_l_s .list .box .swiper-container .swiper-button-next:hover {opacity:1; background-color:transparent;} .d49_6 .t_l_s .s_tab {display:flex; justify-content:space-between; max-width:60rem; margin:auto;} .d49_6 .t_l_s .s_tab span {flex:1; margin:0 0.3125rem; cursor:pointer; position:relative;} .d49_6 .t_l_s .s_tab span em {display:block; font-style:normal; font-size:0.875rem; color:rgba(255, 255, 255, 0.5); width:100%; height:100%; padding:1rem; border-top:2px solid rgba(255, 255, 255, 0.2); transition:all 0.3s;} .d49_6 .t_l_s .s_tab span b {width:0; height:2px; position:absolute; left:50%; top:0; transform:translateX(-50%); background:rgba(0, 159, 168, 1); transition:all 0.3s;} .d49_6 .t_l_s .s_tab span:hover em {color:rgba(255, 255, 255, 0.8);} .d49_6 .t_l_s .s_tab span.active em {color:rgba(0, 159, 168, 1);} .d49_6 .t_l_s .s_tab span.active b {width:100%;} .d49_6 .scale_box {padding:6.25rem 0 0;} .d49_6 .scale_box .title {width:60%; margin:0 auto 2.5rem;} .d49_6 .scale_box .title h3 {font-size:2.5rem;} .d49_6 .scale_box .title p {font-size:1.125rem; margin-top:1.25rem;} .d49_6 .scale_box ul {display:flex; flex-direction:column; overflow:hidden;} .d49_6 .scale_box ul li {opacity:0.5; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(89, 86, 86, 1)); overflow:hidden; transition:all 1s;} .d49_6 .scale_box ul li .cell {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; max-width:70rem; margin:auto;} .d49_6 .scale_box ul li .cover {width:60%; padding:0 4.5rem; transition:all 1s;} .d49_6 .scale_box ul li .cover span {display:block; width:100%; transform:translateY(4.5rem) scale(0.8); padding-top:75%; border-radius:1.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 1s;} .d49_6 .scale_box ul li .text {width:40%; padding:4.5rem 0; text-align:left;} .d49_6 .scale_box ul li .text h3 {font-size:1.875rem;} .d49_6 .scale_box ul li .text p {font-size:1.125rem; margin-top:1.25rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d49_6 .scale_box ul li.active {opacity:1; background:linear-gradient(180deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0.8));} .d49_6 .scale_box ul li.active .cover {padding:4.5rem;} .d49_6 .scale_box ul li.active .cover span {width:100%; margin:auto; transform:translateY(0) scale(1);} .d49_6 .scale_box ul li.active .text p {-webkit-line-clamp:10;} /**/ .d49_7 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d49_7 h2 {font-size:2.75rem; color:#FFFFFF; text-align:center;} .d49_7 .swiper-container {padding:4rem 0;} .d49_7 .swiper-container .swiper-slide .img_box {padding-top:75%; overflow:hidden;} .d49_7 .swiper-container .swiper-slide .img_box img {display:block; position:absolute; left:0; top:0; width:100%; height:auto;} .d49_7 .swiper-container .swiper-slide .video {position:relative;} .d49_7 .swiper-container .swiper-slide .video .v_icon {display:block; position:absolute; z-index:11; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); cursor:pointer; width:2.5rem; height:2.5rem; border-radius:100%; border:1px solid #FFFFFF; background:#000000 url("../images/p47/play_icon_white.svg") no-repeat scroll 60% center / 40% auto; transition:all 0.3s;} .d49_7 .swiper-container .swiper-slide .video .v_icon:hover {background-color:rgba(0, 159, 168, 1);} .d49_7 .swiper-container .swiper-slide .video .a_icon {display:block; cursor:pointer; position:absolute; z-index:13; right:1.25rem; bottom:1.25rem; width:2.5rem; height:2.5rem;} .d49_7 .swiper-container .swiper-slide .video .a_icon i {display:block; position:absolute; width:60%; height:60%; background:rgba(255, 255,255, 0.3); border-radius:100%; transition:all 0.3s;} .d49_7 .swiper-container .swiper-slide .video .a_icon i::before, .d49_7 .swiper-container .swiper-slide .video .a_icon i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#000000;} .d49_7 .swiper-container .swiper-slide .video .a_icon i::before {width:0.125rem; height:40%;} .d49_7 .swiper-container .swiper-slide .video .a_icon i::after {width:40%; height:0.125rem;} .d49_7 .swiper-container .swiper-slide .video .a_icon:hover i {background:rgba(0, 159, 168, 1);} .d49_7 .swiper-container .swiper-slide .img_box video {position:absolute; z-index:12; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:auto;} .d49_7 .swiper-container .swiper-pagination {bottom:0;} .d49_7 .swiper-container .swiper-pagination .swiper-pagination-bullet {transition:all 0.3s;} .d49_7 .swiper-container .swiper-pagination .swiper-pagination-bullet-active {background:rgba(0, 159, 168, 1);} .d49_7 .swiper-container .swiper-button-prev, .d49_7 .swiper-container .swiper-button-next {opacity:0.8; width:2.5rem; height:2.5rem; border-radius:0.3125rem; background:linear-gradient(180deg, rgba(0, 159, 168, 0.6), rgba(0, 159, 168, 0.3)); transition:all 0.3s;} .d49_7 .swiper-container .swiper-button-prev i, .d49_7 .swiper-container .swiper-button-next i {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d49_7 .swiper-container .swiper-button-prev i {background-image:url("../images/p49/prev.svg");} .d49_7 .swiper-container .swiper-button-next i {background-image:url("../images/p49/next.svg");} .d49_7 .swiper-container .swiper-button-prev:hover, .d49_7 .swiper-container .swiper-button-next:hover {opacity:1;} .d49_7 .lightbox {display:none; position:fixed; z-index:21; left:0; top:0; width:100%; height:100vh; background:#333333;} .d49_7 .lightbox .video {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .d49_7 .lightbox .video video {position:static; transform:none; width:100%; max-width:50rem; min-width:auto; min-height:auto;} .d49_7 .lightbox .close {display:block; width:2.5rem; height:2.5rem; cursor:pointer; position:absolute; right:2.5rem; top:2.5rem; transform:rotate(45deg); background:#000000; border-radius:100%; transition:opacity 0.3s;} .d49_7 .lightbox .close i {display:block; opacity:0.5; width:0; height:0; transition:all 0.3s;} .d49_7 .lightbox .close i::before, .d49_7 .lightbox .close i::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:#FFFFFF; transition:opacity 0.3s;} .d49_7 .lightbox .close i::before {width:0.125rem; height:40%;} .d49_7 .lightbox .close i::after {width:40%; height:0.125rem;} .d49_7 .lightbox .close:hover i {opacity:1;} /**/ .d49_side_nav {visibility:hidden; opacity:0; position:fixed; z-index:22; right:0; top:50%; transform:translateY(-50%); width:6.25rem; display:flex; flex-direction:column; transition:all 0.3s;} .d49_side_nav.show {visibility:visible; opacity:1;} .d49_side_nav.hide {visibility:hidden; opacity:0;} .d49_side_nav a {width:100%; height:3.75rem; margin-top:1px; cursor:pointer; background-color:#666666; transition:all 0.3s;} .d49_side_nav a i {display:block; opacity:0.5; position:static; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d49_side_nav a:nth-child(1) i {background-image:url("../images/p49/side_nav_icon_1.png");} .d49_side_nav a:nth-child(2) i {background-image:url("../images/p49/side_nav_icon_2.png");} .d49_side_nav a:nth-child(3) i {background-image:url("../images/p49/side_nav_icon_3.png");} .d49_side_nav a:nth-child(4) i {background-image:url("../images/p49/side_nav_icon_4.png");} .d49_side_nav a:nth-child(5) i {background-image:url("../images/p49/side_nav_icon_5.png");} .d49_side_nav a:hover {background-color:#009fa8;} .d49_side_nav a:hover i {opacity:1;} .d49_side_nav a.active {background-color:#009fa8;} .d49_side_nav a.active i {opacity:1;} /****************************************/ /* products detail: P25 Exp */ /****************************************/ /**/ .sel_products_detail_50 {} /**/ .d50_1 {padding:6.25rem 0;} .d50_1 .shead {text-align:center;} .d50_1 .shead h1 {font-size:4rem; color:#534479;} .d50_1 .shead p {font-size:2rem;} .d50_1 .img {width:30%; margin:3.75rem auto;} .d50_1 .img img {display:block; width:100%;} .d50_1 .intro {font-size:1.375rem; line-height:1.8;} /**/ .d50_2 {padding:9.375rem 0; background:#EDEDED;} .d50_2 .shead {} .d50_2 .shead h2 {margin-bottom:2.5rem; text-align:center; font-size:2.75rem; color:#5B4D7F;} .d50_2 .shead p {font-size:1.375rem;} .d50_2 ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2.5rem -2.5rem -2.5rem;} .d50_2 ul li {width:50%; padding:2.5rem;} .d50_2 ul li:nth-child(1) {width:100%;} .d50_2 ul li:nth-child(1) .cell {display:flex; flex-wrap:wrap; justify-content:space-between; flex-direction:row-reverse;} .d50_2 ul li:nth-child(1) .text {width:calc(50% - 2.5rem);} .d50_2 ul li:nth-child(1) .img {width:calc(50% - 2.5rem);} .d50_2 ul li .cell {} .d50_2 ul li .text {} .d50_2 ul li .text h3 {font-size:2rem; position:relative; color:#5B4D7F; margin-bottom:1.25rem; padding-bottom:1.25rem;} .d50_2 ul li .text h3::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(to right, rgba(91,77,127,1), rgba(91,77,127,0));} .d50_2 ul li .text p {font-size:1.375rem;} .d50_2 ul li .text p .division {display:block; height:1.25rem;} .d50_2 ul li .img {margin-bottom:1.875rem;} .d50_2 ul li .img img {display:block; width:100%;} /**/ .d50_3 {padding:9.375rem 0;} .d50_3 .shead {text-align:center;} .d50_3 .shead h2 {font-size:2.75rem; color:#5B4D7F; margin-bottom:1.25rem;} .d50_3 .shead p {font-size:1.375rem;} .d50_3 ul {margin:3.75rem -2.5rem -2.5rem; display:flex; flex-wrap:wrap; justify-content:space-between;} .d50_3 ul li {width:25%; padding:2.5rem;} .d50_3 ul li .cell {} .d50_3 ul li .text {text-align:center;} .d50_3 ul li .text h3 {font-size:2.25rem; margin-bottom:1.25rem;} .d50_3 ul li .text p {font-size:1.375rem;} .d50_3 ul li .img {margin-bottom:1.25rem;} .d50_3 ul li .img img {display:block; width:100%;} /**/ .d50_4 {padding:9.375rem 0; background:#F1F1F1;} .d50_4 ul {} .d50_4 ul li {margin-bottom:2.5rem;} .d50_4 ul li .cell {display:flex; flex-wrap:wrap; justify-content:space-between; padding:3.75rem; background:#E3E3E3;} .d50_4 ul li .text {width:calc(50% - 1.25rem);} .d50_4 ul li .text h3 {font-size:2rem; margin-bottom:1.25rem;} .d50_4 ul li .text p {font-size:1.375rem;} .d50_4 ul li .img {width:calc(50% - 1.25rem);} .d50_4 ul li .img img {display:block; width:100%;} .d50_4 ul li:nth-child(2n) .cell {flex-direction:row-reverse;} /**/ .d50_5 {padding:9.375rem 0;} .d50_5 h2 {margin-bottom:6.25rem; font-size:2.75rem; text-align:center; color:#534479;} .d50_5 .box {position:relative;} .d50_5 ul {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:-2.5rem 0;} .d50_5 ul li {width:35%; padding:2.5rem 0; display:flex;} .d50_5 ul li .cell {width:80%;} .d50_5 ul li .cell .text {margin-top:1.25rem;} .d50_5 ul li .cell .text p {font-size:1rem;} .d50_5 ul li img {display:block; width:100%;} .d50_5 .img {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:30%;} .d50_5 .img img {display:block; width:100%;} .d50_5 ul li:nth-child(2), .d50_5 ul li:nth-child(4) {justify-content:flex-end;} /**/ .d50_6 {padding:6.25rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 0.9);} .d50_6 h2 {font-size:2.75rem; text-align:center;} /****************************************/ /* products detail: ProPet X11/E11 */ /****************************************/ /**/ .sel_products_detail_51 {} /**/ .d51_1 {padding:9.375rem 0; background-color:rgba(0, 0, 0, 1.0); background-image:url("../images/p51/001_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_1 .main {display:flex; flex-direction:column; align-items:flex-end;} .d51_1 .shead {width:50%; text-align:center;} .d51_1 .shead h1 {display:inline-block; font-size:4.5rem; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); background:linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d51_1 .shead p {font-size:1.375rem; color:rgba(255, 255, 255, 1.0);} .d51_1 .img {width:50%; margin-top:4.5rem;} .d51_1 .img span {display:block; width:100%; padding-top:66.67%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d51_2 {padding:9.375rem 0; background-image:url("../images/p51/002_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_2 .main {margin-bottom:45rem;} .d51_2 .text {width:80%; margin:auto; text-align:center;} .d51_2 .text h2 {display:inline-block; margin-bottom:2.5rem; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d51_2 .text p {font-size:1.375rem;} .d51_2 .text p sup {font-size:0.625rem;} /**/ .d51_3 {padding:9.375rem 0; overflow:hidden;} .d51_3 .main {text-align:center;} .d51_3 h2 {display:inline-block; font-size:2.75rem; max-width:42rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d51_3 .swiper-container {margin-top:4.5rem; padding:0 0 4.5rem 0; overflow:visible;} .d51_3 .swiper-container .swiper-wrapper {align-items:stretch;} .d51_3 .swiper-container .swiper-slide {background:#d5dce4; padding:4.5rem 2.5rem; height:auto; border-radius:1.25rem; overflow:hidden;} .d51_3 .swiper-container .swiper-slide:nth-child(1) {padding:0;} .d51_3 .swiper-container .swiper-slide:nth-child(1) .img {height:100%; padding:0;} .d51_3 .swiper-container .swiper-slide:nth-child(3), .d51_3 .swiper-container .swiper-slide:nth-child(5), .d51_3 .swiper-container .swiper-slide:nth-child(7) {background:#e0e0e0;} .d51_3 .swiper-container .swiper-slide .img {width:100%; padding-top:56.25%; position:relative; background:transparent; border-radius:0.3125rem; overflow:hidden;} .d51_3 .swiper-container .swiper-slide .img span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_3 .swiper-container .swiper-slide .text {width:100%; margin:0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d51_3 .swiper-container .swiper-slide .text h3 {font-size:1.125rem; font-weight:normal; margin-bottom:1.25rem;} .d51_3 .swiper-container .swiper-slide .text p {font-size:0.875rem; line-height:1.6; min-height:11rem; opacity:0.5;} .d51_3 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:1rem; height:1rem; margin:0 0.625rem; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d51_3 .swiper-container .swiper-button-prev, .d51_3 .swiper-container .swiper-button-next {display:none;} /**/ .d51_4 {padding:20rem 0; position:relative; background:rgba(0, 0, 0, 1); overflow:hidden;} .d51_4 h2 {position:relative; z-index:1; width:60%; margin:auto; font-size:2.75rem; color:#FFFFFF; text-align:center;} .d51_4 .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p51/004_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} /**/ .d51_5 {padding:9.375rem 0 6.25rem; background:linear-gradient(-90deg, rgba(169, 190, 213, 0.5), rgba(255, 255, 255, 1)); overflow:hidden;} .d51_5 .main {} .d51_5 .swiper-container {padding:0 0 5rem 0;} .d51_5 .swiper-container .swiper-wrapper {align-items:stretch;} .d51_5 .swiper-container .swiper-slide {height:auto; padding:1.875rem; background:linear-gradient(90deg, rgba(169, 190, 213, 0.3), rgba(255, 255, 255, 1)); border-radius:1.25rem;} .d51_5 .swiper-container .swiper-slide .img_box {width:100%; padding-top:56.25%; position:relative;} .d51_5 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_5 .swiper-container .swiper-slide .text {margin:1.875rem 0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d51_5 .swiper-container .swiper-slide .text h3 {font-size:1.125rem; font-weight:normal; margin-bottom:0.625rem;} .d51_5 .swiper-container .swiper-slide .text p {font-size:1rem; line-height:1.4; opacity:0.5;} .d51_5 .swiper-container .swiper-pagination {display:none;} .d51_5 .swiper-container .swiper-button-prev, .d51_5 .swiper-container .swiper-button-next {left:50%; top:auto; right:auto; bottom:0; transform:translateX(-50%); width:2.5rem; height:2.5rem; border-radius:100%; background-color:rgba(255, 255, 255, 0.9); background-position:center center; background-repeat:no-repeat; background-size:20% auto; transition:all 0.3s;} .d51_5 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 2rem)); background-image:url("../images/p51/prev.svg");} .d51_5 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 2rem)); background-image:url("../images/p51/next.svg");} .d51_5 .swiper-container .swiper-button-prev:hover, .d51_5 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1);} /**/ .d51_6 {padding:20rem 0; position:relative; background:rgba(0, 0, 0, 1); overflow:hidden;} .d51_6 h2 {position:relative; z-index:1; width:60%; margin:auto; font-size:2.75rem; color:#FFFFFF; text-align:center;} .d51_6 .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p51/006_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} /**/ .d51_7 {padding:9.375rem 0 6.25rem; background:linear-gradient(-90deg, rgba(169, 190, 213, 0.5), rgba(255, 255, 255, 1)); overflow:hidden;} .d51_7 .main {} .d51_7 .swiper-container {padding:0 0 5rem 0;} .d51_7 .swiper-container .swiper-wrapper {align-items:stretch;} .d51_7 .swiper-container .swiper-slide {height:auto; padding:1.875rem; background:linear-gradient(90deg, rgba(169, 190, 213, 0.3), rgba(255, 255, 255, 1)); border-radius:1.25rem;} .d51_7 .swiper-container .swiper-slide .img_box {width:100%; padding-top:56.25%; position:relative;} .d51_7 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_7 .swiper-container .swiper-slide .text {margin:1.875rem 0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d51_7 .swiper-container .swiper-slide .text h3 {font-size:1.125rem; font-weight:normal; margin-bottom:0.625rem;} .d51_7 .swiper-container .swiper-slide .text p {font-size:1rem; line-height:1.4; opacity:0.5;} .d51_7 .swiper-container .swiper-pagination {display:none;} .d51_7 .swiper-container .swiper-button-prev, .d51_7 .swiper-container .swiper-button-next {left:50%; top:auto; right:auto; bottom:0; transform:translateX(-50%); width:2.5rem; height:2.5rem; border-radius:100%; background:rgba(255, 255, 255, 0.9); background-position:center center; background-repeat:no-repeat; background-size:20% auto; transition:all 0.3s;} .d51_7 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 2rem)); background-image:url("../images/p51/prev.svg");} .d51_7 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 2rem)); background-image:url("../images/p51/next.svg");} .d51_7 .swiper-container .swiper-button-prev:hover, .d51_7 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1);} /**/ .d51_8 {padding:20rem 0; position:relative; background:rgba(0, 0, 0, 1); overflow:hidden;} .d51_8 h2 {position:relative; z-index:1; width:60%; margin:auto; font-size:2.75rem; color:#FFFFFF; text-align:center;} .d51_8 .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p51/008_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} /**/ .d51_9 {padding:12.5rem 0 6.25rem;} .d51_9 .main {} .d51_9 .img {width:80%; margin:auto;} .d51_9 .img span {display:block; width:100%; padding-top:20.40%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d51_10 {padding:0 0 9.375rem;} .d51_10 .main {text-align:center;} .d51_10 .swiper-container {padding:0 0 4.5rem 0;} .d51_10 .swiper-container .swiper-slide {display:flex; align-items:center; background:#d5dce4; border-radius:2.5rem; overflow:hidden;} .d51_10 .swiper-container .swiper-slide:nth-child(2), .d51_10 .swiper-container .swiper-slide:nth-child(3) {flex-direction:row-reverse;} .d51_10 .swiper-container .swiper-slide .img_box {width:50%; padding-top:35%; position:relative; background:transparent;} .d51_10 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_10 .swiper-container .swiper-slide .img_box ul {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d51_10 .swiper-container .swiper-slide .img_box ul li {padding:1.25rem 0;} .d51_10 .swiper-container .swiper-slide .img_box ul li .cell {display:flex;} .d51_10 .swiper-container .swiper-slide .img_box ul li .l {width:4.5rem; height:4.5rem; position:relative; margin-right:1.25rem;} .d51_10 .swiper-container .swiper-slide .img_box ul li .l span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_10 .swiper-container .swiper-slide .img_box ul li .r {text-align:left;} .d51_10 .swiper-container .swiper-slide .img_box ul li .r h4 {display:inline-block; font-size:1.875rem; margin-bottom:0.3125rem; background-clip:text; color:transparent; background-image:linear-gradient(45deg, rgba(226,160,65,1) 0%, rgba(190,216,230,1) 50%, rgba(66,143,161,1) 100%);} .d51_10 .swiper-container .swiper-slide .img_box ul li .r p {font-size:1rem; opacity:0.5;} .d51_10 .swiper-container .swiper-slide .text {width:50%; margin:0; padding:4.5rem; text-align:left; color:rgba(0, 0, 0, 1.0);} .d51_10 .swiper-container .swiper-slide .text h3 {font-size:1.875rem; margin-bottom:1.25rem;} .d51_10 .swiper-container .swiper-slide .text p {font-size:1.125rem; line-height:1.6; opacity:0.5;} .d51_10 .swiper-container .swiper-slide .text ul {display:flex; margin-top:2.5rem;} .d51_10 .swiper-container .swiper-slide .text ul li {margin-right:2.5rem;} .d51_10 .swiper-container .swiper-slide .text ul li .cell {} .d51_10 .swiper-container .swiper-slide .text ul li span {display:block; width:4.5rem; height:4.5rem; margin-bottom:0.625rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_10 .swiper-container .swiper-slide .text ul li p {font-size:0.875rem;} .d51_10 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:1rem; height:1rem; margin:0 0.625rem; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d51_10 .swiper-container .swiper-button-prev, .d51_10 .swiper-container .swiper-button-next {display:none;} /**/ .d51_11 {padding:6.25rem 0 4.5rem; background:linear-gradient(180deg, rgba(169, 190, 213, 0.5), rgba(0, 0, 0, 0.02)); overflow:hidden;} .d51_11 .swiper-container {padding:0;} .d51_11 .swiper-container .swiper-slide {display:flex; flex-wrap:wrap; align-items:center; padding:0 10%;} .d51_11 .swiper-container .swiper-slide .img_box {width:50%; padding-top:35%; position:relative; background:transparent;} .d51_11 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_11 .swiper-container .swiper-slide .text {width:40%; margin:0; position:relative; text-align:center; color:rgba(0, 0, 0, 1.0);} .d51_11 .swiper-container .swiper-slide .text::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-100%) scale(1.5); width:100%; padding-top:15.625%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_11 .swiper-container .swiper-slide .text h3 {font-size:4.5rem; margin-bottom:1.25rem; position:relative; z-index:1;} .d51_11 .swiper-container .swiper-slide .text p {font-size:1.875rem; line-height:1; position:relative; z-index:1;} .d51_11 .swiper-container .swiper-slide:nth-child(1) .text::after {background-image:url("../images/p51/011_1_t.png");} .d51_11 .swiper-container .swiper-slide:nth-child(2) .text::after {background-image:url("../images/p51/011_2_t.png");} .d51_11 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:1rem; height:1rem; margin:0 0.625rem; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} /**/ .d51_12 {padding:9.375rem 0; background-image:url("../images/p51/012_bg.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_12 .main {text-align:center;} .d51_12 h2 {display:inline-block; margin-bottom:1.25rem; text-align:center; width:80%; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d51_12 .l_r {display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center;} .d51_12 .l_r .l {width:45%;} .d51_12 .l_r .l .img {width:100%; padding-top:133%; position:relative;} .d51_12 .l_r .l .img span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_12 .l_r .r {width:33%; position:relative; margin:8% 13% 0 0;} .d51_12 .l_r .r .text {} .d51_12 .l_r .r .text p {position:absolute; font-size:0.875rem; text-align:left; line-height:1.4; opacity:0.5;} .d51_12 .l_r .r .text p:nth-child(1) {left:-27%; top:10.85%; width:36%;} .d51_12 .l_r .r .text p:nth-child(2) {left:0; top:34%;} .d51_12 .l_r .r .text p:nth-child(3) {left:0; top:55%;} .d51_12 .l_r .r .text p:nth-child(4) {left:97%; top:20%;} .d51_12 .l_r .r .text p:nth-child(5) {left:94%; top:28%;} .d51_12 .l_r .r .img {padding-top:120%; position:relative;} .d51_12 .l_r .r .img span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d51_13 {background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d51_13 .pin {height:calc(100vh - 4.375rem); display:flex; justify-content:center; align-items:center;} .d51_13 .main {width:100%;} .d51_13 .list {position:relative; --h:30rem; height:var(--h);} .d51_13 .list ul {display:flex; text-align:center; position:absolute; left:0; top:0; height:100%;} .d51_13 .list ul li {width:24rem; margin-right:4.5rem;} .d51_13 .list ul li:last-child {margin:0;} .d51_13 .list ul li .cell {position:relative; height:100%;} .d51_13 .list ul li .img {height:100%;} .d51_13 .list ul li .img span {display:block; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.1); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d51_13 .list ul li .text {position:absolute; left:0; top:0; width:100%; padding:2.5rem;} .d51_13 .list ul li .text h3 {color:#FFFFFF; font-size:1.375rem;} /****************************************/ /* products detail: V-reader® V10 */ /****************************************/ /**/ .sel_products_detail_52 {} /**/ .d52_1 {background:#000000 url("../images/p52/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d52_1 .main {padding:12.5rem 0 28rem; position:relative;} .d52_1 .text {color:#FFFFFF;} .d52_1 .text h1 {font-size:4.5rem; margin-bottom:0.625rem;} .d52_1 .text h1 sup {font-size:1.375rem; padding-left:0.25rem;} .d52_1 .text h2 {font-size:1.875rem; margin-bottom:2.5rem; width:50%;} .d52_1 .text p {display:flex; flex-direction:column; font-size:1.375rem; line-height:1.4;} /**/ .d52_2 {padding:12.5rem 0; background:#000000 url("../images/p52/002_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed; overflow:hidden;} .d52_2 .text {color:#FFFFFF;} .d52_2 .text p {font-size:1.375rem;} /**/ .d52_3 {padding:9.375rem 0; color:#FFFFFF; background:#000000 url("../images/p52/003_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d52_3 .shead {} .d52_3 .shead p {width:60%; margin:auto; text-align:center; font-size:1.375rem;} .d52_3 ul {display:flex; justify-content:space-between; margin-top:5rem;} .d52_3 ul li {flex:1; text-align:center;} .d52_3 ul li .cell {} .d52_3 ul li .img {width:10rem; margin:auto;} .d52_3 ul li .img span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d52_3 ul li .text {margin-top:1.25rem;} .d52_3 ul li .text h3 {display:flex; flex-direction:column; align-items:center; font-size:2rem; font-weight:normal; margin-bottom:0.625rem;} .d52_3 ul li .text h3 span:first-child {display:inline-block; -webkit-text-fill-color:transparent; text-fill-color:transparent; -webkit-background-clip:text; background-clip:text; background-image:linear-gradient(0deg, rgb(0, 150, 228) 0%, rgb(255, 255, 255) 50%);} .d52_3 ul li .text p {font-size:1rem;} .d52_3 ul li .text p em {display:inline-block; margin-right:0.625rem; transform:translateY(-0.125rem); width:0.3125rem; height:0.3125rem; border-radius:100%; background:rgba(255, 255, 255, 0.8);} /**/ .d52_4 {padding:20rem 0; background:#000000 url("../images/p52/004_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed; overflow:hidden;} .d52_4 .text {color:#FFFFFF;} .d52_4 .text p {font-size:2.75rem; font-weight:bold; text-align:center; width:80%; margin:auto; line-height:1.2;} /**/ .d52_5 {padding:9.375rem 0; color:#FFFFFF; background:#000000; overflow:hidden;} .d52_5 p {font-size:1.125rem;} .d52_5 .lr {display:flex; justify-content:space-between;} .d52_5 .l {width:calc(45% - 2.5rem);} .d52_5 .lt {width:78%;} .d52_5 .l .pm {position:relative; margin-bottom:1.5rem; padding-top:100%; width:100%;} .d52_5 .l .lazy {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d52_5 .l span {position:absolute; left:0; top:0; font-size:0.875rem;} .d52_5 .l span:nth-child(2) {left:3.55%; top:11.55%; opacity:0.5;} .d52_5 .l span:nth-child(3) {left:36.15%; top:19.55%; color:#009FAB;} .d52_5 .l span:nth-child(4) {left:62.55%; top:27.55%; color:#009FAB;} .d52_5 .l span:nth-child(5) {left:79.55%; top:65.55%; color:#009FAB;} .d52_5 .l span:nth-child(6) {left:17.55%; top:69.55%; color:#E86A08;} .d52_5 .l span:nth-child(7) {left:58.15%; top:69.55%; color:#0671BF;} .d52_5 .l span:nth-child(8) {left:28.15%; top:83.55%; color:#E86A08;} .d52_5 .l span:nth-child(9) {left:40.55%; top:83.55%; color:#009FAB;} .d52_5 .l span:nth-child(10) {left:54.55%; top:83.55%; color:#0671BF;} .d52_5 .l span:nth-child(11) {left:auto; right:0; top:83.55%; text-align:right; opacity:0.5;} .d52_5 .l span:nth-child(12) {display:flex; flex-direction:column; left:0; top:90.55%; font-size:1rem; line-height:1.6; width:100%; text-align:center;} .d52_5 .l span:nth-child(12) strong {font-weight:normal; color:#009FAB;} .d52_5 .l p {} .d52_5 .l p sup {font-size:0.75rem;} .d52_5 .l span.tip {display:block; margin-top:1.25rem; position:static; color:rgba(255,255,255,0.3); font-size:0.75rem;} .d52_5 .r {width:calc(55% - 2.5rem); margin-top:3.125rem; text-align:center;} .d52_5 .r ul {display:flex; margin-bottom:1.875rem;} .d52_5 .r ul li {width:50%;} .d52_5 .r ul li .cell {} .d52_5 .r ul li .img {width:100%; margin-bottom:0.625rem;} .d52_5 .r ul li .img span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d52_5 .r ul li .text {} .d52_5 .r ul li .text p {padding:0; text-align:center; font-size:1rem;} .d52_5 .r p {text-align:left;} /**/ .d52_6 {padding:20rem 0; background:#000000 url("../images/p52/006_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed; overflow:hidden;} .d52_6 .text {color:#FFFFFF;} .d52_6 .text p {font-size:2.75rem; font-weight:bold; text-align:center; width:80%; margin:auto; line-height:1.2;} /**/ .d52_7 {padding:0 0 2.5rem; background:url("../images/p52/007_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d52_7 .img {position:relative; max-width:77.5rem; margin:auto;} .d52_7 .img picture {display:block; width:60%;} .d52_7 .img picture span {display:block; width:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d52_7 .img picture:nth-child(2), .d52_7 .img picture:nth-child(3) {position:absolute; left:0; width:100%; display:flex; flex-direction:column; align-items:flex-end;} .d52_7 .img picture:nth-child(2) {top:16.35%;} .d52_7 .img picture:nth-child(3) {bottom:calc(15.15% - 2.5rem);} .d52_7 .img picture:nth-child(1) span {padding-top:122.69%;} .d52_7 .img picture:nth-child(2) span, .d52_7 .img picture:nth-child(3) span {width:30%; padding-top:17.55%;} .d52_7 .img picture:nth-child(2) em {display:block; width:30%; height:1px; position:absolute; left:27%; top:91%; background:#0078B9;} .d52_7 .img picture:nth-child(2) em i:nth-child(1) {display:block; width:1px; height:9.375rem; position:absolute; left:100%; top:-9.3125rem; background:#0078B9;} .d52_7 .img picture:nth-child(2) em i:nth-child(2) {display:block; width:45%; height:1px; position:absolute; left:100%; top:-9.375rem; background:#0078B9;} .d52_7 .img picture:nth-child(3) em {display:block; width:37%; height:1px; position:absolute; left:33.55%; top:41%; background:#0078B9;} .d52_7 .img picture:nth-child(3) em i:nth-child(1) {display:block; width:1px; height:11.6875rem; position:absolute; left:0; top:-11.6875rem; background:#0078B9;} .d52_7 .img picture p {width:30%; margin-top:1.25rem;} .d52_7 .img picture p span {} /**/ .d52_8 {padding:20rem 0; background:#000000 url("../images/p52/008_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed; overflow:hidden;} .d52_8 .text {color:#FFFFFF;} .d52_8 .text p {font-size:2.75rem; font-weight:bold; text-align:center; width:80%; margin:auto; line-height:1.2;} /**/ .d52_9 {overflow:hidden;} .d52_9 .it {position:relative; height:100vh; background:#000000 url("../images/p52/009_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .d52_9 .machine {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:80%; display:flex; justify-content:right;} .d52_9 .machine .cover {position:absolute; display:flex; flex-direction:column; justify-content:center; width:auto; height:100%;} .d52_9 .machine .cover span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d52_9 .machine .cover:nth-child(1) {width:auto; aspect-ratio:1199/2526; right:48%; top:20%;} .d52_9 .machine .cover:nth-child(2) {width:auto; height:70%; aspect-ratio:1200/2412; left:55%; top:5%;} .d52_9 .machine.move .cover:nth-child(1) {transform:translateX(-40%) translateY(-8%); -webkit-transition:all 2s; transition:all 2s; -moz-transition:all 2s;} .d52_9 .machine.move .cover:nth-child(2) {transform:translateX(40%) translateY(5%); -webkit-transition:all 2s; transition:all 2s; -moz-transition:all 2s;} .d52_9 .moreinfo {margin-top:2.3125rem; padding:2.5rem; position:absolute; top:50%; transform:translateX(0) translateY(-50%);} .d52_9 .moreinfo ul {display:flex;} .d52_9 .moreinfo ul li {width:31.25rem; padding:0 0.3125rem;} .d52_9 .moreinfo ul li:nth-child(1), .d52_9 .moreinfo ul li:nth-child(5) {width:45.125rem;} .d52_9 .moreinfo ul li:nth-child(2) .cell, .d52_9 .moreinfo ul li:nth-child(4) .cell, .d52_9 .moreinfo ul li:nth-child(6) .cell {display:flex; flex-wrap:wrap; flex-direction:column-reverse;} .d52_9 .moreinfo ul li .img {width:100%; height:auto;} .d52_9 .moreinfo ul li .img span {display:block; width:100%; background-color:#8E8D8F; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d52_9 .moreinfo ul li:nth-child(1) .img span, .d52_9 .moreinfo ul li:nth-child(5) .img span {aspect-ratio:1200/880;} .d52_9 .moreinfo ul li:nth-child(2) .img span, .d52_9 .moreinfo ul li:nth-child(3) .img span, .d52_9 .moreinfo ul li:nth-child(4) .img span, .d52_9 .moreinfo ul li:nth-child(6) .img span {aspect-ratio:1200/1280;} .d52_9 .moreinfo ul li:nth-child(3) .img span, .d52_9 .moreinfo ul li:nth-child(5) .img span {background-color:#3E3A39;} .d52_9 .moreinfo ul li .text {margin:0.625rem 0 0 0; padding:2.5rem 0.625rem; background:#8E8D8F;} .d52_9 .moreinfo ul li .text p {font-size:1rem; line-height:1.4; color:#FFFFFF; text-align:center; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d52_9 .moreinfo ul li:nth-child(2) .text, .d52_9 .moreinfo ul li:nth-child(4) .text, .d52_9 .moreinfo ul li:nth-child(6) .text {margin:0 0 0.625rem 0;} .d52_9 .moreinfo ul li:nth-child(3) .text, .d52_9 .moreinfo ul li:nth-child(5) .text{background:#3E3A39;} /**/ .d52_10 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d52_10 h2 {font-size:2.75rem; text-align:center; color:#FFFFFF;} .d52_10 .swiper-container .img_box {padding-top:75%;} .d52_10 .swiper-container .img_box span {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%) scale(0.8); background-position:center center; background-repeat:no-repeat; background-size:cover;} /****************************************/ /* products detail: TJ001 */ /****************************************/ /**/ .sel_products_detail_53 {} /**/ .d53_1 {position:relative; background:#000000 url("../images/p53/001_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d53_1 .main {padding:20rem 0; position:relative; display:flex; justify-content:flex-end;} .d53_1 .text {color:#FFFFFF; width:50%;} .d53_1 .text h1 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .d53_1 .text h1 sup {font-size:1.375rem; padding-left:0.25rem;} .d53_1 .text p {font-size:1.75rem; line-height:1.4;} /**/ .d53_2 {padding:9.375rem 0; color:#FFFFFF; background:#000000; overflow:hidden;} .d53_2 .text {color:#FFFFFF;} .d53_2 .text h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d53_2 .text p {font-size:1.375rem;} .d53_2 .text p span {display:block;} .d53_2 .text p span sup {font-size:0.75rem;} .d53_2 p {font-size:1.375rem;} .d53_2 .lr {display:flex; justify-content:space-between;} .d53_2 .l {width:calc(50% - 2.5rem);} .d53_2 .l .pm {position:relative; margin-bottom:1.25rem; padding-top:100%; width:100%;} .d53_2 .l .lazy {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d53_2 .l span {position:absolute; left:0; top:0; font-size:0.875rem;} .d53_2 .l span:nth-child(2) {left:3.55%; top:11.55%; opacity:0.5;} .d53_2 .l span:nth-child(3) {left:36.15%; top:19.55%; color:#009FAB;} .d53_2 .l span:nth-child(4) {left:62.55%; top:27.55%; color:#009FAB;} .d53_2 .l span:nth-child(5) {left:79.55%; top:65.55%; color:#009FAB;} .d53_2 .l span:nth-child(6) {left:17.55%; top:69.55%; color:#E86A08;} .d53_2 .l span:nth-child(7) {left:58.15%; top:69.55%; color:#0671BF;} .d53_2 .l span:nth-child(8) {left:28.15%; top:83.55%; color:#E86A08;} .d53_2 .l span:nth-child(9) {left:40.55%; top:83.55%; color:#009FAB;} .d53_2 .l span:nth-child(10) {left:54.55%; top:83.55%; color:#0671BF;} .d53_2 .l span:nth-child(11) {left:auto; right:0; top:83.55%; text-align:right; opacity:0.5;} .d53_2 .l span:nth-child(12) {display:flex; flex-direction:column; left:0; top:92.55%; font-size:1rem; line-height:1.6; width:100%; text-align:center;} .d53_2 .l span:nth-child(12) strong {font-weight:normal; color:#009FAB;} .d53_2 .l p {} .d53_2 .l p sup {font-size:0.75rem;} .d53_2 .l span.tip {display:block; margin-top:1.25rem; position:static; color:rgba(255,255,255,0.3); font-size:0.75rem;} .d53_2 .r {width:calc(50% - 2.5rem); position:relative;} .d53_2 .r span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d53_2 .r p {position:absolute; left:45.55%; top:50.15%; width:50%; font-size:0.875rem; text-align:center;} /**/ .d53_3 {padding:18.75rem 0; position:relative; background:#000000 url("../images/p53/003_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; background-attachment:fixed; overflow:hidden;} .d53_3 .text {color:#FFFFFF;} .d53_3 .text h2 {font-size:2.75rem; margin-bottom:1.25rem;} .d53_3 .text p {font-size:1.375rem;} .d53_3 .text p span {display:block;} /**/ .d53_4 {padding:5rem 0;} .d53_4 .lr {display:flex; justify-content:space-between; align-items:center; flex-direction:row-reverse; padding:12.5rem 0; position:relative; background:#000000 url("../images/p53/004_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden; box-shadow:10px 10px 20px rgba(0,0,0,0.3);} .d53_4 .text {width:45%; color:#FFFFFF; padding-right:2.5rem;} .d53_4 .text h2 {font-size:2.5rem; margin-bottom:1.25rem;} .d53_4 .text p {font-size:1.125rem;} .d53_4 .text p span {display:block;} .d53_4 .img {width:55%; position:absolute; left:0; top:25%;} .d53_4 .img span {display:block; width:100%; padding-top:38.95%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d53_5 {padding:5rem 0; position:relative; background:url("../images/p53/005_bg.jpg") no-repeat scroll center center / 100% auto; background-size:cover; overflow:hidden;} .d53_5 .lr {display:flex; justify-content:space-between; align-items:center; flex-direction:row-reverse;} .d53_5 .text {width:45%;} .d53_5 .text h2 {font-size:2.5rem; margin-bottom:1.25rem;} .d53_5 .text p {font-size:1.125rem; color:rgba(0, 0, 0, 0.6);} .d53_5 .text p span {display:block;} .d53_5 .text p span em {display:inline-block; width:0.3125rem; height:0.3125rem; margin-right:0.625rem; transform:translateY(-0.125rem); border-radius:100%; background:rgba(0, 0, 0, 0.2);} .d53_5 .img {width:50%;} .d53_5 .img span {display:block; width:100%; padding-top:66.67%; border-radius:1.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} /****************************************/ /* products detail: ProPet EQ */ /****************************************/ /**/ .sel_products_detail_54 {} /**/ .d54_1 {padding:9.375rem 0; background-color:rgba(0, 0, 0, 1.0); background-image:url("../images/p54/001_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_1 .main {display:flex; flex-direction:column; align-items:flex-end;} .d54_1 .shead {width:30%; text-align:center;} .d54_1 .shead h1 {display:inline-block; font-size:4.5rem; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); background:linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_1 .shead p {font-size:1.375rem; color:rgba(255, 255, 255, 0.9);} .d54_1 .img {width:30%; margin-top:4.5rem;} .d54_1 .img span {display:block; width:100%; padding-top:113%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d54_2 {padding:9.375rem 0; background-image:url("../images/p54/002_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_2 .main {display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row-reverse; align-items:center;} .d54_2 .text {width:50%;} .d54_2 .text h2 {display:inline-block; margin-bottom:2.5rem; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); background:linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_2 .text h2 sup {font-size:1rem;} .d54_2 .text p {font-size:1.375rem; color:rgba(255, 255, 255, 0.9);} .d54_2 .text p:nth-child(2) {margin-bottom:0.625rem;} .d54_2 .text p sup {font-size:0.625rem;} .d54_2 .img {width:50%; padding-right:4.5rem;} .d54_2 .img span {display:block; width:100%; padding-top:89.58%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d54_3 {padding:9.375rem 0 45rem; position:relative; text-align:center; background-image:url("../images/p54/003_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_3 h2 {display:inline-block; margin-bottom:2.5rem; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1)); background:linear-gradient(45deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_3 .probes_zoom {} .d54_3 .probes_zoom ul {} .d54_3 .probes_zoom ul li {position:absolute; z-index:1; opacity:0; animation:d54_3_dots_show 1s ease forwards; animation-play-state:paused;} .d54_3 .probes_zoom ul li .cell {display:flex; align-items:center; position:absolute; --w_span:7rem;/*节点尺寸*/} .d54_3 .probes_zoom ul li span {display:block; width:calc(var(--w_span)); height:calc(var(--w_span)); border:1px solid rgba(255, 255, 255, 0.46); border-radius:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_3 .probes_zoom ul li p {display:inline-block; font-size:1.125rem; font-weight:bold; white-space:nowrap; position:absolute; top:50%; transform:translateY(-50%); background:-webkit-linear-gradient(45deg, rgba(251, 210, 108, 1), rgba(192, 218, 234, 1)); background:linear-gradient(45deg, rgba(251, 210, 108, 1), rgba(192, 218, 234, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_3 .probes_zoom ul li em {display:block;} .d54_3 .probes_zoom ul li em::after {content:""; position:absolute; --w_em:0.625rem;/*指示点尺寸*/ width:calc(var(--w_em)); height:calc(var(--w_em)); border-radius:100%; background:linear-gradient(90deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1));} .d54_3 .probes_zoom ul li em i {display:block; width:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_3 .probes_zoom ul li:nth-child(1) {left:59.55%; top:32.55%; animation-delay:1s;} .d54_3 .probes_zoom ul li:nth-child(1) .cell {right:100%; top:calc(-1*var(--w_span)/2);} .d54_3 .probes_zoom ul li:nth-child(1) p {left:100%; margin:-1.125rem 0 0 0.5rem;} .d54_3 .probes_zoom ul li:nth-child(1) em {width:9.15rem;} .d54_3 .probes_zoom ul li:nth-child(1) em::after {right:calc(-1*var(--w_em)/2); bottom:calc(-1*var(--w_em)/2);} .d54_3 .probes_zoom ul li:nth-child(1) em i {padding-top:142%; background-image:url('../images/p54/003_line_1.png');} .d54_3 .probes_zoom ul li:nth-child(2) {left:76.55%; top:44.55%; animation-delay:1.3s;} .d54_3 .probes_zoom ul li:nth-child(2) .cell {left:100%; top:calc(-1*var(--w_span)/2);} .d54_3 .probes_zoom ul li:nth-child(2) p {right:100%; margin:-1.125rem 0.5rem 0 0;} .d54_3 .probes_zoom ul li:nth-child(2) em {width:9.26rem;} .d54_3 .probes_zoom ul li:nth-child(2) em::after {left:calc(-1*var(--w_em)/2); bottom:calc(-1*var(--w_em)/2);} .d54_3 .probes_zoom ul li:nth-child(2) em i {padding-top:51.1%; background-image:url('../images/p54/003_line_2.png');} .d54_3 .probes_zoom ul li:nth-child(3) {left:47.55%; top:73.55%; animation-delay:1.6s;} .d54_3 .probes_zoom ul li:nth-child(3) .cell {right:100%; top:calc(-1*var(--w_span)/2);} .d54_3 .probes_zoom ul li:nth-child(3) p {left:100%; margin:-1.125rem 0 0 0.5rem;} .d54_3 .probes_zoom ul li:nth-child(3) em {width:9.26rem;} .d54_3 .probes_zoom ul li:nth-child(3) em::after {right:calc(-1*var(--w_em)/2); bottom:calc(-1*var(--w_em)/2);} .d54_3 .probes_zoom ul li:nth-child(3) em i {padding-top:51.1%; background-image:url('../images/p54/003_line_3.png');} .d54_3 .probes_zoom ul li:nth-child(4) {left:65.55%; top:64.55%; animation-delay:1.9s;} .d54_3 .probes_zoom ul li:nth-child(4) .cell {left:100%; bottom:calc(-1*var(--w_span)/2);} .d54_3 .probes_zoom ul li:nth-child(4) p {right:100%; margin:1.125rem 1.125rem 0 0;} .d54_3 .probes_zoom ul li:nth-child(4) em {width:6.97rem;} .d54_3 .probes_zoom ul li:nth-child(4) em::after {left:calc(-1*var(--w_em)/2); top:calc(-1*var(--w_em)/2);} .d54_3 .probes_zoom ul li:nth-child(4) em i {padding-top:77.6%; background-image:url('../images/p54/003_line_4.png');} .d54_3 .probes_zoom ul li:nth-child(5) {left:80.55%; top:73.55%; animation-delay:2.2s;} .d54_3 .probes_zoom ul li:nth-child(5) .cell {left:100%; bottom:calc(-1*var(--w_span)/2);} .d54_3 .probes_zoom ul li:nth-child(5) p {right:100%; margin:1.125rem 1.125rem 0 0;} .d54_3 .probes_zoom ul li:nth-child(5) em {width:9.26rem;} .d54_3 .probes_zoom ul li:nth-child(5) em::after {left:calc(-1*var(--w_em)/2); top:calc(-1*var(--w_em)/2);} .d54_3 .probes_zoom ul li:nth-child(5) em i {padding-top:51.1%; background-image:url('../images/p54/003_line_5.png');} .d54_3.move .probes_zoom ul li {animation-play-state:running;} @keyframes d54_3_dots_show { 0% { } 100% { opacity:1; transform:translateX(0.625rem); } } /**/ .d54_4 {padding:9.375rem 0 6.25rem; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.6)); overflow:hidden;} .d54_4 .main {} .d54_4 .swiper-container {padding:0 0 5rem 0;} .d54_4 .swiper-container .swiper-wrapper {align-items:stretch;} .d54_4 .swiper-container .swiper-slide {height:auto; padding:1.875rem; background:linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0.2)); border-radius:1.25rem;} .d54_4 .swiper-container .swiper-slide::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(255, 255, 255, 0.3); border-radius:1.25rem;} .d54_4 .swiper-container .swiper-slide .img_box {width:100%; padding-top:56.25%; position:relative;} .d54_4 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_4 .swiper-container .swiper-slide .text {margin:1.875rem 0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d54_4 .swiper-container .swiper-slide .text h3 {display:inline-block; font-size:1.125rem; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1)); background:linear-gradient(45deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_4 .swiper-container .swiper-slide .text p {font-size:1rem; color:#FFFFFF; line-height:1.6; opacity:0.8;} .d54_4 .swiper-container .swiper-pagination {display:none;} .d54_4 .swiper-container .swiper-button-prev, .d54_4 .swiper-container .swiper-button-next {left:50%; top:auto; right:auto; bottom:0; transform:translateX(-50%); width:2.5rem; height:2.5rem; border-radius:100%; background-color:rgba(255, 255, 255, 0.9); background-position:center center; background-repeat:no-repeat; background-size:20% auto; transition:all 0.3s;} .d54_4 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 2rem)); background-image:url("../images/p54/prev.svg");} .d54_4 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 2rem)); background-image:url("../images/p54/next.svg");} .d54_4 .swiper-container .swiper-button-prev:hover, .d54_4 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1);} /**/ .d54_5 {padding:20rem 0; text-align:center; background-image:url("../images/p54/005_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_5 .main {} .d54_5 h2 {display:inline-block; margin-bottom:2.5rem; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); background:linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_5 p {font-size:1.375rem; color:rgba(255,255,255,0.9); width:80%; margin:auto;} .d54_5 ul {margin:6.4rem auto 0; width:100%; max-width:40rem; display:flex; justify-content:space-between; text-align:center;} .d54_5 ul li {} .d54_5 ul li .cell {} .d54_5 ul li span {display:block; margin:0 auto 0.625rem; width:6.25rem; height:6.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_5 ul li p {font-size:0.875rem; color:#FFFFFF; width:100%;} /**/ .d54_6 {padding:9.375rem 0 6.25rem; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.6)); overflow:hidden;} .d54_6 .main {} .d54_6 .swiper-container {padding:0 0 5rem 0;} .d54_6 .swiper-container .swiper-wrapper {align-items:stretch;} .d54_6 .swiper-container .swiper-slide {height:auto; padding:1.875rem; background:linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0.2)); border-radius:1.25rem;} .d54_6 .swiper-container .swiper-slide::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(255, 255, 255, 0.3); border-radius:1.25rem;} .d54_6 .swiper-container .swiper-slide .img_box {width:100%; padding-top:56.25%; position:relative;} .d54_6 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_6 .swiper-container .swiper-slide .text {margin:1.875rem 0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d54_6 .swiper-container .swiper-slide .text h3 {display:inline-block; font-size:1.125rem; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1)); background:linear-gradient(45deg, rgba(252, 211, 108, 1), rgba(135, 156, 167, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_6 .swiper-container .swiper-slide .text p {font-size:1rem; color:#FFFFFF; line-height:1.6; opacity:0.8;} .d54_6 .swiper-container .swiper-pagination {display:none;} .d54_6 .swiper-container .swiper-button-prev, .d54_6 .swiper-container .swiper-button-next {left:50%; top:auto; right:auto; bottom:0; transform:translateX(-50%); width:2.5rem; height:2.5rem; border-radius:100%; background-color:rgba(255, 255, 255, 0.9); background-position:center center; background-repeat:no-repeat; background-size:20% auto; transition:all 0.3s;} .d54_6 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 2rem)); background-image:url("../images/p54/prev.svg");} .d54_6 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 2rem)); background-image:url("../images/p54/next.svg");} .d54_6 .swiper-container .swiper-button-prev:hover, .d54_6 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1);} /**/ .d54_7 {padding:20rem 0; text-align:center; background-image:url("../images/p54/007_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} .d54_7 h2 {display:inline-block; margin-bottom:2.5rem; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); background:linear-gradient(45deg, rgba(252,211,108,1), rgba(135,156,167,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d54_7 p {width:80%; margin:auto; font-size:1.375rem; color:rgba(255,255,255,0.9);} /**/ .d54_8 {background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d54_8 .pin {height:calc(100vh - 4.375rem); display:flex; justify-content:center; align-items:center;} .d54_8 .main {width:100%;} .d54_8 .list {position:relative; --h:30rem; height:var(--h);} .d54_8 .list ul {display:flex; text-align:center; position:absolute; left:0; top:0; height:100%;} .d54_8 .list ul li {width:24rem; margin-right:4.5rem;} .d54_8 .list ul li:last-child {margin:0;} .d54_8 .list ul li .cell {position:relative; height:100%;} .d54_8 .list ul li .img {height:100%;} .d54_8 .list ul li .img span {display:block; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.1); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d54_8 .list ul li .text {position:absolute; left:0; top:0; width:100%; padding:2.5rem;} .d54_8 .list ul li .text h3 {color:#FFFFFF; font-size:1.375rem;} /****************************************/ /* products: E11 */ /****************************************/ /**/ .sel_products_detail_55 {} /**/ .d55_1 {color:#FFFFFF; background:rgba(0,0,0,1); } .d55_1 .wrap {padding:12.5rem 0; height:calc(100vh - 6.25rem); background-image:url("../images/p55/001_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_1 .main {} .d55_1 .shead {} .d55_1 .shead h2 {opacity:0; display:flex; flex-direction:column; align-items:flex-start; font-size:2.5rem; animation:d55_1_move 1s 1 alternate forwards; animation-play-state:running;} .d55_1 .shead h2 span {display:inline-block; background:-webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 70%, rgba(0, 59, 144, 1)); background:linear-gradient(90deg, rgba(0, 0, 0, 1) 50%, rgba(0, 59, 144, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d55_1 .shead h1 {opacity:0; font-size:4.5rem; font-style:italic; line-height:1; margin:2.5rem auto 0; animation:d55_1_move 1s 1 alternate forwards; animation-delay:0.3s; animation-play-state:running;} .d55_1 .shead p {opacity:0; font-size:1.125rem; font-style:italic; animation:d55_1_move 1s 1 alternate forwards; animation-delay:0.3s; animation-play-state:running;} .d55_1 .img {opacity:0; width:25%; margin:2.875rem auto 0 -2.5rem; animation:d55_1_move 1s 1 alternate forwards; animation-delay:0.6s; animation-play-state:running;} .d55_1 .img span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} @keyframes d55_1_move { 0% { opacity:0; transform:translateY(0.625rem); } 100% { opacity:1; transform:translateY(0); } } .d55_1 .intro {padding:6.25rem 0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_1 .intro p {width:80%; margin:auto; font-size:1.375rem; text-align:center;} .d55_1 .intro p sup {font-size:0.625rem;} .d55_1 .intro p sup i {display:inline-block; transform:translateY(-0.125rem); font-size:0.625rem;} /**/ .d55_2 {color:#FFFFFF; text-align:center; background-color:rgba(0, 0, 0, 1); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d55_2 .wrap {position:relative;} .d55_2 .wrap::before {content:""; position:absolute; z-index:1; left:0; top:0; width:100%; height:50%; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .d55_2 .wrap::after {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));} .d55_2 .main {padding:9.375rem 0 4.5rem; display:flex; flex-direction:column; justify-content:space-between; height:100vh; position:relative; z-index:2;} .d55_2 .text {} .d55_2 .text h2 {font-size:2.75rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgb(255, 255, 255) 70%, rgba(193,205,224,1)); background:linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(193,205,224,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d55_2 .text h2 sup {font-size:1rem;} .d55_2 .text h2 sup i {display:inline-block; transform:translateY(-0.3125rem); font-size:0.75rem;} .d55_2 .text p {font-size:1.375rem;} .d55_2 .img {} .d55_2 .img ul {display:flex; flex-wrap:wrap; justify-content:space-between;} .d55_2 .img ul li {width:46%; color:#CCCCCC;} .d55_2 .img ul li .cell {} .d55_2 .img ul li .l_icon {display:block; margin:auto; width:3rem; height:3rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_2 .img ul li h4 {margin:0.625rem auto 1.25rem; font-size:1.125rem;} .d55_2 .img ul li dl {display:flex; justify-content:space-between; transform:translateY(1.25rem);} .d55_2 .img ul li dl dd {flex:1; margin:0 0.125rem;} .d55_2 .img ul li dl dd:nth-child(2) {transform:translateY(-3.5rem);} .d55_2 .img ul li dl dd .d_icon {display:block; margin:auto; width:2.5rem; height:2.5rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_2 .img ul li dl dd p {font-size:1rem; line-height:1.2; margin-top:0.625rem; position:relative;} .d55_2 .img ul li dl dd p::after {content:""; position:absolute; right:auto; bottom:-0.125rem; margin-left:0.3125rem; width:1.25rem; height:1.25rem; background-image:url("../images/p55/002_arrow.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_2 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} /**/ .d55_3 {padding:9.375rem 0; text-align:center; background-color:#ECEEED; background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d55_3 .topic {} .d55_3 .topic h2 {margin-bottom:1.25rem; font-size:2.75rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 70%, rgba(0, 59, 144, 1)); background:linear-gradient(90deg, rgba(0, 0, 0, 1) 50%, rgba(0, 59, 144, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d55_3 .topic p {font-size:1.125rem; width:80%; margin:auto;} .d55_3 .s_tab {margin:4.5rem auto; width:65%; display:flex;} .d55_3 .s_tab span {display:flex; justify-content:center; align-items:center; flex:1; position:relative; padding:1.25rem 0.625rem; cursor:pointer;} .d55_3 .s_tab span::after {opacity:0.3; content:""; position:absolute; left:0; top:0; width:calc(100% + 0.625rem - 0.3125rem); height:100%; background:#FFFFFF; clip-path:polygon(0.625rem 0%, 100% 0%, calc(100% - 0.625rem) 50%, 100% 100%, 0.625rem 100%, 0% 50%); transition:all 0.3s;} .d55_3 .s_tab span em {display:block; font-size:1rem; font-style:normal; position:relative; z-index:1; transition:all 0.3s;} .d55_3 .s_tab span:hover em {} .d55_3 .s_tab span:hover::after {opacity:1;} .d55_3 .s_tab span.active em {} .d55_3 .s_tab span.active::after {opacity:1;} .d55_3 .box {position:relative;} .d55_3 .box .swiper-container {visibility:hidden; height:0; opacity:0; padding:0; transform:translateX(2.5rem); transition:all 0.3s;} .d55_3 .box .swiper-container.swiper_1 .swiper-wrapper, .d55_3 .box .swiper-container.swiper_3 .swiper-wrapper, .d55_3 .box .swiper-container.swiper_4 .swiper-wrapper, .d55_3 .box .swiper-container.swiper_5 .swiper-wrapper {justify-content:center;} .d55_3 .box .swiper-container.swiper_1 .swiper-wrapper .swiper-slide:last-child, .d55_3 .box .swiper-container.swiper_3 .swiper-wrapper .swiper-slide:last-child, .d55_3 .box .swiper-container.swiper_4 .swiper-wrapper .swiper-slide:last-child, .d55_3 .box .swiper-container.swiper_5 .swiper-wrapper .swiper-slide:last-child {margin:0!important;} .d55_3 .box .swiper-container .swiper-slide .img_box {position:relative; padding-top:75%;} .d55_3 .box .swiper-container .swiper-slide .img_box img {position:absolute; left:0; top:0; width:100%; height:100%; transition:all 0.3s;} .d55_3 .box .swiper-container .swiper-slide .img_box video {position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; transition:all 0.3s;} .d55_3 .box .swiper-container .swiper-slide .img_box i {display:block; width:1.25rem; height:1.25rem; position:absolute; z-index:2; right:0.625rem; bottom:0.625rem;} .d55_3 .box .swiper-container .swiper-slide .img_box i::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p55/maximize.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_3 .box .swiper-container .swiper-slide .img_box i::after {opacity:0; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p55/maximize_active.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d55_3 .box .swiper-container .swiper-slide .text {color:rgba(0, 0, 0, 0.8);} .d55_3 .box .swiper-container .swiper-slide .text h3 {font-size:1rem; font-weight:normal;} .d55_3 .box .swiper-container .swiper-button-prev, .d55_3 .box .swiper-container .swiper-button-next, .d55_3 .box .swiper-container .swiper-pagination {display:none;} .d55_3 .box .swiper-container.active {visibility:visible; opacity:1; height:auto; transform:translateX(0);} .d55_3 .box .swiper-container .swiper-slide:hover .img_box img, .d55_3 .box .swiper-container .swiper-slide:hover .img_box video {transform:scale(1.05);} .d55_3 .box .swiper-container .swiper-slide:hover .img_box i::after {opacity:1;} .d55_3 .lightbox {position:fixed; z-index:40; left:0; top:0; width:100%; height:0; background:#FFFFFF; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_3 .lightbox .swiper-container {visibility:hidden; height:0; opacity:0; padding:0;} .d55_3 .lightbox .swiper-container .swiper-slide .it {display:flex; align-content:center; flex-wrap:wrap; height:100vh;} .d55_3 .lightbox .swiper-container .swiper-slide .img_box {width:50%; position:relative; padding-top:37.5%;} .d55_3 .lightbox .swiper-container .swiper-slide .img_box img {position:absolute; left:0; top:0; width:100%; height:100%;} .d55_3 .lightbox .swiper-container .swiper-slide .img_box video {position:absolute; z-index:1; left:0; top:0; width:100%; height:100%;} .d55_3 .lightbox .swiper-container .swiper-slide .text {width:50%; margin:0; padding-left:4.5rem; color:rgba(0, 0, 0, 0.8); text-align:left;} .d55_3 .lightbox .swiper-container .swiper-slide .text h3 {font-size:1.875rem; margin-bottom:1.125rem;} .d55_3 .lightbox .swiper-container .swiper-slide .text p {font-size:1.125rem;} .d55_3 .lightbox .swiper-container .swiper-button-prev {background-image:url("../images/p55/prev.svg"); background-position:center center; background-repeat:no-repeat; background-size:25% auto;} .d55_3 .lightbox .swiper-container .swiper-button-next {background-image:url("../images/p55/next.svg"); background-position:center center; background-repeat:no-repeat; background-size:25% auto;} .d55_3 .lightbox .swiper-container .swiper-button-prev:hover, .d55_3 .lightbox .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 0.5);} .d55_3 .lightbox .swiper-container .swiper-pagination {bottom:4.5rem;} .d55_3 .lightbox .swiper-container .swiper-pagination span {opacity:1; width:0.875rem; height:0.875rem; background:#969696;} .d55_3 .lightbox .swiper-container .swiper-pagination span.swiper-pagination-bullet-active {background:rgba(0,59,144,1);} .d55_3 .lightbox .swiper-container .swiper-pagination {bottom:4.5rem;} .d55_3 .lightbox .swiper-container .swiper-pagination span {} .d55_3 .lightbox .close {opacity:0; visibility:hidden; position:absolute; z-index:1; right:2.5rem; top:2.5rem; width:2.5rem; height:2.5rem; cursor:pointer; background-image:url("../images/p55/minimize.svg"); background-position:center center; background-repeat:no-repeat; background-size:70% auto;} .d55_3 .lightbox .close:hover {opacity:1;} .d55_3 .lightbox.active {height:100%;} .d55_3 .lightbox.active .swiper-container.active {visibility:visible; opacity:1; height:auto;} .d55_3 .lightbox.active .close {opacity:1; visibility:visible;} /**/ .d55_4 {position:relative; text-align:center; color:#FFFFFF; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d55_4 h2 {display:flex; flex-direction:column; align-items:center; font-size:2.75rem; position:absolute; z-index:1; left:0; top:9.375rem; width:100%;} .d55_4 h2 span {display:inline-block; color:rgba(255, 255, 255, 1);} .d55_4 .main {} .d55_4 ul {width:100%; height:calc(100vh); position:relative;} .d55_4 ul li {opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d55_4 ul li .cell {width:100%; height:100%; position:relative;} .d55_4 ul li .machine {position:absolute; left:50%; top:calc(50% + 7.5rem); transform:translateX(-50%) translateY(-50%); width:13%;} .d55_4 ul li .machine i {display:block; width:100%; padding-top:254%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_4 ul li .machine b {font-size:1.875rem; font-weight:normal; line-height:1; white-space:nowrap; position:absolute;} .d55_4 ul li .machine .m_1 {opacity:0; transform:translateX(0.625rem); width:6.25rem; position:absolute; right:calc(100% + 1.25rem); top:17.5%; transition:all 1s;} .d55_4 ul li .machine .m_1 i {padding-top:52.5%;} .d55_4 ul li .machine .m_1 b {right:10%; top:calc(100% + 0.3125rem);} .d55_4 ul li .machine .m_2 {opacity:0; transform:translateX(0); width:4.4rem; position:absolute; left:77%; top:41%; transition:all 1s;} .d55_4 ul li .machine .m_2 i {padding-top:93%;} .d55_4 ul li .machine .m_2 b {left:calc(100% + 0.3125rem); top:50%; transform:translateY(-50%);} .d55_4 ul li .machine.active .m_1 {opacity:1; transform:translateX(0); transition-delay:0.3s;} .d55_4 ul li .machine.active .m_2 {opacity:1; transform:translateX(0.625rem); transition-delay:0.3s;} .d55_4 ul li .text {opacity:0; position:absolute; color:#FFFFFF; width:30rem; text-align:left; transform:translateY(0.625rem); transition:all 1s;} .d55_4 ul li .text h3 {font-size:1.875rem;} .d55_4 ul li .text p {font-size:1rem; margin-top:0.625rem;} .d55_4 ul li:nth-child(2) .text, .d55_4 ul li:nth-child(3) .text {left:5%; top:35%;} .d55_4 ul li:nth-child(4) .text, .d55_4 ul li:nth-child(5) .text, .d55_4 ul li:nth-child(6) .text {right:5%; bottom:20%;} .d55_4 ul li span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_4 ul li video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} .d55_4 ul li.active {opacity:1;} .d55_4 ul li.active .text {opacity:1; transform:translateY(0);} .d55_4 .pagination {display:flex; justify-content:center; position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);} .d55_4 .pagination span {display:block; margin:0 0.25rem; width:0.875rem; height:0.875rem; cursor:pointer; border-radius:100%; background:#969696; transition:all 0.3s;} .d55_4 .pagination span.active {background:#FFFFFF;} /**/ .d55_5 {padding:9.375rem 0 12.5rem; position:relative; text-align:center; color:rgb(255, 255, 255); background-color:rgba(0, 0, 0, 1.0); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d55_5::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2);} .d55_5 .main {position:relative; z-index:1;} .d55_5 h2 {font-size:2.75rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgb(255, 255, 255) 70%, rgba(193,205,224,1)); background:linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(193,205,224,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d55_5 .s_tab {margin:4.5rem 0.3125rem 0.3125rem auto; display:flex; justify-content:center; width:calc(100% - 1.25rem - 0.625rem - 0.3125rem);} .d55_5 .s_tab span {position:relative; padding:1.25rem; cursor:pointer; display:flex; flex:1; align-items:center; flex-direction:column;} .d55_5 .s_tab span::after {content:""; position:absolute; left:0; top:0; width:calc(100% + 0.625rem - 0.3125rem); height:100%; background:rgba(255, 255, 255, 0.3); backdrop-filter:blur(0.25rem); -webkit-backdrop-filter:blur(0.25rem); clip-path:polygon(0.625rem 0%, 100% 0%, calc(100% - 0.625rem) 50%, 100% 100%, 0.625rem 100%, 0% 50%); transition:all 0.3s;} .d55_5 .s_tab span i {display:inline-block; position:relative; z-index:1; margin-bottom:0.625rem; width:3.5rem; height:3.5rem; border-radius:100%; border:1px solid rgba(255, 255, 255, 0.3); overflow:hidden;} .d55_5 .s_tab span i::after {opacity:0; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:radial-gradient(circle, #FFFFFF, #009FA8 70%); transition:all 0.3s;} .d55_5 .s_tab span i b {display:block; position:relative; z-index:1; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:80% auto;} .d55_5 .s_tab span em {font-size:0.875rem; font-style:normal; position:relative; z-index:1; transition:all 0.3s;} .d55_5 .s_tab span:hover i, .d55_5 .s_tab span.active i {border-color:transparent;} .d55_5 .s_tab span:hover i::after, .d55_5 .s_tab span.active i::after {opacity:1;} .d55_5 .s_tab span:hover em, .d55_5 .s_tab span.active em {color:#009FA8;} .d55_5 .s_tab span:hover::after, .d55_5 .s_tab span.active::after {background:rgba(255, 255, 255, 0.5);} .d55_5 ul {} .d55_5 ul li {visibility:hidden; opacity:0; height:0; overflow:hidden;} .d55_5 ul li .cell {position:relative;} .d55_5 ul li .cover {width:calc(66.66% + 0.625rem); clip-path:polygon(2.5rem 0%, 100% 0%, calc(100% - 2.5rem) 50%, 100% 100%, 2.5rem 100%, 0% 50%); overflow:hidden;} .d55_5 ul li .cover span {display:block; width:calc(100% + 0.625rem); padding-top:63%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 1s;} .d55_5 ul li .text {width:calc(33.3333% + 2.5rem - 1.25rem + 0.3125rem); height:100%; padding:4.5rem; text-align:left; position:absolute; right:0; top:0; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(90deg, #009FA8, #008DD5); clip-path:polygon(2.5rem 0%, 100% 0%, calc(100% - 2.5rem) 50%, 100% 100%, 2.5rem 100%, 0% 50%); shape-outside:polygon(2.5rem 0%, 100% 0%, calc(100% - 2.5rem) 50%, 100% 100%, 2.5rem 100%, 0% 50%);} .d55_5 ul li .text .inner {opacity:0; transform:translateX(0.3125rem); transition:all 1s;} .d55_5 ul li .text h3 {font-size:1.875rem;} .d55_5 ul li .text h4 {font-size:1.125rem; margin:0.625rem 0 1.25rem;} .d55_5 ul li .text p {font-size:1rem;} .d55_5 ul li.active {visibility:visible; opacity:1; height:auto;} .d55_5 ul li.active .cover span {transform:translateX(-0.625rem);} .d55_5 ul li.active .text .inner {opacity:1; transition-delay:0.1s; transform:translateX(0);} /**/ .d55_6 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d55_6 h2 {font-size:2.75rem; color:#ffffff; text-align:center;} .d55_6 .swiper-container .img_box {width:100%; padding-top:75%; position:relative;} .d55_6 .swiper-container .img_box img {display:block; position:absolute; left:0; top:0; width:100%;} /**/ .d55_side_nav {visibility:hidden; opacity:0; position:fixed; z-index:22; right:0.625rem; top:50%; transform:translateY(-50%); width:3rem; display:flex; flex-direction:column; transition:all 0.3s;} .d55_side_nav.show {visibility:visible; opacity:1;} .d55_side_nav.hide {visibility:hidden; opacity:0;} .d55_side_nav a {width:100%; height:3rem; margin-bottom:0.625rem; cursor:pointer; position:relative;} .d55_side_nav a::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p55/side_nav_icon_normal.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d55_side_nav a::after {opacity:0; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p55/side_nav_icon_active.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d55_side_nav a:last-child {margin:0;} .d55_side_nav a i {display:block; opacity:0.5; position:relative; z-index:1; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:70% auto; transition:all 0.3s;} .d55_side_nav a:nth-child(1) i {background-image:url("../images/p55/side_nav_icon_1.png");} .d55_side_nav a:nth-child(2) i {background-image:url("../images/p55/side_nav_icon_2.png");} .d55_side_nav a:nth-child(3) i {background-image:url("../images/p55/side_nav_icon_3.png");} .d55_side_nav a:nth-child(4) i {background-image:url("../images/p55/side_nav_icon_4.png");} .d55_side_nav a:hover::after {opacity:1;} .d55_side_nav a:hover i {opacity:1;} .d55_side_nav a.active::after {opacity:1;} .d55_side_nav a.active i {opacity:1;} /****************************************/ /* products: X11 */ /****************************************/ /**/ .sel_products_detail_56 {} /**/ .d56_1 {} .d56_1 .wrap {padding:9.375rem 0 0; height:calc(100vh - 6.25rem); background-image:url("../images/p56/001_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_1 .main {} .d56_1 .shead {padding-left:25rem;} .d56_1 .shead h2 {opacity:0; display:flex; flex-direction:column; align-items:flex-start; font-size:2.5rem; animation:d56_1_move 1s 1 alternate forwards; animation-play-state:running;} .d56_1 .shead h2 span {display:inline-block; background:-webkit-linear-gradient(90deg, rgb(0, 59, 144) 70%, rgba(0,159,168,1)); background:linear-gradient(90deg, rgb(0, 59, 144) 70%, rgba(0,159,168,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d56_1 .shead h1 {opacity:0; color:#4c4948; font-size:4.5rem; font-style:italic; line-height:1; margin:2.5rem auto 0; animation:d56_1_move 1s 1 alternate forwards; animation-delay:0.3s; animation-play-state:running;} .d56_1 .shead p {opacity:0; color:#4c4948; font-size:1.125rem; font-style:italic; animation:d56_1_move 1s 1 alternate forwards; animation-delay:0.3s; animation-play-state:running;} @keyframes d56_1_move { 0% { opacity:0; transform:translateY(0.625rem); } 100% { opacity:1; transform:translateY(0); } } .d56_1 .intro {padding:6.25rem 0; background-color:rgba(0,0,0,1); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_1 .intro p {width:80%; margin:auto; color:#FFFFFF; font-size:1.375rem; text-align:center;} .d56_1 .intro p sup {font-size:0.625rem;} .d56_1 .intro p sup i {display:inline-block; transform:translateY(-0.125rem); font-size:0.625rem;} /**/ .d56_2 {color:#FFFFFF; text-align:center; background-color:rgba(0, 0, 0, 1); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d56_2 .wrap {position:relative;} .d56_2 .wrap::before {content:""; position:absolute; z-index:1; left:0; top:0; width:100%; height:50%; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .d56_2 .wrap::after {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));} .d56_2 .main {padding:9.375rem 0 4.5rem; display:flex; flex-direction:column; justify-content:space-between; height:100vh; position:relative; z-index:2;} .d56_2 .text {} .d56_2 .text h2 {font-size:2.75rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgb(255, 255, 255) 70%, rgba(127,197,235,1)); background:linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(127,197,235,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d56_2 .text h2 sup {font-size:1rem;} .d56_2 .text h2 sup i {display:inline-block; transform:translateY(-0.3125rem); font-size:0.75rem;} .d56_2 .text p {font-size:1.375rem;} .d56_2 .img {} .d56_2 .img ul {display:flex; flex-wrap:wrap; justify-content:space-between;} .d56_2 .img ul li {width:46%; color:#CCCCCC;} .d56_2 .img ul li .cell {} .d56_2 .img ul li .l_icon {display:block; margin:auto; width:3rem; height:3rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_2 .img ul li h4 {margin:0.625rem auto 1.25rem; font-size:1.125rem;} .d56_2 .img ul li dl {display:flex; justify-content:space-between; transform:translateY(1.25rem);} .d56_2 .img ul li dl dd {flex:1; margin:0 0.125rem;} .d56_2 .img ul li dl dd:nth-child(2) {transform:translateY(-3.5rem);} .d56_2 .img ul li dl dd .d_icon {display:block; margin:auto; width:2.5rem; height:2.5rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_2 .img ul li dl dd p {font-size:1rem; line-height:1.2; margin-top:0.625rem; position:relative;} .d56_2 .img ul li dl dd p::after {content:""; position:absolute; right:auto; bottom:-0.125rem; margin-left:0.3125rem; width:1.25rem; height:1.25rem; background-image:url("../images/p55/002_arrow.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_2 video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} /**/ .d56_3 {position:relative; text-align:center; color:#FFFFFF; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d56_3 h2 {display:flex; flex-direction:column; align-items:center; font-size:2.75rem; position:absolute; z-index:1; left:0; top:9.375rem; width:100%;} .d56_3 h2 span {display:inline-block; background:-webkit-linear-gradient(90deg, rgb(255, 255, 255) 70%, rgba(127,197,235,1)); background:linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(127,197,235,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d56_3 .main {} .d56_3 ul {width:100%; height:calc(100vh); position:relative;} .d56_3 ul li {opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d56_3 ul li .cell {width:100%; height:100%; position:relative;} .d56_3 ul li .machine {position:absolute; z-index:3; left:50%; top:calc(50%); transform:translateX(-50%) translateY(-50%); width:25%;} .d56_3 ul li .machine i {display:block; width:100%; padding-top:254%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_3 ul li .machine > i {opacity:0;} .d56_3 ul li .machine b {font-size:1.875rem; font-weight:normal; line-height:1; white-space:nowrap; position:absolute;} .d56_3 ul li .machine .m_1 {opacity:0; transform:translateX(0.625rem); width:6.25rem; position:absolute; right:calc(100% + 1.25rem); top:35.5%; transition:all 1s;} .d56_3 ul li .machine .m_1 i {padding-top:52.5%;} .d56_3 ul li .machine .m_1 b {right:10%; top:calc(100% + 0.3125rem);} .d56_3 ul li .machine .m_2 {opacity:0; transform:translateX(0); width:4.4rem; position:absolute; left:80%; top:55%; transition:all 1s;} .d56_3 ul li .machine .m_2 i {padding-top:93%;} .d56_3 ul li .machine .m_2 b {left:calc(100% + 0.3125rem); top:50%; transform:translateY(-50%);} .d56_3 ul li .machine.active .m_1 {opacity:1; transform:translateX(0); transition-delay:0.3s;} .d56_3 ul li .machine.active .m_2 {opacity:1; transform:translateX(0.625rem); transition-delay:0.3s;} .d56_3 ul li .text {opacity:0; position:absolute; color:#FFFFFF; width:30rem; text-align:left; transform:translateY(0.625rem); transition:all 1s;} .d56_3 ul li .text h3 {font-size:1.875rem;} .d56_3 ul li .text p {font-size:1rem; margin-top:0.625rem;} .d56_3 ul li:nth-child(2) .text, .d56_3 ul li:nth-child(3) .text {left:5%; top:35%;} .d56_3 ul li:nth-child(4) .text, .d56_3 ul li:nth-child(5) .text, .d56_3 ul li:nth-child(6) .text {right:5%; bottom:20%;} .d56_3 ul li span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_3 ul li video {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); min-width:100%; min-height:100%;} .d56_3 ul li.active {opacity:1;} .d56_3 ul li.active .text {opacity:1; transform:translateY(0);} .d56_3 .pagination {display:flex; justify-content:center; position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);} .d56_3 .pagination span {display:block; margin:0 0.25rem; width:0.875rem; height:0.875rem; cursor:pointer; border-radius:100%; background:#969696; transition:all 0.3s;} .d56_3 .pagination span.active {background:#009fa8;} /**/ .d56_4 {padding:9.375rem 0; text-align:center; background-color:rgba(0, 0, 0, 1); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_4 h2 {font-size:2.75rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgb(255, 255, 255) 70%, rgba(127,197,235,1)); background:linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(127,197,235,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d56_4 .swiper-container {} .d56_4 .swiper-container .swiper-wrapper {} .d56_4 .swiper-container .swiper-slide {position:relative; border-radius:1.25rem; overflow:hidden;} .d56_4 .swiper-container .swiper-slide::before {content:""; position:absolute; z-index:1; left:0; bottom:0; width:100%; height:6.25rem; background:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); transition:all 0.3s;} .d56_4 .swiper-container .swiper-slide::after {opacity:0; content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8) 50%, rgba(0, 159, 168, 0.9)); transition:all 0.3s;} .d56_4 .swiper-container .swiper-slide .img_box {position:relative; width:100%; padding-top:136%;} .d56_4 .swiper-container .swiper-slide .img_box img {display:block; width:100%; position:absolute; left:0; top:0;} .d56_4 .swiper-container .swiper-slide .text {position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; margin:0; padding:2.5rem 1.25rem; transform:translateY(calc(100% - 12.25rem)); transition:all 0.3s;} .d56_4 .swiper-container .swiper-slide .text .icon {opacity:0; display:block; width:4.5rem; height:4.5rem; margin:0.625rem auto 1.25rem; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d56_4 .swiper-container .swiper-slide .text .icon_1 {background-image:url("../images/p56/004_1_icon.svg");} .d56_4 .swiper-container .swiper-slide .text .icon_2 {background-image:url("../images/p56/004_2_icon.svg");} .d56_4 .swiper-container .swiper-slide .text .icon_3 {background-image:url("../images/p56/004_3_icon.svg");} .d56_4 .swiper-container .swiper-slide .text .icon_4 {background-image:url("../images/p56/004_4_icon.svg");} .d56_4 .swiper-container .swiper-slide .text .icon_5 {background-image:url("../images/p56/004_5_icon.svg");} .d56_4 .swiper-container .swiper-slide .text .icon_6 {background-image:url("../images/p56/004_6_icon.svg");} .d56_4 .swiper-container .swiper-slide .text h3 {font-size:1.375rem; transition:all 0.3s;} .d56_4 .swiper-container .swiper-slide .text h4 {display:none; font-size:1rem; margin:0.625rem 0 1.25rem;} .d56_4 .swiper-container .swiper-slide .text p {display:none; font-size:0.875rem;} .d56_4 .swiper-container .swiper-slide:hover::after {opacity:1;} .d56_4 .swiper-container .swiper-slide:hover .text {transform:translateY(0);} .d56_4 .swiper-container .swiper-slide:hover .text .icon {opacity:1;} .d56_4 .swiper-container .swiper-slide:hover .text h3 {} .d56_4 .swiper-container .swiper-slide:hover .text h4 {display:block;} .d56_4 .swiper-container .swiper-slide:hover .text p {display:block;} .d56_4 .swiper-container .swiper-button-prev {left:6%;} .d56_4 .swiper-container .swiper-button-next {right:6%;} .d56_4 .swiper-container .swiper-pagination span {opacity:1; margin:0 0.25rem; width:0.875rem; height:0.875rem; cursor:pointer; border-radius:100%; background:#969696; transition:all 0.3s;} .d56_4 .swiper-container .swiper-pagination span.swiper-pagination-bullet-active {background:#009fa8;} /**/ .d56_5 {padding:9.375rem 0 12.5rem; text-align:center; background:linear-gradient(180deg, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5));} .d56_5 .topic {} .d56_5 .topic h2 {display:flex; align-items:center; flex-direction:column; margin-bottom:1.25rem; font-size:2.75rem;} .d56_5 .topic h2 span {display:inline-block; background:-webkit-linear-gradient(90deg, rgb(255, 255, 255) 70%, rgba(127,197,235,1)); background:linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(127,197,235,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d56_5 .topic p {font-size:1.125rem; width:80%; margin:auto;} .d56_5 .s_tab {margin:4.5rem auto; width:65%; display:flex; position:relative;} .d56_5 .s_tab::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(255, 255, 255, 0.2);} .d56_5 .s_tab span {flex:1; position:relative; padding:1.25rem; cursor:pointer;} .d56_5 .s_tab span::after {opacity:0; content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#FFFFFF; transition:all 0.3s;} .d56_5 .s_tab span em {opacity:0.5; display:block; color:rgba(255, 255, 255, 1); font-size:1rem; font-style:normal; position:relative; z-index:1; transition:all 0.3s;} .d56_5 .s_tab span:hover em {opacity:1;} .d56_5 .s_tab span:hover::after {opacity:1;} .d56_5 .s_tab span.active em {opacity:1;} .d56_5 .s_tab span.active::after {opacity:1;} .d56_5 .box {position:relative;} .d56_5 .box .swiper-container {visibility:hidden; height:0; opacity:0; padding:0; transform:translateX(2.5rem); transition:all 0.3s;} .d56_5 .box .swiper-container.swiper_2 .swiper-wrapper, .d56_5 .box .swiper-container.swiper_3 .swiper-wrapper {justify-content:center;} .d56_5 .box .swiper-container.swiper_2 .swiper-wrapper .swiper-slide:last-child, .d56_5 .box .swiper-container.swiper_3 .swiper-wrapper .swiper-slide:last-child {margin:0!important;} .d56_5 .box .swiper-container .swiper-slide .img_box {position:relative; padding-top:75%;} .d56_5 .box .swiper-container .swiper-slide .img_box img {position:absolute; left:0; top:0; width:100%; transition:all 0.3s;} .d56_5 .box .swiper-container .swiper-slide .img_box video {position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; transition:all 0.3s;} .d56_5 .box .swiper-container .swiper-slide .img_box i {display:block; width:1.25rem; height:1.25rem; position:absolute; z-index:2; right:0.625rem; bottom:0.625rem;} .d56_5 .box .swiper-container .swiper-slide .img_box i::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p56/maximize.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d56_5 .box .swiper-container .swiper-slide .img_box i::after {opacity:0; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p56/maximize_active.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d56_5 .box .swiper-container .swiper-slide .text {} .d56_5 .box .swiper-container .swiper-slide .text h3 {font-size:1rem; font-weight:normal;} .d56_5 .box .swiper-container .swiper-button-prev, .d56_5 .box .swiper-container .swiper-button-next, .d56_5 .box .swiper-container .swiper-pagination {display:none;} .d56_5 .box .swiper-container.active {visibility:visible; opacity:1; height:auto; transform:translateX(0);} .d56_5 .box .swiper-container .swiper-slide:hover .img_box img, .d56_5 .box .swiper-container .swiper-slide:hover .img_box video {transform:scale(1.05);} .d56_5 .box .swiper-container .swiper-slide:hover .img_box i::after {opacity:1;} .d56_5 .lightbox {position:fixed; z-index:40; left:0; top:0; width:100%; height:0; background:#191919;} .d56_5 .lightbox .swiper-container {visibility:hidden; height:0; opacity:0; padding:0;} .d56_5 .lightbox .swiper-container .swiper-slide .it {display:flex; align-content:center; flex-wrap:wrap; height:100vh;} .d56_5 .lightbox .swiper-container .swiper-slide .img_box {width:50%; position:relative; padding-top:37.5%;} .d56_5 .lightbox .swiper-container .swiper-slide .img_box img {position:absolute; left:0; top:0; width:100%; height:100%;} .d56_5 .lightbox .swiper-container .swiper-slide .img_box video {position:absolute; z-index:2; left:0; top:0; width:100%; height:100%;} .d56_5 .lightbox .swiper-container .swiper-slide .text {width:50%; margin:0; padding-left:4.5rem; text-align:left;} .d56_5 .lightbox .swiper-container .swiper-slide .text h3 {font-size:1.875rem; margin-bottom:1.125rem;} .d56_5 .lightbox .swiper-container .swiper-slide .text p {font-size:1.125rem;} .d56_5 .lightbox .swiper-container .swiper-button-prev {background-image:url("../images/p56/prev.svg"); background-position:center center; background-repeat:no-repeat; background-size:25% auto;} .d56_5 .lightbox .swiper-container .swiper-button-next {background-image:url("../images/p56/next.svg"); background-position:center center; background-repeat:no-repeat; background-size:25% auto;} .d56_5 .lightbox .swiper-container .swiper-pagination {bottom:4.5rem;} .d56_5 .lightbox .swiper-container .swiper-pagination span {opacity:1; width:0.875rem; height:0.875rem; background:#969696;} .d56_5 .lightbox .swiper-container .swiper-pagination span.swiper-pagination-bullet-active {background:#009fa8;} .d56_5 .lightbox .close {opacity:0; visibility:hidden; position:absolute; z-index:1; right:2.5rem; top:2.5rem; width:2.5rem; height:2.5rem; cursor:pointer; background-image:url("../images/p56/minimize.svg"); background-position:center center; background-repeat:no-repeat; background-size:70% auto;} .d56_5 .lightbox .close:hover {opacity:1;} .d56_5 .lightbox.active {height:100%;} .d56_5 .lightbox.active .swiper-container.active {visibility:visible; opacity:1; height:auto;} .d56_5 .lightbox.active .close {opacity:1; visibility:visible;} /**/ .d56_6 {padding:6.25rem 0; background:rgba(0, 0, 0, 0.9);} .d56_6 h2 {font-size:2.75rem; color:#ffffff; text-align:center;} .d56_6 .swiper-container .img_box {width:100%; padding-top:75%; position:relative;} .d56_6 .swiper-container .img_box img {display:block; position:absolute; left:0; top:0; width:100%;} /**/ .d56_side_nav {visibility:hidden; opacity:0; position:fixed; z-index:22; right:0.625rem; top:50%; transform:translateY(-50%); width:3rem; display:flex; flex-direction:column; transition:all 0.3s;} .d56_side_nav.show {visibility:visible; opacity:1;} .d56_side_nav.hide {visibility:hidden; opacity:0;} .d56_side_nav a {width:100%; height:3rem; margin-bottom:0.625rem; border-radius:100%; cursor:pointer; background-color:#666666; transition:all 0.3s;} .d56_side_nav a:last-child {margin:0;} .d56_side_nav a i {display:block; opacity:0.5; position:static; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:70% auto;} .d56_side_nav a:nth-child(1) i {background-image:url("../images/p56/side_nav_icon_1.png");} .d56_side_nav a:nth-child(2) i {background-image:url("../images/p56/side_nav_icon_2.png");} .d56_side_nav a:nth-child(3) i {background-image:url("../images/p56/side_nav_icon_3.png");} .d56_side_nav a:nth-child(4) i {background-image:url("../images/p56/side_nav_icon_4.png");} .d56_side_nav a:hover {background-color:#009fa8;} .d56_side_nav a:hover i {opacity:1;} .d56_side_nav a.active {background-color:#009fa8;} .d56_side_nav a.active i {opacity:1;} /****************************************/ /* products: X10 */ /****************************************/ /**/ .sel_products_detail_57 {} /**/ .d57_1 {position:relative; padding:12.5rem 0; color:rgba(255, 255, 255, 1); background-color:rgba(0, 0, 0, 1); overflow:hidden;} .d57_1 .main {position:relative; z-index:1; display:flex; flex-wrap:wrap;} .d57_1 .shead {width:50%;} .d57_1 .shead h1 {opacity:0; font-size:4.5rem; font-style:italic; animation:d57_1_move 1s 1 alternate forwards; animation-play-state:running;} .d57_1 .shead p {opacity:0; font-size:1.125rem; display:inline-block; animation:d57_1_move 1s 1 alternate forwards; animation-play-state:running; animation-delay:0.1s; background:-webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(106, 139, 163, 1)); background:linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(106, 139, 163, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d57_1 .shead h2 {opacity:0; display:flex; flex-direction:column; align-items:flex-start; font-size:2.875rem; text-transform:uppercase; margin-top:2.875rem; animation:d57_1_move 1s 1 alternate forwards; animation-play-state:running; animation-delay:0.2s;} .d57_1 .shead h2 span {display:inline-block; background:-webkit-linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(106, 139, 163, 1)); background:linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(106, 139, 163, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d57_1 .img {opacity:0; width:50%; animation:d57_1_move 1s 1 alternate forwards; animation-play-state:running; animation-delay:0.3s;} .d57_1 .img span {display:block; width:100%; padding-top:83%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d57_1 .bg {position:absolute; left:0; top:0; width:100%; height:100%;} .d57_1 .bg span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} @keyframes d57_1_move { 0% { opacity:0; transform:translateY(0.625rem); } 100% { opacity:1; transform:translateY(0); } } /**/ .d57_2 {position:relative; padding:9.375rem 0;} .d57_2 .main {position:relative; z-index:1; text-align:center;} .d57_2 .intro {font-size:1.125rem; width:65%; margin:auto;} .d57_2 h2 {font-size:2.875rem; margin:4.5rem auto 3.5rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(36, 62, 82, 1), rgba(0, 159, 168, 1)); background:linear-gradient(90deg, rgba(36, 62, 82, 1), rgba(0, 159, 168, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d57_2 .swiper-container {padding:0 0 4.5rem;} .d57_2 .swiper-container .swiper-slide {} .d57_2 .swiper-container .swiper-slide .img_box {transform:scale(0.8); transform-origin:bottom; padding-top:75%; border-radius:0.3125rem; transition:all 0.3s;} .d57_2 .swiper-container .swiper-slide .img_box img {width:100%; position:absolute; left:0; top:0;} .d57_2 .swiper-container .swiper-slide .text {opacity:0.5; width:80%; text-align:left; margin:1.875rem auto 0; transition:all 0.3s;} .d57_2 .swiper-container .swiper-slide .text h3 {font-size:1.125rem;} .d57_2 .swiper-container .swiper-slide .text p {font-size:0.875rem; line-height:1.6; margin-top:0.625rem;} .d57_2 .swiper-container .swiper-pagination {display:none;} .d57_2 .swiper-container .swiper-button-prev, .d57_2 .swiper-container .swiper-button-next {width:3rem; height:3rem; border-radius:100%; border:1px solid rgba(255, 255, 255, 0.1); left:50%; top:auto; bottom:0; transform:translateX(-50%); margin:0; background-position:center center; background-repeat:no-repeat; background-size:50% auto; transition:all 0.3s;} .d57_2 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 1.5rem - 0.625rem)); background-image:url('../images/p57/prev.svg'); background-position:45% center;} .d57_2 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 1.5rem + 0.625rem)); background-image:url('../images/p57/next.svg'); background-position:55% center;} .d57_2 .swiper-container .swiper-button-prev:hover, .d57_2 .swiper-container .swiper-button-next:hover {background-color:transparent; border-color:rgba(255, 255, 255, 0.3);} .d57_2 .swiper-container .swiper-button-prev:hover {} .d57_2 .swiper-container .swiper-slide-active .img_box, .d57_2 .swiper-container .swiper-slide-duplicate-active .img_box {transform:scale(1);} /* swiper-slide-duplicate-active 需要加上，防止抖动！！！*/ .d57_2 .swiper-container .swiper-slide-active .text, .d57_2 .swiper-container .swiper-slide-duplicate-active .text {opacity:1; width:100%;} /* swiper-slide-duplicate-active 需要加上，防止抖动！！！*/ .d57_2 .bg {position:absolute; left:0; top:0; width:100%; height:100%;} .d57_2 .bg span {position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d57_3 {position:relative; padding:9.375rem 0; background:linear-gradient(180deg, rgba(169, 190, 213, 0.5), rgba(255, 255, 255, 1));} .d57_3 .main {text-align:center;} .d57_3 h2 {font-size:2.875rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(36, 62, 82, 1), rgba(0, 159, 168, 1)); background:linear-gradient(90deg, rgba(36, 62, 82, 1), rgba(0, 159, 168, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d57_3 ul {position:relative; margin-top:6.25rem;} .d57_3 ul li {width:40%; margin:auto; cursor:pointer; position:relative; z-index:5;} .d57_3 ul li:not(:last-child) {position:absolute;} .d57_3 ul li:nth-child(1) {width:25%; left:15%; top:-10%;} .d57_3 ul li:nth-child(1) p {left:55%; top:25%;} .d57_3 ul li:nth-child(2) {width:25%; right:20%; top:-10%;} .d57_3 ul li:nth-child(2) p {left:42%; top:8%;} .d57_3 ul li:nth-child(3) {width:25%; left:18%; bottom:-15%;} .d57_3 ul li:nth-child(3) p {left:2%; top:82%;} .d57_3 ul li:nth-child(4) {width:25%; right:18%; bottom:-15%;} .d57_3 ul li:nth-child(4) p {left:29%; top:91%;} .d57_3 ul li:nth-child(5) {border-radius:100%; overflow:hidden; /* 避免hover遮挡*/} .d57_3 ul li .cell {position:relative;} .d57_3 ul li p {position:absolute; z-index:1; left:17%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; font-size:1rem; text-align:left; color:#009fa8; font-weight:bold; font-style:italic;} .d57_3 ul li p em {color:#FFFFFF; font-style:normal; font-size:2.875rem; line-height:1.2;} .d57_3 ul li .more {opacity:0; position:absolute; z-index:1; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); display:flex; flex-direction:column; justify-content:center; align-items:center; width:40%; height:40%; border-radius:100%; background:linear-gradient(180deg, rgba(154, 168, 181, 0.9), rgba(255, 255, 255, 0.9)); transition:all 0.3s;} .d57_3 ul li .more strong {font-weight:normal; color:#243e52; font-size:1rem;} .d57_3 ul li .more i {display:block; margin-top:0.3125rem; width:1.5rem; height:1.5rem; background-image:url('../images/p57/pointer.svg'); background-position:center center; background-repeat:no-repeat; background-size:cover; animation:d57_3_pointer 1s ease-out both; animation-iteration-count:infinite;} @keyframes d57_3_pointer { 0%, 100% { opacity:0.3; } 50% { opacity:1; } } .d57_3 ul li .cover {width:100%;} .d57_3 ul li .cover span {display:block; width:100%; padding-top:100%; transform:scale(0.98); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d57_3 ul li:hover .cover span {transform:scale(1);} .d57_3 ul li:hover .more {opacity:1;} .d57_3 .lightbox {visibility:hidden; opacity:0; overflow-x:hidden; overflow-y:scroll; position:fixed; z-index:40; left:0; top:0; width:100%; height:100%; padding:4.5rem 0; background:linear-gradient(180deg, rgba(28, 28, 28, 1) 20%, rgba(106, 139, 163, 0.8)); transition:opacity 0.3s;} .d57_3 .lightbox .tab {visibility:hidden; opacity:0; margin:0 auto 4.5rem; width:100%;} .d57_3 .lightbox .tab .inner {display:flex; position:relative;} .d57_3 .lightbox .tab .inner::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(255, 255, 255, 0.2);} .d57_3 .lightbox .tab span {flex:1; position:relative; padding:1.25rem; cursor:pointer; text-align:center; color:rgba(255, 255, 255, 0.5); transition:all 0.3s;} .d57_3 .lightbox .tab span::after {opacity:0; content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#FFFFFF; transition:all 0.3s;} .d57_3 .lightbox .tab span em {font-size:1rem; font-style:normal;} .d57_3 .lightbox .tab span:hover::after {opacity:1;} .d57_3 .lightbox .tab span.active {color:rgba(255, 255, 255, 1);} .d57_3 .lightbox .tab span.active::after {opacity:1;} .d57_3 .lightbox .swiper-container {visibility:hidden; width:100%; height:0; opacity:0; padding:0; overflow:hidden;} .d57_3 .lightbox .swiper-container .swiper-slide .it {display:flex; align-content:center; flex-wrap:wrap;} .d57_3 .lightbox .swiper-container .swiper-slide .img_box {width:50%; position:relative; padding-top:37.5%; border-radius:0.625rem;} .d57_3 .lightbox .swiper-container .swiper-slide .img_box img {position:absolute; left:0; top:0; width:100%; height:100%;} .d57_3 .lightbox .swiper-container .swiper-slide .img_box video {position:absolute; z-index:2; left:0; top:0; width:100%; height:100%;} .d57_3 .lightbox .swiper-container .swiper-slide .text {width:50%; margin:0; padding-left:4.5rem; text-align:left;} .d57_3 .lightbox .swiper-container .swiper-slide .text h3 {font-size:1.875rem; margin-bottom:1.125rem;} .d57_3 .lightbox .swiper-container .swiper-slide .text p {font-size:1.125rem;} .d57_3 .lightbox .swiper-container .swiper-button-prev, .d57_3 .lightbox .swiper-container .swiper-button-next {border-radius:0.3125rem;} .d57_3 .lightbox .swiper-container .swiper-button-prev {background-image:url("../images/p57/prev.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto;} .d57_3 .lightbox .swiper-container .swiper-button-next {background-image:url("../images/p57/next.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto;} .d57_3 .lightbox .swiper-container .swiper-button-prev:hover, .d57_3 .lightbox .swiper-container .swiper-button-next:hover {background-color:rgba(0,0,0,0.2);} .d57_3 .lightbox .swiper-container .swiper-pagination {display:flex; justify-content:center; bottom:-2.5rem;} .d57_3 .lightbox .swiper-container .swiper-pagination span {width:0.875rem; height:0.875rem; transition:opacity 0.3s;} .d57_3 .lightbox .close {opacity:0; visibility:hidden; position:absolute; z-index:1; right:1.875rem; top:1.875rem; width:2.875rem; height:2.875rem; cursor:pointer; border-radius:0.3125rem; background-image:url("../images/p57/minimize.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto;} .d57_3 .lightbox.active {visibility:visible; opacity:1; display:flex; flex-direction:column; justify-content:center;} .d57_3 .lightbox.active .tab {visibility:visible; opacity:1;} .d57_3 .lightbox.active .swiper-container.active {visibility:visible; opacity:1; height:auto; overflow:visible;} .d57_3 .lightbox.active .close {opacity:1; visibility:visible; transition:all 0.3s;} .d57_3 .lightbox.active .close:hover {background-color:rgba(255, 255, 255, 0.05);} .d57_3 .lightbox.reset_align {justify-content:flex-start;} /**/ .d57_4 {background:#000000; overflow:hidden;} .d57_4 .pin {height:100vh; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg, rgb(0, 0, 0) 60% , rgb(106, 139, 163));} .d57_4 .main {padding:6.25rem 0 0; text-align:center;} .d57_4 h2 {font-size:2.875rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(106, 139, 162, 1), rgba(0, 159, 168, 1)); background:linear-gradient(90deg, rgba(106, 139, 162, 1), rgba(0, 159, 168, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d57_4 .list {position:relative; margin-top:4.5rem;} .d57_4 .list ul {display:flex; text-align:center; --w:18vw; --h:calc(var(--w) * 1.33);/*图片实际比例*/ --m:2.5rem;/*卡片间距*/ width:calc(6 * (var(--w) + var(--m)) - var(--m));/*最后卡片无间距*/ height:100%;} .d57_4 .list ul li {width:var(--w); margin-right:var(--m);} .d57_4 .list ul li .cell {height:100%; position:relative;} .d57_4 .list ul li .img {position:relative; width:var(--w); height:var(--h); padding:1px; border-radius:0.875rem; background:linear-gradient(135deg,rgba(255, 255, 255, 1), transparent , transparent, rgba(255, 255, 255, 1)); overflow:hidden;} .d57_4 .list ul li .img p {display:flex; justify-content:center; align-items:center; position:absolute; z-index:1; left:0; top:1.875rem; width:100%; text-align:center; font-size:1.125rem; line-height:1; color:rgba(255, 255, 255, 1);} .d57_4 .list ul li .img p em {width:1.875rem; height:1.875rem; margin-right:0.625rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d57_4 .list ul li:nth-child(2) .img p em {background-image:url('../images/p57/004_2_icon.png');} .d57_4 .list ul li:nth-child(3) .img p em {background-image:url('../images/p57/004_3_icon.png');} .d57_4 .list ul li:nth-child(4) .img p em {background-image:url('../images/p57/004_4_icon.png');} .d57_4 .list ul li:nth-child(5) .img p em {background-image:url('../images/p57/004_5_icon.png');} .d57_4 .list ul li:nth-child(6) .img p em {background-image:url('../images/p57/004_6_icon.png');} .d57_4 .list ul li .img span {display:block; width:100%; height:100%; border-radius:calc(0.875rem - 0.5px); background-position:center center; background-repeat:no-repeat; background-size:contain;} .d57_4 .list ul li .text {opacity:0.8; color:#FFFFFF; text-align:left; margin-top:1.25rem;} .d57_4 .list ul li .text h3 {font-size:0.875rem; font-weight:normal; line-height:1.6;} .d57_4 .list ul li .text p { margin-top:0.3125rem; display:flex; flex-direction:column; font-size:0.75rem;} .d57_4 .list ul li .text p em {font-style:normal; position:relative; padding-left:0.625rem;} .d57_4 .list ul li .text p em::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0.1875rem; height:0.1875rem; border-radius:100%; background:rgba(255, 255, 255, 1);} /**/ .d57_5 {padding:6.25rem 0; text-align:center; background:rgba(0, 0, 0, 0.9);} .d57_5 h2 {font-size:2.875rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(106, 139, 162, 1), rgba(0, 159, 168, 1)); background:linear-gradient(90deg, rgba(106, 139, 162, 1), rgba(0, 159, 168, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d57_5 .swiper-container .swiper-slide {padding:1.25rem; border-radius:0.3125rem; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d57_5 .swiper-container .swiper-slide .img_box {width:100%; padding-top:75%; position:relative;} .d57_5 .swiper-container .swiper-slide .img_box img {display:block; position:absolute; left:0; top:0; width:100%;} .d57_5 .swiper-container .swiper-slide .text {margin:0; padding:1.25rem 0;} .d57_5 .swiper-container .swiper-button-prev, .d57_5 .swiper-container .swiper-button-next {opacity:1; width:2.5rem; height:2.5rem; border-radius:0.3125rem; background-color:rgba(255, 255, 255, 0.2); background-size:60% auto; transition:all 0.3s;} .d57_5 .swiper-container .swiper-button-prev:hover, .d57_5 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 0.25);} .d57_5 .swiper-container .swiper-button-prev {background-image:url("../images/p57/prev.svg");} .d57_5 .swiper-container .swiper-button-next {background-image:url("../images/p57/next.svg");} .d57_5 .swiper-container .swiper-button-disabled {opacity:0.5;} /****************************************/ /* products: E10 */ /****************************************/ /**/ .sel_products_detail_58 {} /**/ .d58_1 {position:relative; padding:18.5rem 0 12.5rem; color:rgba(255, 255, 255, 1); background-color:rgba(0, 0, 0, 1); overflow:hidden;} .d58_1 .main {position:relative; z-index:1; display:flex; align-items:center; flex-wrap:wrap;} .d58_1 .shead {width:60%; padding-left:9%;} .d58_1 .shead h1 {opacity:0; display:flex; flex-direction:column; align-items:flex-start; font-size:3.5rem; text-transform:uppercase; animation:d58_1_move 1s 1 alternate forwards; animation-play-state:running;} .d58_1 .shead h1 span {display:inline-block; background:-webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 30% , rgba(246, 172, 29, 1)); background:linear-gradient(90deg, rgba(255, 255, 255, 1) 30% , rgba(246, 172, 29, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d58_1 .shead h1 span:last-child {transform:translateX(55.5%);} .d58_1 .img {opacity:0; width:40%; animation:d58_1_move 1s 1 alternate forwards; animation-play-state:running; animation-delay:0.3s;} .d58_1 .img .title {margin:0 0 2.5rem 2.875rem;} .d58_1 .img .title h2 {font-size:2.875rem;} .d58_1 .img .title p {font-size:1.125rem;} .d58_1 .img i {display:block; width:55%;} .d58_1 .img span {display:block; width:100%; padding-top:83%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d58_1 .bg {position:absolute; left:0; top:0; width:100%; height:100%;} .d58_1 .bg span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} @keyframes d58_1_move { 0% { opacity:0; transform:translateY(0.625rem); } 100% { opacity:1; transform:translateY(0); } } /**/ .d58_2 {position:relative; padding:9.375rem 0; overflow:hidden;} .d58_2 .main {position:relative; z-index:1; text-align:center;} .d58_2 .intro {font-size:1.125rem; width:70%; margin:auto;} .d58_2 h2 {font-size:2.875rem; margin:4.5rem auto 1.25rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); background:linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d58_2 .s_i {font-size:1rem; width:65%; margin:0 auto 3.875rem;} .d58_2 .swiper-container {padding:0 0 6.25rem; overflow:visible;} .d58_2 .swiper-container .swiper-slide {} .d58_2 .swiper-container .swiper-slide .img_box {padding-top:75%; border-radius:0.3125rem;} .d58_2 .swiper-container .swiper-slide .img_box img {width:100%; position:absolute; left:0; top:0; transition:all 0.3s;} .d58_2 .swiper-container .swiper-slide .img_box:hover img {transform:scale(1.02);} .d58_2 .swiper-container .swiper-slide .text {color:#000000; text-align:left; margin-top:1.875rem;} .d58_2 .swiper-container .swiper-slide .text h3 {font-size:1.125rem;} .d58_2 .swiper-container .swiper-slide .text p {opacity:0.8; font-size:0.875rem; line-height:1.6; margin-top:0.625rem;} .d58_2 .swiper-container .swiper-pagination {display:none;} .d58_2 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:0.875rem; height:0.875rem; background:rgba(0, 0, 0, 1);} .d58_2 .swiper-container .swiper-button-prev, .d58_2 .swiper-container .swiper-button-next {width:3rem; height:3rem; border-radius:100%; border:1px solid rgba(0, 0, 0, 0.3); left:50%; top:auto; bottom:0; transform:translateX(-50%); margin:0; background-position:center center; background-repeat:no-repeat; background-size:50% auto; transition:all 0.3s;} .d58_2 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 1.5rem - 0.625rem)); background-image:url('../images/p58/prev_moon.svg'); background-position:45% center;} .d58_2 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 1.5rem + 0.625rem)); background-image:url('../images/p58/next_moon.svg'); background-position:55% center;} .d58_2 .swiper-container .swiper-button-prev:hover, .d58_2 .swiper-container .swiper-button-next:hover {background-color:transparent; border-color:rgba(0, 0, 0, 0.2);} .d58_2 .swiper-container .swiper-button-prev:hover {} .d58_2 .bg {position:absolute; left:0; top:0; width:100%; height:100%;} .d58_2 .bg span {position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d58_3 {position:relative; padding:9.375rem 0 6.25rem; background:linear-gradient(180deg, rgba(163, 183, 217, 1), rgba(255, 255, 255, 1)); overflow:hidden;} .d58_3 .main {text-align:center;} .d58_3 h2 {font-size:2.875rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); background:linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d58_3 .intro {font-size:1rem; width:65%; margin:1.25rem auto 0;} .d58_3 ul {position:relative; margin-top:-6%;} .d58_3 ul li {width:65%; margin:auto; cursor:pointer;} .d58_3 ul li:not(:last-child) {position:absolute; z-index:1;} .d58_3 ul li:nth-child(1) {width:20%; left:18%; top:15%;} .d58_3 ul li:nth-child(1) p {left:15%; top:96%;} .d58_3 ul li:nth-child(2) {width:20%; right:18%; top:15%;} .d58_3 ul li:nth-child(2) p {left:57%; top:96%;} .d58_3 ul li:nth-child(3) {width:20%; left:18%; bottom:18%;} .d58_3 ul li:nth-child(3) p {left:84%; top:80%;} .d58_3 ul li:nth-child(4) {width:20%; right:18%; bottom:18%;} .d58_3 ul li:nth-child(4) p {left:auto; right:66%; top:91%;} .d58_3 ul li:nth-child(5) {width:20%; left:50%; transform:translateX(-50%); bottom:-5%;} .d58_3 ul li:nth-child(5) p {left:40%; top:4%;} .d58_3 ul li .cell {position:relative;} .d58_3 ul li p {position:absolute; z-index:1; left:17%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; font-size:1rem; text-align:center; color:#3c73aa;} .d58_3 ul li p em {color:#FFFFFF; font-size:1.375rem; line-height:1.2;} .d58_3 ul li .more {opacity:0; position:absolute; z-index:1; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); display:flex; flex-direction:column; justify-content:center; align-items:center; width:50%; height:50%; color:#243e52; font-size:1rem; border-radius:100%; background:linear-gradient(180deg, rgba(163, 183, 217, 0.9), rgba(255, 255, 255, 0.9)); transition:all 0.3s;} .d58_3 ul li .more strong {font-weight:normal; font-size:1rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(18, 95, 172, 1), rgba(246, 172, 25, 1)); background:linear-gradient(90deg, rgba(18, 95, 172, 1), rgba(246, 172, 25, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d58_3 ul li .more i {display:block; margin-top:0.3125rem; width:1.5rem; height:1.5rem; background-image:url('../images/p58/pointer.svg'); background-position:center center; background-repeat:no-repeat; background-size:cover; animation:d58_3_pointer 1s ease-out both; animation-iteration-count:infinite;} @keyframes d58_3_pointer { 0%, 100% { opacity:0.3; } 50% { opacity:1; } } .d58_3 ul li .poc {position:absolute; z-index:1; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d58_3 ul li .poc p {position:static; transform:none;} .d58_3 ul li .poc .poc_i {width:8rem; margin:0.625rem auto 0;} .d58_3 ul li .poc .poc_i span {display:block; width:100%; padding-top:80%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d58_3 ul li .cover {width:100%;} .d58_3 ul li .cover span {display:block; width:100%; padding-top:100%; transform:scale(0.98); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d58_3 ul li:hover .cover span {transform:scale(1);} .d58_3 ul li:hover .more {opacity:1;} .d58_3 .lightbox {visibility:hidden; opacity:0; overflow-x:hidden; overflow-y:scroll; position:fixed; z-index:40; left:0; top:0; width:100%; height:100%; padding:4.5rem 0; background:linear-gradient(180deg, rgba(28, 28, 28, 1) 20%, rgba(163, 183, 217, 0.9)); transition:opacity 0.3s;} .d58_3 .lightbox .tab {visibility:hidden; opacity:0; margin:4.5rem auto; width:100%; display:flex;} .d58_3 .lightbox .tab .inner {display:flex; position:relative;} .d58_3 .lightbox .tab span {display:flex; justify-content:center; align-items:center; flex:1; position:relative; padding:1.25rem 0.625rem; cursor:pointer;} .d58_3 .lightbox .tab span::after {opacity:0.1; content:""; position:absolute; left:0; top:0; width:calc(100% + 0.625rem - 0.3125rem); height:100%; background:#FFFFFF; clip-path:polygon(0.625rem 0%, 100% 0%, calc(100% - 0.625rem) 50%, 100% 100%, 0.625rem 100%, 0% 50%); transition:all 0.3s;} .d58_3 .lightbox .tab span em {display:block; font-size:1rem; font-style:normal; color:#FFFFFF; position:relative; z-index:1; transition:all 0.3s;} .d58_3 .lightbox .tab span:hover em {} .d58_3 .lightbox .tab span:hover::after {opacity:1;} .d58_3 .lightbox .tab span.active em {color:#000000;} .d58_3 .lightbox .tab span.active::after {opacity:1;} .d58_3 .lightbox .swiper-container {visibility:hidden; width:100%; height:0; opacity:0; padding:0; overflow:hidden;} .d58_3 .lightbox .swiper-container .swiper-slide .it {display:flex; align-content:center; flex-wrap:wrap;} .d58_3 .lightbox .swiper-container .swiper-slide .img_box {width:50%; position:relative; padding-top:37.5%; border-radius:0.625rem;} .d58_3 .lightbox .swiper-container .swiper-slide .img_box img {position:absolute; left:0; top:0; width:100%; height:100%;} .d58_3 .lightbox .swiper-container .swiper-slide .img_box video {position:absolute; z-index:2; left:0; top:0; width:100%; height:100%;} .d58_3 .lightbox .swiper-container .swiper-slide .text {width:50%; margin:0; padding-left:4.5rem; text-align:left;} .d58_3 .lightbox .swiper-container .swiper-slide .text h3 {font-size:1.875rem; margin-bottom:1.125rem;} .d58_3 .lightbox .swiper-container .swiper-slide .text p {font-size:1.125rem;} .d58_3 .lightbox .swiper-container .swiper-button-prev, .d58_3 .lightbox .swiper-container .swiper-button-next {border-radius:0.3125rem;} .d58_3 .lightbox .swiper-container .swiper-button-prev {background-image:url("../images/p58/prev.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto;} .d58_3 .lightbox .swiper-container .swiper-button-next {background-image:url("../images/p58/next.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto;} .d58_3 .lightbox .swiper-container .swiper-button-prev:hover, .d58_3 .lightbox .swiper-container .swiper-button-next:hover {background-color:rgba(0,0,0,0.2);} .d58_3 .lightbox .swiper-container .swiper-pagination {display:flex; justify-content:center; bottom:-2.5rem;} .d58_3 .lightbox .swiper-container .swiper-pagination span {width:0.875rem; height:0.875rem;} .d58_3 .lightbox .close {opacity:0; visibility:hidden; position:absolute; z-index:1; right:1.875rem; top:1.875rem; width:2.875rem; height:2.875rem; cursor:pointer; border-radius:0.3125rem; background-image:url("../images/p58/minimize.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto;} .d58_3 .lightbox.active {visibility:visible; opacity:1; display:flex; flex-direction:column; justify-content:center;} .d58_3 .lightbox.active .tab {visibility:visible; opacity:1;} .d58_3 .lightbox.active .swiper-container.active {visibility:visible; opacity:1; height:auto; overflow:visible;} .d58_3 .lightbox.active .close {opacity:1; visibility:visible; transition:all 0.3s;} .d58_3 .lightbox.active .close:hover {background-color:rgba(255, 255, 255, 0.05);} .d58_3 .lightbox.reset_align {justify-content:flex-start;} /**/ .d58_4 {background:#000000; overflow:hidden;} .d58_4 .pin {height:100vh; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg, rgb(0, 0, 0) 60% , rgb(163, 183, 217));} .d58_4 .main {padding:6.25rem 0 0; text-align:center;} .d58_4 h2 {font-size:2.875rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); background:linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d58_4 .list {position:relative; margin-top:4.5rem;} .d58_4 .list ul {display:flex; text-align:center; --w:18vw; --h:calc(var(--w) * 1.33);/*图片实际比例*/ --m:2.5rem;/*卡片间距*/ width:calc(6 * (var(--w) + var(--m)) - var(--m));/*最后卡片无间距*/ height:100%;} .d58_4 .list ul li {width:var(--w); margin-right:var(--m);} .d58_4 .list ul li .cell {height:100%; position:relative;} .d58_4 .list ul li .img {position:relative; width:var(--w); height:var(--h); padding:1px; border-radius:0.875rem; background:linear-gradient(135deg,rgba(255, 255, 255, 1), transparent , transparent, rgba(255, 255, 255, 1)); overflow:hidden;} .d58_4 .list ul li .img p {display:flex; justify-content:center; align-items:center; position:absolute; z-index:1; left:0; top:1.875rem; width:100%; text-align:center; font-size:1.125rem; line-height:1; color:rgba(255, 255, 255, 1);} .d58_4 .list ul li .img p em {width:1.875rem; height:1.875rem; margin-right:0.625rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d58_4 .list ul li:nth-child(2) .img p em {background-image:url('../images/p58/004_2_icon.png');} .d58_4 .list ul li:nth-child(3) .img p em {background-image:url('../images/p58/004_3_icon.png');} .d58_4 .list ul li:nth-child(4) .img p em {background-image:url('../images/p58/004_4_icon.png');} .d58_4 .list ul li:nth-child(5) .img p em {background-image:url('../images/p58/004_5_icon.png');} .d58_4 .list ul li:nth-child(6) .img p em {background-image:url('../images/p58/004_6_icon.png');} .d58_4 .list ul li .img span {display:block; width:100%; height:100%; border-radius:calc(0.875rem - 0.5px); background-position:center center; background-repeat:no-repeat; background-size:contain;} .d58_4 .list ul li .text {opacity:0.8; color:#FFFFFF; text-align:left; margin-top:1.25rem;} .d58_4 .list ul li .text h3 {font-size:0.875rem; font-weight:normal; line-height:1.6;} .d58_4 .list ul li .text p { margin-top:0.3125rem; display:flex; flex-direction:column; font-size:0.75rem;} .d58_4 .list ul li .text p em {font-style:normal; position:relative; padding-left:0.625rem;} .d58_4 .list ul li .text p em::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0.1875rem; height:0.1875rem; border-radius:100%; background:rgba(255, 255, 255, 1);} /**/ .d58_5 {padding:6.25rem 0; text-align:center; background:rgba(0, 0, 0, 0.9);} .d58_5 h2 {font-size:2.875rem; display:inline-block; background:-webkit-linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); background:linear-gradient(90deg, rgba(18, 95, 172, 1) 20%, rgba(150, 150, 150, 1) 70%, rgba(246, 172, 25, 1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d58_5 .swiper-container .swiper-slide {padding:1.25rem; border-radius:0.3125rem; background:rgba(0, 0, 0, 1.0); overflow:hidden;} .d58_5 .swiper-container .swiper-slide .img_box {width:100%; padding-top:75%; position:relative;} .d58_5 .swiper-container .swiper-slide .img_box img {display:block; position:absolute; left:0; top:0; width:100%;} .d58_5 .swiper-container .swiper-slide .text {margin:0; padding:1.25rem 0;} .d58_5 .swiper-container .swiper-button-prev, .d58_5 .swiper-container .swiper-button-next {opacity:1; width:2.5rem; height:2.5rem; border-radius:0.3125rem; background-color:rgba(255, 255, 255, 0.2); background-size:60% auto; transition:all 0.3s;} .d58_5 .swiper-container .swiper-button-prev:hover, .d58_5 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 0.25);} .d58_5 .swiper-container .swiper-button-prev {background-image:url("../images/p58/prev.svg");} .d58_5 .swiper-container .swiper-button-next {background-image:url("../images/p58/next.svg");} .d58_5 .swiper-container .swiper-button-disabled {opacity:0.5;} /****************************************/ /* products detail: SV-M4K120Exp */ /****************************************/ /**/ .sel_products_detail_59 {} /**/ .d59_1 {padding:9.375rem 0;} .d59_1 .main {display:flex; justify-content:space-between; flex-direction:row-reverse; align-items:center;} .d59_1 .text {width:55%; padding-left:2.5rem;} .d59_1 .text h1 {font-size:3rem; margin-bottom:3.75rem;} .d59_1 .text h2 {font-size:2.75rem; color:#00afb2;} .d59_1 .text p {font-size:1.375rem;} .d59_1 .img {width:45%;} /**/ .d59_2 {padding:9.375rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 1);} .d59_2 .main {} .d59_2 .text {text-align:center;} .d59_2 .text h2 {font-size:2.75rem; color:#00afb2;} .d59_2 .text p {opacity:0.8; display:flex; justify-content:center; flex-wrap:wrap; margin:2rem auto 0; width:80%; font-size:1.375rem;} .d59_2 .text p span {display:inline-block; margin:0 0.625rem; padding:0.625rem 1.25rem; font-size:1.125rem; color:#FFFFFF; border-radius:0.625rem; background:linear-gradient(to right, rgba(92,68,151,1), rgba(33,93,170,1));} .d59_2 .spec_col_1 {margin:3.75rem 0 0;} .d59_2 .spec_col_1 h3 {font-size:2rem; color:rgba(0, 0, 0, 0.8); text-align:center;} .d59_2 .spec_col_1 .sc1_t {margin:2.5rem auto 0; width:60%; text-align:center;} .d59_2 .spec_col_1 .sc1_t img {} .d59_2 .spec_col_1 .sc1_t p {margin-top:1.25rem; font-size:1.125rem;} .d59_2 .spec_col_1 .sc1_b {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; margin:4.5rem auto 0;} .d59_2 .spec_col_1 .sc1_b img {width:35%;} .d59_2 .spec_col_1 .sc1_b p {padding-left:3.75rem; font-size:1.125rem;} .d59_2 .spec_col_1 .sc1_b p strong {display:inline-block; margin-bottom:0.625rem; font-size:1.375rem; color:#00afb2;} .d59_2 .spec_col_1 .sc1_b p em {font-style:normal; font-weight:bold;} .d59_2 .spec_col_1 .sc1_b p span {} .d59_2 .spec_col_1 .sc1_b p span:nth-child(1) {} .d59_2 .spec_col_1 .sc1_b p span:nth-child(2) {display:block; margin-top:0.625rem;} .d59_2 .spec_col_1 .sc1_b p span:nth-child(2) em {display:block; font-weight:normal;} /**/ .d59_3 {padding:9.375rem 0; text-align:center;} .d59_3 h3 {font-size:2.75rem; color:#00afb2;} .d59_3 ul {margin:4.5rem 0 0;} .d59_3 ul li {margin-bottom:3.75rem} .d59_3 ul li:last-child {margin:0;} .d59_3 ul li .cell {} .d59_3 ul li .lr {display:flex; justify-content:space-between; align-items:flex-start; position:relative;} .d59_3 ul li .lr img {width:calc(50% - 2.5rem);} .d59_3 ul li .lr i {display:block; width:0; height:0; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d59_3 ul li .lr i::before, .d59_3 ul li .lr i::after {content:""; position:absolute; left:50%; top:50%; opacity:0.3; width:1rem; height:1rem; border-color:rgba(0, 0, 0, 1); border-width:2px 2px 0 0; border-style:solid; transform:translateX(-50%) translateY(-50%) rotate(45deg);} .d59_3 ul li .lr i::after {left:-0.625rem; opacity:0.2} .d59_3 ul li p {opacity:0.8; margin-top:1.875rem; font-size:1.125rem;} /**/ .d59_4 {padding:9.375rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 1.0);} .d59_4 .main {} .d59_4 .text {text-align:center;} .d59_4 .text h2 {font-size:2.75rem; color:#00afb2;} .d59_4 .text p {font-size:1.375rem; width:80%; margin:2rem auto 0; opacity:0.8;} .d59_4 .img {margin:4.5rem 0 0;} .d59_4 .img ul {} .d59_4 .img ul li {margin-bottom:3.875rem;} .d59_4 .img ul li:last-child {margin:0;} .d59_4 .img ul li .cell {} .d59_4 .img ul li .t {display:flex; max-width:40rem; align-items:center; margin:auto;} .d59_4 .img ul li .t img {display:block; width:9.375rem; flex-shrink:0; border-radius:0.625rem; border:1px solid #00afb2;} .d59_4 .img ul li .t .t_r {margin-left:1.25rem;} .d59_4 .img ul li .t .t_r h3 {font-size:1.75rem; color:#00afb2; margin-bottom:0.3125rem;} .d59_4 .img ul li .t .t_r p {font-size:1rem; opacity:0.5;} .d59_4 .img .m {width:70%; margin:auto;} /**/ .d59_5 {padding:9.375rem 0;} .d59_5 .main {} .d59_5 .text {text-align:center;} .d59_5 .text h2 {font-size:2.75rem; color:#00afb2;} .d59_5 .text p {font-size:1.375rem; width:80%; margin:2rem auto 0; opacity:0.8;} .d59_5 .img {margin:5rem auto 0;} .d59_5 .img ul {display:flex; flex-wrap:wrap; align-items:center;} .d59_5 .img ul li:nth-child(1) {width:50%; margin-right:2.5rem;} .d59_5 .img ul li:nth-child(2) {width:35%;} .d59_5 .img ul li .cell {} .d59_5 .img ul li img {display:block;} .d59_5 .img ul li .name {margin:1.25rem 0 0;} .d59_5 .img ul li .name h4 {font-size:1.125rem; color:rgba(0, 0, 0, 0.5); text-align:center;} /**/ .d59_6 {padding:9.375rem 0; color:#FFFFFF; background:rgba(0, 0, 0, 1.0);} .d59_6 .main {} .d59_6 .text {text-align:center;} .d59_6 .text h2 {font-size:2.75rem; color:#00afb2;} .d59_6 .text p {font-size:1.375rem; width:80%; margin:2rem auto 0; opacity:0.8;} .d59_6 .img {margin:5rem auto 0;} .d59_6 .img ul {display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 10%;} .d59_6 .img ul li {width:calc(50% - 2.5rem); margin-bottom:6.25rem;} .d59_6 .img ul li:nth-child(3), .d59_6 .img ul li:nth-child(4) {margin:0;} .d59_6 .img ul li .cell {display:flex;} .d59_6 .img ul li span {display:block; width:6.25rem;height:6.25rem; flex-shrink:0; border-radius:0.625rem; background-color:#00afb2; background-position:center center; background-repeat:no-repeat; background-size:80%;} .d59_6 .img ul li .r {margin:0 0 0 2.5rem;} .d59_6 .img ul li .r h3 {font-size:1.375rem;} .d59_6 .img ul li .r p {font-size:1.125rem; margin-top:0.625rem; line-height:1.4; opacity:0.5;} /****************************************/ /* products detail: EG-650 series */ /****************************************/ /**/ .sel_products_detail_60 {} /**/ .d60_1 {position:relative;} .d60_1::after {content:""; position:absolute; left:0; top:0; width:100%; height:30%; background:linear-gradient(to bottom, rgba(255, 255, 255, 1) , rgba(255, 255, 255, 0) 100%);} .d60_1 .main {padding:9.375rem 0 0; position:relative; z-index:1;} .d60_1 .text {text-align:center;} .d60_1 .text h1 {font-size:4.5rem; color:#009FAB;} .d60_1 .text p {font-size:4.5rem; line-height:1; font-weight:bold;} .d60_1 .img {width:100%; margin-top:3.5rem; padding-top:2.5rem; position:relative;} .d60_1 .img span {display:block; width:100%; padding-top:56.25%; background-position:center top; background-repeat:no-repeat; background-size:cover;} .d60_1 .features {position:absolute; left:50%; top:0; transform:translateX(-50%);} .d60_1 .features ul {display:flex; justify-content:center;} .d60_1 .features ul li {margin:0 0.3125rem;} .d60_1 .features ul li .cell {} .d60_1 .features ul li .cover {width:8rem;} .d60_1 .features ul li .cover span {display:block; width:100%; padding-top:57.5%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d60_1 .iendo {display:block; width:6.25rem; position:absolute; left:0; top:4.5rem;} .d60_1 .iendo span {display:block; width:100%; padding-top:36%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d60_2 {padding:9.375rem 0; background:#000000;} .d60_2 .text {text-align:center; color:#ffffff;} .d60_2 .text ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-4%;} .d60_2 .text ul li {width:33.333%; padding:2.5rem;} .d60_2 .text ul li .cell {} .d60_2 .text ul li .cover {width:12.5rem; height:12.5rem; margin:0 auto 2.5rem;} .d60_2 .text ul li .cover span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d60_2 .text ul li .name {} .d60_2 .text ul li h2 {font-size:1.875rem; margin-bottom:1.25rem;} .d60_2 .text ul li p {font-size:1rem;} /**/ .d60_3 {position:relative;} .d60_3::after {content:""; position:absolute; left:0; top:0; width:100%; height:30%; background:linear-gradient(to bottom, rgba(255, 255, 255, 1) , rgba(255, 255, 255, 0) 100%);} .d60_3 .main {padding:9.375rem 0 0; position:relative; z-index:1;} .d60_3 .text {text-align:center;} .d60_3 .text h1 {font-size:4.5rem; color:#009FAB;} .d60_3 .text p {font-size:4.5rem; line-height:1; font-weight:bold;} .d60_3 .img {width:100%; margin-top:3.5rem; padding-top:2.5rem; position:relative;} .d60_3 .img span {display:block; width:100%; padding-top:56.25%; background-position:center top; background-repeat:no-repeat; background-size:cover;} .d60_3 .features {position:absolute; left:50%; top:0; transform:translateX(-50%);} .d60_3 .features ul {display:flex; justify-content:center;} .d60_3 .features ul li {margin:0 0.3125rem;} .d60_3 .features ul li .cell {} .d60_3 .features ul li .cover {width:8rem;} .d60_3 .features ul li .cover span {display:block; width:100%; padding-top:57.5%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d60_3 .iendo {display:block; width:6.25rem; position:absolute; left:0; top:4.5rem;} .d60_3 .iendo span {display:block; width:100%; padding-top:36%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d60_4 {padding:9.375rem 0; background:#000000;} .d60_4 .text {text-align:center; color:#ffffff;} .d60_4 .text ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-4%;} .d60_4 .text ul li {width:33.333%; padding:2.5rem;} .d60_4 .text ul li .cell {} .d60_4 .text ul li .cover {width:12.5rem; height:12.5rem; margin:0 auto 2.5rem;} .d60_4 .text ul li .cover span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d60_4 .text ul li .name {} .d60_4 .text ul li h2 {font-size:1.875rem; margin-bottom:1.25rem;} .d60_4 .text ul li p {font-size:1rem;} /****************************************/ /* products detail: iEndo */ /****************************************/ /**/ .sel_products_detail_61 {} .sel_products_detail_61 .d61_1, .sel_products_detail_61 .d61_2, .sel_products_detail_61 .d61_3, .sel_products_detail_61 .d61_4, .sel_products_detail_61 .d61_5, .sel_products_detail_61 .d61_6 {color:rgba(255, 255, 255, 1); background-color:rgba(0, 0, 0, 1); overflow:hidden;} /**/ .d61_1 {position:relative;} .d61_1::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:20%; background:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));} .d61_1 .f_br_logo {position:absolute; z-index:1; left:0; top:3.875rem; width:6.25rem;} .d61_1 .f_br_logo span {display:block; width:100%; padding-top:35.375%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_1 .main {padding:9.375rem 0 0; position:relative; z-index:1;} .d61_1 .i_t {display:flex; justify-content:space-between; flex-wrap:wrap; width:70%; margin:auto;} .d61_1 .text {width:50%; margin-top:3.5rem;} .d61_1 .text .shead {} .d61_1 .text .shead h1 {font-size:4.5rem; line-height:1; margin-bottom:1.25rem;} .d61_1 .text .shead h2 {font-size:1.25rem; line-height:1.2;} .d61_1 .text .shead h2 span {display:block; padding:0;} .d61_1 .text ul {display:flex; flex-wrap:wrap; margin-top:2.875rem; width:100%; max-width:30rem;} .d61_1 .text ul li {width:25%; margin-bottom:0.625rem; padding-right:0.625rem;} .d61_1 .text ul li .cell {width:100%;} .d61_1 .text ul li span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_1 .img {width:calc(50% - 4.5rem);} .d61_1 .img span {display:block; width:100%; padding-top:200%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_1 .bg {position:absolute; left:0; top:0; width:100%; height:100%;} .d61_1 .bg span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d61_2 {position:relative;} .d61_2 .main {position:relative; z-index:1;} .d61_2 .topic {} .d61_2 .topic .t {display:flex; justify-content:center; align-items:center; margin-bottom:1.25rem;} .d61_2 .topic .t em {display:block; width:5.5rem; margin-right:1.25rem;} .d61_2 .topic .t span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_2 .topic .t .name {} .d61_2 .topic .t .name h2 {display:inline-block; font-size:2.5rem; line-height:1; background:-webkit-linear-gradient(45deg, rgba(239,133,58,1), rgba(8,158,164,1)) 30%; background:linear-gradient(45deg, rgba(239,133,58,1) 30%, rgba(8,158,164,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d61_2 .topic .t .name p {font-size:2.375rem; line-height:1; color:#009ea7; text-align:left;} .d61_2 .topic p {font-size:1.375rem; color:#c8c9ca; text-align:center; width:100%; max-width:50rem; margin:auto;} .d61_2 .shead {text-align:center; margin:4.5rem auto 12.5rem;} .d61_2 .shead h3 {display:inline-block; font-size:2.08rem; line-height:1; margin-bottom:1.25rem; background:-webkit-linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(8,158,164,1)); background:linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(8,158,164,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d61_2 .shead p {display:flex; justify-content:center; align-items:center;} .d61_2 .shead p i {display:block; width:6.25rem; margin-right:1.25rem; top:auto;} .d61_2 .shead p i span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_2 .shead p em {font-size:1.375rem; line-height:1.4; font-style:normal; text-align:left;} .d61_2 .m {} .d61_2 .m ul {display:flex; justify-content:space-between; flex-wrap:wrap;} .d61_2 .m ul li {width:25%;} .d61_2 .m ul li:nth-child(2), .d61_2 .m ul li:nth-child(4) {width:10%; display:flex; align-items:flex-end; justify-content:center; transform:scale(1.5) translateX(-6.5%) translateY(-6.5%);} .d61_2 .m ul li:nth-child(2) .cell, .d61_2 .m ul li:nth-child(4) .cell {text-align:center;} .d61_2 .m ul li:nth-child(2) span, .d61_2 .m ul li:nth-child(4) span {display:block; position:relative; width:100%; margin-bottom:65%; padding-top:25%; background-image:url("../images/p61/002_m_grid.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_2 .m ul li:nth-child(2) span em, .d61_2 .m ul li:nth-child(4) span em {font-style:normal; font-size:0.75rem; color:#50a8b4; white-space:nowrap; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%) scale(0.75);} .d61_2 .m ul li .cell {width:100%;} .d61_2 .m ul li .num {padding:1.25rem; display:flex; align-items:center; background:linear-gradient(90deg, rgba(8, 158, 164, 0.7), rgba(8, 158, 164, 0));} .d61_2 .m ul li .num em {opacity:0.5; display:block; margin-right:1.25rem; font-style:normal; font-size:3.875rem; line-height:1;} .d61_2 .m ul li .num p {line-height:1.4;} .d61_2 .m ul li .num p strong {display:block; font-size:1.125rem; font-weight:normal;} .d61_2 .m ul li .num p i {opacity:0.8; display:block; font-style:normal; font-size:1rem; color:#FFFFFF; top:auto; text-indent:0;} .d61_2 .m ul li h3 {margin:1.875rem auto 2.5rem; font-size:1.375rem; font-weight:normal; text-align:center;} .d61_2 .m ul li h3 em {display:inline-block; position:relative; margin-right:0.625rem; padding:0.625rem; font-style:normal; font-size:1.875rem;} .d61_2 .m ul li h3 em sup {display:block; width:0; height:0; position:absolute; left:0; top:0;} .d61_2 .m ul li h3 em sup::before {content:""; position:absolute; left:0; top:0; width:0.875rem; height:0.125rem; background:#FFFFFF;} .d61_2 .m ul li h3 em sup::after {content:""; position:absolute; left:0; top:0; width:0.125rem; height:0.5rem; background:#FFFFFF;} .d61_2 .m ul li h3 em sub {display:block; width:0; height:0; position:absolute; right:0; bottom:0;} .d61_2 .m ul li h3 em sub::before {content:""; position:absolute; right:0; bottom:0; width:0.875rem; height:0.125rem; background:#FFFFFF;} .d61_2 .m ul li h3 em sub::after {content:""; position:absolute; right:0; bottom:0; width:0.125rem; height:0.5rem; background:#FFFFFF;} .d61_2 .m ul li .img {} .d61_2 .m ul li .img span {display:block; width:100%; padding-top:56.25%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_2 .b {margin-top:4.5rem;} .d61_2 .b ul {display:flex; justify-content:space-between; flex-wrap:wrap; padding:0 20%;} .d61_2 .b ul li {width:45%;} .d61_2 .b ul li .cell {} .d61_2 .b ul li dl {display:flex; justify-content:space-between;} .d61_2 .b ul li dl dd {width:calc(50% - 0.25rem);} .d61_2 .b ul li dl dd i {display:block; width:100%; position:relative; top:auto; text-indent:0;} .d61_2 .b ul li dl dd i sup {display:block; width:0; height:0; position:absolute; left:-0.625rem; top:-0.625rem;} .d61_2 .b ul li dl dd i sup::before {content:""; position:absolute; left:0; top:0; width:0.875rem; height:1px; background:#FFFFFF;} .d61_2 .b ul li dl dd i sup::after {content:""; position:absolute; left:0; top:0; width:1px; height:0.5rem; background:#FFFFFF;} .d61_2 .b ul li dl dd i sub {display:block; width:0; height:0; position:absolute; right:-0.625rem; bottom:-0.625rem;} .d61_2 .b ul li dl dd i sub::before {content:""; position:absolute; right:0; bottom:0; width:0.875rem; height:1px; background:#FFFFFF;} .d61_2 .b ul li dl dd i sub::after {content:""; position:absolute; right:0; bottom:0; width:1px; height:0.5rem; background:#FFFFFF;} .d61_2 .b ul li dl dd span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_2 .b ul li dl dd p {margin-top:0.875rem; font-size:0.75rem; line-height:1; text-align:center;} .d61_2 .bg {position:absolute; left:0; top:0; width:100%; height:90%;} .d61_2 .bg span {display:block; width:100%; height:100%; background-image:url("../images/p61/002_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d61_3 {padding:6.25rem 0;} .d61_3 .main {} .d61_3 .shead {text-align:center; position:relative; z-index:1;} .d61_3 .shead h3 {display:inline-block; font-size:2.5rem; margin-bottom:1.875rem; background:-webkit-linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(8,158,164,1)); background:linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(8,158,164,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d61_3 .shead p {font-size:1.375rem; color:#c8c9ca; text-align:center;} .d61_3 .lr {display:flex; justify-content:space-between; align-items:center; margin-top:4.5rem;} .d61_3 .img {width:calc(60% - 2.5rem); transform:scale(1.5);} .d61_3 .img span {display:block; width:100%; padding-top:56.25%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_3 ul {width:40%;} .d61_3 ul li {margin-bottom:2.5rem;} .d61_3 ul li .cell {display:flex; align-items:center;} .d61_3 ul li p {font-size:1.375rem; line-height:1; position:relative;} .d61_3 ul li p i {position:absolute; left:50%; top:100%; transform:translateX(-50%); width:1.375rem;} .d61_3 ul li p i span {display:block; padding-top:700%; background-image:url("../images/p61/003_arrow.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_3 ul li dl {display:flex; justify-content:space-between; position:relative; margin:auto;} .d61_3 ul li dl::after{content:""; position:absolute; left:50%; bottom:-1.25rem; transform:translateX(-50%); width:30rem; height:0.125rem; background:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));} .d61_3 ul li:last-child dl::after {display:none;} .d61_3 ul li dl dd {width:12.5rem; margin:0 0.625rem;} .d61_3 ul li dl dd span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d61_4 {} .d61_4 .main {} .d61_4 h2 {position:relative; padding:1.25rem;} .d61_4 h2::after {content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; height:0.125rem; background:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))} .d61_4 h2 em {font-style:normal; font-size:5.5rem; line-height:1; text-transform:uppercase; position:absolute; z-index:1; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)); background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d61_4 h2 em::after {content:""; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); width:4.5rem; height:4.5rem; background-image:url("../images/p61/movie_icon.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_4 h2 i {display:block; width:50%; margin:auto; top:auto; text-indent:0;} .d61_4 h2 i span {display:block; width:100%; padding-top:12.5%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_4 ul {margin-top:2.5rem; display:flex; justify-content:space-between; flex-wrap:wrap;} .d61_4 ul li:nth-child(1) {width:calc(60% - 2.5rem);} .d61_4 ul li:nth-child(2) {width:calc(40% - 2.5rem);} .d61_4 ul li .cell {} .d61_4 ul li .s_h {} .d61_4 ul li .s_h p {display:flex; align-items:center;} .d61_4 ul li .s_h p i {display:block; width:6.25rem; margin-right:1.25rem; top:auto;} .d61_4 ul li .s_h p i span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_4 ul li .s_h p em {font-size:1.375rem; line-height:1.4; font-style:normal; text-align:left;} .d61_4 ul li .m {margin:2.5rem 0 1.25rem;} .d61_4 ul li .m dl {display:flex;} .d61_4 ul li .m dl dd {flex:1; margin-right:0.625rem; padding:1.25rem 1.5rem; position:relative; border-top:1px solid rgba(255, 255, 255, 0.8); border-radius:calc(0.625rem + 1px);} .d61_4 ul li .m dl dd:nth-child(2), .d61_4 ul li .m dl dd:nth-child(4) {width:1rem; height:1rem; margin-top:auto; margin-bottom:auto; padding:0; border:none; background:#FFFFFF; border-radius:100%; flex:none;} .d61_4 ul li .m dl dd:nth-child(2)::before, .d61_4 ul li .m dl dd:nth-child(4)::before, .d61_4 ul li .m dl dd:nth-child(2)::after, .d61_4 ul li .m dl dd:nth-child(4)::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d61_4 ul li .m dl dd:nth-child(2)::before, .d61_4 ul li .m dl dd:nth-child(4)::before {width:1px; height:50%; background:#000000;} .d61_4 ul li .m dl dd:nth-child(2)::after, .d61_4 ul li .m dl dd:nth-child(4)::after {width:50%; height:1px; background:#000000;} .d61_4 ul li .m dl dd:last-child {margin:0;} .d61_4 ul li .m dl dd::before {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; height:100%; background:linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); border-radius:0.625rem;} .d61_4 ul li .m dl dd p {font-size:0.875rem; line-height:1.6; position:relative; z-index:1;} .d61_4 ul li strong {font-size:1rem; font-weight:normal;} .d61_4 ul li .b {margin-top:2.5rem;} .d61_4 ul li .b dl {display:flex; justify-content:space-between;} .d61_4 ul li .b dl dd {width:calc(50% - 1.25rem);} .d61_4 ul li .b dl dd span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_4 ul li .b dl dd p {font-size:0.875rem; line-height:1; margin-top:1.25rem; text-align:center;} /**/ .d61_5 {padding:6.25rem 0;} .d61_5 .main {} .d61_5 h2 {position:relative; padding:1.25rem;} .d61_5 h2::after {content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; height:0.125rem; background:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))} .d61_5 h2 em {font-style:normal; font-size:5.5rem; line-height:1; text-transform:uppercase; position:absolute; z-index:1; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)); background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d61_5 h2 em::after {content:""; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); width:4.5rem; height:4.5rem; background-image:url("../images/p61/movie_icon.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_5 h2 i {display:block; width:50%; margin:auto; top:auto; text-indent:0;} .d61_5 h2 i span {display:block; width:100%; padding-top:12.5%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_5 .s_h {margin-top:2.5rem;} .d61_5 .s_h p {display:flex; justify-content:center; align-items:center;} .d61_5 .s_h p i {display:block; width:6.25rem; margin-right:1.25rem; top:auto;} .d61_5 .s_h p i span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_5 .s_h p em {font-size:1.375rem; line-height:1.4; font-style:normal; text-align:left;} .d61_5 .m {margin:2.5rem 0 1.25rem;} .d61_5 .m dl {display:flex; justify-content:center; width:65%; margin:auto;} .d61_5 .m dl dd {flex:1; margin-right:0.625rem; padding:1.25rem 1.5rem; position:relative; border-top:1px solid rgba(255, 255, 255, 0.8); border-radius:calc(0.625rem + 1px);} .d61_5 .m dl dd:nth-child(2), .d61_5 .m dl dd:nth-child(4) {width:1rem; height:1rem; margin-top:auto; margin-bottom:auto; padding:0; border:none; background:#FFFFFF; border-radius:100%; flex:none;} .d61_5 .m dl dd:nth-child(2)::before, .d61_5 .m dl dd:nth-child(4)::before, .d61_5 .m dl dd:nth-child(2)::after, .d61_5 .m dl dd:nth-child(4)::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d61_5 .m dl dd:nth-child(2)::before, .d61_5 .m dl dd:nth-child(4)::before {width:50%; height:1px; background:#000000;} .d61_5 .m dl dd:nth-child(2)::after, .d61_5 .m dl dd:nth-child(4)::after {width:1px; height:50%; background:#000000;} .d61_5 .m dl dd:last-child {margin:0;} .d61_5 .m dl dd::before {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; height:100%; background:linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); border-radius:0.625rem;} .d61_5 .m dl dd p {font-size:0.875rem; line-height:1.6; position:relative; z-index:1;} .d61_5 strong {display:flex; flex-direction:column; font-size:1.125rem; font-weight:normal; line-height:1.6; text-align:center; width:50%; margin:auto;} .d61_5 strong span {} .d61_5 .b {margin-top:4.5rem;} .d61_5 .b ul {display:flex; justify-content:space-between; flex-wrap:wrap;} .d61_5 .b ul li {width:calc(50% - 4.5rem);} .d61_5 .b dl {display:flex; justify-content:space-between;} .d61_5 .b dl dd {width:calc(50% - 1.25rem);} .d61_5 .b dl dd span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_5 .b dl dd p {font-size:0.875rem; line-height:1; margin-top:1.25rem; text-align:center;} /**/ .d61_6 {position:relative; padding:0 0 9.375rem 0;} .d61_6::after {content:""; position:absolute; left:0; top:0; width:100%; height:20%; background:linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));} .d61_6 .main {position:relative; z-index:1;} .d61_6 h2 {position:relative; padding:1.25rem;} .d61_6 h2::after {content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; height:0.125rem; background:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))} .d61_6 h2 em {font-style:normal; font-size:5.5rem; line-height:1; text-transform:uppercase; position:absolute; z-index:1; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)); background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d61_6 h2 em::after {content:""; position:absolute; left:calc(100% + 1.25rem); top:50%; transform:translateY(-50%); width:4.5rem; height:4.5rem; background-image:url("../images/p61/movie_icon.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_6 h2 i {display:block; width:50%; margin:auto; top:auto; text-indent:0;} .d61_6 h2 i span {display:block; width:100%; padding-top:12.5%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_6 .s_h {margin-top:2.5rem;} .d61_6 .s_h p {display:flex; justify-content:center; align-items:center;} .d61_6 .s_h p i {display:block; width:6.25rem; margin-right:1.25rem; top:auto;} .d61_6 .s_h p i span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_6 .s_h p em {font-size:1.375rem; line-height:1.4; font-style:normal; text-align:left;} .d61_6 .m {margin:2.5rem 0 1.25rem;} .d61_6 .m dl {display:flex; justify-content:center; width:65%; margin:auto;} .d61_6 .m dl dd {flex:1; margin-right:0.625rem; padding:1.25rem 1.5rem; position:relative; border-top:1px solid rgba(255, 255, 255, 0.8); border-radius:calc(0.625rem + 1px);} .d61_6 .m dl dd:nth-child(2), .d61_6 .m dl dd:nth-child(4) {width:1rem; height:1rem; margin-top:auto; margin-bottom:auto; padding:0; border:none; background:#FFFFFF; border-radius:100%; flex:none;} .d61_6 .m dl dd:nth-child(2)::before, .d61_6 .m dl dd:nth-child(4)::before, .d61_6 .m dl dd:nth-child(2)::after, .d61_6 .m dl dd:nth-child(4)::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d61_6 .m dl dd:nth-child(2)::before, .d61_6 .m dl dd:nth-child(4)::before {width:50%; height:1px; background:#000000;} .d61_6 .m dl dd:nth-child(2)::after, .d61_6 .m dl dd:nth-child(4)::after {width:1px; height:50%; background:#000000;} .d61_6 .m dl dd:last-child {margin:0;} .d61_6 .m dl dd::before {content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; height:100%; background:linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); border-radius:0.625rem;} .d61_6 .m dl dd p {font-size:0.875rem; line-height:1.6; position:relative; z-index:1;} .d61_6 strong {display:flex; flex-direction:column; font-size:1.125rem; font-weight:normal; line-height:1.6; text-align:center; width:50%; margin:auto;} .d61_6 strong span {} .d61_6 .b {margin-top:4.5rem;} .d61_6 .b ul {display:flex; justify-content:space-between; flex-wrap:wrap;} .d61_6 .b ul li {width:calc(50% - 4.5rem);} .d61_6 .b dl {display:flex; justify-content:space-between;} .d61_6 .b dl dd {width:calc(50% - 1.25rem);} .d61_6 .b dl dd span {display:block; width:100%; padding-top:75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d61_6 .b dl dd p {font-size:0.875rem; line-height:1; margin-top:1.25rem; text-align:center;} .d61_6 .bg {position:absolute; left:0; top:0; width:100%; height:100%;} .d61_6 .bg span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /****************************************/ /* products detail: water_air_pump */ /****************************************/ /**/ .sel_products_detail_62 {} /**/ .d62_1 {padding:6.25rem 0; background-color:#F2F2F2; background-image:url('../images/p62/001_bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d62_1 .main {} .d62_1 .shead {text-align:center;} .d62_1 .shead h1 {display:flex; flex-direction:column; font-size:3.5rem;} .d62_1 .shead h1 span {} .d62_1 .shead p {font-size:1.875rem; margin-top:0.625rem;} .d62_1 .img {width:80%; margin:2.5rem auto 0;} .d62_1 .img span {display:block; width:100%; padding-top:50%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d62_2 {padding:9.375rem 0; overflow:hidden;} .d62_2 .main {} .d62_2 .shead {text-align:center;} .d62_2 .shead h2 {font-size:2.75rem;} .d62_2 .shead p {font-size:1.375rem; line-height:1.4; margin:1.25rem auto 0; opacity:0.5;} .d62_2 .lr {margin-top:6.25rem; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-end; position:relative;} .d62_2 .lr::after {content:""; position:absolute; left:-75%; top:-5%; width:100%; height:16rem; background-color:#009FAB; background-image:url('../images/p62/002_f.png'); background-position:top 2rem right 2rem; background-repeat:no-repeat; background-size:auto 45%;} .d62_2 .img {width:calc(55% - 2rem); position:relative; z-index:1;} .d62_2 .img span {display:block; width:100%; padding-top:58%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d62_2 ul {width:calc(45% - 2rem); position:relative; z-index:1;} .d62_2 ul li {margin-bottom:2.25rem;} .d62_2 ul li:last-child {margin:0;} .d62_2 ul li .cell {display:flex; justify-content:space-between; align-items:flex-start;} .d62_2 ul li .icon {width:6rem; height:6rem; margin-top:-1rem;} .d62_2 ul li .icon span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d62_2 ul li .text {width:calc(100% - 6rem - 1.25rem); padding:0 0 2.25rem 0; border-bottom:1px solid rgba(0, 0, 0, 0.1);} .d62_2 ul li:last-child .text {padding:0; border:none;} .d62_2 ul li .text h3 {margin-bottom:0.625rem; font-size:1.375rem; color:#009FAB;} .d62_2 ul li .text p {font-size:1rem; line-height:1.4; opacity:0.5;} /**/ .d62_3 {padding:9.375rem 0; background:rgba(0, 0, 0, 0.02); overflow:hidden;} .d62_3 .main {} .d62_3 .shead {text-align:center;} .d62_3 .shead h2 {font-size:2.75rem;} .d62_3 .shead p {font-size:1.375rem; line-height:1.4; width:60%; margin:1.25rem auto 0; opacity:0.5;} .d62_3 .lr {margin-top:6.25rem; display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row-reverse; align-items:flex-end; position:relative;} .d62_3 .lr::after {content:""; position:absolute; right:-75%; top:-5%; width:100%; height:16rem; background-color:#009FAB; background-image:url('../images/p62/003_f.png'); background-position:top 2rem left 2rem; background-repeat:no-repeat; background-size:auto 45%;} .d62_3 .img {width:calc(55% - 2rem); position:relative; z-index:1;} .d62_3 .img span {display:block; width:100%; padding-top:58%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d62_3 ul {width:calc(45% - 2rem); padding-left:2.5rem; position:relative; z-index:1;} .d62_3 ul li {margin-bottom:2.25rem;} .d62_3 ul li:last-child {margin:0;} .d62_3 ul li .cell {display:flex; justify-content:space-between;} .d62_3 ul li .icon {width:6rem; height:6rem; margin-top:-1rem;} .d62_3 ul li .icon span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d62_3 ul li .text {width:calc(100% - 6rem - 1.25rem); padding:0 0 2.25rem 0; border-bottom:1px solid rgba(0, 0, 0, 0.1);} .d62_3 ul li:last-child .text {padding:0; border:none;} .d62_3 ul li .text h3 {margin-bottom:0.625rem; font-size:1.375rem; color:#009FAB;} .d62_3 ul li .text p {font-size:1rem; line-height:1.4; opacity:0.5;} /****************************************/ /* products detail: EB-6P17&EB-6P22 */ /****************************************/ /**/ .sel_products_detail_63 {} /**/ .d63_1 {} .d63_1 .main {display:flex; justify-content:space-between; padding:6.25rem 0 0; position:relative; z-index:1;} .d63_1 .text {position:absolute; z-index:1; right:0; top:25%;} .d63_1 .text h1 {font-size:3.875rem; color:#009FAB;} .d63_1 .text p {font-size:1.875rem;} .d63_1 .features {margin-top:1.875rem;} .d63_1 .features ul {display:flex;} .d63_1 .features ul li {margin:0 0.625rem 0 0;} .d63_1 .features ul li .cell {} .d63_1 .features ul li .cover {width:6.25rem;} .d63_1 .features ul li .cover span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d63_1 .img {width:90%; transform:translateX(-20%);} .d63_1 .img span {display:block; width:100%; padding-top:56.25%; background-position:center top; background-repeat:no-repeat; background-size:cover;} .d63_1 .iendo {display:block; width:6.25rem; position:absolute; left:0; top:4.5rem;} .d63_1 .iendo span {display:block; width:100%; padding-top:36%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d63_2 {padding:6.25rem 0 9.375rem; text-align:center; background:linear-gradient(90deg, rgba(244, 244, 244, 1), rgba(220, 221, 221, 1));} .d63_2 ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-1.25rem;} .d63_2 ul li {width:25%; padding:1.25rem;} .d63_2 ul li .cell {} .d63_2 ul li .cover {width:12.5rem; margin:0 auto 2.5rem;} .d63_2 ul li .cover span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d63_2 ul li .text {} .d63_2 ul li h2 {font-size:1.75rem; color:#009FAB; margin-bottom:0.625rem;} .d63_2 ul li p {font-size:1.125rem; color:#000000;} .d63_2 ul li:first-child {width:100%; padding:0; transform:translateY(10%);} .d63_2 ul li:first-child .cell {display:flex; justify-content:center; align-items:center;} .d63_2 ul li:first-child .cover {width:28%; margin:0 2.5rem 0 0;} .d63_2 ul li:first-child .text {text-align:left;} /**/ .d63_3 {padding:6.25rem 0; color:#FFFFFF; background:#000000;} .d63_3 .main {} .d63_3 .shead {text-align:center;} .d63_3 .shead h2 {display:inline-block; font-size:2.375rem; line-height:1; margin-bottom:1.25rem; background:-webkit-linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(8,158,164,1)); background:linear-gradient(45deg, rgba(255,255,255,1) 30%, rgba(8,158,164,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d63_3 .shead p {font-size:1.375rem; opacity:0.8;} .d63_3 ul {width:70%; margin:4.5rem auto 0;} .d63_3 ul li {margin-bottom:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255, 255, 255, 0.2);} .d63_3 ul li:last-child {margin:0; padding:0; border:none;} .d63_3 ul li .cell {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;} .d63_3 ul li .text {width:70%;} .d63_3 ul li .text .f {display:flex; align-items:center;} .d63_3 ul li .text .f i {width:8rem; margin-right:1.25rem; top:auto; text-indent:0;} .d63_3 ul li .text .f i span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d63_3 ul li .text .f p {font-size:1.75rem; line-height:1.35;} .d63_3 ul li .text strong {display:block; font-weight:normal; margin-top:2.5rem; font-size:1.125rem; line-height:1.8;} .d63_3 ul li .cover {width:25%;} .d63_3 ul li .cover span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /****************************************/ /* products detail: ECY-X20 & ECY-110 */ /****************************************/ /**/ .sel_products_detail_64 {} /**/ .d64_1 {padding:9.375rem 0 0; background:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));} .d64_1 .main {display:flex; justify-content:flex-end; position:relative;} .d64_1 .text {position:absolute; left:0; top:2.5rem;} .d64_1 .text .shead {} .d64_1 .text .shead h1 {font-size:4.5rem; color:#009FAB;} .d64_1 .text .shead h2 {font-size:4.5rem;} .d64_1 .text ul {margin-top:2.5rem; display:flex;} .d64_1 .text ul li {width:6.875rem; margin-right:0.625rem;} .d64_1 .text ul li:last-child {margin:0;} .d64_1 .text ul li .cell {} .d64_1 .text ul li span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d64_1 .img {width:60%;} .d64_1 .img i {display:block; width:100%;} .d64_1 .img i span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d64_2 {padding:12.5rem 0 9.375rem 0; background:rgba(0, 0, 0, 1);} .d64_2 .main {} .d64_2 .text {color:#FFFFFF; text-align:center;} .d64_2 .text h2 {color:#009FAB; font-size:3rem;} .d64_2 .text h2 sup {font-size:1.375rem;} .d64_2 .text p {font-size:1.75rem; width:65%; margin:2.5rem auto 2.5rem;} .d64_2 .text span {font-size:0.875rem; opacity:0.8;} /**/ .d64_3 {overflow:hidden;} .d64_3 .main {position:relative;} .d64_3 ul {} .d64_3 ul li {position:absolute;} .d64_3 ul li:nth-child(1) {right:5%; top:50%;} .d64_3 ul li:nth-child(2) {left:5%; top:55%; width:35%;} .d64_3 ul li:nth-child(3) {left:50%; top:75%; width:35%;} .d64_3 ul li:nth-child(4) {left:30%; top:95%;} .d64_3 ul li .cell {} .d64_3 ul li .text {} .d64_3 ul li .text h3 {font-size:1.75rem; color:#009FAB;} .d64_3 ul li .text p {font-size:1.25rem; color:rgba(0, 0, 0, 0.8); line-height:1.4; margin-top:0.625rem;} .d64_3 .img {margin-bottom:6.25rem; transform:translateY(0.625rem); opacity:0; transition:all 1.3s;} .d64_3 .img span {display:block; width:100%; padding-top:115%; transform:translateY(-0.625rem); background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d64_4 {padding:9.375rem 0; background:rgba(0, 0, 0, 1);} .d64_4 .main {} .d64_4 .text {text-align:center;} .d64_4 .text h2 {font-size:2.875rem; color:#FFFFFF;} .d64_4 .img {margin-top:4.5rem;} .d64_4 .img ul {display:flex; justify-content:center;} .d64_4 .img ul li {flex:1; max-width:25rem; padding:0 2.5rem;} .d64_4 .img ul li .cell {} .d64_4 .img ul li span {display:block; width:100%; padding-top:83.5%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d64_5 {padding:9.375rem 0; background:rgba(0, 0, 0, 0.05);} .d64_5 .main {} .d64_5 .text {text-align:center;} .d64_5 .text h2 {font-size:1.875rem; color:rgba(0, 0, 0, 0.7);} .d64_5 .img {} .d64_5 .img ul {display:flex; justify-content:center; flex-wrap:wrap; margin:2.5rem -0.625rem 0;} .d64_5 .img ul li {padding:0.625rem; width:25%;} .d64_5 .img ul .cell {padding:2.5rem 1.25rem; display:block; height:100%; position:relative; background:#ffffff;} .d64_5 .img ul li a {} .d64_5 .img ul li .tag {display:block; color:#ffffff; font-size:0.75rem; padding:0.375rem 0.3125rem; background:#F6AB00; position:absolute; right:0.625rem; top:0.625rem;} .d64_5 .img ul li .cover {width:50%; margin:1.25rem auto;} .d64_5 .img ul li .cover span {display:block; transform:scale(0.95,0.95); padding-top:136%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s ease;} .d64_5 .img ul li .desc {text-align:center;} .d64_5 .img ul li .desc h4 {font-size:1.125rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d64_5 .img ul li .desc p {font-size:0.875rem; color:rgba(0, 0, 0, 0.4); text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d64_5 .img ul li a:hover .cover span {transform:scale(1.0,1.0);} /****************************************/ /* products detail: ENL Series */ /****************************************/ /**/ .sel_products_detail_65 {} /**/ .d65_1 {background:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); overflow:hidden;} .d65_1 .main {display:flex; justify-content:flex-end; position:relative;} .d65_1 .text {position:absolute; left:0; bottom:12.75rem; display:flex; flex-direction:column-reverse;} .d65_1 .text .shead {} .d65_1 .text .shead h1 {font-size:4.5rem; color:#009FAB;} .d65_1 .text .shead h2 {font-size:4.5rem;} .d65_1 .text ul {margin-bottom:2.5rem; display:flex;} .d65_1 .text ul li {width:6.875rem; margin-right:0.625rem;} .d65_1 .text ul li:last-child {margin:0;} .d65_1 .text ul li .cell {} .d65_1 .text ul li span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d65_1 .img {width:90%; margin-bottom:12.75rem;} .d65_1 .img i {display:block; width:100%; transform:translateX(20%) translateY(-10px);} .d65_1 .img i span {display:block; width:100%; padding-top:68.75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d65_2 {padding:6.25rem 0; background:rgba(0, 0, 0, 1);} .d65_2 .main {} .d65_2 .text {color:#FFFFFF; text-align:center;} .d65_2 .text p {font-size:1.75rem; width:65%; margin:2.5rem auto 4.5rem;} /**/ .d65_3 {} .d65_3 .main {} .d65_3 ul {} .d65_3 ul li {padding:6.25rem 0 4.5rem;} .d65_3 ul li:nth-child(2) {background:rgba(0, 0, 0, 0.05);} .d65_3 ul li .cell {} .d65_3 ul li .text {text-align:center;} .d65_3 ul li .text h2 {font-size:3rem; color:#009FAB;} .d65_3 ul li .text p {font-size:1.375rem; color:rgba(0, 0, 0, 0.8); width:65%; margin:1.25rem auto 0;} .d65_3 ul li .img {width:50%; margin:auto; transform:translateY(-10%);} .d65_3 ul li .img span {display:block; width:100%; padding-top:80%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d65_3 ul li:nth-child(3) .img {display:flex; justify-content:space-between; align-items:center; margin-top:2.5rem; transform:none;} .d65_3 ul li:nth-child(3) .img dl {display:flex;} .d65_3 ul li:nth-child(3) .img dl dd {margin-right:2.875rem;} .d65_3 ul li:nth-child(3) .img dl dd span {display:block; width:4.875rem; height:4.875rem; margin:0 auto 0.625rem; padding:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d65_3 ul li:nth-child(3) .img dl dd p {font-size:0.875rem; line-height:1.4; text-align:center; opacity:0.8;} .d65_3 ul li:nth-child(3) .img .r {width:40%;} .d65_3 ul li:nth-child(3) .img .r span {padding-top:160%;} /**/ .d65_4 {padding:12.5rem 0 9.375rem 0; color:#FFFFFF; background:#191919;} .d65_4 .main {} .d65_4 .text {text-align:center;} .d65_4 .text h2 {color:#009FAB; font-size:3rem;} .d65_4 .text h2 sup {font-size:1.375rem;} .d65_4 .text p {font-size:1.75rem; width:65%; margin:2.5rem auto 2.5rem;} .d65_4 .text span {font-size:0.875rem; opacity:0.8;} .d65_4 .img {width:25%; margin:6.25rem auto 0; position:relative;} .d65_4 .img em {font-size:0.875rem; font-style:normal; position:absolute; opacity:0.65;} .d65_4 .img em:nth-child(1) {left:-15%; top:-5%;} .d65_4 .img em:nth-child(2) {left:25%; top:-5%;} .d65_4 .img em:nth-child(3) {left:76%; top:-5%;} .d65_4 .img em:nth-child(4) {left:42%; top:36%;} .d65_4 .img em:nth-child(5) {left:95%; top:70%; width:100%;} .d65_4 .img span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d65_4 .img p {font-size:1.125rem; line-height:1; text-align:center; margin-top:1.25rem;} /**/ .d65_5 {padding:9.375rem 0; background:rgba(0, 0, 0, 1);} .d65_5 .main {} .d65_5 .text {text-align:center;} .d65_5 .text h2 {font-size:2.875rem; color:#FFFFFF;} .d65_5 .img {margin-top:4.5rem;} .d65_5 .img ul {display:flex; justify-content:center;} .d65_5 .img ul li {flex:1; padding:0 2.5rem; max-width:25rem;} .d65_5 .img ul li .cell {} .d65_5 .img ul li span {display:block; width:100%; padding-top:122.5%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d65_6 {padding:9.375rem 0; background:rgba(0, 0, 0, 0.05);} .d65_6 .main {} .d65_6 .text {text-align:center;} .d65_6 .text h2 {font-size:1.875rem; color:rgba(0, 0, 0, 0.7);} .d65_6 .img {} .d65_6 .img ul {display:flex; justify-content:center; flex-wrap:wrap; margin:2.5rem -0.625rem 0;} .d65_6 .img ul li {padding:0.625rem; width:25%;} .d65_6 .img ul .cell {padding:2.5rem 1.25rem; display:block; height:100%; position:relative; background:#ffffff;} .d65_6 .img ul li a {} .d65_6 .img ul li .tag {display:block; color:#ffffff; font-size:0.75rem; padding:0.375rem 0.3125rem; background:#F6AB00; position:absolute; right:0.625rem; top:0.625rem;} .d65_6 .img ul li .cover {width:50%; margin:1.25rem auto;} .d65_6 .img ul li .cover span {display:block; transform:scale(0.95,0.95); padding-top:136%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s ease;} .d65_6 .img ul li .desc {text-align:center;} .d65_6 .img ul li .desc h4 {font-size:1.125rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d65_6 .img ul li .desc p {font-size:0.875rem; color:rgba(0, 0, 0, 0.4); text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d65_6 .img ul li a:hover .cover span {transform:scale(1.0,1.0);} /****************************************/ /* products detail: EUC-X20S & EUC-110S */ /****************************************/ /**/ .sel_products_detail_66 {} /**/ .d66_1 {padding:4.5rem 0 0; background:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); overflow:hidden;} .d66_1 .main {display:flex; justify-content:flex-end; position:relative;} .d66_1 .text {position:absolute; left:0; top:15%;} .d66_1 .text .shead {} .d66_1 .text .shead h1 {font-size:4.5rem; color:#009FAB;} .d66_1 .text .shead h2 {font-size:4.5rem;} .d66_1 .text ul {margin-top:2.5rem; display:flex;} .d66_1 .text ul li {width:6.875rem; margin-right:0.625rem;} .d66_1 .text ul li:last-child {margin:0;} .d66_1 .text ul li .cell {} .d66_1 .text ul li span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d66_1 .img {width:60%;} .d66_1 .img i {display:block; width:100%;} .d66_1 .img i span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d66_2 {padding:12.5rem 0 9.375rem 0; color:#FFFFFF; background:#191919;} .d66_2 .main {} .d66_2 .text {text-align:center;} .d66_2 .text h2 {color:#009FAB; font-size:3rem;} .d66_2 .text h2 sup {font-size:1.375rem;} .d66_2 .text p {font-size:1.75rem; width:65%; margin:2.5rem auto 2.5rem;} .d66_2 .text span {font-size:0.875rem; opacity:0.8;} .d66_2 .img {width:25%; margin:6.25rem auto 0; position:relative;} .d66_2 .img em {font-size:0.875rem; font-style:normal; position:absolute; opacity:0.65;} .d66_2 .img em:nth-child(1) {left:-15%; top:-5%;} .d66_2 .img em:nth-child(2) {left:25%; top:-5%;} .d66_2 .img em:nth-child(3) {left:76%; top:-5%;} .d66_2 .img em:nth-child(4) {left:42%; top:36%;} .d66_2 .img em:nth-child(5) {left:95%; top:70%; width:100%;} .d66_2 .img span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d66_2 .img p {font-size:1.125rem; line-height:1; text-align:center; margin-top:1.25rem;} /**/ .d66_3 {overflow:hidden;} .d66_3 .main {position:relative;} .d66_3 ul {} .d66_3 ul li {position:absolute; width:50%; transform:translateY(1.25rem); opacity:0; transition:all 1.3s; transition-delay:0.3s;} .d66_3 ul li:nth-child(1) {left:22%; top:8%;} .d66_3 ul li:nth-child(1) h3 {width:60%;} .d66_3 ul li:nth-child(2) {left:-4%; top:26%;} .d66_3 ul li:nth-child(2) p {width:55%;} .d66_3 ul li:nth-child(3) {left:22%; top:44%;} .d66_3 ul li:nth-child(4) {left:65%; top:65%;} .d66_3 ul li:nth-child(4) p {} .d66_3 ul li:nth-child(5) {left:22%; top:82%;} .d66_3 ul li .cell {} .d66_3 ul li .text {} .d66_3 ul li .text h3 {font-size:1.75rem; color:#009FAB;} .d66_3 ul li .text p {font-size:1.25rem; color:rgba(0, 0, 0, 0.8); line-height:1.4; margin-top:0.625rem;} .d66_3 .img {transform:translateY(0.625rem); opacity:0; transition:all 1.3s;} .d66_3 .img i {display:block; width:100%; transform:translateX(20%) translateY(-0.625rem); position:relative;} .d66_3 .img i em {display:block; width:3.875rem; position:absolute; transform:scale(1.5); opacity:0; transition:all 0.8s;} .d66_3 .img i em::before {content:""; display:block; width:100%; padding-top:100%; background-image:url(../images/p66/003_s_d.png); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d66_3 .img i em:nth-child(1) {left:17.5%; top:16.5%;} .d66_3 .img i em:nth-child(2) {left:12.5%; top:28.5%;} .d66_3 .img i em:nth-child(2)::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%) scale(1.5); width:100%; height:100%; background-image:url(../images/p66/003_s_c.png); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d66_3 .img i em:nth-child(3) {left:10.5%; top:31.5%;} .d66_3 .img i em:nth-child(4) {left:68.5%; top:52.5%;} .d66_3 .img i em:nth-child(5) {left:33.5%; top:55.5%;} .d66_3 .img i span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d66_4 {padding:9.375rem 0; background:rgba(0, 0, 0, 1);} .d66_4 .main {} .d66_4 .text {text-align:center;} .d66_4 .text h2 {font-size:2.875rem; color:#FFFFFF;} .d66_4 .img {margin-top:4.5rem;} .d66_4 .img ul {display:flex; justify-content:center;} .d66_4 .img ul li {flex:1; padding:0 2.5rem; max-width:25rem;} .d66_4 .img ul li .cell {} .d66_4 .img ul li span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d66_5 {padding:9.375rem 0; background:rgba(0, 0, 0, 0.05);} .d66_5 .main {} .d66_5 .text {text-align:center;} .d66_5 .text h2 {font-size:1.875rem; color:rgba(0, 0, 0, 0.7);} .d66_5 .img {} .d66_5 .img ul {display:flex; justify-content:center; flex-wrap:wrap; margin:2.5rem -0.625rem 0;} .d66_5 .img ul li {padding:0.625rem; width:25%;} .d66_5 .img ul .cell {padding:2.5rem 1.25rem; display:block; height:100%; position:relative; background:#ffffff;} .d66_5 .img ul li a {} .d66_5 .img ul li .tag {display:block; color:#ffffff; font-size:0.75rem; padding:0.375rem 0.3125rem; background:#F6AB00; position:absolute; right:0.625rem; top:0.625rem;} .d66_5 .img ul li .cover {width:50%; margin:1.25rem auto;} .d66_5 .img ul li .cover span {display:block; transform:scale(0.95,0.95); padding-top:136%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s ease;} .d66_5 .img ul li .desc {text-align:center;} .d66_5 .img ul li .desc h4 {font-size:1.125rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d66_5 .img ul li .desc p {font-size:0.875rem; color:rgba(0, 0, 0, 0.4); text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d66_5 .img ul li a:hover .cover span {transform:scale(1.0,1.0);} /****************************************/ /* products detail: ECH-X20 & ECH-110 */ /****************************************/ /**/ .sel_products_detail_67 {} /**/ .d67_1 {background:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); overflow:hidden;} .d67_1 .main {display:flex; justify-content:flex-end; position:relative;} .d67_1 .text {position:absolute; left:0; bottom:12.75rem;} .d67_1 .text .shead {} .d67_1 .text .shead h1 {font-size:4.5rem; color:#009FAB;} .d67_1 .text .shead h2 {font-size:4.5rem;} .d67_1 .text ul {margin-top:2.5rem; display:flex;} .d67_1 .text ul li {width:6.875rem; margin-right:0.625rem;} .d67_1 .text ul li:last-child {margin:0;} .d67_1 .text ul li .cell {} .d67_1 .text ul li span {display:block; width:100%; padding-top:56.25%; border:1px solid #009FAB; border-radius:0.3125rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d67_1 .img {width:70%;} .d67_1 .img i {display:block; width:100%; transform-origin:left top; transform:translateX(15%) translateY(-10px) scale(1.2);} .d67_1 .img i span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d67_2 {padding:12.5rem 0 9.375rem 0; color:#FFFFFF; background:#191919;} .d67_2 .main {} .d67_2 .text {text-align:center;} .d67_2 .text h2 {color:#009FAB; font-size:3rem;} .d67_2 .text h2 sup {font-size:1.375rem;} .d67_2 .text p {font-size:1.75rem; width:65%; margin:2.5rem auto 2.5rem;} .d67_2 .text span {font-size:0.875rem; opacity:0.8;} .d67_2 .img {width:25%; margin:6.25rem auto 0; position:relative;} .d67_2 .img em {font-size:0.875rem; font-style:normal; position:absolute; opacity:0.65;} .d67_2 .img em:nth-child(1) {left:-15%; top:-5%;} .d67_2 .img em:nth-child(2) {left:25%; top:-5%;} .d67_2 .img em:nth-child(3) {left:76%; top:-5%;} .d67_2 .img em:nth-child(4) {left:42%; top:36%;} .d67_2 .img em:nth-child(5) {left:95%; top:70%; width:100%;} .d67_2 .img span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d67_2 .img p {font-size:1.125rem; line-height:1; text-align:center; margin-top:1.25rem;} /**/ .d67_3 {padding:9.375rem 0;} .d67_3 .main {} .d67_3 ul {} .d67_3 ul li {} .d67_3 ul li:last-child {margin:0;} .d67_3 ul li .cell {} .d67_3 ul li .text {text-align:center;} .d67_3 ul li .text h3 {font-size:3rem; color:#009FAB;} .d67_3 ul li .text p {font-size:1.375rem; color:rgba(0, 0, 0, 0.8); width:65%; margin:1.25rem auto 0;} .d67_3 ul li .img {margin:2.5rem auto 0; position:relative; width:80%;} .d67_3 ul li .img i {display:block; width:100%; transform-origin:bottom center; transform:scale(0.8);} .d67_3 ul li .img i span {display:block; width:100%; padding-top:68.75%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d67_3 ul li .img i:nth-child(1) {position:absolute; width:60%; left:14%; top:-7.5%;} .d67_3 ul li .img i:nth-child(1) span {padding-top:56%;} /**/ .d67_4 {padding:9.375rem 0; background:rgba(0, 0, 0, 0.05);} .d67_4 .main {} .d67_4 .text {text-align:center;} .d67_4 .text h2 {font-size:1.875rem; color:rgba(0, 0, 0, 0.7);} .d67_4 .img {} .d67_4 .img ul {display:flex; justify-content:center; flex-wrap:wrap; margin:2.5rem -0.625rem 0;} .d67_4 .img ul li {padding:0.625rem; width:25%;} .d67_4 .img ul .cell {padding:2.5rem 1.25rem; display:block; height:100%; position:relative; background:#ffffff;} .d67_4 .img ul li a {} .d67_4 .img ul li .tag {display:block; color:#ffffff; font-size:0.75rem; padding:0.375rem 0.3125rem; background:#F6AB00; position:absolute; right:0.625rem; top:0.625rem;} .d67_4 .img ul li .cover {width:50%; margin:1.25rem auto;} .d67_4 .img ul li .cover span {display:block; transform:scale(0.95,0.95); padding-top:136%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:transform 0.3s ease;} .d67_4 .img ul li .desc {text-align:center;} .d67_4 .img ul li .desc h4 {font-size:1.125rem; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d67_4 .img ul li .desc p {font-size:0.875rem; color:rgba(0, 0, 0, 0.4); text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .d67_4 .img ul li a:hover .cover span {transform:scale(1.0,1.0);} /****************************************/ /* products detail: SV-M4K220 Series */ /****************************************/ /**/ .sel_products_detail_68 {} .sel_products_detail_68 .anchor {display:block; width:1px; height:1px; position:absolute; left:0; top:calc(-4.375rem); overflow:hidden;} /**/ .d68_1 {padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/001_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_1 .main {display:flex; justify-content:center;} .d68_1 .text {width:40%; margin-right:6.25rem;} .d68_1 .text h1 {font-size:3.5rem; display:flex; flex-direction:column; margin:0 0 1.25rem 0;} .d68_1 .text p {font-size:1.875rem;} .d68_1 .img {width:25%;} .d68_1 .img span {display:block; padding-top:180%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d68_2 {position:relative; text-align:center; padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/002_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_2 .main {} .d68_2 .text {} .d68_2 .text h2 {font-size:2.5rem; color:#009FA8;} .d68_2 .text p {font-size:1.375rem; width:60%; margin:1.25rem auto 0;} .d68_2 .list {margin-top:4.5rem; padding:0 5%;} .d68_2 .list ul {display:flex; justify-content:space-between; margin:0 -2.5rem;} .d68_2 .list ul li {padding:0 2.5rem; flex:1; cursor:pointer;} .d68_2 .list ul li .cell {padding:3.5rem 1.25rem; height:100%; position:relative; overflow:hidden;} .d68_2 .list ul li .cell::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1.25rem solid rgba(255,255,255,0.8); border-radius:1.875rem; mask:linear-gradient(180deg, #fff 0%, transparent 90%); filter:blur(1.25rem); transition:all 0.3s;} .d68_2 .list ul li .cell::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(255, 255, 255, 0.3); border-radius:1.875rem; mask:linear-gradient(180deg, #fff 0%, transparent 90%); transition:all 0.3s;} .d68_2 .list ul li .icon {width:50%; margin:auto; position:relative;} .d68_2 .list ul li .icon span {display:block; padding-top:56.25%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d68_2 .list ul li .icon span:nth-child(2) {opacity:0; position:absolute; left:0; top:0; width:100%;} .d68_2 .list ul li h3 {font-size:1.25rem; margin:1.25rem auto 1.25rem; transition:all 0.3s;} .d68_2 .list ul li p {opacity:0; font-size:1rem; line-height:1.4; transform:translateY(0.3125rem); transition:all 0.3s;} .d68_2 .list ul li:hover .cell::before, .d68_2 .list ul li:hover .cell::after {border-color:#009FA8;} .d68_2 .list ul li:hover .icon span:nth-child(1) {opacity:0;} .d68_2 .list ul li:hover .icon span:nth-child(2) {opacity:1;} .d68_2 .list ul li:hover h3 {color:#009FA8;} .d68_2 .list ul li:hover p {opacity:1; color:#009FA8; transform:translateY(0);} /**/ .d68_3 {position:relative; padding:0.375rem 0; text-align:center; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/003_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_3 .main {} .d68_3 .text {} .d68_3 .text h2 {font-size:2.5rem; color:#009FA8;} .d68_3 .text p {font-size:1.375rem; width:60%; margin:1.25rem auto 0;} .d68_3 .img {position:relative; padding-top:40%; transform:translateY(-5%);} .d68_3 .img i {display:block; transition:all 0.6s;} .d68_3 .img i span {display:block; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_3 .img i:nth-child(1), .d68_3 .img i:nth-child(2), .d68_3 .img i:nth-child(3) {position:absolute;} .d68_3 .img i:nth-child(1) {opacity:0; filter:blur(10px); width:70%; left:3%; top:0;} .d68_3 .img i:nth-child(1) span {padding-top:54%;} .d68_3 .img i:nth-child(2) {opacity:0; filter:blur(10px); width:28%; right:15%; top:10.875%;} .d68_3 .img i:nth-child(2) span {padding-top:58%;} .d68_3 .img i:nth-child(3) {opacity:0; width:50%; left:7%; top:15%;} .d68_3 .img i:nth-child(3) span {padding-top:87.5%;} .d68_3 .img i:nth-child(4) {width:35%; margin:auto; transform:translateX(23%);} .d68_3 .img i:nth-child(4) span {padding-top:100%;} .d68_3 .img i:nth-child(1) em {position:absolute; font-style:normal; font-size:0.6rem;} .d68_3 .img i:nth-child(1) em:nth-child(1) {left:9.5%; top:43.25%;} .d68_3 .img i:nth-child(1) em:nth-child(2) {left:9.5%; top:55.65%;} .d68_3 .img i:nth-child(1) em:nth-child(3) {left:9.5%; top:63.75%;} .d68_3 .img i:nth-child(1) em:nth-child(4) {left:9.5%; top:65.875%;} .d68_3 .img i:nth-child(1) em:nth-child(5) {left:9.5%; top:67.875%;} .d68_3 .img i:nth-child(1) em:nth-child(6) {left:13.5%; top:31.5%;} .d68_3 .img i:nth-child(1) em:nth-child(7) {left:15%; top:72%;} .d68_3 .img i:nth-child(1) em:nth-child(8) {left:17%; top:42%;} .d68_3 .img i:nth-child(1) em:nth-child(9) {left:19.5%; top:50%;} .d68_3 .img i:nth-child(1) em:nth-child(10) {left:20%; top:36.5%;} .d68_3 .img i:nth-child(1) em:nth-child(11) {left:22.875%; top:41.35%;} .d68_3 .img i:nth-child(1) em:nth-child(12) {left:25.15%; top:46.05%;} .d68_3 .img i:nth-child(1) em:nth-child(13) {left:27.15%; top:50.65%;} .d68_3 .img i:nth-child(1) em:nth-child(14) {left:29%; top:54.15%;} .d68_3 .img i:nth-child(1) em:nth-child(15) {left:30.625%; top:58.09%;} .d68_3 .img i:nth-child(1) em:nth-child(16) {left:34.875%; top:37%; display:flex; flex-direction:column; text-align:left;} .d68_3 .img i:nth-child(1) em:nth-child(16) strong {font-size:0.75rem; margin-bottom:0.3125rem;} .d68_3 .img i:nth-child(1) em:nth-child(16) b {font-size:0.65rem; line-height:1.4; font-weight:normal;} .d68_3 .img i:nth-child(1) em:nth-child(17) {opacity:0.5; display:block; width:23%; height:0; margin-right:1.25rem; position:absolute; left:20.225%; top:34.55%;} .d68_3 .img i:nth-child(1) em:nth-child(17) strong {display:block; position:absolute; top:0; height:1px;} .d68_3 .img i:nth-child(1) em:nth-child(17) strong::after {content:""; display:block; width:100%; height:100%; background:#FFFFFF;} .d68_3 .img i:nth-child(1) em:nth-child(17) strong:nth-child(1) {left:0; width:60%; transform:rotate(-45deg); transform-origin:right top;} .d68_3 .img i:nth-child(1) em:nth-child(17) strong:nth-child(1)::before {content:""; display:block; width:0.3125rem; height:0.3125rem; border-radius:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); background:#FFFFFF;} .d68_3 .img i:nth-child(1) em:nth-child(17) strong:nth-child(2) {left:60%; width:40%;} .d68_3 .img i:nth-child(2) p {position:absolute; top:50%; transform:translateY(-50%); font-style:normal; font-size:1.125rem;} .d68_3 .img i:nth-child(2) p:nth-child(1) {right:calc(50% + 1.5rem);} .d68_3 .img i:nth-child(2) p:nth-child(2) {left:calc(50% + 1.25rem);} .d68_3 .img i:nth-child(2) p:nth-child(3) {width:100%; left:0; top:100%; transform:none; margin-top:0.625rem; z-index:1; font-size:1rem; color:#969696;} .d68_3 .img.active {} .d68_3 .img.active i:nth-child(1), .d68_3 .img.active i:nth-child(2), .d68_3 .img.active i:nth-child(3) {opacity:1; filter:blur(0);} .d68_3 .img.active i:nth-child(1) {transition-delay:0.4s;} .d68_3 .img.active i:nth-child(2) {transition-delay:0.4s;} .d68_3 .img.active i:nth-child(3) {transition-delay:0.1s;} /**/ .d68_4 {position:relative; padding:9.375rem 0 12.5rem; text-align:center; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/004_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_4 .main {} .d68_4 .text {} .d68_4 .text h2 {font-size:2.5rem; color:#009FA8;} .d68_4 .s_tab {margin-top:4.5rem;} .d68_4 .s_tab .swiper-container {padding:0; position:relative; overflow:visible;} .d68_4 .s_tab .swiper-container::before {opacity:0; content:""; position:absolute; z-index:1; left:0; top:19.25%; transform:translateY(-50%); width:100%; height:0.125rem; background:#009FA8;} .d68_4 .s_tab .swiper-container::after {opacity:0; content:""; position:absolute; left:0; top:19.25%; transform:translateY(-50%); width:100%; height:0.125rem; background:#FFFFFF; mask:linear-gradient(90deg, transparent 0%, #FFF 20%, #fff 80%, transparent 100%); transition:all 1s;} .d68_4 .s_tab.s_tab_hightline .swiper-container::before {opacity:1;} .d68_4 .s_tab.s_tab_hightline_0 .swiper-container::before {mask:linear-gradient(90deg, transparent 0%, #FFF 10%, transparent 10%);} .d68_4 .s_tab.s_tab_hightline_1 .swiper-container::before {mask:linear-gradient(90deg, transparent 0%, #FFF 10%, #FFF 30%, transparent 30%)} .d68_4 .s_tab.s_tab_hightline_2 .swiper-container::before {mask:linear-gradient(90deg, transparent 0%, #FFF 10%, #FFF 50%, transparent 50%);} .d68_4 .s_tab.s_tab_hightline_3 .swiper-container::before {mask:linear-gradient(90deg, transparent 0%, #FFF 10%, #FFF 70%, transparent 70%);} .d68_4 .s_tab.s_tab_hightline_4 .swiper-container::before {mask:linear-gradient(90deg, transparent 0%, #FFF 10%, #fff 90%, transparent 100%);} .d68_4 .s_tab .swiper-container .swiper-slide {opacity:0; padding:2.5rem 0; cursor:pointer; transform:translateX(0.3125rem); transition:all 0.3s;} .d68_4 .s_tab .swiper-container .swiper-slide span {position:relative; color:#9E9E9F; transition:all 0.3s;} .d68_4 .s_tab .swiper-container .swiper-slide span::before {content:""; position:absolute; z-index:1; left:50%; top:-150%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#9E9E9F; filter:blur(1px); transition:all 0.3s;} .d68_4 .s_tab .swiper-container .swiper-slide span::after {content:""; position:absolute; left:50%; top:-150%; transform:translateX(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#9E9E9F; filter:blur(1px); animation:d68_4_s_tab 1s ease-out; animation-iteration-count:infinite; animation-direction:alternate; transition:all 0.3s;} @keyframes d68_4_s_tab { 0% { } 100% { transform:translateX(-50%) scale(1.75); } } .d68_4 .s_tab .swiper-container .swiper-slide span:hover {color:#FFFFFF;} .d68_4 .s_tab .swiper-container .swiper-slide.active span {color:#009FA8;} .d68_4 .s_tab .swiper-container .swiper-slide.active span::before {background:#009FA8; transform:translateX(-50%) scale(2.5);} .d68_4 .s_tab .swiper-container.active::after {opacity:1;} .d68_4 .s_tab .swiper-container.active .swiper-slide {opacity:1; transform:translateX(0);} .d68_4 .s_tab .swiper-container.active .swiper-slide:nth-child(1) {transition-delay:0.3s;} .d68_4 .s_tab .swiper-container.active .swiper-slide:nth-child(2) {transition-delay:0.4s;} .d68_4 .s_tab .swiper-container.active .swiper-slide:nth-child(3) {transition-delay:0.5s;} .d68_4 .s_tab .swiper-container.active .swiper-slide:nth-child(4) {transition-delay:0.6s;} .d68_4 .s_tab .swiper-container.active .swiper-slide:nth-child(5) {transition-delay:0.7s;} .d68_4 .cols {margin-top:1.875rem;} .d68_4 .cols .swiper-container {padding:0;} .d68_4 .cols .swiper-container .swiper-slide {} .d68_4 .cols .swiper-container .swiper-slide h3 {font-size:1.875rem;} .d68_4 .cols .swiper-container .swiper-slide p {font-size:1.375rem; margin:1.25rem auto 1.5rem; width:80%;} .d68_4 .cols .swiper-container .swiper-slide i {display:block; width:80%; margin:auto; position:relative;} .d68_4 .cols .swiper-container .swiper-slide i video {display:block; position:absolute; right:0.05%; top:10.43%; width:45.1%;} .d68_4 .cols .swiper-container .swiper-slide i span {display:block; width:100%; padding-top:38%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_4 .cols .swiper-container .swiper-pagination {display:none;} .d68_4 .cols .swiper-container .swiper-button-prev, .d68_4 .cols .swiper-container .swiper-button-next {width:4.5rem; height:4.5rem; background-size:50% auto; transition:all 0.3s;} .d68_4 .cols .swiper-container .swiper-button-prev {left:0; background-image:url("../images/p68/004_swiper_button_prev.svg");} .d68_4 .cols .swiper-container .swiper-button-next {right:0; background-image:url("../images/p68/004_swiper_button_next.svg");} .d68_4 .cols .swiper-container .swiper-button-prev:hover, .d68_4 .cols .swiper-container .swiper-button-next:hover {background-color:transparent;} .d68_4 .cols .swiper-container .swiper-button-prev:hover {left:-0.625rem;} .d68_4 .cols .swiper-container .swiper-button-next:hover {right:-0.625rem;} .d68_4 .cols .swiper-container .swiper-button-disabled {opacity:0;} /**/ .d68_5 {position:relative; padding:9.375rem 0; text-align:center; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/005_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_5 .main {} .d68_5 .text {} .d68_5 .text h2 {font-size:2.5rem; color:#009FA8;} .d68_5 .text p {font-size:1.375rem; width:60%; margin:1.25rem auto 0;} .d68_5 .list {margin:4.5rem auto 0; padding:0 5%;} .d68_5 .list ul {display:flex; justify-content:space-between; margin:0 -1.25rem;} .d68_5 .list ul li {padding:0 1.25rem; flex:1;} .d68_5 .list ul li .cell {position:relative; padding:1.25rem; height:100%; border-radius:1.25rem; background:linear-gradient(180deg, rgba(0, 0, 0,0.4) 0%, rgba(0, 0, 0, 0) 50%);} .d68_5 .list ul li .cell::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(255, 255, 255, 0.5); border-radius:1.25rem; mask:linear-gradient(180deg, #fff 0%, transparent 90%); transition:all 0.3s;} .d68_5 .list ul li .icon {width:80%; margin:auto; position:relative;} .d68_5 .list ul li .icon span {display:block; width:100%; padding-top:30%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d68_5 .list ul li .icon span:nth-child(2) {opacity:0; position:absolute; left:0; top:0;} .d68_5 .list ul li h3 {font-size:1.125rem; margin:1.25rem auto; transition:all 0.3s;} .d68_5 .list ul li p {opacity:0; font-size:0.875rem; line-height:1.4; transform:translateY(0.3125rem); transition:all 0.3s;} .d68_5 .list ul li:hover .cell::after {border-color:#009FA8;} .d68_5 .list ul li:hover .icon span:nth-child(2) {opacity:1;} .d68_5 .list ul li:hover h3 {color:#009FA8;} .d68_5 .list ul li:hover p {color:#009FA8; opacity:1; transform:translateY(0);} .d68_5 .img {} .d68_5 .img span {display:block; width:100%; padding-top:36%; transform:translateX(5%); background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d68_6 {position:relative; padding:9.375rem 0; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/006_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_6 .main {} .d68_6 .text {} .d68_6 .text h2 {font-size:2.5rem; color:#009FA8; text-align:center;} .d68_6 .lr {display:flex; justify-content:space-between; align-items:center; flex-direction:row-reverse; margin-top:4.5rem;} .d68_6 .img {width:55%;} .d68_6 .img span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_6 ul {width:40%; position:relative;} .d68_6 ul::before {content:""; position:absolute; left:calc(-2rem + 0.3125rem - 0.0625rem); top:50%; transform:translateY(-50%); width:0.125rem; height:120%; background:#969696; mask:linear-gradient(180deg, transparent 0%,#FFF 20%, #fff 80%,transparent 100%)} .d68_6 ul li {padding-bottom:4.5rem; cursor:default;} .d68_6 ul li:last-child {padding:0;} .d68_6 ul li .cell {} .d68_6 ul li h3 {font-size:1.375rem; color:#B4B4B5; padding:0.625rem 0; position:relative; transition:all 0.3s;} .d68_6 ul li h3::before {content:""; position:absolute; left:-2rem; top:50%; transform:translateY(-50%); width:0.625rem; height:0.625rem; border-radius:100%; background:#969696; transition:all 0.3s;} .d68_6 ul li p {opacity:0; font-size:1rem; transition:all 0.3s;} .d68_6 ul li.active h3 {color:#FFFFFF;} .d68_6 ul li.active h3::before {background:#FFFFFF;} .d68_6 ul li.active p {opacity:1;} /**/ .d68_7 {position:relative; padding:9.375rem 0; text-align:center; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/007_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_7 .main {} .d68_7 .text {} .d68_7 .text h2 {font-size:2.5rem; color:#009FA8; text-align:center;} .d68_7 .text p {font-size:1.375rem; width:60%; margin:1.25rem auto 0;} .d68_7 ul {margin-top:4.5rem; padding:0 15%;} .d68_7 ul li {margin-bottom:4.5rem;} .d68_7 ul li:last-child {margin:0;} .d68_7 ul li .cell {} .d68_7 ul li .lr {display:flex; justify-content:space-between; align-items:center;} .d68_7 ul li .lr i {width:calc(50% - 2.5rem); overflow:hidden;} .d68_7 ul li .lr i:nth-child(2) {width:2.5rem; height:2.5rem; background-image:url("../images/p68/007_arrow.png"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_7 ul li .lr span {display:block; width:100%; padding-top:60%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d68_7 ul li p {font-size:1.125rem; margin-top:1.25rem;} .d68_7 ul li .lr i:hover span {transform:scale(1.02);} /**/ .d68_8 {position:relative; padding:9.375rem 0 0; text-align:center; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/008_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_8 .main {} .d68_8 .text {} .d68_8 .text h2 {font-size:2.5rem; color:#009FA8; text-align:center;} .d68_8 .text p {font-size:1.375rem; width:60%; margin:1.25rem auto 0;} .d68_8 .img {margin-top:4.5rem; position:relative;} .d68_8 .img > span {display:block; width:100%; padding-top:56.25%; transform:translateX(-45%); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_8 .img .info {opacity:0; position:absolute; left:47.98%; top:29.45%; width:4.5%; height:12.5%; border:0.125rem solid #009FA8; border-radius:0.25rem; transition:all 0.3s; transition-delay:0.3s;} .d68_8 .img .info span {display:block; width:20rem; height:0; position:absolute; left:80%; top:-30%;} .d68_8 .img .info span i {display:block; position:absolute; top:0; height:1px;} .d68_8 .img .info span i::after {content:""; display:block; width:100%; height:100%; background:#009FA8;} .d68_8 .img .info span i:nth-child(1) {left:0; width:30%; transform:rotate(-45deg); transform-origin:right top;} .d68_8 .img .info span i:nth-child(1)::before {content:""; display:block; width:0.3125rem; height:0.3125rem; border-radius:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); background:#009FA8;} .d68_8 .img .info span i:nth-child(2) {left:30%; width:70%; mask:linear-gradient(90deg, #fff 0%, transparent 90%);} .d68_8 .img .info .t {position:absolute; left:250%; top:-6%; width:20rem; text-align:left;} .d68_8 .img .info .t h3 {font-size:1.375rem;} .d68_8 .img .info .t p {font-size:1.125rem;} .d68_8 .img.active .info {opacity:1;} /**/ .d68_9 {position:relative; padding:9.375rem 0; text-align:center; color:#FFFFFF; background-color:#000000; background-image:url("../images/p68/009_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_9 .main {} .d68_9 .text {} .d68_9 .text h2 {font-size:2.5rem; color:#009FA8; text-align:center;} .d68_9 ul {display:flex; justify-content:space-between; margin-top:6rem;} .d68_9 ul li {width:calc(50% - 4.5rem);} .d68_9 ul li .cell {position:relative;} .d68_9 ul li p {color:rgba(255, 255, 255, 0.8); font-size:1.125rem; margin-bottom:2.5rem;} .d68_9 ul li .hand {display:block; position:absolute;} .d68_9 ul li:nth-child(1) .hand {left:14%; top:40%;} .d68_9 ul li:nth-child(2) .hand {right:35%; top:60%;} .d68_9 ul li:nth-child(2) .hand i {transform:translateX(74%) translateY(10%) rotateY(180deg);} .d68_9 ul li .hand i {display:block; width:1.25rem; padding-top:100%; position:relative; z-index:2; animation:d68_9_hand 1s ease-out; animation-iteration-count:infinite; animation-direction:alternate;} @keyframes d68_9_hand { 0% { } 100% { scale:1.25; } } .d68_9 ul li .hand i::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p68/009_f.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d68_9 ul li .hand i::after {opacity:0; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p68/009_f_active.svg"); background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.3s;} .d68_9 ul li .hand em {display:block; position:absolute; left:0; top:0; transform:scaleY(30%); width:2.5rem; height:2.5rem;} .d68_9 ul li .hand em b {display:block; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); border:1px solid rgba(255, 255, 255, 1.0); border-radius:100%; transition:all 0.3s;} .d68_9 ul li .hand em b:nth-child(1) {width:calc(100% + 0.0rem); height:calc(100% + 0.0rem); animation:d68_9_ripple_hit_1 1s ease-out; animation-iteration-count:infinite; animation-delay:0s;} .d68_9 ul li .hand em b:nth-child(2) {width:calc(100% + 0.8rem); height:calc(100% + 0.8rem); animation:d68_9_ripple_hit_2 1s ease-out; animation-iteration-count:infinite; animation-delay:0.1s;} .d68_9 ul li .hand em b:nth-child(3) {width:calc(100% + 1.6rem); height:calc(100% + 1.6rem); animation:d68_9_ripple_hit_3 1s ease-out; animation-iteration-count:infinite; animation-delay:0.2s;} @keyframes d68_9_ripple_hit_1 { 0% { opacity:0; } 50% { opacity:0.8; } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } @keyframes d68_9_ripple_hit_2 { 0% { opacity:0; } 50% { opacity:0.6; } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } @keyframes d68_9_ripple_hit_3 { 0% { opacity:0; } 50% { opacity:0.2; } 100% { transform:translateX(-50%) translateY(-50%) scale(1.5); opacity:0; } } .d68_9 ul li span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d68_9 ul li a:hover .hand i::before {opacity:0;} .d68_9 ul li a:hover .hand i::after {opacity:1;} .d68_9 ul li a:hover .hand em b {border-color:#009FA8;} /****************************************/ /* products detail: ProPet X10/E10 */ /****************************************/ /**/ .sel_products_detail_69 {} /**/ .d69_1 {padding:1.25rem 0 4.5rem 0;} .d69_1 .main {display:flex; justify-content:flex-start; align-items:center;} .d69_1 .l {width:55%;} .d69_1 .l span {display:block; width:100%; padding-top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_1 .shead {text-align:center;} .d69_1 .shead h1 {display:inline-block; font-size:4.5rem; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_1 .shead p {display:flex; flex-direction:column; font-size:1.375rem; color:rgba(0, 0, 0, 0.8); line-height:1.4;} .d69_1 .r {width:40%; margin-top:4.5rem;} .d69_1 .img {margin-top:3.5rem;} .d69_1 .img span {display:block; width:100%; padding-top:66.67%; background-position:center center; background-repeat:no-repeat; background-size:cover;} /**/ .d69_2 {padding:12.5rem 0; background-image:url("../images/p69/002_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_2 .main {} .d69_2 .text {width:80%; margin:auto; text-align:center;} .d69_2 .text h2 {display:inline-block; margin-bottom:2.5rem; font-size:2.75rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); background:linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_2 .text h2 sup {font-size:1.375rem;} .d69_2 .text p {font-size:1.375rem; color:#FFFFFF; width:80%; margin:auto; word-break:keep-all;} .d69_2 .text p sup {font-size:0.625rem;} /**/ .d69_3 {padding:9.375rem 0; background:linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); overflow:hidden;} .d69_3 .main {width:80%; margin:auto;} .d69_3 ul {display:flex; flex-wrap:wrap; margin:-2.5rem;} .d69_3 ul li {width:50%; padding:2.5rem;} .d69_3 ul li .cell {} .d69_3 ul li .cover {} .d69_3 ul li .cover span {display:block; width:100%; padding-top:56.25%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_3 ul li .text {margin-top:1.875rem; opacity:0.7;} .d69_3 ul li .text h3 {font-size:1.375rem; margin-bottom:0.3125rem;} .d69_3 ul li .text p {font-size:1rem;} /**/ .d69_4 {padding:0 0 9.375rem 0;} .d69_4 h2 {position:relative; z-index:1; width:60%; margin:0 auto 4.5rem; font-size:2.75rem; display:flex; flex-direction:column; text-align:center; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_4 .swiper-container {padding:0 0 4.5rem 0;} .d69_4 .swiper-container .swiper-slide {display:flex; align-items:center; background:linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.1)); border-radius:2.5rem; overflow:hidden;} .d69_4 .swiper-container .swiper-slide:nth-child(2), .d69_4 .swiper-container .swiper-slide:nth-child(3) {flex-direction:row-reverse;} .d69_4 .swiper-container .swiper-slide .img_box {width:50%; padding-top:35%; position:relative; background:transparent;} .d69_4 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_4 .swiper-container .swiper-slide .img_box ul {position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);} .d69_4 .swiper-container .swiper-slide .img_box ul li {padding:1.25rem 0;} .d69_4 .swiper-container .swiper-slide .img_box ul li .cell {display:flex; flex-direction:column; align-items:center;} .d69_4 .swiper-container .swiper-slide .img_box ul li .l {width:4.5rem; height:4.5rem; position:relative; margin-bottom:0.625rem;} .d69_4 .swiper-container .swiper-slide .img_box ul li .l span {display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_4 .swiper-container .swiper-slide .img_box ul li .r {text-align:left;} .d69_4 .swiper-container .swiper-slide .img_box ul li .r h4 {display:inline-block; font-size:1.125rem; font-weight:normal; color:rgba(0, 0, 0, 0.7);} .d69_4 .swiper-container .swiper-slide .img_box ul li .r p {font-size:1rem; opacity:0.5;} .d69_4 .swiper-container .swiper-slide .text {width:50%; margin:0; padding:4.5rem; text-align:left; color:rgba(0, 0, 0, 1.0);} .d69_4 .swiper-container .swiper-slide .text h3 {font-size:1.875rem; margin-bottom:1.25rem;} .d69_4 .swiper-container .swiper-slide .text p {font-size:1.125rem; line-height:1.6; opacity:0.5;} .d69_4 .swiper-container .swiper-slide .text ul {display:flex; margin-top:2.5rem;} .d69_4 .swiper-container .swiper-slide .text ul li {margin-right:2.5rem;} .d69_4 .swiper-container .swiper-slide .text ul li .cell {} .d69_4 .swiper-container .swiper-slide .text ul li span {display:block; width:4.5rem; height:4.5rem; margin-bottom:0.625rem; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_4 .swiper-container .swiper-slide .text ul li p {font-size:0.875rem;} .d69_4 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:1rem; height:1rem; margin:0 0.625rem; background:rgba(0, 0, 0, 1.0); transition:all 0.3s;} .d69_4 .swiper-container .swiper-button-prev, .d69_4 .swiper-container .swiper-button-next {display:none;} /**/ .d69_5 {padding:20rem 0; position:relative; background:rgba(0, 0, 0, 1); overflow:hidden;} .d69_5 h2 {position:relative; z-index:1; width:60%; margin:auto; font-size:2.75rem; display:flex; flex-direction:column; text-align:center; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_5 .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p69/005_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} /**/ .d69_6 {padding:9.375rem 0 6.25rem; background-image:url("../images/p69/006_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d69_6 .main {} .d69_6 .swiper-container {padding:0 0 5rem 0;} .d69_6 .swiper-container .swiper-wrapper {align-items:stretch;} .d69_6 .swiper-container .swiper-slide {height:auto; padding:1.875rem; background:linear-gradient(45deg, rgba(255, 255, 255, 0.3) 10%, rgba(0, 0, 0, 0.9)); border-radius:1.25rem;} .d69_6 .swiper-container .swiper-slide .img_box {width:100%; padding-top:56.25%; position:relative;} .d69_6 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_6 .swiper-container .swiper-slide .text {margin:1.875rem 0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d69_6 .swiper-container .swiper-slide .text h3 {display:inline-block; font-size:1.125rem; font-weight:normal; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); background:linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_6 .swiper-container .swiper-slide .text p {font-size:1rem; line-height:1.4; color:#FFFFFF; opacity:0.8;} .d69_6 .swiper-container .swiper-pagination {display:none;} .d69_6 .swiper-container .swiper-button-prev, .d69_6 .swiper-container .swiper-button-next {left:50%; top:auto; right:auto; bottom:0; transform:translateX(-50%); width:2.5rem; height:2.5rem; border-radius:100%; background:rgba(255, 255, 255, 0.9); background-position:center center; background-repeat:no-repeat; background-size:20% auto; transition:all 0.3s;} .d69_6 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 2rem)); background-image:url("../images/p69/prev.svg");} .d69_6 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 2rem)); background-image:url("../images/p69/next.svg");} .d69_6 .swiper-container .swiper-button-prev:hover, .d69_6 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1);} /**/ .d69_7 {padding:20rem 0; position:relative; background:rgba(0, 0, 0, 1); overflow:hidden;} .d69_7 h2 {position:relative; z-index:1; width:60%; margin:auto; font-size:2.75rem; display:flex; flex-direction:column; text-align:center; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_7 .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-image:url("../images/p69/007_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;} /**/ .d69_8 {padding:9.375rem 0 6.25rem; background-image:url("../images/p69/008_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d69_8 .main {} .d69_8 .swiper-container {padding:0 0 5rem 0;} .d69_8 .swiper-container .swiper-wrapper {align-items:stretch;} .d69_8 .swiper-container .swiper-slide {height:auto; padding:1.875rem; background:linear-gradient(45deg, rgba(255, 255, 255, 0.3) 10%, rgba(0, 0, 0, 0.9)); border-radius:1.25rem;} .d69_8 .swiper-container .swiper-slide .img_box {width:100%; padding-top:56.25%; position:relative;} .d69_8 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_8 .swiper-container .swiper-slide .text {margin:1.875rem 0; text-align:left; color:rgba(0, 0, 0, 1.0);} .d69_8 .swiper-container .swiper-slide .text h3 {display:inline-block; font-size:1.125rem; font-weight:normal; margin-bottom:0.625rem; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); background:linear-gradient(45deg, rgba(240,148,0,1), rgba(197,229,247,1), rgba(0,104,132,1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .d69_8 .swiper-container .swiper-slide .text p {font-size:1rem; line-height:1.4; color:#FFFFFF; opacity:0.8;} .d69_8 .swiper-container .swiper-pagination {display:none;} .d69_8 .swiper-container .swiper-button-prev, .d69_8 .swiper-container .swiper-button-next {left:50%; top:auto; right:auto; bottom:0; transform:translateX(-50%); width:2.5rem; height:2.5rem; border-radius:100%; background:rgba(255, 255, 255, 0.9); background-position:center center; background-repeat:no-repeat; background-size:20% auto; transition:all 0.3s;} .d69_8 .swiper-container .swiper-button-prev {transform:translateX(calc(-50% - 2rem)); background-image:url("../images/p69/prev.svg");} .d69_8 .swiper-container .swiper-button-next {transform:translateX(calc(-50% + 2rem)); background-image:url("../images/p69/next.svg");} .d69_8 .swiper-container .swiper-button-prev:hover, .d69_8 .swiper-container .swiper-button-next:hover {background-color:rgba(255, 255, 255, 1);} /**/ .d69_9 {padding:12.5rem 0 9.375rem;} .d69_9 .main {} .d69_9 .img {width:80%; margin:auto;} .d69_9 .img span {display:block; width:100%; padding-top:20.40%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_9 .text {margin-top:2.5rem;} .d69_9 .text h2 {position:relative; z-index:1; width:60%; margin:auto; font-size:2.75rem; display:flex; flex-direction:column; text-align:center; background:-webkit-linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); background:linear-gradient(45deg, rgba(240,148,0,1) 20%, rgba(35,24,21,1) 50%, rgba(0,104,132,1) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} /**/ .d69_10 {padding:6.25rem 0 4.5rem; background-image:url("../images/p69/010_bg.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .d69_10 .swiper-container {padding:0;} .d69_10 .swiper-container .swiper-slide {display:flex; flex-wrap:wrap; align-items:center; padding:0 10%;} .d69_10 .swiper-container .swiper-slide .img_box {width:50%; padding-top:35%; position:relative; background:transparent;} .d69_10 .swiper-container .swiper-slide .img_box span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_10 .swiper-container .swiper-slide .text {width:40%; margin:0; position:relative; text-align:center; color:rgba(255, 255, 255, 0.8);} .d69_10 .swiper-container .swiper-slide .text::after {content:""; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-100%) scale(1.5); width:100%; padding-top:15.625%; background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_10 .swiper-container .swiper-slide .text h3 {font-size:4.5rem; margin-bottom:1.25rem; position:relative; z-index:1;} .d69_10 .swiper-container .swiper-slide .text p {font-size:1.875rem; line-height:1; position:relative; z-index:1;} .d69_10 .swiper-container .swiper-slide:nth-child(1) .text::after {background-image:url("../images/p69/010_1_t.png");} .d69_10 .swiper-container .swiper-slide:nth-child(2) .text::after {background-image:url("../images/p69/010_2_t.png");} .d69_10 .swiper-container .swiper-pagination .swiper-pagination-bullet {width:1rem; height:1rem; margin:0 0.625rem; background:rgba(255, 255, 255, 1); transition:all 0.3s;} /**/ .d69_11 {background:linear-gradient(-90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); overflow:hidden;} .d69_11 .pin {height:calc(100vh - 4.375rem); display:flex; justify-content:center; align-items:center;} .d69_11 .main {width:100%;} .d69_11 .list {position:relative; --h:30rem; height:var(--h);} .d69_11 .list ul {display:flex; text-align:center; position:absolute; left:0; top:0; height:100%;} .d69_11 .list ul li {width:24rem; margin-right:4.5rem;} .d69_11 .list ul li:last-child {margin:0;} .d69_11 .list ul li .cell {position:relative; height:100%;} .d69_11 .list ul li .img {height:100%;} .d69_11 .list ul li .img span {display:block; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); background-position:center center; background-repeat:no-repeat; background-size:cover;} .d69_11 .list ul li .text {position:absolute; left:0; top:0; width:100%; padding:2.5rem;} .d69_11 .list ul li .text h3 {color:#FFFFFF; font-size:1.375rem;}