@charset "utf-8";
/*
20240502 url 비공개 연결이 아닙니다. 에러떠서 못씀
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
*/
/* Reset */
 * {
     outline:0 !important;
}

html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {
    margin:0;
    padding:0;
}
html, body {
    width:100%;
    font-size:14px;
    /* rem 단위를 사용 */
}
html {
    -webkit-touch-callout:none; /* 탭하거나 꾹 누르는 경우 (롱터치) 보여지는 기본 ui를 제어하는 속성이다. iOS에서 터치 동작을 막고 싶을 때 사용 */
    /* -webkit-user-select:none; /* 드래그나 더블 클릭해서 텍스트의 선택을 하지 못하게 함 */
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 화면을 탭할 때 하이라이트가 생기는 것을 없앰 */
}
body { 
    height: 100vh;
    padding: 0;
    letter-spacing: -0.05em;
    font-weight:400;
    width:100%; 
    background:#fff; 
    min-width:320px;/* 모바일 */ 
    -webkit-text-size-adjust:none;/* 아이폰의 경우 뷰포트가 변경되면 자동으로 폰트 크기가 변경됨 */
    word-wrap:break-word; /* 가로 영역을 넘치는 단어에 대해 분리를 어떻게 할것인지 (띄어쓰지 않아도 줄바뀜) */
    word-break:break-all; /* 위와 비슷한 줄바꿈 */
    line-height:1; 
    overflow-X:hidden;
    /* overflow-X:hidden; x축으로 넘칠떄 가림, pc사이트에서는 사용하지 않고, 반응형 일 때만 사용 */
}
body,input,select,textarea,button {
    border:none;
    font-size:1rem;
    font-family: 'NanumSquare', sans-serif;
    color:#262626;
}
h1, h2, h3, h4, h5, h6 {
    font-size:inherit;
    font-weight:normal;
}
ul,ol,li {
    list-style:none;
}
table { 
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
}
img,fieldset {
    border:none;
}
address,cite,code,em {
    font-style:normal;
    font-weight:normal;
}
label,img,input,select,textarea,button {
    vertical-align:middle;
}
.hide ,caption, legend {
    line-height:0;
    font-size:1px;
    overflow:hidden;
}
hr {
    display:none;
}
main,header,section,nav,footer,aside,article,figure {
    display:block;
}
a {
    color:#262626;
    text-decoration:none;
}
 
/* Form */
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea, select {
    width:100%; 
    height:40px; 
    font-size:1rem; 
    color:#262626; 
    border:1px solid #ddd;
    background:transparent;       
    vertical-align:middle;
    border-radius:8px;
    padding-left:12px;
    box-sizing: border-box;
}
input[type=tel]::placeholder,
input[type=time]::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=file]::placeholder,
input[type=url]::placeholder,
input[type=number]::placeholder,
input[type=date]::placeholder, {
	color:#262626;
}
input[type=search] {
	color:#fff;
	background:#333;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color:#262626; 
    font-size:1rem; 
    line-height:1;
    font-weight:400;
}
/* select:focus,
textarea:focus,
input:focus { 
    
} */

input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly], 
input[type=search][readonly], 
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{
    background:#ffffff; 
    border-color:#ddd; 
    color:#262626; 
    -webkit-appearance:none;
    font-size:1rem;
}
textarea[readonly],
textarea[disabled]{ 
    padding:11px; 
    font-size:1rem; 
    color:#262626; 
    font-weight:normal; 
    line-height:1.4; 
    height:78px; 
    background:#ffffff;
    border:1px solid #eee;
}
/* search */
input[type=search] {
    padding-right:10px;
    box-sizing: border-box;
}
input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}
/* 라디오버튼 */
.radio-group label {
    display:block;
    cursor:pointer;
}
.radio-group label ~ label {
    margin-top:26px;
}
.radio {
    vertical-align:middle;
    color:#262626;
    position:relative;
    padding-left:30px;
}
.radio input[type="radio"] {
    display:none;
}
.radio > p {
    font-size:16px;
}
.radio span {
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    display:inline-block;
    width:24px;
    height:24px;
    border-radius:12px;
    border:2px solid #eee;
    box-sizing: border-box;
    background-color:#fff;
}
.radio span:after {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%) scale(0);
    content:'';
    width:12px;
    height:12px;
    border-radius:6px;
    background:#de2525;
    transition:.3s ease-in-out 0s;
}
.radio input[type="radio"]:checked ~ p {
    color:#de2525;
    font-weight:700;
}
.radio input[type="radio"]:checked ~ span {
    border:2px solid #de2525;
}
.radio input[type="radio"]:checked ~ span:after {
    transform: translate(-50%, -50%) scale(1);
}
/* 체크박스 */
input[id="chkbox1"] {
    display:none;
}
input[id="chkbox1"] + label em {
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:5px;
    background:url(../images/sub/checkbox.svg) 0 0 no-repeat;
    vertical-align:middle;
}
input[id="chkbox1"]:checked + label em {
    background:url(../images/sub/checkbox_chk.svg) 0 0 no-repeat;
    /* background-position:-38px 0; 이미지 하나에 체크박스가 두개가 나타나있을 때 포지션 이동*/
}
input[id="chkbox2"] {
    display:none;
}
input[id="chkbox2"] + label em {
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:5px;
    background:url(../images/sub/checkbox.svg) 0 0 no-repeat;
    vertical-align:middle;
}
input[id="chkbox2"]:checked + label em {
    background:url(../images/sub/checkbox_chk.svg) 0 0 no-repeat;
    /* background-position:-38px 0; 이미지 하나에 체크박스가 두개가 나타나있을 때 포지션 이동*/
}
input[id="chkbox3"] {
    display:none;
}
input[id="chkbox3"] + label em {
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:5px;
    background:url(../images/sub/checkbox.svg) 0 0 no-repeat;
    vertical-align:middle;
}
input[id="chkbox3"]:checked + label em {
    background:url(../images/sub/checkbox_chk.svg) 0 0 no-repeat;
    /* background-position:-38px 0; 이미지 하나에 체크박스가 두개가 나타나있을 때 포지션 이동*/
}
input[id="chkbox4"] {
    display:none;
}
input[id="chkbox4"] + label em {
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:5px;
    background:url(../images/sub/checkbox.svg) 0 0 no-repeat;
    vertical-align:middle;
}
input[id="chkbox4"]:checked + label em {
    background:url(../images/sub/checkbox_chk.svg) 0 0 no-repeat;
    /* background-position:-38px 0; 이미지 하나에 체크박스가 두개가 나타나있을 때 포지션 이동*/
}

