@charset "utf-8";

/*해더 푸터 css*/

#header{width: 720px; margin: 0 auto; font-family: 'Pretendard'; background: #fff;position: relative; z-index: 100;}	
#header .header_wrap{width: 100%;position: absolute;top: 0;left: 50%; transform: translateX(-50%);transition: top 0.5s  ease-in-out, background 0.5s  ease-in-out; background: #fff;}
#header.sticky { position: fixed; top: 0; left: 50%;transform: translateX(-50%);z-index: 1000; }

#header .main_hd{display: flex; justify-content:space-between; padding: 40px 20px 30px 20px;}
#header .main_hd .icons > a{display: inline-block;}
#header .main_hd .icons .alarm{margin-right: 20px;}
#header .main_gnb{ padding: 0 20px 20px 20px; }
#header .main_gnb .swiper-wrapper {display: flex;}
#header .main_gnb .swiper-slide { width: auto !important; flex: none; }
#header .main_gnb .swiper-slide > a{display:inline-block;  font-size: 25px; line-height: 35px;border:1px solid #CCCCCC; color:#767676;  padding: 12px 30px; border-radius:100px; font-weight: 400; }
#header .main_gnb .swiper-slide.on > a{background: #333; color:#fff; font-weight: 500;}

#header_sub{width: 720px; margin: 0 auto; font-family: 'Pretendard'; background: #fff;}	

#header_sub .sub_hd{padding: 20px;display: flex; gap:20px;justify-content: space-between;}
#header_sub .sub_hd > p {font-size: 36px; line-height: 50px; color:#333; font-weight:500;margin-right: auto;}
#header_sub .sub_hd img{margin-left: auto;margin-top: 5px;width: 40px;height: 40px;cursor:pointer;}


#header_fsub{width: 720px; margin: 0 auto; font-family: 'Pretendard'; background: #fff;}	
#header_fsub .f_sub_hd{padding: 20px;display: flex; gap:20px; }
#header_fsub .f_sub_hd > p {font-size: 36px; line-height: 50px; color:#333; font-weight:500;}


#footer{width: 720px; margin: 0 auto; border:1px solid #F8F8FA; background: #fff; position: fixed; z-index: 9999999; bottom:0; left:50%; transform:translateX(-50%);
display:flex; padding:10px 40px; justify-content:space-between; font-family: 'Pretendard'; box-shadow: 0 -4px 6px -2px rgba(117, 117, 117, 0.1); border-radius:40px 40px 0 0 ;}	
#footer a{ display: block;flex-grow: 1; text-align:center;}
#footer a p{font-size: 22px; line-height: 30px;}
#footer a img{width: 48px; height: 48px;}

#popup{width: 720px;min-height: 100vh; margin: 0 auto; position: absolute;top:0;left:50%; transform:translateX(-50%);z-index: 100; display: none;	}
#popup .bg{width: 100%;min-height: 100vh; background: rgba(0,0,0,0.8);}
#popup .window{z-index: 100; width: 60%;background: #FFFFFF; border-radius:40px; position: absolute; top:40%;left:50%; transform:translate(-50%,-40%);padding-top: 30px;
display: flex; flex-direction:column; align-items:center; overflow: hidden;}
#popup .alrim{font-size: 25px; line-height: 30px; color:#555555; margin-bottom: 30px;}
#popup .words{font-size: 30px; line-height: 42px; margin-bottom: 60px;}
#popup .window_btn{display:flex; width: 100%; border-top: 1px solid #ccc;}
#popup .window_btn button{width: 50%;height: 90px; font-size: 30px; line-height: 42px; background: none; border:none;}
#popup .window_btn .cancel{color:#767676;position: relative;}
#popup .window_btn .cancel:after{content:''; position: absolute;top:50%; transform:translateY(-50%); right:0; width: 1px; height: 80%; background: rgba(204,204,204,0.3);}
#popup .window_btn .confirm{color:#3DA4E4;}



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

#header{width: 100%; margin: 0 auto;  }	
#header .main_hd{ padding: 5.5556vw 2.7778vw 4.1667vw 2.7778vw;}
#header .main_hd .icons > a{}
#header .main_hd .icons .alarm{margin-right: 2.7778vw;}

#header_sub{width: 100%; margin: 0 auto;  }	
#header_sub .sub_hd{padding: 2.7778vw; gap:2.7778vw; }
#header_sub .sub_hd > p {font-size:5.5556vw; line-height:5.9722vw;}
#header_sub .sub_hd img{margin-left: auto;margin-top: 0.6944vw;width: 5.5556vw;height: 5.5556vw;}

#header_sub .sub_hd .back a img{width: 5.9722vw; }

#header_fsub{width: 100%; margin: 0 auto;  }	
#header_fsub .f_sub_hd{padding: 2.7778vw; gap:2.7778vw; }
#header_fsub .f_sub_hd > p {font-size:5.5556vw; line-height:5.9722vw;;  }

#header .main_hd .logo img{width: 20.5556vw;}
#header .main_hd .icons img{width: 5.9722vw;}
#footer{width: 100%; margin: 0 auto; border:0.1389vw solid #F8F8FA; background: #fff;  bottom:0; left:50%; transform:translateX(-50%);
 padding:1.3889vw 5.5556vw;box-shadow: 0 -0.5556vw 0.8333vw -0.2778vw rgba(117, 117, 117, 0.1);border-radius:5.5556vw 5.5556vw 0 0 ; 
	justify-content:space-around;}	
#footer a{ flex-grow: 1; }
#footer a p{font-size: 3.0556vw; line-height: 4.1667vw;}
#footer a img{width: 6.6667vw; height:6.6667vw;}
#footer div{width: 20%;}

#header .main_gnb{ padding: 0 2.7778vw; margin-bottom: 2.7778vw;}

#header .main_gnb .swiper-slide { width: auto !important; flex: none; }
#header .main_gnb .swiper-slide > a{  font-size:3.7500vw; line-height: 4.8611vw;border:0.1389vw solid #CCCCCC;  padding: 1.6667vw 4.1667vw; border-radius:13.8889vw; }
#header .main_gnb .swiper-slide.on > a{background: #333;  }


#popup{width: 100%;min-height: 100vh; margin: 0 auto; top:0;left:50%; transform:translateX(-50%); }
#popup .bg{width: 100%;min-height: 100vh; background: rgba(0,0,0,0.8);}
#popup .window{ width: 65%;background: #FFFFFF; border-radius:5.5556vw;  top:40%;left:50%; transform:translate(-50%,-40%);padding-top: 4.1667vw;
 flex-direction:column; align-items:center; }
#popup .alrim{font-size: 3.4722vw; line-height: 4.1667vw;  margin-bottom: 4.1667vw;}
#popup .words{font-size: 4.1667vw; line-height: 5.8333vw; margin-bottom: 8.3333vw;}
#popup .window_btn{ width: 100%; border-top: 0.1389vw solid #ccc;}
#popup .window_btn button{width: 50%;height: 12.5000vw; font-size: 4.1667vw; line-height: 5.8333vw; background: none; border:none;}
#popup .window_btn .cancel{}
#popup .window_btn .cancel:after{ top:50%; transform:translateY(-50%); right:0; width: 0.1389vw; height: 80%; background: rgba(204,204,204,0.3);}
#popup .window_btn .confirm{}

}