/********************************************************
* CSS :style.css
*********************************************************/

/********************************************************
* header
*********************************************************/
body{font-family:"inter","notokr","sans-serif";background-color:#f8f8f8;}
.inner{position:relative;max-width:1100px;padding:90px 70px 95px;border-radius:15px;background-color:#fff}

/********************************************************
* intro
*********************************************************/
.intro .main-title{padding-left:20px}
.intro .inner{padding:90px 70px 105px;}
.intro__list-wrap{width:100%; margin-bottom:60px;}
.intro__list{border-bottom:1px dashed #f2f4f5;}
.intro__list__num{width:100px;height:100px;font-family:"inter","notokr","sans-serif";font-size:18px;font-weight:800;color:#107fd5;text-align:center;vertical-align:middle;}
.intro__list__desc{height:100px;padding:0 20px 0 10px;font-family:"inter","notokr","sans-serif";font-size:16px;color:#444;line-height:22px;vertical-align:middle;}
.intro__agree-btn{display:flex;justify-content:center;align-items:center;position:relative;width:330px;height:65px;margin:0 auto;font-family:"inter","notokr","sans-serif";font-size:16px;color:#fff;border-radius:33px; background-color:#222;transition:background-image .4s}
.intro__agree-btn::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:33px;background-image:linear-gradient(135deg,#1e9d90,#107fd5);opacity:0;transition:opacity .5s;}
.intro__agree-btn:hover::after{opacity:1;}
.intro__agree-btn__text{position:relative;z-index:10;}
@media(max-width:1280px){
  .intro .inner{padding:80px 70px;}
}
@media(max-width:970px){
  .intro .inner{padding:60px 40px;}
  .intro__list__num{width:80px; height:auto;}
  .intro__list-wrap{margin-bottom:50px;}
  .intro__list__desc{height:auto;padding:28px 20px 28px 10px;}
  .intro__agree-btn{width:300px;font-size:15px;}
}
@media(max-width:640px){
  .intro .inner{padding:40px 20px;}
  .intro__list{display:flex;flex-wrap:wrap;padding:20px 10px 20px 20px;}
  .intro__list__num{width:100%;text-align:left;padding-bottom:5px;}
  .intro__list__desc{padding:0;font-size:15px;}
  .intro__list-wrap{margin-bottom:40px;}
  .intro__agree-btn{width:240px;font-size:14px;}
  .intro__agree-btn__text{letter-spacing:-0.025em;}
}
@media(max-width:480px){
  .intro.main-frame{padding:60px 20px 0;}
}
@media(max-width:320px){
  .intro.main-frame{padding:60px 0 0;}
  .intro__list__desc{font-size:14px;line-height:1.7;}
  .intro__agree-btn{height:55px;}
}


/********************************************************
* symptom checker
*********************************************************/
.symptom-checker .inner{padding:90px 70px 130px;}
.symptom-checker .main-title{padding-left:20px}
@media (max-width:1280px){
  .symptom-checker .inner{padding:80px 40px;}
}
@media (max-width:970px){
  .symptom-checker .inner{padding:60px 30px;}
}
@media (max-width:640px){
  .symptom-checker .inner{padding:40px 20px;}
}
@media (max-width:480px){
  .main-frame.symptom-checker{padding:60px 20px 0;}
}
@media (max-width:320px){
  .main-frame.symptom-checker{padding:60px 0 0;}
}


/********************************************************
* symptom checker
*********************************************************/
.symptom-index .part-desc-wrap{padding:30px 20px;border-bottom:1px dashed #f2f4f5;}
.symptom-index .part-desc{margin-bottom:10px;}
.symptom-index .page-link-btn{padding-left:0px;padding-bottom:3px;border-bottom:1px solid #107fd5;}
.symptom-index .page-link-btn .text,
.symptom-index .page-link-btn .icon{color:#107fd5;font-weight: 500;}
@media(max-width:970px){
  .part-desc{font-size:17px;}
}
@media(max-width:640px){
  .symptom-index .part-desc-wrap{padding:20px 10px;}
  .symptom-index .part-desc{font-size:16px;}
  .symptom-index .page-link-btn .text{font-size:15px;}
}


/********************************************************
* Main
*********************************************************/
.main {position:relative;padding:50px 30px 0}
.main-frame{padding:70px 40px 0;}
.main-title{font-family:"inter","notokr","sans-serif";font-size:26px;font-weight:800;padding-bottom:20px;letter-spacing:.8px;border-bottom:2px solid #222;}
.main-inner{display:flex;flex-wrap:wrap;border-top:1px dashed #e9ecef;border-left:1px dashed #e9ecef}
.main-item{display:flex;align-items: center;justify-content: center;position:relative;width:33.33%;height:90px;color:#444;border-bottom:1px dashed #e9ecef;border-right:1px dashed #e9ecef;transition:color .8s;}
.main-item::after{content:"";display: block;position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(135deg,#1e9d90, #107fd5);opacity:0;transition:opacity .5s;}
.main-item__title{position:relative;font-family:"inter","notokr","sans-serif";font-weight: 400;text-align: center;z-index: 1;}
.main-item__title .sub-title{display:block;font-size:14px;color:#aaa;line-height: 1.28;}
@media (min-width:971px){
  .main-item:hover{color:#fff;border:none;}
  .main-item:hover::after{opacity:1;}
  .main-item__sub-title:hover{color:#fff;}
}
@media (max-width:1280px){
  /* .main-frame{padding:40px 40px 0;} */
  .main-title{font-size: 24px;}
  .main{padding:30px 0 0;}
  /* .inner{padding:60px 40px;} */
  .inner{padding:80px 40px;}
}
@media (max-width:970px){
  .main-title{padding: 0 0 15px;font-size: 20px;}
  /* .inner{padding:40px 30px} */
  .inner{padding:60px 30px;}
}
@media (max-width:768px){
  .main-item{width:50%;min-height:75px;height:auto;}
}
@media (max-width:640px){
  .main-title{font-size:19px;text-align:center;}
  /* .inner{padding:20px 20px 50px;} */
  .inner{padding:80px 20px 60px;}
  .main-item{padding:5px;}
  .main-item__title{font-size:15px;}
}
@media (max-width:480px){
  .main-frame{padding:70px 20px 0;}
}
@media(max-width:320px){
  .main-frame{padding:70px 0 0;}
  .main-item__title{font-size:14px;line-height:1.7;}
  .main-title{font-size:18px;}
}

/* cough */
.cough .question__opt-item.add-padding-bottom{padding-bottom:20px;}

/* edema */
.edema_5 .add-padding-bottom{padding-bottom:22px;}

/* headache */
.headache .question__opt-simple.add-padding-left{padding-left:38px; padding-bottom:6px;}
.headache .question__opt-simple.add-padding-left-bottom{padding-left:35px;padding-bottom:5px;}
.swelling_of_the_neck .question__opt-simple.add-padding-left{padding-left:38px;}


/********************************************************
* Footer
*********************************************************/
.footer{display:flex;flex-direction:column;padding-top:40px;padding-bottom:40px;}
.footer__copy{padding-bottom:10px;font-family:"inter","notokr","sans-serif";font-size: 14px;color:#666;text-align: center;letter-spacing:-0.023em;}
.footer .mail{display:block;margin:0 auto;font-family:"inter","notokr","sans-serif";font-size: 14px;color:#aaaaaa;text-align: center;letter-spacing:-0.023em;}
.footer .mail:hover{text-decoration: underline;}

/********************************************************
* Main
*********************************************************/
/* common */
label{position:relative;}
.img-wrapper{padding-bottom:65px;margin:0 -10px}
.img-wrapper .figure-img{width:50%;max-width:440px;max-height:400px;padding:20px;margin:0 10px;border:1px dashed #eee}
.img-wrapper .img{display:block;max-width:100%;max-height:100%;margin:0 auto;}

.question-wrapper{position:relative;padding-bottom:85px;}
.question__item{padding-bottom:30px;margin-bottom:35px;border-bottom:1px dashed #eee;}
.question__item.row{display:flex;flex-wrap:wrap;}
.question__item:last-child{margin-bottom:0;}
.question__title{display:block; width:100%; padding-bottom:15px;font-family:"inter","notokr","sans-serif";font-size: 17px;font-weight: 600;color:#444;letter-spacing: -0.05px;}
.question__title small{font-size:13px;font-weight:400;color:#999}
.optional{font-size:13px;font-weight:400;color:#999}
.question__select-wrap{padding-left:12px;}
/* .question__select-wrap.row{display:flex;flex-wrap:wrap;justify-content:space-between;} */
.question__select-wrap.row{display:flex;flex-wrap:wrap;}
.question__select-wrap.row label{margin-right:25px;}
.question__select-wrap.row-left{display:flex;flex-wrap:wrap;justify-content:flex-start;}
.question__select-wrap.row-left .question__opt-item{margin-right:25px;}
.question__select-wrap.col{display:flex;flex-direction: column;}
.question__select-wrap.row > label:last-child .question__opt-text{padding-right:0;}
.question__opt-text{display:inline-flex;align-items:baseline;position:relative;min-width:40px;padding-right:8px;margin-right:10px;font-size: 16px;color:#999;}
/* .question__opt-text{display:flex;align-items:baseline;position:relative;padding-right:8px;margin-right:10px;font-size: 16px;color:#999;} */
.question__opt-text .ic{position:relative;top:auto;vertical-align:baseline;padding-right:8px;font-size: 16px;color:#bbb;}
.chk-input{position:absolute;top:0;left:0px;width:1px;height:1px;overflow:hidden;opacity:0;font-size:0;}
.chk-input:checked + .question__opt-text{color:#222;}
.chk-input:checked + .question__opt-text .ic::before{content:"\e92b";color:#107fd5}

.question__sub-select{position:relative;padding-left:12px;padding-bottom:30px;}
.question__sub-select.wide label{width:100%;}
.question__sub-select:last-child{padding-bottom:0;}
.question__sub-select-title{padding-bottom:15px;font-weight:600;}
.question__opt-list{padding-bottom:20px;}
.question__opt-list:last-child{padding-bottom:0px;}
.question__opt-list .question__opt-title{padding-left:12px;padding-right:20px;margin-bottom:6px;color:#555;text-indent:-11px;}
.question__opt-list .question__opt-title.indent-none{padding-left:0px;text-indent:0;}
/* .question__opt-item{display:flex;flex-wrap:wrap;align-items:center;padding-bottom:14px;} */
.question__opt-item{display:flex;flex-wrap:wrap;align-items:center;padding-bottom:5px;}
.question__opt-item.col{flex-direction: column;}
.question__opt-item.sub{padding-left:25px;margin-top:5px;}
.question__opt-item.sub .question__select{padding-left:0px;}
.question__opt-item .title-num{position:relative;top:-3px;padding-left:0px;color:#555;}


.question__list input + .question__opt-text::after,
.question__list input + .ic::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid #107fd5;opacity:0;transition:opacity .3s, visibility .2s;}
.question__list input.focus + .question__opt-text::after,
.question__list input.focus + .ic::after{opacity:1;}
.question__list input.focus + .question__opt-text::after{left:-2px}
.question__list input.focus + .ic::after{top:-2px;right:-2px;bottom:-2px;left:-2px;}

.question__opt-title{width:100%;margin-bottom:8px;}
.question__opt-title small{font-size:14px;color:#888;}


.question__select{display:flex;flex-wrap: wrap;padding-left:12px;}
.question__select.wide label{width:100%;margin-bottom:5px;}
.question__select.related-picture{width:100%; margin:10px 0 15px;}
/* .question__opt-simple{padding-left:21px;margin-left:-5px;margin-bottom:-8px;} */
.question__opt-simple{padding-left:21px;margin-left:-5px;}
.question__opt-simple.padding-left-add{padding-left:38px;padding-right:20px;}

.question__opt-simple label{display:block;position:relative;min-width:15px;}
.question__opt-simple label > .ic{position:absolute;top:3px;left:-19px}

.question__opt-simple .chk-input-toggle,
.question__opt-simple .chk-input-none{display:block;width:0;height:0;overflow:hidden;opacity:0}
.question__opt-simple .chk-input-toggle + .ic::before{color:#bbb;}
.question__opt-simple .chk-input-toggle:checked + .ic::before{content:"\e92b";color: #107fd5;}
.label-text{font-size:16px;color:#999;}
.chk-input-toggle:checked ~ .label-text{color:#222;}
@media(max-width:970px){
  .question__opt-text{font-size:15px;}
  .question__opt-list .question__opt-title{font-size:15px;}
  .question__sub-select{font-size:15px; padding-bottom:15px;}
  .label-text{font-size:15px;}
}
@media(max-width:640px){
  .question__select.wide_640 label{width:100%;}
  .question__opt-item{padding-bottom:0px;}
  .question__opt-list, .question__opt-title{padding-right:0; width:100%;}
  .question__opt-title{margin-bottom:5px;letter-spacing:-0.01em;}
  .question__opt-item.sub{padding-left:12px;}
}
@media(max-width:480px){
  .question__sub-select{padding-left:7px;}
}
@media(max-width:320px){
  .label-text{font-size:14px;}
  .question__select{padding-left:8px;}
  .question__opt-item.sub{padding-left:10px;}
  .question__opt-simple{padding-left:15px;}
  .question__opt-simple label > .ic{left:-17px;}
  .question__opt-simple.padding-left-add{padding-left:32px;}
}

.page-btn-wrap{position:relative;}
.page-arrow-wrap{display: flex;justify-content:space-between;max-width:900px;padding-top:10px;margin:0 auto;}
.page-arrow-btn{position:relative;width:140px;font-family:"inter","notokr","sans-serif";font-size: 16px;color:#999999;}
.page-arrow-btn::before{content:"";display:block;position:absolute;top:50%;left:0;width:50px;height:50px;border-radius: 50%;border:2px solid #f0f0f0;transform:translate(0, -50%)}
.page-arrow-btn .text{position:relative;line-height:60px;}
.page-arrow-btn::after{content:"";display:block;position:absolute;top:50%;left:20px;width:42px;height:12px;background:url(/src/img/page-arrow-img.png) no-repeat 0 0;transform:translate(0 ,-50%)}
.page-arrow-btn.prev{text-align: right;}
.page-arrow-btn.prev .img{background-position:0 0;}
.page-arrow-btn.next::before{left:auto;right:0;}
.page-arrow-btn.next::after{left:auto;right:20px;background:url(/src/img/page-arrow-img.png) no-repeat -44px 0}
.page-first{display:flex;align-items: center;justify-content: center;position:absolute;top:50%;left:50%;width:250px;height:60px;font-weight: 600;color:#fff;background-color:#222;border-radius: 30px;border:2px solid transparent;transform:translate(-50%, -50%);transition:background-color .5s, border .5s;}
@media (min-width:971px){
  .page-arrow-btn:hover::before{border:2px solid #deedf9;}
  .page-arrow-btn:hover::after{background-position-y:-17px;}
  .page-arrow-btn:hover .text{color:#222;}
  .page-first:hover{color:#222;background-color:#fff;border:2px solid #222;}
}
@media (max-width:1280px){
  .img-wrapper{padding-bottom:40px;}
  .question-wrapper{padding-bottom:40px}
  .question__select-wrap.row{justify-content: flex-start;}
  .question__select-wrap.row .question__opt-item{margin-right:40px;}






}
@media (max-width:970px){
  .img-wrapper{margin:0 -5px;}
  .img-wrapper .figure-img{margin:0 5px;}
  .question-wrapper{padding-bottom:20px;}
  .question__title{font-size: 16px;}
  .question__item{padding-bottom:25px;margin-bottom:25px;}
  .question__select-wrap.row{padding-left:0;}
  /* .page-arrow-wrap{padding-top:0;} */
  .page-first{position:relative;margin-top:40px;transform:translate(-50% , 0)}
}
@media (max-width:768px){
  .main{padding:20px 0 0}
  /* .question__item{padding-bottom:15px;margin-bottom:15px;} */
  .page-arrow-btn::before{width:40px;height:40px;}
}
@media (max-width:640px){
  .img-wrapper.flex-wrap{flex-direction:column;padding-bottom:25px;margin:0;}
  .img-wrapper .figure-img{width:100%;max-width:300px;max-height:none;margin:5px auto;}
  .page-arrow-wrap{padding-top:30px;}
  .page-first{width:160px;height:50px}
}
@media (max-width:480px){
  .inner{padding:80px 20px 50px;}
  .page-arrow-btn .text{font-size:15px;line-height:1;}
  .page-arrow-btn{width:80px;}
  .page-arrow-btn.prev::after{display:none;}
  .page-arrow-btn.next::after{display:none;}
  .page-arrow-btn.prev::before{content:""; position:absolute;top:55%;left:5px;width:5px;height:5px;border:0;border-radius:0;border-left:1px solid #999;border-bottom:1px solid #999;transform:translateY(-50%) rotate(45deg);}
  .page-arrow-btn.next::before{content:""; position:absolute;top:55%;right:5px;width:5px;height:5px;border:0;border-radius:0;border-left:1px solid #999;border-bottom:1px solid #999;transform:translateY(-50%) rotate(225deg);}
}

@media(max-width:320px){
  .inner{padding:70px 20px 40px;border-radius:0;}
  .question__title{font-size:15px;}
  .question__opt-text{font-size:14px;}
  .page-arrow-wrap{padding-top:20px;}
  .page-first{width:150px;height:46px;font-size:15px;}
}

/* 1-3*/
.abdominal_pain .question__item.row .question__title{padding-right:20px;}


/********************************************************
* Result
*********************************************************/
.result__wrapper{padding-bottom:40px;}
.result__wrapper ~ .page-btn-wrap .page-arrow-btn.next{width:200px;}
@media(max-width:768px){
  .result__wrapper ~ .page-btn-wrap .page-arrow-btn.next{width:190px;}
}
@media(max-width:480px){
  .result__wrapper ~ .page-btn-wrap .page-arrow-btn.next{width:135px;}
}

.result__head{border-top:1px solid #107fd5;background-color:#f8fbfe;}
.result__cell{display:flex;align-items: center;justify-content: center;border-bottom:1px dashed #eee;}
.result__percent{width:44.44%;max-width:400px;}
.result__disease{width:55.55%;max-width:500px;}
.result__cell--head{height:70px;font-size: 17px;font-weight: 600;color:#222;border-bottom:1px solid #eee}
.result__list{width:100%;}
.result__item{display:flex;}
.result__cell--body{position:relative;min-height:90px;padding:25px;color:#999999;}
.result__cell--body.result__disease{justify-content: flex-start;padding:10px;}
.result__progress{position:relative;width:100%;height:40px;overflow:hidden;border:1px solid #e9ecef;border-radius:5px;background-color:#f8f8f8;}
.result__progress-bar{position:absolute;top:0;left:0;width:40%;height:100%;background:#107fd5;}
/* .result__progress-text{position:absolute;top:55%;left:30px;transform:translateY(-50%);} */
.result__progress-text{padding-left:20px; word-break:break-word;}
.result__progress-number{position:absolute;top:50%;left:20px;transform:translateY(-50%);font-size: 14px;color:#fff;font-weight: 600;}

.no-matching{display:block;margin:50px auto;text-align: center;}
.no-matching__title{padding:40px 0;font-size: 17px;color:#444444;letter-spacing: 0;}
.no-matching__msg{color:#999999;text-align: center;}

.ad__wrapper{margin:45px 0 55px;background-color:#eee;}
.ad__text{padding:100px 20px;color:#aaa;text-align: center;}

@media (max-width:1280px){
  .result__cell--body{padding:10px}
  .result__disease{max-width:none}
  .result__percent{max-width:none}
}
@media (max-width:970px){
  .ad__text{padding:60px 20px;}
}
@media (max-width:768px){
  .result__wrapper{padding-bottom:20px;}
  .result__head{display:none;}
  .result__item{flex-direction: column;}
  .result__item:first-child .result__disease{padding-top:0;}
  .result__percent, .result__disease{width:100%;max-width:none;}
  .result__cell--body.result__disease{order:1;padding:15px 0 0;border-bottom:none}
  .result__progress-text{padding-left:0;}
  /* .result__progress-text{position:static; top:0; left:0; transform:translateY(0)} */
  .result__cell--body{min-height:auto;}
  .result__cell--body.result__percent{padding:10px 0 20px;order:2;}
  .ad__wrapper{margin:20px 0;}
  .ad__text{padding:20px;font-size: 15px;}
}
@media(max-width:320px){
  .result__cell--body.result__disease{font-size:15px;}
}

/********************************************************
* Part Description
*********************************************************/
.part-desc-wrap{padding:40px 20px 30px;}
.part-desc{font-size:18px; color:#222;}
@media(max-width:970px){
  .part-desc-wrap{padding:40px 20px 20px;}
  .part-desc{font-size:17px;}
}
@media(max-width:360px){
  .part-desc-wrap{padding:40px 10px 10px;}
}

/********************************************************
* M Home Button
*********************************************************/
.m-home{display:inline-block;position:absolute;top:-25px;left:50%;text-align:center;transform:translateX(-50%);}
.m-home__icon-wrap{display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;background-color:#107fd5;}
.m-home__icon-wrap .icon{color:#fff;}
.m-home__text{font-weight:500; font-size: 14px; color:#107fd5;}

@media(max-width:320px){
  .m-home{top:-22px;}
  .m-home__icon-wrap{width:44px;height:44px;}
  .m-home__text{font-size:13px;}
}