@charset "utf-8";

.clinical-top {width: 100%; background-color: rgba(11,133,239,0.05); border-radius: 20px; text-align: center; padding: 27px 20px; margin-top: 70px;}
.clinical-top p {font-size: 1.125em; word-break: keep-all;}
.clinical-top p + p {margin-top: 10px;}
.clinical-top p span {font-weight: 600;}
.clinical-top p small {font-size: 1em;}

.clinical-step .etc {text-align: center; font-size: 1.25em; color: #757575; margin-top: 30px;}
.clinical-step-wrap {max-width: calc(1180px + 80px); margin: 0 auto; padding: 0 40px; overflow-y: hidden;}
.clinical-btn {max-width: 688px; margin: 86px auto 0;}
.clinical-btn a {width: 100%; height: 80px; border-radius: 10px; background-color: var(--color-blue); font-size: 1.5em; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; transition: .2s; padding: 0 20px; text-align: center;}
.clinical-btn:hover a {background-color: #fff; border: 1px solid var(--color-blue); color: var(--color-blue);}

.clinical-step {margin-top: 30px;}
.step-box {padding: 50px 35px 42px; border-radius: 20px; border: 2px solid #E4E4E4;}
.step-box .step-tit {font-size: 1.75em; font-weight: 700; text-align: center;}
.step-box .step {margin-top: 40px;}
.step-box .step ul {display: flex;}
.step-box .step ul .step-wrap {display: flex; flex-direction: column;}
.step-box .step ul .step-wrap:last-child {width: 20%;}
.step-box .step ul .step-wrap .step-box-wrap {display: flex; width: 100%;}
.step-box .step ul .step-wrap .step-box-wrap li {width: 100%; margin-right: 10px;}
.step-box .step ul .step-wrap:last-child .step-box-wrap li {margin-right: 0;}
.step-box .step ul .step-wrap .step-bottom {border-radius: 10px; background-color: #E6F3FE; font-size: 1.25em; font-weight: 600; width: calc(100% - 10px); height: 70px; display: flex; align-items: center; justify-content: center; margin-top: 16px; text-align: center;}
.step-box .step ul .step-wrap:nth-child(2) .step-bottom {background-color: #B5DAFA;}
.step-box .step ul .step-wrap:nth-child(3) .step-bottom {font-size: 1.125em; line-height: 1.5; max-width: 206px;}

.pointer {width: 205px; height: 112px; position: relative; background: rgba(11,133,239,0.1);}
.pointer:after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 40px solid white; border-top: 56px solid transparent; border-bottom: 56px solid transparent;}
.pointer:before {content: ""; position: absolute; right: -40px; bottom: 0; width: 0; height: 0; border-left: 40px solid rgba(11,133,239,0.1); border-top: 56px solid transparent; border-bottom: 56px solid transparent; z-index: 1;}
.pointer p {position: absolute; top: 50%; left: calc(50% + 25px); transform: translate(-50%, -50%); font-size: 1.25em; font-weight: 700; color: #fff; text-align: center; width: 100%;}

.step1 .pointer p {color: var(--color-blue);}
.step2 .pointer {background: rgba(11,133,239,0.3);}
.step2 .pointer:before {border-left: 40px solid rgba(11,133,239,0.3);}
.step3 .pointer {background: rgba(11,133,239,0.6);}
.step3 .pointer:before {border-left: 40px solid rgba(11,133,239,0.6);}
.step4 .pointer {background: rgba(11,133,239,0.8);}
.step4 .pointer:before {border-left: 40px solid rgba(11,133,239,0.8);}
.step5 .pointer {background: rgba(11,133,239,1);}
.step5 .pointer:before {border-left: 40px solid rgba(11,133,239,1);}

.step-txt-box {border-radius: 10px; background-color: #F7F7F7; border: 2px solid #F7F7F7; width:100%; max-width: 206px; height: 280px; display: flex; justify-content: center; text-align: center; position: relative; margin-top: 16px; padding-top: 80px;}
.step-txt-box .step-num {position: absolute; left: 10px; top: 12px; border-radius: 20px; background-color: #fff; font-size: 0.875em; font-weight: 500; color: #888888; padding: 8px 16px;}
.step-txt-box .step-txt {font-size: 1em; font-weight: 600; line-height: 1.5; padding: 0 10px;}


@media (max-width: 1280px) {
    .clinical-step-wrap {max-width: 1180px; margin: 0 0 0 40px; padding: 0 40px 0 0;}
    .clinical-step-wrap {overflow-x: scroll;}
    .clinical-step-wrap::-webkit-scrollbar {background-color: rgba(11,133,239,0.2); border-radius: 10px;}
    .clinical-step-wrap::-webkit-scrollbar-thumb{background-color: rgba(11,133,239,0.8); border-radius: 10px;}
    .clinical-step {min-width: 1180px; padding-bottom: 16px;}

    .clinical-btn {margin-top: 50px;}
    .clinical-btn a {height: 70px; font-size: 1.375em;}
}

@media (max-width: 768px) {
    .clinical-step-wrap {margin: 0 0 0 20px; padding: 0 20px 0 0;}
    .clinical-top {padding: 22px 20px;}
    .clinical-top p {line-height: 1.5; font-size: 1em;}
    .clinical-top p small {display: none;}

    .clinical-btn {margin-top: 45px;}
    .clinical-btn a {height: 60px; font-size: 1.25em;}
}


@media (max-width: 320px) {
    .clinical-top p {font-size: 0.875em;}
}