/*---common css---*/

:root {
	/*color*/
	--color-base: #000;
	--color-kakao: #ffc401;
	--color-kakao-text: #442f01;
	--color-naver: #00c13a;
	--color-point01: #176cff;
	--color-pnint02: #fff;

	/*font-size*/
	--font-size-14: 0.875rem;
	--font-size-16: 1rem; 
	--font-size-17: 1.0625rem; 
	--font-size-18: 1.125rem;
	--font-size-20: 1.25rem; 
	--font-size-21: 1.313rem; 
	--font-size-22: 1.375rem; 
	--font-size-42: 2.625rem; 
	--font-size-67: 4.188rem; 
	--font-size-100: 6.25rem;

	/*font-weight*/
	--font-r: 400;
	--font-m: 500;
	--font-sb: 600;
	--font-b: bold;
	--font-eb: 800;
	--font-bl: 900;
}

/*font size*/
.fs_14{font-size: var(--font-size-14);}
.fs_16{font-size: var(--font-size-16);} 
.fs_17{font-size: var(--font-size-17);} 
.fs_18{font-size: var(--font-size-18);}
.fs_20{font-size: var(--font-size-20);} 
.fs_21{font-size: var(--font-size-21);} 
.fs_22{font-size: var(--font-size-21);} 
.fs_42{font-size: var(--font-size-42);} 
.fs_67{font-size: var(--font-size-67);} 
.fs_100{font-size: var(--font-size-100);}

@media screen and (max-width:768px){
.fs_100 {font-size:3.438rem;}
.fs_42 {font-size:1.313rem;}
}


/*font-color*/

.fc_point01 {color: var(--color-point01);}
.fc_fff {color: var(--color-pnint02);}
/*font weight*/
.font_r{font-weight: var(--font-r);}
.font_m{font-weight: var(--font-m);}
.font_sb{font-weight: var(--font-sb);}
.font_b{font-weight: var(--font-b);}
.font_eb{font-weight: var(--font-eb);}
.font_bl{font-weight: var(--font-bl);}


