@charset "utf-8";

/* percentage */
.per_wrap > ul {text-align:center;}
.per_wrap > ul > li {display:inline-block; position:relative; width:996px; max-width:996px; height:228px; padding:34px 40px; border-radius:8px; text-align:left; background-color:#fff;}
.per_wrap > ul > li:after {content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:5px; border-top-left-radius:8px; border-top-right-radius:8px; background:#856fe8;}
.per_wrap > ul > li:first-of-type:after {background-color:#888;}
.per_wrap > ul > li + li {margin-top:34px;}
.per_wrap > ul > li > strong {display:block; color:#240468; font-size:17px;}
.per_wrap > ul > li:first-of-type > strong {color:#222; font-size:18px;}
.per_wrap > ul > li > em {display:block; color:#666; font-size:14px; line-height:23px;}
.per_wrap > ul > li > em:first-of-type {margin-top:16px;}
.per_wrap > ul > li > em:last-of-type {margin-bottom:26px;}
.per_wrap > ul > li > p {width:100%; padding-left:30px; color:#240468; border-radius:6px; line-height:49px; background-color:#f5f3fd;}
.per_wrap > ul > li:first-of-type > p {padding-left:24px; color:#888; background-color:#f7f7f7;}

.per_wrap .cal_box {display:flex; align-items:center; padding:24px 0;}
.per_wrap .cal_box input {width:180px; height:48px; line-height:48px; border:1px solid #e5e7ea; border-radius:8px;}
.per_wrap .cal_box input[name="per_result"] {border:none; background-color:#f6f6f6;}
.per_wrap .cal_box input::placeholder {color:#666; font-weight:600; text-align:center;}
.per_wrap .cal_box span {margin:0 16px 0 4px; color:#000; font-size:16px; font-weight:600;}
.per_wrap .cal_box .per_select {display:inline-block; position:relative; margin-right:16px;}
.per_wrap .cal_box .per_select > a {display:block; width:124px; height:48px; padding-left:16px; margin-right:0px; color:#666; font-weight:600; border:1px solid #e5e7ea; border-radius:6px; line-height:48px; cursor:pointer; background:url(../../images/ico/ico_per_select01.svg) no-repeat right 16px center; background-size:20px 20px;}
.per_wrap .cal_box .per_select > a.on {background-image:url(../../images/ico/ico_per_select02.svg);}
.per_wrap .cal_box .per_select > ul {display:none; position:absolute; z-index:1; top:54px; left:0; width:100%; border:1px solid #eee; border-radius:8px; box-shadow:4px 4px 20px rgba(0,0,0,.1); background:#fff;}
.per_wrap .cal_box .per_select > ul.on {display:block;}
.per_wrap .cal_box .per_select > ul > li + li {border-top:1px solid #f7f7f7;}
.per_wrap .cal_box .per_select > ul > li > a {display:block; padding:14px 16px; color:#888; font-weight:600;}
.per_wrap .cal_box .per_select > ul > li > a.on {color:#563bdd;}

@media all and (max-width:1199px){
    .per_wrap > ul > li {width:100%;}
}

@media all and (max-width:980px){
    .per_wrap > ul > li {height:210px; padding:34px 30px;}
    .per_wrap > ul > li > strong {font-size:15px;}
    .per_wrap > ul > li:first-of-type > strong {font-size:16px;}
    .per_wrap > ul > li > em {font-size:12px; line-height:20px;}
    .per_wrap > ul > li > em:first-of-type {margin-top:14px;}
    .per_wrap > ul > li > em:last-of-type {margin-bottom:24px;}
    .per_wrap > ul > li > p {padding-left:25px; font-size:14px; line-height:40px;}
    .per_wrap > ul > li:first-of-type > p {padding-left:20px;}
    .per_wrap .cal_box {padding:20px 0;}
    .per_wrap .cal_box input {width:100px; height:40px; font-size:14px; line-height:38px;}
    .per_wrap .cal_box input::placeholder {font-size:14px;}
    .per_wrap .cal_box span {margin:0 14px 0 4px; font-size:14px;}
    .per_wrap .cal_box .per_select {margin-right:14px;}
    .per_wrap .cal_box .per_select > a {width:90px; height:40px; padding-left:12px; font-size:14px; line-height:38px; background-position:right 8px center; background-size:16px 16px;}
    .per_wrap .cal_box .per_select > ul {top:45px;}
    .per_wrap .cal_box .per_select > ul > li > a {padding:10px 12px; font-size:14px;}
}

@media all and (max-width:640px){
    .per_wrap .cal_box {flex-wrap:wrap;}
    .per_wrap .cal_box input {display:block;}

    .per_wrap > ul > li {height:190px; padding:34px 20px;}
    .per_wrap > ul > li > strong {font-size:14px;}
    .per_wrap > ul > li:first-of-type > strong {font-size:15px;}
    .per_wrap > ul > li > em {font-size:10px; line-height:16px;}
    .per_wrap > ul > li > em:first-of-type {margin-top:10px;}
    .per_wrap > ul > li > em:last-of-type {margin-bottom:20px;}
    .per_wrap > ul > li > p {padding-left:18px; font-size:12px; line-height:34px;}
    .per_wrap > ul > li:first-of-type > p {padding-left:16px;}
    .per_wrap .cal_box {padding:16px 0;}
    .per_wrap .cal_box input {width:65px; height:34px; font-size:12px; line-height:32px;}
    .per_wrap .cal_box input::placeholder {font-size:12px;}
    .per_wrap .cal_box span {margin:0 10px 0 2px; font-size:12px;}
    .per_wrap .cal_box .per_select {margin-right:10px;}
    .per_wrap .cal_box .per_select > a {width:75px; height:34px; padding-left:8px; font-size:12px; line-height:32px; background-size:12px 12px;}
    .per_wrap .cal_box .per_select > ul {top:38px;}
    .per_wrap .cal_box .per_select > ul > li > a {padding:6px 8px; font-size:12px;}
}

@media all and (max-width:480px){
    .per_wrap > ul > li {height:auto;}
    .per_wrap > ul > li + li {margin-top:24px;}
    .per_wrap > ul > li:first-of-type > p {padding:9px 16px; line-height:1.5;}
    .per_wrap .cal_box input {display:inline-block; width:76%;}
    .per_wrap .cal_box span + input {margin-top:4px;}
    .per_wrap .cal_box .per_select {width:76%; margin:4px 0; text-align:center;}
    .per_wrap .cal_box .per_select > a {width:100%;}
}