.flex-row {display: flex; align-items: center;}

/**	svg **/
#Demo_group {width:80%; margin:0 auto; padding-top:calc(5vh); padding-bottom: calc(5vh); }
#Hand, #LED, #Arr_R, #Arr_L {opacity:0;}
#Demo_group .cls-1 {fill: #f2ccae;}
#Demo_group .cls-2 {fill: #d7ae93;}
#Demo_group .cls-16, #Demo_group .cls-3 {fill: #fff;}
#Demo_group .cls-4 {fill: #e1baa0;}
#Demo_group .cls-5 {fill: #9abfd6;}
#Demo_group .cls-6 {fill: #305971;}
#Demo_group .cls-12, #Demo_group .cls-7 {fill: #fbfbfb;}
#Demo_group .cls-7 {stroke: #2d2d2d;}
#Demo_group .cls-7, #Demo_group .cls-9 {stroke-miterlimit: 10;}
#Demo_group .cls-8 {fill: #222323;}
#Demo_group .cls-9 {fill: none;stroke: #e4e3e3;stroke-width: 1.43px;}
#Demo_group .cls-10 {fill: #a9a9a8;}
#Demo_group .cls-11 {fill: #38596c;}
#Demo_group .cls-13 {fill: #3897d4;}
#Demo_group .cls-14 {fill: #91c53f;}
#Demo_group .cls-15 {fill: #efea3c;}
#Demo_group .cls-16 {fill-rule: evenodd;}
#Demo_group .cls-17 {fill: #d13535;}
#Demo_group .cls-18, #Demo_group .cls-19, #Demo_group .cls-20 {fill: #8e8e8e;}
#Demo_group .cls-18 {font-size: 12px;}
#Demo_group .cls-21 {fill: #1e457c;}
#Demo_group .cls-22{fill:#3695d3;}
#Demo_group .cls-23{fill:#90c43f;}
#Demo_group .cls-24{fill:#eee93a;}
#Demo_group .cls-25{fill-rule:evenodd;}
#Demo_group .cls-26{stroke:#e5e144;}
#Demo_group .cls-27{fill:#eac3ac;}
#Demo_group .cls-28{fill:#f6d0b5;}
#Demo_group .cls-29{opacity:0.4;fill:url(#linear-gradient);}
#Demo_group .cls-29,.cls-30{mix-blend-mode:screen;}
#Demo_group .cls-30{fill:#df8e92;opacity:0.7;}
#Demo_group .cls-31{fill:#da7b59;}
#Demo_group .cls-32{fill:#d97a59;}
#Demo_group .cls-33{fill:#99bed5;}
#Demo_group .cls-34{fill:#2e5971;}

