@charset "utf-8"; /* CSS Document */ body { font-family: "Microsoft YaHei",STHeiti,Verdana,Arial, Helvetica, sans-serif; letter-spacing: 1px; } h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; } a, a:hover, a:visited{ color: inherit; text-decoration: none!important; } ul li{ list-style: none; } /*****header*******/ .header{ width: 100%; height: 90px; position: fixed; top: 0; left: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerBox{ width: 100%; display: flex; align-items: center; justify-content: space-between; } .headerLogo{ width: 160px; position: relative; } .headerLogo img:nth-child(2){ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; left: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerList{ display: flex; align-items: center; justify-content: space-between; } .headerList>li{ margin: 0 2.2vw; position: relative; } .headerList>li>a{ font-size: 18px; color: #fff; line-height: 40px; letter-spacing: 1px; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerList>li>a::after{ content: ''; display: block; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerList>li:hover>a::after, .headerList>li.on>a::after{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .headerLang{ margin-left: 3vw; display: flex; align-items: center; justify-content: space-between; } .headerLang span{ font-size: 18px; color: #fff; } .headerLang div{ width: 26px; overflow: hidden; position: relative; margin-right: 10px; } .headerLang div img:nth-child(2){ display: none; } .headerDown{ width: 180px; padding: 10px 0; border-bottom: 6px solid #b19772; background-color: rgba(255,255,255,0.8); box-shadow: 0 0 5px rgba(0,0,0,0.1); position: absolute; top: 64px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: none; } .headerDown a{ display: block; font-size: 16px; color: #808080; line-height: 44px; text-align: center; letter-spacing: 1px; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; /*margin-bottom:10px;*/ } .headerDown a:hover{ color: #b19772; background-color: #f5f5f5; } .headerDown_img{ /*width: 450px;*/ } .header_warp{ width:1280px; margin:0 auto;} .header.on{ background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .header.on .headerLogo img:nth-child(1){ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .header.on .headerLogo img:nth-child(2){ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .header.on .headerList>li>a{ color: #4c4c4c; } .header.on .headerList>li:hover>a, .header.on .headerList>li.on>a{ color: #b19772; } .header.on .headerList>li:hover>a::after, .header.on .headerList>li.on>a::after{ background-color: #b19772; } .header.on .headerLang span{ color: #4c4c4c; } .header.on .headerLang div img:nth-child(1){ display: none; } .header.on .headerLang div img:nth-child(2){ display: block; } /*****header*******/ /***footer***/ .footer { background-color: #171717; position: relative; } .footerTop{ height: 60px; display: flex; align-items: center; justify-content: space-between; } .footerTop p{ display: flex; align-items: center; justify-content: space-between; } .footerTop img{ margin-right: 20px; } .footerTop p, .footerTop a{ font-size: 16px; color: #808080; letter-spacing: 1px; } .footerTop a:nth-child(n+3)::before{ content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #808080; margin: 0 10px 4px; } .footerBottom{ border-top: 1px solid #333333; } .copy{ padding: 20px 0; font-size: 14px; color: #808080; } /***footer***/ /*****banner*******/ .banner{ width: 100%; position: relative; z-index: 0; } /*****banner*******/ .comment_title{ text-align: center; } .comment_title h6{ font-family: Arial; font-size: 18px; color: #808080; text-transform:capitalize; } .comment_title p{ margin-top: 10px; font-size: 40px; color: #333; /*font-weight: bold;*/ letter-spacing: 2px; } .comment_title.left h6, .comment_title.left p{ text-align: left; } .comment_title.white h6, .comment_title.white p{ color: #fff; } /* index.html */ .indSwiper{ } .indBanner_box{ height: calc(100vh - 100px); position: relative; } .indBanner_box::after{ content: ''; display: block; width: 100%; height: 100%; background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); background: -o-linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); position: absolute; top: 0; left: 0; } .indSwiper_pag{ display: none; } .indBan_pag{ display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; bottom: 0; z-index: 2; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .indBan_pag li{ cursor: pointer; margin: 0 5px; width: 100px; height: 100px; border-radius: 50%; background-color: #fff; /*overflow: hidden;*/ display: flex; align-items: center; justify-content: center; } .indBan_pag li.on{ background-color: #808080; } .indBan_icon{ width: 100px; height: 100px; overflow: hidden; color: #808080; align-items: center; justify-content: center; text-align:center; } .indBan_icon img{ width: 40px; fill: #808080; display:block; margin:0 auto; margin-top:15px; } .indBan_icon img.white{ display: none; } .indBan_pag li.on .indBan_icon img.block{ display: none; } .indBan_pag li.on .indBan_icon img.white{ display: block; } .indBan_icon p{ color:#808080; display:block; margin-top:5px; font-size:14px; letter-spacing: 0; } .indBan_pag li.on .indBan_icon p{ color: #fff; } .indSec1{ padding: 100px 0; background-color: #f5f5f5; } .indSec1_con{ margin-top: 60px; display: flex; align-items: flex-start; justify-content: space-between; position: relative; } .indSec1_left{ width: 46%; } .indSec1_swiper{ width: 50%; margin: 0; padding: 10px; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } .indSec1_img{ position: relative; } .indSec1_img .play{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .indSec1_box{ padding: 20px 10px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: space-between; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec1_time{ width: 80px; padding: 10px; /*background-color: #e6e6e6;*/ background: -webkit-linear-gradient(to right, rgba(177,151,114,0.6), rgba(177,151,114,1)); background: -o-linear-gradient(to right, rgba(177,151,114,0.6), rgba(177,151,114,1)); background: -moz-linear-gradient(to right, rgba(177,151,114,0.6), rgba(177,151,114,1)); background: linear-gradient(to right, rgba(177,151,114,0.6), rgba(177,151,114,1)); display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } .indSec1_time h6{ font-size: 28px; color: #fff; font-weight: bold; } .indSec1_time p{ font-size: 12px; color: #fff; } .indSec1_box .indSec1_txt{ width: calc(100% - 100px); } .indSec1_txt h5{ padding: 0 5%; font-size: 24px; color: #b19772; line-height: 100px; text-align: center; letter-spacing: 2px; background-color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; height: 100px; } .indSec1_txt h6{ font-size: 18px; color: #333; font-weight: bold; line-height: 1.6; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; height: 28px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec1_txt p{ margin-top: 10px; font-size: 14px; color: #808080; line-height: 1.8; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 50px; } .indSec1_box:hover{ box-shadow: 0 0 5px rgba(0,0,0,0.2); } .indSec1_box:hover .indSec1_txt h6{ color: #b19772; } .indSec1_operation{ display: flex; align-items: center; justify-content: space-between; position: absolute; top: -70px; right: 0; z-index: 2; } .indSec1_operation i{ font-size: 32px; color: #333; cursor: pointer; } .indSec1_pag{ font-size: 16px; color: #333; margin: 0 20px; width: auto; position: relative; top: 0; left: 0; right: 0; bottom: 0; } /* index.html */ .detailBan{ position: relative; } .detailBan::after{ content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; } /* about.html */ .aboutSec1{ padding: 80px 0 0; } .aboutSec1_box{ margin-top: 60px; background-color: #f5f5f5; position: relative; display: flex; align-items: flex-start; justify-content: space-between; } .aboutSec1_img{ width: 50%; } .aboutSec1_txt{ width: 50%; margin: 0 0 0 auto; padding: 50px; } .aboutSec1_txt h6{ font-size: 20px; color: #333; line-height: 1.4; font-weight: bold; margin-bottom: 20px; } .aboutSec1_txt p{ margin-top: 20px; font-size: 16px; color: #808080; letter-spacing: 0; line-height: 2; } .aboutSec1_txt p:nth-child(n+5){ display: none; } .aboutSec1_txt a{ margin-top: 20px; display: block; width: 140px; height: 48px; border-radius: 5px; background-color: #b19772; font-size: 18px; color: #fff; line-height: 48px; text-align: center; letter-spacing: 1px; } .aboutSec2{ padding: 80px 0; } .aboutSec2_center{ margin-top: 60px; position: relative; } .aboutSec2_swiper{ margin: 0 auto; padding: 20px 10px 10px; width: calc(100% - 80px); position: relative; } .aboutSec2_swiper::before{ content: ''; display: block; width: 100%; height: 1px; background-color: #e6e6e6; position: absolute; top: 20px; left: 0; } .aboutSec2_prev, .aboutSec2_next{ position: absolute; top: 4px; left: 0; cursor: pointer; } .aboutSec2_next{ left: auto; right: 0; } .aboutSec2_swiper .swiper-slide{ width: 220px; padding-top: 30px; text-align: center; } .aboutSec2_year{ margin: 0 auto; width: 90px; height: 40px; border-radius: 5px; background-color: #fff; box-shadow: 0 0 10px 5px rgba(0,0,0,0.1); position: relative; font-size: 18px; color: #4c4c4c; line-height: 40px; text-align: center; cursor: pointer; } .aboutSec2_year::before{ content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px 5px rgba(0,0,0,0.1); position: absolute; top: -38px; left: calc(50% - 9px); } .aboutSec2_year.on{ color: #fff; background-color: #b19772; } .aboutSec2_year.on::before{ background-color: #b19772; } .aboutSec2_con{ margin-top: 60px; position: relative; } .aboutSec2_box:nth-child(n+2){ display: none; } .aboutSec2_box p{ padding: 0 5%; font-size: 18px; color: #4c4c4c; line-height: 2; letter-spacing: 1px; text-align:center; } .aboutSec2_img{ width: 50%; margin: 40px auto 0; } .aboutSec3{ margin-top: 80px; padding: 80px; background-color: #f5f5f5; } .aboutSec3_swiper{ margin-top: 60px; padding-top: 10px; } .aboutSec3_swiper .swiper-slide{ width: 420px; } .aboutSec3_box{ display: block; } .aboutSec3_img{ width: 100%; /*height: 340px;*/ padding: 10px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; } .aboutSec3_img img{ max-width: 100%; max-height: 100%; } .aboutSec3_txt{ margin-top: 30px; } .aboutSec3_txt h6{ font-size: 20px; color: #333; text-align: center; font-weight: bold; letter-spacing: 1px } .aboutSec3_txt p{ margin-top: 10px; font-size: 16px; color: #808080; line-height: 2; } .aboutSec4{ padding: 60px 0; } .aboutSec4_box{ width: 60%; margin: 0 auto; padding: 40px 5% 20px; background-color: rgba(255,255,255,0.85); } .aboutSec4_list{ margin-top: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .aboutSec4_list li{ width: calc(50% - 40px); padding: 20px 0; display: flex; align-items: flex-start; justify-content: flex-start; } .aboutSec4_list li:nth-child(n+3){ border-top: 1px solid #cccccc; } .aboutSec4_txt{ margin-left: 10px; width: calc(100% - 42px); } .aboutSec4_txt h6{ font-size: 20px; color: #333; letter-spacing: 1px; } .aboutSec4_txt p{ margin-top: 15px; font-size: 16px; color: #808080; } .aboutSec5{ padding: 80px 0; } .aboutSec5_box{ margin-top: 60px; position: relative; display: flex; align-items: flex-start; justify-content: space-between; } .aboutSec5_img{ width: 35%; } .aboutSec5_txt{ width: 60%; margin: 0 0 0 auto; } .aboutSec5_box img{ margin: 0 60px 20px 0; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } .aboutSec5_box p{ font-size: 16px; color: #808080; line-height: 2; text-align: justify; } .aboutSec5_box p:nth-child(n+3){ margin-top: 20px; } .aboutSec6{ padding: 80px 0; background-color: #f5f5f5; } .aboutSec6>img{ margin-top: 60px; } .aboutSec6_bottom{ padding: 0 40px; margin-top: 30px; position: relative; } .aboutSec6_swiper{ padding-bottom: 10px; } .aboutSec6_prev, .aboutSec6_next{ position: absolute; top: 50%; left: 6%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; } .aboutSec6_next{ left: auto; right: 6%; } .aboutSec6_box{ text-align: center; padding: 40px 0; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .aboutSec6_box h6{ margin: 15px 0 20px; font-size: 16px; color: #0f0f0f; font-weight: bold; letter-spacing: 0px; } .aboutSec6_box p{ padding: 0 30px; font-size: 14px; color: #808080; line-height: 2; letter-spacing: 0; } .companySwiper_prev, .companySwiper_next{ position: absolute; top: 50%; left: 5px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; z-index: 2; } .companySwiper_next{ left: auto; right: 5px; } .honorChose{ margin-top: 40px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .honorChose a { display: block; margin: 0 10px 10px 0; padding: 0 10px; height: 40px; border-radius: 5px; border: 1px solid #b19772; background-color: #fff; font-size: 14px; color: #b19772; line-height: 40px; text-align: center; letter-spacing: 1px; cursor: pointer; } .honorChose a.on{ color: #fff; border-color: #b19772; background-color: #b19772; } .honorList{ padding: 40px 0 100px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .honorList li{ width: 30%; margin-right: 5%; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .honorList li:nth-child(3n){ margin-right: 0; } .honorList li:nth-child(n+4){ margin-top: 5%; } .honorList li:hover{ -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .storySec2 { padding: 80px 0; background-color: #fff; } .storySec2_list { margin-top: 100px; position: relative; } .storySec2_list::before{ content: ''; display: block; width: 2px; height: 60px; /*border: 1px dashed #b19772;*/ background-image: linear-gradient(to bottom, #b19772 0%, #b19772 25%, #fff 25%, #fff 50%, #b19772 50%, #b19772 75%, #fff 75%, #fff 100%); background-size: 1px 30px; background-repeat: repeat-y; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .storySec2_list li { padding: 0 10% 40px 15%; position: relative; } .storySec2_list li::before { content: ''; display: block; width: 2px; height: 100%; background-color: #b19772; position: absolute; top: 0; left: calc(50% - 1px); } .storySec2_list li:nth-child(even) { padding: 0 15% 40px 10%; } .storySec2_img { max-width: 34%; float: left; } .storySec2_list li:nth-child(even) .storySec2_img { float: right; } .storySec2_round { width: 23px; height: 23px; border-radius: 50%; background-color: #d6cbba; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .storySec2_list li:nth-child(n+2) .storySec2_round { top: 8vh; } .storySec2_round::before, .storySec2_round::after { content: ''; display: block; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .storySec2_round::before { width: 13px; height: 13px; background-color: #c5b398; } .storySec2_round::after { width: 5px; height: 5px; background-color: #b19772; } .storySec2_txt { width: 40%; float: right; } .storySec2_list li:nth-child(even) .storySec2_txt { float: left; } .storySec2_list li:nth-child(n+2) .storySec2_txt { padding-top: 8vh; } .storySec2_txt h6 { font-size: 24px; color: #b19772; font-weight: bold; letter-spacing: 1px; margin-bottom: 5%; text-align: right; } .storySec2_txt p { font-size: 16px; color: #808080; line-height: 1.8; } .storySec2_list li:nth-child(odd) .storySec2_txt h6{ text-align: left; } .storySec2_list li:nth-child(odd) .storySec2_txt p{ text-align: justify; } .storySec2_more { margin: 0 auto; width: 140px; height: 40px; border-radius: 5px; border: 1px solid #b19772; font-size: 18px; color: #b19772; line-height: 38px; text-align: center; cursor: pointer; } /* about.html */ /* product.html */ .proNav{ height: 80px; background-color: #fff; border-bottom: 1px solid #e6e6e6; } .proNav_link{ display: flex; align-items: center; justify-content: flex-start; } .proNav_link a{ margin-right: 3vw; font-size: 18px; color: #808080; line-height: 80px; letter-spacing: 1px; position: relative; } .proNav_link a.on{ color: #b19772; } .proNav_link a.on::after{ content: ''; display: block; width: 100%; height: 2px; background-color: #b19772; position: absolute; left: 0; bottom: -1px; } .proNav.fixed{ width: 100%; position: fixed; top: 90px; left: 0; z-index: 8; } .proSec1{ padding: 80px 0 160px; } .proSec1_con{ margin-top: 60px; display: flex; align-items: flex-end; justify-content: space-between; position: relative; z-index: 0; } .proSec1_con::before{ content: ''; display: block; width: 90%; height: 100%; background-color: #f5f5f5; position: absolute; right: 0; top: 80px; z-index: -1; } .proSec1_swiper{ width: 60%; } .proSec1_prev, .proSec1_next{ position: absolute; right: 0; bottom: 0; cursor: pointer; z-index: 2; } .proSec1_pag{ width: calc(35% - 130px); text-align: left; left: 62%; bottom: 20px; } .proSec1_pag .swiper-pagination-bullet{ margin-right: 10px; } .proSec1_pag .swiper-pagination-bullet-active{ background: #b19772; } .proSec1_prev{ right: 70px; } .proSec1_box{ width: 45%; padding: 0 5% 10%; } .proSec1_txt{ } .proSec1_txt h6{ font-size: 20px; color: #333; line-height: 1.2; font-weight: bold; letter-spacing: 1px; margin-bottom: 20px; } .proSec1_txt p{ margin-top: 10px; font-size: 16px; color: #808080; line-height: 2; } .proSec1_txt a{ margin-top: 20px; display: block; width: 140px; height: 48px; border-radius: 5px; background-color: #b19772; font-size: 18px; color: #fff; line-height: 48px; text-align: center; letter-spacing: 1px; } .proSec1_txt:nth-child(n+2){ display: none; } .proSec2{ padding: 80px 0 40px; background-color: #f5f5f5; } .proSec2_swiper{ margin-top: 60px; padding-bottom: 0; } .proSec2_swiper .swiper-slide{ width: 40%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .proSec2_swiper .swiper-slide-active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .proSec2_prev, .proSec2_next{ position: absolute; top: calc(50% - 20px); left: 23%; cursor: pointer; } .proSec2_next{ left: auto; right: 23%; } .proSec2_txt{ min-width: 360px; padding: 35px 10%; /*background-color: #fff;*/ /*box-shadow: 0 0 10px rgba(0,0,0,0.2);*/ font-size: 24px; color: #333; text-align: center; letter-spacing: 1px; /*position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%);*/ } .proSec3{ padding: 80px 0; } .proSec3_swiper{ margin-top: 60px; padding: 40px 0 140px; } .proSec3_box{ position: relative; background-color: #f5f5f5; } .proSec3_txt{ width: 60%; padding: 5%; } .proSec3_txt h6{ font-size: 20px; color: #333; font-weight: bold; letter-spacing: 1px; } .proSec3_txt p{ margin-top: 20px; font-size: 16px; color: #808080; line-height: 2; } .proSec3_img{ width: 40%; height: calc(100% + 120px); position: absolute; top: -60px; right: 0; } .proSec3_swiper .swiper-slide:nth-child(even) .proSec3_txt{ margin: 0 0 0 auto; } .proSec3_swiper .swiper-slide:nth-child(even) .proSec3_img{ left: 0; right: auto; } .proSec3_prev, .proSec3_next{ position: absolute; left: calc(50% - 60px); bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .proSec3_next{ left: calc(50% + 60px); } .proSec3_list{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .proSec3_list li{ width: 31%; margin-right: 3.5%; position: relative; } .proSec3_list li:nth-child(3n){ margin-right: 0; } .proSec3_list li:nth-child(n+4){ margin-top: 3.5%; } .proSec3_listTxt{ width: 80%; padding: 10px 0; background-color: rgba(0,0,0,0.6); font-size: 16px; color: #fff; line-height: 2; text-align: center; position: absolute; left: 10%; bottom: 10%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .proSec3_list li:hover .proSec3_listTxt{ width: 100%; left: 0; bottom: 0; } .proSec4{ margin-top: 60px; margin-bottom: 60px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .proSec4 li{ width: calc(33.33% - 20px); margin-right: 30px; position: relative; } .proSec4 li:nth-child(3n){ margin-right: 0; } .proSec4 li:nth-child(n+4){ margin-top: 30px; } .proSec4_txt{ width: 100%; height: 100%; background-color: rgba(177,151,114,0.7); display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 0; left: 0; z-index: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .proSec4_txt::before{ content: ''; display: block; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #fff; position: absolute; top: 10px; left: 10px; z-index: -1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .proSec4_txt h6{ width: 80%; font-size: 24px; color: #fff; line-height: 1.6; text-align: center; -webkit-transition: all 0.3s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; transition: all 0.3s ease-in-out 0.2s; } .proSec4_txt img{ margin-top: 30px; -webkit-transition: all 0.3s ease-in-out 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; -ms-transition: all 0.3s ease-in-out 0.3s; -o-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; } .proSec4 li .proSec4_txt, .proSec4 li .proSec4_txt::before, .proSec4 li .proSec4_txt h6, .proSec4 li .proSec4_txt img{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .proSec4 li .proSec4_txt h6, .proSec4 li .proSec4_txt img{ -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .proSec4 li:hover .proSec4_txt{ box-shadow: 0 0 5px rgba(177,151,114,0.7); } .proSec4 li:hover .proSec4_txt, .proSec4 li:hover .proSec4_txt::before, .proSec4 li:hover .proSec4_txt h6, .proSec4 li:hover .proSec4_txt img{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .proSec5{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .proSec5 li{ width: calc(33.33% - 20px); margin-right: 30px; position: relative; background-color: #f5f5f5; z-index: 0; } .proSec5 li:nth-child(3n){ margin-right: 0; } .proSec5 li:nth-child(n+4){ margin-top: 30px; } .proSec5_img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .proSec5_txt{ padding: 30px; background-color: rgba(0,0,0,0.4); position: relative; z-index: 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .proSec5_txt::before{ content: ''; display: block; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #fff; position: absolute; top: 10px; left: 10px; z-index: -1; } .proSec5_txt h6, .proSec5_txt p{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; } .proSec5_txt h6{ font-size: 18px; color: #fff; font-weight: bold; letter-spacing: 1px; } .proSec5_txt p{ margin-top: 10px; font-size: 14px; color: #fff; line-height: 2; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .proSec5 li:hover .proSec5_txt, .proSec5 li:hover .proSec5_txt h6, .proSec5 li:hover .proSec5_txt p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .proSec6{ padding: 80px 0; } .proSec6_box{ margin-top: 60px; position: relative; } .proSec6_txt{ width: 40%; } .proSec6_txt>span{ display: inline-block; padding: 0 20px; font-size: 16px; color: #fff; line-height: 38px; background-color: #b19772; } .proSec6_txt h6{ margin-top: 20px; margin-bottom: 30px; font-size: 36px; color: #0f0f0f; letter-spacing: 2px; } .proSec6_txt p{ margin-top: 0px; font-size: 16px; color: #4c4c4c; line-height: 2; } .proSec6_img{ width: 56%; height: 100%; position: absolute; top: 0; right: 0; } .proSec7{ padding: 80px 0; } .proSec7_list{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .proSec7_list li{ width: calc(33.3% - 20px); margin-right: 30px; } .proSec7_list li:nth-child(3n){ margin-right: 0; } .proSec7_list li:nth-child(n+4){ margin-top: 30px; } .proSec7_img{ overflow: hidden; } .proSec7_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .proSec7_list li:hover .proSec7_img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .proSec7_txt{ margin-top: 10px; } .proSec7_txt p{ font-size: 24px; color: #333; line-height: 1.6; letter-spacing: 1px; } .proSec8{ padding: 80px 0; background-color: #f5f5f5; } .proSec8_list{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .proSec8_list li{ padding: 40px; margin-right: 30px; width: calc(25% - 22.5px); text-align: center; background-color: #fff; } .proSec8_list li:nth-child(2n){ background-color: #b19772; } .proSec8_list li:nth-child(4n){ margin-right: 0; } .proSec8_list li:nth-child(n+5){ margin-top: 30px; } .proSec8_list h6{ margin-top: 20px; font-size: 22px; color: #b19772; } .proSec8_list p{ margin-top: 10px; font-size: 16px; color: #4c4c4c; line-height: 2; } .proSec8_list li:nth-child(2n) h6, .proSec8_list li:nth-child(2n) p{ color: #fff; } .proSec9{ padding: 80px 0; } .proSec9_list{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .proSec9_list li{ padding: 90px 40px 40px 120px; width: calc(50% - 40px); background-color: #fff; position: relative; } .proSec9_list h5{ display: inline-block; font-size: 30px; color: #b19772; font-weight: bold; -webkit-transform: skewX(-8deg); -moz-transform: skewX(-8deg); -ms-transform: skewX(-8deg); -o-transform: skewX(-8deg); transform: skewX(-8deg); position: absolute; top: 40px; left: 70px; } .proSec9_list h5::after{ content: ''; display: block; width: 60px; height: 2px; background-color: #b19772; position: absolute; right: -30px; bottom: -10px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: center center; } .proSec9_list h6{ font-size: 24px; color: #333; letter-spacing: 1px; margin-bottom: 20px; } .proSec9_list p{ font-size: 16px; color: #4c4c4c; line-height: 2; } /* product.html */ /* news.html */ .newsWarpper{ padding: 80px 0!important; } .newsSec1{ margin-top: 60px; } .newsSec1_box{ display: block; width: 100%; background-color: #f5f5f5; position: relative; } .newsSec1_img{ width: 45%; height: 100%; position: absolute; top: 0; left: 0; } .newsSec1_txt{ width: 50%; padding: 6% 5% 6% 0; margin: 0 0 0 auto; } .newsSec1_txt h6{ font-size: 20px; color: #333; font-weight:600; line-height: 1.4; letter-spacing: 1px; } .newsSec1_txt p{ margin-top: 40px; font-size: 16px; color: #808080; line-height: 2; letter-spacing: 1px; } .newsSec2{ margin-top: 40px; } .newsSec2_list li{ border-bottom: 1px solid #e6e6e6; } .newsSec2_list li a{ padding: 40px 0; display: flex; align-items: flex-start; justify-content: space-between; } .newsSec2_time{ width: 150px; padding-left: 25px; border-right: 1px solid #808080; } .newsSec2_time h6{ font-size: 28px; color: #333; font-weight: bold; letter-spacing: 1px; } .newsSec2_time p{ margin-top: 10px; font-size: 18px; color: #808080; letter-spacing: 1px; } .newsSec2_txt{ width: calc(100% - 150px); padding-left: 35px; } .newsSec2_txt h6{ font-size: 20px; color: #333; font-weight: bold; letter-spacing: 1px; } .newsSec2_txt p{ margin-top: 20px; font-size: 16px; color: #808080; line-height: 2; letter-spacing: 1px; } .newsSec3_list{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .newsSec3_list li{ width: calc(33.33% - 40px); margin-right: 60px; box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .newsSec3_list li:nth-child(3n){ margin-right: 0; } .newsSec3_list li:nth-child(n+4){ margin-top: 60px; } .newsSec3_txt{ padding: 20px 30px 40px; } .newsSec3_txt h6{ font-size: 24px; color: #333; font-weight: bold; letter-spacing: 1px; } .newsSec3_txt p{ margin-top: 20px; width: 110px; height: 30px; border-radius: 30px; background-color: #b19772; font-size: 16px; color: #fff; text-align: center; line-height: 30px; } .pagePag{ margin-top: 60px; text-align: center; } .pagePag a{ display: inline-block; margin: 0 2px; min-width: 45px; height: 45px; padding: 0 15px; border: 1px solid #808080; font-size: 18px; color: #808080; line-height: 43px; } .pagePag a.on{ color: #fff; background-color: #b19772; border: 1px solid #b19772; } /* news.html */ /* newsDetail.html */ .newsDetail_title{ text-align: center; } .newsDetail_title h6{ font-size: 28px; color: #0f0f0f; letter-spacing: 1px; } .newsDetail_title p{ margin-top: 20px; } .newsDetail_title span{ margin: 0 20px; font-size: 16px; color: #4c4c4c; } .newsDetail_con{ margin: 30px 0; padding: 40px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .newsDetail_con p{ font-size: 16px; color: #808080; line-height: 2; } .newsDetail_con p:nth-child(n+2){ margin-top: 20px; } .newsDetail_con img{ max-width: 100%; display: block; margin: 0 auto; } .newsDetail_bottom{ } .newsDetail_bottom a{ display: block; font-size: 16px; color: #333; line-height: 2; } .newsDetail_return{ margin: 60px auto 0; display: block; width: 210px; height: 60px; border-radius: 10px; background-color: #b19772; font-size: 18px; color: #fff!important; line-height: 60px; text-align: center; } /* newsDetail.html */ /* join.html */ .joinSec1{ padding: 80px 0; background-color: #f5f5f5; } .joinSec1 .aboutSec1_txt{ background-color: #fff; } .joinSec2{ padding: 80px 0; } .joinSec2_search{ width: 60%; height: 70px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; } .joinSec2_search input[type=text]{ width: calc(100% - 120px); height: 70px; padding: 0 40px 0 80px; border-right: none; border-top-left-radius: 10px; border-bottom-left-radius: 10px; font-size: 16px; color: #0f0f0f; letter-spacing: 1px; } .joinSec2_search img{ position: absolute; top: calc(50% - 14px); left: 30px; } .joinSec2_search input[type=button]{ width: 120px; height: 70px; border: none; background-color: #b19772; border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-size: 18px; color: #fff; letter-spacing: 2px; } .joinSec2_search{ margin-top: 60px; } .joinSec2_list{ margin-top: 60px; } .joinSec2_list li{ padding: 30px 0 30px 30px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: space-between; } .joinSec2_list li:nth-child(even){ background-color: #fff; } .joinSec2_left{ width: calc(100% - 180px); } .joinSec2_left h6{ font-size: 18px; color: #333; letter-spacing: 1px; } .joinSec2_left p{ margin-top: 20px; } .joinSec2_left span{ display: inline-block; font-size: 14px; color: #666; padding-right: 30px; } .joinSec2_left span:nth-child(n+2){ padding: 0 30px; border-left: 1px solid #b3b3b3; } .joinSec2_right{ width: 180px; padding: 10px 0; border-left: 1px solid #b3b3b3; display: flex; align-items: center; justify-content: center; } .joinSec2_right a{ display: block; width: 100px; height: 40px; border-radius: 5px; background-color: #b19772; font-size: 14px; color: #fff; line-height: 40px; text-align: center; } .joinSec3{ padding: 100px 0; } .joinSec3 h5{ font-size: 24px; color: #333; font-weight: bold; letter-spacing: 1px; } .joinSec3_box{ margin-top: 30px; } .joinSec3_box h6{ font-size: 20px; color: #333; font-weight: bold; letter-spacing: 1px; } .joinSec3_box p{ margin-top: 10px; font-size: 16px; color: #4c4c4c; } .joinSec3_box span{ display: block; width: 150px; height: 50px; border-radius: 5px; background-color: #b19772; font-size: 16px; color: #fff; line-height: 50px; text-align: center; cursor: pointer; position: relative; } .joinSec3_box input{ width: 100%; height: 100%; outline: none!important; position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } /* join.html */ @media(max-width:1760px) { } @media(max-width:1680px) { } @media(max-width:1600px) { } @media(max-width:1520px) { } @media(max-width:1440px) { .headerLang span, .headerList>li>a{ font-size: 16px; } .indSec1_txt h5{ font-size: 18px; line-height: 80px; height: 80px; } .aboutSec4_box{ width:80%;} .aboutSec1_txt p:nth-child(n+5){ display:none;} .aboutSec6_box h6{ font-size: 14px; } .aboutSec6_box p{ font-size: 12px; } .proSec3_listTxt{ font-size: 14px; letter-spacing: 0; } .honorChose a{ font-size: 14px; letter-spacing: 0; } .aboutSec3_img{ /*height: 210px;*/ } } @media(max-width:1360px) { } @media(max-width:1280px) { } @media(max-width:768px) { .row, .row>div{ margin: 0; padding: 0; } .navbar-nav { width: 100%; margin-left: 0px; text-transform: uppercase; } .navbar-nav li { text-align: center; border-bottom: 1px dotted #e5e5e5; line-height: 40px; } .navbar-nav li a { color: #666; font-size: 13px; } .navbar-nav li a:hover { color: #0752a4; } .headerbg { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999999; background: #fff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .logo_boxlist { float: left; width: 110px; margin-top: 12px; } .navbar-toggle { margin-top: 10px; } .navbar-toggle .icon-bar { background-color: #000; } .navbar-collapse { border-top: 1px solid #e5e5e5; } .banner{ margin-top: 52px; } .detailBan img{ width: auto; height: 300px; } .indBanner_box{ height: 300px; } .indBan_pag{ width: 94%; left: 3%; -webkit-transform: translate(0, 50%); -ms-transform: translate(0, 50%); -o-transform: translate(0, 50%); transform: translate(0, 50%); } .indBan_pag li, .indBan_icon{ width: 50px; height: 50px; } .indBan_icon{ display: flex; } .indBan_icon img{ margin-top: 0; width: 24px; } .indBan_icon p{ display: none; } /* index.html */ .indSec1{ padding: 60px 0 40px; } .comment_title h6{ font-size: 14px; } .comment_title p{ margin-top: 6px; font-size: 24px; } .indSec1_con{ margin-top: 40px; display: block; } .indSec1_left{ width: 100%; } .indSec1_txt h5{ font-size: 15px; line-height: 40px; height: 40px; } .indSec1_swiper{ margin-top: 50px; width: 100%; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); position: relative; } .indSec1_operation{ top: 66vw; } .footer>.container{ display: none; } .copy{ font-size: 12px; padding: 10px 0; } /* index.html */ /* about.html */ .aboutSec1{ padding: 40px 0 0; } .aboutSec1_box{ margin-top: 30px; display: block; } .aboutSec1_img{ width: 100%; height: auto; position: relative; } .aboutSec1_txt{ width: 100%; padding: 5%; } .aboutSec1_txt h6{ font-size: 22px; } .aboutSec1_txt p{ font-size: 14px!important; } .aboutSec1_txt a { width: 120px; height: 38px; font-size: 14px; line-height: 38px; } .aboutSec2{ padding: 40px 0; } .aboutSec2_center, .aboutSec2_con, .aboutSec3_swiper{ margin-top: 30px; } .aboutSec2_year{ height: 34px; font-size: 16px; line-height: 34px; } .aboutSec2_box p{ font-size: 14px; } .aboutSec2_img { width: 100%; margin: 20px auto 0; } .aboutSec3{ padding: 40px 3%; } .aboutSec3_txt{ margin-top: 20px; padding: 0 8%; } .aboutSec3_txt h6{ font-size: 18px; } .aboutSec3_txt p{ margin-top: 10px; font-size: 14px; } .aboutSec4{ padding: 40px 0; } .aboutSec4_box{ padding: 8%; width: 94%; } .aboutSec4_list{ margin-top: 20px; display: flex; } .aboutSec4_list li{ width: 100%; padding: 15px 0; } .aboutSec4_list li:nth-child(n+2) { border-top: 1px solid #cccccc; } .aboutSec4_list li>img{ width: 20px; } .aboutSec4_txt{ width: calc(100% - 30px); } .aboutSec4_txt h6{ font-size: 18px; } .aboutSec4_txt p{ margin-top: 6px; font-size: 14px; } .aboutSec4_list li p img{ margin-top: 10px; } .aboutSec5{ padding: 40px 0; } .aboutSec5_box{ margin-top: 30px; } .aboutSec5_box img{ float: none; width: 100%!important; } .aboutSec5_box p{ font-size: 14px; } .aboutSec6{ padding: 40px 0; } .aboutSec6>img{ margin-top: 30px; } .aboutSec6_prev{ left: 3%; } .aboutSec6_next{ right: 3%; } .aboutSec6_prev img, .aboutSec6_next img{ width: 28px!important; } .aboutSec6_box{ padding: 20px 0; } .aboutSec6_box>img{ width: 48px; } .aboutSec6_box h6{ font-size: 14px; } .aboutSec6_box p{ font-size: 12px; } .proNav{ height: 50px; } .proNav .container{ overflow-x: scroll; } .proNav_link a{ width: 80px; font-size: 14px; line-height: 50px; text-align: center; } .proNav.fixed{ top: 52px; } .proSec1{ padding: 40px 0; } .proSec1_con{ margin-top: 30px; display: block; } .proSec1_swiper, .proSec1_box{ width: 100%; } .proSec1_box{ margin-top: 20px; padding: 0 5% 40px; } .proSec1_con::before{ display: none; } .proSec1_txt h6{ font-size: 18px; line-height: 1.4; margin-bottom: 10px; } .proSec1_txt p{ margin: 0; font-size: 14px; letter-spacing: 0; } .proSec1_pag{ left: 0%; bottom: 0!important; width: 100%; text-align: center; } .proSec1_prev, .proSec1_next{ display: none; } .proSec2{ padding: 40px 3%; } .proSec2_prev, .proSec2_next{ display: none; } .proSec2_swiper .swiper-slide { width: 100%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .proSec2_txt { min-width: 80%; padding: 10px 3%; font-size: 22px; } .proSec3{ padding: 40px 0; } .proSec3_swiper { margin-top: 30px; padding: 0 0 80px; } .proSec3_box{ padding: 3%; } .proSec3_img { width: 100%; height: 200px; position: relative; top: 0; left: 0; } .proSec3_txt { width: 100%; padding: 5%; } .proSec3_txt h6{ font-size: 18px; } .proSec3_txt p { margin-top: 6px; font-size: 14px; color: #808080; line-height: 2; } /* about.html */ /* news.html */ .newsWarpper{ padding: 40px 0!important; } .newsSec1{ margin-top: 40px; padding: 0 3%; } .newsSec1_img{ width: 100%; height: 200px; position: relative; } .newsSec1_txt{ width: 100%; padding: 5%; } .newsSec1_txt h6{ font-size: 18px; } .newsSec1_txt p{ margin-top: 6px; font-size: 14px; } .newsSec2_list li a{ padding: 20px 3%; } .newsSec2_time{ width: 80px; padding-left: 0; } .newsSec2_time h6 { font-size: 22px; letter-spacing: 0px; } .newsSec2_time p { margin-top: 6px; font-size: 14px; letter-spacing: 0px; } .newsSec2_txt { width: calc(100% - 80px); padding-left: 20px; } .newsSec2_txt h6{ font-size: 18px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .newsSec2_txt p{ margin-top: 10px; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .pagePag a { display: inline-block; margin: 0 2px; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid #808080; font-size: 14px; color: #808080; line-height: 34px; } .newsWarpper{ padding: 40px 3%!important; } .newsDetail_title h6{ font-size: 22px; line-height: 1.4; } .newsDetail_title p{ margin-top: 10px; } .newsDetail_title span { margin: 0 10px; font-size: 14px; } .newsDetail_con{ padding: 20px 0; } .newsDetail_con p{ font-size: 14px; } .newsDetail_con p:nth-child(n+2){ margin-top: 10px!important; } .newsDetail_bottom a{ font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .newsDetail_return { margin: 30px auto 0; display: block; width: 140px; height: 42px; border-radius: 5px; background-color: #b19772; font-size: 18px; color: #fff!important; line-height: 42px; text-align: center; } .newsSec3_list{ margin-top: 30px; display: block; } .newsSec3_list li{ width: 100%; margin-right: 0; } .newsSec3_list li:nth-child(n+2){ margin-top: 20px; } .newsSec3_txt{ padding: 5%; } .newsSec3_txt h6{ font-size: 18px; } .newsSec3_txt p{ font-size: 14px; } /* news.html */ /* join.html */ .joinSec1{ padding: 40px 0; } .joinSec2{ padding: 40px 0; } .joinSec2_search { margin-top: 30px; width: 100%; height: 42px; } .joinSec2_search input[type=text] { width: calc(100% - 80px); height: 42px; padding: 0 40px 0 80px; border-right: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-size: 14px; color: #0f0f0f; letter-spacing: 1px; } .joinSec2_search input[type=button] { width: 80px; height: 42px; border: none; background-color: #b19772; border-top-right-radius: 5px; border-bottom-right-radius: 5px; font-size: 14px; color: #fff; letter-spacing: 2px; } .joinSec2_search img{ width: 24px; } .joinSec2_list{ margin-top: 30px; } .joinSec2_list li{ padding: 5%; display: block; } .joinSec2_left{ width: 100%; } .joinSec2_left p{ margin-top: 10px; } .joinSec2_left span{ display: block; padding: 0; line-height: 2; } .joinSec2_left span:nth-child(n+2) { padding: 0; border-left: none; } .joinSec2_right{ width: 100%; border: none; justify-content: flex-start; } .joinSec2_right a { display: block; width: 80px; height: 36px; border-radius: 5px; background-color: #b19772; font-size: 12px; color: #fff; line-height: 36px; text-align: center; } .joinSec3{ padding: 40px 0; } .joinSec3 h5{ font-size: 20px; } .joinSec3_box{ margin-top: 20px; } .joinSec3_box h6{ font-size: 18px; } .joinSec3_box p{ font-size: 14px; } .joinSec3_box span { display: block; width: 100px; height: 38px; border-radius: 5px; background-color: #b19772; font-size: 14px; color: #fff; line-height: 38px; text-align: center; cursor: pointer; position: relative; } /* join.html */ .storySec2_list li { padding: 0 0% 40px 0%; position: relative; } .storySec2_list li:nth-child(even){ padding: 0; } .storySec2_img{ max-width: 43%; } .storySec2_txt p{ font-size: 12px; } .aboutSec3_img{ height: 130px; } .honorChose a{ margin: 0 10px 10px 0; padding: 0 10px; height: 36px; line-height: 36px; } .honorList{ padding: 40px 0; } .honorList li{ width: 100%; margin: 0 0 20px!important; } .honorList .aboutSec3_img{ height: auto; } .proSec4{ margin-top: 30px; margin-bottom: 30px; } .proSec4 li{ width: 100%; margin: 0 0 20px!important; } .proSec4 li .proSec4_txt{ box-shadow: 0 0 5px rgba(177,151,114,0.7); } .proSec4 li .proSec4_txt, .proSec4 li .proSec4_txt::before, .proSec4 li .proSec4_txt h6, .proSec4 li .proSec4_txt img{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .proSec4_txt h6{ font-size: 18px; } .proSec5{ margin-top: 40px; } .proSec5 li{ width: 100%; margin: 0 0 20px!important; } .proSec5 li .proSec5_txt, .proSec5 li .proSec5_txt h6, .proSec5 li .proSec5_txt p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .proSec6{ padding: 40px 0; } .proSec6_box{ margin-top: 30px; } .proSec6_box2{ padding: 0!important; } .proSec6_box2 .proSec4_prev, .proSec6_box2 .proSec4_next{ top: 24%; } .proSec6_img{ width: 100%; height: 300px; position: relative; } .proSec6_txt{ margin-top: 20px; width: 100%; } .proSec6_txt p{ font-size: 14px; } } @media (min-width: 768px){ .container{ margin: 0 auto; padding: 0; } } @media (min-width: 1440px){ .container{ width: 1280px; } } @media (min-width: 1600px){ .container{ width: 1440px; } }