@font-face {
    font-family: 'NanumSquareRound';
    font-weight: 300;
    font-style: normal;
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquareRoundL.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareRound';
    font-weight: 400;
    font-style: normal;
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquareRoundR.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareRound';
    font-weight: 500;
    font-style: normal;
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquareRoundB.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareRound';
    font-weight: 700;
    font-style: normal;
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumSquareRoundEB.woff2) format('woff2');
    font-display: swap;
}

@font-face {
	font-family: 'SpoqaHanSansNeo';
	src: url('fonts/SpoqaHanSansNeo-Regular.otf') format('opentype'); /* Regular 폰트 */
	/* 서버에서 실제 폰트 파일의 경로를 정확히 지정해야 합니다. */
	font-weight: normal; /* 폰트 두께 지정 */
  }
  
  @font-face {
	font-family: 'SpoqaHanSansNeo';
	src: url('fonts/SpoqaHanSansNeo-Bold.otf') format('opentype'); /* Bold 폰트 */
	/* 서버에서 실제 폰트 파일의 경로를 정확히 지정해야 합니다. */
	font-weight: bold; /* 폰트 두께 지정 */
  }
  
  @font-face {
	font-family: 'SpoqaHanSansNeo';
	src: url('fonts/SpoqaHanSansNeo-Light.otf') format('opentype'); /* Light 폰트 */
	/* 서버에서 실제 폰트 파일의 경로를 정확히 지정해야 합니다. */
	font-weight: 300; /* Light 폰트는 보통 300으로 지정 */
  }
  
  @font-face {
	font-family: 'SpoqaHanSansNeo';
	src: url('fonts/SpoqaHanSansNeo-Medium.otf') format('opentype'); /* Medium 폰트 */
	/* 서버에서 실제 폰트 파일의 경로를 정확히 지정해야 합니다. */
	font-weight: 500; /* Medium 폰트는 보통 500으로 지정 */
  }


