*{padding: 0;margin: 0;} .w_1440{max-width: 2560px !important;padding-left: 0 !important;padding-right: 0 !important;} .product_details{overflow: inherit;} .product_details .product_details_img{overflow: inherit;} #roller_pen {max-width: 2560px;font-size: 0;color: #ffffff;margin-left: auto;margin-right: auto;background: #000000;} #roller_pen .div_img img {width: 100%;display: block;height: auto;} #roller_pen .div_img video {width: 100%;display: block;height: auto;} #roller_pen div,img:focus {outline: none;} #roller_pen .img_pc {display: block!important;} #roller_pen .img_pc_l {display: block!important;} #roller_pen .img_pc_s {display: none!important;} #roller_pen .img_h5 {display: none!important;width: 100%;} #roller_pen .w_2560 {display: block;} #roller_pen .w_520 {display: none;} #roller_pen .br_1200 {display: none;} .product_details .product_details_img img {width: auto;} #roller_pen .p_120 {font-size: 4.6875vw;font-weight: bold;color: #ffffff;line-height: 1.2;} #roller_pen .p_75 {font-size: 2.8906vw;font-weight: bold;color: #ffffff;} #roller_pen .p_74 {font-size: 2.8125vw;font-weight: 900;color: #ffffff;} #roller_pen .p_60 {font-size: 2.3437vw;font-weight: 400;color: #ffffff;} #roller_pen .p_48 {font-size: 1.875vw;font-weight: 400;color: #ffffff;} #roller_pen .p_40 {font-size: 1.5625vw;font-weight: 700;color: #ffffff;} #roller_pen .p_36 {font-size: 1.4062vw;font-weight: 400;color: #ffffff;} #roller_pen .p_28 {font-size: 1.0937vw;font-weight: 400;color: #ffffff;line-height: 1.4;} #roller_pen .p_26 {font-size: 1.0156vw;font-weight: 400;color: #ffffff;line-height: 1.4;} #roller_pen .p_24 {font-size: 0.9375vw;font-weight: 400;color: #ffffff;} #roller_pen .p_18 {font-size: 0.7031vw;font-weight: 400;color: #ffffff;} #roller_pen .roller_pen_pub .div_header .p_26 {margin-top: 1.48vw;text-align: center;} #roller_pen .roller_pen_1 {position: relative;} #roller_pen .roller_pen_1 .div_header {position: absolute;top: 9.8437vw;left: 10.9375vw;width: 60vw;} #roller_pen .roller_pen_1 .div_header .p_120 {font-size:2.9296875vw;} #roller_pen .roller_pen_1 .div_header .p_74 {font-weight: 400;font-size: 2.578125vw;margin-top:2.25vw;} #roller_pen .roller_pen_1 .div_header .bottom_ul {margin-top: 1vw;display: flex;align-items: center;} #roller_pen .roller_pen_1 .div_header .bottom_ul .ul_icon {width: 2vw;margin-right: 1vw;} #roller_pen .roller_pen_1 .div_header .bottom_ul .icon_p{font-size: 1.328125vw;} #roller_pen .roller_pen_1 .div_header .red_dot_award{width: 16.640125vw;margin-top:4.5vw;} #roller_pen .roller_pen_1 .div_spc{display: flex;flex-direction: column;align-items: flex-end;position: absolute;bottom: 3vw;right: 6vw;width: 80%;} #roller_pen .roller_pen_1 .div_spc .icon_16k {width: 8.125vw;margin-bottom: 0.8vw;} #roller_pen .roller_pen_1 .div_spc .p_36 {font-weight: 300;font-size: 1.015625vw;text-align: right;} #roller_pen .roller_pen_2 {position: relative;} #roller_pen .roller_pen_2 video {width: 100%;} #roller_pen #nebula_fixed-h5 {display: none;} #roller_pen .roller_pen_3 {position: relative;background: #030100;padding-top: 9.7656vw;margin-top: -2px;} #roller_pen .roller_pen_3 .bigbox {position: relative;background: url("https://www.xp-pen.com/Uploads/images/product/detail/20170828/x3-roller_pen/img/3-back.png");background-position-y: center;} #roller_pen .roller_pen_3 .div_header {width: 80%;margin-left: auto;margin-right: auto;} #roller_pen .roller_pen_3 .div_header .p_74 {text-align: center;background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_3 .div_header .p_26 {text-align: center;} #roller_pen .roller_pen_3 .div_header .div_ul {display: flex;justify-content: space-between;max-width: 42.9687vw;margin-left: auto;margin-right: auto;margin-top: 7.8593vw;} #roller_pen .roller_pen_3 .div_header .div_ul .li .icon_img {width: 3.9843vw;text-align: center;margin-left: auto;margin-right: auto;} #roller_pen .roller_pen_3 .div_header .div_ul .li .icon_img img {width: 100%;} #roller_pen .roller_pen_3 .div_header .div_ul .li .p_48 {margin-top: 2.5vw;} #roller_pen .roller_pen_3 .box_2 {position: sticky;top: 15vh;height: 85vh;} #roller_pen .roller_pen_3 .box_2 .box_2_top {position: absolute;bottom: 0px;width: 100%;height: 27vw;} #roller_pen .roller_pen_3 .box_2 .bigbox_pen_div {width: 100%;height: 25.3906vw;overflow: hidden;position:absolute;bottom: 0px;} #roller_pen .roller_pen_3 .box_2 .pen_div {top: 0%;position: absolute;width: 290vw;left: -51.7109vw;} #roller_pen .roller_pen_3 .box_2 .pen_div .roll_pen {top: 0%;position: absolute;width: 100%;left: 0vw;width: 100%!important;} #roller_pen .roller_pen_3 .box_2 .div_spe {position: absolute;bottom: 3.9062vw;width: 80%;left: 10%;text-align: center;} #roller_pen .roller_pen_3 .box_2 .div_spe .p_26 {color: #6F6F6F;} #roller_pen .roller_pen_3 .box_2 .ant_1 {width: 10.1875vw;height: 4.9296vw;position: absolute;top: 0vw;left: 38vw;z-index: 3;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_36 {position: absolute;top: -3.6vw;left: 0px;display: block;font-size: 1.2062vw;line-height: 1.2;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_box {position: absolute;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_box.active{width: 10.1875vw;height: 4.9296vw;border-right: 2px dashed #fff; right: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_3 .box_2 .ant_1 .line_img_1 {position: absolute;width: 0.9765vw;z-index: 2;bottom: -0.3906vw;right: -0.4687vw;} #roller_pen .roller_pen_3 .box_2 .ant_1 .line_img_1 img {width: 100%;} #roller_pen .roller_pen_3 .box_2 .ant_3 {width: 9.1875vw;height: 4.9296vw;position: absolute;top: -1vw;left: 59vw;z-index: 3;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_28 {position: absolute;top: -3.0vw;right: 0px;display: none;font-size: 0.937vw;line-height: 1.2;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_box {position: absolute;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_box.active{animation: addheight_3 0.9s;width: 9.1875vw;height: 4.9296vw;border-left: 2px dashed #fff; left: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_3 .box_2 .ant_3 .line_img_1 {position: absolute;width: 0.9765vw;z-index: 2;bottom: -0.3906vw;left: -0.4687vw;display: none;} #roller_pen .roller_pen_3 .box_2 .ant_3 .line_img_1 img {width: 100%;} #roller_pen .roller_pen_3 .box_2 .ant_4 {width: 10.1875vw;height: 4.9296vw;position: absolute;top: -1vw;left: 75.5vw;z-index: 3;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_28 {position: absolute;top: -3.0vw;right: 0px;display: none;font-size: 0.937vw;line-height: 1.2;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_box {position: absolute;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_box.active{animation: addheight_4 0.9s;width: 10.1875vw;height: 4.9296vw;border-left: 2px dashed #fff; left: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_3 .box_2 .ant_4 .line_img_1 {position: absolute;width: 0.9765vw;z-index: 2;bottom: -0.3906vw;left: -0.4687vw;display: none;} #roller_pen .roller_pen_3 .box_2 .ant_4 .line_img_1 img {width: 100%;} @keyframes addheight_1{ from{height: 0px;width: 0;} 50%{height: 4.9296vw;width: 0;} to{width: 10.1875vw;} } @keyframes addheight_2{ from{height: 0px;width: 0;} 50%{height: 4.9296vw;width: 0;} to{width: 10.1875vw;} } @keyframes addheight_3{ from{height: 0px;width: 0;} 50%{height: 4.9296vw;width: 0;} to{width: 9.1875vw;} } @keyframes addheight_4{ from{height: 0px;width: 0;} 50%{height: 4.9296vw;width: 0;} to{width: 10.1875vw;} } #roller_pen .roller_pen_3 .bigbox .roller_pen_3_sty {height: 70vh;} #roller_pen .roller_pen_4 {position: relative;} #roller_pen .roller_pen_4 .div_header {position: absolute;top: 8.5937vw;width: 80%;left: 10%;} #roller_pen .roller_pen_4 .div_header .p_74 {text-align: center;background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .div_header .p_26 {text-align: center;} #roller_pen .roller_pen_4 .bigbox {background: #070507;} #roller_pen .roller_pen_4 .bigbox .box_1 {position: relative;width: 68.9453vw;margin-left: auto;margin-right: auto;} #roller_pen .roller_pen_4 .bigbox .box_1 .div_img_2 {width: 100%;} #roller_pen .roller_pen_4 .bigbox .box_1 .div_img_2 img {border-radius: 1.26vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .content {position: absolute;top: 6.64vw;left: 6.25vw;width: 40vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .content .p_40 {font-weight: 700;} #roller_pen .roller_pen_4 .bigbox .box_1 .content .p_26 {margin-top: 0.7812vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul {position: absolute;bottom: 3.6vw;left: 6.25vw;display: flex;align-items: flex-end;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul {display: flex;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li {margin-right: 4.2968vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top {text-align: center;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top span {color: #FF6466;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .p_num {font-weight: bold;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .p_unit {font-weight: 700;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .p_unit sup {position: relative;top: -0.48vw;font-size: 2.1vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .span_sym {position: relative;top: -1.3vw;left: 0.25vw;font-size: 1.8vw;font-weight: 700;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .bot {margin-top: 0.5vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_right {margin-left: 7.7vw;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_right .p_24 {line-height: 2.0;} #roller_pen .roller_pen_4 .bigbox .box_2 {position: relative;width: 68.9453vw;height: 36.5468vw;margin-left: auto;margin-right: auto;background: #151517;border-radius: 1.26vw;margin-top: 3.5156vw;} #roller_pen .roller_pen_4 .bigbox .box_2 {padding-top: 4.687vw;padding-left: 6.25vw;box-sizing: border-box;} #roller_pen .roller_pen_4 .bigbox .box_2 .content {width: 60.8vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul {display: flex;align-items: center;margin-top: 0.565vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul .num_slide {height: 6px;border-radius: 3px;margin-right: 1.1718vw;background: #151517;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul .num_slide.animation {background: linear-gradient(-90deg, #FFAB96 0%, #FF0F47 100%);animation-name: slide_1;animation-duration: 1.5s;animation-fill-mode: forwards;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul .num .p_40 {background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;opacity: 0;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .num_h5 .p_26 {line-height: 1.2;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 {margin-top: 1.437vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul {display: flex;align-items: center;margin-top: 0.565vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul .num_slide {height: 6px;border-radius: 3px;margin-right: 1.1718vw;background: #151517;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul .num_slide.animation {background: linear-gradient(-90deg, #FEFEFE 0%, #414140 100%);animation-name: slide_2;animation-duration: 1.5s;animation-fill-mode: forwards;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul .num .p_28 {opacity: 0;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .num_h5 .p_26 {line-height: 1.2;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 {margin-top: 5.8593vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul {display: flex;align-items: center;margin-top: 0.565vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num_slide {height: 6px;border-radius: 3px;margin-right: 1.1718vw;background: #151517;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num_slide.animation {background: linear-gradient(-90deg, #FFAB96 0%, #FF0F47 100%);animation-name: slide_3;animation-duration: 1.5s;animation-fill-mode: forwards;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num .p_40 {background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;opacity: 0;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .num_h5 .p_26 {line-height: 1.2;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num .p_26_spe {background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;opacity: 0;margin-left: 0.4vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 {margin-top: 1.437vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul {display: flex;align-items: center;margin-top: 0.565vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul .num_slide {height: 6px;border-radius: 3px;margin-right: 1.1718vw;background: #151517;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul .num_slide.animation {background: linear-gradient(-90deg, #FEFEFE 0%, #414140 100%);animation-name: slide_4;animation-duration: 1.5s;animation-fill-mode: forwards;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul .num .p_28 {opacity: 0;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .num_h5 .p_26 {line-height: 1.2;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .p_div {display: flex;align-items: center;} #roller_pen .roller_pen_4 .bigbox .bot_spe {width: 68.9453vw;margin-left: auto;margin-right: auto;margin-top: 1.5312vw;padding-bottom: 2.1vw;} #roller_pen .roller_pen_4 .bigbox .bot_spe .p_18 {text-align: right;color: #7C7C7C;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .bot .p_26 {text-align: center;} @keyframes slide_1 {0% { width: 0px;}100% {width: 46.0625vw;} } @keyframes slide_2 {0% { width: 0px;}100% {width: 23.5312vw;} } @keyframes slide_3 {0% { width: 0px;}100% {width: 46.0625vw;} } @keyframes slide_4 {0% { width: 0px;}100% {width: 38.0625vw;} } #roller_pen .roller_pen_5 {position: relative;background: #000000;padding-top: 0vw;} #roller_pen .roller_pen_5 .div_header {position: absolute;width: 80%;left: 10%;top: 9.7656vw;} #roller_pen .roller_pen_5 .div_header .p_74 {background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-align: center;} #roller_pen .roller_pen_5 .div_header .p_26 {text-align: center;} #roller_pen .roller_pen_5 .box_1 {width: 15.1875vw;height: 2.9296vw;position: absolute;top: 40.5vw;left: 34vw;} #roller_pen .roller_pen_5 .box_1 .p_28 {position: absolute;top: -2.0vw;left: 0px;opacity: 0;line-height: 1.2;} #roller_pen .roller_pen_5 .box_1 .p_box {position: absolute;} #roller_pen .roller_pen_5 .box_1 .p_box.active{animation: addheight_5 1.6s;width: 15.1875vw;height: 2.9296vw;border-right: 2px dashed #fff; right: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_5 .box_1 .line_img_1 {position: absolute;width: 0.9765vw;z-index: 2;bottom: -0.3906vw;right: -0.4687vw;} #roller_pen .roller_pen_5 .box_1 .line_img_1 img {width: 100%;} #roller_pen .roller_pen_5 .box_2 {width: 12.1875vw;height: 2.9296vw;position: absolute;top: 47.0vw;left: 66vw;} #roller_pen .roller_pen_5 .box_2 .p_28 {position: absolute;top: 3.5vw;right: 0px;opacity: 0;line-height: 1.2;} #roller_pen .roller_pen_5 .box_2 .p_box {position: absolute;} #roller_pen .roller_pen_5 .box_2 .p_box.active{animation: addheight_6 1.6s;width: 12.1875vw;height: 2.9296vw;border-left: 2px dashed #fff; left: 0;top: 0;border-bottom: 2px dashed #fff;} #roller_pen .roller_pen_5 .box_2 .line_img_1 {position: absolute;width: 0.9765vw;z-index: 2;top: -0.3906vw;left: -0.4687vw;} #roller_pen .roller_pen_5 .box_2 .line_img_1 img {width: 100%;} @keyframes addheight_5{ from{height: 0px;width: 0;} 50%{height: 2.9296vw;width: 0;} to{width: 15.1875vw;} } @keyframes addheight_6{ from{height: 0px;width: 0;} 50%{height: 2.9296vw;width: 0;} to{width: 12.1875vw;} } #roller_pen .roller_pen_6 {position: relative;background: #000000;} #roller_pen .roller_pen_6 .div_header {position: absolute;top: 11.1vw;width: 80%;left: 10%;} #roller_pen .roller_pen_6 .div_header .p_74 {text-align: center;background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_6 .div_header .p_26 {text-align: center;} #roller_pen .roller_pen_7 {position: relative;background: #000000;padding-top: 12.1vw;} #roller_pen .roller_pen_7 .div_header {position: absolute;top: 7.3vw;width: 80%;left: 10%;} #roller_pen .roller_pen_7 .div_header .p_74 {text-align: center;background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_7 .div_header .p_26 {text-align: center;} #roller_pen .roller_pen_8 {position: relative;} #roller_pen .roller_pen_8 .div_header {position: absolute;top: 12.4vw;width: 38.6vw;left: 7.5312vw;} #roller_pen .roller_pen_8 .div_header .p_74 {text-align: left;background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_8 .div_header .p_26 {text-align: left;} #roller_pen .roller_pen_9 {position: relative;background: #030100;} #roller_pen .roller_pen_9 .div_header {padding-top: 10.156vw;width: 80%;margin-left: auto;margin-right: auto;text-align: center;} #roller_pen .roller_pen_9 .div_header .p_74 {text-align: center;} #roller_pen .roller_pen_9 .div_ul {display: flex;flex-wrap: wrap;justify-content: space-between;width: 68.3593vw;margin-left: auto;margin-right: auto;margin-top: 8.56vw;} #roller_pen .roller_pen_9 .div_ul .li {width: 33.4375vw;background: #1B1A1A;margin-bottom: 1.45vw;border-radius: 0.56vw;} #roller_pen .roller_pen_9 .div_ul .li .content {text-align: center;padding-bottom: 1.9534vw;} #roller_pen .roller_pen_9 .div_ul .li .content .p_26 {text-align: center;} #roller_pen .roller_pen_9 .div_ul .li .content a {color: #fff;display: inline-block;margin: 0 auto;border: 1px solid #FFFFFF;padding: 0.625vw 2.539vw;cursor: pointer;text-decoration: none;line-height: 1.2;margin-top: 1.45vw;} #roller_pen .roller_pen_10 {position: relative;background: #030100;padding-top: 11.7187vw;overflow: hidden;padding-bottom: 10vw;} #roller_pen .roller_pen_10 #roller_pen_10_swiper {padding-right: 2.7343vw;} #roller_pen .roller_pen_10 #roller_pen_10_swiper .swiper-slide {width: 50.7812vw;margin-left: 2.7343vw;} #roller_pen .roller_pen_10 #roller_pen_10_swiper .swiper-slide img {width: 100%;display: block;border-radius: 0.56vw;height: auto;} #roller_pen .roller_pen_3 .bigbox {background: url(https://www.xp-pen.com/Uploads/images/product/detail/20170828/x3-roller_pen/img/jp/3-back.png);} #roller_pen .roller_pen_3 .div_header .p_74 {background: linear-gradient(0deg, #FAE0BD 0.3662109375%, #FBDA80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .div_header .p_74 {background: linear-gradient(0deg, #FAE0BD 0.3662109375%, #FBDA80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_5 .div_header .p_74 {background: linear-gradient(0deg, #FAE0BD 0.3662109375%, #FBDA80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_6 .div_header .p_74 {background: linear-gradient(0deg, #FAE0BD 0.3662109375%, #FBDA80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_7 .div_header .p_74 {background: linear-gradient(0deg, #FAE0BD 0.3662109375%, #FBDA80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_8 .div_header .p_74 {background: linear-gradient(0deg, #FAE0BD 0.3662109375%, #FBDA80 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top span {color: #FADEB2;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul .num_slide.animation {background: linear-gradient(90deg, #FAE0BD, #FBDA80);} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul .num .p_40 {background: linear-gradient(90deg, #FAE0BD, #FBDA80);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num_slide.animation {background: linear-gradient(90deg, #FAE0BD, #FBDA80);} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num .p_40 {background: linear-gradient(90deg, #FAE0BD, #FBDA80);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num .p_26_spe {background: linear-gradient(90deg, #FAE0BD, #FBDA80);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} @media screen and (max-width: 1600px){ #roller_pen .p_18 {font-size: 12px;} } @media screen and (max-width: 1200px){ #roller_pen .img_pc {display: none!important;} #roller_pen .img_h5 {display: block!important;} #roller_pen .br_1200 {display: block;} #roller_pen .p_120 {font-size: 6.85vw;} #roller_pen .p_75 {font-size: 4.25vw;} #roller_pen .p_74 {font-size: 4.1015vw;} #roller_pen .p_60 {font-size: 2.437vw;} #roller_pen .p_48 {font-size: 1.75vw;} #roller_pen .p_40 {font-size: 1.9625vw;} #roller_pen .p_36 {font-size: 1.9vw;} #roller_pen .p_28 {font-size: 1.5937vw;line-height: 1.2;} #roller_pen .p_26 {font-size: 1.86vw;} #roller_pen .p_24 {font-size: 1.375vw;} #roller_pen .p_18 {font-size: 1.4031vw;} #roller_pen .roller_pen_pub .div_header .p_26 {margin-top: 1.86vw;} #roller_pen .roller_pen_1 .div_header {width: 82%;left: 9%;top: 7%;} #roller_pen .roller_pen_1 .div_header .p_120{font-size: 6vw;} #roller_pen .roller_pen_1 .div_header .bottom_ul{margin-top:1.5vw;} #roller_pen .roller_pen_1 .div_header .bottom_ul .ul_icon{width:5vw;} #roller_pen .roller_pen_1 .div_header .bottom_ul .icon_p{font-size: 2.437vw;} #roller_pen .roller_pen_1 .div_header .p_74{font-size: 4.8vw;margin-top:2.5vw;} #roller_pen .roller_pen_1 .div_header .red_dot_award{width: 28vw;margin-top:6vw;} #roller_pen .roller_pen_1 .div_spc .icon_16k{width:12.5vw;} #roller_pen .roller_pen_1 .div_spc .p_36{font-size: 2vw} #roller_pen .roller_pen_2 .video_btn {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;text-align: center;display: flex;align-items: center;justify-content: center;} #roller_pen #nebula_fixed-h5 {position: fixed;width: 100%;height: 100%;top: 0%;left: 0%;background: rgba(0,0,0,1);z-index: 999999999999;transition: transform .5s;transform: translateY(100vh);} #roller_pen .roller_pen_2 .video_btn1 {width: 12.625vw;} #roller_pen .roller_pen_2 .video_btn1 img {width: 100%;} #roller_pen #nebula_fixed-h5.video-h5-show {transform: translateY(0);} #roller_pen .roller_pen_2 #nebula_fixed-h5 .nebula_fixed_div {display: block;width: 100%;position: relative;left: 0%;top: 50%;transform: translateY(-50%);} #roller_pen .roller_pen_3 .div_header {width: 92%;} #roller_pen .roller_pen_3 .div_header .div_ul .li .icon_img {width: 4.9843vw;} #roller_pen .roller_pen_3 .box_2 .box_2_top {bottom: 13vw;height: 12vw;} #roller_pen .roller_pen_3 .box_2 {position: relative;height: auto;top: 0px;} #roller_pen .roller_pen_3 .box_2 .bigbox_pen_div {position: relative;margin-top: 20vw;} #roller_pen .roller_pen_3 .box_2 .pen_div {width: 100%;left: 0px;} #roller_pen .roller_pen_3 .box_2 .pen_div .roll_pen {width: 100%;left: 0px;} #roller_pen .roller_pen_3 .box_2 .ant_1 {top: -4.0vw;left: 24.0vw;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_74 {font-size: 3.1015vw;top: -5.2vw;} #roller_pen .roller_pen_3 .box_2 .ant_2 {top: -4.6vw;} #roller_pen .roller_pen_3 .box_2 .ant_3 {top: -3.0vw;left: 59.8vw;} #roller_pen .roller_pen_3 .box_2 .ant_4 {top: -3.0vw;left: 75.8vw;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_36 {display: block;top: -5.35vw;font-size: 1.86vw;white-space: nowrap;line-height: 1.2;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_28 {display: block;top: -4.05vw;font-size: 1.46vw;white-space: nowrap;line-height: 1.2;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_28 {display: block;top: -3.85vw;font-size: 1.46vw;white-space: nowrap;line-height: 1.2;} #roller_pen .roller_pen_3 .box_2 .ant_1 .line_img_1 {display: block;} #roller_pen .roller_pen_3 .box_2 .ant_3 .line_img_1 {display: block;} #roller_pen .roller_pen_3 .box_2 .ant_4 .line_img_1 {display: block;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_box {width: 10.1875vw;height: 4.9296vw;border-right: 2px dashed #fff; right: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_box {width: 9.1875vw;height: 4.9296vw;border-left: 2px dashed #fff; left: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_box {width: 10.1875vw;height: 4.9296vw;border-left: 2px dashed #fff; left: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_3 .box_2 .div_spe {bottom: 4.9062vw;} #roller_pen .roller_pen_3 .bigbox .roller_pen_3_sty {height: 0px;} #roller_pen .roller_pen_4 .roller_pen_4_back {height: 110px;width: 100%;background: #070508;} #roller_pen .roller_pen_4 .bigbox .box_1 {width: 86.9453vw;} #roller_pen .roller_pen_4 .bigbox .box_2 {width: 86.9453vw;height: 48.5468vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul {margin-top: 1.565vw;margin-bottom: 1.565vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 {margin-top: 2.437vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul {margin-bottom: 1.565vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul .num .p_28 {font-size: 1.5937vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content {width: 76.4vw;} @keyframes slide_1 {0% { width: 0px;}100% {width: 58.06vw;} } @keyframes slide_2 {0% { width: 0px;}100% {width: 29.03vw;} } @keyframes slide_3 {0% { width: 0px;}100% {width: 58.06vw;} } @keyframes slide_4 {0% { width: 0px;}100% {width: 45.0625vw;} } #roller_pen .roller_pen_5 .roller_pen_5_back {height: 10.0vw;width: 100%;background: #000000;} #roller_pen .roller_pen_5 .box_1 {top: 49.5vw;left: 35vw;} #roller_pen .roller_pen_5 .box_2 {top: 58vw;left: 67vw;} #roller_pen .roller_pen_5 .box_1 .p_28 {top: -3.5vw;font-size: 1.52vw;} #roller_pen .roller_pen_5 .box_2 .p_28 {font-size: 1.52vw;} #roller_pen .roller_pen_5 .box_1 .p_28 {opacity: 1;} #roller_pen .roller_pen_5 .box_1 .p_box {width: 15.1875vw;height: 2.9296vw;border-right: 2px dashed #fff; right: 0;bottom: 0;border-top: 2px dashed #fff;} #roller_pen .roller_pen_5 .box_2 .p_28 {opacity: 1;} #roller_pen .roller_pen_5 .box_2 .p_box {width: 12.1875vw;height: 2.9296vw;border-left: 2px dashed #fff; left: 0;top: 0;border-bottom: 2px dashed #fff;} #roller_pen .roller_pen_5 .box_1 .line_img_1 {width: 1.4vw;bottom: -1.0906vw;right: -0.687vw;} #roller_pen .roller_pen_5 .box_2 .line_img_1 {width: 1.4vw;top: -0.906vw;left: -0.5687vw;} #roller_pen .roller_pen_6 .div_header {top: 17.1vw;} #roller_pen .roller_pen_7 .div_img {margin-top: 10vw;} #roller_pen .roller_pen_8 .roller_pen_8_back {height: 16.0vw;width: 100%;background: #000000;} #roller_pen .roller_pen_8 .div_header {width: 90%;left: 5%;top: 7.4vw;} #roller_pen .roller_pen_8 .div_header .p_74 {text-align: center;} #roller_pen .roller_pen_8 .div_header .p_26 {text-align: center;} #roller_pen .roller_pen_9 .div_ul .li .content {width: 94%;margin-left: 3%;} #roller_pen #nebula_fixed-h5 {display: block;} #nebula_fixed-h5 .nebula_fixed_img_div .icon-guanbijian {font-size: 24px;color: #fff;} #nebula_fixed-h5 .nebula_fixed_img_div {position: absolute;right: 10px;top: 10px;width: 24px;height: 24px;border-radius: 50px;cursor: pointer;z-index: 66;} } @media screen and (max-width: 520px){ #roller_pen .img_pc_l {display: none!important;} #roller_pen .img_pc_s {display: block!important;} #roller_pen .w_2560 {display: none;} #roller_pen .w_520 {display: block;} #roller_pen .p_74 {font-size: 21px;} #roller_pen .p_60 {font-size: 15px;} #roller_pen .p_48 {font-size: 14px;} #roller_pen .p_40 {font-size: 14px;} #roller_pen .p_28 {font-size: 13px;} #roller_pen .p_26 {font-size: 12px;line-height: 1.4;} #roller_pen .p_24 {font-size: 12px;} #roller_pen .p_18 {font-size: 12px;} #roller_pen .roller_pen_pub .div_header .p_26 {font-size: 12px;line-height: 1.5;margin-top: 10px;} #roller_pen .roller_pen_pub .div_header .p_26 .br_pc {display: none;} #roller_pen .roller_pen_1 .div_header .bottom_ul .icon_p{font-size: 12px;} #roller_pen .roller_pen_1 .div_spc .icon_16k{width:15vw;} #roller_pen .roller_pen_1 .div_spc .p_36{font-size: 12px;} #roller_pen .roller_pen_2 .video_btn1 {width: 46px;} #roller_pen .roller_pen_3 {padding-top: 40px;} #roller_pen .roller_pen_3 .bigbox {background: #030100;} #roller_pen .roller_pen_3 .div_header .div_ul {max-width: 80%;margin-top: 60px;} #roller_pen .roller_pen_3 .div_header .div_ul .li .icon_img {width: 30px;} #roller_pen .roller_pen_3 .box_2 {margin-top: 130px;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_36 {font-size: 13px;top: -37px;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_28 {font-size: 12px;top: -54%;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_28 {font-size: 12px;top: -34px;} #roller_pen .roller_pen_3 .box_2 .div_spe .p_26 {line-height: 1.16;} #roller_pen .roller_pen_3 .box_2 .ant_1 {width: 92px;height: 30px;left: 11%;top: 0;} #roller_pen .roller_pen_3 .box_2 .ant_3 {width: 92px;top: -8.1vw;height: 68px;} #roller_pen .roller_pen_3 .box_2 .ant_4 {width: 80px;top: 20px;height: 20px;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_box {border-right: 1px dashed #fff;border-top: 1px dashed #fff;width: 92px;height: 30px;} #roller_pen .roller_pen_3 .box_2 .ant_1 .p_box.active {border-right: 1px dashed #fff;border-top: 1px dashed #fff;width: 92px;height: 30px;} #roller_pen .roller_pen_3 .box_2 .ant_3 .p_box {border-left: 1px dashed #fff;border-top: 1px dashed #fff;width: 92px;height: 68px;} #roller_pen .roller_pen_3 .box_2 .ant_4 .p_box {border-left: 1px dashed #fff;border-top: 1px dashed #fff;width: 80px;height: 20px;} #roller_pen .roller_pen_3 .box_2 .div_spe {bottom: 18px;} #roller_pen .roller_pen_3 .box_2 .box_2_top {height: 33vw;bottom: 0vw;} #roller_pen .roller_pen_4 .roller_pen_4_back {height: 110px;width: 100%;background: #070508;} #roller_pen .roller_pen_4 .div_header {top: 40px;} #roller_pen .roller_pen_4 .bigbox .box_1 {width: 92%;} #roller_pen .roller_pen_4 .bigbox .box_1 .content {width: 60%;top: 30px;left: 20px;} #roller_pen .roller_pen_4 .bigbox .box_1 .content .p_26 {margin-top: 10px;} #roller_pen .roller_pen_4 .bigbox .box_2 {width: 92%;height: 360px;} #roller_pen .roller_pen_4 .bigbox .box_2 {padding: 35px 20px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content {width: 100%;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 {width: 50%;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul .num_slide {height: 3px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul .num_slide {height: 3px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num_slide {height: 3px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul .num_slide {height: 3px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .num_h5 {display: flex;align-items: center;justify-content: space-between;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .num_h5 {display: flex;align-items: center;justify-content: space-between;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul {display: block;width: 90%;left: 5%;bottom: 5px;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_right {margin-top: 60px;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_right .p_24 {text-align: right;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .p_num {font-size: 28px;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .p_unit {font-size: 18px;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .p_unit sup {font-size: 20px;} #roller_pen .roller_pen_4 .bigbox .box_1 .big_ul .div_spe_ul .li .top .span_sym {font-size: 18px;top: -11px;left: 5px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 {margin-top: 40px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_1 .slide_ul {margin-top: 8px;margin-bottom: 8px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 .slide_ul {margin-top: 15px;margin-bottom: 8px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .slide_2 {margin-top: 30px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul {margin-top: 8px;margin-bottom: 8px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 .slide_ul {margin-top: 8px;margin-bottom: 8px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_2 {margin-top: 30px;} #roller_pen .roller_pen_4 .bigbox .bot_spe {width: 90%;margin-top: 15px;padding-bottom: 25px;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .num_h5 .p_40_spe {background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .num_h5 .p_40 {background: linear-gradient(0deg, #FFAB96 0%, #FF0F47 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .slide_1 .slide_ul .num .p_26_spe {margin-left: 4px;} @keyframes slide_1 {0% { width: 0px;}100% {width: 100%;} } @keyframes slide_2 {0% { width: 0px;}100% {width: 100%;} } @keyframes slide_3 {0% { width: 0px;}100% {width: 100%;} } @keyframes slide_4 {0% { width: 0px;}100% {width: 80%;} } #roller_pen .roller_pen_4 .div_header {top: 40px;width: 90%;left: 5%;} #roller_pen .roller_pen_5 .roller_pen_5_back {height: 100px;} #roller_pen .roller_pen_5 .div_header {top: 40px;width: 90%;left: 5%;} #roller_pen .roller_pen_5 .box_1 {width: 120px;height: 30px;top: 59%;left: 21%;} #roller_pen .roller_pen_5 .box_2 {width: 100px;height: 20px;top: 73%;left: 66%;} #roller_pen .roller_pen_5 .box_1 .p_28 {top: -24px;font-size: 12px;} #roller_pen .roller_pen_5 .box_2 .p_28 {font-size: 12px;top: 22px;} #roller_pen .roller_pen_5 .box_1 .p_box {border-right: 1px dashed #fff;border-top: 1px dashed #fff;width: 120px;height: 30px;} #roller_pen .roller_pen_5 .box_2 .p_box {border-left: 1px dashed #fff;border-bottom: 1px dashed #fff;width: 100px;height: 20px;} #roller_pen .roller_pen_5 .box_1 .line_img_1 {width: 14px;bottom: -9px;right: -7px;} #roller_pen .roller_pen_5 .box_2 .line_img_1 {width: 14px;left: -6px;top: -7px;} #roller_pen .roller_pen_6 .div_header {top: 40px;width: 90%;left: 5%;} #roller_pen .roller_pen_7 {padding-top: 140px;} #roller_pen .roller_pen_7 .div_header {top: 40px;width: 90%;left: 5%;} #roller_pen .roller_pen_8 .roller_pen_8_back {height: 100px;} #roller_pen .roller_pen_8 .div_header {top: 40px;width: 90%;left: 5%;} #roller_pen .roller_pen_9 .div_header {width: 90%;padding-top: 40px;} #roller_pen .roller_pen_9 .div_ul {width: 92%;margin-top: 35px;} #roller_pen .roller_pen_9 .div_ul .li {width: 48%;margin-bottom: 13px;border-radius: 7px;} #roller_pen .roller_pen_9 .div_ul .li .content {width: 94%;margin-left: auto;margin-right: auto;padding-bottom: 17px;margin-top: 8px;} #roller_pen .roller_pen_9 .div_ul .li .content a {padding: 5px 20px;margin-top: 14px;} #roller_pen .roller_pen_3 .box_2 .div_spe .p_26 {line-height: 1.18;} #roller_pen .roller_pen_10 {padding-bottom: 20vw;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_1 .num_h5 .p_40_spe {background: linear-gradient(90deg, #FAE0BD, #FBDA80);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #roller_pen .roller_pen_4 .bigbox .box_2 .content .part_2 .num_h5 .p_40 {background: linear-gradient(90deg, #FAE0BD, #FBDA80);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} }