/* 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: var(--white); font-family: 'Pretendard'; font-style: normal; font-size: 1.6rem; font-weight: 300; color: var(--gray-5); line-height: 1.4; letter-spacing: -0.5px;}
ul, li, dl, dt, dd {margin: 0; padding: 0; list-style: none;}
a {color:var(--gray-5); 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 {
  --navy : #004D80;
  --blue : #008AE5;
  --skyblue : #E5F5FF;
	--white : #FFFFFF;
	--black-0 : #000000;
	--black-1 : #161616;
	--gray-3 : #333333;
	--gray-5 : #505050;
	--gray-6 : #666666;
	--gray-9 : #999999;
	--gray-b : #BBBBBB;
	--gray-d : #DDDDDD;
	--gray-e : #E1E1E1;
	--gray-f : #F3F3F3;
}

/* Contents */
.wrap-01 {width: calc(100% - 190px); max-width: 100%; margin: 0 auto;}
.wrap-02 {width: calc(100% - 520px); max-width: 100%; margin: 0 auto;}
.wrap-03 {width: calc(100% - 660px); max-width: 100%; margin: 0 auto;}

/* Scroll */
.scroll-lock {overflow: hidden !important;}

/* Font */
.f-noto {font-family: 'Noto Sans KR', sans-serif;}
.f-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: var(--gray-6);}

/* 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: var(--gray-3); 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: 31px; font-size: 24px; font-weight: 500; line-height: 1;}
.check-wrap input[type=checkbox]+ label:before {content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; left: 0; top: 1px; z-index: 1; border: 1px solid var(--gray-5); border-radius: 0; background-color: var(--white); border-radius: 4px;}
.check-wrap input[type=checkbox]:checked + label:before {background: var(--navy) url('/source/img/ico_check.png') no-repeat center / 70%; border-color: var(--navy);}

/* 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;}