@charset "UTF-8"; h1, h2, h3, h4 { font-weight: 400; margin: 0 } input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0 } input[type=number] { -moz-appearance: textfield } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } fieldset { margin: 0; border: 0 } input { border: 0; height: auto } input:focus, textarea:focus { outline: 0 } input[type=number], input[type=text], textarea { font-size: 14px; line-height: 1.5; height: 36px; padding: 8px; border: 1px solid #999; -webkit-box-sizing: border-box; box-sizing: border-box } input[type=number]:focus, input[type=text]:focus, textarea:focus { border-color: #e55500 } .contact_content { width: 1200px; margin: 0 auto; padding: 40px 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; background: #fff; color: #333; } .title_style { font-size: 20px; line-height: 2; margin-top: 20px; padding: 0 40px; background: #e55500; display: inline-block; color: #fff; position: relative } .title_style:after { content: ''; display: block; width: 1198px; height: 2px; background: #e55500; position: absolute; bottom: 0; left: 0 } .float { float: left } .contact_list { width: 100%; margin: 20px 0 } .contact_list_item { width: 25%; height: 274px; display: block; padding: 20px 40px; margin-bottom: 2px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; background: #eee; border-right: 2px solid #fff; -webkit-transition: all .2s ease-in; transition: all .2s ease-in } .contact_list_item:hover span { text-decoration: underline } .contact_list .contact_list_item:first-of-type span { margin: 6px auto; line-height: 1; } .contact_list .contact_list_item:first-of-type:hover span { text-decoration: none } .contact_list .contact_list_item:nth-last-of-type(2) { width: 50%; padding: 20px; height: 460px } .contact_list .contact_list_item:last-of-type { width: 50%; height: 460px; border: 0; text-align: left } .contact_list .wechat_item p { text-align: left } .contact_list .wechat_item strong { color: #e55500; font-size: 16px } .contact_list .wechat_item div { width: 50%; padding: 20px 40px; -webkit-box-sizing: border-box; box-sizing: border-box } .contact_list .contact_list_item:nth-of-type(4) { border: 0 } .contact_list_item i, .contact_list_item span { display: block; margin: 10px auto; line-height: 1.5 } .contact_list_item i { width: 80px; height: 80px; border-radius: 50%; border: 1px solid #999 } .contact_list_item .contact_item_title { font-size: 18px; margin: 10px 0 } .contact_list_item p { margin: 10px auto } .contact_list_item span { font-size: 20px; color: #e86834 } .contact_list_item .contact_list_button { font-size: 15px; line-height: 2; color: #fff; font-weight: 400; width: 50%; background: #e55500 } .contact_list_item:hover .contact_list_button { text-decoration: none } .contact_list_item i.contact_list_phone { background: url(../images/contact_img/phone-orange.svg) center center no-repeat; background-size: 36px } .contact_list_item i.contact_list_service { background: url(/images/service-orange.svg) center center no-repeat; background-size: 36px } .contact_list_item i.contact_list_qq { background: url(/images/qq-orange.svg) center center no-repeat; background-size: 36px } .contact_list_item i.contact_list_mail { background: url(/images/mail-orange.svg) center center no-repeat; background-size: 36px } .contact_list_item i.contact_list_wechat { background: url(../images/contact_img/wechat-orange.svg) center center no-repeat; background-size: 48px } .contact_form { margin-top: 10px } .contact_form h3 { font-size: 18px; padding-left: 14px; margin-bottom: 30px } .contact_form li { width: 100%; margin: 20px auto; overflow: hidden } .contact_form label { width: 16%; float: left; text-align: right; margin-bottom: 6px; position: relative; line-height: 2.5; padding-left: 8px; -webkit-box-sizing: border-box; box-sizing: border-box } .contact_form label:before { content: '*'; position: absolute; top: 50%; left: 0; margin-top: -18px; font-size: 18px; color: #e55500 } .contact_form li:nth-of-type(3) label:before { content: '' } .contact_form input, .contact_form textarea { width: 84%; float: left } .contact_form textarea { height: 100px } .contact_form .form_submit { width: auto; height: auto; line-height: 2.5; padding: 0 40px; background: #999; color: #fff; font-size: 16px; margin: 0 auto auto 16%; cursor: pointer } .contact_form .form_submit.active{ background: #e55500; } .contact_complaint { margin: 20px 0 } .contact_complaint_content { width: 25%; height: 334px; font-size: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 30px; background: #eee } .contact_complaint_content p { margin: 10px 0 } .contact_complaint_content p strong { color: #e55500; font-size: 18px } .contact_complaint form { width: 75%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 40px } .contact_complaint p { line-height: 1.8 } .contact_complaint p span { color: #e55500; font-weight: 700 } .contact_complaint_form { width: 100%; border: 1px dashed #333; border-radius: 4px; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box } .contact_complaint_form > li { margin: 10px 0; width: 50%; float: left } .contact_complaint_form > li:nth-of-type(3) { width: 100% } .contact_complaint_form > li:last-of-type { width: 50%; } .contact_complaint_form > li:last-of-type .contact-privacy{ margin-left: 90px; margin-top: 10px; } .contact_complaint_form > li:last-of-type .contact_complaint_form_submit{ margin-left: 0; margin-top: 10px; } .contact_complaint_form > li > label { width: 80px; text-align: right; padding: 0 10px 0 0; float: left; line-height: 36px; position: relative } .contact_complaint_form > li:nth-of-type(2) > label:before, .contact_complaint_form > li:nth-of-type(3) > label:before, .contact_complaint_form > li:nth-of-type(4) > label:before { content: '*'; display: block; position: absolute; top: 50%; left: 0; margin-top: -14px; color: #e55500; font-size: 16px } .contact_complaint_form > li > input, .contact_complaint_form > li > textarea { width: 70%; float: left } .contact_complaint_form > li > textarea { width: 85%; height: 120px } .complaint_type_list { width: 75%; float: left } .complaint_type_list li { padding: 6px 20px; margin-right: 14px; line-height: 1.5; border: 1px solid #999; position: relative; float: left; cursor: pointer } .complaint_type_list li.active { border: 1px solid #e55500; overflow: hidden } .complaint_type_list li.active:before { content: ''; display: block; position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; background: #e55500; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .complaint_type_list li.active:after { content: '鈭?; position: absolute; right: 2px; bottom: -5px; font-size: 8px; color: #fff } .form_hidden_content { width: 100%; margin: 10px 0 0; clear: both; overflow: hidden; display: none } input[type=checkbox] { padding: 6px; margin-right: 4px; border-radius: 100%; display: inline-block; vertical-align: middle; border: 1px solid #999; margin-bottom: 2px; cursor: pointer } input[type=checkbox]:checked { border-color: #e55500; position: relative } input[type=checkbox]:checked:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: #e55500; border-radius: 50%; margin: -4px auto auto -4px } .checkbox-list { margin: 10px 0 } .checkbox-list div, .checkbox-list div label { display: inline-block; margin-right: 20px } .contact_complaint_form > li > label > span { color: #999 } .upload_list { margin: 20px 0 } .upload_list li { width: 100px; height: 100px; float: left; margin: 0 10px 10px 0; border: 1px solid #ddd; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative } .upload_list li:not(:last-of-type):hover { opacity: .8; -ms-filter: 'alpha(opacity=80)' } .upload_list li:not(:last-of-type):hover:before { content: ''; display: block; position: absolute; right: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .9) } .upload_list li:not(:last-of-type):hover:after { content: ''; display: block; position: absolute; right: 0; top: 0; width: 8px; height: 2px; margin-top: 10px; margin-right: 6px; background: #e55500; border-radius: 1px } .upload_list li img { width: 100%; height: 100% } .upload_button { position: relative; display: inline-block; overflow: hidden; width: 100px; height: 100px; background: #ddd; cursor: pointer } .upload_button:after, .upload_button:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin-left: -20px; width: 40px; height: 2px; border-radius: 1px; background: #999 } .upload_button:after { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .upload_button input { position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; cursor: pointer } .contact_complaint_form .contact_complaint_form_submit { width: 160px; height: auto; line-height: 2.5; background: #999; margin-left: 90px; color: #fff; font-size: 16px; text-align: center; cursor: pointer } .contact_complaint_form .contact_complaint_form_submit.active{ background: #e55500; } .contact_address { margin: 20px 0 } .contact_factory_list { width: 320px; height: 428px; padding: 80px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #eee; font-size: 15px; float: left } .contact_factory_list table { margin: 12px 0 } .contact_factory_list td, .contact_factory_list th { text-align: left; vertical-align: top; padding: 6px 0 } .contact_factory_list th { width: 80px } .contact_factory_list dl { margin: 20px 0 } .contact_factory_list dt { font-weight: 700; margin: 20px 0 4px } .contact_factory_list h3 { font-size: 18px; color: #e55500; font-weight: 700 } .contact_wechat { margin: 0 auto 0 84px } .contact_wechat p { margin-top: 4px; padding-left: 48px } .map { width: 878px; height: 428px } #cover { position: fixed; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); display: none } .submit_wrapper { position: absolute; z-index: 10; left: 50%; top: 50%; width: 300px; height: 180px; margin: -90px auto auto -150px; background: #fff; padding: 10px 14px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #333; } .submit_close { position: absolute; z-index: 999; right: 0; top: 0; width: 40px; height: 40px; cursor: pointer } .submit_close:after, .submit_close:before { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin-left: -10px; background: #666; border-radius: 1px } .submit_close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .submit_close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .submit_content { padding: 40px 0 20px; font-size: 17px } .submit_error_content { display: none } .submit_timer { text-align: center; margin-top: 18px } .submit_timer span { color: #e55500; font-size: 18px } .account_titleshort h1 { font-weight: 700 } .menber_sidebarnav { margin-top: 10px; width: 100% } .printing-content { width: 100%; font-size: 16px; line-height: 1.5 } .printing-content p { margin: 1em 0 } .printing-content img { width: 100% } .printing-content-wrapper { padding: 20px; margin: 20px 0; border: 1px dashed #999; border-radius: 2px; -webkit-box-sizing: border-box; box-sizing: border-box } .float-item { width: 50%; float: left } .float-item-text { padding: 40px; -webkit-box-sizing: border-box; box-sizing: border-box } .float-item-text h3 { color: #e55500; display: inline-block; border-bottom: 1px solid #e55500; font-weight: 700; margin: 24px 0 12px } .float-item-text li { position: relative; padding-left: 14px; line-height: 1.5; margin: 6px 0 } .float-item-text li:before { content: ''; display: block; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; background: #e55500; border-radius: 50% } .float-item-text.special { font-size: 18px } .float-item-text.special li { margin: 12px 0 } .float-item-text.special li:before { top: 5px; left: 0; width: 1px; height: 16px; border-radius: 0 } .printing-content-list { margin: 60px 0 10px } .printing-content-list h2 { border-bottom: 1px solid #666 } .printing-content-list h2 span { font-size: 20px } .printing-content-video #video { width: 100%; } .printing-content-swipe { position: relative; width: 926px; height: 320px; margin: 20px 0 } .printing-content-swipe-area { position: relative; width: 925px; height: 260px; overflow: hidden } .printing-content-swipe-list { position: absolute; width: 9999px } .printing-content-swipe-list > div { width: 214px; float: left; margin-right: 23px } .printing-content-swipe-list h3 { font-size: 15px; text-align: center; margin-top: 4px } .printing-content-swipe-button { position: absolute; bottom: 0; left: 50%; width: 100px; height: 32px; margin-left: -50px; background: #ccc; border-radius: 18px } .printing-button-next, .printing-button-prev { position: absolute; top: -1px; width: 32px; height: 32px; cursor: pointer } .printing-button-prev { left: 4px } .printing-button-next { right: 4px } .printing-button-next:before, .printing-button-prev:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin-top: -6px; margin-left: -6px; border-top: 2px solid #e55500; border-left: 2px solid #e55500; border-radius: 2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .printing-button-next:before { -webkit-transform: rotate(135deg); transform: rotate(135deg) } .p-summary { background: #fff; padding: 20px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 18px; line-height: 1.8; border-radius: 2px; -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, .2); box-shadow: 0 4px 16px rgba(0, 0, 0, .2); position: relative } .p-summary:after, .p-summary:before { position: absolute; font-size: 48px; color: #e55500; font-weight: 700 } .p-summary:before { content: '鈥?; top: -10px; left: 0 } .p-summary:after { content: '鈥?; bottom: -30px; right: 0 } .p-summary strong { font-weight: 700; margin: 0 4px } .printing-content-related { width: 100%; margin: 20px 0 } .related-item { float: left; width: 214px; margin-right: 23px } .related-item:last-of-type { margin-right: 0 } .related-item h3 { text-align: center; line-height: 1.5; margin-top: 4px; font-size: 16px } /*reflective film*/ .film-list{ margin-top: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .film-list:last-of-type{ border: 0; } .film-subtitle{ margin: 10px 0; } .film-subtitle a{ color: #e55500; text-decoration: underline; } table{ border-collapse: collapse; border-spacing:0; margin: 0; padding: 0; } table tr, table th, table td{ margin: 0; padding: 0; } .float-item-table{ -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 40px; } .float-item-table:nth-of-type(2n+1){ padding-left: 0; padding-right: 40px; } .float-item-table th, .float-item-table td{ padding: 8px 10px; text-align: left; vertical-align: top; } .float-item-table tr{ border-bottom: 1px dashed #ccc; } .float-item-table tr:last-of-type{ border: 0; } .float-item-table th{ width: 80px; } /* outdoor */ .outdoor-feature{ margin: 40px 0 60px; border-radius: 4px; /*background: url(../images/contact_img/outdoor-background.jpg) no-repeat;*/ background: #eee; overflow: hidden; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1); box-shadow: 0 0 8px rgba(0, 0, 0, .1); } .outdoor-feature ul{ padding: 30px 20px 10px; height: 100%; background: rgba(255, 255, 255, .8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .outdoor-feature li{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 18px; margin: 0 5%; } .outdoor-feature img{ width: 100%; border-radius: 50%; } .outdoor-feature h3{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 20px; margin-top: 1em; color: #13235f; } .outdoor-feature p{ margin-top: .5em; } .outdoor-category{ margin: 30px 0; text-align: center; } .outdoor-category h2{ font-size: 32px; color: #e55500; text-align: center; letter-spacing: 6px; text-shadow: 2px 1px 0 rgba(0, 30, 60, .2); } .outdoor-category p{ padding: 0 80px; font-size: 18px; } .outdoor-category-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin-top: 40px; } .outdoor-category-list li{ width: 32%; margin-right: 2%; margin-bottom: 30px; -webkit-transition: all .3s ease; transition: all .3s ease; } .outdoor-category-list li:nth-of-type(3n){ margin-right: 0; } .outdoor-category-list li img{ border-radius: 4px; } .outdoor-category-list li h3{ margin-top: 6px; font-size: 16px; letter-spacing: 1px; text-decoration: underline; } .outdoor-category-list li:hover{ -webkit-transform: translateY(-2px); transform: translateY(-2px); } .outdoor-category-list li:hover h3{ color: #e55500; text-decoration: underline; } .hotsale-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } .hotsale-list > div{ width: 18.4%; margin-right: 2%; margin-bottom: 20px; -webkit-transition: all .3s ease; transition: all .3s ease; } .hotsale-list > div:nth-of-type(5n){ margin-right: 0; } .hotsale-list h3{ font-size: 14px; margin-top: 4px; -webkit-transition: all .3s ease; transition: all .3s ease; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hotsale-list > div:hover{ -webkit-transform: translateY(-2px); transform: translateY(-2px); } .hotsale-list > div:hover h3{ color: #e55500; } .outdoor-soft-category{ width: 100%; padding: 40px 20px 0; margin-bottom: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 4px; border: 1px dashed #ddd; } .outdoor-soft-category > div{ background: #333; text-align: start; padding: .5em 2em; color: #fff; font-size: 18px; display: inline-block; border-radius: 4px; } .outdoor-soft-category .outdoor-category-list li{ background: #eee; border-radius: 4px; padding-bottom: 10px; } .outdoor-soft-category .outdoor-category-list h3{ background: rgba(50, 50, 50, .5); color: #fff; padding: 10px 0; margin-top: -44px; position: relative; z-index: 2; text-decoration: none; } .outdoor-soft-category .outdoor-category-list li:hover h3{ /*text-decoration: none;*/ color: #fff; } .outdoor-soft-category .outdoor-category-list li img{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .outdoor-category-list .outdoor-soft-category-parameter{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; padding: 0 10px; margin: 10px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .outdoor-category-list .outdoor-soft-category-parameter li{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; margin: 0 auto; -webkit-transition: none; transition: none; } .outdoor-category-list .outdoor-soft-category-parameter li:hover{ -webkit-transform: translateY(0); transform: translateY(0); } .outdoor-category-list .outdoor-soft-category-parameter li h4{ font-size: 14px; /*border-bottom: 1px solid #13235f;*/ } .outdoor-category-list .outdoor-soft-category-parameter li p{ font-size: 14px; margin: 0; padding: 0 0 0 2px; } .outdoor-category .related-list{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } .outdoor-category .related-list > div{ width: 23%; margin-right: 2.66%; margin-bottom: 20px; -webkit-transition: all .3s ease; transition: all .3s ease; } .outdoor-category .related-list > div:nth-of-type(4){ margin-right: 0; } .outdoor-category .related-list h3{ font-size: 16px; margin-top: 4px; -webkit-transition: all .3s ease; transition: all .3s ease; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .outdoor-category .related-list > div:hover{ -webkit-transform: translateY(-2px); transform: translateY(-2px); } .outdoor-category .related-list> div:hover h3{ color: #e55500; } .outdoor-soft-color{ display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 80px; } .outdoor-soft-color img{ width: 180px; } .outdoor-soft-color p{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: start; margin-top: 60px; padding: 0 40px; } .flex-2{ display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .printing-flex2 p{ font-size: 24px; margin: 80px 0 0; padding-left: 1em; /*text-align: center;*/ } .printing-flex2 figure{ width: 48%; margin: 0 2%; } .printing-flex2 .float-item-text{ padding: 0; } .printing-flex2 figure h3{ border-bottom: 0; } .outdoor-rainbow-img{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .outdoor-rainbow-content{ width: 50%; text-align: start; -webkit-box-sizing: border-box; box-sizing: border-box; } .outdoor-rainbow-content p{ padding: 0; } .outdoor-rainbow-content.float-item-text{ padding: 0 30px; } .outdoor-category-list li h3.outdoor-title-bg{ background: rgba(50, 50, 50, .8); color: #fff; padding: 10px 0; margin-top: -44px; position: relative; z-index: 2; text-decoration: none; } .contact-privacy{ margin-left: 16%; } .contact-privacy-input input{ width: 14px; } @keyframes shake { 0%{ -webkit-transform:translateX(0); transform:translateX(0);} 25%{ -webkit-transform:translateX(20px); transform:translateX(20px);} 50%{ -webkit-transform:translateX(0); transform:translateX(0);} 75%{ -webkit-transform:translateX(10px); transform:translateX(10px);} 100%{ -webkit-transform:translateX(0); transform:translateX(0);} } .contact-privacy-input.shake{ -webkit-animation: shake .5s; animation: shake .5s; }