:root {
    --bg-sp-m: #F0F7EE;
    --bg-sp-sm: #48aa45;
    --bg-sp-s: #F0F7EE;
    --bg-sp-s1: #f0f7ee;
    --bg-sp-r: #BD1C1C;
    --bg-sp-h: #FF5AC0;
    --bg-sp-w: #fff;
    --bg-sp-opacity: rgba(13,100,90,0.8);
    --bg-sp-gradient: linear-gradient(to right, var(--bg-sp-sm) 0%, var(--bg-sp-sm) 50%, transparent 100%);
    --cl-sp-m: #0D645A;
    --cl-sp-sm: #146158;
    --cl-sp-s: #48AA45;
    --cl-sp-h: #FF5AC0;
    --cl-sp-r: #BD1C1C;
    --cl-sp-w: #fff;
}

.bg-sp-m { background-color: var(--bg-sp-m); }
.bg-sp-sm { background-color: var(--bg-sp-sm) }
.bg-sp-s { background-color: var(--bg-sp-s); }
.bg-sp-s1 { background-color: var(--bg-sp-s1); }
.bg-sp-r { background-color: var(--bg-sp-r); }
.bg-sp-h { background-color:  var(--bg-sp-h); }
.bg-sp-w { background-color:  var(--bg-sp-w); }
.bg-sp-gradient { background: var(--bg-sp-gradient); }

.cl-sp-w { color: var(--cl-sp-w); }
.cl-sp-m { color: var(--cl-sp-m);}
.cl-sp-s { color: var(--cl-sp-s);}
.cl-sp-h { color: var(--cl-sp-h);}
.cl-sp-r { color: var(--cl-sp-r);}
.bg-line-bot { border-bottom: 1px dashed var(--cl-sp-m);}

.button-download .btn { padding: 5px 40px; font-size: 25px; font-weight: 700;}
.button-download .btn img { width: 36px; height: 36px; }

.header-salepage .logo img { max-height: 70px; max-width: 130px; }
.header-salepage .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; height: 60px; transition: all ease 0.4s;}
.header-salepage .navbar-nav>.nav-item>.nav-link { padding: 0 10px  }
.header-salepage .navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item.active .nav-link { color: var(--cl-sp-s); }
.header-salepage .header__inner .main-menu:first-of-type { padding-right: 5%; }
.header-salepage .header__inner .main-menu:last-of-type { padding-left: 5%; }
.header-salepage .navbar-nav .nav-item .nav-link { color: var(--cl-sp-w); }
.header-salepage .navbar-nav>.nav-item { padding-right: 10px; }

/*FooterProject*/

.footer-sp { font-size: 13px; line-height: 1.5; overflow: hidden; background: var(--bg-sp-m); position: relative; color:  var(--cl-sp-w);}
.footer-sp .footer-menu-container { display: flex; padding: 5px 0; justify-content: space-between; align-items: center;}
.footer-sp .footer-menu {margin-bottom: 0; list-style-type: none; margin: 0 -5px; }
.footer-sp .footer-menu-container .nav-item {display: inline-block; padding: 0 5px; }
.footer-sp .footer-menu-container .nav-item .nav-link {padding: 10px 8px; display: block;}
.footer-sp .footer-menu-container .icon {font-size: 24px; }
.footer-sp ul { margin-bottom: 0; padding-left: unset; }
.footer-sp .menu-footer-menu { margin: -5px -20px; flex: 1;}
.footer-sp .menu-footer-menu  .nav-item { padding: 5px 20px;  }
.footer-sp a { color: #fff; }

.banner-salepage {position: relative; }
.banner-salepage .wrap-info {position: absolute; bottom: 20%; left: 15px; right: 15px; background-color: var(--bg-sp-opacity); max-width: 1000px; margin: auto; padding: 50px 30px; border-radius: 20px;}
.banner-salepage .wrap-info .sub {font-size: 24px; font-weight: 700; }
.banner-salepage .wrap-img img { width: 100%; }

.table-main tr td:first-child, .table-main tr th:first-child { width: 19%; }
.table-main tr td, .table-main tr th { width: 27%; border: 1px solid var(--cl-sp-w);}
.table-main tr td { padding: 10px 10px 10px 10px; }
.table-main tr th { padding: 25px 10px; }
.table-main tr th { text-align: center; }

.table-over { overflow: auto; }
.table-over table { min-width: 650px; }

.table-sub tr td, .table-sub tr th { width: 25%; border: 1px solid var(--bg-sp-m);}
.table-sub tr td { padding: 10px 10px 10px 10px; }
.table-sub tr td:first-child { border: 1px solid var(--bg-sp-w); }
.table-sub tr th { padding: 25px 10px; border: 1px solid var(--bg-sp-w);}
.table-sub tr th { text-align: center; }

.notice-main__inner { max-width: 800px; margin: auto; }
.notice-main .box { border-radius: 20px; padding: 20px;}
.notice-main .box .sub { font-size: 28px; font-weight: 400; }
.notice-main .box .des { font-size: 24px; }
.notice-main .notice { font-size: 18px; }

.analytic .des-main { font-weight: 700; font-size: 22px; }
.analytic__list { display: flex; padding-left:unset; list-style: none; flex-wrap: wrap;}
.analytic__list-item { width: 33.33%; background-color: var(--bg-sp-s); border-right: 2px solid var(--bg-sp-w);}
.analytic__list-item .name { background-color: var(--bg-sp-m); color: var(--cl-sp-w); font-weight: 700; padding: 30px 15px;}
.analytic__list-item .des { padding: 30px 15px; }
.analytic__list-item .des ul { padding-left: 10px; }
.analytic__list-item .des ul li { margin-bottom: 20px; }

.box-ic-sp-item .wrap-info { padding: 20px 25px 20px 75px; margin-left: 45px; border-radius: 14px;}
.box-ic-sp-item { position: relative; }
.box-ic-sp-item .icon { width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--bg-sp-w); line-height: 85px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.box-ic-sp .num { font-size: 50px; font-weight: 700; color: var(--cl-sp-w) }
.box-ic-sp-item .name { font-size: 20px; font-weight: 700; }
.box-ic-sp-item .icon img { max-width: 90%; max-height: 90%; }

.box-ic-top .list { padding-left: unset; list-style: none; display: flex; flex-wrap: wrap; margin: -50px -18px; }
.box-ic-top .list .item { width: 33.33%; padding: 50px 18px;}
.box-ic-top .list .item-inner { position: relative; height: 100%;}
.box-ic-top .list .item-inner .text { font-size: 18px; font-weight: 600; color: var(--cl-sp-m); }
.box-ic-top .list .item-inner .icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 5;}
.box-ic-top .list .item-inner .icon-inner {width: 98px; height: 98px; border-radius: 50%; line-height: 78px; padding: 10px; background-color: var(--bg-sp-sm); }
.box-ic-top .list .item-inner:before { content: ''; top: 0; left: 50%; width: 108px; height: 108px; background-color: var(--bg-sp-m); position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.box-ic-top .list .item-inner .group-text { position: relative;  padding: 75px 25px 50px 25px; border-radius: 10px; background-color: var(--bg-sp-w); height: 100%;}

.heading-bg { max-width: 800px; }
.heading-bg .title { font-size: 22px; padding: 15px 0 10px 30px; border-top-left-radius: 100px; border-bottom-left-radius: 100px;}

.heading-icon .icon { width: 84px; height: 84px; border-radius: 50%; line-height: 80px; text-align: center; position: relative; z-index: 5; border: 4px solid var(--bg-sp-w);}
.heading-icon .icon img {max-width: 90%; max-height: 90%;}
.heading-icon .text { flex: 1; font-size: 24px; border-radius: 30px; margin-left: -40px; font-weight: 700; padding: 10px 15px 10px 60px; text-align: center;}
.heading-icon { display: flex; align-items: center; margin-right: 15%}

.heading-ck { font-size: 24px; font-weight: 700; }

.box-incom-ic .list { display: flex; flex-wrap: wrap; margin: -18px; list-style: none;}
.box-incom-ic .list .item { width: 33.33%; padding: 18px; }
.box-incom-ic .list .item .icon { width: 64px; height: 64px; background-color: var(--bg-sp-r); border-radius: 50%; line-height: 64px; text-align: center; margin: auto; margin-bottom: 6px;}
.box-incom-ic .list .item .icon img {  max-width: 90%; max-height: 90%; }
.box-incom-ic .list .item .des { text-align: justify; }

.box-ytcl .list { list-style: none; padding-left: unset; display: flex; flex-wrap: wrap; margin: -18px;}
.box-ytcl .list .item { width: 33.33%; padding: 18px;}
.box-ytcl .list .item .inner { background-color: var(--bg-sp-w); border-radius: 10px; padding: 20px; height: 100%;}
.box-ytcl .list .item .icon { width: 80px; height: 80px; line-height: 80px; background-color: var(--bg-sp-sm); border-radius: 50%; text-align: center; margin: auto; }
.box-ytcl .list .item .icon img { max-width: 90%; max-height: 90%;}
.box-ytcl .list .item .text { margin-top: 15px; }

.box-head-img .title { padding: 10px; font-size: 27px; margin-bottom: 0;}
.box-head-img .content { display: flex; padding: 40px; flex-wrap: wrap;}
.box-head-img .content .wrap-img { width: 50%; }
.box-head-img .content .wrap-text { width: 50%; padding-left: 30px;}

.box-img .list-img { padding-left: unset; margin: -15px; display: flex; flex-wrap: wrap; list-style: none;}
.box-img .list-img .item { width: 50%; padding: 15px;}

.link-list { display: flex; flex-wrap: wrap; justify-content: center; margin: -25px; padding-left: unset; list-style: none;}
.link-list .item { padding: 25px; width: 33.33%; }
.link-list .item .inner { background-color: var(--bg-sp-m); color: var(--cl-sp-w); text-align: center; padding: 7px; border-radius: 38px;}
.link-list .name { font-size: 22px; font-weight: 700; }

.overview__inner { display: flex; flex-wrap: wrap; }
.overview__left { width: 43%; padding-right: 36px; }
.overview__left .overview-content { font-size: 19px; }
.overview__left .overview-content ul li { margin-bottom: 20px;}
.overview__right { width: 57%; }
.overview__right .wrap-img img { width: 100%; }

.box-img-text { display: flex; flex-wrap: wrap; background: #fff;}
.box-img-text .wrap-img { width: 50%; }
.box-img-text .wrap-img img { height: 100%; }
.box-img-text .wrap-text { width: 50%; padding: 30px 15px;}
.box-img-text .wrap-text .title { font-size: 24px; }

.advise .notice { font-size: 20px; font-weight: 700; text-transform: uppercase; }

.box-csbh .list { display: flex; flex-wrap: wrap; padding-left: unset; margin: -18px; list-style: none; justify-content: center;}
.box-csbh .list .item { width: 33.33%; padding: 19px;}
.box-csbh .list .item .item-inner { background-color: var(--bg-sp-sm); padding: 25px; text-align: center; color: var(--cl-sp-w); border-radius: 15px; height: 100%; display:flex; flex-direction: column; align-items: center; justify-content: center;}
.box-csbh .list .item .sub, .box-csbh .list .item .sub-bot { font-size: 20px; }
.box-csbh .list .item .sub { font-weight: 700; }
.box-csbh .list .item .text-main { font-weight: 700; font-size: 37px; }

.box-form-bg { position: relative; }
.box-form-bg .bg-img:before { content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); position: absolute;}
.box-form-bg .bg-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.box-form-bg .bg-img img { height: 100%; width: 100%;}
.box-form-bg .bg-content { position: relative; padding: 40px; }
.box-form-bg .bg-content .title { font-size: 30px; }
.box-form-bg .button-download .btn { font-size: 16px; }


.utl__box { display: flex; flex-wrap: wrap; margin: -18px; }
.utl__box-item { width: 50%; padding: 18px;}
.utl__box-item .name { font-size: 27px; font-weight: 700; color: var(--cl-sp-w); background-color: var(--bg-sp-m); border-radius: 7px; text-align: center; padding: 5px; }
.utl__box-item .detail { color: var(--cl-sp-sm); }
.utilities .des-main { font-size: 20px; font-weight: 700; }

.utl__img { display: flex; flex-wrap: wrap; margin: -18px; justify-content: center; }
.utl__img-item { width: 50%; padding: 18px;}
.utl__img-item .inner { background-color: var(--bg-sp-w); height: 100%; }
.utl__img-item .wrap-img { position: relative; padding-top: 54%;}
.utl__img-item .wrap-img img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; object-position: center;}
.utl__img-item .wrap-info { padding: 30px 15px;}
.utl__img-item .name { font-size: 18px; font-weight: 700; color: var(--cl-sp-m); min-height: 46px;}
.utl__img-item .detail { color: var(--cl-sp-sm); }

.box-price .item-inner { max-width: 720px; margin: auto; background-color: var(--bg-sp-sm); padding: 25px; text-align: center; color: var(--cl-sp-w); border-radius: 15px; height: 100%; display:flex; flex-direction: column; align-items: center; justify-content: center;}
.box-price .item-inner .sub { font-size: 25px; font-weight: 700;}
.box-price .item-inner .sub-bot { font-size: 18px; }
.box-price .item-inner .text-main { font-weight: 700; font-size: 50px; }

.box-csbh-1 { padding: 50px; border-radius: 16px;}
.box-csbh-1 .item { display: flex; margin-bottom: 30px; color: var(--cl-sp-r); font-size: 22px; font-weight: 700;}
.box-csbh-1 .item:last-child { margin-bottom: unset; }
.box-csbh-1 .item .icon { width: 33px; }
.box-csbh-1 .item .text { flex: 1; padding-left: 10px; }

.box-csbh-2 { padding: 35px 20px; border-radius: 16px; border: 2px dashed var(--bg-sp-m);}
.box-csbh-2 .item { margin-bottom: 10px;}
.box-csbh-2 .item:last-child { margin-bottom: unset; }
.box-csbh-2 .inner { max-width: 580px; margin: auto; color: var(--cl-sp-r); font-size: 25px; font-weight: 700;}