.top-banner { background-color:#fff; background-size:auto; background-position: 50% 0; background-repeat:no-repeat;}
.top-banner .wrap {display:flex; height: 100%; align-items: flex-end; justify-content: center;}
#LR_logo {position: absolute; z-index:1;}
#icon_18hrs { position: absolute; z-index:1;}
#icon_battery { position: absolute; z-index:1;}
#type_icon { position: absolute; z-index:5;}

#s1 {background-color:#f9f9f9;border-top: 1px solid #ececec; border-bottom: 1px solid #ececec;}
#s2, #s3 {display:flex; padding-top: 20px; padding-bottom: 20px;}
#s2 .card-deck .card { margin-right: 0; margin-left: 0; border-radius:0; }
#s2 img {padding-top:0.7rem;}
#s2 .card-body {padding-top:0;}
#s3 .card-columns {column-gap: 0.5rem;}
#s3 .card-columns .card {display: inline-block; border: 0;}
#s3 .card-columns .card-body {min-height: 75px;}   
#s3 .card-body {padding-top:5px;}
#s4 {background-color:#214c7b;}
#s6  {background-color:#e8e8e8; display:block;}
#s6 .table {background-color:#fff;}
#s6 .table-bordered td, #s6 .table-bordered th {border:2px solid #505050;}
#s8 {background-color:#d6d6d6;}
#s9 dt { margin-right:20px; line-height: 1.2; padding-bottom: 6px;}
#s10 {background-repeat: no-repeat; background-size: auto 100%;}
#s10 .list-group-item { background-color:transparent; border:0; border-bottom: 1px solid #fff; padding-left:5px;}
#s10 .list-group-item:last-child { border-bottom: 0;}
#s10 ul { color:#fff; }
#s12  {background-color:#21252e;}
#s13 {background-color:#d5d5d5;}
#s13 .row { margin-left:10px; margin-right:10px;}
#s13 img { cursor: pointer}
#title01 {line-height: 48px; padding-top: 20px;}
.text-blue {color:#1e457c;}
.text-orange {color:#e47f00;}

.bg-win {background-size:auto 90%; background-position:1% center; background-repeat:no-repeat; background-image:url(../images/icon_win.png);}
.carousel {animation-name: carousel; animation-iteration-count: infinite; animation-duration: 3s;}

@keyframes beatHeart {
    0%,100%,40% {
        transform: scale(1)
    }
    25%,60% {
        transform: scale(1.05)
    }
}

@keyframes carousel {
    0% {transform: translate(0%,0%) scale(1); opacity:1; }
    4% {transform: translate(0%,0%) scale(1.05);}
    5% {transform: translate(-60px,20px) scale(0.55);}
    10% {transform: translate(-70px,30px) scale(0.5); opacity:0;}
    40% {transform: translate(80px,0%) scale(0.8); opacity:0}
    45% {transform: translate(0%,0%) scale(1); opacity:1}
}


/**	response **/
        @media (min-width: 1600px) {
}

@media (min-width: 1458px) {
    #LR_logo {left: calc(50vw - 610px);}
    #icon_device, #icon_device2 {margin-right: -120px;}
    #s1_1 {margin-right: -64px;}
}

@media (min-width: 772px) and (max-width:1458px) {     
     #LR_logo {left: calc(100vw / 1458 * 120);}
     #icon_device  {margin-right: calc(0px - (100vw / 1458) * 64 * 2.3);}
     #icon_device2  {margin-right: calc(0px - (100vw / 1458) * 64 * 1.3);}
     #s1_1 {margin-right: calc(0px - (100vw / 1458) * 64 * 1.3);}
}

@media (min-width: 772px) and (max-width:1458px) and (max-height: 767px) {
    .top-banner { height: calc(100vw / 1458 * 772 - 100px) !important; background-size: auto 100% !important;}
    #LR_logo {top: calc((100vw / 1485 * 772 - 100px) / 772 * 35) !important; left: calc((100vw / 1485 * 772 - 100px) / 772 * 300); width:calc((100vw / 1485 * 772 - 100px) / 772 * 300) !important;}
    #icon_18hrs { left: calc(50vw - (100vw / 1485 * 772 - 100px) / 772 * 280) !important; top:calc((100vw / 1485 * 772 - 100px) / 772 * 400) !important; width:calc((100vw / 1485 * 772 - 100px) / 772 * 165) !important;}
    #icon_battery { left: calc(50vw + (100vw / 1485 * 772 - 100px) / 772 * 172) !important; top:calc((100vw / 1485 * 772 - 100px) / 772 * 308) !important; width:calc((100vw / 1485 * 772 - 100px) / 772 * 176) !important;}
    #type_icon { left: calc(50vw - (100vw / 1485 * 772 - 100px) / 772 * 178) !important; top:calc((100vw / 1485 * 772 - 100px) / 772 * 300) !important; width:calc((100vw / 1485 * 772 - 100px) / 772 * 382) !important;}
    #icon_device, #icon_device2 { width:calc((100vw / 1485 * 772 - 100px) / 772 * 175) !important; margin-bottom:40px !important;}
    #icon_device { margin-right: calc(0px - (100vw / 1485 * 772 - 100px) / 772 * 64 * 2.0) !important;}
    #icon_device2 { margin-right: calc(0px - (100vw / 1485 * 772 - 100px) / 772 * 64) !important; }
    #s1_1 {margin-right: calc(0px - (100vw / 1485 * 772 - 100px) / 772 * 64) !important; margin-top: -40px;}
    #s1_1 .h4 {font-size: 1.2rem;}
}

@media (min-width: 992px) and (max-width:1599px) {
}

@media (min-width: 1200px) {
    #title01, #title02 {font-size: 36px;}
    #s2 .card-deck .card { border: 0; flex: 1 0 0% !important;}    
}

@media (max-width:1199px) {    

}

@media (min-width: 992px) and (max-width:1199px) {
    .card-text {font-size: 1rem;}
}

@media (min-width: 992px) {
    #s1 {font-size:1.3rem; font-weight:500;}
    #icon_Q {max-width: 140px;}
    #s4, #s5, #s6, #s7, #s8, #s9, #s11, #s12 { padding-top:60px; padding-bottom:50px;}
    #s10 .align {padding-top: 45px; padding-bottom: 10px;}
    #s10 ul {padding: 20px 0; margin: 0 30px 0 20px; font-size: 15px;}
}

@media (max-width: 991px) {
    #LR_Alvital {max-width:130px; padding-top: 2rem; padding-bottom:0.5rem;}
    #icon_Q {max-width: 110px;}
    #s1_2 .h2, #s5 .h2 {font-size:1.5rem;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .card-text {font-size: 13px;}
    #s4, #s5, #s6, #s7, #s8, #s9, #s11, #s12 { padding-top:50px; padding-bottom:40px;}
    #s10 .align {padding-top: 50px; padding-bottom: 5px;}
    #s10 ul { margin: 0 20px 0 10px; font-size: 14px; padding: 20px 0; }
    .bg-win {background-size: 35px auto; background-position-y: 4px;}
}

@media (min-width: 772px) {
    .top-banner { height: 772px;}
    #LR_logo {top:35px; width:300px;}
    #icon_18hrs { left: calc(50vw - 280px); top: calc(772px - 380px);}
    #icon_battery { left: calc(50vw + 172px); top: calc(772px - 478px);}
    #type_icon { left: calc(50vw - 178px); top: calc(772px - 470px);}
    #icon_device, #icon_device2 {margin-bottom:25px;}
    #icon_device { transform: translate(-10px,0) scale(0.9); }
    #icon_device2 {margin-bottom:20px; transform: translate(-20px,0) scale(0.96);}
}

@media (max-width: 771px) {
    .top-banner { height: calc(100vw); background-size: auto 100%;}     
     #LR_logo {top: calc((100vw / 772) * 35); left: calc((100vw / 772) * 55); width:calc((100vw / 772) * 300); min-width: calc(38vw);}
     #icon_18hrs { left: calc(50vw - (100vw / 771) * 280); top:calc(100vw - (100vw / 771) * 380); width:calc((100vw / 771) * 165);}
    #icon_battery { left: calc(50vw + (100vw / 771) * 172); top:calc(100vw - (100vw / 771) * 478); width:calc((100vw / 771) * 176);}
    #type_icon { left: calc(50vw - (100vw / 771) * 178);  top:calc(100vw - (100vw / 771) * 470); width:calc((100vw / 771) * 382);}
    #icon_device, #icon_device2 { margin-bottom:calc((100vw / 771) * 25); width:calc((100vw / 771) * 175); }
    #icon_device { margin-right: calc(0px - (100vw / 771) * 64 * 2.0); transform: translate(-5px,0) scale(0.9);}
    #icon_device2 { margin-right: calc(0px - (100vw / 771) * 64); transform: translate(-10px,0) scale(0.96);}
    #s1_1 {margin-right: calc(0px - (100vw / 771) * 64);}
    #s1_1 .h4 {font-size:1.2rem;}
}

@media (min-width: 768px) {
    #s2 .card-deck .card {flex: 1 0 30%;}
    #s3 .card-columns { column-count: 4;}
    .win {display:none;}    
    #s10 .align {text-align:right;}
    #s10 p { color:#fff; margin-right:150px; font-size:22px; font-weight:500; margin-top:-25px;}
    #s10 img { margin-right: 50px;}
}


@media (max-width: 767px) {
    .card-text {font-size: 14px;}
     #s4, #s5, #s6, #s7, #s8, #s9, #s11, #s12 { padding-top:40px; padding-bottom:30px;}
    #s3 .card-columns {column-count: 2;}
     #s10 .align {padding-top: 20px; padding-bottom: 0;}
     .table {font-size:13px;}
    .table td, .table th { padding: 8px;}
     .bg-win {background-size:15px auto; background-position:8px 8px; background-image:url(../images/icon_win_dot.png);}
     .win {margin-top:-10px;}
     .win .img-fluid {max-width:20px;}
     #s9 dl {width: 50%; float: left; margin-bottom:5px;}
     #s9 dt {margin-left:15px; margin-right:15px;}
     #s10 { background-size: auto 400px; background-position-y:top;}
     #s10 .align {text-align:center;}  
     #s10 ul { margin: 0 20px; font-size: 14px; padding: 10px 0;}
     #s10 p { color:#fff; font-size:20px; font-weight:500; margin-top:-25px;}
}

@media (min-width: 576px) and (max-width:767px) {
    #s2 .card-deck .card {flex: 1 0 30%;}  

    #s9 dt {font-size:16px; text-indent:-18px;}
    #s9 span.space {display:none;}
}

@media (min-width: 576px) {

}

@media (max-width: 575px) {
    .h2, h2 {font-size: 1.7rem;}
    #s2, #s3 {padding-top:0;}
    #s3 {padding-bottom:0;}
    #s2 .card-deck .card {flex: 1 0 0%; border: 0; border-bottom: 1px solid rgba(0,0,0,.125); margin-bottom: 0;}
    #s2 .card-deck .card-text {width: calc(80vw);}    
    #Demo_group {width:90%; padding-top:calc(3vh); padding-bottom: calc(3vh);}
    .bg-win { background-size: 12px auto; background-position: 4px 4px;}
    .table {font-size:12px;}
    .table td, .table th { padding: 5px;}
    #s9 dt {font-size:14px; text-indent:-16px;}
    #s9 span.space {display:none;}   
}


@media (max-width: 460px) {
    .h2, h2 {font-size: 1.4rem !important;}
    .h4, h4 {font-size: 1.2rem !important;}
    .card-text {font-size: 13px;}
    .top-banner {background-position: 100% 0;}
    #s1_1 {margin-right: -0.5rem;}
    #s1_1 .h4 {font-size: 1rem !important;}
    #icon_device, #icon_device2 {margin-bottom: calc((100vw / 771)); width: calc((100vw / 771) * 195);}
    #icon_device {margin-right: calc(0px - (100vw / 771) * 32 * 4.0);}
    #icon_device2 {margin-right: calc(0px - (100vw / 771) * 32);}
    #s2 .card-deck .card-text {width: calc(60vw); margin-left: calc(10vw); margin-right: calc(10vw);}    
    #s2 img {max-width:calc(30vw);}
    #s3 img { padding: .25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: .25rem;}

    #Demo_group {width:95%; padding-top:calc(2vh); padding-bottom: calc(2vh);}   
    #text_on {transform: scale(1.3) translateX(calc(100% - 104%)); transform-origin: calc(50vw) calc(3vw);}
    #text_off {transform: scale(1.3) translateX(calc(100% - 104%)); transform-origin: calc(50vw) calc(7.5vw);}
    #gp_auto {transform: translateX(calc(100% - 105%));}
    .table td, .table th { padding: 3px;}
    #s7 img { max-width: calc(70vw);}
    #s9 dl {width: 100%;}
    #s9 dt {margin-left:10px; margin-right:10px;}
    #easy img { max-width: 120px;}
    #s10 img { max-width: 120px;}
    .bg-win { background-position: 2px 2px;}
    #s10 ul {margin: 0 15px; font-size: 13px; padding: 15px 0;}
    #s10 .list-group-item {border:0; padding: .3rem .25rem;}
    #s10 p {font-size: 18px; color:#000; margin-top: -10px;}     
}