/* 공용 */
@media (max-width: 1130px) {
    section > .itemArea{padding:0 30px;}
}

@media (max-width: 950px) {

    .mainSwiper .fixedBox{width: 100% !important;}
    .mainSwiper .fixedBox > .mainTit{font-size:30px;}

    header > .logo > a > img{height: 60px;}
}


@media (max-width: 769px) {
    html{font-size:8px;}
    section + section{margin-top:70px;}

    input[type=text], input[type=file], input[type=password], input[type=email], input[type=number], input[type=search], input[type=date], input[type=time]{font-size:13px; height: 45px; line-height: 45px;
    border-radius: 7px;}
    ::placeholder {font-size:13px;}
    
    .formItem > .datePicker{height:45px;}
    .formItem > .datePicker > input{border-radius: 7px; font-size:13px; height: 45px; line-height: 45px;}
    
    .select_box{height:45px; line-height: 43px; border-radius: 7px;}
    .select_box > select{font-size:13px !important;}
    .tabRadio label{height:45px; line-height: 45px; font-size:13px; display:flex; align-items:center; justify-content:center;}
    .tabRadio:not('.type2') label:first-of-type{border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
    .tabRadio:not('.type2') label:last-of-type{border-top-right-radius: 7px; border-bottom-right-radius: 7px;}
    .tabBtnArea{border-radius: 7px !important; height:45px;}
    .tabBtnArea > button{font-size:16px; padding:5px; width:45px; height:45px; display:flex; justify-content:center; align-items:center;}
    .notice,
    .notice2,
    .notice3,
    .notice4{font-size:13px;}
    
    .dateWrap{height:45px !important;}
    .dateWrap > .datePicker > input{height:45px !important;}
    
    .dateWrap > .select_box > select{font-size:20px !important;}
    .top > .dateWrap{height:auto !important;}
    
    .searchArea .btn{height:45px !important;} 
    .payInfo .searchWrap > button{height:45px !important;}

    .mainSwiper .swiper-slide{width: 96% !important; height:230px; overflow: hidden; border-radius: 15px;}
    .mainSwiper .swiper-slide > img{height:100%; object-position: center;}
    .mainSwiper .fixedBox{width: 100% !important; padding:0 30px; top: 45%;}
    .mainSwiper .fixedBox > .subTit{font-size:12px; margin-bottom:10px;}
    .mainSwiper .fixedBox > .mainTit{font-size:20px;}
    .mainSwiper .fixedBox > .paginationWrap{margin-top:20px;}

    .mainSwiper .fixedBox > .paginationWrap > .pagination .swiper-pagination-bullet{width:8px; height:8px;}
    .mainSwiper .pageBox{padding: 0; bottom: 0; width: 96% !important;  padding: 0 30px; }
    .mainSwiper .fixedBox > .link{margin-top: 15px; font-size: 1.4rem; height: 30px; line-height: 30px; width: unset; padding: 0 30px; }


}

@media (max-width: 500px) {

.mainSwiper .pageBox,
.mainSwiper .fixedBox{padding: 0 15px;}
.mainSwiper .swiper-slide{height:200px; }
.mainSwiper .fixedBox > .subTit{font-size: 11px}
.mainSwiper .fixedBox > .mainTit{font-size: 16px}
.mainSwiper .fixedBox{top: 20px; transform: translateX(-50%);}
.mainSwiper .swiper-slide > img{object-position: calc(100% - -40px) top;}



}

@media (max-width: 426px) {
    section > .itemArea{padding:0 20px;}
}

/* header */
@media (max-width: 1130px) {
    header{padding:0 30px; height:95px; position:fixed; top:0; left:0; right:0px; background-color: #fff; border-bottom:1px solid #bbb;}
    .pc{display: none !important;}
    .mo{display:flex !important;}
    header > .logo{width:150px; flex:none !important;}
}

@media (max-width: 426px) {
    header{padding:0 20px; height:80px;}
    header > .logo{width:140px;}
    .mo_navWrap{top:80px;}
}

/* footer */
@media (max-width: 1130px) {
    footer .wrap{padding:50px 30px;}
    .footTop > .footLogo{width:150px; flex:none !important;}
}

@media (max-width: 575px) {
    footer .wrap > div{display:block;}
    .footTop{margin-bottom:0px;}
    .footTop > .footNav{margin:50px 0 25px;}

    .footBottom > .info > .copy{margin:40px 0 50px; font-size:12px;}
}

@media (max-width: 426px) {
    footer .wrap{padding:50px 20px;}
    .footTop > .footLogo{width:140px; flex:none !important;}
}


/* main */
@media (max-width: 1130px) {
    main{margin-top:95px;}
    .mainVisualArea{margin-right:30px;}
    .mainVisualArea .txtArea{padding:0 30px;}

    .mainCon2{flex-wrap: wrap;}
    .mainCon2 > div{width:100%; flex:none !important;}

    .mainCon2 > .noticeArea{max-width: 100%; margin-bottom:5rem; margin-right:0px;}
    .rsBtnArea .txtArea{margin-top:50px;}
    .noticeArea > ul > li{width: 100%; justify-content: space-between;}


    header > .logo > a > img{height: 70px;}
    .mainSwiper .txtArea{bottom:20px;}
    .mainSwiper .txtArea > .txt{margin: 20px 0}
    .mainSwiper .txtArea > span{ font-size:2.6rem;}
    .mainSwiper .txtArea > .txt{margin: 20px 0}
    .mainSwiper .txtArea > .txt > span:first-child{font-size:3.4rem;}
    .mainSwiper .txtArea > .txt > span:last-child{font-size:8.5rem;}
    .service > .imgBox > img{width: 100%;}
}

@media (max-width: 769px) {
    .mainVisualArea{height:500px;}
    .mainVisual.img2 {background: url(../images/mainImg2.png) no-repeat right -160px center / cover;}
    .mainVisual > .smileImg{top:-35px; width: 315px; height: 345px;}


    header > .logo > a > img{height: 60px;}
}

@media (max-width: 675px) {
    .mainVisualArea{height:400px;}
    .mainVisual > .smileImg{top:-20px; width: 240px; height: 266px;}
    .mainVisualArea .txtArea > span{font-size:14px;}
    .mainVisualArea .txtArea > .txt{margin:10px 0;}
    .mainVisualArea .txtArea > .txt > span:first-child{font-size:30px;}
    .mainVisualArea .txtArea > .txt > span:last-child{font-size:90px;}
}

@media (max-width: 575px) {
	.mainCon1 > .linkBoxArea > div > a{flex-direction: column;}
	.mainCon1 > .linkBoxArea > div:nth-of-type(2n) > a{flex-direction: column-reverse;}
	.mainCon1 > .linkBoxArea > div > a > div{width:100% !important;}
	.mainCon1 > .linkBoxArea > div > a > .txtArea{text-align:left !important;}
	.mainCon1 > .linkBoxArea > div > a > .txtArea > .iconBox{display:none;}

    .appDownWrap{height:400px;}
    .appDownWrap > .appDownArea > .txt{font-size:30px;}
    .appDownWrap > .appDownArea > .buttonArea{margin-top:40px; max-width:350px;}
    .appDownWrap > .appDownArea > .buttonArea > button{width:calc((100% / 2) - 5px) !important; font-size:15px !important; padding:15px 20px !important;}
    
    .boardList > ul > li > div.sub > div{position:relative;}
    .boardList > ul > li > div,
    .boardList > ul > li > div.sub > div{flex-wrap:wrap;}
    .boardList > ul > li > div.main > .checkbox{top:15px; transform:translateY(0);}
    .boardList > ul > li > div .tit > span{width:auto; height:auto; font-size:13px; padding:5px 10px; border-radius:5px;}
    .boardList > ul > li > div .con{padding:10px 0 0 0; width:100% !important;}
    .boardList > ul > li > div.main > span,
    .boardList > ul > li > div .editDate{position:absolute; top:15px; right:15px;}
    
    .boardList > ul > li > div.main > .starArea{margin-top:10px;}
     
    .boardList.type2 > ul > li > div.sub > div > .editDate{position: static; margin-top: 5px; width:100%; text-align: right;}

    .mainSwiper .txtArea > span{ font-size:1.2rem;}
    .mainSwiper .txtArea > .txt > span:first-child{font-size:2rem;}
    .mainSwiper .txtArea > .txt > span:last-child{font-size:5rem;}
}

@media (max-width: 426px) {
    main{margin-top:80px;}
    .mainVisualArea{height:295px; margin-right:20px;}
    .mainVisualArea .txtArea{padding:0 20px; bottom:30px}
    .mainVisualArea .txtArea > .txt > span:first-child{font-size:25px; margin-right:10px;}
    .mainVisualArea .txtArea > .txt > span:last-child{font-size:60px;}
    .mainVisual > .smileImg{top: -15px; width: 50%; height: 220px;}

    .mainCon2 > .noticeArea{padding:25px 25px 15px;}
    .rsBtnArea > a{padding:25px;}
    
}


/* sub */
@media (max-width: 1130px) {
	.subWrap.type2{padding:10rem 30px;}
	
	.subTop > .suvVisual{height:40rem;}
	.subTop > .suvVisual > .txtBox > .m > span:nth-of-type(2){font-size:3.5rem;}
	.subTop > .suvVisual > .txtBox > .s{font-size:2.5rem;}
	.subTop > .suvVisual > .txtBox > .s > span{font-size:20px;}
}

@media (max-width: 990px) {
	.subTop > .suvVisual{height:auto; padding:40px; align-items:center;}
	.subTop > .suvVisual > .txtBox{height:auto; flex-direction: column; padding:0px; display:inline-block; text-align:center;}
	.subTop > .suvVisual > .txtBox > div{display:block;}
	.subTop > .suvVisual > .txtBox > .m > span:nth-of-type(2){display:inline-block; margin-top:20px;}
	.subTop > .suvVisual > .txtBox > .s{margin-top:40px;}
}

@media (max-width: 892px) {
	.meflow > div{width: calc((100% / 5) - 20px);}
	.meflow.col6 > div{width:calc((100% / 6) - 20px);}
	.meflow > div + div:before{left:-23px;}
}
@media (max-width: 769px) {
    .joinArea .formItem > .notice{font-size:13px;}
    .joinArea .formItem > .itemList > .checkbox > label{font-size:14px;}

    .service .svListBox.type0 > .head > .name{font-size:13px;}
    .service .svListBox .state{font-size:13px;}
    .service .svListBox:not(.type0) > .con > .top > .info > .nameInfo > .name{font-size:19px;}
    .service .svListBox:not(.type0) > .con > .top > .info > .nameInfo > .info{font-size:13px;}
    .service .svListBox:not(.type0) > .con > .top > .info > .aboutMe{font-size:13px;}
    .service .svListBox:not(.type0) > .con > .top > .info > .aboutMeBtn{font-size:13px;}
    .service .svListBox:not(.type0) > .con > .top > .info > .career > .tit,
    .service .svListBox:not(.type0) > .con > .top > .info > .career > .con{font-size:13px;}

    .service .svListBox:not(.type0) > .con > .mid > ul > li > .tit{font-size:13px;}
    .service .svListBox:not(.type0) > .con > .mid > ul > li > span:nth-of-type(2){font-size:13px;}
    .service .svListBox:not(.type0) > .con > .mid > ul > li > span:nth-of-type(3){font-size:12px;}

    .service .svListBox:not(.type0) > .con > .mid > span{font-size:12px;}
    .service .svListBox:not(.type0) > .con > .mid > a{font-size:13px;}
    .service .svListBox.type1 .bottom{font-size:13px;}

    .service .svListBox:not(.type0) > .con > .top > .info a{font-size:13px;}
    .service .svListBox:not(.type0) > .con > .top > .info a:after{transform: translateY(-53%);}

    .service .svListBox:not(.type0) > .con > .top > .info > .userInfo > li > span{font-size:12px;}
    .service .svListBox:not(.type0) > .con > .top > .info > .userInfo > li > div{font-size:13px;}

    .payListWrap .payListBox > .info > li > ul > li{font-size:13px;}


    .agreeArea .agreeBox > .top > span{font-size:13px;}
    
    .btn.sizeM{font-size:14px; padding:0 20px; height:40px; line-height:40px; border-radius:7px;}
    .btn.sizeS,
    .btn.sizeSS{font-size:13px; padding:0 20px; height:30px; line-height:30px; border-radius:7px;}
    
    .formItem.btnBox > div > button,
    .btnInput > .sizeS{height:45px; line-height:45px;}

    .tabRadio.type3{flex-wrap: wrap;}
    .tabRadio.type3 input[type=radio] + label{width:calc(100% / 3);}

    .formItem > .itemList > .checkbox > label{font-size:13px;}

    .modalPopArea .textArea > span{font-size:13px;}
    
    .userListBox{border-radius:15px;}
    
    .noticeBox > ol > li{font-size:13px;}
    .radioBox.type2 > label > .styledBox + span{font-size:13px;}

    .photoPop .con,
    .dialogPop .con{height: calc(100% - 72px);}

    .photoPop .con .photoArea > label > div{height: calc(100% - 46.8px);}
    .photoPop .con .photoArea{height: calc(100% - 50px);}
    
    .userIdSearch .formItem + .formItem{margin-top:20px;}
    
    
    .meflow{flex-direction: column; align-items: center;}
    .meflow > div{width:200px !important;}
    .meflow > div + div{margin-left:0px; margin-top:30px;}
    .meflow > div + div:before{content: "\e942"; left:50%; top:-25px; transform:translate(-50%, 0);}
    
    .dialogPop .con > .viewArea > .dialog.left > .text > span,
    .dialogPop .con > .viewArea > .dialog.right > .text > span{font-size:13px;}
}


@media (max-width: 700px) {
	.tableStyle:not(.type2),
	.tableStyle:not(.type2) > tbody{display:inline-block; width:100%;}
	.tableStyle:not(.type2) > thead{display:none;}
	
	.tableStyle:not(.type2) > tbody > tr{display:inline-block; width:100%; position:relative;}
	.tableStyle:not(.type2) > tbody > tr:after{content: "\e93e"; font-family:xeicon; display:inline-block; position:absolute; top:50%; right:10px; transform:translateY(-50%); font-size:20px;}
	.tableStyle:not(.type2) > tbody > tr:first-child{border-top:1px solid #ddd;}
	.tableStyle:not(.type2) > tbody > tr > td{display:inline-block;}
	.tableStyle:not(.type2) > tbody > tr > td:first-child,
	.tableStyle:not(.type2) > tbody > tr > td:last-child{display:none;}
	.tableStyle:not(.type2) > tbody > tr > td:nth-of-type(2){width:100%; font-weight:600; font-size:20px; padding: 10px 40px 0 10px;}
	.tableStyle:not(.type2) > tbody > tr > td:nth-of-type(3),
	.tableStyle:not(.type2) > tbody > tr > td:nth-of-type(4){font-size:13px; color:#777; padding:0 10px; margin:10px 0;}
	
	.tableStyle:not(:hasClass("type2")) > tbody > tr > td:nth-of-type(3){position:relative; border-right:1px solid #777;}
	
	
	.flexBox{flex-direction:column; align-items:center;}
	.flexBox.reverse{flex-direction: column-reverse;}
	.flexBox > .txtBox{width:100%;}
	.flexBox > .imgWrap{margin-left:0px; margin-right:0px !important; margin-top:40px; width:100%; max-width:100%;}
	.flexBox > .txtBox > .noti{margin-top:20px;}
}

@media (max-width: 525px) {
	.formItem > .itemList > .item{width: calc((100% / 2) - 7px) !important;}
}

@media (max-width: 476px) {
	.radioBoxWrap > div{gap:10px 15px; justify-content:flex-start;}
	.radioBoxWrap > div > .radioBox + .radioBox{margin-left:0px;}
	
	.searchArea{flex-wrap:wrap;}
	.searchArea .select_box{width:100%; margin-bottom:10px;}
	
	.searchArea .dateWrap{margin-left:0px; width:calc(100% - 90px);}
	.searchArea .dateWrap > .datePicker{width:calc(50% - 15.5px);}
	.searchArea > button{width:70px; flex-shrink:1;}
	
	.service .svListBox:not(.type0) > .con{padding:25px 30px;}
	
	.service .svListBox.type0 .patientInfo2{padding:15px;}
	.service .svListBox.type0 .patientInfo2 > ul{flex-wrap:wrap;}
	.service .svListBox.type0 .patientInfo2 > ul > li{width:100%;}
	.service .svListBox.type0 .patientInfo2 > ul > li > span{margin-bottom:5px;}
	.service .svListBox.type0 .patientInfo2 > ul > li + li{margin-top:20px;}
	
	.reportPop .tableWrap.type2 .tr > .th{width: 80px;}
	.reportPop .tableWrap.type2 .tr > .td{font-size:14px; width:calc(100% - 80px);}
}

@media (max-width: 426px) {
	.subTop{padding-top:50px;}
	.subWrap,
	.subWrap.type2{padding: 50px 20px;}
    .joinArea .formItem > .itemList > .item{width:100%;}
	
	.caddyList .itemBox,
    .service .svListBox{border-radius: 15px; box-shadow: 0 0 7px 0px rgba(0,0,0,0.2);}
    .service .svListBox.type0 > .patientInfo2 > ul{flex-direction: column; gap: 5px 0;}
    .service .svListBox.type0 > .patientInfo2 > ul > li{display:flex; font-size: 13px; flex-wrap: wrap;}
    .service .svListBox.type0 > .patientInfo2 > ul > li > span{margin-bottom:0px; margin-right:10px; flex-shrink: 0; width:50px; font-size:13px;}
    .service .svListBox.type0 > .patientInfo2 > ul > li > div{width:calc(100% - 60px);}
	
	.caddyList .itemBox > .con,
    .service .svListBox:not(.type0) > .con{padding:20px;}
    .caddyList .itemBox > .con > .top > .photo,
    .service .svListBox:not(.type0) > .con > .top > .photo{display: none;}
    .service .svListBox:not(.type0) > .con > .top > .info > .career{margin-bottom:10px;}
    .caddyList .itemBox > .con > .mid,
    .service .svListBox:not(.type0) > .con > .mid{padding:10px 0;}

    .service .svListBox:not(.type0) > .con > .btnArea.col3{flex-wrap:wrap;}
    .service .svListBox:not(.type0) > .con > .btnArea.col3 > button:not(:last-of-type){width: calc((100% / 2) - 5px);}
    .service .svListBox:not(.type0) > .con > .btnArea.col3 > button:last-of-type{width:100%; margin-top:10px;}

    .payListWrap .payListBox > .info{flex-wrap:wrap; gap:20px;}
    .payListWrap .payListBox > .info > li{width:calc((100% / 2) - 10px);}
    
    .caddyList .itemBox > .con > .top > .info > .career{margin:20px 0 5px;}
    .caddyList .itemBox > .con > .top > .info > ul{margin-bottom:10px;}
    
    
    .userListBox > .head{padding:5px 13px;}
    .userListBox > .userInfo{padding:15px 13px;}
    .userListBox > .userInfo > ul{justify-content:space-between;}
    
    .userListBox.type0 > .head{padding:13px;}
    
    .listTable.type2 > .tr > .td:first-child{width:110px;}
    
    .payWrap > .bottom > .notice3{font-size:14px;}
    
    .modalPopWrap > .modalPopArea > .header{padding:20px;}
    .modalPopWrap > .modalPopArea > .con{padding:0 20px 20px;}
    .dialogPop .con > .viewArea{padding:0 20px 20px;}
    
    .tabRadio.type2{flex-wrap: wrap;}
    .tabRadio.type2 input[type=radio] + label{width:calc(100% / 2);}
    
    .boardList > ul > li > div.main > .txtBox > ul{flex-direction: column;}
    .boardList > ul > li > div.main > .txtBox > ul > li + li{margin-left:0px; margin-top:5px;}
    
    .subTop > .suvVisual > .txtBox > .m > span:nth-of-type(2){font-size:20px; margin-top:10px;}
    .subTop > .suvVisual > .txtBox > .s{font-size:15px;}
    .subTop > .suvVisual > .txtBox > .s > span{font-size:13px;}
    
    .service > .textBox{flex-direction: column;}
    .service > .textBox > span{margin-left:0px !important; text-align:center; width:100% !important;}
    .service > .textBox > span + span{margin-top:10px;}
    
    .pcbr{display:none;}
    
}

/* 메인팝업 */
@media (max-width: 476px) {
	.openPopWrap > .openPop{max-width:90%;}
}