html {max-width:500px; margin:0 auto; max-height:1024px; background:#fff}
body {  height: 100%; letter-spacing: -0.01em; color:#111; font-family: 'NanumSquare'; }
input[type="password"] { font-family: 'NanumSquareRound';}
select { font-family: 'NanumSquareRound';}

.NS { font-family: 'NanumSquareRound' !important; }

/*-- 모달 오픈 시 최상단 이동 방지--*/
html.no-overflowscrolling {
    overflow: visible !important;
}

*::-webkit-scrollbar { display: none; }
* { outline-style: none; }
a {color:#111}
input {color:#111}
:root {
  --ptSkyBlue : #E1EBF5;
  --ptBlue : #0F3999;
  --ptMustard : #F9E492;
  --ptYellow : #FFC800;
  }
/*----------------------layer popup----------------------*/
#layerPopup .modal-content { background-color: transparent; }
#layerPopup .modal-content .popup-close { display: flex; justify-content: space-between; margin: 10px 30px; font-size: 14px; color: white; }
#layerPopup .modal-content .popup-close img { width: 20px; }
#layerPopup .modal-content .popup { height: auto; max-height: 50vh; max-width: calc(100% - 20px); margin: 0 20px; border-radius: 20px 20px 0 0; object-fit: cover; }

/*----------------------layer popup----------------------*/

/*----------------------swal----------------------*/
.swal2-container { z-index : 90001 !important; padding:1.5em !important;}
.swal2-title { font-size: 1em !important; padding: 1em 1em 0 !important; line-height:1.4}
.swal2-styled.swal2-confirm { background-color: #194A9E !important; }
body.swal2-height-auto { height: 100% !important; }
.swal2-shown { padding: 0 !important; }
.swal2-actions {width:100% !important}
.swal2-actions button {width:45%; border:0 !important; height:38px; font-size:1em !important}
.swal2-styled {border:0 !important; transition:none !important; box-shadow:none !important; padding:0 !important; text-align:center; margin:0 !important}
.swal2-actions button:last-child {margin-left:3% !important}
.swal2-styled.swal2-cancel {background:#ddd !important; color:#555 !important}
/*----------------------swal----------------------*/

/*----------------------modal----------------------*/
body.modal-open, .modal-open .modal {}
.modal {max-width:500px; margin:0 auto; right:0}
.modal-fullscreen {width:100%}
.modal-header {height:60px;}
.modal-header img { position: absolute; left: 10px; top: 20px; }
.modal-header .close-btn { left: unset; right: 15px; height:18px; width:auto}
.modal-header .modal-title { width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 20px; font-weight:bold;}

/*이용약관 보기 모달*/
#termModal .modal-header h5 {margin-top:120px; text-align:left; font-size:20px; font-weight:bold}
#termModal .modal-body {margin-top:40px}
/*----------------------modal----------------------*/

/*----------------------공통----------------------*/

  body { display: flex; padding: 0 !important; flex-direction: column; justify-content: space-between; }
  .bottom-menu {
    display: flex; width: 100%; height: 68px; padding: 10px; justify-content: space-around; text-align: center;
    border-top:1px solid #eee; position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:500px; background:#fff;
    z-index: 100;
  }
  .bottom-menu li { width: 20%; font-size: 10px; color: gray; }
  .bottom-menu .menu-img { display: block; width: auto; height: 21px; margin: 5px auto; }
  .bottom-menu .active { color: var(--ptBlue); }
  .tab { display: none;}
  .disabled { background-color: #C8C8C8 !important; }
  input[type='date']::before {
    content: attr(data-placeholder);
    width: 100%;
  }

  input[type='date']:focus::before,
  input[type='date']:valid::before {
    display: none;
  }

  .help { color: gray; font-size: 14px; }
  /*----------------------공통----------------------*/

/*----------------------로그인----------------------*/
.p-logo { margin: auto; }
#loginImg { width: 100%; height: auto; object-fit: contain; }
#loginSection { display: none;}
#loginSection .input {margin-bottom:13px}
#loginSection input { height: 40px; border-radius: 20px; margin-bottom:0; padding:6px 20px; color:#777}
.eyoom-form section {margin-bottom:0 !important}
#loginSection .other-login {
  font-size: 16px;  color: gray; font-weight:500; text-decoration:underline !important; display:block;
  margin-top:20px
}
.sns-login-msg { width: 200px; margin: 10px auto; padding: 5px; background-color: #3D6EF3; border-radius: 20px; color: white;
                  -webkit-animation: action 1s infinite  alternate; animation: action 1s infinite  alternate;
                }
.sns-login-msg::before { position: absolute; bottom: -8px; left: calc(50% - 15px); content: '';
                          border-top: 15px solid #3D6EF3; border-right: 15px solid transparent; border-left: 15px solid transparent;
                        }
@-webkit-keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

@keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}
/*----------------------로그인----------------------*/

/*----------------------소셜로그인----------------------*/
.inner-container {display:block !important}
.inner-container .header {
  padding: 15px; margin-bottom: 10px; text-align: center; height:60px; position:fixed; top:0; left:0; right:0;
  background:#fff; z-index:3; color:#111; max-width:500px; margin:0 auto; width:100%; font-family: 'NanumSquareRound';
}
.board-list {margin-top:70px}
.inner-container .body {margin:61px 0 50px}
.inner-container .body .tabs__content {margin-top:40px}
#diseaseContainer.inner-container .body .tabs__content {margin-top:0}
.inner-container .header img { position: absolute; top: 50%; transform:translateY(-50%); left: 15px; height:19px; width:auto}
.inner-container .header .close-btn { left: unset; right: 15px; }
.inner-container .header h2 { margin: auto; line-height: 30px; font-size:20px; font-weight:bold; color:#111}
.inner-container .title h2 { margin: 60px 0 0; padding: 15px; font-weight:bold; font-size:20px; line-height:31px}
/* .inner-container .body { padding: 15px; } */
.inner-container .footer { position:absolute; bottom: 15px; width: calc(100% - 30px); }
.submit-btn {
  width: calc(100% - 30px); margin: 15px; height: 50px; color: white; background-color: var(--ptBlue);
  border: 0; text-align: center; border-radius: 40px; font-size: 17px; font-weight:bold; line-height:50px
}
.submit-btn:disabled { color: gray; background-color: #EFEFEF; }

.term-section {padding:0 15px}
.term-section .term-list { display: flex; flex-direction: column; margin: 20px 0; padding: 20px; border: 1px solid #EFEFEF; border-radius: 20px; }
.term-section .round { position: relative; height: 25px; margin: 5px 0; padding-left: 20px; line-height: 25px; font-weight:bold; color:#777; font-size:15px}
.term-section .term-list .round {font-size:14px; line-height:20px; padding-left:17px; margin:10px 0; height:20px}
.term-section .round .show-term {
  position: absolute; right: 0; border-bottom: 1px solid #B8B8B8; color: #B8B8B8; font-size:13px; line-height:14px; margin-top:3px
}
.term-section .round label {
  position: absolute; top: 0; left: 0; width: 25px; height: 25px;  border-radius: 50%;
  background:url(/img/mobile/check.png) no-repeat center center; background-size:cover;
}
.term-section .round label:after { position: absolute; top: 5px; height: 9px; width: 14px; left: 5px; border-top: none; border-right: none; content: ""; opacity: 0; transform: rotate(-45deg); }
.term-section .round input[type="checkbox"] { visibility: hidden; }
.term-section .round input[type="checkbox"]:checked + label { background:url(/img/mobile/checked2.png) no-repeat center center; background-size:cover; }
.term-section .round input[type="checkbox"]:checked + label:after { opacity: 1; }
.term-section .term-list  .round label {width:20px; height:20px}
#termModal #termContent { width: 100%; height: calc(100% - 30px); border: 0; resize: none; overflow-y: auto; outline-color: white; color:#555}
#termModal #agreeBtn { width: 100px; height: 45px; color: white; background-color: var(--ptBlue); border: 0; font-weight:bold; padding: 10px; text-align: center; border-radius: 20px; font-size: 17px; }
/*----------------------소셜로그인----------------------*/

/*----------------------아이디/비밀번호찾기----------------------*/
.type-field { display: flex; }
.type-field li { width: 50%; height: 50px; margin: 10px; border: 1px solid #EFEFEF; text-align: center; border-radius: 20px;
                              line-height: 50px; font-size: 18px; font-weight: bold; transition: color 0.7s ease; transition: background 0.7s ease; }
.type-field li.active { border: 0; color: white; background-color: var(--ptBlue); }

.find-info h3 {display:none;margin-bottom:30px;text-align:center;font-size:1.1em;}
/* .find-info .new_win_con {background:#f7f7f7;} */
.find-info.cert .new_win_con {width:460px;float:left;}
.find-info.cert .new_win_con:nth-child(2) {margin-left:10px;}
.find-info.cert h3 {display:block;}
.find-info #mb_hp_label {display:inline-block;margin-left:10px}
.find-info p {line-height:1.5em}
.find-info .frm_input {margin:10px 0; padding-left: 10px; border:0; border-bottom: 1px solid #EFEFEF; }
.find-info .find_btn .btn_submit {width:30%;word-break:keep-all;}

#emailSection, #pwSection { margin-top: 20px; }
/*----------------------아이디/비밀번호찾기----------------------*/

/*----------------------회원가입----------------------*/
#registrationForm { height: 100%; width: 100%; }
.flex-container { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; overflow-y: auto; }
.password-check-text { display: flex; margin: 0; font-size:14px }
.password-check-text li { display: inline-block; color: gray; }
.password-check-text li:first-child { margin-right: 10px; }
.password-check-text li.active { color: var(--ptBlue); }
.post_search .placeholder {font-size:14px}
/*----------------------회원가입----------------------*/

/*----------------------이름,휴대전화번호,닉네임 입력----------------------*/
.inner-container .section { display: flex; flex-direction: column; }
.inner-container .section input[type="text"], .inner-container .section input[type="password"],  .inner-container .section select{
   width: 100%; margin: 10px 0; padding: 7px 0; border: 0; border-bottom: 1px solid #D8D8D8; outline-style: none; font-size:15px;
   border-radius:0 !important
 }
.inner-container .rinfo_box {padding:0 15px;}
.inner-container .rinfo_box .ibox {margin:15px 0}
.inner-container .rinfo_box .ibox .t_text {font-weight:bold; font-size:14px; color:#333}
#emailResult,#nickResult { margin: 0 0 15px 0; font-size:13px}
.inner-container .section #hp_cert1 { display: grid; grid-template-columns: 60% 40%; }
.inner-container .section #hp_cert2 { display: none; grid-template-columns: 60% 40%; }
.inner-container .section #hp_cert2 div { position: relative;}
.inner-container .section #cert_btn, .inner-container .section #check_cert_btn { height: 50px; margin: 10px 0 0 10px; padding: 5px 10px; border-radius: 30px; background-color: #34D32C; color: white; border: 0; }
.inner-container .section #resend_cert_btn { height: 50px; margin: 10px 0 0 10px; padding: 5px 10px; border-radius: 10px; border: 1px solid #34D32C; color: #34D32C; background-color: white; }
.inner-container .section #cert_countdown { right: 10px; position: absolute; top: 25px; }
.fail { color: red; }
.success { color: var(--ptBlue); }

.inner-container .section #certifyBtn {
  margin:-25px 15px 0;height: 40px; line-height: 40px; color: #194A9E; width:50%;
 border: 1px solid #194A9E; padding: 0; text-align: center; border-radius: 20px; font-size: 15px;
}
.inner-container .section #RRN_field { display: grid; grid-template-columns: calc(50% - 20px) 40px 40px calc(50% - 60px); }
.inner-container .section #RRN_field input[type="text"] { padding-left : 15px; }
.inner-container .section #RRN_field .hyphen { line-height: 70px; text-align: center; }
input:-internal-autofill-selected {background-color:transparent !important}
#addressField { position: relative;}
#searchAddress{ position: absolute; right: 0; top: 5px; padding: 7px 15px; background-color: #C7C7C7; border: 0; border-radius: 20px; color: white; }
#passBtn { display: none; margin: auto; border: 0; background-color: white; font-size: 16px; color: gray; text-decoration: underline; }

/*----------------------이름,휴대전화번호,닉네임 입력----------------------*/

/*----------------------아이 등록----------------------*/
.flex-container .body { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 60px); margin: 60px 0 0; }
.pet-section { width: 100%; padding: 15px; }
.pet-section .pet-img { position: relative; width: 60%; }
.pet-section .pet-img:after { content: ""; display: block; padding-bottom: 100%; }
.pet-section .pet-img:last-child { float: right; margin-top: 20px; }
.pet-section .pet-img img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; }

.enroll-section { display: flex; flex-direction: column; padding: 15px; }

.enroll-section .pet-img { position: relative; width: 40%; margin: 30px auto; }
.enroll-section .pet-img:after { content: ""; display: block; padding-bottom: 100%; }
.enroll-section .pet-img img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; }
.enroll-section .camera-icon { position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; }
.enroll-section .camera-icon:after { content: ""; display: block; padding-bottom: 100%; }
.enroll-section .camera-icon img {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%;
  height: 100%; object-fit: cover; object-position: center; border-radius: 50%;
}
.enroll-section #petProfile { border: 1px solid #EEEEEE; }
.enroll-section #petProfile-file { display: none;}
#profileModal #button { width: calc(100% - 30px); margin: 10px; height: 50px; color: white; background-color: var(--ptBlue); border: 0; padding: 10px; text-align: center; border-radius: 20px; font-size: 16px; }
#profileModal #cancelBtn { width: calc(100% - 30px); margin: 10px; height: 50px; color: white; background-color: gray; border: 0; padding: 10px; text-align: center; border-radius: 20px; font-size: 16px; }

/* .enroll-section > div {margin:5px 0} */
.enroll-section .pet-info {
    font-size:1em; width: 100%; height: 40px;margin: 5px 0;
    border: 0; border-bottom: 1px solid #D8D8D8; background-color: white;
    -webkit-appearance: textfield; border-radius:0 !important;
    -moz-appearance: textfield;
    text-align:left;
    min-height: 1.2em;}
.enroll-section label { margin: 10px 0 0; font-weight: bold; font-size:14px}
.enroll-section .name-section { display: grid; grid-template-columns: calc(100% - 116px) 60px 60px; }
.enroll-section .name-section label { grid-column : 1/4; }
.enroll-section .name-section .sex {
  width: 54px; height: 40px; margin: auto; line-height: 40px; border-radius:5px; border: 1px solid #D8D8D8;
  color: gray; text-align: center; font-size:13px;
 }
.enroll-section .name-section .sex.active { border : 0; transition: color 1s ease; transition: background 1s ease; background-color: var(--ptBlue); color: white; }
#petBirthday::before { content: attr(data-placeholder); width: 100%; color: gray; }
#petBirthday:focus::before, #petBirthday:valid::before { display: none; }
.enroll-section #similarSection { display: none; margin: 10px 0 0; flex-direction: column; }
.enroll-section #similarSection .similar-fields { display: flex; }
.enroll-section #similarSection .similar-fields .pet-info:first-child { margin-right: 5px; }
.enroll-section #similarSection .similar-fields .pet-info:last-child { margin-left: 5px; }

.enroll-section .round { position: relative; height: 20px; margin: 10px 0; padding-left: 14px; line-height: 20px; color: #AEAEAE;font-size:15px}
.enroll-section .round label {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px;
  margin: 0; background:url(/img/mobile/check.png) no-repeat center center; background-size:cover; border-radius: 50%;
}
.enroll-section .round label:after {color:transparent; position: absolute; top: 5px; height: 9px; width: 14px; left: 5px; margin: 0; border: 0; border-top: none; border-right: none; content: ""; opacity: 0; transform: rotate(-45deg); }
.enroll-section .round input[type="checkbox"] { visibility: hidden; }
.enroll-section .round input[type="checkbox"]:checked + label {
  margin: 0; background:url(/img/mobile/checked2.png) no-repeat center center;
  background-size:cover;
}
.enroll-section .round input[type="checkbox"]:checked + label:after { opacity: 1; }

#breedModal .modal-body { padding : 0; }
#breedModal .space { height: 6px; background-color: #EFEFEF; }
#breedModal #searchBreed {
  width: calc(100% - 30px); height:48px; line-height:48px;padding: 0 15px; margin: 10px 15px 20px; border-radius: 10px;
  border: 1px solid #E4E4E4; background-color: white; background-image: url('../img/mobile/search_icon.png');
  background-position:calc(100% - 15px) center; background-repeat: no-repeat; background-size: 14px auto; color:#999; font-weight:bold;
}
#breedModal #breedList { height: calc(100% - 80px); overflow-y: auto; }
#breedModal #breedList .breed-row { height: 50px; padding-left: 15px; font-size: 16px; line-height: 50px; border-bottom: 1px solid #EFEFEF;}
#breedModal #breedList .breed-row .correct { color: var(--ptYellow);}

#shareInput { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #D8D8D8; border-radius: 10px; }
#shareRequestList { margin: 20px 0; }
#shareRequestList .share-request { justify-content: space-between; }
#shareRequestList .share-request a { color: var(--ptBlue); margin: 0 10px; }

.pet-button { display: flex; justify-content: space-between; padding: 0 15px; }
#addMasterBtn { border: 0; background-color: white; text-align: center; text-decoration: underline; font-size: 16px; }
#deleteBtn { border: 0; background-color: white; text-align: center; text-decoration: underline; font-size: 14px; color: gray; }
/*----------------------아이 등록----------------------*/

/*----------------------아이 정보----------------------*/
.i_slider #geneTabBar {display:none}
.inner-container .body .top_fix .tabs__content {white-space:nowrap;}
.inner-container .body .top_fix .tabs__content > div {float:left;}
.banner #tns1 > .tns-item {padding-right:inherit !important}
#tns1.disease-slider > .tns-item {padding-right:0 !important}
#petContainer { padding: 0 !important; }
#petContainer .body {
  display: flex; flex-direction: column; justify-content: space-between;
   margin-bottom:0; touch-action: pan-y;
}
#petContainer .info-section.bottom_fix {position:fixed; bottom:68px; left:0; right:0; max-width:500px; margin:0 auto; width:100%}
#petContainer .header { padding-top: 15px;position:relative; }
#petContainer .birthday-section { padding: 0 15px; }
#petContainer .pet-slider {padding-top:35px}

.info-section.top_fix {position:fixed; top:15px; left:0; max-width:500px; right:0;  width:100%; margin:0 auto}
.info-section.top_fix .splide__slide {margin-top:30px; min-height:150px}
.info-section .name-section { display: flex; flex-direction: row; align-items: center; }
.info-section .name-section #petName { display: inline-block; margin: 0 12px 0 15px; font-size: 24px; font-weight: bold; }
.info-section .name-section img { margin: auto 0; height:20px; width:auto}
.info-section #birthdaySection { font-size: 16px; color:#555; font-weight:bold}
.info-section #birthdaySection #petBirthdayCount { margin:2px 0; }
.info-section .pet-img { position: relative;}
.info-section .pet-img.pet_add {
  background:#F1F1F1; border:0; border-radius:50%; width:150px; height:150px; position:absolute; top:50%; transform:translateY(-50%);
}
.info-section .pet-img.pet_add .pet-profile {border:0; width:55%; height:auto; top:50%; bottom:auto; right:auto; left:50%; transform:translate(-50%, -50%);}
.info-section .pet-img:after { content: ""; display: block; padding-bottom: 100%; }
.info-section .pet-img .pet-profile { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius:50%; border: 5px solid #F9E492; }
.info-section .pet-img .birthday-cone {
   position: absolute; width: 25%; top:-30px; right:-10px; transform:rotate(0.12turn); z-index:-1;
 }
.info-section .pet-img .enroll-pet-icon { width: 50%; height: 50%; margin: auto;}
.info-section .enroll-pet-text {width: 100%; font-size: 20px; color: gray; text-align: center;}
.flake { display: none; position: fixed; left: 0; top: 0; z-index: 100;}
.flake1 { width: 8px; height: 16px; -webkit-animation-name: shake1; animation-name: shake1; -webkit-animation-timing-function: cubic-bezier(.445,.05,.55,.95); animation-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running; will-change: transform; z-index:100; }
.flake2 { width: 8px; height: 16px; -webkit-animation-name: shake2; animation-name: shake2; -webkit-animation-timing-function: cubic-bezier(.445,.05,.55,.95); animation-timing-function: cubic-bezier(.445,.05,.55,.95); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running; will-change: transform; z-index:100; }
.flake-base { top: -16px; position: fixed; -webkit-animation-name: fall; animation-name: fall; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-play-state: running; animation-play-state: running; z-index:100; }
@keyframes fall { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 35px)); } }
@keyframes shake1 { 0% { transform: translateX(0) rotate(-30deg); } 50% { transform: translateX(80px) rotate(30deg); } 100% { transform: translateX(0) rotate(-30deg); } }
@keyframes shake2 { 0% { transform: translateX(0) rotate(30deg); } 50% { transform: translateX(-80px) rotate(-30deg); } 100% { transform: translateX(0) rotate(30deg); } }

#testingModal .testing-help { margin: 45px 0; font-size: 17px; color: #333; line-height: 25px; font-weight:bold;}
#testingModal label { font-size: 15px; font-weight:bold;}
#testingModal #statusList { margin: 20px 0; position:relative;}
#testingModal #statusList:after {
  position:absolute; content:""; display:block; top:10px; left:7px; height:calc(100% - 44px); width:2px; background:#E5E5E5;
}
#testingModal #statusList li { display: grid; grid-template-columns: 16px auto; margin: 25px 0; line-height: 30px; min-height:53px}
#testingModal #statusList li .li-icon { width: 16px; height: 16px; margin: auto; background:#E5E5E5; border-radius: 50%; }
#testingModal #statusList li .li-icon.active {border: 1px solid var(--ptBlue); background:#fff; position:relative; z-index: 5}
#testingModal #statusList li .li-icon.active:after {
  position:absolute; top:50%; left:50%; background: #0f3999; border-radius:50%; content:""; display:block; width:10px; height:10px;
  transform:translate(-50%, -50%);
}
#testingModal #statusList li .status-text { margin-left: 10px; font-size: 14px; font-weight:bold; color:#A1A1A1; line-height:16px}
#testingModal #statusList li .status-text.active { font-weight: bold; color: var(--ptBlue); }
#testingModal #statusList li .status-date { grid-column: 2/3; margin-left: 10px; color: gray; font-size:13px;line-height:16px; min-height:23px}
#testingModal #statusList li .status-date.active { color: var(--ptBlue); }
#testingModal #statusList li .status-delivery {
  margin-left: 20px; font-weight: bold; color: #fff; background:#FCC800; border-radius:15px; padding:3px 15px;
  float:right; line-height:20px; font-size:0.9em
}

#deliveryModal .modal-body {padding:10px 15px}
#deliveryModal .delivery-info {
  display: grid; grid-template-columns: 100px auto; grid-template-rows: 30px 30px; line-height: 30px; border-bottom:1px solid #ddd;
  padding-bottom:15px
}
#deliveryModal .delivery-info span:nth-child(2n-1) { font-weight: bold; }
#deliveryModal #deliveryStatus { margin: 40px 0 20px 0; text-align: center; font-size: 18px; color: var(--ptBlue); font-weight:bold; }
#deliveryModal #deliveryProgresses .delivery-row { position: relative; padding: 0 20px 20px 20px; color: gray; }
#deliveryModal #deliveryProgresses .delivery-row.now { color: black; }

