@charset "utf-8";

/* 리셋
*****************************************/
html,body,main,footer,
div,section,article,aside,p,pre,span,summary,
dl,dt,dd,details,
form,fieldset,input,legend,textarea,
h1,h2,h3,h4,h5,h6,header,hgroup,
figure,figcaption,
mark,menu,nav,
ol,ul,li,
table,th,td,
a,button,
audio,blockquote,canvas,code,time,video {
	box-sizing: border-box;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optizizeLegibility;
}

body { font-family: 'Pretendard', Helvetica,sans-serif; font-size:16px; font-weight: 400; color:#111; letter-spacing:-0.1px; background-color:#fff;}
body.cta_fixed_space .footer_renew { /*padding-bottom:109px !important;*/ padding-bottom:89px !important; }
body#renew .footer_renew.pb0 { padding-bottom: 0 !important;}
body.cta_fixed_space .renewranding + .footer_renew { padding-bottom: 60px !important;}
body.bodyFixedRenew { position: fixed; width: 100%;}

button { border: 0; background-color: transparent; cursor: pointer;}
button,input,select,textarea { margin:0; padding: 0; border-radius:0; font-family: 'Pretendard', Helvetica,sans-serif; font-size:16px; font-weight: 400; vertical-align:middle; line-height:1; appearance:none; }
hr { border: 0;}
img { object-fit:cover; vertical-align:top; }


/* 공통 CSS
*****************************************/

/* 하이드 */
.hide_txt { overflow: hidden; position:absolute; display:inline-block; width:1px; height:1px; font-size:1px; line-height:0; clip:rect(1px 1px 1px 1px); }
.visual_hidden { position:absolute; display:block; width:1px; height:1px; font-size:1px; line-height:0; clip:rect(1px, 1px, 1px, 1px); overflow:hidden; }

/* 폰트 스타일 */
.font_normal { font-weight: normal !important;}

/* 색상 스타일 */
.color_point { color: #de4738 !important;}
.color_point2 { color: #7b71e3 !important;}

/* Height 스타일 */
.height24 { height: 24px;}
.height40 { height: 40px;}
.height50 { height: 50px;}

.mt15 { margin-top:15px; }

/* 목록 스타일 */
.public_list { margin-top: 14px;}
.public_list li { font-size: 15px; font-weight: 500; color: #656565; word-break: keep-all; line-height: 21px;}
.public_list li.small_ft { font-size:13px;} 
.public_list li ~ li { margin-top: 10px;}
.public_list li.text_indent { font-size:13px; padding-left: 10px; text-indent: -10px;}

.blet_list li { font-size: 14px; color: #656565; padding-left: 8px; text-indent: -8px; line-height: 19px;}
.blet_list li ~ li { margin-top: 10px;}

/* 탭 */
.position_sticky { position: sticky; top: 63px; z-index: 1; padding: 0 10px; border-bottom: 1px solid #ddd; background-color: #fff;}
.tablist { display: flex; position: relative;}
.tablist .wtab { display: flex; align-items: center; justify-content: center; flex: 1; height: 50px; font-weight: 700; color: #aaa;}
.tablist .wtab.active { color: #111;}
.marker { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #111; border-radius: 1px; transition: 0.3s;}
.tablist.no_animation .wtab.active { position: relative;}
.tablist.no_animation .wtab.active::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background-color: #111;  border-radius: 1px;}

.tabpanel { display: none;}
.tabpanel.open { display: block;}


/* 레이어
*****************************************/

/* 공통 */
/* body.scrollLock { position: fixed; overflow: hidden; width: 100%;} */
body.scrollLock { overflow: hidden; width: 100%;}
body.scrollLock_251014 { overflow:hidden !important; width: 100%;}
.layer_comm { display: none; position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; width: 100%; text-align: center; background-color: rgba(0,0,0,0.6); opacity: 0; outline: none; transition: opacity .2s;}
.layer_comm::after { content: "";	display: inline-block; height: 100%; vertical-align: middle;}
.layer_comm.ready { display: block;}
.layer_comm.show { opacity: 1;}
.layer_comm.show .layer_body { transform: translateY(0);}
.layer_comm .scroll_pixed { display: flex; flex-direction: column;}
.layer_comm .scroll_target { flex: 1; overflow-x: hidden; overflow-y: auto;}
.layer_comm .close_btn { display: block; position: absolute; right: 24px; top: 24px; width: 24px; height: 24px; background: url(/subscribe/images/renew/ico_layer_close.svg) no-repeat;}
.layer_comm .close_btn:focus { outline:1px solid #000; }

.layer_body { position: relative; display: inline-block; vertical-align: middle; text-align: left; background: #fff; outline: none;}
.layer_body.typeBot { all: unset; position: absolute; right: 0; left: 0; bottom: 0; padding: 27px 24px 38px; background: #fff; transform: translateY(100%); border-radius: 16px 16px 0 0; transition: transform .3s;}
.layer_body.typeBot.height_in { height:calc(100% - 100px);}
.layer_body.typeCenter { padding: 20px; background: #fff; transition: transform .5s;}

/* 펫퍼민트 전화상담 */
.pet_tel_consult { position:fixed; left:0; right:0; top:0; bottom:0; width:100%; background:#fff; z-index:105; }
.pet_tel_consult .hide { position:absolute; left:0; top:0; width:1px; height:1px; clip:rect(1px, 1px, 1px, 1px); overflow:hidden; }
.pet_tel_consult .pop_wrap { display:flex; flex-flow:column nowrap; height:100%; overflow:hidden; }
.pet_tel_consult .pop_wrap .pop_header { position:relative; flex:0 66px; }
.pet_tel_consult .pop_wrap .pop_cont   { position:relative; flex:1; padding:0 24px; overflow-y:auto; }
.pet_tel_consult .btn_close { position:absolute; right:12px; top:50%; width:40px; height:40px; background:url("/petpermint/images/common/ico_close_btn.png") no-repeat center center; transform:translateY(-50%); }
.pet_tel_consult .btn_close > span { position:absolute; left:0; top:0; width:1px; height:1px; clip:rect(1px, 1px, 1px, 1px); overflow:hidden; }
.pet_tel_ment { position:relative; display:flex; flex-flow:column wrap; justify-content:center; min-height:121px; margin-top:10px; padding:21px 24px; background:#fff7df; border-radius:8px; box-sizing:border-box; }
.pet_tel_ment:after { position:absolute; right:8px; top:-10px; width:91px; height:108px; background:url("/petpermint/images/renew/ico_pet_consult.svg") no-repeat center center; background-size:contain; content:""; }
.pet_tel_ment p { font-size:16px; color:#111; line-height:1.25; }
.pet_tel_ment p + p { margin-top:12px; }
.pet_tel_ment .txt_b { font-size:18px; font-weight:700; }
.pet_tel_ment .txt_color_red { color:#de4738; }

.pet_tel_ask { position:relative; margin-top:40px; padding-left:87px; padding-bottom:24px; border-bottom:1px solid #f2f2f2; }
.pet_tel_ask:before { position:absolute; left:0; top:0; width:64px; height:64px; background:url("/petpermint/images/renew/ico_pet_ask.svg") no-repeat center center; background-size:contain; content:""; }
.pet_tel_ask:after { position:absolute; left:50%; bottom:-6px; width:12px; height:6px; background:url("/petpermint/images/renew/ico_pet_arrow.svg") no-repeat center center; background-size:contain; transform:translateX(-50%); content:""; }
.pet_tel_ask p { font-size:16px; color:#111; line-height:1.25; }
.pet_tel_ask .txt_b { font-weight:700; }
.pet_tel_ask .txt_s { font-size:13px; color:#888; }

.pet_tel_input { position:relative; display:flex; flex-flow:row wrap; justify-content:flex-start; width:auto; max-width:340px; margin-top:20px; }
.pet_tel_input > div { margin-top:10px; }
.pet_tel_input .pet_tel_tit { flex:0; flex-basis:40%; padding-top:10px; font-size:16px; color:#656565; font-weight:500; box-sizing:border-box; }
.pet_tel_input .pet_tel_cont { flex:1; flex-basis:60%; box-sizing:border-box; }
.pet_tel_input .group { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:20px; height:40px; }
.pet_tel_input .group .rdo_block { flex:0; display:flex; align-items:center; }
.pet_tel_input .group .bar { position:relative; display:block; }
.pet_tel_input .group .bar { position:absolute; bottom:0; width:0; height:1px; background:#ed4738; transition:all .2s ease; }
.pet_tel_input .group .input_box { position:relative; flex:1; margin-top:0; }
.pet_tel_input .group .input_box input[type=text] { display:block; width:100%; height:40px; padding:0 0 2px 0; font-size:16px; background:transparent; border:0; border-bottom:1px solid #aaa; }
.pet_tel_input .group input[type="radio"] { position:relative; display:inline-block; width:22px; height:22px; vertical-align:top; border:0; outline:0; opacity:1; appearance:none; cursor:pointer; }
.pet_tel_input .group input[type="radio"]:before { position:absolute; left:0; top:0; width:20px; height:20px; background-color:#fff; border-radius:50%; border:1px solid #ccc; transition:border-color .2s, box-shadow .2s, background-color .5s; content:""; }
.pet_tel_input .group input[type="radio"]:after { position:absolute; left:50%; top:50%; width:8px; height:8px; background-color:#fff; border-radius:50%; transform:translate(-50%, -50%); content:""; }
.pet_tel_input .group input[type="radio"]:checked:before { background-color:#de4738; border-color:#de4738; box-shadow:0 0 0 5px #de4738 inset; }
.pet_tel_input .group input[type="radio"] + label { display:inline-block; margin-top:2px; padding-left:8px; font-size:16px; color:#333; font-weight:500; white-space:nowrap; } 
.pet_tel_input .group input[type="radio"]:checked + label { color:#de4738; }
.pet_tel_input .txt_error { display:none; margin-bottom:10px; border-width:1px; }
.pet_tel_input .add_placeholder { position:relative; }
.pet_tel_input .add_placeholder:after { position:absolute; left:30px; top:50%; color:#999; transform:translateY(-50%); content:"- 없이 입력하세요."; }

.pet_tel_consult .btn_area { margin:24px -24px 0; padding:18px; }
.pet_tel_consult .btn { display:inline-flex; justify-content:center; align-items:center; width:100%; height:52px; background:#de4738; border:0; border-radius:6px; }
.pet_tel_consult .btn span { font-size:16px; color:#fff; font-weight:700; }
.pet_tel_consult .btn_close_layer { position:absolute; display:block; right:24px; top:24px; width:24px; height:24px; background:url("/default/images/renew/ico_layer_close.png") no-repeat center center; background-siz:contain; }
.pet_tel_consult .btn_close_layer span { position:absolute; left:0; top:0; width:1px; height:1px; clip:rect(1px, 1px, 1px, 1px); overflow:hidden; }


/* S: 25.01.08 == 웹접근성 작업 상품정보, Q&A  */
.information_box { display: flex; position: sticky; top: 48px; z-index: 1; padding: 0 10px; border-bottom: 1px solid #ddd; background-color: #fff;}
.information_off { display: flex; align-items: center; justify-content: center; flex: 1; height: 53px; font-weight: 700; color: #777;}
.information_on { display: flex; align-items: center; justify-content: center; flex: 1; height: 53px; border-bottom: 2px solid #111; font-weight: 500; font-weight: 700; color: #111;}
.marker { position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: #979797; border-radius: 2px 2px 0 0; transition: 0.3s;}
/* E: 25.01.08 == 웹접근성 작업 상품정보, Q&A  */