article { margin-top: -4rem; padding: 2rem .3rem 0; } .tab_box { margin-bottom: .63rem !important; height: 2.15rem; padding: .1rem .13rem; background-color: #ac0904; align-items: stretch; } .tab_box.active { width: 15.4rem; margin: 0 auto; position: fixed; top: 2rem; left: 50%; transform: translatex(-50%); z-index: 29; } .tab_box .tab { width: 3.65rem; background-color: #ac0904; } .tab_box .tab>span { width: 100%; height: 100%; background-color: #6d0400; border: solid 0.02rem #f1c28f; font-size: 0.51rem; font-weight: 700; color: #fae4b0; text-align: center; line-height: 0.75rem; } .tab_box .tab.active span { background-color: #fae4b0; border: solid 0.02rem #f1c28f; color: #6d0400; } .section { margin-bottom: 1rem; } .section .content { background-color: #6d0400; border-style: solid; border-width: 4px; border-image-source: linear-gradient(60deg, #f1c290 0%, #870500 100%); box-shadow: 0px 0px 30px #b90d09; border-image-slice: 1; align-items: stretch; padding: .85rem .3rem .5rem; position: relative; } .section .title_box h3 { font-size: 0.75rem; line-height: .75rem; height: .75rem; color: #f1c290; } .section .title_box p { font-size: 0.47rem; height: 0.47rem; line-height: 0.47rem; color: #fff5e8; margin: .33rem 0 1.2rem; } .section1 { margin-bottom: 1.05rem; } .section1 .content { display: none; } .section1 .content.active { display: block; } .section1 .btn { width: 6rem; height: 1.75rem; background: url(/uploads/image/wsimg/btn1.png) no-repeat; background-size: 100%; border-radius: 0.84rem; margin: 0.6rem auto 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03rem; color: #6d0400; } .section1 ul { align-items: stretch; flex-wrap: wrap; } .section1 li { width: 49%; height: 4.2rem; margin-right: 0; position: relative; margin-top: .4rem; overflow: hidden; } .section1 li.mar_t { margin-top: 0; } .section1 li.nomar { margin-right: 0; } .section1 li .vs { position: absolute; top: 1rem; left: 2.65rem; width: 1.37rem; z-index: 4; } .section1 li .top { width: 100%; height: 1rem; background: url(/uploads/image/wsimg/top_bg.png) no-repeat; background-position: right center; background-size: auto 100%; font-size: .55rem; font-weight: 700; font-style: italic; font-stretch: normal; line-height: 1rem; color: #ffffff; text-align: right; padding-right: .6rem; position: relative; z-index: 5; } .section1 li .s_box { align-items: stretch; position: relative; } .section1 li .left { width: 46%; position: relative; } .section1 li .left .num_box { width: 100%; height: 2.25rem; background-color: #d7a99a; padding-left: .4rem; padding-top: .1rem; flex-shrink: 0; } .section1 li .left .txt { font-size: .5rem; font-style: italic; font-weight: 700; line-height: 16px; color: #bb5d53; position: relative; z-index: 6; } .section1 li .left .txt span { font-size: 12px; } .section1 li .left .remark { margin-top: .1rem; height: auto; flex-direction: column; align-items: flex-start; position: relative; z-index: 6; } .section1 li .left .remark img { position: absolute; left: 0; bottom: -0.45rem; z-index: -1; width: 100%; } .section1 li .left .remark span { font-size: .3rem; font-weight: 700; font-style: italic; height: .3rem; line-height: .3rem; color: #ffffff; margin-bottom: .15rem; } .section1 li .left .remark p { font-size: .3rem; font-weight: 700; height: .3rem; font-style: italic; line-height: .3rem; color: #fae4b0; } .section1 li .left .remark p span { font-size: .3rem; line-height: .3rem; } .section1 li .right { position: absolute; right: 0; top: 0; width: 58%; } .section1 li .right .num_box { width: 100%; height: auto; background: #fffdf4 url(/uploads/image/wsimg/logo.png) no-repeat; background-size: 55%; background-position: 115% 107%; padding-left: 0.3rem; padding-top: 0.4rem; padding-bottom: 1rem; } .section1 li .right .txt { font-size: .45rem; font-weight: 700; font-style: italic; line-height: .5rem; color: #880500; position: relative; z-index: 6; } .section1 li .num { height: 1.3rem; font-style: italic; color: #bb5d53; left: -5px; margin-bottom: 0rem; position: relative; z-index: 6; overflow: hidden; } .section1 li .num em { font-size: 1.1rem; font-style: italic !important; line-height: 1.3rem; font-weight: 700; } .section1 li .right .num { color: #9d0205; height: 1.5rem; position: relative; left: 0.2rem; /* text-shadow: 4px 7px 7px rgba(136, 5, 0, 0.18); */ overflow: hidden; margin-bottom: .1rem; font-size: 1rem; display: block; text-align: center; padding-right: .2rem; } .section1 li .right .num em { font-size: 1.2rem; letter-spacing: -0.1rem; line-height: 1.5rem; } .section1 .datafrom { width: 100%; text-align: right; font-size: .5rem; color: #f1c290; opacity: 0.4; margin-top: .5rem; } .other .part { flex-wrap: wrap; align-items: flex-end; border-bottom: 1px solid #953d2b; padding-bottom: 1rem; padding-top: 1rem; } .other .part .part_txt{ width: 100%; margin-top: .5rem; } .ge .part .part_txt{ margin-bottom: 1rem; } .ge .part .part_txt.nomar{ margin-bottom: 0; } .other .part .part_txt p{ font-size: .5rem; text-align: left; color: #ffffff; } .other .part .part_txt span{ color: #f1c290; } .other .part.no { border-bottom: none; padding-bottom: 0; } .other .part.pt { padding-top: 0; } .ge .part.pt { border-bottom: none; padding-top: 0; padding-bottom: 0; } .other .part h4 { width: 100%; height: 0.6rem; font-size: 0.6rem; line-height: 0.6rem; color: #f1c290; margin-bottom: .6rem; text-align: left; } .other .part ul { width: 100%; } .section1 .other li .left .txt { font-size: .4rem; } .kr .part2 ul { width: 100%; } .kr .part2 { justify-content: flex-end; position: relative; } .section1 .kr .part2 li { width: 100%; height: 5.5rem; } .section1 .kr .part2 li .left { width: 42%; } .section1 .kr .part2 li .left .num_box { width: 100%; height: 3.25rem; padding-top: .3rem; } .section1 .kr .part2 li .right .num_box { width: 100%; height: 4.53rem; padding-top: .8rem; padding-left: 2.6rem; } .section1 .kr .part2 li .right .num { left: 0; margin-bottom: .5rem; text-align: left; } .section1 .kr .part2 li .right .num em { display: inline-block; letter-spacing: -.2rem; font-size: 1.3rem; } .section1 .kr .part2 li .right .num em:nth-child(1) { margin-right: 15px; } .section1 .kr .part2 li .vs { left: 5.2rem; width: 1.8rem; } .section1 .ge li .right .num em { letter-spacing: 0; } .section1 .ge li .right .num { left: .4rem; } .img_list .title_box { position: relative; left: 0; top: 0; } .section2 .title_box p{ margin-bottom: .5rem; } .img_list ul { flex-wrap: wrap; align-items: flex-start; height: 10rem; overflow: hidden; } .img_list li { width: 32.3%; margin-right: .2rem; margin-top: .4rem; position: relative; cursor: pointer; height: 8rem; overflow: hidden; } .img_list li:nth-child(1), .img_list li:nth-child(2), .img_list li:nth-child(3) { margin-top: 0; } .img_list li:nth-child(3n) { margin-right: 0; } .img_list li img { width: 100%; } .img_list .more { width: 300px; margin: 30px auto 0; flex-direction: column; cursor: pointer; } .img_list .more p { font-size: .5rem; line-height: .5rem; color: #edc695; margin-bottom: .5rem; } .img_list .more img { width: .8rem; } .img_list .btn_box { margin: 1rem auto 0; } .img_list .btn_box .btn { width: 6.85rem; height: 1.73rem; background: url(/uploads/image/wsimg/btn2.png) no-repeat; background-size: 100%; border-radius: 0.84rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03rem; color: #6d0400; } .img_list .btn_box .btn:nth-child(2) { margin-left: 1rem; } .section3 .title_box h3, .section4 .title_box h3{ margin-bottom: .5rem; } .section4 .content p { font-size: .55rem; line-height: .75rem; color: #fff5e8; } .btm_form { margin-top: 0.63rem; padding: .75rem 1.38rem 1.5rem; background-color: #6d0400; } .btm_form .title{ height: 1.63rem; margin-bottom: .85rem; } .btm_form .title img{ height: 100%; } .btm_form ul{ width: 100%; margin-bottom: .62rem; } .btm_form ul img{ width: 1.05rem; margin: 0 .8rem; } .btm_form ul li{ font-size: 0.6rem; line-height: .85rem; color: #ffffff; } .btm_form .item{ height: 1.73rem; background-color: #ffffff; margin-bottom: .4rem; overflow: hidden; position: relative; } .btm_form .item::before{ content: ""; width: 0.03rem; height: 100%; background-color: #e6e6e6; position: absolute; left: 1.5rem; top: 50%; transform: translatey(-50%); } .btm_form .item img{ position: absolute; height: .63rem; left: .45rem; top: 50%; transform: translatey(-50%); } .btm_form .item input, .btm_form .item select{ width: 100%; height: 100%; font-size: 0.55rem; background-color: #ffffff; padding-left: 2.05rem; color: #999999; } .btm_form .item input::placeholder{ color: #999999; } .btm_form .item select { background: #ffffff url(/uploads/image/wsimg/form_arrow.png) no-repeat; background-size: 4%; background-position: 95% center; } .btm_form .btn { width: 7.5rem; height: 1.73rem; background: url(/uploads/image/wsimg/form_btn.png) no-repeat; background-size: 100%; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03rem; color: #6d0400; margin: .95rem auto 0; } .showimg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .7); display: none; z-index: 31; } .showimg .img_box{ width: 100%; height: 85%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); } .showimg .img { width: 90%; height: 100%; overflow: hidden; margin: 0 auto; } .showimg .img img { max-width: auto; height: 100%; }