@charset "utf-8";

/*
  yobolove
  Style css Style
  Author : sohyeon
  date: 2025.9 ~

*/

/* RESET */
*{margin:0; padding:0}
html{height:100%}
html, body{width:100%;}
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, thead, tbody, tr, th, td, form, fieldset, legend, input, textarea, button{margin:0; padding:0; font-weight:normal; letter-spacing:0; line-height:22px; font-size: 18px;}
body{position:relative;/* padding-bottom:254px; height:auto; min-height:100% */}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary{display:block;}
body, input, select, div, textarea, table, button{font-size:13px; color:#222;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;}
table{width:100%; border:0; border-spacing:0; border-collapse:collapse;}
html:first-child select{padding-right:40px; }
ul, ol{list-style: none;}
option{vertical-align:middle; padding:3px 0;} /* Firefox Fix */
legend{display:none; visibility:hidden;}
img, fieldset, button{vertical-align:middle; border:0;}
button{background:none; cursor: pointer;}
img{ -ms-interpolation-mode: bicubic; }
ul, ol{list-style:none;}
a:link, a:visited, a:hover, a:active{text-decoration:none; cursor:pointer}
a.link{font-weight:bold; text-decoration:underline; letter-spacing:0}
em, address {font-style:normal;}
hr{display:none; visibility:hidden;}
caption{height: 0; width: 0; font-size: 0; line-height: 0; margin: 0; padding: 0;}
label{vertical-align:middle; cursor: pointer;}
input, select{display:inline-block; zoom:1; *display:inline; border:1px solid #cecece; padding:0 5px; height:21px; font-size:14px; letter-spacing:-1px; color:#333; }
input, select, label{line-height:1.2}
select::-ms-expand {display: none;}
select{ font-size:13px; letter-spacing:-2px; appearance:none; }
select.design1{appearance:none; background:url('../../images/icon/arrow_icon.png') no-repeat right 10px center;}
input[type=text], input[type=password]{vertical-align:top}
input[type=checkbox]{outline:none; border:0}
input[type=checkbox],
input[type=radio]{vertical-align:middle; margin:0 0 0 5px; border:0}
input[type=image]{vertical-align:top; border:0 ; background:transparent; /*opacity: 0; /* 숨기기 */
    filter:alpha(opacity=0); /* IE8 */
    -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0 100px #fff inset;  -moz-box-shadow: 0 0 0 100px #fff inset;  box-shadow: 0 0 0 100px #fff inset;}

input[type=file]{border:0;}
textarea{width:100%; height:100px; padding:10px; border: 1px solid #ddd; font-family:Verdana, Gulim, sans-serif ;}
input[type=button], input[type=submit]{background:none; border:0; font-size:15px; color:#006db6; padding:2px; cursor:pointer; line-height:1.2; height:auto; vertical-align:top}
input[type=checkbox], input[type=radio]{ vertical-align:middle; width:18px; height:18px; padding:0; margin-top:-2px; margin-right:3px;}
[type="checkbox"] {accent-color: #FF567C;}
.focus_none{outline: none !important; box-shadow: none!important; }

textarea::placeholder, input::placeholder{color: #cbcbcb;}
textarea:focus, input:focus, select:focus{outline: 2px solid #FF567C; }

/* 폰트 */
/*@font-face {
    font-family: 'Pretendard';
    font-weight: 400; !* Regular *!
    font-style: normal;
    src: url('../fonts/PRETENDARD-REGULAR.woff2') format('woff2'),
    url('../fonts/PRETENDARD-REGULAR.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/PRETENDARD-BOLD.woff2') format('woff2'),
    url('../fonts/PRETENDARD-BOLD.woff') format('woff');
    font-display: swap;
}*/

/* 폰트 설정 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400; /* Regular */
    font-style: normal;
    /* 파일 목록과 대소문자를 100% 일치시켜야 오류가 사라집니다 */
    src: url('https://yobolove-web.yobolove.co.kr/fonts/custom/PRETENDARD-REGULAR.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700; /* Bold */
    font-style: normal;
    src: url('https://yobolove-web.yobolove.co.kr/fonts/custom/PRETENDARD-BOLD.woff2') format('woff2');
    font-display: swap;
}

/* 모든 글꼴에 적용 */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

/* 가로,세로 */
.width10P{width:10% !important}
.width20P{width:20% !important}
.width30P{width:30% !important}
.width45P{width:45% !important}
.width50P{width:50% !important}
.width60P{width:60% !important}
.width65P{width:65% !important}
.width70P{width:70% !important}
.width75P{width:75% !important}
.width80P{width:80% !important}
.width90P{width:90% !important}
.width100P{width:100% !important}
.width20{width:20px !important}
.width35{width:35px !important}
.width45{width:45px !important}
.width50{width:50px !important}
.width60{width:60px !important}
.width65{width:65px !important}
.width70{width:70px !important}
.width80{width:80px !important}
.width90{width:90px !important}
.width100{width:100px !important}
.width102{width:102px !important}
.width110{width:110px !important}
.width120{width:120px !important}
.width125{width:125px !important}
.width130{width:130px !important}
.width140{width:140px !important}
.width150{width:150px !important}
.width160{width:160px !important}
.width170{width:170px !important}
.width180{width:180px !important}
.width190{width:190px !important}
.width200{width:200px !important}
.width210{width:210px !important}
.width212{width:212px !important}
.width220{width:220px !important}
.width222{width:222px !important}
.width230{width:230px !important}
.width240{width:240px !important}
.width250{width:250px !important}
.width260{width:260px !important}
.width270{width:270px !important}
.width280{width:280px !important}
.width300{width:300px !important}
.width350{width:350px !important}
.width385{width:385px !important}
.width400{width:400px !important}
.width430{width:430px !important}
.width450{width:450px !important}
.width460{width:460px !important}
.width470{width:470px !important}
.width540{width:540px !important}
.width550{width:550px !important}
.width560{width:560px !important}
.width570{width:570px !important}
.width580{width:580px !important}
.width600{width:600px !important}
.width620{width:620px !important}
.width630{width:630px !important}
.width670{width:670px !important}
.width690{width:690px !important}
.width720{width:720px !important}
.width740{width:740px !important}
.width750{width:750px !important}
.width770{width:770px !important}
.width790{width:790px !important}
.width810{width:810px !important}
.width830{width:830px !important}
.width930{width:930px !important}
.width1030{width:1030px !important}
.width1100{width:1100px !important}
.width1240{width:1240px !important}
.height18{height:18px !important}
.height30{height:30px !important}
.height40{height:40px !important}
.height50{height:50px !important}
.height55{height:55px !important}
.height60{height:60px !important}
.height80{height:80px !important}
.height100{height:100px !important}
.height170{height:170px !important}
.height180{height:180px !important}
.height190{height:190px !important}
.height200{height:200px !important}
.height300{height:300px !important}
.height400{height:400px !important}
.height430{height:430px !important}
.liheight13{line-height:13px !important}
.liheight30{line-height:30px !important}
.liheight50{line-height:50px !important}
.liheight60{line-height:60px !important}

/* 간격 라인 공통 */
.conSection{padding:10px 0}
.mgt0{margin-top:0 !important}
.mgt5{margin-top:5px !important}
.mgt7{margin-top:7px !important}
.mgt10{margin-top:10px !important}
.mgt15{margin-top:15px !important}
.mgt20{margin-top:20px !important}
.mgt30{margin-top:30px !important}
.mgt40{margin-top:40px !important}
.mgt45{margin-top:45px !important}
.mgt50{margin-top:50px !important}
.mgt60{margin-top:60px !important}
.mgt70{margin-top:70px !important}
.mgt100{margin-top:100px !important}
.mgt110{margin-top:110px !important}
.mgt180{margin-top:180px !important}
.mgl_1{margin-left:-1px !important}
.mgl0{margin-left:0 !important}
.mgl5{margin-left:5px !important}
.mgl10{margin-left:10px !important}
.mgl20{margin-left:20px !important}
.mgl30{margin-left:30px !important}
.mgl40{margin-left:40px !important}
.mgl60{margin-left:60px !important}
.mgl70{margin-left:70px !important}
.mgr0{margin-right:0 !important}
.mgr5{margin-right:5px !important}
.mgr10{margin-right:10px !important}
.mgr15{margin-right:15px !important}
.mgr20{margin-right:20px !important}
.mgr30{margin-right:30px !important}
.mgr40{margin-right:40px !important}
.mgr45{margin-right:45px !important}
.mgr50{margin-right:50px !important}
.mgr75{margin-right:75px !important}
.mgb0{margin-bottom:0 !important}
.mgb5{margin-bottom:5px !important}
.mgb10{margin-bottom:10px !important}
.mgb20{margin-bottom:20px !important}
.mgb30{margin-bottom:30px !important}
.mgb40{margin-bottom:40px !important}
.mgb50{margin-bottom:50px !important}
.mgb60{margin-bottom:60px !important}
.mgb70{margin-bottom:70px !important}
.mg10{margin:10px !important}
.mg20{margin:20px !important}
.mg30{margin:30px !important}
.mg40{margin:40px !important}
.mglM10{margin-left:-10px !important}
.mglr5{margin-left:5px !important; margin-right:5px !important;}
.mglr20{margin-left:20px !important; margin-right:20px !important;}
.mglr30{margin-left:30px !important; margin-right:30px !important;}
.mgtb10{margin-top:10px !important; margin-bottom:10px !important;}
.mgtb20{margin-top:20px !important; margin-bottom:20px !important;}
.pdt0{padding-top:0 !important}
.pdt5{padding-top:5px !important}
.pdt10{padding-top:10px !important}
.pdt20{padding-top:20px !important}
.pdt30{padding-top:30px !important}
.pdt40{padding-top:40px !important}
.pdt50{padding-top:50px !important}
.pdt60{padding-top:60px !important}
.pdt70{padding-top:70px !important}
.pdt80{padding-top:80px !important}
.pdt100{padding-top:100px !important}
.pdl0{padding-left:0 !important}
.pdl5{padding-left:5px !important}
.pdl10{padding-left:10px !important}
.pdl20{padding-left:20px !important}
.pdl30{padding-left:30px !important}
.pdl40{padding-left:40px !important}
.pdl200{padding-left:200px !important}
.pdr5{padding-right:5px !important}
.pdr10{padding-right:10px !important}
.pdr20{padding-right:20px !important}
.pdr30{padding-right:30px !important}
.pdr40{padding-right:40px !important}
.pdb0{padding-bottom:0 !important}
.pdb10{padding-bottom:10px !important}
.pdb20{padding-bottom:20px !important}
.pdb30{padding-bottom:30px !important}
.pdb40{padding-bottom:40px !important}
.pdb50{padding-bottom:50px !important}
.pdb60{padding-bottom:60px !important}
.pdb70{padding-bottom:70px !important}
.pdb100{padding-bottom:100px !important}
.pd5{padding: 5px !important;}
.pd10{padding: 10px !important;}
.pd20{padding: 20px !important;}
.pd30{padding: 30px !important;}
.pd40{padding: 40px !important;}
.pd50{padding: 50px !important;}

/* 테두리 */
.border_t{border-top: none !important;}
.border_b{border-bottom: none !important;}
.border_l{border-left: none !important;}
.border_r{border-right: none !important;}

.border_tg{border-top: 1px solid #dedede !important;}
.border_bg{border-bottom: 1px solid #dedede !important;}
.border_lg{border-left: 1px solid #dedede !important;}
.border_rg{border-right: 1px solid #dedede !important;}


/* 텍스트정렬  */
.alignL{text-align:left !important}
.alignR{text-align:right !important}
.alignC{text-align:center !important}
.floatR{float:right !important}
.floatL{float:left !important}
.floatN{float:none !important}

.Display_ib{display: inline-block;}
.diFlex_center{display: flex; align-items: center;}
.diFlex_top{display: flex; align-items: flex-start;}
.diFlex_between{display: flex !important; align-items: center; justify-content: space-between;}
.diFlex_between_top{display: flex !important; align-items: flex-start; justify-content: space-between;}
.diFlex_between_bottom{display: flex !important; align-items: end; justify-content: space-between;}
.position_re{position: relative;}
.position_ab{position: absolute;}
.position_fi{position: fixed; top:0; left:0; z-index: 5;}

/* 텍스트 줄이기 처리 */
.text_oneLine{overflow:hidden; text-overflow:ellipsis; display:inline-block; white-space: nowrap;}/* 한줄 */
.text_twoLine{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}/* 두줄 */

/* 폰트사이즈 */
.font11{font-size:11px !important}
.font12{font-size:12px !important}
.font13{font-size:13px !important}
.font14{font-size:14px !important}
.font15{font-size:15px !important}
.font16{font-size:16px !important}
.font17{font-size:17px !important}
.font18{font-size:18px !important}
.font19{font-size:19px !important}
.font20{font-size:20px !important}
.font21{font-size:21px !important}
.font22{font-size:22px !important}
.font24{font-size:24px !important}
.font25{font-size:25px !important}
.font28{font-size:28px !important}
.font30{font-size:30px !important}
.font35{font-size:35px !important}

/* 폰트강조 */
.fontReset{color:#222 !important; font-weight:normal !important; letter-spacing:-2px !important}
.pointPink{color: #FF567C !important;}
.pointDarkred{color: #df0000 !important;}
.pointBlue{color: #0058ff !important;}
.pointGreen{color: #00b54a !important;}
.pointWhite{color: #FFFFFF !important;}
.pointBlack2{color:#4A4A4A !important;}
.pointGrey{color:#898989 !important;}
.pointGreyB{color:#898989 !important; font-weight: bold !important;}

.pointB{font-weight:bold !important}
.pointN{font-weight:normal; !important}
.pointDeco{text-decoration:underline !important}

/* 배경색 */
.grey_bg{background-color: rgb(250, 250, 250);}
.grListBox{background: #EEEEEE; border-radius: 10px; margin-top: 20px; padding: 10px 20px;}
.grListBox li{font-size: 15px; color: #444;}
.white_bg{background: white !important;}

/* 중간선 */
.Gline{width: 100%; height: 1px; display: block; background: #d1d1d1;}

/* 테이블 */
.purpleTable{}
.purpleTable tr{height: 46px;}
.purpleTable thead{background: #f9f2f2; border-bottom: 1px solid #e9d7db;}
.purpleTable thead th{font-weight: bold; padding: 0 20px; font-size: 16px;}
.purpleTable tbody tr{border-bottom: 1px solid #e9d7db;}
.purpleTable tbody td{padding: 0 20px; background: #fff; font-size: 16px;}

/* 포인트 */
.cuP{cursor: pointer;}