#deliveryModal #deliveryProgresses .delivery-row:after { position: absolute; display: inline-block; left: 0; top: 15px; width: 12px; height: 12px; vertical-align: top; background-color: #fff; border: 2px solid #d7dfe8; border-radius: 50%; content: ''; }
#deliveryModal #deliveryProgresses .delivery-row.now:after { border-color: var(--ptBlue); }
#deliveryModal #deliveryProgresses .delivery-row:before { position: absolute; left: 5px; top: 0; bottom: -6px; border-left: 1px solid #d7dfe8; content: ''; }
#deliveryModal #deliveryProgresses .delivery-row:first-child:before { top: 20px; }
#deliveryModal #deliveryProgresses .delivery-row:last-child:before { height: 20px; }
.info-section #kitSection { padding: 35px 15px 20px; background-color: #E1EBF5; border-radius: 50px 50px 0 0; }
.info-section #kitSection .testing-row {
  display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; margin-bottom: 5px; border-radius: 70px; background-color: white; }
.info-section #kitSection .testing-row .testing-profile { display: flex; flex-direction: column; text-align: center; }
.info-section #kitSection .testing-row .testing-profile img { width: 60px; height: 60px; margin: auto; border-radius: 50%; grid-row: 1/2; }
.info-section #kitSection .testing-row .testing-info { margin: 0 10px; line-height: 30px; }
.info-section #kitSection .testing-row .testing-btn { width: auto; height: 30px; grid-column: 3/4; grid-row: 1/3; }
.info-section #kitSection .testing-row .testing-status { display: flex; flex-direction: column; }
.info-section #kitSection .testing-row .testing-status img {height:15px; vertical-align:-1px; margin-right:7px}
.info-section #kitSection .testing-row .testing-status span:first-child { color: gray; font-size: 15px; }
.info-section #kitSection .testing-row .testing-status span:last-child {font-size: 17px; font-weight:bold; color:#555}

.info-section #menuSection {padding : 10px 15px 30px; background-color: #E1EBF5;}
.info-section #menuSection .menu {
  padding: 40px 30px; text-align: center; width:48%; margin-right:4%; float:left;
  background-color: #1D5BC5; color: white; border-radius: 30px; font-size:1.2rem;
}
.info-section #menuSection:after {clear:both; content:""; display:block;}
.info-section #menuSection .menu img {height:80px; width:auto}
.info-section #menuSection .menu:last-child { margin-right: 0;}
.info-section #menuSection #resultReport img { display: block; margin: 0 auto 15px auto; }
.info-section #menuSection #healthDiary img { display: block; margin: 0 auto 15px auto; }

input[type="date" i] {text-align:left;}
input[type="date"]::-webkit-date-and-time-value{ text-align:left;}

.info-section .no-pet .splide__track  {padding-right:0 !important; padding-top:40px}
.info-section .no-pet .splide__track .pet-img.pet_add {left:50%; transform:translate(-50%, -50%);}
.splide.no-pet {visibility:visible;}
.splide.no-pet .splide__list {display:block}
/*----------------------아이 정보----------------------*/

/*----------------------건강 일기----------------------*/
#petContainer.diary_wrap .header {position:fixed;}
.profile-section { padding: 10px 15px; }
.profile-section .pet-img { position: relative; width:80px; margin: 0 auto; }
.profile-section .pet-img:after { content: ""; display: block; padding-bottom: 100%; }
.profile-section .pet-img .pet-profile { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: auto; object-fit: cover; object-position: center; border-radius:50%; border: 5px solid #E1EBF5; }
.profile-section .pet-info { display: flex; flex-direction: column; padding-top: 5px; text-align: center; }
.profile-section .pet-info li { margin: 5px 0; }
.profile-section .pet-info .pet-name { font-size: 16px; color: #111;}
.profile-section .pet-info .pet-birthday { font-size: 14px; }
.profile-section .pet-info li #writeBtn {
  background-color: var(--ptBlue); border:0; border-radius: 20px; padding: 0 17px; color: white;
  height:38px; line-height:38px; font-size:15px; font-weight:1000;
}
.profile-section .pet-info li #writeBtn img { width: auto; height: 15px; margin-right: 7px; margin-top:-4px}
.profile-section .pet-info .pet-info-button { display: flex; justify-content: space-between; margin: 20px 0 10px; padding: 0; height: 40px; }
.profile-section .pet-info .pet-info-button li { display: flex; width: 40px; height: 40px; margin: 0; background-color: var(--ptYellow); border-radius: 5px; }
.profile-section .pet-info .pet-info-button .cal_search_box {
  width:calc(100% - 50px); background:#fff; border:1px solid #eee; color:#777;
  display:block; text-align:left; line-height:40px; padding-left:13px; font-size:14px;
}
.profile-section .pet-info .pet-info-button .cal_search_box img {height:14px; margin-top:-3px; margin-right:5px}
.profile-section .pet-info .pet-info-button img { width: auto; height: 20px; margin: auto; }

#calendar { padding: 15px; }

.fc-header-toolbar {
  display: grid !important; grid-template-columns: 50px 130px 50px !important;
  grid-template-rows: 40px; margin: 0 0 15px !important; text-align: center; justify-content:center !important;
}
.fc-toolbar-title { line-height: 40px; font-size:20px !important; font-weight:bold;}
.fc-header-toolbar .toolbar-2 { grid-column: 1 / 4; width: 100%; margin: 10px 0; text-align: right; }
.fc-header-toolbar .toolbar-2 .list-btn {width: 40px; height: 40px; }
.fc-toolbar-chunk { position: relative;}
.fc-toolbar-chunk #calendarDate, .fc-toolbar-chunk #listDate {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
}
.fc .fc-button .fc-icon {font-size:1.8em !important}
#calendarDate::-webkit-calendar-picker-indicator, #listDate::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: 100%; }
.fc .fc-daygrid-day-top { display: block !important; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fc-day-today, .fc-highlight { position: relative; margin: auto; border-radius: 100%; background-color: transparent !important; }
.fc-day-today:after {
  position: absolute; display: block; content: ''; width: 40px;
   padding-bottom: 40px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(255,220,40,.15); border-radius: 50%; }
.fc-daygrid-day { position: relative; }
.fc-daygrid-day .icon {
  position: absolute; display: block; content: ''; width: 40px; padding-bottom: 40px; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index : 2; border-radius: 50%; background-repeat: no-repeat;
  background-position: center; background-size:auto 22px !important; background-color:#fff;
}
.fc .fc-day-sat a { color : var(--ptBlue) !important; }
.fc .fc-day-sun a { color:  red !important; }
.fc .fc-day-future a { color: #aaa !important; }
.fc-theme-standard td { border: 0 !important; }
.fc-scrollgrid { border: 0 !important; }
.fc .fc-button { background-color: #E1EBF5 !important; color: black !important; font-weight:bold !important; border: 0 !important; }
.fc .fc-button:focus{ box-shadow: unset !important; }
.fc-theme-standard td, .fc-theme-standard th {font-size:0.95em !important; height:50px}

/* .write-diary { position:fixed; right: 2rem; bottom: 2rem; width: 4rem; height: 4rem; padding: 10px; border-radius: 100%; border: 1px solid black; background-color: white;  } */
.inner-container .diary-header {
  display: flex; align-items: center; justify-content: space-between; height: 60px; line-height: 30px; padding: 15px;
}
.inner-container .diary-header .diary_more {
  width:40px; height:30px; right:15px; display:block; position:absolute; top:50%; transform:translateY(-50%);
}
.inner-container .diary-header .diary_more img {right:5px; left:auto}
.inner-container .diary-header a { color: gray; font-weight: bold; }
.inner-container .diary-header #writeBtn { color: var(--ptBlue); }
.inner-container .diary-header #diaryMenu {
  display: none; position: absolute; right: 15px; top: 55px; width: 85px; border: 1px solid #ddd;
  text-align: center; background-color: white;  border-radius:5px
}
.inner-container .diary-header #diaryMenu li:first-child { border-bottom: 1px solid #D8D8D8; }
#diaryContainer #dateField {margin-top:80px; font-weight: 500;}
#diaryContainer.inner-container .diary-header #dateField {margin-top:0; font-weight:bold;}
#dateField { text-align: center; font-size: 17px; font-weight:300;}
#writeModal .modal-body {padding:25px 15px 5px}
#writeModal .help {color:#555; font-weight:bold; margin:0 5px}
#writeModal .category-list { display: flex; margin-top: 16px; overflow-x: auto; }
#writeModal .category-list .category {
  margin: 0 5px; text-align: center; border: 1px solid #EFEFEF; font-size:12px; padding:5px 0 15px;
  border-radius:10px
}
#writeModal .category-list .category .category-icon-container, #categoryField .category .category-icon-container {
  display: flex; width: 50px; height: 50px; margin: auto; border-radius: 10px; background-color: white;
}

