@charset "utf-8";

body,html{min-width:320px;height:100%;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tab-highlight-color:transparent;-webkit-overflow-scrolling: touch;}
body,input{font-size:14px}
html,legend{color:#000}
.skipnav a,article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
html{background:#fff;color:#000;font-size:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;-webkit-user-select:none;-webkit-touch-callout:none;}
article,aside,audio,blockquote,body,canvas,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,input,legend,li,mark,menu,nav,ol,p,pre,section,summary,td,textarea,th,time,ul,video{margin:0;padding:0}
body{min-width:320px;background-color:#fff;color:#333;font-family:Helvetica,sans-serif;line-height:1.4;letter-spacing:-1px}
img{max-width:100%;border:0;vertical-align:middle}
button,input,select,textarea{margin:0;-webkit-border-radius:0;vertical-align:middle;line-height:19px;-webkit-appearance:none;-moz-appearance:none;appearance:none; width: 0; height: 0; border: 0; }
/*button,input,select,textarea{margin:0;-webkit-border-radius:0;vertical-align:middle;line-height:19px;-webkit-appearance:none;}*/
input { opacity:1; }
input::placeholder { -webkit-text-fill-color:#929292; }

select::-ms-expand{display: none;}
button,select,textarea{font-size:14px;-webkit-appearance:none}
select{background-color:#fff;}
table{border-spacing:0;border-collapse:collapse}
fieldset{border:0}
address,caption,cite,code,dfn,em,th,var{font-weight:400;font-style:normal}
strong{font-style:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
caption{width:0;height:0}
h1,h2,h3,h4,h5,h6{font-family:"Helvetica,sans-serif";font-size:100%; font-style:normal; font-weight: 700;}
hr,legend{top:-9999px}
caption,hr,legend{width:0;height:0;font-size:1px;text-indent:-9999em;line-height:0;border:0;background-color:transparent;color:transparent;font:0/0 a;text-shadow:none}
a,a:active,a:focus,a:hover,a:link,a:visited{color:#666;text-decoration:none;cursor:pointer}
textarea{resize:none}
button {cursor: pointer; border: 0; padding: 0; margin: 0; background-color: transparent; outline: none;}
.skipnav{position:absolute;top:0;left:0;width:100%;height:0;line-height:0}
.skipnav a{overflow:hidden;width:1px;height:1px;margin:0 -1px -1px 0;padding:0;font-size:0;line-height:0}
.skipnav a:active,.skipnav a:focus,.skipnav a:hover{position:absolute;top:0;left:0;z-index:50;width:100%;height:19px;margin:0;padding:10px 0 5px;border:1px solid #000;background:#333;color:#fff;font-size:17px;text-align:center;line-height:100%}
.clfix{*zoom:1}
.clfix:after,.clfix:before{display:table;line-height:0;content:""}
.clfix:after{clear:both}
.hide_guide_title,.hide_txt{display:inline-block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;clip:rect(1px 1px 1px 1px)}
.dimm{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background-color:#000;opacity:.8}
#chatbot_wrap .dimm{z-index:101}/* 180305 */
.main_story .control a,.main_top .control a{opacity:1!important;content:""}
#layerAreaWrap .dimm{z-index:105; min-height:100vh !important;}
#layerAreaWrap .dimm.h100{height:100% !important}
.ellipsis{display:block;text-overflow:ellipsis;white-space:nowrap}
.hide_txt{display:inline-block;width:1px;height:1px;font-size:1px;line-height:0;clip:rect(1px 1px 1px 1px);position:absolute;}
.access_ios {overflow: auto !important;height:100% !important;-webkit-overflow-scrolling : auto !important}
.hidden {width: 1px;height: 1px;font-size: 1px;overflow: hidden;position: absolute;clip:rect(1px 1px 1px 1px);}/* wa: 스타일 변경 */

/* skipnav */
.skipnav{top:0;left:0;width:100%;height:0;line-height:0}
.skipnav a{overflow:hidden;width:1px;height:1px;margin:0 -1px -1px 0;padding:0;font-size:0;line-height:0;display:block;}
.skipnav a:active,.skipnav a:focus,.skipnav a:hover{position:absolute;top:0;left:0;z-index:50;width:100%;height:19px;margin:0;padding:10px 0 5px;border:1px solid #000;background:#333;color:#fff;font-size:17px;text-align:center;line-height:100%}

/* Interval  */
.mg0{margin:0px !important}
.mt0{margin-top:0px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}
.mt55{margin-top:55px !important}
.mt65{margin-top:65px !important}
.mt123{margin-top:123px !important}
.mt-20{margin-top:-20px !important}

.ml0{margin-left:0 !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}

.mr0{margin-right:0 !important}
.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr20{margin-right:20px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}
.mr50{margin-right:50px !important}

.mb-10{margin-bottom:-10px !important}
.mb0{margin-bottom:0 !important}
.mb10{margin-bottom:10px !important}
.mb20{margin-bottom:20px !important}
.mb25{margin-bottom:20px !important}
.mb30{margin-bottom:30px !important}
.mb35{margin-bottom:35px !important}
.mb40{margin-bottom:40px !important}
.mb45{margin-bottom:45px !important}
.mb50{margin-bottom:50px !important}
.mb55{margin-bottom:50px !important}
.mb80{margin-bottom:80px !important}

.pd0{padding:0 !important}
.pl0{padding-left:0 !important}
.pl10{padding-left:10px !important}
.pl20{padding-left:20px !important}
.pl30{padding-left:30px !important}
.pl40{padding-left:40px !important}
.pl50{padding-left:50px !important}

.pt0{padding-top:0px !important}
.pt10{padding-top:10px !important}
.pt20{padding-top:20px !important}
.pt30{padding-top:30px !important}
.pt35{padding-top:35px !important}
.pt40{padding-top:40px !important}
.pt50{padding-top:50px !important}
.pt60{padding-top:60px !important}
.pt65{padding-top:65px !important}

.pb0{padding-bottom:0 !important}
.pb10{padding-bottom:10px !important}
.pb20{padding-bottom:20px !important}
.pb30{padding-bottom:30px !important}
.pb40{padding-bottom:40px !important}
.pb50{padding-bottom:50px !important}
.pb55{padding-bottom:55px !important}
.pb80{padding-bottom:80px !important}
.pb110{padding-bottom:110px !important}

/* location */
.vt{vertical-align:top !important;}
.vm{vertical-align:middle !important;}
.vb{vertical-align:bottom !important;}
.dpType01{display:none !important}
.dpType02{display:inline !important}
.dpType03{display:inline-block !important}
.dpType04{display:block !important}

/* width percent */
.w10p{width:10% !important}
.w20p{width:20% !important}
.w30p{width:30% !important}
.w40p{width:40% !important}
.w50p{width:50% !important}
.w60p{width:60% !important}
.w70p{width:70% !important}
.w80p{width:80% !important}
.w90p{width:90% !important}
.w100p{width:100% !important}

/* common font */
.txt_l {text-align:left !important;}
.txt_c {text-align:center !important;}
.txt_r {text-align:right !important;}
.txt_bd4{font-weight:700;color:#444 !important}
.txt_purple{color:#7d6feb !important;}
.txt_red{color:#e11b22 !important;}
.ptc {color:#776ade;}
.txt_999{color:#999 !important;}
.txt_bd{font-weight: 700;}
.txt_siz16{font-size:16px !important;}
.ft15 {font-size:15px;}

/* ect */
.min_hgt123{min-height: 123px;}
.min_hgt300{min-height: 300px;}

.dp_none{display:none !important}/* 170814 */
.dp_inline{display:inline !important}/* 180727 */
.dp_inline_block{display:inline-block !important}/* 180727 */
.dp_block{display:block !important}/* 180727 */
.dp_flex{display:flex !important}/* 20220907 */


/* 220705 : BHY : 펫개편 신규공통 */
:root {
    --color-yellow : #ffcc33;
    --color-purple : #7d6feb;
    --border-color : #ddd;
    --radius-button : 5px;

    --space-10 : 10px;
    --space-35 : 35px;
    --space-30 : 30px;

    --font-12 : 12px;
    --font-14 : 14px;
    --font-16 : 16px;
    --font-17 : 17px;

    --bg-common : url("/petpermint/images/common/common.png?v=1.0.1");
}

/* iscroll none */
/* .over_scroll {overflow-y:auto !important;} */

/* 가로모드지원 */
.layer_wrap02.landscape_layer {display: none; top: 50%; margin-top: -60px;}
.layer_wrap02{position: absolute; top: 100px; left: 0; z-index: 105; width: 100%; margin: 0;}
.landscape #container,.landscape #footer,.landscape #header,.landscape #layerAreaWrap .dimm,.landscape #pop_wrap,.landscape .layer_wrap,.landscape .nav{display:none!important}
.landscape .layer_wrap.landscape_layer,.landscape .layer_wrap02.landscape_layer{display:block!important}
.layer_wrap02 .layer_content {padding: 0 30px;}
.layer_wrap02 .alert{position:relative;width:100%;padding:20px 0;background-color:#fff}
.layer_wrap02 .alert .ico_alert{display:block;width:34px;height:34px;margin:0 auto 12px;background:url(/subscribe/images/common/ico_comm.png) -63px -119px no-repeat;background-size:250px 250px}
.layer_wrap02 .alert .con{padding:0 15px;text-align:center}
.layer_wrap02 .alert p{margin-bottom:15px;color:#000;font-weight:700;font-size:15px;line-height:22px}
.layer_wrap02.landscape_layer .layer_content{position:relative;z-index:100}

/* 181101*/
body{overflow-x:hidden !important;}

/* 탑버튼 */
#top_scroll {display:block; width:45px;	height:45px; position:fixed; bottom:30px; right:20px; z-index:1; background:url('/petpermint/images/common/top_scroll.png') no-repeat;     background-size: 45px 45px; display:none;}
#top_scroll.show {display:block;}
#top_scroll.top_scroll_up {bottom:66px;;}


.step_tip .tip_motion .p_relative .num15{display:none;top:65px;left:65px;width:45px;background:url(/subscribe/images/product/tip_motion04.png) left top no-repeat;background-size:100%}
.s_loader,.s_loader:after,.s_loader:before{width:.63em;height:3em;background:#999;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out}
.s_loader:after,.s_loader:before{position:absolute;top:0;content:""}
.s_loader:before{left:-1em;-webkit-animation-delay:-.32s;animation-delay:-.32s}
.s_loader{position:absolute;top:40%;left:50%;z-index:155;font-size:11px;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.14s;animation-delay:-.14s}
.s_loader:after{left:1em}
@-webkit-keyframes load1{0%,100%,80%{height:2em;box-shadow:0 0 #999}
40%{height:3em;box-shadow:0 -2em #999}
}
@keyframes load1{0%,100%,80%{height:2em;box-shadow:0 0 #999}
40%{height:3em;box-shadow:0 -2em #999}
}

/* 191220 : KSH : 펫퍼민트 펫트체크 보장 질병 리스트 안내 팝업*/

.pop_content_inner > ul li {position: relative;padding: 0 0 10px 7px;font-size: 14px;}
.pop_content_inner > ul li:before {position: absolute;top: 8px;left: 0;z-index: 1;content: "";background-color: #333;height: 3px;width: 3px;}
.pop_content_inner > ul li.str_txt_red{font-weight: bold;color: #e11b22;}

.pet_check_pop_wrap a.pop_close {position: absolute;top: 0;right: 0;z-index: 100;padding: 15px;}
.pet_check_pop_wrap a.pop_close span {display: block;width: 12px;height: 12px;background: var(--bg-common) -10px -125px no-repeat;background-size: 250px 250px;text-indent: -999em;}

.pet_check_pop_wrap .pop_content_inner {padding:17px 15px 120px;}
#pop_wrap #pop_content .pop_content_inner .pet_check_accor dl dt {font-weight: bold;font-size: 15px;color: #000;border-bottom: 1px solid #ddd;padding: 10px 0 10px;}
.pet_check_pop_wrap .pop_content_inner .pet_check_accor dl dd ul {padding-top:5px; padding-bottom: 18px;}

.pet_check_accor {margin-bottom:50px;}
.pet_check_accor dl dt.on:after {content:"";position: absolute;margin-top: -10px;right:15px;width:15px;height:28px;background:url(/petpermint/images/content/petcal/accor_arrow.gif) right 18px no-repeat;background-size: 15px 9px;transform: rotate(0);}
.pet_check_accor dl dt:after {content:"";position: absolute;margin-top: 7px;right:15px;width:15px;height:28px;background:url(/petpermint/images/content/petcal/accor_arrow.gif) right 18px no-repeat;background-size: 15px 9px;transform: rotate(-180deg);}

.pet_check_accor dl dd {display:none;border-bottom: 1px solid #ddd;background-color:#f4f4f4;padding-left:10px;}
.pet_check_accor dl dd > ul li {position: relative;padding-left:7px;padding-top: 5px;}
.pet_check_accor dl dd > ul li:before {position: absolute;top: 13px;left: 0;z-index: 1;content: "";background-color: #666;height: 3px;width: 3px;}

#pop_wrap.pet_check_pop_wrap>a.pop_close span {display:block; width:12px; height:12px; background:var(--bg-common) -10px -125px no-repeat; background-size:250px 250px; text-indent:-999em;}

a.btn_ro_purple, a.btn_ro_purple:active, a.btn_ro_purple:focus,
a.btn_ro_purple:hover, a.btn_ro_purple:link, a.btn_ro_purple:visited{color:#fff;}

.btn_ro_purple {display:inline-block; width:100%; background-color:#7d6feb; color:#fff; line-height:35px; border-radius:2px; text-align:center; box-sizing:border-box; font-size:15px; letter-spacing:0; font-family:"Helvetica,sans-serif";}
.btn_ro_purple span{position:relative;}
.btn_ro_purple span:before{content:''; background:var(--bg-common) -236px 0 no-repeat; background-size:250px 250px; width:14px; height:14px; display:inline-block; position:absolute; top:8%; left:-20px;}


/*** global ***/
.justify_sb {display: flex;justify-content: space-between;align-items: center;}
.sec_space {margin-bottom: var(--space-35);}
.sub_space {margin-bottom: var(--space-30);}

/*** button ***/
.btn_comm {border-radius: var(--radius-button);}
.btn_color_white {border: 1px solid  var(--border-color);background-color: #fff;}
.btn_color_yellow {background-color: var(--color-yellow);}

/*** input ***/
.data_group {position:relative}
.data_group label {font-size: var(--font-14);font-weight: bold;display: block;}
.data_group input[type="number"],
.data_group input[type="text"]{width:100%;padding:0 0 0 3%;font-size: var(--font-14);font-weight: bold;height: 45px;background-color: #fff;border: 1px solid var(--border-color);border-radius: var(--radius-button);box-sizing: border-box;}
.data_group input[type="tel"],
.data_group input[type="password"]{padding:0 0 0 3%;font-size: var(--font-14);font-weight: bold;height: 45px;background-color: #fff;border: 1px solid var(--border-color);border-radius: var(--radius-button);box-sizing: border-box;}
.data_group .custom_radio .inner_100 { position:relative; }
.data_group .custom_radio .inner_100 input,
.data_group .custom_radio .inner_100 input:active { border:0; }


/* Selectbox */
.option_box .data_group label {margin-bottom: var(--space-10);}
.data_group .round_sltbox .selectbx {border-bottom: none;}
.data_group .round_sltbox .selectbx .target_select{width:100%;padding:0 0 0 15px;margin-bottom: 8px;background-color: #fff;position:relative;font-size: var(--font-14);font-weight: bold; height: 45px;line-height: 45px;border: 1px solid var(--border-color);border-radius: var(--radius-button);box-sizing: border-box;}
.data_group .round_sltbox .selectbx .target_select.on{font-weight:700}
.data_group .round_sltbox .selectbx .target_select:after{ content:""; position:absolute; right:12px; top:50%; width:13px; height:8px; background:var(--bg-common) no-repeat; background-size:250px 250px;background-position: -25px -125px;transform: translateY(-50%);}

.data_group .round_sltbox .selectbx .select_list{display:none; top:100%; left:0; width:100%; height:auto; padding:0; border-width:2px 0 0; border-style:solid; border-color:#7d6feb}
.data_group .round_sltbox .selectbx .select_list li{float:left; width:25%; height:40px; margin:0 0 0 -1px; text-align:center}
.data_group .round_sltbox .selectbx .select_list li a,
.data_group .round_sltbox .selectbx .select_list li span{height:39px; padding: 0; border-width:1px; border-style:solid; border-color:var(--border-color); line-height:39px}
.data_group .round_sltbox .selectbx .select_list li:nth-child(4n+1){margin-left:0}
.data_group .round_sltbox .selectbx .select_list li:nth-child(4n) a,
.data_group .round_sltbox .selectbx .select_list li:nth-child(4n) span{width:100%; padding-left:1px}

.data_group .round_sltbox.type_number .selectbx .target_select{margin-bottom: 0;}
.data_group .round_sltbox.type_number .selectbx .select_list{top:0;box-sizing: border-box;}
.data_group .round_sltbox.type_number .selectbx {min-width: 150px;}
.data_group .round_sltbox.type_number .data_group {width: 100%;margin-left: 3%;}

.data_group .round_sltbox.type_address .selectbx {width: 49%;}
.data_group .round_sltbox.type_address .selectbx .target_select{margin-bottom: 0;}
.data_group .round_sltbox.type_address .selectbx .select_list{top:0;box-sizing: border-box;}

.data_group .round_sltbox.type_address .btn_find {width: 49%;}
.data_group .round_sltbox.type_address .btn_find button {width: 100%;height: 45px;border: 1px solid var(--color-purple);color: var(--color-purple);font-weight: bold;box-sizing: border-box;border-radius: var(--radius-button);}
.data_group .round_sltbox.type_address .btn_find button span{display:inline-block;position: relative;padding-left: 25px;}
.data_group .round_sltbox.type_address .btn_find button span:before{ content:"";position:absolute; left:0%; top:50%; width:16px; height:16px; background:var(--bg-common) no-repeat; background-size:250px 250px;background-position: 0 -105px;transform: translateY(-50%);}
.data_group .round_sltbox.type_address .btn_find button:focus { outline: 2px solid black; border-radius: 2px;}


/* 220816: BHY : Selectbox : native 개선 */
.select_new {position: relative;width: 100%;height: 45px;background-color: #fff;}
.select_new select {color: #000;width: 100%;height: 100%;font-weight: bold; border: 1px solid var(--border-color);border-radius: var(--radius-button);box-sizing: border-box;padding:0 0 0 10px;}
.select_new select {background: url("/petpermint/images/common/ico_arr_show.png") no-repeat 95% 50%;background-size: 12px 7px;}
.bx_valid.error .select_new select {border-bottom: 1px solid var(--border-color);}

/* 220816: BHY : Selectbox : multi 개선 */
.select_multi {position: relative;width:100%;}
.select_multi select {color: #000;display: block;position: relative;width: 100%;height: 27px;padding: 2px 0 1px;border: 0;color: #000;text-indent: 0;font-size: 15px;font-weight: 700;border-bottom: 1px solid #aaa;}
.select_multi select {background: url("/petpermint/images/common/ico_arr_ta.png") no-repeat 100% 50%;background-size: 10px 6px;}

/*** checkbox : normal ***/
.custom_radio input[type=radio],
.custom_checkbox input[type=checkbox] {display: inline-block; width: 100%; height: 100%; font-size: 1px; position: absolute; left: 0; top: 0; appearance: none;}/* wa: 기존 display: none 삭제 후 변경 */
.custom_checkbox input[type=checkbox]:focus { outline: 2px solid black; border-radius: 2px;}

.custom_checkbox {display: flex;align-items: center;}
.custom_checkbox input[type=checkbox]+label{position:relative;color:#000;padding-left: 28px;height: 23px;line-height: 23px;display: block;}
.custom_checkbox input[type=checkbox]+label:before {content:"";display:block; position:absolute; top:0; left:0; width:23px; height:23px; background:var(--bg-common) no-repeat; background-position:-25px -160px;background-size: 250px 250px; }
.custom_checkbox input[type=checkbox]:checked+label:before {background-position:0 -160px;}

.label_wrap .custom_checkbox {display: flex;align-items: center;}
.label_wrap .custom_checkbox input[type=checkbox]+ .label{position:relative;color:#000;padding-left: 28px;height: 23px;line-height: 23px;display: block;}
.label_wrap .custom_checkbox input[type=checkbox]+ .label:before {content:"";display:block; position:absolute; top:0; left:0; width:23px; height:23px; background:var(--bg-common) no-repeat; background-position:-25px -160px;background-size: 250px 250px; }
.label_wrap .custom_checkbox input[type=checkbox]:checked+ .label:before {background-position:0 -160px;}


/*** radio : normal ***/
.custom_radio.type_normal {display: flex;align-items: center;justify-content: space-between;}
.custom_radio.type_normal .inner {width: 49%; position: relative;}
.custom_radio.type_normal input[type=radio]+label{position:relative;color:#000;padding-left: 28px;line-height: 23px;display: block;}
.custom_radio.type_normal input[type=radio]+label:before {content:"";display:block; position:absolute; top:0; left:0; width:23px; height:23px; background:var(--bg-common) no-repeat; background-position:-25px -160px;background-size: 250px 250px; }
.custom_radio.type_normal input[type=radio]:checked+label:before {background-position:0 -160px;}
.custom_radio.type_normal input[type=radio]:focus { width: 23px; height: 23px; clip: initial; appearance: none; outline: 2px solid black; border-radius: 2px;}

.custom_radio.type_normal_full .inner {width: 100%;}
.custom_radio.type_normal_full input[type=radio]+label{position:relative;color:#000;padding-left: 28px;line-height: 23px;display: block;}
.custom_radio.type_normal_full input[type=radio]+label:before {content:"";display:block; position:absolute; top:0; left:0; width:23px; height:23px; background:var(--bg-common) no-repeat; background-position:-25px -160px;background-size: 250px 250px; }
.custom_radio.type_normal_full input[type=radio]:checked+label:before {background-position:0 -160px;}

/*** radio : box ***/
.custom_radio.type_box {display: flex;align-items: center;justify-content: space-between;}
.custom_radio.type_box .inner { position: relative; width: 49%;}
.custom_radio.type_box input[type=radio]+label{position:relative; color:#333;height: 45px;border: 1px solid  var(--border-color);background-color: #fff;display: flex;justify-content: center;align-items: center;box-sizing: border-box;border-radius: var(--radius-button);}
.custom_radio.type_box input[type=radio]:checked+label {border-color: var(--color-yellow);background-color: var(--color-yellow);color: #000;}
.custom_radio.type_box input[type=radio]:focus { width: 100%; height: 45px; clip:initial; outline: 2px solid black; border-radius: 2px;}

/*** radio : box_full ***/
.custom_radio.type_box_full .inner:first-child {margin-bottom: 8px;}
.custom_radio.type_box_full input[type=radio]+label{position:relative; color:#333;height: 45px;padding-left: 40px;border: 1px solid  var(--border-color);background-color: #fff;display: flex;align-items: center;box-sizing: border-box;border-radius: var(--radius-button);}
.custom_radio.type_box_full input[type=radio]:checked+label {border-color: var(--color-yellow);background-color: var(--color-yellow);color: #000;}
.custom_radio.type_box_full input[type=radio]+label em:before {content:"";display:block; position:absolute; top:50%; left:20px; width:14px; height:10px; background:var(--bg-common) no-repeat; background-size: 250px 250px; background-position:-70px -160px;transform: translateY(-50%);}
.custom_radio.type_box_full input[type=radio]:checked+label em:before { background-position:-55px -160px;}

/*** radio : Line ***/
.custom_radio.type_line {display: flex;align-items: center;justify-content: space-between;}
.custom_radio.type_line .inner { position: relative; width: 49%;}
.custom_radio.type_line input[type=radio]+label{position:relative; color:#666;height: 45px;border: 1px solid  var(--border-color);background-color: #fff;display: flex;justify-content: center;align-items: center;box-sizing: border-box;border-radius: var(--radius-button);}
.custom_radio.type_line input[type=radio]:checked+label {border-color: var(--color-purple);color: #000;}

/*** radio : Animal Choice ***/
.custom_radio.animal input[type=radio]+label em {display: inline-block;position: relative;padding-left: 23px;}
.custom_radio.animal input[type=radio]+label em:before {content:"";display:block; position:absolute; top:0; left:0; width:17px; height:17px; background:var(--bg-common) no-repeat; background-size: 250px 250px; }
.custom_radio.animal .inner:nth-child(1) input[type=radio]+label em:before { background-position:0 -140px;}
.custom_radio.animal .inner:nth-child(2) input[type=radio]+label em:before { background-position:-20px -140px;}

/*** radio : Gender Choice ***/
.custom_radio.gender input[type=radio]+label em {display: inline-block;position: relative;padding-left: 20px;}
.custom_radio.gender input[type=radio]+label em:before {content:"";display:block; position:absolute; top:0; left:0; width:12px; height:17px; background:var(--bg-common) no-repeat; background-size: 250px 250px; }
.custom_radio.gender .inner:nth-child(1) input[type=radio]+label em:before { background-position:-40px -140px;}
.custom_radio.gender .inner:nth-child(2) input[type=radio]+label em:before { background-position:-55px -140px;}

/*** radio : Round ***/
.custom_radio.type_round {display: flex;align-items: center;justify-content: start;}
.custom_radio.type_round .inner {width:30%;}

.custom_radio.type_round input[type=radio]+label{position:relative;color:#000;padding-left: 28px;line-height: 22px;display: block;}
.custom_radio.type_round input[type=radio]+label:before {content:"";display:block; position:absolute; top:0; left:0; width:22px; height:22px; background:var(--bg-common) no-repeat; background-position:-44px 0;background-size: 250px 250px; }
.custom_radio.type_round input[type=radio]:checked+label:before {background-position:-66px 0;}


/*** message ***/
.check_msg {height: 45px;border: 1px solid  var(--border-color);border-radius: var(--radius-button);padding:0 15px;margin-top:9px;display: flex;justify-content: space-between;align-items: center;}
.check_msg p {color: #000;}
.check_msg .data_group {min-width: 150px;}

.tip_msg {margin-top: var(--space-10);}
.tip_msg p {position:relative;color: #666;font-size: 13px;padding-left: 7px;margin-top: 5px;}
.tip_msg p strong {color: var(--color-purple);}
.tip_msg p:before{content:"";position:absolute; top:5px; left:0; width:5px; height:5px; background:url("/subscribe/images/common/bu_star.gif") left top no-repeat; background-size:5px 5px;}

.tip_align {display: flex;justify-content: space-between;align-items: center;margin-top: var(--space-10);}
.tip_align .btn_view {font-size: 12px;color: #666;width: 70px;height: 22px;display: flex;justify-content: center;align-items: center;border: 1px solid var(--border-color);border-radius: 3px;background-color: #fff;padding: 0;margin: 0;}

.ico_dot{position: relative;font-size: 12px;padding-left: 7px;line-height: 1.5;}
.ico_dot::before{content: '';display: block;width: 2px;height: 2px;position: absolute;left: 0;top: 6px;background-color: #000;}


/*** Question Mark ***/
.btn_question{position:relative; display:inline-block; width:17px; height:17px; margin-left:5px; background:url("/petpermint/images/common/ico_help.png") 0 0 no-repeat; background-size:contain}
.btn_question:focus { outline: 2px solid black; border-radius: 2px;}

/*** step : common ***/
.step_contents h3 {font-size: var(--font-17);color: #000;margin:0 0 30px 0;line-height: 1.5;}
.step_contents h4 {font-size: var(--font-14);margin-bottom:  var(--space-10);line-height: 1;}
.step_contents h4.line_height { line-height:1.4; }
.step_contents h4.line_space {line-height: 1.5;}
.step_contents h4.is_question {display: flex;align-items: center;}
.step_contents h4 span {color: #666;}

.step_contents .stit {font-size: 12px;color: #666;font-weight: normal;}
.step_contents .stit span{position:relative; padding:0 0 0 7px; display:block;}
.step_contents .stit span:before{position:absolute; top:5px; left:0; width:5px; height:5px; background:url("/subscribe/images/common/bu_star.gif") left top no-repeat; background-size:5px 5px; content:""}

.step_contents .option_box .bx_valid {margin-bottom: var(--space-10);}
.step_contents .tbl_view01{margin:0}

.step_contents .notice_wrap {background-color: #f5f8fb;border-radius: var(--radius-button);padding: 15px;}
.step_contents .notice_wrap dt {font-size: 13px;font-weight: bold;color: var(--color-purple);margin-bottom:  var(--space-10);}
.step_contents .notice_wrap dt + dd {font-size: 13px;color: #000;margin-bottom:  var(--space-10);line-height: 1.5;}

.step_contents .bx_valid {margin-bottom: var(--space-35);}
.step_contents .bx_valid.error input {border-bottom: 1px solid var(--border-color);}
.step_contents .bx_valid.error .txt_error {border: none;padding: 0;margin-top: var(--space-10);}


/* 가상키패드 */
@media screen and (max-width:720px){
    #mtk_rsIdNo2.transkey_number1_div{top:50px !important; right:0 !important; left:0;}
    #mtk_rsIdNo2.transkey_number2_div{top:50px !important; right:0 !important; left:0;}
    .group #mtk_rsIdNo2.transkey_number2_div{top:35px !important; left:0 !important; right:0 !important; margin-left:-197px; transform:none; }
}


/* 20220915 펫 알림팝업 */
.list_assent02.list_type02 {margin-bottom:20px;}
.list_assent02.list_type02 li{margin-bottom:10px;}



    /* s 카카오 페이 인증 운영계 미배포로 주석 필수 110 버전기준 */
    /*   custom_radio : 20220907 : djm 개인정보 동의 신규 */
    /*   20220907 : kkopop 카카오페이 인증 화면  */
    /*   20220908 : confirm_bg new 이용약관 동의 */


    .ds320 {display: none;}
    .data_group.certifi_agree{margin: 12px 0 28px;}
    .custom_radio.certifi input[type=radio]+label {height: 50px; color: #999999; border-color: #cccccc;}
    .custom_radio.certifi input[type=radio]+label em {display: inline-block; position: relative; width: 100%;  padding-left: 28%;}
    .custom_radio.certifi input[type=radio]+label em:before {content:"";display:block; position:absolute; top: 50%; left: 17%; transform: translate(-50%,-50%); background:var(--bg-common) no-repeat; background-size: 250px 250px; }
    .custom_radio.certifi input[type=radio]+label em span {font-size: 11px;}
    .custom_radio.certifi .inner:nth-child(1) input[type=radio]+label em:before {width:21px; height:29px; background-position:-147px -193px;}
    .custom_radio.certifi .inner:nth-child(2) input[type=radio]+label em:before {width:22px; height:24px; background-position:-200px -194px;}
    .custom_radio.certifi .inner:nth-child(3) input[type=radio]+label em:before {width:24px; height:24px; background-position:-145px -222px;}
    .custom_radio.certifi .inner:nth-child(4) input[type=radio]+label em:before {width:26px; height:25px; background-position:-196px -222px;}
    .custom_radio.certifi .inner.on input[type=radio]+label {border-color: var(--color-purple); color: #000000; background-color: #ffffff}
    .custom_radio.certifi .inner.on:nth-child(1) input[type=radio]+label em:before {background-position:-168px -193px;}
    .custom_radio.certifi .inner.on:nth-child(2) input[type=radio]+label em:before {background-position:-221.5px -194px;}
    .custom_radio.certifi .inner.on:nth-child(3) input[type=radio]+label em:before {background-position:-169px -222px;}
    .custom_radio.certifi .inner.on:nth-child(4) input[type=radio]+label em:before {background-position:-222px -222px;}
    @media screen and (max-width:350px){        .ds320 {display: inline;}    }

	.kkopop { display: none; position: fixed; width: 100%; height: 100%; top: 0; z-index: 1000; background-color: #00000050; overflow: hidden; }
    .kkopop .pop_main { display: block; margin-top: 100vh; position: relative; top: 0; width: 100%; height: 100%; transition: margin-top .5s cubic-bezier(.75, 0, .24, .99); }
    .kkopop .pop_main.on_slide { margin-top: 0; opacity: 1; }
    .kkopop .pop_main #slides {position: absolute; bottom: 0; width: 100%;}
    .kkopop .kko_content { position: absolute; bottom: 0; width: 100%; background-color: white; border-top-left-radius: 15px; border-top-right-radius: 15px; z-index: 1; }
    .kkopop .kko_content .slid_button { margin: 0 auto; text-align: center; padding-top: 5px; }
    .kkopop .kko_content .slbtn { width: 3.8rem; height: 0.25rem; border-radius: 5px; background-color: #dddddd; }
    .kkopop .kko_content .kko_info { padding: 25px 30px 0 } .kkopop .button_area { padding: 0 30px 35px; display: flex; justify-content: space-between; }
    .kkopop .button_area button { height: 40px; font-size: 15px; color: #ffffff; border-radius: 5px; z-index: 10; }
    .kkopop .button_area .rebtn { width: 38%; background-color: #888888; }
    .kkopop .button_area .okbtn { width: 58%; background-color: #7d6feb; }

    .confirm_bg {margin: 27px 0 0 0; font-size: 15px; color: #000; background-color: #f5f8fb; border-radius: 15px; }
    .confirm_bg p {padding: 16px 16px 12px; line-height: 1.38;}
    .confirm_bg .chk_txt {padding: 0 0 11px 16px;}


    /* e 카카오 페이 인증 운영계 미배포로 주석 필수 110 버전 */


/*20221201 : JMJ : 미리 준비해주세요 팝업 추가*/
.layer_popup_ready{text-align: center;}
.layer_popup_ready .kko_content{padding-bottom: 20px;}
.kkopop.layer_popup_ready .kko_content .kko_info { padding: 10px 30px 0 }
.kkopop.layer_popup_ready button { width: 100%;height: 40px; background-color: #7d6feb;color: #fff;border-radius: 4px;margin-bottom: 12px;}
.kkopop.layer_popup_ready a span{font-size: 12px;color: #999999;text-decoration: underline;text-align: center;text-underline-position:under;}