.retail-shopping-content { width: 100%; height: auto; } .retail-shopping-content .retail-shopping-kv { width: 100%; height: 680px; background: url('../img/retail_shopping_kv.jpg') no-repeat bottom center; background-size: cover; position: relative; } .retail-shopping-content .retail-shopping-kv .txt { width: 296px; height: 84px; background: url('../img/retail_shopping/retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: 87px; top: 50%; margin-top: -42px; } .english-edition .retail-shopping-content .retail-shopping-kv .txt { width: 605px; height: 118px; background: url('../img/retail_shopping/en_retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: 87px; top: 50%; margin-top: -42px; } .retail-shopping-content .retail-shopping-txt { padding: 90px; line-height: 30px; } .retail-shopping-content .retail-shopping-txt h3 { display: inline-block; } .retail-shopping-content > ul { margin-bottom: 50px; } .retail-shopping-content > ul > li { position: relative; width: 100%; height: auto; } .retail-shopping-content ul li .top-title-bg { width: 100%; height: 195px; background: url('../img/fill_bg.png'); position: absolute; left: 0; top: 0; overflow: hidden; } .retail-shopping-content ul li .main { padding: 0 90px; position: absolute; } .retail-shopping-content ul li .top-title-bg { width: 100%; height: 195px; background: url('../img/fill_bg.png'); position: absolute; left: 0; top: 0; overflow: hidden; } .retail-shopping-content ul li .retail-shopping-main { padding: 75px 90px 0 90px; position: relative; visibility: hidden; } .retail-shopping-content ul li .retail-shopping-main .top .left { width: auto; display: table; height: 115px; margin-right: 10px; } .retail-shopping-content ul li .retail-shopping-main .top .left .style { display: table-cell; vertical-align: middle; } .retail-shopping-content ul li .retail-shopping-main .top .right { width: auto; font-size: 150px; line-height: 120px; color: rgba(188, 163, 119, 0.2); font-weight: bold; } .retail-shopping-content ul li .retail-shopping-main .top { width: 100%; height: 115px; display: flex; justify-content: flex-end; } .retail-shopping-content ul li .retail-shopping-main .txt-info { width: 43.8%; height: auto; position: absolute; top: 218px; left: 50%; line-height: 30px; } .retail-shopping-content ul li .retail-shopping-main .bottom { width: 46%; height: 860px; margin: -115px 0 0 0; position: relative; border-top: 1px solid transparent; } .retail-shopping-content ul li.two .retail-shopping-main .bottom { height: 1000px; } .retail-shopping-content ul li .retail-shopping-main .bottom img { display: block; padding: 0; margin: 0; } .retail-shopping-content ul li .retail-shopping-main .bottom img:nth-child(1) { width: 100%; height: auto; position: absolute; left: 0; top: 0; border: 10px solid white; z-index: 9; } .retail-shopping-content ul li.one .retail-shopping-main .bottom .img2 { padding: 58% 0 0 84%; width: 128%; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img1 { width: 100%; position: absolute; left: 0; top: 0; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img2 { padding: 58% 0 0 84%; width: 128%; } .retail-shopping-content ul li.three .retail-shopping-main .bottom .img2 { padding: 72% 0 0 84%; width: 128%; } .retail-shopping-content ul li .retail-shopping-main .bottom-mobile { display: none; } .retail-shopping-content ul li .retail-shopping-main .bottom { display: block; } @media screen and (max-width: 1600px) { .english-edition .retail-shopping-content ul li .retail-shopping-main .bottom{ width: 46%; height: 860px; margin: -73px 0 0 0; position: relative; border-top: 1px solid transparent; } } @media screen and (max-width: 1440px) { .english-edition .retail-shopping-content ul li .retail-shopping-main .bottom{ width: 46%; height: 605px; margin: -18px 0 0 0; position: relative; border-top: 1px solid transparent; } .retail-shopping-content ul li .retail-shopping-main .bottom { width: 46%; height: 580px; margin: -90px 0 0 0; position: relative; border-top: 1px solid transparent; } .retail-shopping-content ul li.two .retail-shopping-main .bottom { height: 768px; } .retail-shopping-content ul li.three .retail-shopping-main { padding: 80px 90px 135px 90px; position: relative; } .retail-shopping-content ul li.one .retail-shopping-main { padding: 76px 90px 60px 90px; position: relative; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img2 { padding: 54% 0 0 84%; width: 128%; } } @media screen and (max-width:1280px){ .english-edition .retail-shopping-content .retail-shopping-kv .txt { position: absolute; left: -2%; top: 50%; margin-top: -38px; background-size: 80%; } .english-edition .retail-shopping-content ul li .retail-shopping-main .bottom{ margin: 30px 0 0 0; } .retail-shopping-content ul li.one .retail-shopping-main .bottom .img1{ top:10%; } .retail-shopping-content ul li.one .retail-shopping-main .bottom .img2{ padding-top:68%; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img1{ top:10%; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img2{ padding-top:68%; } .retail-shopping-content ul li.three .retail-shopping-main .bottom .img1{ top:10%; } .retail-shopping-content ul li.three .retail-shopping-main .bottom .img2{ padding-top:68%; } .retail-shopping-content ul li.one .retail-shopping-main{ padding: 76px 90px 100px 90px; } } @media screen and (max-width: 1024px) { .retail-shopping-content ul li .retail-shopping-main { padding: 75px 90px 60px 90px; position: relative; } .retail-shopping-content ul li .retail-shopping-main .txt-info{ position:static; width:100%; } .retail-shopping-content ul li .retail-shopping-main .bottom { width: 46%; height: 275px; margin: 12px 0 120px 0; position: relative; border-top: 1px solid transparent; } .retail-shopping-content ul li .retail-shopping-main .top .right { width: auto; font-size: 110px; line-height: 120px; color: rgba(188, 163, 119, 0.2); font-weight: bold; } .retail-shopping-content ul li.one .retail-shopping-main .bottom .img2 { padding: 52% 0 0 84%; width: 85%; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img2 { padding: 52% 0 0 84%; width: 128%; } .retail-shopping-content ul li.three .retail-shopping-main .bottom .img2 { padding: 52% 0 0 84%; width: 85%; } .retail-shopping-content ul li.three .retail-shopping-main .bottom .img2 { padding: 58% 0 0 84%; width: 85%; } .retail-shopping-content ul li .retail-shopping-main .bottom { display: none; } .retail-shopping-content ul li .retail-shopping-main .bottom-mobile { width: 80%; height:400px; margin: 28px auto 30px auto; overflow: hidden; display: block; } } @media screen and (max-width: 768px) { .retail-shopping-content .retail-shopping-kv .txt { width: 296px; height: 84px; background: url('../img/retail_shopping/retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: 0%; top: 50%; margin-top: -29px; background-size: 70%; } .english-edition .retail-shopping-content .retail-shopping-kv .txt { width: 605px; height: 118px; background: url('../img/retail_shopping/en_retail_shopping_kv_txt.png') no-repeat top center; position:absolute; left: -16%; top: 50%; margin-top: -29px; background-size: 55%; } .retail-shopping-content ul li .retail-shopping-main .top .right { width: auto; font-size: 80px; line-height: 120px; color: rgba(188, 163, 119, 0.2); font-weight: bold; } .retail-shopping-content ul li .top-title-bg { width: 100%; height: 130px; background: url('../img/fill_bg.png'); position: absolute; left: 0; top: 0; overflow: hidden; } .retail-shopping-content ul li.one .retail-shopping-main { padding: 40px 20px 60px 20px; position: relative; } .retail-shopping-content ul li.three .retail-shopping-main { padding: 40px 20px 60px 20px; position: relative; } .retail-shopping-content ul li .retail-shopping-main .bottom { width: 46%; height: 275px; margin: 78px 0 120px 0; position: relative; border-top: 1px solid transparent; } .retail-shopping-content .retail-shopping-txt { padding: 20px; line-height: 30px; } .retail-shopping-content ul li .retail-shopping-main { padding: 40px 20px 60px 20px; position: relative; } } @media screen and (max-width: 768px) { .retail-shopping-content > ul{ margin-bottom:0; } .retail-shopping-content ul li .retail-shopping-main{ padding: 7px 15px 22px 15px; } .retail-shopping-content ul li .retail-shopping-main .bottom { display: none; } .retail-shopping-content ul li .retail-shopping-main .bottom-mobile { display: block; width: 100%; height:200px; margin-top: 28px; margin-bottom: 30px; overflow: hidden; } .retail-shopping-content .retail-shopping-kv .txt { width: 296px; height: 84px; background: url('../img/retail_shopping/retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: -7%; top: 50%; margin-top: -29px; background-size: 65%; } .english-edition .retail-shopping-content .retail-shopping-kv .txt { width: 605px; height: 118px; background: url('../img/retail_shopping/en_retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: -7%; top: 50%; margin-top: -29px; background-size:65%; } .retail-shopping-content ul li .top-title-bg { width: 100%; height: 152px; background: url('../img/fill_bg.png'); position: absolute; left: 0; top: 0; overflow: hidden; } .retail-shopping-content ul li.one .retail-shopping-main { padding: 7px 20px 60px 20px; position: relative; } .retail-shopping-content ul li.two .retail-shopping-main { padding: 7px 20px 60px 20px; position: relative; } .retail-shopping-content ul li.three .retail-shopping-main { padding: 7px 20px 60px 20px; position: relative; } .retail-shopping-content ul li .retail-shopping-main .top { width: 100%; height: auto; display: flex; margin-left: 0; } .retail-shopping-content ul li .retail-shopping-main .bottom { width: 100%; height: auto; margin: 0; position: static; border-top: 0; } .retail-shopping-content ul li .retail-shopping-main .bottom img { margin: 0 !important; padding: 0 !important; position: static !important; border: 0 !important; width: 100% !important; height: 190px !important; } .retail-shopping-content ul li .retail-shopping-main .txt-info { width: 100%; height: auto; position: static; line-height: 22.5px; } .retail-shopping-content ul li.two .retail-shopping-main .bottom .img2 { width: 100%; } .retail-shopping-content ul li.two .retail-shopping-main .bottom-pc { display: none; } .retail-shopping-content ul li.two .retail-shopping-main .bottom-mobile { display: block; } .retail-shopping-content .retail-shopping-kv .txt { width: 296px; height: 84px; background: url('../img/retail_shopping/retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: 0%; top: 50%; margin-top: -29px !important; background-size: 58% !important; } .english-edition .retail-shopping-content .retail-shopping-kv .txt { width: 605px; height: 118px; background: url('../img/retail_shopping/en_retail_shopping_kv_txt.png') no-repeat top center; position: absolute; left: -43%; top: 50%; margin-top: -29px !important; background-size: 37% !important; } .top-text-content { padding: 40px 15px 40px 15px !important; } .retail-shopping-content .retail-shopping-txt h3 { display: inline-block; font-size: 18px; } .retail-shopping-content .retail-shopping-txt { line-height: 22px !important; } .retail-shopping-content ul li .retail-shopping-main .top .left { width: 340px; display: table; height: 115px; margin-right: 10px; } .retail-shopping-content ul li .retail-shopping-main { padding: 7px 15px; } .retail-shopping-content ul li .retail-shopping-main .top .right { font-size: 60px; } .retail-shopping-content ul li .retail-shopping-main .bottom-mobile { margin-top: -20px; } .english-edition .retail-shopping-content ul li .retail-shopping-main .bottom-mobile { margin-top: 5px; } } @media screen and (max-width: 375px) { .english-edition .retail-shopping-content .retail-shopping-kv .txt{ left: -55%; top: 50%; margin-top: -29px !important; background-size: 30% !important; } } @media screen and (max-width: 320px) { .retail-department-content .retail-department-kv .txt{ width: 247px; height: 84px; background: url('../img/retail_department/retail_department_kv_txt.png') no-repeat top center; position: absolute; left: -18%; top: 50% !important; margin-top: -15px !important; background-size: 50% !important; } .english-edition .retail-shopping-content .retail-shopping-kv .txt{ left: -72%; top: 50%; margin-top: -29px !important; background-size: 26% !important; } .english-edition .retail-shopping-content ul li .retail-shopping-main .top .right{ font-size: 52px; } }