@charset "utf-8";


/*로레알폰트*/
@font-face {
    font-family: 'loreal_r';
    src: url('../font/loreal/LOREAL_0296924.ttf'), url('../font/loreal/LOREAL_0296924.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'loreal_b';
    src: url('../font/loreal/LOREAL_0296917.ttf'), url('../font/loreal/LOREAL_0296919.woff') format('woff');
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'loreal_m';
  src: url('../font/loreal/LOREAL_0296919.ttf'), url('../font/loreal/LOREAL_0296919.woff') format('woff');
  font-style: normal;
  font-display: swap;
}



/*noto sans kr*/
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); */

@font-face { 
	font-family:'Noto Sans KR'; 
	font-style:normal; 
	font-weight:100; 
	src: url('../font/NotoSansKR/NotoSansKR-Thin.woff2') format('woff2'), 
		url('../font/NotoSansKR/NotoSansKR-Thin.woff') format('woff'), 
		url('../font/NotoSansKR/NotoSansKR-Thin.otf') format('opentype'); 
}
@font-face { 
	font-family:'Noto Sans KR';
	font-style:normal; 
	font-weight:300; 
	src: url('../font/NotoSansKR/NotoSansKR-Light.woff2') format('woff2'), 
		url('../font/NotoSansKR/NotoSansKR-Light.woff') format('woff'), 
		url('../font/NotoSansKR/NotoSansKR-Light.otf') format('opentype'); 
}
@font-face { 
	font-family:'Noto Sans KR'; 
	font-style:normal; 
	font-weight:400; 
	src: url('../font/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'), 
		url('../font/NotoSansKR/NotoSansKR-Regular.woff') format('woff'), 
		url('../font/NotoSansKR/NotoSansKR-Regular.otf') format('opentype'); 
}
@font-face { 
	font-family:'Noto Sans KR'; 
	font-style:normal; 
	font-weight:500; 
	src: url('../font/NotoSansKR/NotoSansKR-Medium.woff2') format('woff2'), 
		url('../font/NotoSansKR/NotoSansKR-Medium.woff') format('woff'), 
		url('../font/NotoSansKR/NotoSansKR-Medium.otf') format('opentype'); 
}
@font-face { 
	font-family:'Noto Sans KR'; 
	font-style:normal; 
	font-weight:700; 
	src: url('../font/NotoSansKR/NotoSansKR-Bold.woff2') format('woff2'), 
		url('../font/NotoSansKR/NotoSansKR-Bold.woff') format('woff'), 
		url('../font/NotoSansKR/NotoSansKR-Bold.otf') format('opentype'); 
}
@font-face { 
	font-family:'Noto Sans KR'; 
	font-style:normal; 
	font-weight:900; 
	src: url('../font/NotoSansKR/NotoSansKR-Black.woff2') format('woff2'), 
		url('../font/NotoSansKR/NotoSansKR-Black.woff') format('woff'), 
		url('../font/NotoSansKR/NotoSansKR-Black.otf') format('opentype'); 
}

