/* .wrap{ width: 100vw; height: 100vh; background-size: 100% 100%; box-sizing: border-box; padding-top: 140px; } */ .turn_a{ position: relative; width: 90vw; height:90vw; margin: auto; } .turn_a1{ display: block; width: 100%; height: 100%; position: absolute; } .turn_a2{ width: 30vw; height: 40.28vw; /*10.422*/ display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 30px; margin: auto; z-index: 1; } .turn_a01{ width: 22vw; text-align: center; position: absolute; left: 45vw; top: 13vw; transform: rotateZ(23.5deg); color: #d41819; font-size: 3vw; } .turn_a01 img{ width: 12vw; } .turn_a02{ width: 22vw; height: 5vw; text-align: center; position: absolute; left: 62vw; top: 30vw; transform: rotateZ(68.5deg); color: #d41819; font-size: 3vw; } .turn_a02 img{ width: 12vw; } .turn_a03{ width: 22vw; height: 5vw; text-align: center; position: absolute; left: 62vw; top: 54vw; transform: rotateZ(113.5deg); color: #d41819; font-size: 3vw; } .turn_a03 img{ width: 12vw; } .turn_a04{ width: 22vw; height: 5vw; text-align: center; position: absolute; left: 46vw; top: 71vw; transform: rotateZ(156.5deg); color: #d41819; font-size: 3vw; } .turn_a04 img{ width: 12vw; } .turn_a05{ width: 22vw; height: 5vw; text-align: center; position: absolute; left: 22vw; top: 71vw; transform: rotateZ(201.5deg); color: #d41819; font-size: 3vw; } .turn_a05 img{ width: 12vw; } .turn_a06{ width: 22vw; height: 5vw; text-align: center; position: absolute; left: 4vw; top: 54vw; transform: rotateZ(246.5deg); color: #d41819; font-size: 3vw; } .turn_a06 img{ width: 12vw; } .turn_a07{ width: 22vw; height: 5vw; text-align: center; position: absolute; left: 6vw; top: 31vw; transform: rotateZ(291.5deg); color: #d41819; font-size: 3vw; } .turn_a07 img{ width: 12vw; } .turn_a08{ width: 22vw; height: 5vw; text-align: center; position: absolute; left:22vw; top: 14vw; transform: rotateZ(336.5deg); color: #d41819; font-size: 3vw; } .turn_a08 img{ width: 12vw; } .turn_b{ width: 100vw; display: flex; position: absolute; bottom: 0; left: 0; } .turn_b img{ width: 33.333vw; height: 18vw; } .mask{ display: none; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; z-index: 2; } .mask_close{ display: block; width: 26px; position: absolute; right: 3px; top: 3px; } .mask_inner{ display: none; width: 80vw; height: auto; background: white; position: relative; border-radius: 5px; z-index: 99; box-sizing: border-box; padding-bottom: 30px; } .mask_inner01{ text-align: center; font-size: 20px; box-sizing: border-box; padding-top: 20px; } .mask_inner02{ display: flex; justify-content: center; box-sizing: border-box; padding-top: 20px; } .mask_inner03{ text-align: center; font-size: 16px; box-sizing: border-box; padding-top: 10px; } .mask_inner04{ margin: auto; margin-top: 20px; width: 80%; height: 35px; background: wheat; display: flex; font-size: 14px; border-radius: 2px; } .mask_inner04_a{ width: 60%; height: 100%; box-sizing: border-box; border: 1px solid gainsboro; } .mask_inner04_a input{ width: 100%; height: 100%; box-sizing: border-box; padding: 0 10px; font-size: 14px; } .mask_inner04_b{ width: 40%; height: 100%; text-align: center; line-height: 35px; background: #ff9f00; color: white; border-radius: 0 2px 2px 0; } .mask_hdgl{ display: none; width: 80vw; height: auto; background: white; position: fixed; left: 0; right: 0; top: 30vh; margin: auto; border-radius: 5px; z-index: 99; border-radius: 5px; } .mask_hdgl00{ display: block; width: 23px; position: absolute; right: 3px; top: 3px; } .mask_hdgl01{ width: 100%; height: 30px; background: #FF9F00; border-radius: 5px 5px 0 0; color: white; font-size: 14px; box-sizing: border-box; padding: 0 5px; line-height: 30px; } .mask_hdgl02{ box-sizing: border-box; padding: 20px; font-size: 14px; } .mask_hdgl02 p{ margin-bottom: 10px; } .mask_hdsm{ display: none; width: 80vw; height: auto; background: white; position: fixed; left: 0; right: 0; top: 30vh; margin: auto; border-radius: 5px; z-index: 99; } .mask_hdsm00{ display: block; width: 23px; position: absolute; right: 3px; top: 3px; } .mask_hdsm01{ width: 100%; height: 30px; background: #FF9F00; border-radius: 5px 5px 0 0; color: white; font-size: 14px; box-sizing: border-box; padding-left: 10px; line-height: 30px; } .mask_hdsm02{ box-sizing: border-box; padding: 30px 20px 0px 20px; font-size: 14px; } .mask_hdsm02 p{ margin-bottom: 10px; } .p_time{ text-align: right; margin-top: 30px; font-size: 12px; } .mask_ckjp{ display: none; width: 80vw; height: auto; background: white; position: fixed; left: 0; right: 0; top: 30vh; margin: auto; border-radius: 5px; z-index: 99; box-sizing: border-box; padding: 20px; } .mask_ckjp01{ text-align: center; font-size: 14px; } .mask_ckjp02{ display: flex; justify-content: center; box-sizing: border-box; padding-top: 20px; } .mask_ckjp03{ text-align: center; font-size: 16px; box-sizing: border-box; padding-top: 10px; } .mask_ckjp00{ display: block; width: 23px; position: absolute; right: 3px; top: 3px; } .turn_a2{ transform: rotate(0deg); -ms-transform: rotate(0deg); /* Internet Explorer */ -moz-transform: rotate(0deg); /* Firefox */ -webkit-transform: rotate(0deg); /* Safari 和 Chrome */ -o-transform: rotate(0deg); } .mask_inner05{ width: 80%; margin: 20px auto 0; background-color: #ff9f00; border-radius: 5px; height: 30px; line-height: 30px; text-align: center; color: white; } .text{ position: fixed; width: 100%; text-align: center; color: white; font-size: 12px; line-height: 24px; background-color: rgba(0,0,0,0.5); top: 0; left: 0; } .img{ height: auto; max-height: 30vw; max-width: 80%; } .marsk_box{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }