/* BASIC css start */
#page-wrap {width:100%; margin:0 auto; }

#page-wrap .page-top{ width:1920px; height: 600px; text-align: center; overflow: hidden;
background-image:url("/design/yespen/image/gakin_img.jpg");
        background-repeat:no-repeat; background-size: cover;margin:0px auto }

#page-wrap .page-body{position: relative;}
.container {    max-width: 1200px;text-align: center;
    width:100%;    margin: 0 auto;

}

.content-pd{
    padding: var(--content-pd) 0;
}

.d-flex{
    display: flex;
}

.jcsb{
    display: flex;
    justify-content: space-between;
}

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


.hidden{
    display: none;
}

hr{
    border:none;
    border-top:1px solid #e6e7eb;
}


.sub-title {
    padding : 50px 0px 50px; text-align:center;
}
.sub-icon{
    padding : 100px 0px 50px;
}

.sub-icon ul{ gap:55px;  padding: 0 100px; }

.sub-icon ul li{ text-align: center; }

.sub-icon .sleek{  font-size:20px; line-height: 20px; }

.sub-icon .icon_box {  width:200px; height: 200px; border :2px solid #999;
    margin : 0 auto 50px; display:flex; align-items: center; justify-content: center; transition:0.3s; }

.sub-icon .icon_box span{ transition:transform 0.3s; }

.sub-icon  li:hover .icon_box{ transform:rotate(45deg);  border-color:#194f8c;}
.sub-icon  li:hover .icon_box span{ transform:rotate(-45deg); }
.sub-icon  li:hover .icon_box span{color:#194f8c; font-weight: 500;}


.sub-icon  li h3{font-size: 18px; list-style: 18px;   margin-bottom: 30px;}
.sub-icon  li h3:after{ content:'' ; position: absolute; width: 40px; height:2px; background:#6a6a6a;left:50%;
transform:translateX(-50%); top: 45px;  }

.sub-icon  li p{
    font-size :14px; letter-spacing: 0.075em; line-height: 20px;
}


.sub-title .msg { font-size:23px;line-height:1.05; color:#999;}
.sub-title .msg .r{ font-weight:normal; color:#ff0000;}


.sub-title .sub{margin-bottom:30px;}
.sub-title .num{display:block;margin-bottom:5px;font-size:86px;font-style:italic;line-height:1;}
.sub-title .tit{ margin-bottom:10px; font-size:50px; font-weight:700;}
.sub-title .subtit{margin-bottom:12px;font-size:30px;font-weight:700;}
.sub-title .line{display:inline-block;border-bottom:2px solid #000;}
.sub-title .msg{font-size:23px;line-height:1.25em;}
.sub-title .msg .r{font-weight:normal;color:#ff0000;}

.sub-list { width:1000px; margin:0 auto; }
.sub-list .list { padding-left:30px; font-size:23px; line-height:1.2em;  float:left; padding-bottom:70px;}
.sub-list .list li {margin:10px 0; float:left;  }

.sub-list .list li .num { float:left; }
.sub-list .list li .txt { float:left; text-align:left; }
.sub-list .list .txt_r { color:red; }

.sub-list .list .bg_yellow{ background: #faf7a7; font-weight:600; }

.sub-title .m .tit{font-size:30px;}
.sub-title .m .msg{font-size:23px;}




.sub-box { margin-top: 50px;}
.sub-box ul{ gap:50px;  padding: 0 150px;   font-size: 21px; line-height: 21px;}
.sub-box ul li{ text-align: center; }
.sub-box .gray_box {  width:320px; height: 110px; border :0px solid #999;
    margin : 75 auto 0px; display:block; align-items: center; justify-content: top;
    background-color: #e5e5e5; position :relative;
}

.sub-box .tit{display: block;  font-weight:600; padding:18px 0 }
.sub-box .price{ display: block; width:240px; height :40px; background-color:#fff;
    text-align: center; justify-content: center; padding-left:10px; vertical-align: middle;}

.sub-box {margin: 34px auto 43px auto; width:820px;}
.sub-box table {background-color:#fff;  margin:10px 0 15px 0;}
.sub-box h2 {text-align:left; font-size:20px; margin:0 0 10px 0;}
.sub-box p {text-align:left; font-size:20px; margin:10px 0 10px 0; color:#fff;}
.sub-box th,
.sub-box td { padding: 6px 0; text-align: center; border: 1px solid #d7d7d7; }
.sub-box th { background-color: #efefef; }
.sub-box th {font-size: 20px; font-weight: 600; line-height: 40px;}
.sub-box td {font-size: 20px;line-height: 25px; padding:20px 0;}

.sub-box .logo_info { font-size: 20px; line-height: 25px; }
/* BASIC css end */