#writeModal .category-list .category .category-icon, #categoryField .category .category-icon {
  width: auto; max-width: 20px; height: auto; max-height: 20px; margin: auto;
}

#writeModal .category-list .category .category-name {margin-top:-8px}
#writeModal .category-list .category.active {
  background-color:#E1EBF5; background-image:url(/img/mobile/checked.png);
  background-repeat: no-repeat; background-position: top 8px right 5px; background-size:12px auto;
}
#writeModal .category-list .category.active .category-icon-container {background-color:transparent}
#categoryList.category-list {
  overflow: auto; margin: 0 15px 40px; padding: 10px;
  text-align: center; background-color: white; border-radius: 10px; width:calc(100% - 30px);
  white-space:nowrap; display:block !important;
}
#categoryList.category-list .category { margin: 5px 5px 3px 5px; display:inline-block; width:14%}

#categoryList.category-list .category .category-icon-container {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #EFEFEF; background-color: white; margin:0 auto
}
#categoryList.category-list .category .category-icon-container .category-icon {
  width: auto;  height: 18px;  margin: 9px auto; max-width:20px
}
#categoryList.category-list .category .category-name {font-size:12px; margin-top:3px}

/* #categoryList.category-list .category .category-icon, #categoryField .category .category-icon { width: 60px; height: 60px; object-fit: cover; border-radius: 100%; border: 2px solid transparent; } */
#categoryList.category-list .category.active .category-icon-container { border: 2px solid var(--ptBlue); }
#categoryList.category-list .category.active .category-name { color: var(--ptBlue); }

#diaryContainer .diary-body.diary_writebox {background:#fff; border:1px solid #E6E6E6; padding:20px 18px; margin:20px 15px}
#diaryContainer .diary-body.diary_writebox > p {font-size:16px; font-weight:bold;}
#diaryContainer .diary-body.diary_writebox #categoryField .category-name {display:none}
#diaryContainer .diary-body.diary_writebox #categoryField .category-icon-container {border:1px solid #DBDBDB; border-radius:50%; width:42px; height:42px}
#diaryContainer .diary-body.diary_writebox #categoryField .category-icon-container.plus {background-color:transparent; background:#eee; border:0}
/* #diaryContainer { display: none; grid-template-rows : 40px 70px 100px calc(100% - 280px) 70px; height: 100%; } */
#diaryContainer .diary-body {margin:60px 15px 20px; padding: 15px; background-image: url('../../img/mobile/textback.png'); background-repeat: repeat; background-size: 100%; background-color: #EFEFEF; border-radius: 10px; }
#categoryField { display: flex; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
#categoryField::-webkit-scrollbar { display: none; }
#categoryField .category { margin: 10px 10px 10px 0; text-align: center; }
#categoryField .category .category-icon-container.plus { border: 0; }
#categoryField .category .category-icon-container.plus img { width: auto; height: 20px; margin:auto}
#diaryContainer .diary-body .tns-outer {background:#fff; border-radius:10px}

#diaryContainer .diary-body .category-icon-container {border-radius:50%; width:40px; height:40px; border: 2px solid #EFEFEF;}
#diaryContainer .diary-body .category-name {display:none}
#diaryContainer .diary-body.diary_writebox #pictureField {margin:0 0 10px 0}

/*로딩바*/
#Progress_Loading img {position: absolute;left: 50%;top: 50%; transform:translate(-50%, -50%)}

/* .enrolled-picture-field { width: 100%; height: 210px; text-align: center; } */
.enrolled-picture-field { width: 100%; text-align: center; }

@media screen and (max-width: 450px) {
  /* .enrolled-picture-field .enrolled-picture { width: 100%; max-width: calc(100vw - 15px); height: 100%; margin: auto; object-fit: cover; border-radius: 10px; } */
  .enrolled-picture-field .enrolled-picture { width: 100%; max-width: calc(100vw - 15px); aspect-ratio: 1/1; margin: auto; object-fit: cover; border-radius: 10px; }

  /* #diaryContainer.view { grid-template-rows :70px 100px 40% 30px auto !important; height: 100%; } */
}
@media screen and (min-width: 451px) {
  /* .enrolled-picture-field .enrolled-picture { width: 100%; max-width: calc(50vw - 15px); height: 100%; margin: auto; object-fit: cover; } */
  .enrolled-picture-field .enrolled-picture { width: 100%; max-width: calc(50vw - 15px); aspect-ratio: 1/1; margin: auto; object-fit: cover; }

  #diaryContainer.view { grid-template-rows : 40px 70px 100px 25% 30px auto !important; height: 100%; }
}


.tns-ovh, .tns-ovh .tns-inner, .tns-ovh .tns-inner .tns-item { height: 100%; }
.nav-container { text-align: center; }
.nav-container li { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: gray; }
.nav-container li.tns-nav-active { background-color: var(--ptYellow);}
#diaryContent {
  width: 100%; min-height: 200px; margin-top: 25px; padding: 15px; border: 0; margin-bottom:30px;
  outline-color: white; background-color: white; border-radius: 10px; border: 1px solid #CFCFCF;
}
[contenteditable="true"]:empty:before {
   content: attr(placeholder);
   color:#9D9D9D;
}
#pictureField {display: grid; grid-template-columns: 100px auto; height: 80px; margin:0 0 10px 15px; overflow-x: auto; align-items: end; }
#pictureField .picture-icon {
  display: flex; float: left; width: 100px; height:70px; background-color: var(--ptSkyBlue); border-radius: 10px; margin-top:10px}
#pictureField .picture-icon img { width: 40px; height: auto; margin: auto; }
#pictureField #pictureFile { display: none; }
#pictureList { display: flex; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
#pictureList::-webkit-scrollbar { display: none; }
#pictureList .picture-li { position: relative; transition: all 0.5s; padding-top:10px}
#pictureList .picture-li:first-child {margin-left:5px}
#pictureList .picture-li .picture {
  position: relative; width: 100px; height: 70px; margin: 0 5px 0; object-fit: cover; border-radius: 10px; border:1px solid #eee;}
#pictureList .picture-li .close { position: absolute; width: 20px; height: 20px; top: 2px; right: -2px; z-index: 50; }

#calendarSection {
  background-color: #E1EBF5; border-radius: 40px 40px 0 0;
  position:fixed; bottom:0; left:0; right:0; max-width:500px; margin:0 auto;
  height:calc(100vh - 350px); width:100%
}
#calendarSection .fc-view-harness { background-color: white; border-radius: 10px; }
#petContainer .body.pet-body { min-height: 100%; padding-top:20px;}
.fc-view-harness { padding: 10px; }

