/* Powered by ueeshop.com http://www.ueeshop.com 广州联雅网络科技有限公司 020-83226791 */ body{ position: relative;} .check_img{ position: absolute; width: 100%; pointer-events: none; opacity: 0.5;z-index: 99;} body::-webkit-scrollbar {display:none;} .trans{transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;} #custom{width: 100vw;height: 100vh;overflow: hidden;} #custom .left_area{height: 100%;width: calc(100% - 675px);background: #f8f8f8;box-sizing:border-box;padding: 68px 0 62px;} #custom .left_area .content_box{position: relative;width: 100%;height: 100%;} #custom .left_area .content_box .return{width: 42px;height: 43px;position: absolute;box-sizing:border-box;border:2px solid #000;border-radius: 10px;font-family: monospace;text-align: center;line-height: 43px;left: 6.09375%;top: 0;background: url(../images/return_icon.png) no-repeat center center / auto 17px; } #custom .left_area .content_box .main_img{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);width: max-content;max-width: 100%;} #custom .left_area .content_box .rotate_box{height: 42px;line-height: 42px;font-size: 16px;color: #565656;padding:0 23px;box-sizing:border-box;border: 2px solid #7e7e7e;border-radius: 5px;display: flex;align-items:center;justify-content: center;position: absolute;left: 50%;bottom: 0;transform:translate(-50%,0);cursor:default;} #custom .left_area .content_box .rotate_box:after{content: '';width: 32px;height: 32px;background: url(../images/rotate_icon.png) no-repeat center center / 100%;margin-left: 13px;} #custom .left_area .content_box .picture_btn{height: 42px;line-height: 42px;font-size: 16px;padding:0 23px;box-sizing:border-box;color: #fff;position: absolute;right: 70px;bottom: 0;background: #1dc6ed;border-radius: 5px;display: flex;align-items:center;justify-content: center;} #custom .left_area .content_box .picture_btn:after{content: '';width: 25px;height: 20px;background: url(../images/picture_icon.png) no-repeat center center / 100%;margin-left: 13px;} #custom .right_area{width: 675px;position: fixed;right:0;top: 0;bottom:0;overflow-y:auto;box-sizing:border-box;background: white;padding: 68px 118px 60px 117px;} #custom .right_area .submit_row{overflow: hidden;margin-bottom: 25px;} #custom .right_area .submit_row.bottom{margin-bottom: 0;} #custom .right_area .submit_row .sub_btn{float: right;width: 130px;height: 42px;line-height: 42px;cursor: pointer;text-align: center;border: none;background: #1dc6ed;color: #fff;border-radius: 8px;font-size: 16px;} #custom .right_area .submit_row .question_icon{float: right;width: 29px;height: 29px;margin-right: 16px;border: 1px solid #000;border-radius: 50%;margin-top: 5px;background: url(../images/mark_icon.png) no-repeat center center / auto 14px;} #custom .right_area .row{margin-bottom: 35px;} #custom .right_area .row .char{height: 74px;line-height: 74px;font-size: 18px;font-family: 'Montserrat-Medium';font-size: 18px;color: #000000;} #custom .right_area .row select{ padding: 0 52px 0 22px; background: url(../images/select_icon.png) no-repeat right 20px center / 12px auto #fff; font-size: 14px; color: #000000; font-family: 'Montserrat-Light'; cursor: pointer; -webkit- box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; appearance: none; -moz-appearance: none; -webkit-appearance: none;box-sizing:border-box;border-radius: 5px;border: 2px solid #757575;height: 38px;line-height: 38px;display: block;width: 100%;} #custom .right_area .row .color_row{} #custom .right_area .row .color_row .list_item{margin-bottom: 30px;} #custom .right_area .row .color_row .list_item .name{height: 35px;font-family: 'Montserrat-ExtraLight';font-size: 16px;color: #000000;} #custom .right_area .row .color_row .list_item .color_list{display: grid;grid-template-columns:repeat(6,1fr);grid-gap:23px 23px;} #custom .right_area .row .color_row .list_item .color_list .item{width: 42px;height: 42px;box-sizing:border-box;border: 2px solid #5a5a5a;border-radius: 5px;cursor: pointer;} #custom .right_area .row .color_row .list_item .color_list .item.cur{border: 4px solid #5a5a5a;;} #custom .right_area .row .color_row .list_item .color_list .item>input{display: none;} #custom .right_area .row .color_row .list_item .color_list .item.add{background: url(../images/custom_add_icon.png) no-repeat center center / 10px auto;} #custom .right_area .row .upload_row{height: 177px;position: relative;background: #eeeeee;box-sizing:border-box;border: 2px solid #868686;border-radius: 8px;cursor: pointer;display: flex;align-items:center;justify-content: center;flex-direction: column;text-align: center;cursor: pointer;} #custom .right_area .row .upload_row .img{width: 100%;height: 80%;display: none;position: relative;z-index: 2;} #custom .right_area .row .upload_row .char{font-family: 'Montserrat-Light';font-size: 16px;color: #5e5e5e;} #custom .right_area .row .upload_row .char span{display: block;line-height: initial} #custom .right_area .row .upload_row .char:before{content: '';display: block;width: 23px;height: 31px;background: url(../images/custom_upload_icon.png) no-repeat center /100%;margin: 0 auto 20px;} #custom .right_area .row .upload_row .file_box{position: absolute;width: 100%;height: 100%;overflow: hidden;z-index: 1;} #custom .right_area .row .upload_row .file_box input{position: absolute;left: 0;top:-30px;cursor: pointer;width: 100%;height: 150%;opacity: 0;z-index: 1;} #custom .right_area .row .upload_row.del:after{content: '';position: absolute;width: 28px;height: 28px;right: -14px;top: -14px;background: url(../images/custom_upload_del_btn.png) no-repeat center center / 10px 10px #1dc6ed;border-radius: 50%;} #custom .right_area .row .upload_option{} #custom .right_area .row .upload_option .tip{line-height: 28px;padding-top: 16px;font-family: 'Montserrat-ExtraLight';color: #000000;font-size: 14px;margin-bottom: 12px;} #custom .right_area .row .upload_option .down_temp{font-family: 'Montserrat-Light';font-size: 14px;color: #5e5e5e;padding-left: 36px;background: url(../images/custom_down_icon.png) no-repeat 7px center / auto 100%;text-decoration: underline;margin-bottom: 26px;display: block;} #custom .right_area .row .upload_option .size_box{} #custom .right_area .row .upload_option .size_box .size_input{margin-top: 16px;padding-left: 20px;} #custom .right_area .row .upload_option .size_box .size_input .size{border-width:0 0 3px 0 !important;border-style:solid;border-color: #000;width: 55px;text-align: center; appearance: none;-moz-appearance: none;-webkit-appearance: none;border-radius: 0;} #custom .right_area .row .position_box{} #custom .right_area .row .position_box .list{display: grid;grid-template-columns:repeat(3,1fr);grid-gap:9px 20px;} #custom .right_area .row .position_box .list .item{cursor: pointer;} #custom .right_area .row .position_box .list .item .img{box-sizing:border-box;border: 3px solid #d5d5d5;height: 135px;border-radius: 10px;} #custom .right_area .row .position_box .list .item.cur .img{border-width: 5px;} #custom .right_area .row .position_box .list .item input{display: none;} #custom .right_area .row .position_box .list .item .img img{max-height: 42px;} #custom .right_area .row .position_box .list .item .name{height: 35px;line-height: 35px;text-align: center;font-family: 'Montserrat-Light';font-size: 12px;color:#000000;} #custom .right_area .help_tip{clear: both;font-family: 'Montserrat-Light';font-size: 14px;color: #000000;margin-bottom: 40px;} #custom .right_area .help_tip a{font-size: 14px;color: #000;font-family: 'Montserrat-Light';text-decoration: underline;} #custom .right_area .next_btn{position: fixed;right: 40px;bottom: 41.066667vw;height: 68px;line-height: 68px;background: #1dc6ed;color: white;font-size: 20px;padding: 0 40px;border-radius: 8px;z-index: 10001;opacity: 0;pointer-events:none;} #custom .right_area .next_btn.cur{opacity: 1;pointer-events:auto;bottom: 54px;} #custom .footer{margin-top: 105px;overflow: hidden;padding: 75px 40px 52px;display: none} #custom .footer .list{display: grid;grid-template-columns:repeat(5,1fr);grid-gap:0 45px;} #custom .footer .list .item{text-align: center;padding-top: 58px;position: relative;font-size: 2.666667vw;cursor: pointer;} #custom .footer .list .item.cur{color: #1dc6ed;} #custom .footer .list .item:after{position: absolute;content: '';left: 0;right: 0;top: 0;height: 58px;} #custom .footer .list .item.style:after{background: url(../images/custom_footer_icon_1.png) no-repeat center top / auto 32px;} #custom .footer .list .item.size:after{background: url(../images/custom_footer_icon_2.png) no-repeat center top / auto 32px;} #custom .footer .list .item.color:after{background: url(../images/custom_footer_icon_3.png) no-repeat center top / auto 32px;} #custom .footer .list .item.upload:after{background: url(../images/custom_footer_icon_4.png) no-repeat center top / auto 32px;} #custom .footer .list .item.placement:after{background: url(../images/custom_footer_icon_5.png) no-repeat center top / auto 32px;} #custom .footer .list .item.cur.style:after{background: url(../images/custom_footer_icon_hover_1.png) no-repeat center top / auto 32px;} #custom .footer .list .item.cur.size:after{background: url(../images/custom_footer_icon_hover_2.png) no-repeat center top / auto 32px;} #custom .footer .list .item.cur.color:after{background: url(../images/custom_footer_icon_hover_3.png) no-repeat center top / auto 32px;} #custom .footer .list .item.cur.upload:after{background: url(../images/custom_footer_icon_hover_4.png) no-repeat center top / auto 32px;} #custom .footer .list .item.cur.placement:after{background: url(../images/custom_footer_icon_hover_5.png) no-repeat center top / auto 32px;} #custom_feedback{padding-top: 183px;position: relative;} #custom_feedback .btn_area{position: absolute;left: 6.09375%;right: 6.09375%;padding-top: 67px;top: 0;overflow: hidden;} #custom_feedback .btn_area .return{width: 42px;height: 43px;box-sizing:border-box;border:2px solid #000;border-radius: 10px;font-family: monospace;text-align: center;line-height: 43px;background: url(../images/return_icon.png) no-repeat center center / auto 17px; float: left;} #custom_feedback .btn_area .sub_btn{float: right;height: 44px;line-height: 44px;background: #1dc6ed;color: white;cursor: pointer;border: none;padding: 0 57px;border-radius: 8px;} #custom_feedback .cont_area{width: 880px;margin: 0 auto;} #custom_feedback .cont_area>.title{font-family: 'Montserrat-ExtraBold';font-size: 55px;color: #000000;line-height: 80px;} #custom_feedback .cont_area>.sub_title{line-height: 30px;font-family: 'Montserrat-Light';font-size: 22px;color: #000000;margin-bottom: 40px;} #custom_feedback .cont_area .form_box .row{margin-bottom: 60px;} #custom_feedback .cont_area .form_box .row .upload_row{height: 400px;position: relative;background: #eeeeee;box-sizing:border-box;cursor: pointer;display: flex;align-items:center;justify-content: center;flex-direction: column;text-align: center;cursor: pointer;} #custom_feedback .cont_area .form_box .row .upload_row .img{width: 100%;height: 80%;display: none;position: relative;z-index: 2;} #custom_feedback .cont_area .form_box .row .upload_row .char{font-family: 'Montserrat-Light';font-size: 16px;color: #5e5e5e;} #custom_feedback .cont_area .form_box .row .upload_row .char span{display: block;line-height: initial} #custom_feedback .cont_area .form_box .row .upload_row .char:before{content: '';display: block;width: 34px;height: 46px;background: url(../images/custom_upload_icon.png) no-repeat center /100%;margin: 0 auto 20px;} #custom_feedback .cont_area .form_box .row .upload_row .file_box{position: absolute;width: 100%;height: 100%;overflow: hidden;z-index: 1;} #custom_feedback .cont_area .form_box .row .upload_row .file_box input{position: absolute;left: 0;top:-30px;cursor: pointer;width: 100%;height: 150%;opacity: 0;z-index: 1;} #custom_feedback .cont_area .form_box .row .upload_row.del:after{content: '';position: absolute;width: 28px;height: 28px;right: -14px;top: -14px;background: url(../images/custom_upload_del_btn.png) no-repeat center center / 10px 10px #1dc6ed;border-radius: 50%;} #custom_feedback .cont_area .form_box .row .char{line-height: 30px;font-family: 'Montserrat-Medium';font-size: 18px;color: #000000;} #custom_feedback .cont_area .form_box .row .sub_char{line-height: 30px;font-family: 'Montserrat-ExtraLight';font-size: 20px;color: #000000;} #custom_feedback .cont_area .form_box .row textarea{height: 168px;border: 2px solid #2d2d2d;border-radius: 6px;margin-top: 12px;width: 100%;font-size: 20px;font-family: 'Montserrat-ExtraLight';box-sizing:border-box;padding: 5px;line-height: 42px;} #custom_feedback .cont_area .form_box .row input[type=text]{height: 58px;line-height: 58px;padding-left: 20px;border-radius: 4px;margin-top: 15px;width: 100%;font-size: 20px;font-family: 'Montserrat-ExtraLight';border: 2px solid #4c4c4c;box-sizing:border-box;} #custom_feedback .cont_area .form_box .row select{ padding: 0 52px 0 23px; background: url(../images/select_icon.png) no-repeat right 22px center / 12px auto #fff; font-size: 20px; color: #000000; font-family: 'Montserrat-Light'; cursor: pointer; -webkit- box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; appearance: none; -moz-appearance: none; -webkit-appearance: none;box-sizing:border-box;border-radius: 4px;border: 2px solid #4c4c4c;height: 58px;line-height: 58px;display: block;width: 100%;margin-top: 15px;} #custom_feedback .cont_area .form_box .row_list{display: grid;grid-template-columns:2fr 1fr 1fr;grid-gap:0 25px;} #custom_feedback .cont_area .form_box .sub_btn_box{display: none;width: max-content;margin: 0 auto} #custom_feedback .cont_area .form_box .sub_btn_box .sub_btn{height: 10.666667vw;line-height: 10.666667vw;background: #1dc6ed;color: white;cursor: pointer;border: none;padding: 0 10.266667vw;border-radius: 8px;font-size: 3.2vw;} #tip_box{position: fixed;left: 15%;right: 15%;top: 10%;bottom: 10%;background: white;z-index: 10001;max-width: 1200px;box-sizing:border-box;padding: 10px;display: none;} @media screen and (max-width: 1530px) { #custom .left_area .content_box .rotate_box{left: 70px;transform: translate(0,0);} } @media screen and (max-width: 1440px) { #custom .left_area{width: calc(100% - 575px);} #custom .right_area{width: 575px;padding: 68px 80px 60px 80px;} } @media screen and (max-width: 1280px) { #custom .left_area{width: calc(100% - 475px);} #custom .right_area{width: 475px;padding: 68px 40px 60px 40px;} } @media screen and (max-width: 1100px) { #custom .left_area{width: calc(100% - 375px);} #custom .right_area{width: 375px;padding: 68px 20px 60px 20px;} #custom .right_area .row .color_row .list_item .color_list{grid-template-columns: repeat(5,1fr);} } @media screen and (max-width: 1000px) { #custom_feedback .cont_area{width: 89%;} #custom{height: auto;overflow: initial} #custom .left_area{width: 100%;padding: 40px 40px 0;} #custom .left_area .content_box{padding: 280px 0 220px;} #custom .left_area .content_box .main_img{position: initial;left: initial;right: initial;transform: translate(0,0);} #custom .left_area .content_box .return{left: 0;} #custom .left_area .content_box .rotate_box{left: 0;top: calc(100% + 40px);} #custom .left_area .content_box .picture_btn{right: 0;top: calc(100% + 40px);} #custom .right_area{position: fixed;left: 100%;top:0;z-index: 10001;} #custom .right_area .silde_box{position: fixed;left: 0;right: 0;top: 100%;background: white;transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;z-index: 10001;padding: 40px 5% 100px;} #custom .footer{display: block;} } @media screen and (max-width: 750px) { #custom .left_area{width: 100%;padding: 0;height: calc(100vh - 42.133333vw);} #custom .left_area .content_box{padding: 0;align-items:center;justify-content: center;display: flex} #custom .left_area .content_box .return{width: 9.066667vw;height: 9.066667vw;border-width: 1px;background: url(../images/return_icon.png) no-repeat center center / auto 4.133333vw;position: fixed;left: 5.333333vw;top: 5.333333vw;} #custom .right_area .submit_row .sub_btn{position: fixed;right: 5.333333vw;top: 5.333333vw;z-index: 10001;pointer-events:auto;opacity: 1} #custom .left_area .content_box .rotate_box{top: calc(100% + 5.333333vw);height: 7vw;line-height: 7vw;font-size: 2.666667vw;} #custom .left_area .content_box .rotate_box:after{height: 100%;width: 5.6vw;background: url(../images/rotate_icon.png) no-repeat center center / auto 4.266667vw} #custom .left_area .content_box .picture_btn{top: calc(100% + 5.333333vw);height: 7vw;line-height: 7vw;font-size: 2.666667vw;} #custom .left_area .content_box .picture_btn:after{height: 100%;width: 3.866667vw;background: url(../images/picture_icon.png) no-repeat center center / auto 3.333333vw;} #custom .right_area .silde_box{padding: 5.333333vw 5% 13.333333vw;box-sizing:border-box;overflow-y:auto;} #custom .right_area .next_btn{right: 5.333333vw;bottom: -41.066667vw;height: 9.066667vw;line-height: 9.066667vw;background: #1dc6ed;font-size: 2.666667vw;padding: 0 5.333333vw;} #custom .right_area .next_btn.cur{bottom: 7.2vw;} #custom .footer{margin-top: 14.0vw;overflow: hidden;padding: 10.0vw 5.333333vw 6.933333vw;position: fixed;bottom: 0;left: 0;right: 0;} #custom .footer .list{display: grid;grid-template-columns:repeat(5,1fr);grid-gap:0 6.0vw;} #custom .footer .list .item{text-align: center;padding-top: 7.733333vw;position: relative;} #custom .footer .list .item:after{position: absolute;content: '';left: 0;right: 0;top: 0;height: 7.733333vw;} #custom .footer .list .item.style:after{background: url(../images/custom_footer_icon_1.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.size:after{background: url(../images/custom_footer_icon_2.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.color:after{background: url(../images/custom_footer_icon_3.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.upload:after{background: url(../images/custom_footer_icon_4.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.placement:after{background: url(../images/custom_footer_icon_5.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.cur.style:after{background: url(../images/custom_footer_icon_hover_1.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.cur.size:after{background: url(../images/custom_footer_icon_hover_2.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.cur.color:after{background: url(../images/custom_footer_icon_hover_3.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.cur.upload:after{background: url(../images/custom_footer_icon_hover_4.png) no-repeat center top / auto 4.266667vw;} #custom .footer .list .item.cur.placement:after{background: url(../images/custom_footer_icon_hover_5.png) no-repeat center top / auto 4.266667vw;} #custom_feedback{padding-top: 21.333333vw;} #custom_feedback .btn_area{padding-top: 8.6vw;} #custom_feedback .btn_area .sub_btn{display: none;} #custom_feedback .cont_area .form_box .sub_btn_box{display: block;} #custom_feedback .cont_area>.title{font-size: 8.0vw;line-height: 14.666667vw;} #custom_feedback .cont_area>.sub_title{font-size: 3.2vw;line-height: 5.333333vw;margin-bottom: 8.0vw;} #custom_feedback .cont_area .form_box{padding-bottom: 12.8vw;} #custom_feedback .cont_area .form_box .row{margin-bottom: 8.0vw;} #custom_feedback .cont_area .form_box .row .upload_row{height: 49.466667vw;border-radius: 10px} #custom_feedback .cont_area .form_box .row .upload_row .char{font-size: 3.2vw} #custom_feedback .cont_area .form_box .row .upload_row .char:before{width: 5.333333vw;height: 7.2vw;} #custom_feedback .cont_area .form_box .row .char{font-size: 3.733333vw;line-height: 4.0vw} #custom_feedback .cont_area .form_box .row .sub_char{font-family: 'Montserrat-Light';font-size: 2.666667vw;} #custom_feedback .cont_area .form_box .row textarea{height: 32.0vw;} #custom_feedback .cont_area .form_box .row input[type=text],#custom_feedback .cont_area .form_box .row select{font-size: 3.2vw;height: 10.933333vw;line-height: 10.933333vw;margin-top: 2.0vw;} #custom_feedback .cont_area .form_box .row_list{grid-template-columns: repeat(1,1fr);} } @media screen and (max-width: 400px) { #custom_feedback .btn_area .return{width: 35px;height: 35px;background: url(../images/return_icon.png) no-repeat center center / auto 14px} #custom .left_area .content_box .rotate_box{padding:0 5.0vw;max-width: 50%;} #custom .left_area .content_box .picture_btn{padding:0 5.0vw;max-width: 50%;} }