@media(min-width:0px) and (max-width:575px){
.container{ max-width:100%;}

.common-title-hp h2 { font-size: 22px; line-height: 35px; letter-spacing: 3.3px; }
.common-title-hp p { font-size: 14px; line-height: 20px; letter-spacing:2px; padding-top:0px; }

/*--------------- HEADER_START --------------*/
#header{ padding:0px; }
#header:after{ height:82px; }
.header-in-hp{ padding:0 15px; height:70px; justify-content: space-between; }
.logo-hp{ width: 145px; padding:0px; }
.logo-hp img{ width:100%; height:auto; margin:8px 0 0 -18px; }
.mobile-menu-icon-hp{ display:block; margin-top:0px; margin-right:0; }

.navbar{ position:static; }
.navigation { padding: 18px; position: fixed; right: -260px; width: 260px; background-color: #fff; top: 0px; clear: both; height:100%; overflow:scroll; display:block; }
.navigation.open{ right:0; }
.navbar-nav{ padding-top:40px; }
.navbar-nav .nav-link{ padding: 6px 0 6px 0px !important; color: #424142 !important;  text-align: left; margin-left:70px; position:relative; }
.navbar-nav .nav-link:hover{ color: #424142 !important; }
.navbar-nav .nav-link:after{ content: ''; width: 11px; height: 2px; background: #f7ba8a; left: -22px; top: calc(50% - 1px); }
.navbar-nav .dropdown-item{ text-align:center; }
.navbar-collapse{ display:block !important; }
.navbar-nav .nav-item{ font-size:14px; }
.navbar-nav .dropdown-item{ font-size:14px; }
.menu-toggle-btn.open span{ background:#f0883f; }
.navigation .trial-main-hp { padding-left: 0; position: absolute; left: 0; bottom: 0; width: 100%; }
.navigation .trial-btn-hp{ width: 100%; border-radius:0; text-align:center; }
.logo-for-mobile-hp{ display:block; }
.logo-for-mobile-hp img{ width:90px; }
.menu-toggle-btn.open{ position:fixed; padding: 0 14px; }
/*--------------- HEADER_END --------------*/

/*--------------- CONTAIN_START --------------*/
#contain{ margin:0px; padding:0px 0 0 0;}
.banner-middle-hp{ padding:160px 0px 0 0px; }
.banner-left-hp{ width:auto; max-width:295px; margin:auto; float:none; }
.banner-right-hp{ width:auto; max-width:295px; text-align:center; float:none; margin:16px auto 0; padding-bottom: 35px; }
.banner-left-hp h1 { font-size: 24px; line-height: 30px; letter-spacing: 1.8px; }
.banner-left-hp p { padding: 10px 0 15px 10px; font-size: 16px; line-height: 25px; letter-spacing: 1.4px; }
.banner-left-hp p span { font-size: 20px; line-height: 25px; letter-spacing: 1.8px; }
.banner-btn-hp .trial-btn-hp{ font-size:18px; padding:5px 20px 5px 46px; }
.banner-right-hp img{ margin:0; width:100%; }

.banner-block-hp{ position:relative; height:auto; }
.banner-block-hp:after{ content:''; position:absolute; bottom:0; left:0; background:url(../images/banner_shadow.png) repeat-x bottom center; height:100%; width:100%;  }
.banner-block-in-hp { position: relative; z-index: 1; }

.grasis-block-hp{ padding:63px 0; }
.grasis-middle-hp{ display:flex; flex-direction: column-reverse; text-align:center; padding:0 33px; }
.grasis-left-hp{ width:100%; padding-top:25px; }
.grasis-left-hp img{ width:100%; margin:0; }
.grasis-right-hp{ width:100%; padding:0 5px; }
.grasis-right-hp h2 { font-size: 18px; line-height: 35px; letter-spacing: 3px; }
.grasis-right-hp p { font-size: 13px; line-height: 32px; padding:10px 0 0 0; letter-spacing:1px; }
.grasis-right-hp p .sp-active { display: block; }
.reasons-block-hp{ padding:60px 0 20px 0; }
.reasons-title-hp h2{ font-size: 20px; line-height: 31px; letter-spacing: 3px; }
.reasons-title-hp h2 br.hide-mob-hp{ display:block; }
.reasons-middle-hp { padding: 40px 15px 0 15px; }
.reasons-box-hp{ padding: 30px 25px; border-radius: 10px; flex-direction: column-reverse; }
.reasons-img-hp{ width:100%; padding-top:20px; }
.reasons-info-hp{ width:100%; padding:0 !important; }
.reasons-point-hp{ font-size:15px; line-height:20px; }
.reasons-point-hp img{ height:26px; margin:-4px 0 0 7px; }
.reasons-info-hp h3 { font-size: 18px; line-height: 25px; letter-spacing: 0.9px; padding-top: 5px; }
.reasons-info-hp p { font-size: 15px; line-height: 22px; letter-spacing: 0; }
.right-align-hp .reasons-info-hp{ text-align:left; }

.trial-block-hp{ padding:60px 0 50px 0; }
.trial-btn-big-hp{ min-width:285px; font-size:18px; line-height:20px; letter-spacing: 1.4px;  padding: 15px 45px; }
.trial-btn-big-hp img{ width:22px; right:18px;  }
.trial-details-hp{ padding:30px 20px 0 20px; font-size:15px; line-height:22px;  letter-spacing:1.5px;  }
.trial-details-hp .sp-non-active{ display: none;  }

.plan-block-hp{ padding:60px 0;  }
.plan-middle-hp { padding: 18px 0 0 0; }
.plan-left-pp{ width:160px; box-shadow: 0 0 6px rgb(0,0,0,0.25);  position: relative; }
.plan-right-pp{ width:calc(100% - 160px); overflow: scroll; }
.plan-right-in-pp{ width:725px; }
.plan-left-title-pp{ height: 40px; font-size: 12px; letter-spacing: 0.2px; }
.plan-top-title-pp{ font-size: 14px; line-height: 20px; }

.flow-block-hp{ padding:60px 0;  }
.title-setting-hp{ padding:20px 0px 0 0; }
.title-setting-hp img{ width:158px; }
.flow-middle-hp{ padding:15px 15px 0 15px; }
.flow-box-hp{ width:100%; margin:0 0 75px 0; min-height: inherit; }
.flow-step-hp{ font-size: 14px; line-height: 24px; padding: 9px 13px 7px 15px; border-radius: 6px; letter-spacing: 0.7px; }
.flow-step-hp span { font-size: 22px; padding-left: 4px; letter-spacing: 1px; }
.flow-img-hp {  padding: 22px 0 0 0; }
.flow-name-hp { font-size: 18px; line-height: 25px; letter-spacing: 1px; padding: 20px 0 0 0; }
.flow-box-hp:after{ width: 33px; height: 81px; right: calc(50% - 15px); top: auto; transform: rotate(90deg); bottom: -80px; }
.flow-box-hp:nth-child(3n){ margin-bottom:0; }
/*--------------- CONTAIN_END --------------*/

/*--------------- FOOTER_START --------------*/
.footer-top-hp{ padding:35px 0; }
.footer-logo-hp img{ max-width:142px; }
.footer-links-hp { padding-top: 20px; }
.footer-links-hp ul li { font-size: 14px; line-height: 26px; letter-spacing: 0.6px; padding: 0 20px; }
.copyright-hp { letter-spacing: 0.5px; font-size: 11px; line-height: 14px; padding: 8px 0; }
/*--------------- FOOTER_END --------------*/
}

@media(min-width:576px) and (max-width:767px){
.container{ max-width:100%;}

.common-title-hp h2 { font-size: 22px; line-height: 35px; letter-spacing: 3.3px; }
.common-title-hp p { font-size: 14px; line-height: 20px; letter-spacing:2px; padding-top:0px; }

/*--------------- HEADER_START --------------*/
#header{ padding:0px; }
#header:after{ height:82px; }
.header-in-hp{ padding:0 15px; height:70px; justify-content: space-between; }
.logo-hp{ width: 145px; padding:0px; }
.logo-hp img{ width:100%; height:auto; margin:8px 0 0 -18px; }
.mobile-menu-icon-hp{ display:block; margin-top:0px; margin-right:0; }

.navbar{ position:static; }
.navigation { padding: 18px; position: fixed; right: -260px; width: 260px; background-color: #fff; top: 0px; clear: both; height:100%; overflow:scroll; display:block; }
.navigation.open{ right:0; }
.navbar-nav{ padding-top:40px; }
.navbar-nav .nav-link{ padding: 6px 0 6px 0px !important; color: #424142 !important;  text-align: left; margin-left:70px; position:relative; }
.navbar-nav .nav-link:hover{ color: #424142 !important; }
.navbar-nav .nav-link:after{ content: ''; width: 11px; height: 2px; background: #f7ba8a; left: -22px; top: calc(50% - 1px); }
.navbar-nav .dropdown-item{ text-align:center; }
.navbar-collapse{ display:block !important; }
.navbar-nav .nav-item{ font-size:14px; }
.navbar-nav .dropdown-item{ font-size:14px; }
.menu-toggle-btn.open span{ background:#f0883f; }
.navigation .trial-main-hp { padding-left: 0; position: absolute; left: 0; bottom: 0; width: 100%; }
.navigation .trial-btn-hp{ width: 100%; border-radius:0; text-align:center; }
.logo-for-mobile-hp{ display:block; }
.logo-for-mobile-hp img{ width:90px; }
.menu-toggle-btn.open{ position:fixed; padding: 0 14px; }
/*--------------- HEADER_END --------------*/

/*--------------- CONTAIN_START --------------*/
#contain{ margin:0px; padding:0px 0 0 0;}
.banner-middle-hp{ padding:160px 0px 0 0px; }
.banner-left-hp{ width:auto; max-width:295px; margin:auto; float:none; }
.banner-right-hp{ width:auto; max-width:295px; text-align:center; float:none; margin:16px auto 0; padding-bottom: 35px; }
.banner-left-hp h1 { font-size: 24px; line-height: 30px; letter-spacing: 1.8px; }
.banner-left-hp p { padding: 10px 0 15px 10px; font-size: 16px; line-height: 25px; letter-spacing: 1.4px; }
.banner-left-hp p span { font-size: 20px; line-height: 25px; letter-spacing: 1.8px; }
.banner-btn-hp .trial-btn-hp{ font-size:18px; padding:5px 20px 5px 46px; }
.banner-right-hp img{ margin:0; width:100%; }

.banner-block-hp{ position:relative; height:auto; }
.banner-block-hp:after{ content:''; position:absolute; bottom:0; left:0; background:url(../images/banner_shadow.png) repeat-x bottom center; height:100%; width:100%;  }
.banner-block-in-hp { position: relative; z-index: 1; }

.grasis-block-hp{ padding:63px 0; }
.grasis-middle-hp{ display:flex; flex-direction: column-reverse; text-align:center; padding:0 33px; }
.grasis-left-hp{ width:100%; padding-top:25px; }
.grasis-left-hp img{ width:100%; margin:0; }
.grasis-right-hp{ width:100%; padding:0 20px; }
.grasis-right-hp h2 { font-size: 20px; line-height: 35px; letter-spacing: 3px; }
.grasis-right-hp p { font-size: 20px; line-height: 32px; padding:10px 0 0 0; letter-spacing:1px; }

.reasons-block-hp{ padding:60px 0 20px 0; }
.reasons-title-hp h2{ font-size: 20px; line-height: 31px; letter-spacing: 3px; }
.reasons-title-hp h2 br.hide-mob-hp{ display:block; }
.reasons-middle-hp { padding: 40px 15px 0 15px; }
.reasons-box-hp{ padding: 30px 25px; border-radius: 10px; flex-direction: column-reverse; }
.reasons-img-hp{ width:100%; padding-top:20px; }
.reasons-info-hp{ width:100%; padding:0 !important; }
.reasons-point-hp{ font-size:15px; line-height:20px; }
.reasons-point-hp img{ height:26px; margin:-4px 0 0 7px; }
.reasons-info-hp h3 { font-size: 18px; line-height: 25px; letter-spacing: 0.9px; padding-top: 5px; }
.reasons-info-hp p { font-size: 15px; line-height: 22px; letter-spacing: 0; }
.right-align-hp .reasons-info-hp{ text-align:left; }

.trial-block-hp{ padding:60px 0 50px 0; }
.trial-btn-big-hp{ min-width:285px; font-size:18px; line-height:20px; letter-spacing: 1.4px;  padding: 15px 45px; }
.trial-btn-big-hp img{ width:22px; right:18px;  }
.trial-details-hp{ padding:30px 20px 0 20px; font-size:15px; line-height:22px;  letter-spacing:1.5px;  }

.plan-block-hp{ padding:60px 0;  }
.plan-middle-hp { padding: 18px 0 0 0; }
.plan-left-pp{ width:160px; box-shadow: 0 0 6px rgb(0,0,0,0.25);  position: relative; }
.plan-right-pp{ width:calc(100% - 160px); overflow: scroll; }
.plan-right-in-pp{ width:725px; }
.plan-left-title-pp{ height: 40px; font-size: 12px; letter-spacing: 0.2px; }
.plan-top-title-pp{ font-size: 14px; line-height: 20px; }

.flow-block-hp{ padding:60px 0;  }
.title-setting-hp{ padding:20px 0px 0 0; }
.title-setting-hp img{ width:158px; }
.flow-middle-hp{ padding:15px 15px 0 15px; }
.flow-box-hp{ width:100%; margin:0 0 75px 0; min-height: inherit; }
.flow-step-hp{ font-size: 14px; line-height: 24px; padding: 9px 13px 7px 15px; border-radius: 6px; letter-spacing: 0.7px; }
.flow-step-hp span { font-size: 22px; padding-left: 4px; letter-spacing: 1px; }
.flow-img-hp {  padding: 22px 0 0 0; }
.flow-name-hp { font-size: 18px; line-height: 25px; letter-spacing: 1px; padding: 20px 0 0 0; }
.flow-box-hp:after{ width: 33px; height: 81px; right: calc(50% - 15px); top: auto; transform: rotate(90deg); bottom: -80px; }
.flow-box-hp:nth-child(3n){ margin-bottom:0; }
/*--------------- CONTAIN_END --------------*/

/*--------------- FOOTER_START --------------*/
.footer-top-hp{ padding:35px 0; }
.footer-logo-hp img{ max-width:142px; }
.footer-links-hp { padding-top: 20px; }
.footer-links-hp ul li { font-size: 14px; line-height: 26px; letter-spacing: 0.6px; padding: 0 20px; }
.copyright-hp { letter-spacing: 0.5px; font-size: 11px; line-height: 14px; padding: 8px 0; }
/*--------------- FOOTER_END --------------*/
}

@media(min-width:768px) and (max-width:991px){
.container{ max-width:768px;}

.common-title-hp h2 { font-size: 22px; line-height: 35px; letter-spacing: 3.3px; }
.common-title-hp p { font-size: 14px; line-height: 20px; letter-spacing:2px; padding-top:0px; }

/*--------------- HEADER_START --------------*/
#header{ padding:0px; }
#header:after{ height:82px; }
.header-in-hp{ padding:0 15px; height:70px; justify-content: space-between; }
.logo-hp{ width: 145px; padding:0px; }
.logo-hp img{ width:100%; height:auto; margin:8px 0 0 -18px; }
.mobile-menu-icon-hp{ display:block; margin-top:0px; margin-right:0; }

.navbar{ position:static; }
.navigation { padding: 18px; position: fixed; right: -260px; width: 260px; background-color: #fff; top: 0px; clear: both; height:100%; overflow:scroll; display:block; }
.navigation.open{ right:0; }
.navbar-nav{ padding-top:40px; }
.navbar-nav .nav-link{ padding: 6px 0 6px 0px !important; color: #424142 !important;  text-align: left; margin-left:70px; position:relative; }
.navbar-nav .nav-link:hover{ color: #424142 !important; }
.navbar-nav .nav-link:after{ content: ''; width: 11px; height: 2px; background: #f7ba8a; left: -22px; top: calc(50% - 1px); }
.navbar-nav .dropdown-item{ text-align:center; }
.navbar-collapse{ display:block !important; }
.navbar-nav .nav-item{ font-size:14px; }
.navbar-nav .dropdown-item{ font-size:14px; }
.menu-toggle-btn.open span{ background:#f0883f; }
.navigation .trial-main-hp { padding-left: 0; position: absolute; left: 0; bottom: 0; width: 100%; }
.navigation .trial-btn-hp{ width: 100%; border-radius:0; text-align:center; }
.logo-for-mobile-hp{ display:block; }
.logo-for-mobile-hp img{ width:90px; }
.menu-toggle-btn.open{ position:fixed; padding: 0 14px; }
/*--------------- HEADER_END --------------*/

/*--------------- CONTAIN_START --------------*/
#contain{ margin:0px; padding:0px 0 0 0;}
.banner-middle-hp{ padding:160px 0px 0 0px; }

.banner-left-hp h1 { font-size: 34px;  line-height: 47px; letter-spacing: 1.8px; }
.banner-left-hp p { padding: 15px 0 20px 10px; font-size: 22px; line-height: 30px; letter-spacing: 1.4px; }
.banner-left-hp p span { font-size: 20px; line-height: 25px; letter-spacing: 1.8px; }
.banner-btn-hp .trial-btn-hp{ font-size: 20px; padding: 10px 20px 10px 46px; }
.banner-right-hp img{ margin: 0 0 0 -40px; width: 370px; }
.banner-block-hp{ position:relative; height:450px; }

.grasis-block-hp{ padding:63px 0; }
.grasis-left-hp{ width:400px; }
.grasis-left-hp img{ width:100%; margin:0; }
.grasis-right-hp{ width:calc(100% - 400px); } 
.grasis-right-hp h2 { font-size: 20px; line-height: 35px; letter-spacing: 3px; }
.grasis-right-hp p { font-size: 20px; line-height: 32px; padding:10px 0 0 0; letter-spacing:1px; }

.reasons-block-hp{ padding:60px 0 20px 0; }
.reasons-title-hp h2{ font-size: 20px; line-height: 31px; letter-spacing: 3px; }
.reasons-title-hp h2 br.hide-mob-hp{ display:block; }
.reasons-middle-hp { padding: 40px 15px 0 15px; }
.reasons-box-hp{ padding:30px; }
.reasons-point-hp{ font-size:15px; line-height:20px; }
.reasons-point-hp img{ height:26px; margin:-4px 0 0 7px; }
.reasons-info-hp h3 { font-size: 18px; line-height: 25px; letter-spacing: 0.9px; padding-top: 5px; }
.reasons-info-hp p { font-size: 15px; line-height: 22px; letter-spacing: 0; }


.trial-block-hp{ padding:60px 0 50px 0; }
.trial-btn-big-hp{ min-width:285px; font-size:18px; line-height:20px; letter-spacing: 1.4px;  padding: 15px 45px; }
.trial-btn-big-hp img{ width:22px; right:18px;  }
.trial-details-hp{ padding:30px 20px 0 20px; font-size:15px; line-height:22px;  letter-spacing:1.5px;  }

.plan-block-hp{ padding:60px 0;  }
.plan-middle-hp { padding: 18px 0 0 0; }
.plan-left-pp{ width:160px; box-shadow: 0 0 6px rgb(0,0,0,0.25);  position: relative; }
.plan-right-pp{ width:calc(100% - 160px); overflow: scroll; }
.plan-right-in-pp{ width:725px; }
.plan-left-title-pp{ height: 40px; font-size: 12px; letter-spacing: 0.2px; }
.plan-top-title-pp{ font-size: 14px; line-height: 20px; }

.flow-block-hp{ padding:60px 0;  }
.title-setting-hp{ padding:20px 0px 0 0; }
.title-setting-hp img{ width:158px; }
.flow-middle-hp{ padding:15px 15px 0 15px; }
.flow-box-hp{ width:calc(33.33% - 27px); margin:0 40px 0 0; min-height: 360px; }
.flow-step-hp{ font-size: 14px; line-height: 24px; padding: 9px 13px 7px 15px; border-radius: 6px; letter-spacing: 0.7px; }
.flow-step-hp span { font-size: 22px; padding-left: 4px; letter-spacing: 1px; }
.flow-img-hp {  padding: 22px 0 0 0; }
.flow-name-hp { font-size: 18px; line-height: 25px; letter-spacing: 1px; padding: 20px 0 0 0; }
.flow-box-hp:after{ width: 29px;    height: 80px; right: -36px; top: calc(50% - 40px); }
/*--------------- CONTAIN_END --------------*/

/*--------------- FOOTER_START --------------*/
.footer-top-hp{ padding:35px 0; }
.footer-logo-hp img{ max-width:142px; }
.footer-links-hp { padding-top: 20px; }
.footer-links-hp ul li { font-size: 14px; line-height: 26px; letter-spacing: 0.6px; padding: 0 20px; }
.copyright-hp { letter-spacing: 0.5px; font-size: 11px; line-height: 14px; padding: 8px 0; }
/*--------------- FOOTER_END --------------*/
}

@media(min-width:992px) and (max-width:1030px){
.container{ width:992px;}

/*--------------- HEADER_START --------------*/
.trial-btn-hp{ font-size:13px; }
.navbar-nav .nav-link{ padding:35px 15px !important; }
/*--------------- HEADER_END --------------*/

/*--------------- CONTAIN_START --------------*/
.notice-block-hp{ padding:100px 0; }
.notice-left-hp{ padding:0 15px; }
.banner-block-hp{ height:600px; }
.banner-left-hp h1 { font-size: 38px;  line-height: 55px; }
.banner-left-hp p{ font-size: 24px; line-height: 40px; }
.banner-left-hp p span { font-size: 32px; line-height: 40px; }
.banner-right-hp img{ width:500px; }
.grasis-left-hp img{ margin:0; }
.flow-name-hp{ font-size:20px; }
/*--------------- CONTAIN_END --------------*/

/*--------------- FOOTER_START --------------*/

/*--------------- FOOTER_END --------------*/
}


@media(min-width:992px) and (max-width:9999px){
.navigation{ display:block !important; }
.navbar-nav .dropdown:hover .dropdown-menu{ display:block; }
.navbar-nav .nav-item:last-child .nav-link:after{ display:none; }
}