.fc-bg-event { background-color: white !important;background-position: center !important; background-repeat: no-repeat !important; background-size: 40px 40px !important;  opacity:1 !important; }
#listSection {
  display: none; background-color: #E1EBF5;position:fixed; bottom:0; left:0; right:0; width:100%;
  border-radius: 40px 40px 0 0; padding-top: 15px; height:calc(100vh - 350px); max-width:500px; margin:0 auto;
}
#listSection .list-header { display: grid; grid-template-columns: 20% 60% 20%; margin: 0;  padding: 0 20px; }
#listSection .list-header .list-btn:last-child { margin-left: 10px; }
#listSection #diaryField { padding:0 15px; overflow-y: auto; background:#E1EBF5; height:calc(100% - 55px)}
 #searchList { overflow-y: auto; }
 .event-row { display: flex; flex-direction: column; margin-bottom: 15px; padding: 10px; background-color: white; border-radius: 10px; border: 1px solid #EFEFEF; }
 .event-row .event-title {
   display: flex; justify-content: space-between; margin: 10px 5px;
   padding-bottom: 10px; border-bottom: 1px solid #EFEFEF; grid-template-columns: 40% 60%;
 }
 .event-row .event-title .event-date { margin: auto 0; font-size: 0.9rem; }
 .event-row .event-title .event-icon { display: flex; height: 100%; overflow-x: auto; width:60%; justify-content:flex-end;}
 .event-row .event-title .event-icon .category-icon-container {
   display: flex; width: 28px; height: 28px; margin: 0 5px; border-radius: 50%; border: 1px solid #EFEFEF; background-color: white; padding:4px;     flex: 0 0 28px;
 }
 .event-row .event-title .event-icon .category-icon-container .category-icon {
   width: 100%; height:100%;  margin: auto;
 }

 .event-row .event-body { display: flex;  margin:10px 5px}
 .event-row .event-body .event-img-frame {
   position: relative; width: 80px; height:80px; margin-right:10px;
 }
 .event-row .event-body .event-img-frame:after { content: ""; display: block; padding-bottom: 60%; }
 .event-row .event-body .event-img-frame .event-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
 .event-row .event-body .event-content {
   border: 0; resize: none; height: 80px; width:calc(100% - 90px);
   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size:14px; line-height:1.4;
 }
 .no-content { height: auto; line-height: 200px; text-align: center; color: gray; }

#scrollHeader { display: none !important; position: fixed; top:0; left: 0; width: 100%; height: 70px; padding: 15px; background-color: white; border-bottom: 1px solid #D8D8D8; z-index: 999; }

#searchModal .search-field { display: grid; grid-template-columns: calc(100% - 40px) 40px; height: 60px; margin-top:50px}
#searchModal .search-field #searchValue {
  width: calc(100% - 10px); height: 40px; padding-left: 45px; margin: 10px 10px 0 0; border-radius: 5px; padding:0 15px;
  background:#F3F3F3; border:0;
}
#searchModal .search-field .search-btn {
  height: 40px; width: 40px; margin: 10px 0; border: 0; border-radius: 5px; border:1px solid #eee;
  background: url('../img/mobile/search_icon.png') no-repeat center center; background-size: auto 15px;
}
#searchModal .search-category-list { display: flex; overflow-x: auto; margin-top: 10px; text-align: center; padding-bottom: 10px; }
#searchModal .search-category-list .category { margin-right:8px; padding: 5px; border: 1px solid #EFEFEF; border-radius: 10px; }
#searchModal .search-category-list .category.active { border: 1px solid var(--ptBlue); }
#searchModal .search-category-list .category.active .category-name { color: var(--ptBlue); }
#searchModal .search-category-list .category .category-icon-container { display: flex; width: 50px; height: 40px; background-color: white; }
#searchModal .search-category-list .category .category-icon-container .category-icon {
  width: auto; max-width: 24px; height: auto; max-height: 22px; margin: 8px auto;
}
#searchModal .search-category-list .category .category-name {font-size:13px;}
/* #searchModal .search-category-list .category { margin-left: 5px; margin-right: 5px;  } */
/* #searchModal .search-category-list .category .category-icon-container { display: flex; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #EFEFEF; background-color: white; } */
/* #searchModal .search-category-list .category.active .category-icon-container{ border: 2px solid var(--ptBlue); } */
.modal-footer>* {margin:0.5em; font-size:0.9em; font-weight:bold; color:#777}
.modal-footer > a:last-child {color:var(--ptBlue)}

/*----------------------건강 일기----------------------*/

/*----------------------내 정보----------------------*/
.user-profile { display: flex; flex-direction: column; padding: 25px 0; text-align: center; }
.user-profile .user-img { width: 100px; height: 100px; margin: auto; border-radius: 50%; border: 1px solid #EFEFEF; object-fit: cover; }
.user-profile .user-info { display: flex; justify-content: center; align-items: center; margin: 15px; line-height:20px}
.user-profile .user-info .user-nick { margin-right:10px; font-size: 18px; font-weight: bold; }
.user-profile .user-level { margin: 10px 0 7px; color: gray; font-size: 16px; }
.user-profile .user-edit-btn { width: 18px; height: auto; margin-top:-2px}
.user-profile .user-exp { width: 45%; height: 11px; margin: 0 auto; }


/* For Chrome or Safari */
 progress::-webkit-progress-bar {
   background-color: #F4F4F4;
   border-radius: 20px;
 }
 progress::-webkit-progress-value {
   background-color: var(--ptBlue) !important;
   border-radius: 20px;
 }
 /* For Firefox */
 progress {
   background-color: #F4F4F4;
   border-radius: 20px;
 }
 progress::-moz-progress-bar {
   background-color: var(--ptBlue) !important;
   border-radius: 20px;
 }

.space { width: 100%; height: 7px; background-color: #EFEFEF; }
.mypage-list { display: flex; flex-direction: column; }
.mypage-list li { display: flex; padding:18px 15px; justify-content: space-between; border-bottom: 1px solid #EFEFEF; font-weight: 600; font-size:16px }
.mypage-list li:last-child { border-bottom: 0; }
#logoutBtn { display: inline-block; margin: 30px 15px;  color: gray; text-decoration: underline; }

.profile-container .enroll-section { padding: 0; }
.profile-container .enroll-section .user-img { position: relative; width: 45%; max-width: 150px; margin: 20px auto; }
.profile-container .enroll-section .user-img:after { content: ""; display: block; padding-bottom: 100%; }
.profile-container .enroll-section .user-img img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius:100%; }
.profile-container .enroll-section #userProfile { border: 1px solid #D8D8D8; }
.profile-container .enroll-section #userProfile-file { display: none;}
.profile-container .enroll-section .user-nick { height: 26px; margin-bottom: 20px; text-align: center; font-size: 17px; line-height: 26px; }
.profile-container .enroll-section .user-nick img { width: 26px; height: 26px; border-radius: 50%; margin: auto 5px; }
.profile-container .enroll-section .user-info label { margin:5px 0; color: gray;font-size: 14px; font-weight: normal; }
.profile-container .enroll-section .user-info .info-list { display: flex; flex-direction: column; }
.profile-container .enroll-section .user-info .info-list li { display: flex; flex-direction: column; padding : 10px 15px; margin:5px 0; border-bottom: 1px solid #EFEFEF; justify-content: space-between; }
.profile-container .enroll-section .user-info .info-list li:last-child { border-bottom: 0; }
.profile-container .enroll-section .user-info .info-list li .info { display: flex; justify-content: space-between; margin: 5px 0; color: #4F4F4F; font-weight: 600;}
.profile-container .enroll-section .user-info .info-list li img { width: auto; height: 16px; }

#addressModal input[type="text"], #nickModal input[type="text"], #pastModal input[type="text"], #passwordModal input[type="password"] {
  width:calc(100% - 30px); height: 46px; margin: 10px 15px; padding-left: 0; border: 0; border-bottom: 1px solid #D8D8D8; font-size:1em
}

#addressModal .button, #nickModal .button, #passwordModal .button, #pastModal .button {
  width: 100%; margin: 10px 0; height: 50px; color: white; background-color: var(--ptBlue);
  border: 0; padding: 10px; text-align: center; border-radius: 10px; font-size: 16px; font-weight:bold
}

.leave-section { display: flex; justify-content: space-between; margin: 30px 0; padding: 0 20px; text-align: center;font-size: 14px; color: gray; }
.leave-section li:first-child { margin-bottom: 5px; text-decoration: underline; font-weight: bold; }

#leaveModal .modal-body { padding: 0; }
#leaveModal .title { width: 100%; padding: 0 15px; font-size: 24px; font-weight: bold; }
#leaveModal .sub-title {margin-bottom: 50px; padding: 15px; font-size: 18px; font-weight:600 }
#leaveModal .body { margin-bottom: 20px; padding: 0 15px 40px 15px; color: gray; border-bottom: 1px solid #EFEFEF; line-height:24px}
#leaveModal .term-section { margin-top: 30px; }
#leaveModal .button { width:100%; margin: 0 0 30px 0; height: 50px; color: white; background-color: var(--ptBlue); border: 0; padding: 10px; text-align: center; border-radius: 40px; font-size: 16px; }
#leaveModal #cancelBtn { display: block; width: 100%; margin-bottom: 20px; text-align: center; color: #4F4F4F; text-decoration: underline; }
#leavePassword { width: 100%; height: 50px; margin: 10px 0; padding-left: 20px; border-radius: 5px; border: 1px solid #D8D8D8; }

.profile-container .term-section { padding: 0; }
/*----------------------내 정보----------------------*/


/*----------------------프로필 변경----------------------*/
#passwordModal input {margin:10px 0 !important; width:100% !important}
#addressModal input {margin:10px 0 !important; width:100% !important}
#nickModal input {margin:10px 0 !important; width:100% !important}
#passwordModal .password-check-text {margin:20px 0; font-size:13px}

/*----------------------알림----------------------*/

.alert-setting { display: flex; flex-direction: column; margin-top: 40px; }
.form-switch { padding: 15px; line-height: 35px; font-weight: 600; border-bottom: 1px solid #EFEFEF; }
.form-switch:last-child { border-bottom: 0; }

.form-check-input { float: right; width: 58px !important; height: 30px; margin: 0 !important;  transition: all .5s ease; background-size: 24px 24px}
.form-switch .form-check-input:checked {
  background-color: var(--ptBlue); border-color: var(--ptBlue); background-image: url(/img/mobile/one.png);
  background-position:right 2px center
}
.form-check-input:focus { outline : none; }
.form-switch .form-check-input {background-image: url(/img/mobile/one.png); background-color:#E5E5E5; border-color:#E5E5E5; background-position:left 2px center}
.form-switch label {font-size:16px}

.alert_list li {padding:18px 15px; border-bottom: 1px solid #E5E5E5;}
.alert_list li span {display: block; font-size:14px; font-weight:500;}
.alert_list li span.alert_title {font-size:15px; color:#000; font-weight:600; margin-bottom: 2px;}
.alert_list li span:nth-child(2) {
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.6;
  color:#555
}
.alert_list li span.alert_date {font-size:12px; color:#555; font-weight: 400; margin-top:10px}
/*----------------------알림----------------------*/

/*----------------------앱 정보----------------------*/

.app-section .user-img {
  position: relative; width: 100px; height: 100px; margin: 100px auto 50px;
  border-radius: 30px; border: 0; overflow:hidden;
}
.app-section .user-img img { width: 100%; height: 100%; object-fit: scale-down; object-position: center; }
.app-section .app-version { color: gray; margin: 30px auto; line-height: 30px; text-align: center; }

/*----------------------앱 정보----------------------*/

/*----------------------유전자 검사----------------------*/

/* .gene-container { padding: 15px 0 !important; } */
.gene-container .title { width: 100% !important; margin: 0 !important; }
.gene-container .gene-info { margin: 10px 15px; }
.gene-container .gene-banner { display: none; height: auto; object-fit: cover; margin: 20px 15px 0; border-radius:10px; overflow:hidden;}
#serviceIntroduce, #explainOfTest, #buyLink { display: none; opacity: 1; }
#explainOfTest .title { padding: 0; }
#explainOfTest iframe { max-width: 100% !important; }
#buyLink { flex-direction: column; margin: 40px 25px 30px; font-size: 18px; }
#buyLink li {
  position: relative; display: flex; justify-content: space-between; align-items: center; color:#222; font-size:16px;
  height: 52px; padding: 0 15px; line-height: 52px; border:1px solid #DCDCDC; border-radius:7px; margin-bottom:12px;
}
#buyLink li img { height: 35px; width: auto; }
#buyLink li span:last-child {
  float: right; color: white; font-weight:bold; height:34px; line-height:34px;
  background-color: var(--ptBlue); padding: 0px 15px; border-radius: 20px; font-size: 14px;
}
#buyModal .buy-row {
  display: flex; padding:15px 20px; line-height:40px;
  text-align: center; border-bottom: 1px solid #D8D8D8;
}
#buyModal .buy-row:last-child { margin: 0; border: 0; }
#buyModal .buy-row img { height: 60px; width: auto; }
#buyModal .buy-row span { margin-left: 10px; font-weight:bold; font-size:14px}
#buyModal .buy-row .icon { width: 40px; height: 40px; object-fit: cover; border-radius: 5px !important; border:1px solid #eee;}
.modal.animate__animated .modal-content { position: fixed; bottom: 0; left: 0; max-height: 70vh; border-radius: 20px 20px 0 0; }
/* .modal-content .modal-title { font-size: 16px; } */


#geneTabBar {
  position:fixed; top:60px; left:0; width:100%; right:0; z-index: 9; background:#fff; padding-top:10px;
  max-width:500px; margin:0 auto
}


.gene-container #petProfile { display: flex; flex-direction: column; width: 100%;color: gray; text-align: center; margin-top:20px}
.gene-container #petProfile .select-pet-msg { display: flex; width:250px; height:250px; margin: 50px auto 20px; border: 3px solid var(--ptMustard); border-radius: 50%; text-align: center; aspect-ratio: 1/ 1; justify-content: center; align-items: center; }
.gene-container p { text-align: center; margin-bottom: 20px; }
.gene-container #petProfile .pet-img { position: relative; width: 250px; height:250px; margin: 50px auto 20px; border-radius: 50%; border: 5px solid var(--ptMustard); aspect-ratio: 1 / 1; object-fit: cover; }
.gene-container #petProfile .pet-name { margin: 0 0 10px; font-size: 20px; font-weight: 600; color:#333}
.gene-container #openBarcodeButton { width: 54%; margin: 20px auto; height: 50px; border-radius: 30px; background-color: var(--ptBlue); color: white; border: 0; font-size: 17px; font-weight:bold}
.pet-row { display: flex; padding:10px 15px; line-height: 40px; text-align: center; border-top: 1px solid #EBEBEB; }
#petList li:first-child{border-top:0}
#petList li {padding:12px 20px}
.pet-row img { height: 60px; width: auto; }
.pet-row span { margin-left: 10px; font-weight:bold}
.pet-row .icon { width: 40px; height: 40px; object-fit: cover; border-radius: 50% !important; border: 3px solid var(--ptMustard); }
#petModal #enrollNewPet {
   width: 100%; height: 50px; line-height: 50px; text-align: center; color: black; font-size: 17px;
   background-color: #EFEFEF; border: 0; padding: 0 20px; border-radius: 30px; font-weight:bold; color:#555
 }

#geneModal .modal-body {padding:10px 15px}
#geneModal .modal-content { position: relative; width: 85%; margin: auto; border-radius: 10px; }
#geneModal .modal-content .mark { width: 40px; height: 40px; margin: 20px auto; background-color: white; display:block;}
#geneModal .modal-content ul {display:block; margin:0 auto;}
#geneModal .modal-content ul li {margin-bottom: 10px; color: #5E5E5E; font-weight: bold; font-size:14px}
#geneModal .modal-content ul li img { width: 6px; height: 6px; margin: -2px 5px 0 0; }
#geneModal .modal-footer { display: grid; grid-template-columns: 50% 50%; padding: 0; border-top: 1px solid #D8D8D8; }
#geneModal .modal-footer input { margin: 0; padding: 15px; border: 0; background-color: white; font-size: 16px; border-radius: 0 0 10px 0; font-weight: bold; }
#geneModal .modal-footer input:first-child { color: gray; border-right: 1px solid #D8D8D8; border-radius: 0 0 0 10px; font-weight: normal; }

#PastTestModal .modal-body {padding:10px 15px}
#PastTestModal .modal-content { position: relative; width: 85%; margin: auto; border-radius: 10px; }
#PastTestModal .modal-content .mark { width: 40px; height: 40px; margin: 20px auto; background-color: white; display:block;}
#PastTestModal .modal-content ul {display:block; margin:0 auto; }
#PastTestModal .modal-content ul li {margin-bottom: 10px; color: #5E5E5E; font-weight: bold; font-size:14px}
#PastTestModal .modal-content ul li img { width: 6px; height: 6px; margin: -2px 5px 0 0; }
#PastTestModal .modal-footer { display: grid; grid-template-columns: 50% 50%; padding: 0; border-top: 1px solid #D8D8D8; }
#PastTestModal .modal-footer input { margin: 0; padding: 15px; border: 0; background-color: white; font-size: 16px; border-radius: 0 0 10px 0; font-weight: bold; }
#PastTestModal .modal-footer input:first-child { color: gray; border-right: 1px solid #D8D8D8; border-radius: 0 0 0 10px; font-weight: normal; }

#barcodeValue { margin-top: 10%;  }

.help-text { margin-top: 20px; color: gray; text-align: left; font-size: 13px; padding:0 20px}
.result-container { text-align: center; }
.result-container .result-title { margin: 15px 0; text-align: center; font-size: 17px; font-weight: 600; }
.result-container .banner { width: 100%; max-width: 400px; height: auto; margin: 30px auto; object-fit: cover; }

.testing-section { padding: 15px; }
.testing-section .testing-title {margin-top:25px;margin-bottom:10px; font-size: 17px; font-weight:bold;}

.testing-section .testing-list .testing-row {
  display: flex; align-items: center; justify-content: space-between; align-items: center;
  border: 1px solid #E4E4E4; padding: 13px 17px; border-radius: 10px; margin-bottom:10px
}
.testing-section .testing-list .testing-row .testing-info {
  font-size:15px; display : flex; flex-direction: column; justify-content: space-around; padding-left: 13px;
}
.testing-section .testing-list .testing-row .testing-info .testing-status { display: flex;}
.testing-section .testing-list .testing-row .testing-info .testing-status span {font-size:13px}
.testing-section .testing-list .testing-row .testing-info .testing-status span:last-child { color: gray; padding-left:15px}
.testing-section .testing-list .testing-row .testing-profile { display: flex; align-items: center; }
.testing-section .testing-list .testing-row .testing-profile img { width: 48px; height: 48px; border: 3px solid var(--ptMustard); border-radius: 50%; }
.testing-section .testing-list .testing-row .testing-btn { width: 8px; height :auto; }

.testing-section .testing-list .no-data { margin: 30px 0; color: gray; text-align: center; }
#enrollTest {
  margin: 30px auto; text-align: center; color: gray; font-weight:bold;
  background-color: #EFEFEF; padding: 10px 15px; border-radius: 30px;

}

#testingModal .modal-header .modal-title {margin-top:100px; text-align:left}
#testingModal .modal-body {padding:0 15px}


#resultContainer .body { padding :0 15px 30px; }
.result_box {margin-bottom: 30px; padding: 20px 25px; border: 1px solid #EBEBEB; border-radius: 15px;}
.result_box:after {clear:both; content:""; display:block;}
.pet_photo {width:46px; height:46px; border-radius:50%; overflow:hidden; border:2px solid #F9E492; float:left;}
#resultText { text-align: left; font-size: 14px; line-height:22px; float:right; width:calc(100% - 58px)}
#resultText div {font-weight:bold; margin-bottom:15px; font-size:15px}
.result_code {
  text-align: center; font-size:1em; text-align: center;
  font-weight: 500; padding:23px 0 12px
}
.result_code p {border-radius: 30px; border:1px solid #0E3999; display:inline-block; overflow: hidden;}
.result_code p span {padding:4px 15px 3px; display:inline-block; color:#000}
.result_code p span:first-child {background: #0E3999; color:#fff}
.danger { font-weight: bold; color: #B92323; }
.carrier { font-weight: bold; color: #E2A519; }
.clear { font-weight: bold; color: #2A6E0A; }
.result-status { display: grid; grid-template-columns:1fr 1fr 1fr; grid-column-gap: 20px; width:75%; margin:0 auto 23px; text-align: center;}
.result-status #dangerCount { font-size: 32px; font-weight: bold; color: #C80000; }
.result-status #carrierCount { font-size: 32px; font-weight: bold; color: #E9B60D; }
.result-status #clearCount { font-size: 32px; font-weight: bold; color: #12A20B; }
.result-status li {border:1px solid #DFDFDF; border-radius:10px; height:100%; overflow:hidden; font-size:12px}
.danger-icon { height: 30px;  padding: 5px 10px; margin: 0 auto; background-color: #C80000; color: white; line-height: 20px; text-align: center; }
.carrier-icon { height: 30px; padding: 5px 10px; margin: 0 auto; background-color: #E9B60D; color: white; line-height: 20px; text-align: center; }
.clear-icon { height: 30px;  padding: 5px 10px; margin: 0 auto; background-color: #12A20B; color: white; line-height: 20px; text-align: center; }
.result-help { display: flex; justify-content: space-between; height: 40px; margin: 12px 0; padding: 0 12px; font-size:14px; background-color: #F2F2F2; border-radius: 20px; line-height: 40px; }
.result-help .result-help-check { color: #B1B1B1; text-decoration: underline; }
.accordion { width: 100%; margin: 40px 0 10px; text-align: left; border: none; outline: none; transition: 0.4s; font-size: 16px; }
/* .accordion > div {margin-bottom:20px; border:1px solid #EBEBEB; border-radius:5px; overflow:hidden;} */
.accordion > div { border:1px solid #EBEBEB; border-radius:5px; overflow:hidden; margin-bottom:20px}

.accordion .accordion-collapse img { width: 100%; height: auto; object-fit: cover; }
.accordion .accordion-btn {
  display: flex; justify-content: space-between; border: 0; width: 100%; height: 50px;
  padding: 0 17px; text-align: left; color: white; line-height:50px; font-size:17px; font-weight:500
}
.accordion .accordion-btn svg { font-size: 18px; transition-duration: 0.5s; transform: rotate(180deg); margin-top:16px}
.accordion .accordion-btn.collapsed svg { font-size: 18px; transition-duration: 0.5s; transform: rotate(360deg); margin-top:16px}
.accordion .accordion-btn.danger { background-color: #C80000; }
.accordion .accordion-btn.carrier {  background-color: #E9B60D;  }
.accordion .accordion-btn.clear { background-color: #12A20B; }
.disease-row {padding:15px 17px; border-bottom:1px solid #EBEBEB}
.accordion .accordion-list .disease-row:last-child {border-bottom:0}
.disease-row .disease-icon { width: 50px !important; height: 50px !important; margin: auto; border-radius: 5px; float:left; object-fit: cover; }
.disease-row > div {float:left; margin-top:5px; width:calc(100% - 63px)}
.disease-row:after {clear:both; content:""; display:block;}
.disease-row .disease-info {margin: 0 10px; font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%}
.disease-row > div .disease-info:last-child {color:#777; letter-spacing:0; margin-top:-2px}
.disease-row .disease-btn {
  width: 30px !important; height: 30px !important;
}
.alert-title { font-weight: bold; text-align: center; font-size:16px; background:#F5F5F5; border-radius:5px; margin:30px 0 20px; padding:12px 0; line-height:1.4}
.alert-title br { display: block; }
#alertTitle {border:1px solid #E2E2E2; margin-top:45px; border-radius:10px; position:relative; text-align:center; line-height:1.7; padding:20px 30px}
#alertTitle:before {position:absolute; top:32px; left:50%; transform:translateX(-50%); background:#111; width:24px; height:3px; content:""; display:block;}

#diseaseContainer .body {padding:0 15px 40px}
#diseaseContainer .disease-info { margin-bottom:12px; position:relative;}
#diseaseContainer .disease-info {
  display: grid; grid-template-rows: max-content;  grid-template-columns: 90px auto; padding-top: 10px;
   margin-bottom:15px;
}
#diseaseContainer .disease-info .disease-ko { font-size: 16px; font-weight: bold; display:block; line-height:normal; margin-top:15px}
#diseaseContainer .disease-info .disease-eng {font-size:13px; color:#777; letter-spacing:0}
/* #diseaseContainer .disease-info div {
  display:inline-block; width:calc(100% - 88px); margin-left:15px; vertical-align: top; position:absolute;
  max-height:70px; overflow-y:auto; transform:translateY(-50%); top:50%;
} */
#diseaseContainer .disease-info .disease-icon {
  vertical-align: top; width: 70px; height: 70px; border-radius: 10px; object-fit: cover; display:inline-block;
  border:1px solid #ddd;
}
#diseaseContainer .disease-dna {
   text-align: center; color: #194A9E; line-height:24px; border:1px solid #194A9E;
   border-radius:15px; display:inline-block; font-size:13px; width:70px;
 }
#diseaseContainer .accordion .accordion-btn { color: black; }
#diseaseContainer .tabs__bar {background:#F3F3F3; border-radius:23px; padding:0; overflow:hidden; border-bottom:0}
#diseaseContainer .tabs__controls { padding:0; border-radius:23px; height:46px; line-height:46px; width:100%; font-size:16px}
#diseaseContainer .tabs__controls.is-active {background:#194A9E; color:#fff;}
#diseaseContainer .tabs__line {display:none;}
#diseaseContainer .result-help {background:#fff; border:1px solid #E2E2E2; border-radius:5px; margin:25px 0}
#diseaseContainer .result-help .result-help-check {color:#555}
#diseaseContainer .accordion {margin:0}
.tabs__bar-wrap.has-left-overflow::before {display:none}
.tabs__bar-wrap.has-right-overflow::after {display:none}
#diseaseContainer .accordion .accordion-btn {background:#fff; border:1px solid #eee; border-radius:5px; padding:0 15px; font-weight:bold; font-size:15px; margin-bottom:10px}
#diseaseContainer .accordion .accordion-btn svg {color:#999;}
#diseaseContainer .accordion > div {border:0; border-radius:0; padding:0 15px; color:#555; font-size:14px; line-height:22px}

#diseaseContainer .guide-list { display: flex; flex-direction: column; margin: 20px 0; }
#diseaseContainer .guide-row { width: 100%; margin: 10px 0; padding: 10px; border-radius: 20px; border: 1px solid #D8D8D8; }
#diseaseContainer .guide-row .guide-title { padding: 10px; font-weight: bold; text-align: left; font-size: 15px; border-bottom: 1px solid #D8D8D8; }
#diseaseContainer .guide-row .guide-content { padding: 10px; font-size:13px; color:#555}
#helpModal ul {margin-top:10px}
#helpModal ul li { margin: 10px 0;}
#helpModal ul li:first-child { font-weight: 900; font-size: 22px; line-height:32px; margin-bottom:15px;}
#helpModal ul li:nth-child(2) {font-weight:bold; font-size:16px; margin-bottom:40px}
#helpModal ul li:nth-child(3), #helpModal ul li:nth-child(4), #helpModal ul li:nth-child(5) {
  background:#F8F8F8; border-radius:10px; margin-bottom:20px;
}
#helpModal ul li p {margin-bottom:8px;}
#helpModal ul li div {
  border-radius:10px; line-height:38px; width:auto; display:inline-block;
  padding:0; height:38px; font-size:17px; padding:0 15px; font-weight:bold
}
#helpModal ul li div.madal-text {line-height:23px; font-size:15px; padding:13px 15px; height:auto; display:block; border-radius:0; font-weight:500}
#variantTable { width: 100%; margin: 10px 0 50px 0; text-align: center;}
#variantTable th { width: 33.3%; border-bottom:1px solid #585858}
#variantTable td {border-bottom:1px solid #E4E4E4;}
#variantTable * { padding: 5px; word-break: break-all; text-align:left; font-size:14px}
#helpModal .alert-title {background:transparent; text-align:left; margin:0 0 10px; font-size:15px; color:#111; padding:0}
#helpModal .alert {padding:0; font-size:14px; color:#777}

#variantTable td.clear {color:#333;}
#variantTable td.carrier {color:#333; background:#FEC210}
#variantTable td.danger {color:#333; background:#F1613D}
.submit-btn {border-radius:10px !important}
/*----------------------유전자 검사----------------------*/

/*----------------------커뮤니티----------------------*/
.banner {touch-action:pan-x}
.banner img { width: 100%; height: auto; object-fit: cover; }
.inner-container .view-header { display: flex; justify-content: space-between; height: 40px; line-height: 40px; }
.inner-container .view-header h2 { line-height: 40px; }
#actionModal #viewMenu {margin:-12px -15px;}
#actionModal #viewMenu li { font-size: 18px; padding: 15px 23px; font-weight:500; border-bottom:1px solid #EBEBEB}
#actionModal #viewMenu li:last-child { color: #929292; border-bottom:0}
.inner-container .header span {position:absolute; right:15px; top:50%; transform:translateY(-50%); width:30px; height:40px}
.inner-container .header span img {left:auto; right:4px; height:18px}
.community-tab {
  max-width:500px; margin:0 auto !important; width:100%; position:fixed; background:#fff; top:60px; left:0; right:0;
  border-bottom:1px solid #eee; z-index: 3; font-family: NanumSquareRound;
}
.community-tab .tab-item {color:#989898; font-weight:bold;}
.community-tab .tab-item.active {color:#111 !important}
.community-tab .tab-item.active:after {background:#111 !important}

/*----------------------커뮤니티----------------------*/


/*.board-view .tns-ovh {touch-action: pan-x;}*/

@media screen and (min-height: 800px) {
  /* .info-section #menuSection {padding:20px 15px 60px} */
}

@media screen and (max-width: 500px) {
  #categoryList.category-list .category {width:12%}
  .info-section #menuSection .menu {padding:35px 30px}
}


@media screen and (max-width: 400px) {
  /*유전자 검사*/
  .result-help {font-size:13px}
  .info-section #menuSection .menu {padding:25px 30px;}
  #geneModal .modal-content ul {width:auto}
  .gene-container #petProfile .select-pet-msg {width:180px; height:180px;}
  .gene-container #petProfile .pet-img {width:180px; height:180px;}
}

@media screen and (max-width: 370px) {
  /*유전자 검사*/
  .result_box {padding:15px 20px;}
  .result-status {width:248px; grid-column-gap:12px}
  .result-status li {width:74px;}
  .result-status #carrierCount {font-size:28px;}
  .result-help .result-help-check {white-space:nowrap; flex-basis:54px; margin-left:5px}
  .accordion .accordion-btn {height:46px; line-height:46px; font-size:15px; padding:0 15px;}
  .disease-row {padding:12px 15px}
  .disease-row .disease-info {font-size:13px}
  #alertTitle {padding:15px; font-size:13px}
  #alertTitle:before {top:22px}
  .alert-title {margin:20px 0; font-size:14px; padding:12px 10px; word-break:normal;}
  .alert-title br {display:none}
  #helpModal ul li:first-child {font-size:20px; line-height:30px}
  #helpModal ul li:nth-child(2) {font-size:15px}
  #helpModal ul li div {font-size:14px;}
  #helpModal ul li div.madal-text {font-size:13px}
  #categoryList.category-list .category {width:36px}
  #categoryList.category-list .category .category-icon-container {width:36px; height:36px;}
  #categoryList.category-list .category .category-icon-container .category-icon {height:15px; max-width:15px}
  .fc-daygrid-day .icon {background-size:28px auto}
  .fc-theme-standard td, .fc-theme-standard th {font-size:0.9em !important; height:40px}
  #writeModal .category-list .category {padding:3px 0 12px}
  #writeModal .category-list .category .category-icon, #categoryField .category .category-icon {max-height:18px; max-width:18px}
}

@media screen and (max-width: 340px) {
  .result-help {height:auto; line-height:normal; padding:10px 20px; align-items: baseline;}
  .result-help .result-help-check {flex-basis: 52px;}
  .clear-icon {padding:5px}
  .carrier-icon {padding:5px}
  .danger-icon {padding:5px}
  #PastTestModal .modal-content {width:95%}
}

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

  /*하단메뉴*/
  .bottom-menu .menu-img {height:18px;}
  .bottom-menu li {font-size:9px}

  /*로그인*/
  #loginSection .other-login {font-size:15px}
  .term-section .round {font-size:14px; height:20px; line-height:20px; padding-left:15px}
  .term-section .round label {width:20px; height:20px}
  .term-section .term-list {padding:15px; margin:15px 0}
  .term-section .term-list .round label {width:16px; height:16px;}
  .term-section .term-list .round {font-size:13px; line-height:16px; padding-left:10px; height:16px}
  .term-section .round .show-term {font-size:12px; margin-top:1px}
  .submit-btn {height:46px; line-height:46px}

  /*공통*/
  .inner-container .header img {height:16px}
  .modal-header .modal-title {font-size:17px}
  .modal-header .close-btn {height:16px}
  .eb-pagination a {width:24px; height:24px !important; min-width:auto !important; line-height:24px !important}
  .inner-container .header span img {height:18px}
  #actionModal #viewMenu li {font-size:16px}

  /*아이등록*/
  #breedModal #breedList .breed-row {font-size:14px}
  #deleteBtn {font-size:13px}
  .enroll-section .round {font-size:13px; margin:20px 0}

  /*유전자 검사*/
  .pet-row {line-height:36px}
  .pet-row .icon {width:36px; height:36px}
  .pet-row span {font-size:13px;}
  #petModal #enrollNewPet {height:42px; line-height:42px; font-size:15px}
  #geneModal .modal-content {width:90%;}
  .gene-container #petProfile .pet-name {font-size:17px;}
  .gene-container p {font-size:13px;}
  .gene-container #openBarcodeButton {height:42px; font-size:15px;}
  #geneModal .modal-content ul li {font-size:13px;}
  #geneModal .modal-footer input {font-size:14px}
  .testing-section .testing-title {margin-top:20px; font-size:15.5px; margin-bottom:7px}
  .testing-section .testing-list .testing-row .testing-info {font-size:13px}
  .testing-section .testing-list .testing-row .testing-info .testing-status {display:block;}
  .testing-section .testing-list .testing-row .testing-info .testing-status span {display:block; font-size:12px}
  .testing-section .testing-list .testing-row .testing-info .testing-status span:last-child {padding-left:0}
  #enrollTest {padding:5px 20px; font-size:15px}
  #deliveryModal #deliveryStatus {font-size:16px}
  .gene-container #petProfile .select-pet-msg {font-size:13px}
  #testingModal .testing-help {font-size:15px}
  #testingModal label {font-size:14px}
  #testingModal #statusList {margin:10px 0}
  #resultText {font-size:13px; line-height:20px}
  #resultText div {font-size:14px}
  #resultText div br {display:none}
  .swal2-title {font-size:0.9em !important}
  #shareInput {font-size:0.85em}
  .swal2-actions button {font-weight:bold; font-size:0.9em !important}
  #diseaseContainer .disease-info .disease-ko {font-size:15px;}
  #diseaseContainer .tabs__controls {height:40px; line-height:40px; font-size:14px}
  #diseaseContainer .result-help {padding:10px 13px}
  #diseaseContainer .accordion .accordion-btn {font-size:12.5px; padding:0 7px}
  #diseaseContainer .accordion .accordion-btn svg {font-size:12px}
  #diseaseContainer .accordion > div {font-size:13px; line-height:20px}
  #PastTestModal .modal-footer input {font-size:14px}

  /*건강일기*/
  .profile-section .pet-info .pet-name {font-size:15px; margin:3px 0}
  .profile-section .pet-info li #writeBtn {font-size:14px; height:34px; line-height:34px;}
  .profile-section .pet-info li #writeBtn img {height:13px;}
  .profile-section .pet-info .pet-info-button li {width:34px; height:34px}
  .profile-section .pet-info .pet-info-button img {height:16px}
  .profile-section .pet-info .pet-info-button .cal_search_box img {height:12px; margin-right:3px}
  .profile-section .pet-info .pet-info-button .cal_search_box {
    font-size:12px;width:calc(100% - 38px); line-height:34px; height:34px; padding-left:8px
  }
  .profile-section .pet-info .pet-info-button {height:34px; margin:10px 0 0}
  .fc-header-toolbar {grid-template-rows:30px; margin:0 0 10px !important}
  .fc-toolbar-title {font-size:17px !important; line-height:30px}
  .fc .fc-button .fc-icon {font-size:1.4em !important}
  #categoryList.category-list .category {width:34px;}
  .event-row .event-title {display:block;}
  .event-row .event-title .event-date {font-size:0.9em}
  .event-row .event-title .event-icon {width:100%; margin-top:8px; justify-content:flex-start;}
  .event-row .event-title .event-icon .category-icon-container {margin:0 5px 0 0}
  .event-row .event-body .event-content {font-size:13px}
  #searchModal .search-field {grid-template-columns:calc(100% - 36px) 36px}
  #searchModal .search-field #searchValue {height:36px; font-size:13px; padding:0 8px; width:auto; margin:10px 5px 0 0; width:calc(100% - 5px)}
  #searchModal .search-field .search-btn {height:36px; width:36px;}
  #searchModal .search-category-list .category .category-icon-container {width:40px;}
  #searchModal .search-category-list .category .category-icon-container .category-icon {max-width:20px; max-height:20px}
  #searchModal .search-category-list .category .category-name {margin-top:-3px; font-size:11px}
  .event-row .event-body .event-content {height:76px; margin-top:3px;}
  #categoryField .category {margin:5px 5px 5px 0}
  #diaryContainer.inner-container .diary-header #dateField {font-size:16px;}
  #writeModal .category-list .category {padding:3px 0 10px}
  #dateField {font-size:15px}
  #diaryContainer .diary-body.diary_writebox > p {font-size:14px}
  #diaryContainer .diary-body.diary_writebox #categoryField .category-icon-container {width:38px; height:38px}
  #diaryContent {font-size:13.5px}
  #petContainer .pet-slider.birth_in {padding-top:45px}
  .info-section .pet-img .birthday-cone {right:-10px; top:-25px}

  /*검사결과 이상없음 짤림 수정*/
  .result_code {font-size:1em}
  .result-status li {font-size:11.5px; width:70px;}
  .result-status {grid-column-gap:10px; width:230px}
}

/*2차인증*/
.modal.cert.show .modal-dialog {width:600px; margin:10rem auto; transition:none; transform:none;}
.cert .modal-content {border-radius: 20px; overflow: hidden;}
.cert .modal-header {text-align: center; display: block; padding:35px 0; position: relative; background: #eee;}
.cert .modal-header img {width:70px}
.cert .modal-header button {position: absolute; top:20px; right:20px;}
.cert .modal-title {text-align: center; font-weight:bold; margin:20px auto}
.cert .modal-body li:first-child {font-weight: 500; font-size:.9em; color:#777;}
.cert .modal-body li {
	padding:5px 10px; border:1px solid #ddd; margin-top:-1px; display: grid; grid-template-columns: 15% 15% 35% 35%;
	font-weight:500; font-size:1.05em
}
.cert .modal-body li span {display: inline-block;}
.cert .modal-footer {display: block; text-align: center; border-top:0}
.cert .modal-footer div {
	display: flex; justify-content: space-between; margin:0 auto 15px; 
	border-bottom:1px solid #ddd; padding:0 70px 20px
}
.cert .modal-footer div .es_btn {flex-basis: 49%; border:1px solid #aaa; padding:5px 12px}
.cert .modal-footer #vm_check2 {border:1px solid #aaa; height:40px;}
.cert .modal-footer #check_btn {height:40px; padding:0 7px}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



/*우리아이,건강일기 휴대폰에서 한페이지*/
@media screen and (max-height: 1000px) {
  #petContainer {height:100%; overflow:hidden;}
  .info-section #menuSection .menu {padding:40px 30px; font-size:1rem}
  .info-section #kitSection {padding:30px 15px 20px}
  /* .info-section #menuSection {padding:3px 15px 55px} */
  .info-section #menuSection .menu img {height:36px;}
}


@media screen and (max-height: 850px) {
  .fc-theme-standard td, .fc-theme-standard th {height:40px}
  .gene-container #petProfile .select-pet-msg {width:180px; height:180px;}
  .gene-container #petProfile .pet-img {width:180px; height:180px;}
  .info-section #menuSection .menu {padding:30px}
}

@media screen and (max-height: 800px) {
  .info-section .name-section #petName {font-size:22px}
  .info-section .name-section {margin:0}
  #petContainer .tns-outer {margin:20px 0 !important}
  .info-section #kitSection {padding:15px 15px 5px}
  .info-section #kitSection .testing-row {padding:12px 30px}
  .info-section #menuSection .menu {padding:20px 30px;}
  .info-section #menuSection #resultReport img, .info-section #menuSection #healthDiary img {margin:0 auto 10px auto}

  #calendar {padding:10px 15px 10px}
  .profile-section {padding:0 15px 5px}
  .profile-section .pet-img {width:68px}
  .fc .fc-daygrid-day-frame {height:36px}
  .profile-section .pet-info .pet-info-button {margin:10px 0 5px; height:36px}
  .profile-section .pet-info .pet-info-button .cal_search_box {line-height:36px}
  .profile-section .pet-info .pet-info-button li {height:36px}
  .profile-section .pet-info .pet-info-button img {height:18px}
  .fc-header-toolbar {margin:0 0 10px !important}
  .profile-section .pet-info li #writeBtn {font-size:14px}
  .profile-section .pet-info li #writeBtn img {height:13px}
  #petContainer .body.pet-body {padding-top:10px;}

  .fc-theme-standard td, .fc-theme-standard th {height:36px}
  .info-section #menuSection {padding:10px 15px 20px}
  #calendarSection {height:calc(100vh - 300px)}
  #listSection {height:calc(100vh - 300px)}
}

@media screen and (max-height: 700px) {
  #petContainer .tns-outer {margin:20px 0 15px !important}
  .info-section #kitSection .testing-row .testing-status span:last-child {font-size:16px}
  /* .info-section #menuSection {padding:0 15px 25%} */
  .info-section #menuSection .menu {font-size:1rem; padding:21px 30px;}
  .info-section #menuSection .menu img {height:30px;}
  .info-section #menuSection #resultReport img, .info-section #menuSection #healthDiary img {margin:0 auto 5px auto}

  .profile-section .pet-info li #writeBtn {height:32px; line-height:32px; font-size:13px}
  .profile-section .pet-info li #writeBtn img {margin-top:-3px}
  .fc-toolbar-title {font-size:17px !important;}
  .fc .fc-button .fc-icon {font-size:1.5em !important}
  #calendarSection .fc-view-harness {padding:5px}
  .profile-section .pet-img {width:60px}
  .profile-section .pet-info .pet-name {font-size:14px; margin:0 0 3px}
  .profile-section .pet-img .pet-profile {border:3px solid #E1EBF5}
  .profile-section .pet-info > li:nth-child(2) {margin-top:3px !important}
  #petContainer .body.pet-body {padding-top:0;}
  #calendarSection {height:calc(100vh - 254px)}
  #listSection {height:calc(100vh - 254px)}
  #categoryList.category-list .category .category-icon-container {width:36px; height:36px;}
  #calendar {padding:7px 15px 10px}
  .fc-theme-standard td, .fc-theme-standard th {height:36px}
  .fc .fc-daygrid-day-frame {height:36px}
  #categoryList.category-list {padding:5px 10px}
  .profile-section .pet-info .pet-info-button img {height:16px}

  .info-section #menuSection {padding:10px 15px 20px}
  .gene-container #petProfile .pet-img {margin:30px auto 15px}

  #tns1 > .tns-item {padding-right:20px !important}
  .banner #tns1 > .tns-item {padding-right:inherit !important}

  .info-section.top_fix .splide__slide {margin-top:20px}
}

@media screen and (max-height: 630px) {
  #petContainer .body.pet-body {min-height:auto}
  #calendarSection {height:auto; position:initial}
  #listSection {height:auto; position:initial}
  #petContainer {overflow:auto;}
  .info-section.top_fix {position:initial}
  #petContainer .info-section.bottom_fix {position:initial; margin-bottom:68px}
  #petContainer .body {margin-top:15px}
  #petContainer .body.pet-body {margin:60px 0 0}
}


@media screen and (max-width: 300px) {
  /*메인 - 폴드*/
  .info-section #menuSection .menu img {height:30px}
  .info-section #menuSection #resultReport img {margin:0 auto 10px auto}
  .info-section #menuSection #healthDiary img {margin:0 auto 10px auto}
  .info-section #menuSection .menu {padding:22px 20px; font-size:15px}
  .inner-container .header h2 {font-size:17px}
  .info-section .name-section #petName {font-size:20px; margin:0 8px 0 15px}
  .info-section .name-section img {height:17px;}
  .info-section #birthdaySection {font-size:14px}
  .info-section #kitSection .testing-row {padding:12px 25px}
  .info-section #kitSection .testing-row .testing-btn {width:auto; height:28px;}
  .info-section #kitSection .testing-row .testing-status img {height:13px; margin-right:5px}
  .info-section #kitSection .testing-row .testing-status span:first-child {font-size:13px}
  .info-section #kitSection .testing-row .testing-status span:last-child {font-size:15px}
  #tns1 > .tns-item {padding-right:20px !important}
}


.bl-wrap, .home-header, .mypage-list, .pet-name, .testing-title, .disease-row .disease-iconbox div, .disease-all-slider .all_text p:first-child,
#helpModal .main-title, .clear-icon, .carrier-icon, .danger-icon, #diseaseContainer .accordion .accordion-btn, .guide-title, .bottom-menu li, #diseaseContainer .disease-info
 , #petName, .tabs__bar, .gene-container #openBarcodeButton, #enrollTest, .post, .view-nick, .bl-row, .disease-row span{ font-family: NanumSquareRound; }

 .back-area { position: absolute; width: 40px; height: 30px; } 
 .back-area img { left: 0 !important; }

 #surveyBody { padding: 15px; }
 #surveyBody #surveyQuestion { font-size: 22px; font-weight: bold; font-family: nanumSquareRound; }
 #surveyBody #surveyList { padding: 10px; }
 #surveyBody #surveyList li { margin: 10px 0; border: 1px solid #EFEFEF; padding: 15px; }
 #surveyBody #surveyAnswer { margin: 50px 0 20px; border: 0; border-bottom: 1px solid gray; width: 100%; padding: 10px; }
 #surveyBody #surveyButton { margin-left: 50%; background-color: var(--ptBlue); color: white; padding: 10px 20px; border: 0; border-radius: 20px; transform: translateX(-50%); }


 /*실험실*/
.point-div {margin:20px 15px; border-radius: 8px; background:#EFF0F4; line-height:60px; padding:0 20px; font-size:15px; font-weight:600; text-align: left;}
.point-div img {height:22px; margin-right: 5px;}
.point-div .my-point {font-size:16px; font-weight: bold; float: right;}
.point-div:after {clear: both; content:''; display: block;}
.view_point {text-align: right; font-weight:900; font-size:18px; margin:5px 0 10px}
.lab_bottom {
  position:fixed; bottom:0; left:0; right:0; width:100%; padding:12px 15px; border-top:1px solid #EBEBEB;
  background:#fff
}
.lab_bottom button {
  width:100%; height:48px; font-size:16.5px; text-align: center; 
  border:0; border-radius: 5px; background:#0F3999; color:#fff;
  font-weight: 800;
}
.lab_bottom button.btn_close {color:#999}
.ok_text {font-size:1em; font-weight:bold; line-height: 1.5; padding:7px 0; color:#777}
.ok_text.oklast {border-top:1px solid #ddd;}
.lab-info {
  margin:20px 0 0;text-align: center; padding:20px 0 30px; 
  font-size:12px; color:#555; line-height:19px; border-top:1px solid #eee;
}
.lab-info-title {font-size:13px; padding:5px 0; font-weight:600}
.lab-info-bottom {margin-top:10px; font-size:13px; font-weight:bold}
.lab-info-bottom span {display: inline-block; margin:0 5px}
.lab-info-title img {height:6px; margin-left:2px}
.lab_toggle {display: none;}
.lab-info-title.up img {transform:rotate(180deg)}

.point-div.po_list_wrap {line-height:normal; padding:25px 20px; margin:20px 15px 15px}
.po_top {border-bottom:1px solid #ddd; padding-bottom:25px}
.po_top:after {clear:both; content:''; display:block}
.po_top p {width:100px; float:left}
.point-div .po_top .my-point {width:calc(100% - 110px); text-align:right; font-size:19px; font-weight:900}
.po_bottom {margin:22px 0 5px; font-size:15px;}
.po_bottom span {float:right; font-weight:bold}
.po_bottom:after {display:block; content:''; clear:both}
.po_text {color:#888; font-size:13px; font-weight:500}
.po_guide {
  margin:0 auto; width:calc(100% - 30px); height:45px; display:block; font-weight:bold;
  border:1px solid #ddd; border-radius:7px; font-size:15px; background:#fff
}
.my_point_list {margin:25px 0 0; border-top:6px solid #f2f2f2; padding:0 15px;}
.my_point_list li {padding:20px 0; border-bottom:1px solid #eee; display:flex; justify-content: space-between;}
.my_point_list li:last-child {border-bottom:0}
.my_point_list li .mp-div:first-child {width:50px; flex-basis:50px}
.my_point_list li .mp-div:first-child span {
  border:1px solid #93DDF3; color:#42C0E7; padding:5px 6px; border-radius:3px; font-size:12px; font-weight:bold
}
.my_point_list li .mp-div:first-child span.minus_span {color:#FC7070; border:1px solid #FEB0B0}
.my_point_list li .mp-div:nth-child(2) {width:calc(100% - 160px);}
.my_point_list li .mp-div .mp_point {display:block; font-size:16px; font-weight:900; text-align:right; line-height:16px}
.my_point_list li .mp-div .mp_date {color:#999; font-size:11px; display:block}
.my_point_list li .mp-div .mp_content {display:block; font-size:14px; font-weight:bold}
.my_point_list li .mp-div:last-child {width:110px; text-align: right;}
.expire-date {font-size:11px; color:#888}