@charset "utf-8";

.model-wrap {padding: 0 40px; margin: 70px auto 0;}
.model-wrap .model-box {border-radius: 20px; background-color: rgba(11,133,239,0.1); padding: 50px 75px; width: 100%; max-width: 1330px; margin: 0 auto;}

.model-box .model-box-top {font-size: 1.75em; font-weight: 800; text-align: center; line-height: 1.5;}
.model-box ul {}
.model-box ul li {display: flex; align-items: center; padding: 60px 0 0 40px;}
.model-box ul li .li-l {margin-right: 76px; display: flex; flex: none;}
.model-box ul li .li-l img {width: 100%; max-width: 246px; image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden;}
.model-box ul li .li-l img + img {margin-left: 40px;}
.model-box ul li + li {padding-top: 40px; border-top: 1px solid rgba(11,133,239,0.2); margin-top: 40px;}
.model-box ul li .li-top {border-radius: 33px; background-color: var(--color-blue); width: 100%; height: auto; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: 700; color: #fff; padding: 16px; 20px;}
.model-box ul li .li-cont {width: 100%; margin: 24px 0 16px;}
.model-box ul li .li-cont p {display: flex; align-items: baseline; word-break: keep-all; font-size: 22px;}
.model-box ul li .li-cont p + p {margin-top: 20px;}
.model-box ul li .li-cont p span {width: 16px; height: 16px; border-radius: 50%; background: #133C7E; margin-right: 14px; flex: none;}
.model-box ul li .li-cont p small {font-size: 25px; color: #464646; display: contents;}
.model-box ul li .li-img {margin-left: 15px;}
.model-box ul li .li-img img {width: 100%; max-width: 89px;}
.model-box ul li .li-img img + img {margin-left: 20px;}
.model-box .model-box-bottom {font-size: 1.25em; font-weight: 600; text-align: center; color: #818181; line-height: 1.5; margin-top: 50px;}

.model-box2 {width: 100%; max-width: 1230px; margin: 0 auto; margin-top: 76px;}
.model-box2 ul {display: flex;}
.model-box2 ul li {}
.model-box2 ul li.model-l {padding-top: 88px;}
.model-box2 ul li .model-l-top {display: flex; align-items: center;}
.model-box2 ul li .model-l-top .checkup-logo {border-radius: 10px; box-shadow: 0px 0px 6px rgba(0,0,0,0.2);}
.model-box2 ul li .model-l-top .checkup-logo img {border-radius: 10px;}
.model-box2 ul li .model-l-top .checkup-top {margin-left: 15px;}
.model-box2 ul li .model-l-top .checkup-top .top-tit {font-size: 16px; font-weight: 500; color: #133C7E;}
.model-box2 ul li .model-l-top .checkup-top .top-tit2 {font-size: 28px; font-weight: 800; color: #133C7E;}
.model-box2 ul li .model-l-cont {margin: 40px 0 0;}
.model-box2 ul li .model-l-cont .cont-tit {font-size: 34px; color: #133C7E; position: relative;}
.model-box2 ul li .model-l-cont .cont-tit2 {font-size: 20px; font-weight: 500; color: #0B85EF; margin-top: 10px;}
.model-box2 ul li .model-l-cont .cont-tit .cp-line {position: absolute; right: -160px; top: 50%; transform: translateY(-50%); width: 100%; max-width: 152px; z-index: 1;}
.model-box2 ul li .model-l-bottom {margin: 40px 0 0;}
.model-box2 ul li .model-l-bottom .bottom-app-wrap {display: flex; align-items: center; margin-top: 10px;}
.model-box2 ul li .model-l-bottom .bottom-app-wrap .app-wrap {margin-left: 22px;}
.model-box2 ul li .model-l-bottom .bottom-app-wrap .ico-app {border-radius: 10px; box-shadow: 0px 0px 6px rgba(0,0,0,0.2);}
.model-box2 ul li .model-l-bottom .bottom-app-wrap .ico-app + .ico-app {margin-left: 10px;}

.model-box2 ul .model-r-wrap {display: flex; align-items: end; flex: 1;}

.model-box2 ul .model-c {border-radius: 50%; background: url("../../../assets/images/sub/model-c-bg.png"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; max-width: 655px; max-height: 655px; padding: 0 52px 62px 85px;}
.model-box2 ul .model-c img {width: 100%; max-width: fit-content;}

.model-box2 ul li .model-r-top {border-radius: 38px; background-color: var(--color-blue); width: 100%; max-width: fit-content; height: 65px; display: flex; align-items: center; justify-content: center; font-size: 1.25em; font-weight: 700; color: #fff; position: relative; padding: 0 20px; text-align: center;}
.model-box2 ul li .model-r-top .cp-line2 {position: absolute; left: -110px; top: 200%; transform: translateY(-50%); width: 100%; max-width: 100px;}
.model-box2 ul li .model-r-list {margin-top: 24px; padding: 24px; box-shadow: 0px 3px 6px rgba(0,0,0,0.2); border-radius: 20px; max-width: 290px;}
.model-box2 ul li .model-r-list p {font-size: 20px; font-weight: 500; display: flex; align-items: baseline;}
.model-box2 ul li .model-r-list p i {background-image: url("../../../assets/images/sub/ico-logo-p.svg"); background-repeat: no-repeat; display: inline-block; width: 16px; height: 11px; margin-right: 8px; flex: none;}
.model-box2 ul li .model-r-list p + p {margin-top: 20px;}

@media (max-width: 1280px) {
    .model-wrap .model-box {padding: 50px;}
    .model-box ul li {flex-direction: column;}
    .model-box ul li .li-l {margin: 0;}
    .model-box ul li .li-l img {max-width: 217px; max-height: 446px;}
    .model-box ul li .li-l img + img {margin-left: 35px;}

    .model-box ul li .li-r {margin-top: 40px; width: 100%; max-width: 468px;}

    .model-box ul li .li-top {font-size: 1.5em; padding: 15px 20px;}
    .model-box ul li .li-cont {margin: 28px 0 0;}
    .model-box ul li .li-cont p {font-size: 28px;}
    .model-box ul li .li-cont p small {font-size: 22px;}
    .model-box ul li .li-cont p span {width: 14px; height: 14px; margin-right: 12px;}

    .model-box2.pc {display: none;}
    .model-box2 ul {align-items: center; justify-content: center;}
    .model-box2 ul + ul {margin-top: 100px;}
    .model-box2 ul li.model-l {padding: 0; margin-right: 140px;}
    .model-box2 ul.reverse {align-items: end;}
    .model-box2 ul.reverse li.model-l {margin: 0 0 0 140px;}
    .model-box2 .model-bg-wrap {position: relative;}
    .model-box2 .model-bg-wrap::before {content: ''; background-image: url("../../../assets/images/sub/model-bg.png"); background-repeat: no-repeat; background-size: cover; width: 640px; height: 640px; position: absolute; top: -25%; left: -70%; border-radius: 50%; z-index: -1;}
    .model-box2 .model-bg-wrap img {width: 100%; max-width: fit-content;}
    .model-box2 ul li .model-r-top {max-width: 290px;}
    .model-box2 ul li .model-r-top .cp-line2 {max-width: 152px; left: -160px; top: 280%;}

}

@media (max-width: 768px) {
    .model-wrap .model-box {padding: 40px 18px;}
    .model-box .model-box-top {font-size: 1.25em;}
    .model-box ul li {padding: 40px 0 0;}
    .model-box ul li + li {margin-top: 30px; padding-top: 30px;}
    .model-box ul li .li-l {flex: unset; width: 100%;}
    .model-box ul li .li-l img {max-width: calc(50% - 10px); max-height: 100%;}
    .model-box ul li .li-l img + img {margin-left: 20px;}
    .model-box ul li .li-top {font-size: 1.125em; text-align: center; padding: 8px 14px;}
    .model-box ul li .li-cont {margin: 24px 0 0;}
    .model-box ul li .li-cont p {font-size: 1em;}
    .model-box ul li .li-cont p + p {margin-top: 15px;}
    .model-box ul li .li-cont p span {width: 10px; height: 10px; margin-right: 5px;}
    .model-box ul li .li-cont p small {font-size: 14px;}
    .model-box ul li .li-r {width: fit-content; margin-top: 30px; padding: 0 16px;}
    .model-box .model-box-bottom {font-size: 14px;}

    .model-box2 ul {flex-direction: column;}
    .model-box2 ul + ul {margin-top: 80px;}
    .model-box2 ul li.model-l {margin: 0 0 20px;}
    .model-box2 ul li .model-l-top {justify-content: center;}
    .model-box2 ul li .model-l-cont {text-align: center; margin-top: 30px;}
    .model-box2 ul li .model-l-cont .cont-tit {font-size: 30px;}
    .model-box2 ul li .model-l-cont .cont-tit .cp-line, .model-box2 ul li .model-r-top .cp-line2 {display: none;}
    .model-box2 ul li .model-l-bottom {display: flex; flex-direction: column; align-items: center;}
    .model-box2 .model-bg-wrap {margin-top: 24px; width: 100%;}
    .model-box2 .model-bg-wrap::before {width: 360px; height: 360px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    /* .model-box2 .model-bg-wrap img {max-width: 140px;} */
    .model-box2 ul.reverse {align-items: center; flex-direction: column-reverse;}
    .model-box2 ul.reverse li.model-l {margin: 0 0 40px;}
    .model-box2 ul li .model-r-top {height: 60px;}
    .model-box2 ul li .model-r-list p {font-size: 18px;}
}