/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 휴대폰번호 및 인증번호 입력 */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.kakaoImg {
    background-image: url(../../commonSrc/image/useImg/kakao.png);
    background-size: 50px 50px;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    border: none;
    background-repeat: no-repeat;
}

/*  휴대폰 앞자리 select */
.inputA {
    width: 40%;
    background-color: white;
    font-size: 20px;
    box-sizing: border-box;
}

/*  휴대폰 뒷자리 입력 */
.inputB {
    width: 55%;
    height: 50px;
    font-size: 20px;
    text-align: left;
    box-sizing: border-box;
    border: none;
    outline: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}


.kakaoSendButtonWrap{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.kakaoButton{
    position: relative;
    border-radius: 30px;
    background-color: rgb(237, 237, 17);
    width: 240px;
    height: 60px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.kakaoImage{
    width: 40px;
    padding-left: 15px;
    padding-top: 8px;
}

.kakaoText{
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 20px;
    font-weight: bolder;
}

.inputFormA {
    position: relative;
    display: flex;
    width: 100%;
}


/* 팩스번호 뒷자리 클리어 버튼*/
.clear-btnC {
    position: absolute;
    top: 15px;
    right: 5px;
    font-size: 22px;
    color: rgb(222, 223, 224);
}

/* 팩스번호 뒷자리(재입력) 클리어 버튼*/
.clear-btnD {
    position: absolute;
    top: 15px;
    right: 5px;
    font-size: 22px;
    color: rgb(222, 223, 224);
}

/*  팩스 입력 */
.inputBack{
    width: 50%;
    height: 50px;
    font-size: 20px;
    box-sizing: border-box;
    border: none;
    outline: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.inputFront{
    width: 44%;
    background-color: white;
    box-sizing: border-box;
    font-size: 20px;
    text-align: center;
    border: none;
    height: 50px;
    color: #222;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    background: #fff url(../../commonSrc/image/useImg/icon_select.png) no-repeat 100% center;
    background-size: auto 0.333rem;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}


.inputFormWrapB {
    border-bottom: 1px solid #cccbcb;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    position: relative;
    display: flex;
}


.titleNameWrapB {
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
}




/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 전송 애니메이션 */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.sendingAnimateWrap {
    position: fixed;
    background: rgba(0, 0, 0, .95);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: none;
}


.containerWrap {
    height: 100vh;
    width: 100vw;
}

.loader {
    height: 20px;
    width: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
}

.loader--dot:first-child {
    background-color: #8cc759;
    animation-delay: 0.5s;
}

.loader--dot:nth-child(2) {
    background-color: #8c6daf;
    animation-delay: 0.4s;
}

.loader--dot:nth-child(3) {
    background-color: #ef5d74;
    animation-delay: 0.3s;
}

.loader--dot:nth-child(4) {
    background-color: #f9a74b;
    animation-delay: 0.2s;
}

.loader--dot:nth-child(5) {
    background-color: #60beeb;
    animation-delay: 0.1s;
}

.loader--dot:nth-child(6) {
    background-color: #fbef5a;
    animation-delay: 0s;
}

.loader--text {
    position: absolute;
    top: 200%;
    left: 15%;
    right: 0;
    width: 130px;
    margin: auto;
}

.loader--text:after {
    content: "카카오톡 전송 중";
    font-weight: bold;
    animation-name: loading-text;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    color: white;
}

@keyframes loader {

    15% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(230px);
    }

    65% {
        transform: translateX(230px);
    }

    95% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}
}

@keyframes loading-text {

    0% {
        content: "카카오톡 전송 중";
    }

    25% {
        content: "카카오톡 전송 중 .";
    }

    50% {
        content: "카카오톡 전송 중 . .";
    }

    75% {
        content: "카카오톡 전송 중 . . .";
    }

}






/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* MAIN 컨텐츠-SectionA */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

main {
    position: relative !important;
    padding: 0 !important;
}


.sectionHeader {
    /* border: 1px solid red; */
    height: 220px;
    background-color: #EFF4FD;
    /* position: absolute;
    left: 0;
    right: 0; */
    padding: 15px;
    padding-top: 50px;
    background-image: url(../../commonSrc/image/useImg/sectionHeader.jpg);
    background-size: cover;
    background-repeat: no-repeat;

}

.padding {
    padding: 10px 15px;
}

.sectionA {
    /* margin-top: 370px; */
    margin-top: 60px;
    margin-bottom: 40px;
}

.sectionB,
.sectionC,
.sectionD,
.sectionE, 
.sectionF, 
.sectionG{
    margin-bottom: 20px;
}

.issueWrap {
    margin-top: 30px;
}

.titleNameWrap {
    box-sizing: border-box;
    background-color: #f3f3f3;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
}





.buttonWrap {

    display: flex;
    justify-content: space-between;
    margin-top: 18px;
}

.buttonWrap li {
    position: relative;
    border-radius: 5px;
    width: 48%;
    margin-bottom: 15px;
    color: #ffffff;
    box-shadow: 0 10px 10px rgba(98, 98, 98, 0.3);
    height: 100px;
    margin-top: 20px;
}


.buttonWrap li:first-child {
    background-color: rgb(71 110 255);;
    border-top-left-radius: 0px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 30px;
    opacity: 80%;
}

.buttonWrap li:last-child {
    background-color: rgb(31, 52, 91);
    border-top-left-radius: 0px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 30px;
    opacity: 80%;
}

.buttonWrap li i {
    font-size: 26px;
    padding-top: 15px;
    color: #ffffff;
}

.applyButton,
.basetButton {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.menuTitle {
    text-align: center;
    line-height: 40px;
    font-size: 17px;
}
/* 
.downloadButton i {
    color: #d4d3d3;
}

.faqButton i {
    color: #d4d3d3;
}

.docCheckButton i {
    color: #d4d3d3;
} */



.multibuttonwrap {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
    padding: 8px 10px;
    border-radius: 50px;
    background: #fff;
    border: 0.5px solid rgba(146, 152, 176, 0.4);
    box-shadow: 0 0 10px rgba(146, 152, 176, 0.2), 4px 4px 10px rgba(146, 152, 176, 0.2);
    cursor: default;
}

.multibuttonwrap button {
    border: 0 solid transparent;
    background: transparent;
    padding: 10px 20px;
    margin: 0 -2px;
    color: #273043;
    font-size: 17px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    outline: none;
    transition: background 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    -ms-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
}

.multibuttonwrap button:first-child {

    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.multibuttonwrap button:last-child {

    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.multibuttonwrap button div {

    font-size: 15px;
    text-align: center;
    letter-spacing: 1px;
    cursor: pointer;
    padding-top: 3px;

}

.multibuttonwrap button:hover {
    background: rgba(240, 241, 244, 1);
}

.multibuttonwrap button:hover div {
    display: block;
    animation: tooltip-animation-normal 0.3s ease-out forwards;
}

.multibuttonwrap button:hover div.animate-right {
    animation: tooltip-animation-right 0.3s ease-out forwards;
}

.multibuttonwrap button:hover div.animate-left {
    animation: tooltip-animation-left 0.3s ease-out forwards;
}

.multibuttonwrap button:active {
    outline: none;
    background: rgba(214, 216, 225, 1);
}

@keyframes tooltip-animation-right {
    0% {
        transform: translateX(-75px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes tooltip-animation-left {
    0% {
        transform: translateX(75px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes tooltip-animation-normal {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}









/* .loginOut {
    display: flex;
    justify-content: right;
} */

.stepWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
}

.stepWrap li {
    border: 1px solid rgb(230, 230, 230);
    border-radius: 10px;
    width: 30%;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.stepWrap li:nth-child(1) .step {
    text-align: center;
    background-color: #476eff;
    padding: 15px 0;
    color: #fff;
    height: 20px;
    font-size: 20px;
}

.stepWrap li:nth-child(2) .step {
    text-align: center;
    background-color: #00B050;
    padding: 15px 0;
    color: #fff;
    height: 20px;
    font-size: 20px;
}

.stepWrap li:nth-child(3) .step {
    text-align: center;
    background-color: #FFC000;
    padding: 15px 0;
    color: #fff;
    height: 20px;
    font-size: 20px;
}


.circleLogoWrap {
    display: flex;
    justify-content: center;

}

.circleLogo {
    display: inline-block;
    border-radius: 50%;
    margin-top: 30px;
    background-color: #f1f1f1;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 120px;
}

.stepWrap li .circleLogo i {
    font-size: 35px;
    color: rgb(71, 71, 71);
}


.description {
    text-align: center;
    height: 80px;
    line-height: 100px;
    font-size: 20px;
}



.guideTextWrap{
    
    padding: 5px 8px;
    background-color: #F4F7FE;
}

.guideText {
    /* text-align: left;
    margin-top: 10px;
    display: flex;
    color: rgb(53, 53, 53); */
    padding-bottom: 10px;
    padding-top: 10px;
}

.bottomLine{
    
    border-bottom: 1px solid #E5E6EB;
}

.guideText em {
    color: #3c5de2;
}

.guideText div:first-child {

    line-height: 25px;
    vertical-align: bottom;
    /* color: #7a7a7a; */
    font-size: 16px;
}

.guideText div:last-child {
    width: 100%;
    padding-left: 5px;
    line-height: 25px;
}





/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* MAIN 컨텐츠-SectionB */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.inforWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px;
    justify-content: center;
    text-align: center;
}

.topMargin {
    margin-top: 50px;
}


.rightDescription {
    line-height: 35px;
}

.rightDescription i {
    opacity: 40%;
}



.rightDescription em {
    font-size: 20px;
    color: #cf6a1d;
}

.inputFormWrap {
    padding: 20px 0;
    text-align: center;
}

.mobileMedicalDocWrap {
    display: none;
}


.issueTypeWrap {
    text-align: center;
    margin-bottom: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}





.issueTypeTopWrap {
    display: flex;

}



.imgIcon {
    font-size: 30px;
}








.docType i {
    width: 17px;
    display: inline-block;
}

.docType {
    display: inline;
    color: rgb(57, 57, 57);
    background: linear-gradient(to top, #bfffa1 45%, transparent 45%);
    font-size: 20px;
}

.issueTypeText {
    /* padding: 10px 20px; */
    background-color: #fff;
    /* margin: 20px 0; */
    line-height: 20px;
}

.issueTypeText div {
    padding-bottom: 10px;
    line-height: 20px;
}














/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* MAIN 컨텐츠-SectionC */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



.pcMedicalDocWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pcMedicalDocWrap li {
    border-radius: 10px;
    width: 30%;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.pcMedicalDocWrap li .step {
    text-align: center;
    background-color: #4b47f3;
    padding: 12px 0;
    color: #fff;
    height: 15px;
    font-size: 17px;
}

.pcMedicalDocWrap .docCircleLogoWrap {
    display: flex;
    justify-content: center;
    opacity: 60%;
}


.pcMedicalDocWrap .docCircleLogo {
    /* background-image: url(../../commonSrc/image/svg/certLogo.svg); */
    background-image: url(../../commonSrc/image/useImg/docLogo.png);
    background-size: 60px 60px;
    /* padding-right: 10px; */
    margin: 0 auto;
    margin-bottom: 5px;
    margin-top: 15px;
    width: 60px;
    height: 60px;
    border: none;
    background-repeat: no-repeat;
    /* transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg); */

}

.docNameWrap {
    display: flex;
    flex-direction: column;
    background-color: white;
    height: 50px;
    justify-content: space-around;
    padding: 5px;
    font-size: 18px;
}

.docName {
    text-align: center;
}

.price {
    font-size: 15px;
    color: #5b5b5b;
}

.listHidden li:last-child {
    visibility: hidden;
}

/* .listHidden li:last-child {
    visibility: hidden;
} */



.downloadWrap {
    display: flex;
    padding: 10px 20px;
    background-color: #fff;
    margin: 20px 0;
    justify-content: space-around;
}

.docGuide {
    margin-top: 20px;
    color: #797979;
    font-size: 15px;
    line-height: 25px;
}

.pdfImg {
    background-image: url(../../commonSrc/image/useImg/pdf.png);
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
    border: none;
    background-repeat: no-repeat;
}

.wordImg {
    background-image: url(../../commonSrc/image/useImg/word.png);
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
    border: none;
    background-repeat: no-repeat;
}

.hwpImg {
    background-image: url(../../commonSrc/image/useImg/hwp.png);
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
    border: none;
    background-repeat: no-repeat;
}

.docTitle {
    padding-top: 10px;
}

.downloadWrap a {
    color: black;
}








/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* sectionD - 원본확인 */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */


.card-wrapperA {
    /* padding-bottom: 50px; */
    /* margin-top: -40px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.descriptionA {
    color: rgb(105, 105, 105);
    line-height: 20px;
    margin: 20px 0;
}

.descriptionB {
    margin: 20px 0;
    color: rgb(110, 110, 110);
    line-height: 20px;
}

.searchButton {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    background: #4b47f3;
    text-align: center;
    height: 50px;
    line-height: 52px;
    font-size: 22px;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 90;
    height: 50px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 20%);
}

.inputWrap {
    width: 100%;
    height: 45px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.input {
    flex-grow: 1;
    font-size: 18px;
    width: 100%;
    text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

input::placeholder {
    font-size: 20px;
    color: rgb(201, 201, 201);
}

input:focus {
    outline: none;
    border-color: rgb(60, 60, 60);
}

.hypen {
    padding: 6px;
    line-height: 37px;
    color: gray;
}

.result {
    width: 100%;
    margin-top: 20px;
    line-height: 30px;
    box-sizing: border-box;
    background-color: white;
    padding: 10px;
    border: 0.7px solid rgb(182, 182, 182);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.noResult {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    box-sizing: border-box;
    background-color: white;
    padding: 10px;
    color: #777777;
    border: 0.7px solid rgb(182, 182, 182);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.result em {
    color: #636EFD;
}



.header {
    display: flex;
    height: 130px;
    border: 1px solid #e9e9e9;
    background: #ffffff;
    position: relative;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.header .align {
    padding-left: 22px;
    margin: 5px 0;

}

.header .left-division {
    width: 30%;
    border-right: 1px solid #b1b1b1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-weight: 300;
}

.header .left-division .align {
    color: #5a5a5c;
}

.header .right-division {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}














/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* sectionE - FAQ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.card-wrapper {
    /* margin-top: 30px; */
    padding-bottom: 50px;
    /* padding-top: 60px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.faqDescription p {
    margin: 0 0 12px;
    line-height: 1.5;
}

.faqContentsWrap h2 {
    margin: 12px 0;
}

.faqContentsWrap h2 i {
    color: #fff;
    padding: 5px 6.62px;
    background-color: #476eff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.faq-card {
    border-radius: 20px;
    width: 100%;
    /* margin-top: 60px; */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.faq-ilustrations {
    display: flex;
    justify-content: center;
}

.faq-ilustrations .mobile.ilust {
    position: absolute;
    top: -110px;
    left: -30px;
    right: 0;
}

.mobile {
    display: block;
    margin: 0 auto;
}

.sectionMainImg {
    width: 50%;
    margin-bottom: -50px;

}

.faqWrap {
    padding: 9px 0;
}

.faqAccordion {
    padding: 8px 0;
    border-bottom: 1px solid hsl(240, 5%, 91%);
}

.imgWrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    position: relative;
}

.faqContentsWrap label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.faqContentsWrap span {
    margin-left: auto;
    transition: transform .4s ease-in-out;
}


.faqDescription {
    color: var(--neutral-soft-color);
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease-in-out;
    -webkit-transition: max-height .4s ease-in-out;
    -moz-transition: max-height .4s ease-in-out;
    -ms-transition: max-height .4s ease-in-out;
    -o-transition: max-height .4s ease-in-out;
}

.faqContentsWrap:hover h2 {
    color: var(--primary-soft-color)
}

.faqAccordion .faqList:checked+div>label>h2 {
    color: #3b7ae7;
}

.faqAccordion .faqList:checked+div>label>span {
    will-change: transform;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.faqAccordion .faqList:checked~.faqDescription {
    will-change: max-height;
    max-height: 300px;
    color: #6d6d6d;
}



















/* 바코드 */

.barcodeWrap {
    /* border: 1px solid green; */
    margin-top: 30px;
    position: absolute;
    left: 340px;
    top: 285px;
}

.center {
    margin: 0 auto;
    text-align: center;
}


/* barcode container */
.anim-box {
    position: relative;
    width: 150px;
    height: 150px;
    padding: 25px 30px;
    transition: transform .6s ease-out;
}

.anim-item {
    display: inline-block;
    background-color: rgb(60, 60, 60);
    height: 100px;
}

.anim-item-sm {
    width: 2px;
    margin-right: 3px;
}

.anim-item-md {
    width: 3px;
    margin-right: 2px;
}

.anim-item-lg {
    width: 5px;
    margin-right: 5px;
}

/* grow on hover */
/* .anim-box {
    transform: scale(1.5, 2);
  } */

.anim-box .scanner {
    animation-play-state: running;
}

/* animated laser beam */
.scanner {
    width: 100%;
    height: 3px;
    background-color: red;
    opacity: 0.7;
    position: relative;
    box-shadow: 0px 0px 8px 10px rgba(170, 11, 23, 0.49);
    top: 50%;
    animation-name: scan;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

@keyframes scan {
    0% {
        box-shadow: 0px 0px 8px 10px rgba(170, 11, 23, 0.49);
        top: 50%;
    }

    25% {
        box-shadow: 0px 6px 8px 10px rgba(170, 11, 23, 0.49);
        top: 5px;
    }

    75% {
        box-shadow: 0px -6px 8px 10px rgba(170, 11, 23, 0.49);
        top: 98%;
    }
}





/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* Link */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.bottomHalfBackBtn,
.bottomHalfNextBtn,
.fullNextBtn{
    display: none;
}









/* 
.sectionC,
.sectionD{
    display: none;
}




 */


















/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 900px 이하 모바일 반응형 */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

@media screen and (max-width: 900px) {


    /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
    /* MAIN 컨텐츠-SectionA */
    /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

    .sectionA {
        margin-top: 280px;
        margin-bottom: 40px;
    }

    .stepWrap li {
        border: 1px solid rgb(230, 230, 230);
        border-radius: 10px;
        width: 31%;
        height: 160px;
        transition: 600ms all;
        margin-bottom: 15px;
        position: relative;
        overflow: hidden;
    }

    .stepWrap li .step {
        text-align: center;
        background-color: #0070C0;
        padding: 5px 0;
        color: #fff;
        height: 17px;
        line-height: 22px;
    }

    .stepWrap li:nth-child(1) .step {
        text-align: center;
        background-color: #476eff;
        padding: 5px 0;
        color: #fff;
        height: 20px;
        font-size: 17px;
    }

    .stepWrap li:nth-child(2) .step {
        text-align: center;
        background-color: #00B050;
        padding: 5px 0;
        color: #fff;
        height: 20px;
        font-size: 17px;
    }

    .stepWrap li:nth-child(3) .step {
        text-align: center;
        background-color: #FFC000;
        padding: 5px 0;
        color: #fff;
        height: 20px;
        font-size: 17px;
    }

    .circleLogo {
        display: inline-block;
        border-radius: 50%;
        margin-top: 17px;
        background-color: #f1f1f1;
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 80px;
    }

    .stepWrap li .circleLogo i {
        font-size: 26px;
        color: rgb(71, 71, 71);
    }


    .description {
        text-align: center;
        line-height: 50px;
        font-size: 17px;
    }



    /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
    /* MAIN 컨텐츠-SectionB */
    /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

    .rightDescription {
        line-height: 25px;
    }

    .pcMedicalDocWrap {
        display: none;
    }


    .mobileMedicalDocWrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .mobileMedicalDocWrap li {
        border-radius: 10px;
        width: 48%;
        margin-bottom: 15px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    }

    .mobileMedicalDocWrap li .step {
        text-align: center;
        background-color: #4b47f3;
        padding: 12px 0;
        color: #fff;
        height: 15px;
        font-size: 14px;
    }

    .mobileMedicalDocWrap .docCircleLogoWrap {
        display: flex;
        justify-content: center;
        opacity: 60%;
    }

    .mobileMedicalDocWrap .docCircleLogo {
        background-image: url(../../commonSrc/image/useImg/docLogo.png);
        background-size: 70px 70px;
        /* padding-right: 10px; */
        margin: 0 auto;
        margin-bottom: 10px;
        margin-top: 15px;
        width: 70px;
        height: 70px;
        border: none;
        background-repeat: no-repeat;
        /* transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg); */
    }

    .imgWrap img {
        width: 100%;
    }




    /* 바코드 */
    .barcodeWrap {
        margin-top: 30px;
        position: absolute;
        left: 49.1%;
        transform: translateX(-49.1%);
        top: 97px;
    }

    .anim-box {
        position: relative;
        width: 80px;
        height: 80px;
        padding: 25px 30px;
        transition: transform .6s ease-out;
    }



    .sectionHeader {
        /* border: 1px solid red; */
        height: 150px;
        background-color: #EFF4FD;
        position: absolute;
        left: 0;
        right: 0;
        padding: 15px;
        padding-top: 50px;
        background-image: url(../../commonSrc/image/useImg/sectionHeader.jpg);
        background-size: cover;
        background-repeat: no-repeat;

    }


    .multibuttonwrap {
        margin-top: 35px;
        display: flex;
        justify-content: space-around;
        padding: 0px 0px;
        border-radius: 50px;
        background: #fff;
        border: 0.5px solid rgba(146, 152, 176, 0.4);
        box-shadow: 0 0 10px rgba(146, 152, 176, 0.2), 4px 4px 10px rgba(146, 152, 176, 0.2);
        cursor: default;
    }

    /* .sectionA {
        margin-top: 300px;
    } */


    .buttonWrap li {
        position: relative;
        border-radius: 5px;
        width: 48%;
        margin-bottom: 15px;
        color: #ffffff;
        box-shadow: 0 10px 10px rgba(98, 98, 98, 0.3);
        height: 87px;
        margin-top: 0px;
    }

    .buttonWrap {
        margin-top: 0px;
    }

    .applyButton,
    .basetButton {
        padding-top: 3px;
    }
}