/* reset */
* {margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: keep-all;}
html, body {max-width: 100%; min-height: 100%;}
html {overflow-x: hidden; -webkit-text-size-adjust: none; font-size: 62.5%;}
body {-webkit-print-color-adjust: exact; background: #FFFFFF; font-family: 'Pretendard'; font-style: normal; font-size: 1.6rem; font-weight: 300; color: #333333; line-height: 1.4; letter-spacing: -0.5px;}
ul, li, dl, dt, dd {margin: 0; padding: 0; list-style: none;}
a {color:#333333; text-decoration: none;}
img {border: 0; font-size: 0; max-width: 100%;}
h1, h2, h3, h4, h5, h6 {font-size: 1em; font-family: 'Pretendard';}
textarea, select {font-family: 'Pretendard'; font-size:1em;}
input, button {margin: 0; padding: 0; font-family: 'Pretendard'; font-size:1em;}
input[type="submit"], button {cursor: pointer;}
table, tr, th, td {border-collapse: collapse; font-family: 'Pretendard';}
p {word-break: keep-all;}
input {border-radius: 0;}
select{appearance: none; border-radius: 0; outline: none;}
select::-ms-expand {display: none;}

/* variable */
:root {
  --green : #26CF7E;
	--white : #FFFFFF;
	--white-2 : #F2F2F2;
	--white-3 : #F9F9F9;
	--white-4 : #FAFAFA;
	--black-0 : #000000;
	--black-1 : #0F0F0F;
	--gray-3 : #333333; 
	--gray-6 : #666666;
	--gray-8 : #888888;
	--gray-9 : #999999;
	--gray-a : #AAAAAA;
	--gray-b : #BBBBBB;
	--gray-c : #CCCCCC;
	--gray-d : #DDDDDD;
	--gray-e : #EEEEEE;
}

/* contents */
.container {width: 100%; padding-left: 40px; padding-right: 40px;}
.wrap-1 {width: 1730px; max-width: 100%; margin: 0 auto;}
.wrap-2 {width: 1600px; max-width: 100%; margin: 0 auto;}

/* font */
.font-noto{font-family: 'Noto Sans KR', sans-serif;}
.font-jost{font-family: 'Jost', sans-serif;}

/* align */
.align-left {text-align: left !important;}
.align-cetner {text-align: center !important;}
.align-right {text-align: right !important;}

/* text cut */
.text-row1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.text-row2 {white-space: normal; overflow: hidden; line-height: 1.5; max-height: 3em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.text-row3 {white-space: normal; overflow: hidden; line-height: 1.5; max-height: 4.5em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

/* sound only */
.sound_only{display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

/* clearfix */
.cf:before,
.cf:after{content: " "; display: table;}
.cf:after{clear: both;}
.cf{*zoom: 1;}

/* column */
.i-col-0{font-size: 0;}
.i-col-1{font-size: 0;}
.i-col-2{font-size: 0;}
.i-col-3{font-size: 0;}
.i-col-4{font-size: 0;}
.i-col-5{font-size: 0;}
.i-col-6{font-size: 0;}
.i-col-7{font-size: 0;}
.i-col-8{font-size: 0;}
.i-col-9{font-size: 0;}
.i-col-10{font-size: 0;}
.i-col-11{font-size: 0;}
.i-col-12{font-size: 0;}

.i-col-0 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: auto;}
.i-col-1 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 100%;}
.i-col-2 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 50%;}
.i-col-3 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 33.333%;}
.i-col-4 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 25%;}
.i-col-5 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 20%;}
.i-col-6 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 16.666%;}
.i-col-7 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 14.285%;}
.i-col-8 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 12.5%;}
.i-col-9 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 11.111%;}
.i-col-10 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 10%;}
.i-col-11 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 9.09%;}
.i-col-12 > *{display: inline-block; font-size: 16px; vertical-align: middle; width: 8.333%;}

/* textarea */ 
.textarea{width: 100%; height: 140px; border-radius: 5px; border: 1px solid #e2e2e2; padding: 15px 18px; font-size: 16px; font-weight: 400; color: #666;}

/* input : radio */
.radio-wrap input[type=radio] {display: none;}
.radio-wrap input[type=radio] + label {display: inline-block; cursor: pointer; position: relative; padding-left: 28px; font-size: 1.6rem; font-weight: 400; color: #333; line-height: 1;}
.radio-wrap input[type=radio]+ label:before {content: ""; display: inline-block; width: 18px; height: 18px; position: absolute; left: 0; top: 0; z-index: 1; border: 1px solid var(--gray-d); border-radius: 50%; background-color: var(--white);}
.radio-wrap input[type=radio]:checked + label:before {border-color: var(--green);}
.radio-wrap input[type=radio]:checked + label:after {content: ""; display: inline-block; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--green); z-index: 2;}

/* input : checkbox */
.check-wrap input[type=checkbox] {display: none;}
.check-wrap input[type=checkbox] + label {display: inline-block; cursor: pointer; position: relative; padding-left: 28px; font-size: 1.6rem; font-weight: 400; color: #333; line-height: 1;}
.check-wrap input[type=checkbox]+ label:before {content: ""; display: inline-block; width: 18px; height: 18px; position: absolute; left: 0; top: 0; z-index: 1; border: 1px solid var(--gray-d); border-radius: 0; background-color: var(--white);}
.check-wrap input[type=checkbox]:checked + label:before {border-color: var(--green);}
.check-wrap input[type=checkbox]:checked + label:after {content: ""; display: inline-block; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 0; background-color: var(--green); z-index: 2;}

/* animate */
.obj-animated {opacity:0;}
.animated {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
@keyframes fadeIn {
  from {opacity:0;}
  100% {opacity:1;}
}
@keyframes fadeInUp {
  from {opacity:0; transform:translate3d(0,40px,0); -webkit-transform:translate3d(0,40px,0);}
  100% {opacity:1; -webkit-transform:none; transform:none;}
}
@keyframes fadeInDown {
  from {opacity:0; transform:translate3d(0,-25px,0); -webkit-transform:translate3d(0,-25px,0);}
  100% {opacity:1; transform:none; -webkit-transform:none;}
}
@keyframes fadeInLeft {
  from {opacity:0; transform:translate3d(100px,0,0); -webkit-transform:translate3d(100px,0,0);}
  100% {opacity:1; transform:none; -webkit-transform:none;}
}
@keyframes fadeInRight {
  from {opacity:0; transform:translate3d(-100px,0,0); -webkit-transform:translate3d(-100px,0,0);}
  100% {opacity:1; transform:none; -webkit-transform:none;}
}
@keyframes fadeInBig {
  from {opacity:0; transform: scale(1.15);}
  100% {opacity:1; transform: scale(1);}
}
.fadeIn {-webkit-animation-name:fadeIn; animation-name:fadeIn;}
.fadeInUp {-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
.fadeInDown {-webkit-animation-name:fadeInDown; animation-name:fadeInDown;}
.fadeInLeft {-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;}
.fadeInRight {-webkit-animation-name:fadeInRight; animation-name:fadeInRight;}
.fadeInBig {-webkit-animation-name:fadeInBig; animation-name:fadeInBig;}