/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
/* font-family: "Noto Sans KR", sans-serif; */

@font-face {
  font-family: 'HakgyoansimBunpilR';
  src: url('../font/HakgyoansimBunpilR.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'HakgyoansimByeoljariL';
  src: url('../font/HakgyoansimByeoljariL.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.bunpil {
  font-family: 'HakgyoansimBunpilR', sans-serif;
}
.byeoljari {
  font-family: 'HakgyoansimByeoljariL', sans-serif;
}

* {
    margin: 0 ;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

/* For Webkit-based browsers (Chrome, Safari, Edge) */
html {
    overflow: auto; /* 스크롤 기능 유지 */
}

/* ::-webkit-scrollbar {
    width: 0px; /* 스크롤바 너비를 0으로 설정해 숨김 */
/* } */ 

/* HTML과 body에 대한 기본 스타일 */
html, body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans KR', sans-serif; /* 구글 폰트를 적용하는 경우 */
    line-height: 1.7; 
    -webkit-font-smoothing: antialiased; /* 텍스트 렌더링 최적화 */
    -moz-osx-font-smoothing: grayscale; /* 텍스트 렌더링 최적화 */
    word-break: normal;
    /* overflow: hidden; */
}


/* 이미지와 비디오의 최대 크기를 부모 요소에 맞추도록 설정video */
img {
    max-width: 100%;
    height: auto;
    display: block;
  }

/* img 드래그 방지*/
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    oncontextmenu: return false;
}
  
  /* 링크 기본 스타일 리셋 */
  a {
    text-decoration: none;
    color: inherit; /* 링크 기본 색상을 텍스트 색상으로 */
  }

  .pc_display { display: block; }
  .mobile_display { display: none; }

    @media only all and (max-width: 767px) {
        .pc_display { display: none; }
        .mobile_display { display: block; }
    }


.inner {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
/* 폰트 설정 관련 스타일 */
.fw-3 {
  font-weight: 300;
}
.fw-4 {
  font-weight: 400;
}
.fw-5 {
  font-weight: 500;
}
.fw-6 {
  font-weight: 600;
}
.fw-7 {
  font-weight: 700;
}
.fw-8 {
  font-weight: 800;
}
.fw-9 {
  font-weight: 900;
}

/* margin */
.mt-1 {
  margin-top: 10px;
}
.mt-2 {
  margin-top: 20px;
}
.mt-3 {
  margin-top: 30px;
}
.mt-4 {
  margin-top: 40px;
}
.mt-5 {
  margin-top: 50px;
}
.mt-6 {
  margin-top: 60px;
}
.mt-7 {
  margin-top: 70px;
}
.mt-8 {
  margin-top: clamp(50px, 5vw, 80px);
}
.mt-9 {
  margin-top: 90px;
}
.mt-15 {
  margin-top: 150px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt-10 {
  margin-top: clamp(50px, 6vw, 100px);
}
.mt-15 {
  margin-top: clamp(100px, 8vw, 150px);
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-4 {
  margin-bottom: 40px;
}
.mb-5 {
  margin-bottom: 50px;
}


.mob-br, .mob480, .mob360 {
  display: none;
}
@media (max-width: 767px) {
  .mob-br{
    display: block;
  }
}
@media (max-width: 480px) {
  .mob480 {
      display: block;
  }
}
@media (max-width: 372px) {
  .mob360 {
      display: block;
  }
}
/* .popup-image {
  opacity: 0;
} */
 /* 여기서부터 공통 스타일 */
.dashed-line {
  width: 100vw;
  height: 2px;
  margin-left: calc(-50vw + 50%);
  background-image: repeating-linear-gradient(
    to right,
    #FF6B00 0 10px,
    transparent 10px 20px
  );
  background-repeat: repeat-x;
  background-size: auto 2px;
  background-position: center;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.tl {
  text-align: left;
}
.txtPoint{
  color: #FF6B00;
} 
/* 공통버튼 1: 서브 */
.btn01{
  font-family: 'HakgyoansimBunpilR';
  color: #FFFFFF;
  background-color: #ff6600;
  border-radius: 50px;
  padding: clamp(8px, 1.5vw ,12px) clamp(20px, 3vw ,30px);
  font-size: clamp(20px, 3vw ,32px);
  line-height: 120%;
  display: inline-block;
  width: auto; /* 혹시 강제 지정된 경우 방지 */
}
/* 공통버튼 2: 메인 */
.btn02_area {
  flex-direction: column;
  gap: 1vw;
}
.btn02_area .btn02-item {
  /* width: 240px; */
  /* max-height: 53px; */
  padding: 12px 15px;
  line-height: 1.5;
  text-align: center;
  background: #fff;
  border: 1.5px solid #FF6B00;
  color: #FF6B00;
  border-radius: 9999px;
  transition: color 0.1s linear, background-color 0.1s linear;
  cursor: pointer;
  position: relative;
  width: 100%;
  display: block;
  font-size: clamp(12px, 2vw, 30px);
  white-space: nowrap;
}
.btn02_area .btn02-item::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FF6B00;
  border-radius: 9999px;
  bottom: -0.3em;
  right: -0.2em;
  box-shadow: 2 0px 0px #FF6B00;
  z-index: -1;
}
.btn02_area .btn02-item:hover {
  background: #FF6B00;
  color: #fff;
}
.btn02_area .btn02-item:hover::before {
  background: #fff;
  border: 1px solid #FF6B00;
} 
@media only all and (max-width: 767px) {
  .btn02_area .btn02-item {
    padding: 7px;
  }
}/* 여기까지 버튼 02 */


/* 20241121 util 메뉴 로고 삭제 및 로그인 영역 위치 조정 */
#header.microsite .header_wrap {
    height: 32px;
}

.microsite .header_wrap .header_logo,
.microsite .header_wrap .header_logo img {
    display: none;
}

.microsite .header_util .my_info .my_lyr {
    word-break: keep-all;
}

@media only all and (max-width: 767px) {
    #header.microsite {
        padding: 0;
    }

    #header.microsite .header_wrap {
        height: 0;
        padding: 0;
    }

    #header.microsite .header_wrap .header_util .my_info {
        top: 22px;
        right: 20px;
    }

    .campaign #header .header_wrap .menu {
        margin-right: 33px;
    }

    .microsite .btn_myinfo {
        border-color: #fff;
        border-radius: 8px;
        background-image: url('images/common/angle-down.svg') no-repeat;
        -webkit-background-size: 40%;
        background-size: 40%;
    }

    .microsite .header_util .my_info .my_lyr {
        right: -20px;
    }
}

/* //20241121 util 메뉴 로고 삭제 및 로그인 영역 위치 조정 */