﻿﻿
.top-banner  {background-position-x:center}
#s01 { background-repeat: no-repeat; height:360px; background-color:#fff;}
#textlogo {width:150px; height:48px;}
#s02 {background-repeat: no-repeat; height:360px; background-color:#45bfde;}
#s02_1 { background-repeat: no-repeat;}
#s03 {height:650px;}
#s04 {background-position: calc(55vw) bottom; background-size: auto; background-repeat: no-repeat; height:360px; background-color:#45bfde; position: relative;}
.flex-row {display: flex; align-items: center;}
#dc_3 {margin-top:-40px;}
#faq_img {margin-top:-77px;}
#BNA_img {margin-top:-63px;}
#s05 .title {padding: 40px 0 60px;}
.feature-box {
    padding: 20px;
    position: relative;   
    background-color:#fff;
    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    word-wrap: break-word;   
    background-clip: border-box;
    border: 1px solid #e4e5e7;
    border-radius: 0.375rem;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.feature-box p {font-size:14px; line-height:1.3; color: #6c757d;}
.feature-box:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    box-shadow: 0px 20px 50px rgba(83, 88, 93, .15) !important;
}
.figure {position: relative; margin-top: -60px; width: 90px; background-color : #e4e5e7;}

#s06 {height:570px; background-image: url(../images/pattan.png); border-bottom:1px solid #ccc; border-top:1px solid #ccc; }
#s08 {background-position: calc(50% + 167px) center; height:443px; border-bottom:1px solid #fff; background-color:#95eefa; background-repeat:no-repeat; }
#icon_wb {margin-top:20px;}

.store-list .p-2 {font-size: 15px;}
.store-list img {border: 1px solid #000000;}

@media (max-width: 1199px) {
    #s2_slogan {max-width: calc(40vw);}
}

@media (min-width: 992px) {
    #s01 p {font-size:20px;}
    #BNA_img {margin-left: calc(-5vw);}
}

@media (max-width: 991px) {
    #s01 p {font-size:17px;}
    #faq_img {margin-left: calc(-10vw);}
    #BNA_img {margin-left: calc(-20vw);}
}

@media (max-width: 767px) {
    .top-banner  {height:525px;}
    #s01 {height:460px; background-position-x: 50% !important;}
    #logo_puretol {max-width:calc(55vw);}
    #faq_img {margin-left: calc(-20vw);}
    .counter {font-size: 1.7rem;}
    #s2_slogan {max-width: calc(45vw);}
    #icon_wb {max-width:calc(35vw);}
}

@media (min-width: 576px) {    
    #s04 p {text-align:right;}    
}

@media (min-width: 576px) and (max-width: 767px) {    
    #s01 img {max-width:calc(47vw);}
    #BNA_img {margin-left: calc(-25vw);}
}

@media (max-width: 575px) { 
    #logo_puretol {max-width: calc(75vw);}
    #s01 p {font-size:15px;}
    #s2_slogan {max-width: calc(55vw);}
    #s04 {height: calc(480px - 5vw); background-position-x: center; background-size: 85% auto;}
    #s04 .row {align-content: space-between;}
    #s04 p {text-align:center; padding-top:50px; margin-top: calc(-2vw);}
    #s04 .counter {font-size: 2.2rem;}
    #s04  .col-sm-7 {text-align: center;}
    #dc_3 {width: calc(84vw); margin-top:calc(-22vw); margin-right:auto; margin-bottom:0; margin-left:auto;}
    #s06 {height: 500px;}
    #s07 {padding:30px 0 0;}
    #BNA_img {margin-left: auto; margin-right:auto; max-width:calc(60vw);margin-top:0;}
    #s08 {background-position-x: center; background-size: auto 100%;}
    #s08 a {margin-left: calc(2vw);}
    #icon_wb {margin-top:40px;}
}

@media (max-width: 538px) {
    #faq_img {margin-left: calc(-30vw);}
    #s03 {height:calc(133vw);}
}

@media (max-width: 461px) {
    #s01 {background-size: auto;}
    #s02 {background-size: auto; }
    #s02_1 {background-size: auto; }
}

@media (max-width: 460px) {
    .top-banner { height: 480px; background-size: auto 100%;}
    #logo_puretol {max-width: calc(55vw); padding-top: 0 !important; margin-top: -50px;}
    #s01 {background-size: 94% auto;}
    #s02 {background-size: 95% auto; }
    #s02_1 {background-size: 100% auto; }
    #s04 {height: 360px;}
    #s04 p { margin-top: 0;}
   .store-list .p-2 { width: calc(33vw - 20px);}  
 } 