@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap');
@font-face {
  font-family: "score4";
  src: url(../fonts/SCDream4.otf);
}
@font-face {
  font-family: "cooper";
  src: url(../fonts/COOPBL.ttf);
}
@font-face {
  font-family: "black";
  src: url(../fonts/BlackHanSans-Regular.ttf);
}
/* 모든 페이지에 적용되는 공통서식 */
body{
  overflow-x: hidden;
  background-color:#fff;
  font-family: 'score4';
  font-size: 16px;
  color:#333;
}

a{text-decoration:none;color:#333;}

/* 헤더공통서식 */


/* 푸터공통서식 */
footer{
  height: 280px;
}

/* 모달 서식 */
.modal{
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;height: 100%;
  position: fixed;top: 0px;left: 0px;
  text-align: center;
  z-index: 10000;
}

.modal img{
  padding-top: 10%;
}
.modal > .box > .notice{
  font-family: "score4";
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
}
.modal > .box{
  padding-top: 20px;
  margin-top: 100px;
  font-family: "score4";
  width: 480px;height: 220px;
  background-color: salmon;
  color: #fff;
  text-align: center;
}
.modal p{
  font-family: "score4";
  width: 480px;
  margin: 0px auto;
  line-height: 50px;
  background-color: #fff;
  color: salmon;
  font-size: 14px;
  text-align: left;
}
.modal #c_btn{
  border: 1px solid salmon;
  background-color: #fff;
  color: salmon;
  transform: translateX(240px);
  font-size: 15px;
  font-family: "score4";

}

/*버튼서식*/

.r_btn{
  margin-top: 20px;
  background: rgba(242, 124, 126,1);
  background: linear-gradient(0deg, rgba(242, 124, 126,1) 0%, rgba(243, 124, 126,1) 100%);
  width: 150px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.r_btn span{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.r_btn:before,
.r_btn:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   background: rgba(243, 124, 126,1);
  transition: all 0.3s ease;
}
.r_btn:before {
  height: 0%;
  width: 2px;
}
.r_btn:after {
  width: 0%;
  height: 2px;
}
.r_btn:hover{
   background: transparent;
  box-shadow: none;
}
.r_btn:hover:before {
  height: 100%;
}
.r_btn:hover:after {
  width: 100%;
}
.r_btn span:hover{
   color: rgba(243, 124, 126,1);
}
.r_btn span:before,
.r_btn span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
   background: rgba(243, 124, 126,1);
  transition: all 0.3s ease;
}
.r_btn span:before {
  width: 2px;
  height: 0%;
}
.r_btn span:after {
  width: 0%;
  height: 2px;
}
.r_btn span:hover:before {
  height: 100%;
}
.r_btn span:hover:after {
  width: 100%;
}