div#sc-mobile-app { background: #f6f6f6; font-size: 14px; line-height: 1.5; color: #333333; } #sc-mobile-app img { vertical-align: bottom; } #sc-mobile-app h1, #sc-mobile-app h2, #sc-mobile-app h4 { font-weight: normal; } #sc-mobile-app ul, #sc-mobile-app ol { margin: 0; padding: 0; } #sc-mobile-app ul li, #sc-mobile-app ol li { list-style: none; } #sc-mobile-app p { margin: 0 0 10px; } #sc-mobile-app .sc-mobile-app-container { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; } #sc-mobile-app header { padding: 10px 0; background: #0c2b97; } #sc-mobile-app .sc-mobile-app-hero { position: relative; margin: 30px 0; } #sc-mobile-app .sc-mobile-app-hero img.sc-mobile-app-bg { width: 100%; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 20px; background: rgba(0,0,0,.7); color: #fff; box-sizing: border-box; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge img { float: left; margin: 0 20px 0 0; width: 80px; height: auto; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge h1 { margin: 15px 0 5px; font-size: 26px; line-height: 1; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge p { margin: 0; } #sc-mobile-app #main { float: left; width: 68%; margin: 0 0 40px; padding: 20px; background: #fff; box-sizing: border-box; } #sc-mobile-app nav { float: right; width: 30%; margin: 0 0 40px; padding: 20px; background: #fff; box-sizing: border-box; } #sc-mobile-app hr { width: 80%; height: 1px; margin: 40px auto; background: #ddd; border: none; } #sc-mobile-app #main h2 { margin: 0 0 20px; font-size: 24px; } #sc-mobile-app #main h4 { margin: 0 0 10px; font-size: 24px; } #sc-mobile-app .sc-mobile-app-info ul li { margin: 0 0 40px; } #sc-mobile-app .sc-mobile-app-info ul li > p { width: 11.5625%; margin-top: 0.5em; margin-left: 1.5625%; margin-right: 3.125%; float: left; } #sc-mobile-app .sc-mobile-app-info ul li img { width: 100%; } #sc-mobile-app .sc-mobile-app-info ul li .sc-mobile-app-info-txt { display: inline-block; width: 83.75%; word-wrap: break-word; } #sc-mobile-app .sc-mobile-app-cap ul li { float: left; width: 48%; } #sc-mobile-app .sc-mobile-app-cap ul li + li { float: right; } #sc-mobile-app .sc-mobile-app-cap ul li img { width: 100%; } #sc-mobile-app .sc-mobile-app-cap > p { text-align: right; font-size: 12px; clear: both; } #sc-mobile-app nav h2 { margin: 0 0 10px; font-size: 20px; } #sc-mobile-app .sc-mobile-app-howto.sc-mobile-app-sp, #sc-mobile-app .sc-mobile-app-howto.sc-mobile-app-sp + hr { display: none; } #sc-mobile-app .sc-mobile-app-howto ol > li { margin: 0 0 10px; } #sc-mobile-app .sc-mobile-app-howto ul li { float: left; width: 46%; } #sc-mobile-app .sc-mobile-app-howto ul li + li { float: right; } #sc-mobile-app .sc-mobile-app-howto ul li img { width: 100%; margin: 10px 0 0; } #sc-mobile-app .sc-mobile-app-os.sc-mobile-app-sp, #sc-mobile-app .sc-mobile-app-os.sc-mobile-app-sp + hr { display: none; } #sc-mobile-app .sc-mobile-app-os ul li{ margin: 0 0 5px; } #sc-mobile-app .sc-mobile-app-os ul li:first-child { padding-left: 4.2em; text-indent: -4.2em; } #sc-mobile-app .sc-mobile-app-os ul li:first-child span { /*display: inline-block;*/ width: 4.2em; text-indent: 0; } #sc-mobile-app .sc-mobile-app-os ul li:nth-child(2) { padding-left: 2.5em; text-indent: -2.5em; } #sc-mobile-app .sc-mobile-app-os ul li:nth-child(2) span { /*display: inline-block;*/ width: 2.5em; text-indent: 0; } #sc-mobile-app .sc-mobile-app-phone > p{ margin-top: 30px; } #sc-mobile-app .sc-mobile-app-phone ul li:first-letter { margin: 0 0 5px; padding: 0 0 0 .8em; background: url("../../img/sc/ico_circle.gif") no-repeat left 50%; } #sc-mobile-app .sc-mobile-app-phone ul li { padding-left:.8em; text-indent: -.8em; } #sc-mobile-app footer { padding: 10px 0; background: #333; color: #fff; font-size: 12px; text-align: center; } #sc-mobile-app .sc-mobile-app-container:before, #sc-mobile-app .sc-mobile-app-container:after, #sc-mobile-app .sc-mobile-app-hero:before, #sc-mobile-app .sc-mobile-app-hero:after, #sc-mobile-app #main:before, #sc-mobile-app #main:after, #sc-mobile-app .sc-mobile-app-howto ul:before, #sc-mobile-app .sc-mobile-app-howto ul:after, #sc-mobile-app .clearfix:before, #sc-mobile-app .clearfix:after { content: " "; display: table; } #sc-mobile-app .sc-mobile-app-container:after, #sc-mobile-app .sc-mobile-app-hero:after, #sc-mobile-app #main:after, #sc-mobile-app .sc-mobile-app-howto ul:after, #sc-mobile-app .clearfix:after { clear: both; } #sc-mobile-app .sc-mobile-app-container, #sc-mobile-app .sc-mobile-app-hero, #sc-mobile-app #main, #sc-mobile-app .sc-mobile-app-howto ul, #sc-mobile-app .clearfix { *zoom: 1; } @media only screen and (max-width: 736px) { #sc-mobile-app header img { width: 80px; } #sc-mobile-app .sc-mobile-app-hero { position: static; margin: 20px 0; } #sc-mobile-app .sc-mobile-app-hero img.sc-mobile-app-bg { width: 100%; margin: 0 0 20px; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge { position: static; padding: 0; background: none; color: #000; text-align: center; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge img { float: none; margin: 0; } #sc-mobile-app .sc-mobile-app-hero .sc-mobile-app-badge h1 { margin: 0; padding: 10px 0 0; font-size: 24px; line-height: 1.5; } #sc-mobile-app #main { float: none; width: 100%; margin: 0 0 20px; } #sc-mobile-app nav { float: none; width: 100%; margin: 0 0 20px; } #sc-mobile-app #main h4 { margin: 0; font-size: 24px; } #sc-mobile-app .sc-mobile-app-info ul li > p { width: 8.5625%; } #sc-mobile-app .sc-mobile-app-cap { /*display: none;*/ } #sc-mobile-app .sc-mobile-app-howto.sc-mobile-app-pc, #sc-mobile-app .sc-mobile-app-howto.sc-mobile-app-pc + hr { display: none; } #sc-mobile-app .sc-mobile-app-howto.sc-mobile-app-sp, #sc-mobile-app .sc-mobile-app-howto.sc-mobile-app-sp + hr { display: block; } #sc-mobile-app .sc-mobile-app-howto ul li { float: left; width: auto; } #sc-mobile-app .sc-mobile-app-howto ul li img { width: 120px; margin: 10px 0 0; } #sc-mobile-app .sc-mobile-app-howto ul li img.sc-mobile-app-qr { display: none; } #sc-mobile-app .sc-mobile-app-howto ul li + li { float: left; margin-left: 5%; } #sc-mobile-app .sc-mobile-app-os.sc-mobile-app-pc, #sc-mobile-app .sc-mobile-app-os.sc-mobile-app-pc + hr { display: none; } #sc-mobile-app .sc-mobile-app-os.sc-mobile-app-sp, #sc-mobile-app .sc-mobile-app-os.sc-mobile-app-sp + hr { display: block; } } .image-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .image-gallery > li { flex-basis: 40%; flex-grow: 1; } .image-gallery li img { object-fit: cover; width: 100%; height: 100%; vertical-align: middle; border-radius: 5px; } .sc-mobile-app-badge img{ background-size: contain; box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); border-radius: 20%; }