.retail-in-content { width: 100%; height: auto; } .retail-in-content .retail-in-kv { width: 100%; height: 680px; background: url('../img/retail_in/retail_in_kv.jpg') no-repeat bottom center; background-size: cover; position: relative; } .retail-in-content .retail-in-main { padding: 0 90px; margin-top:40px; } .retail-in-content .retail-in-main .title { width: 100%; height: auto; } .retail-in-content .retail-in-main .title .title1 i { width: 99px; height: 116px; display: inline-block; background: url('../img/retail_in/retail_in_icon1.png'); margin-right: 10px; } .retail-in-content .retail-in-main .title .text { line-height: 30px; margin-top: 20px; } .retail-in-content .retail-in-main ul.list { margin-bottom: 125px; margin-top: 316px; } @media screen and (max-width: 1440px) { .retail-in-content .retail-in-main ul.list { margin-bottom: 125px; margin-top: 0; } } .retail-in-content .retail-in-main ul.list li { margin-top: 125px; } .retail-in-content .retail-in-main ul.list li .top { width: 52%; height: auto; } .retail-in-content .retail-in-main ul.list li .top .title { display: flex; } .retail-in-content .retail-in-main ul.list li .top .title .right { display: table; margin-left: 15px; margin-top: 7px; } .retail-in-content .retail-in-main ul.list li .top .title .right .content { display: table-cell; vertical-align: middle; } .retail-in-content .retail-in-main ul.list li .top .title .right .content .text { margin: 0; } .retail-in-content .retail-in-main ul.list li .bottom { width: 52%; height: auto; margin-top: 16px; margin-bottom: 30px; line-height: 30px; } .retail-in-content .retail-in-main ul.list li .bottom-img-content { width: 62%; height: auto; display: flex; justify-content: space-between; align-items: baseline; position: relative; } .retail-in-content .retail-in-main ul.list li .bottom-img-content img { width: 49.3%; display: block; margin: 0; padding: 0; } .retail-in-content .retail-in-main ul.list li .bottom-img-content img:nth-child(3) { position: absolute; border: 10px solid white; width: 65%; right: -57%; top: -88%; } .retail-in-content .retail-in-main ul.list li:nth-child(2) .bottom-img-content img:nth-child(2) { width: 49.7%; } .retail-in-content .retail-in-main ul.list li:nth-child(3) .bottom-img-content img:nth-child(2) { width: 49.7%; } .retail-in-main ul li .bottom-img-content { display: block; } .retail-in-main ul li .bottom-img-mobile { display: none; } .animation-wrapper { visibility: hidden; } .retail-in-content .retail-in-main ul.list li .bottom.text.teshu{ text-align:left; } @media screen and (min-width: 1601px){ .retail-in-content .retail-in-main ul.list { margin-bottom: 125px; margin-top: 220px; } .retail-in-content .retail-in-main ul.list li .bottom-img-content img:nth-child(3) { position: absolute; border: 10px solid white; width: 65%; right: -57%; top: -50%; } .retail-in-content .retail-in-main ul.list li:first-child .bottom-img-content img:nth-child(3){ top:-66%; } } @media screen and (max-width: 768px) { .retail-in-content .retail-in-main ul.list li .top { order: 2; width: 100%; height: auto; margin: 0 0 20px 0 !important; } .retail-in-content .retail-in-main ul.list li .bottom.text{ margin-top:0 !important; } .retail-in-content .retail-in-main ul.list li { margin-top: 0 !important; } .retail-in-content .retail-in-main ul.list li .bottom { margin-bottom: 0 !important; } .retail-in-main ul li .bottom-img-content { display: none !important; } .retail-in-main ul li .bottom-img-mobile { display: block; width: 100%; margin-top: 40px; margin-bottom: 20px; overflow: hidden; } .retail-in-main ul li .bottom-img-mobile img { display: block; width: 100%; height: auto; margin: 0; padding: 0; } } @media screen and (max-width: 2560px) { .retail-in-content .retail-in-kv { width: 100%; height: 1300px; background: url('../img/retail_in/retail_in_kv.png') no-repeat top center; background-size: cover; position: relative; } } @media screen and (max-width: 1920px) { .retail-in-content .retail-in-kv { width: 100%; height: 1045px; background: url('../img/retail_in/retail_in_kv.png') no-repeat top center; background-size: cover; position: relative; } } @media screen and (max-width: 1600px) { .retail-in-content .retail-in-kv { width: 100%; height: 871px; background: url('../img/retail_in/retail_in_kv.png') no-repeat top center; background-size: cover; position: relative; } } @media screen and (max-width: 1440px) { .retail-in-content .retail-in-kv { width: 100%; height: 350px; background: url('../img/retail_in/retail_in_kv.jpg') no-repeat top center; background-size: cover; position: relative; } } @media screen and (max-width: 1024px) { .retail-in-content .retail-in-kv { width: 100%; height: 350px; background: url('../img/retail_in/retail_in_kv.jpg') no-repeat top center; background-size: cover; position: relative; } .retail-in-content .retail-in-main ul.list li .bottom { width: 100%; height: auto; margin-top: 16px; margin-bottom: 30px; line-height: 30px; } .retail-in-content .retail-in-main ul.list li .bottom-img-content img:nth-child(3) { position: absolute; border: 8px solid white; width: 63%; right: -63.3%; top: -4%; } .retail-in-content .retail-in-main { padding: 0 90px; } .retail-in-content .retail-in-main .title { width: 100%; height: auto; } .retail-in-content .retail-in-main ul.list li { margin-top: 80px; } .retail-in-content .retail-in-main ul.list { margin-bottom: 100px; margin-top: 0; } } @media screen and (max-width: 768px) { .retail-in-content .retail-in-kv { width: 100%; height: 300px; background: url('../img/retail_in/retail_in_kv.jpg') no-repeat top center; background-size: cover; position: relative; } .retail-in-content .retail-in-main .title { width: 100%; height: auto; } .retail-in-content .retail-in-main { padding: 0 20px; margin-top:10px !important; } /*.retail-in-content .retail-in-main ul.list li .bottom-img-content img:nth-child(3) { position: absolute; border: 5px solid white; width: 65%; right: -57%; top: -88%; } .retail-in-content .retail-in-main .title .text-gold i{ display:none; } .retail-in-content .retail-in-main .title .text-gold{ padding-left:110px; position:relative; } .retail-in-content .retail-in-main .title .text-gold:after{ width:99px; height:116px; background:url('../img/retail_in/retail_in_icon1.png'); position:absolute; left:0; bottom:5px; content:'\20'; }*/ .retail-in-content .retail-in-main ul.list li .bottom-img-content img:nth-child(3) { position: absolute; border: 6px solid white; width: 63%; right: -63.3%; top: -3%; } .retail-in-content .retail-in-main ul.list li .top .title .left.tebie { margin-top: -4px; } } @media screen and (max-width: 768px) { .retail-in-content .retail-in-kv { width: 100%; height: 150px; background: url('../img/retail_in/retail_in_kv.jpg') no-repeat top center; background-size: cover; position: relative; } .retail-in-content .retail-in-main { padding: 0 15px; } .retail-in-content .retail-in-main .title .text-gold{ font-size:1.14rem; } .retail-in-content .retail-in-main ul.list li .bottom{ line-height:22.5px; } } @media screen and (max-width:320px){ .english-edition .retail-in-content .retail-in-main ul.list li .top .title .right{ width:200px; } }