@charset "utf-8";
@import url(font.css);

html,body,div,span,applet,section,object,iframe,h1,h2,h3,h4,h5,h6,p,time,figure,article,nav,header,footer,hgroup,video,audio,aside,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overscroll-behavior: none; /* ios 오버스크롤 동작 막기 */
}

ol,ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
caption,th,td {text-align: left; font-weight: normal;}
figure,article,header,footer,nav,hgroup,video,audio,aside,main {display: block;}

/* mobile */
/*input, textarea{ -webkit-appearance: none; -webkit-border-radius:0px; border-radius:0px;}*/

/*reset mobile default style*/
body,textarea:focus,input:focus,a:focus {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
html{-ms-text-size-adjust: none;-webkit-text-size-adjust: none;text-size-adjust: none;}

/*font
normal : 16px || small : 13px*/
html, body {line-height:1.5; font-size: 16px; color: #000; letter-spacing: -0.025em; min-width: 320px;}
html {-ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; min-width: 320px; width: 100%;}
body {overflow-x: hidden; font-family: 'Pretendard', sans-serif;}
a{color: #111; text-decoration: none;}
img{max-width:100%; vertical-align: middle;}
i{font-style:inherit;}
hr{border:1px dashed #ddd; border-width:0 0 1px 0; margin:20px 0;}
[lang="en"] {font-family: 'Pretendard', sans-serif; letter-spacing: normal;}
ul, dl {font-size: 0;}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	outline: none;
}

/* form control */
input, 
select, 
textarea, 
label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; line-height:1.4; border-radius:0;}
input[type=text],
input[type=number],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=submit],
input[type=button],
select{-webkit-appearance: none;-moz-appearance: none; appearance: none; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; margin: 2px 3px; font-family: 'Pretendard', sans-serif;}
select {background:url('../images/common/icon_down.png') no-repeat; background-position: calc(100% - 10px) center; background-size: 10px auto;}
input:first-child,
select:first-child {margin-left: 0;}
input:last-child,
select:last-child {margin-right: 0;}
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button  {-webkit-appearance: none; margin: 0;}
input[type=radio]{border-radius: 100%;}
input:disabled,
input:-moz-read-only{-webkit-box-shadow: none;box-shadow: none;}
input[readonly]:not(.designChk),
input[readonly]:not(.designRadio),
input[disabled]:not(.designChk),
input[disabled]:not(.designRadio){background:#eee;}
.datepicker[readonly],
.datepicker[disabled]{background-color: #f9f9f9;}
select::-ms-expand{display: none;}
textarea{resize:none; font-family: 'Pretendard', sans-serif; border: 1px solid var(--gray-100); padding: 10px 10px;}
textarea:focus {outline: none;}
input[type=submit],
button{font-size:inherit; font-family: 'Pretendard', sans-serif; cursor: pointer; background-color: transparent;}
input[lang="en"],
textarea[lang="en"],
button[lang="en"] {font-family: 'Pretendard', sans-serif;}


/* 자동완성 배경색 */
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px transparent inset;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s;}

/* input common */
.form_control {display: inline-block; width: 100%; min-height: 50px; padding: 0 16px; font-size: 1rem; font-weight: 400; color: #333; background-color: #fff; border: 1px solid var(--gray-200); border-radius: 8px; appearance: none; transition: all .25s;}
textarea.form_control {padding: 16px 16px;}
input[type=number].form_control {text-align: right;}
.form_select {display: inline-block; min-width: 120px; min-height: 50px; padding: 0 16px; font-size: 1rem; font-weight: 400; color: #333; background-color: #fff; border: 1px solid var(--gray-200); border-radius: 8px; appearance: none; transition: all .25s;}
br ~ .form_control {margin-left: 0; margin-right: 0;}

.form_group + .form_group {margin-top: 30px;}
.form_group .form_control,
.form_group .form_select {margin-left: 0;}
.form_label {display: block; font-weight: 600; color: var(--dark-color); margin-bottom: 10px;}
.form_group ~ .row {margin-top: 30px;}

.input_group {display: flex; align-items: center;}
.input_unit {display: inline-block; vertical-align: middle; color: #666; padding: 0 3px;}

/* box icons */
[class^="bx"], [class*=" bx"], .bx {vertical-align: middle; line-height: 1; color: var(--gray-500);}

/* input */
.input40{width:40px !important; min-width: auto;}
.input60{width:60px !important; min-width: auto}
.input80{width:80px !important; min-width: auto}
.input100{width:100px !important; min-width: auto}
.input200{width:200px !important; min-width: auto}
.input300{width:300px !important; min-width: auto}
.input400{width:400px !important; min-width: auto}
.input500{width:500px !important; min-width: auto}
.inputFull{width:100% !important;}

.width10 {width: 10% !important;}
.width20 {width: 20% !important;}
.width30 {width: 30% !important;}
.width33 {width: 33.3% !important;}
.width40 {width: 40% !important;}
.width50 {width: 50% !important;}
.width60 {width: 60% !important;}
.width70 {width: 70% !important;}
.width80 {width: 80% !important;}
.width90 {width: 90% !important;}

/* color */
:root {
	--main-color: #9836c1;
	--sub-color: #d1bbd9;
	--dark-color: #000000;
	
	/* 회색계열 */
	--gray-100: #f2f2f2;
	--gray-200: #dddddd;
	--gray-300: #888888;
	--gray-500: #666666;
}


.bg_white {background-color: #fff !important;}
.bg_light {background-color: var(--light-color) !important;}

/* margin / padding */
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt0 {margin-top: 0 !important;}
.mb0 {margin-bottom: 0 !important;}


/* checkbox */
.checkbox {display: inline-block;}
.checkbox + .checkbox {margin-left: 10px;}
.checkbox input[type="checkbox"] {width: 18px; height: 18px; vertical-align: top; border: 1px solid var(--gray-200); background-color: #fff; background-image: url('../images/common/icon_check.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; border-radius: 5px; float: left; margin: 0; margin-top: 4px; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: all .25s;}
.checkbox label {font-size: 1rem; color: var(--gray-500); max-width: calc(100% - 18px);}
.checkbox label span {display: inline-block; padding-left: 5px;}
.checkbox input[type="checkbox"]:checked {background-color: var(--main-color); border-color: var(--main-color);}
.checkbox input[type="checkbox"]:checked + label {color: #000;}
/* .checkbox input[type="checkbox"]:focus {box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), .25); border-color: var(--main-color);} */
.checkbox input[type="checkbox"]:disabled {cursor: not-allowed; -webkit-filter: none; filter: none; background-color: var(--gray-200); background-image: none;}
.checkbox input[type="checkbox"]:disabled:checked {border-color: var(--gray-200); background-image: url('../images/common/icon_check.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;}
.checkbox input[type="checkbox"]:disabled:checked + label {color: var(--gray-500);}

/* radio button */
.radio {display: inline-block;}
.radio + .radio {margin-left: 10px;}
.radio input[type="radio"] {width: 18px; height: 18px; vertical-align: top; border: 1px solid var(--gray-100); background-color: #fff; background-image: url('../images/common/icon_radio.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; border-radius: 50%; float: left; margin: 0; margin-top: 4px; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: all .25s;}
.radio label {font-size: 1rem; color: var(--gray-500); max-width: calc(100% - 18px);}
.radio label span {display: inline-block; padding-left: 5px;}
.radio input[type="radio"]:checked {background-color: var(--main-color); border-color: var(--main-color);}
.radio input[type="radio"]:checked + label {color: #000;}
/* .radio input[type="radio"]:focus {box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), .25); border-color: var(--main-color);} */
.radio input[type="radio"]:disabled {cursor: not-allowed; -webkit-filter: none; filter: none; background-color: var(--gray-100); background-image: none;}
.radio input[type="radio"]:disabled:checked {border-color: var(--gray-100); background-image: url('../images/common/icon_radio.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain;}
.radio input[type="radio"]:disabled:checked + label {color: var(--gray-500);}


/* file */
.file{position:relative;}
.file input[type="file"]{overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0,0,0,0);}

/*table*/
table{border-collapse: collapse; border-spacing: 0; width: 100%;}
table,th,td{border:none;}
caption{overflow:hidden; line-height:0; text-indent:-2000em;}

/* placeholder */
::-webkit-input-placeholder {font-family: 'Pretendard', sans-serif; font-size: inherit;color: #999;}
::-moz-placeholder {font-family: 'Pretendard', sans-serif; font-size: inherit;color: #999;}
:-ms-input-placeholder {font-family: 'Pretendard', sans-serif; font-size: inherit;color: #999;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {color: transparent;}

/*button*/
.btn {display: inline-block; min-width: 120px; height: 50px; line-height: 48px; font-size: 1rem; font-weight: 400; text-align: center; vertical-align: middle; user-select: none; border: 1px solid transparent; background-color: transparent; transition: color .15s; border-radius: 8px; padding: 0 16px; margin: 2px 3px; white-space: nowrap; transition: all .25s;}

.btn-primary {color: #fff; background-color: var(--main-color); border-color: var(--main-color);}
.btn-danger {color: #fff; background-color: #E51A2F; border-color: #E51A2F;}
.btn-secondary {color: #fff; background-color: #8592A3; border-color: #8592A3;}
.btn-gray {color: #fff; background-color: var(--gray-300); border-color: var(--gray-300);}
.btn-light {color: #fff; background-color: #dadada; border-color: #dadada;}
.btn-blk{color:#fff; background-color: var(--dark-color); border-color:var(--dark-color);}

.btn-primary [class^="bx"], 
.btn-primary [class*=" bx"], 
.btn-primary .bx {color: #fff !important;}

/* button line */
.btn-line-primary {color: var(--main-color); background-color: #fff; border-color: var(--main-color);}
.btn-line-danger {color: #E51A2F; background-color: #fff; border-color: #E51A2F;}
.btn-line-secondary {color: #111; background-color: #fff; border-color: #8592A3;}
.btn-line-light {color: #111; background-color: #fff; border-color: var(--gray-200);}
.btn-line-blk {color: #111; background-color: #fff; border-color: var(--dark-color);}

.btn-line-primary [class^="bx"], 
.btn-line-primary [class*=" bx"], 
.btn-line-primary .bx {color: var(--main-color) !important;}

.btn.sm {min-width: 60px; height: 30px; line-height: 28px; font-size: 13px; padding: 0 10px;}
.btn.lg {min-width: 160px; height: 60px; line-height: 58px; font-size: 18px; padding: 0 20px;}
.btn.xsm {min-width:unset; height:auto; padding:5px 12px; font-size:12px; line-height:12px; background:#fff; border:1px solid #ddd; color:#333;}
.btn.xsm:hover {opacity: .8;}

.btn_wrap {text-align: center; padding-top: 30px;}
.btn_wrap .btn_left{float: left;}
.btn_wrap .btn_right{float: right;}

/* btn hover */
.btn:hover,
.btn:focus{opacity: .8;}
.btn.white:hover,
.btn.white:focus{box-shadow:3px 3px 5px rgba(0,0,0,.1);}

.btn.line_primary:hover,
.btn.line_primary:focus {background-color: var(--main-color); color: #fff; opacity: 1;}

/* 스위치 버튼 */
.switch_btn {position: relative; width: 70px; height: 30px; display: inline-block; position: relative; border-radius: 30px; background-color: var(--gray-100); cursor: pointer;} 
.switch_btn:before {content: '미사용'; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-size: 13px; color: var(--gray-500); letter-spacing: -0.1em;}
.switch_btn .toggleButton {width: 24px; height: 24px; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 10px 0 rgba(113, 128, 150, .3);}
.switch_btn.active {background: var(--main-color);}
.switch_btn.active:before {content: '사용'; left: 10px; right: auto; color: #fff;}
.switch_btn.active .toggleButton {left: calc(100% - 27px); background: #fff !important;} 
.switch_btn, .toggleButton {transition: all 0.3s ease-in;}


/*tac*/
.tac{text-align: center !important;}
.tar{text-align: right !important;}
.tal{text-align: left !important;}


/* 필수입력 */
.marking:after {content: '*'; color: var(--main-color); vertical-align: top;}
.point {color: var(--main-color) !important;}
.txt_red {color: #E51A2F !important;}

/*wrap*/
.sr_only{overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0,0,0,0); font-size: 0;}

/* A11Y */
#skip_menu {position: relative; z-index: 3000}
#skip_menu a {position: absolute; top: -30px; left: 0; width: 138px; border: 1px solid #4ec53d; background: #333; text-align: center}
#skip_menu a:active,
#skip_menu a:focus {top: 0; text-decoration: none; z-index: 1000}
#skip_menu span {display: inline-block; padding: 2px 6px 0 0; line-height: 26px; letter-spacing: -1px; font-size: 13px; color: #fff; white-space: nowrap}

::-moz-selection {background: #000; color: var(--main-color);}
::selection {background: #000; color: var(--main-color);}

/*주석*/
.ellip{overflow:hidden; display:block; width:100%; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis;}
.ellip2{overflow:hidden; display:-webkit-box; line-height:1.4em; max-height:2.8em; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis;}


/* 게시글 없을 때 */
.nodata {text-align: center; border: 1px solid var(--gray-100); padding: 40px 20px; border-radius: 20px; width: 100% !important;}
.nodata > i {font-size: 42px; color: var(--gray-300);}
.nodata > p {font-size: 1rem; color: var(--gray-500); font-weight: 400; margin-top: 10px;}

/* swiper */
.swiper, .swiper-container {margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block}

/* scroll bar */
::-webkit-scrollbar {width: 4px; height: 4px;}
::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 2px;}
::-webkit-scrollbar-track {background-color: var(--gray-100);  border-radius: 2px;}

/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width:1600px){
	.control_box .ctrl{width: 42px; height: 42px;}
}

@media (max-width:1024px){
	/*font
	normal : 15px
	small : 12px*/
	html, body {line-height:1.5; font-size: 15px; overflow-x: hidden !important;}

	/* input common */
	.form_control,
	.form_select {min-height: 45px;}

	.input_group .input300,
	.input_group .input200,
	.input_group .input100 {width: 100% !important;}

	/* input */
	.input400,
	.input500 {width: 100% !important;}

	.btn {min-width:92px; height: 45px; line-height: 43px;}
	.btn.sm {min-width: 60px; height: 30px; line-height: 28px; font-size: 13px; padding: 0 10px;}
	.btn.lg {min-width: 120px; height: 55px; line-height: 53px; font-size: 1rem; padding: 0 20px;}

	.mobile_none{display: none !important;}
	.sr_not_mobile{overflow:visible; position:static; margin:0; width:auto; height:auto; clip:unset;}
	
}
@media (max-width:768px){
	
	
}
@media (max-width:576px){
	.input300,
	.input400 {width: 100% !important;}

	.btn_wrap .btn_left,
	.btn_wrap .btn_right {float: none; display: inline-block; vertical-align: middle;}

	.checkbox em {font-size: 1rem;}
	.radio em {font-size: 1rem;}
	
}