input[id="chkbox5"] {
    display:none;
}
input[id="chkbox5"] + label em {
    display:inline-block;
    width:26px;
    height:26px;
    margin-right:5px;
    background:url(../images/sub/checkbox.svg) 0 0 no-repeat;
    vertical-align:middle;
}
input[id="chkbox5"]:checked + label em {
    background:url(../images/sub/checkbox_chk.svg) 0 0 no-repeat;
    /* background-position:-38px 0; 이미지 하나에 체크박스가 두개가 나타나있을 때 포지션 이동*/
}

/* date */
input[type="date"] {
    position:relative;
    /* input 기준 */
    padding:0 10px;
    width:42%;
    height:42px;
    background:url(../images/sub/Calendar.svg) no-repeat right 14px center / 18px auto;
    /* svg:안깨짐(반응형,모바일), right에서 4px y는 center / img는 10px auto */
    border:1px solid #ddd;
    border-radius:8px;
    color:#262626;
    background-color:#fff;
    font-size:1.14rem;
    font-weight: 400;
}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {
    display:none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    position:absolute;
    left:0;
    top:0;
    /* 달력말고 input 전체 클릭가능 */
    background:transparent;
    color:transparent;
    /* background,color색을 투명>> 아이콘 없어짐 */
    cursor:pointer;
    width:100%;
    height:100%;
}
/* date placholder */
input[type="date"]::before {
        content:attr(data-placeholder);
        /* attr, text, url로 활용가능*/
        width:100%;
}
input[type="date"]:valid::before {
    /* valid:input date에 날짜값이 유효하는지 확인/valid쓰려면 해당태그에 required*/
    display:none;
    /* 확인되었을때 placeholder를 없앰 */
}
input[data-placeholder]::before {
    color:#333;
    font-size:16px;
    font-weight: 400;
}

/* 공통영역 */
.clear {
    clear:both;
}
.clear::after { 
    content:""; 
    display:block; 
    clear:both;
}
.fixed {
    width:86%;
    margin:0 auto;
}
.red {
    color:#de2525 !important;
}
.blue {
    color:#0000ff !important;
}
.gray {
    color:#7e7e7e !important;
}
/* 하단버튼 */
.btn_wrap {
    position:fixed;
    width:100%;
    bottom:0;
	z-index:10;
}
.btn {
    font-weight:700;
    font-size:1.1rem;
    height:50px;
    text-align: center;
}
.btn a {
    display:block;
    width:100%;
    height:100%;
    line-height:50px;
}
.btn_r {
    background:#cf2410;
}
.btn_r a {
    color:#fff;
}
.btn_g {
    background:#eeeeee;
}
.btn_g a {
    color:#262626;
}
.btn_wrap5 {
    display:flex;
}
.btn5 {
    width:50%;
    display:inline-block;
}
.btn_wrap7 {
    display:flex;
}
.btn_wrap7 div:nth-child(1) {
    width:30%;
}
.btn_wrap7 div:nth-child(2) {
    width:70%;
}


@media screen and (max-width:360px) {
    input[type="date"] {
        padding:0 6px;
        background:url(../images/sub/Calendar.svg) no-repeat right 6px center / 18px auto;
        background-color:#fff;
    }
    
}