/*montserrat*/
@font-face {
	font-family: 'Montserrat';
	font-weight: 900;
	src: url('../font/Montserrat/Montserrat-ExtraBold.eot');
	src: url('../font/Montserrat/Montserrat-ExtraBold.eot?#iefix') format('embedded-opentype'),
	url('../font/Montserrat/Montserrat-ExtraBold.woff') format('woff'),
	url('../font/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
}



/* 초기화 */
*{margin:0;  padding:0; }
html{font-family: 'Noto Sans KR'; font-weight:normal; font-size: 18px;}

/*Reset*/
h1, h2, h3, h4, h5, h6, h7{clear:both;  font-weight:normal;  }
/*article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section { display: block;  }*/
/* textarea, select, input, td {} */
table {border-collapse: collapse;  border-spacing:0;  }
td {word-break:break-all;  }
img {vertical-align:middle;  border:0}
ol, ul, li {list-style: none;  }
fieldset{border:0;  }
input[type="text"], input[type="password"]{height:24px;  padding:0 5px;  overflow:hidden;  border:1px solid #bebebe; }
input[type=radio], input[type=checkbox] { vertical-align:middle;  }
textarea {padding: 2px 5px 2px 5px;  border: 1px solid #bebebe;  font-size:12px;  }
select {border: 1px solid #bebebe;  font-size:12px;  height:24px}
button {cursor:pointer;  border:0 none; background: transparent; font-family: 'Noto Sans KR';}
/* button:hover {opacity:0.8} */
em, i, address{font-style:normal;  }

/*Common*/
a{color:#000;  text-decoration:none;  }
/* button:hover{box-shadow:inset 0px 2px 2px rgba(0, 0, 0, .3); } */
.hidden {visibility:hidden;  overflow:hidden;  width:0;  height:0;  font-size:0;  line-height:0;  position:absolute;  padding:0 !important;  }
 header, nav, aside, section, article{display:block; }
 /*
 body{background:#080808;}
 */

.transition {	    
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

/* 스트라이프 애니메이션 */
.loaded {
    transition-duration: 1.25s;
    transition-property: transform;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.42,0,.58,1);
    transition-timing-function: cubic-bezier(0,0,.39,.985);
    transform: translate3d(0,0,0);
}
.loaded .word {
	font-weight: 600;
    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.5,.08,0,.88);
    opacity: 0;
}

section.on .loaded .word {
    opacity: 1;
}

.loaded .word:nth-child(1) {transition-delay: calc(1 * .07s);}
.loaded .word:nth-child(2) {transition-delay: calc(2 * .07s);}
.loaded .word:nth-child(3) {transition-delay: calc(3 * .07s);}
.loaded .word:nth-child(4) {transition-delay: calc(4 * .07s);}
.loaded .word:nth-child(5) {transition-delay: calc(5 * .07s);}
.loaded .word:nth-child(6) {transition-delay: calc(6 * .07s);}
.loaded .word:nth-child(7) {transition-delay: calc(7 * .07s);}
.loaded .word:nth-child(8) {transition-delay: calc(8 * .07s);}
.loaded .word:nth-child(9) {transition-delay: calc(9 * .07s);}
.loaded .word:nth-child(10) {transition-delay: calc(10 * .07s);}
.loaded .word:nth-child(11) {transition-delay: calc(11 * .07s);}
.loaded .word:nth-child(12) {transition-delay: calc(12 * .07s);}
.loaded .word:nth-child(13) {transition-delay: calc(13 * .07s);}
.loaded .word:nth-child(14) {transition-delay: calc(14 * .07s);}
.loaded .word:nth-child(15) {transition-delay: calc(15 * .07s);}

.highlight-container {
	font-weight: 600;
    position: relative;
    display: inline-block;
}
.highlight-container .highlight-stripe {
    transition-duration: .75s;
    transition-property: transform;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.42,0,.58,1);
    transition-timing-function: cubic-bezier(.5,.08,0,.88);
    transform: scale3d(0,1,1);
    -ms-transform-origin: left center;
    transform-origin: left center;
    position: absolute;
    background:url('../images/renew/bg_highlight.png');
    height: 20px;
    top: 66%;
    left: -3px;
    width: 100%;
    opacity: .7;
}

section.on .highlight-container .highlight-stripe {transform: scale3d(1,1,1);}
section.on .to-stripe-0 .highlight-container .highlight-stripe {transition-delay: calc(.5 * .2s + 1s);}
section.on .to-stripe-1 .highlight-container .highlight-stripe {transition-delay: calc(1.5 * .2s + 1s);}
section.on .to-stripe-2 .highlight-container .highlight-stripe {transition-delay: calc(2 * .2s + 1s);}
section.on .to-stripe-3 .highlight-container .highlight-stripe {transition-delay: calc(2.5 * .2s + 1s);}
section.on .to-stripe-4 .highlight-container .highlight-stripe {transition-delay: calc(3 * .2s + 1s);}
section.on .to-stripe-5 .highlight-container .highlight-stripe {transition-delay: calc(3.5 * .2s + 1s);}
section.on .to-stripe-6 .highlight-container .highlight-stripe {transition-delay: calc(4 * .2s + 1s);}
section.on .to-stripe-7 .highlight-container .highlight-stripe {transition-delay: calc(4.5 * .2s + 1s);}
section.on .to-stripe-8 .highlight-container .highlight-stripe {transition-delay: calc(5 * .2s + 1s);}
section.on .to-stripe-9 .highlight-container .highlight-stripe {transition-delay: calc(5.5 * .2s + 1s);}
section.on .to-stripe-10 .highlight-container .highlight-stripe {transition-delay: calc(6 * .2s + 1s);}


.sub_key_copy.loaded .key_msg .word, .sub_key_copy.loaded .highlight-container {font-weight: 100}
.sub_key_copy.loaded .highlight-stripe {height: 15px}

.sub_key_copy .msg {
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(.5,.08,0,.88);
    opacity: 0}
}


/**
폼태그
**/
.mgt35 {margin-top: 35px}
.mgt20 {margin-top: 20px}
.inp_phone .inp_text.first {
    margin-left: 0;
}
.inp_phone .inp_text.first select {width: 100%}
.inp_text input::-webkit-input-placeholder{color:#bfbfbf;}
.inp_text input:-ms-input-placeholder{color:#bfbfbf;}
.inp_text input::-moz-placeholder{color:#bfbfbf;}
.inp_text input:-moz-placeholder{color:#bfbfbf;}
textarea::-webkit-input-placeholder{color:#bfbfbf;}
textarea:-ms-input-placeholder{color:#bfbfbf;}
textarea::-moz-placeholder{color:#bfbfbf;}
textarea:-moz-placeholder{color:#bfbfbf;}

.inp_wrap{position:relative;}
.inp_wrap .inp_lab{padding-bottom:10px;font-size:13px;line-height:1;}
.inp_wrap .inp_lab label{vertical-align:top;font-size:13px;}

.inp_text{position:relative;}
.inp_text input{width:100%;height:50px;vertical-align:top;font-size:14px;line-height:50px;text-indent:15px;border:1px solid #e8e8e8;border-radius:6px;
	-webkit-box-sizing:border-box;box-sizing:border-box;}
.inp_text input:focus{border-color:#222;}
.inp_text input:disabled{color:#888;background:#f8f8f8;cursor:not-allowed;}

.inp_phone{font-size:0;}
.inp_phone .inp_select{display:inline-block;width:164px;vertical-align:top;}
.inp_phone .inp_text{display:inline-block;width:164px;margin-left:10px;vertical-align:top;}

.inp_email{font-size:0;}
.inp_email .inp_text{display:inline-block;vertical-align:top;width:241px;}
.inp_email .hyphen{display:inline-block;vertical-align:top;text-align:center;width:30px;font-size:14px;line-height:50px;}
.inp_email .inp_select{display:inline-block;vertical-align:top;width:165px;}
.inp_email .btn{display:inline-block;width:160px;margin-left:12px;}
.inp_email .email_input{display:none;width:165px;}
.inp_email.active .inp_select{display:none;}
.inp_email.active .email_input{display:inline-block;width:165px;}
.inp_email select {width: 100%}

.inp_post{font-size:0;}
.inp_post .post_num{display:inline-block;width:340px;}
.inp_post .btn{display:inline-block;width:160px;margin-left:12px;}

.inp_cert input{padding-right:175px;}
.inp_cert .btn{position:absolute;right:10px;top:9px;width:130px;}
.inp_cert .btn_clear{right:145px;}
.inp_cert .cert_time{display:none;margin-top:5px;text-indent:10px;color:#ff5b5d;}
.inp_cert.active .cert_time{display:block;}

.inp_textarea textarea {border:1px solid #e8e8e8;border-radius:6px; padding: 20px; width: 100%; box-sizing: border-box}

.custom_checkbox {position:relative;}
.custom_checkbox:after {display:block; clear:both; content:""} 
.custom_checkbox label {position:absolute; left:0; height:22px; padding:2px 0 0 35px; background:url('../../resource/images/bbs/bbs_check.png') no-repeat; font-size: 14px}
.custom_checkbox input[type="checkbox"]:checked + label {background:url('../../resource/images/bbs/bbs_check_on.png') no-repeat;}
.custom_checkbox input {border: 0; background: none; visibility: hidden;}


/**/
select::-ms-expand {
   display: none;
}
select {
     height: 50px;
     line-height: 50px;
     padding:0 40px 0 15px;
     border:1px solid #e8e8e8;
     background:url('../../resource/images/bbs/bbs_select.png') no-repeat 88% 50%;
     border-radius:6px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance : none;
}


/**/

.checks {position: relative;}
.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0
}
.checks input[type="checkbox"] + label {
	font-size: 16px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 21px;  /* 체크박스의 너비를 지정 */
  height: 21px;  /* 체크박스의 높이를 지정 */
  line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */
  margin: -2px 8px 0 0;
  text-align: center; 
  vertical-align: middle;
  background: #fafafa;
  border: 1px solid #cacece;
  border-radius : 3px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
.checks input[type="checkbox"] + label:active:before,
.checks input[type="checkbox"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */ 
  content: '\2714';  /* 체크표시 유니코드 사용 */
  color: #99a1a7;
  text-shadow: 1px 1px #fff;
  background: #e9ecee;
  border-color: #adb8c0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}

.checks.small input[type="checkbox"] + label {
  font-size: 12px;
}

.checks.small input[type="checkbox"] + label:before {
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 11px;
}

.checks.etrans input[type="checkbox"] + label {
  padding-left: 30px;
}
.checks.etrans input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 0;
  opacity: .6;
  box-shadow: none;
  border-color: #6cc0e5;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.checks.etrans input[type="checkbox"]:checked + label:before {
  position: absolute;
  content: "";
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity:1; 
  background: transparent;
  border-color:transparent #6cc0e5 #6cc0e5 transparent;
  border-top-color:transparent;
  border-left-color:transparent;
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.no-csstransforms .checks.etrans input[type="checkbox"]:checked + label:before {
  /*content:"\2713";*/
  content: "\2714";
  top: 0;
  left: 0;
  width: 21px;
  line-height: 21px;
  color: #6cc0e5;
  text-align: center;
  border: 1px solid #6cc0e5;
}


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoWrapper video{
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
 	background-image: /* our video */;
 	background-position: center center;
 	background-size: contain;
    object-fit: cover; /*cover video background */
	z-index:-1;
}