/*text-motion*/
.j_motion.common_motion{transform: translateY(25px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion.on {transform: translateY(0);opacity: 1;}

.j_delay_01{transition-delay: .2s !important;}
.j_delay_02{transition-delay: .4s !important;}
.j_delay_03{transition-delay: .6s !important;}
.j_delay_04{transition-delay: .8s !important;}
.j_delay_05{transition-delay: 1s !important;}
.j_delay_06{transition-delay: 1.2s !important;}
.j_delay_07{transition-delay: 1.4s !important;}
.j_delay_08{transition-delay: 1.6s !important;}
.j_delay_09{transition-delay: 1.8s !important;}
.j_delay_10{transition-delay: 2s !important;}
.j_delay_11{transition-delay: 2.2s !important;}

/*common*/
.main figure img {display:block; width:100%; margin:0 auto;}
.pos_img {position:absolute; left:0; top:0;} 
.common_01 {transform: translateY(50px); opacity: 0; transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion.on .common_01{ transform: translateY(0); opacity: 1;}

.mo_768 {display:none;}

@media screen and (max-width:768px){
.mo_768 {display:block;}
.pc_768 {display:none;}
}



/*---header---*/

#j_header {height:100px; position:fixed; left:0; top:0; width:100%; transition:0.28s; z-index:99;}
#j_header.active {background:#fff;}
.j_hd_con {height:100%;}
.j_hd_con .j_gnb {display:flex; height:100%;}
.j_hd_con .j_gnb li + li {padding-left:54px;}
.j_hd_con .j_gnb > li {height:100%;}
.j_hd_con .j_gnb > li > a {display:block; height:100%; line-height:100px; font-size:1.25rem;  font-weight:bold}
.j_hd_con {display:flex; align-items:center; justify-content:space-between;}

/*mobile_wrap*/
.mobile_wrap {position:absolute;  width:100%; height:100vh; top:0; right:0; padding:40px; background:#fff; transition: transform 0.4s; transform:translateX(100%); box-shadow: 5px 20px 24px 0px rgba(0, 0, 0, 0.11);}
.mobile_wrap.on {transform:translateX(0);}
.mo_inner {height:100%;}
.mo_inner > .j_gnb {height:100%; display: flex; height: 100%;  flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center;}
.mo_inner > .j_gnb > li {font-size:28px;}

.mo_inner .j_gnb > li a {display:block; padding:20px 0; font-weight:700; transition:0.28s;}
.mo_inner .j_gnb > li a:hover {color:#176cff;}
.btn_box {display:none;}
.close_btn {position:absolute; right:30px; top:30px;}
.close_btn span {background:#000; width:20px; height:2px;  display:block;  position:absolute; transform:translate(0);}
.close_btn span:nth-of-type(1) {transform: rotate(45deg);}
.close_btn span:nth-of-type(2) {transform: rotate(-45deg);}

@media screen and (max-width:768px){

#j_header {height:56px;}
.j_hd_con .j_gnb {display:none;}
.mobile_wrap {display:block; background:#fff;}
.btn_box {display:block;}
}






/*main_visual*/

.main_visual {background:url('/img/mv_bg01.jpg') no-repeat center center / cover; height:100vh; max-width:1920px; margin:0 auto; width:100%;}
.mv_txt {position:absolute; left:0; top:50%; transform:translateY(-50%);}
.mv_txt p {margin-top:40px; line-height:1.3em;}
.ms_scroll_box {position:absolute; bottom:55PX; left:50%; transform:translateX(-50%);}
.ms_scroll {width:30px; height:60px; border:1px solid #a4a5a5; border-radius:15px; margin:0 auto; position:relative;}
.ms_wheel {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.m_scroll_arrows {  display: block;-ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */transform: rotate(45deg); border-right: 2px solid #232323; border-bottom: 2px solid #232323;  width: 11px; height: 11px; }

.ms01, .ms02, .ms03
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.ms01
{
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.ms02
{
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  -webkit-animation-direction: alternate;
  
  animation-delay: 0.15s;
  animation-direction: alternate;
  
}

.ms03
{
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -webkit-animation-direction: alternate;
  
  animation-delay: 0.25s;
  animation-direction: alternate;
   
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

.ms_scroll_box p {color:#222222; opacity:.4; margin-top:16px;}



@media screen and (max-width:768px){
	.main_visual {background:url('/img/mv_bg01_m.jpg') no-repeat center center / cover; max-width:1920px; margin:0 auto; width:100%; height:100vh;}
	.mv_txt p {margin-top:10px;}
	.ms_scroll_box {display:none;}
	.mv_txt {text-align:center; top:auto; bottom:28px; width:100%;transform: translateY(0);}
}



/*section*/

.main {max-width:1920px; margin:0 auto; width:100%; position:relative;}
.main_section01 {background:#176cff;}

@media screen and (max-width:768px){
.main_section01 {}
}


.main_section02 {background:#000;}

.main_section03 {background:url('/img/main03_bg.jpg') no-repeat center center / cover;}

@media screen and (max-width:768px){

.main_section03{background:url('/img/main03_bg_m.jpg') no-repeat center center / cover;}
}


.main_section04 {background:url('/img/main04_bg.jpg') no-repeat center center / cover;}

@media screen and (max-width:768px){
.main_section04 {background:url('/img/main04_bg_m.jpg') no-repeat center center / cover;}
}


.main_section05 {background:#000; padding-bottom:140px;}
.j_form_list {max-width:766px; margin:0 auto; display:flex; flex-wrap:wrap;}
.j_form_box {width:calc((100% - 24px)/2); margin-right:24px;}
.j_form_box:nth-of-type(2n){margin-right:0;}
.j_form_box:nth-of-type(n+3) {margin-top:50px;}
.j_form_box label {position:relative;}
.j_form_box label:after {content:''; width:6px; height:6px; background:url('/img/label_icon.png') no-repeat center center / cover; position:absolute; top:0; right:-7px;}
.j_form_box .field_box input {border-radius:8px; background:#4d4d4d; width:100%; padding: 14.5px; margin-top:8px;}
.j_form_box label.non_after:after {display:none;}
.j_form_box.j_textarea {max-width:766px; width:100%; margin:50px auto 0 auto;}

.j_form_box .field_box textarea {border-radius:20px; background:#4d4d4d; width:100%;  padding: 14.5px; margin-top:50px; }

.agree_box  {max-width: 242px; margin: 50px auto 0 auto;padding-right: 20px; position:relative;}
.agree_box i {position:absolute; right:20px; top:50%; transform:translateY(-50%);}
.agree_box label b {position:relative; padding-left:13px; cursor:pointer;}
.agree_box label b:before {content:''; position:absolute; width:170px; height:2px; background:#808080; bottom:-3px; left:12px;}
/* .agree_box label b:after {content:''; position:absolute; right:-20px; top:50%; transform:translateY(-50%); width:13px; height:13px; background:url('/img/agree_icon.png') no-repeat center center / cover;} */
.agree_box input[type=checkbox] + label {display: flex;align-items: center; width: 100%;     justify-content: center;}
.agree_box input[type=checkbox] + label span {display:block; width:20px; height:20px; border-radius:20px; border:2px solid #fff; cursor:pointer; margin-top:7px;}
.agree_box input[type=checkbox]:checked + label span {background: url('/img/agree_chk.png') no-repeat 50% 50% #000;}
.agree_box input[type=checkbox] { position: absolute; top: 0; left: 0;  width: 0; height: 0;opacity: 0;  outline: 0; z-index: -1; overflow: hidden;}

.form_btn_wrap {text-align:center; margin-top:50px;}
.form_btn {width:242px; height:61px; border-radius:30.5px; background:#176cff; color:#fff; text-align:center; line-height:61px; margin:0 auto;}

@media screen and (max-width:768px){
	.main_section05 {padding:70px 0;}
	.j_form_box {width:100%; margin-right:0;}
	.j_form_box:nth-of-type(n+2) {margin-top:15px;}
	.j_form_box.j_textarea {margin:15px auto 0 auto;}
	.j_form_box .field_box textarea {margin-top:10px;}
	.agree_box label b:before {width:137px; left:4px;}
	.agree_box {margin: 25px auto 0 auto;}
	.form_btn_wrap {margin-top:20px;}
	.form_btn  {width:196px; height:35px; line-height:35px; font-size:15px;}
	.agree_box input[type=checkbox] + label span {display:block; width:11px; height:11px; border-radius:11px; border:2px solid #fff; cursor:pointer; margin-top:3px;}
	.agree_box label b {padding-left:6px;}
	.agree_box i  {right:45px;}
}




/*게시판 이너*/
.bo_pd {padding:200px 0;}
.bo_section {max-width:1400px; margin:0 auto; width:92%;}

@media screen and (max-width:1080px){
	.bo_pd {padding:80px 0;}
}
@media screen and (max-width:720px){
	.bo_pd {padding:80px 0 40px;}
}
/*footer*/

footer {background:#000; max-width:1920px; margin: 0 auto; width:100%; border-top:1px solid #333333; box-sizing:border-box; padding:47px 0;}
footer .ft_box {display:flex; justify-content:space-between; align-items: flex-end;}
footer .ft_left h4 {color:#777777;}
footer .ft_left p {color:#999999; line-height:1.5em; margin-top:20px;}
.ft_logo {text-align:right;}
.copy_p {color:#c0c0c0; margin-top:39px;}
.copy_p_m {color:#c0c0c0; margin-top:15px; display:none;}

@media screen and (max-width:768px){
	footer {padding:18px 0;}
	footer .ft_left h4 {display:none;}
	.ft_box {flex-wrap:wrap;    flex-direction: column-reverse;}
	.ft_left {width:100%}
	.ft_right{width:100%;}
	.ft_logo {width:100%; text-align: center;}
	footer .ft_left p {text-align:center;}
	.copy_p {display:none;}
	footer .ft_left p.copy_p_m {margin-top:13px;}
	.copy_p_m {display:block; }
}


/*---개인정보처리방침, 이용약관 팝업 추가---*/
.add_pop_wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.9);z-index: 9999;display: none;}
.add_pop_wrap *{color: #fff;}
.add_pop_inner{position: absolute;top: 50%;left: 50%;width: 94%;max-width: 800px;height: 600px;border-radius: 15px;overflow: hidden;transform: translate(-50%,-50%) scale(.9);transition: transform .3s ease;}
#add_wrap_02 .add_pop_inner{height: 250px;}
.add_pop_wrap.active .add_pop_inner{transform: translate(-50%,-50%) scale(1);}

.add_pop_tit{background: #176cff;color: #FFF;display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 0 25px;}
.add_pop_close{width: 20px;height: 60px;position: relative;}
.add_pop_close span{position: absolute;top: 29px;left: 0;width: 20px;height: 2px;background: #fff;z-index: 1;transition: transform .3s ease; }
.add_pop_close span:nth-child(1){transform: rotate(45deg);}
.add_pop_close span:nth-child(2){transform: rotate(-45deg);}

.add_pop_close:hover span{transform: rotate(0);}

.add_pop_con{background: #FFF;padding: 22px 25px;overflow-y: scroll;height: calc( 100% - 60px );}
.add_pop_con h5{font-size: 1rem;font-weight: bold;margin-bottom: 10px; color:#000;}
.add_pop_con p{font-size: 14px;line-height: 160%;margin-bottom: 25px; color:#000;}

@media (max-width: 768px){ 
	
	.add_pop_con p{font-size: 12px;}
}