@charset "utf-8";

/* 공통서식 - 스타일 가이드에 설정한 내용
1. 글꼴, 크기, 색상
2. 레이아웃 (헤더, 푸터)
3. 링크 서식
4. 네비게이션
*/


/* 웹폰트 - Zalando Sans Expanded */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

/* 웹폰트 - GmarketSans */
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSans.css');

/* 로컬폰트 - AppleSDGothicNeo */
@font-face {
  font-family: "AppleSDGothicNeo";
  src: url("../font/AppleSDGothicNeo-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "AppleSDGothicNeo";
  src: url("../font/AppleSDGothicNeo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "AppleSDGothicNeo";
  src: url("../font/AppleSDGothicNeo-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "AppleSDGothicNeo";
  src: url("../font/AppleSDGothicNeo-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "AppleSDGothicNeo";
  src: url("../font/AppleSDGothicNeo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "AppleSDGothicNeo";
  src: url("../font/AppleSDGothicNeo-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}



/* 컬러 */
:root{
  --main_black: #111;
  --main_white: #fff;
  --txt_gray_light: #696868;
  --txt_gray_dark: #2D2D2D;
}

/* 여백 값 */
.pt30 {padding-top: 30px !important;}
.pt0 {padding-top: 0 !important;}


/* 중앙 공통 css */
.middle {text-align: center;}
.middle > h2 {font-size: 64px; line-height: 100%; font-weight: 600;}
.middle > h2 > b {font-weight: 700; letter-spacing: -2px;}
.middle > p {font-size: 21px; margin: 35px 0 75px;}


/* 기본설정 */
.ir_pm {display: block;  overflow: hidden;  font-size: 0;  line-height: 0; text-indent: -9999px; }

body {
  font-family: 'Zalando Sans Expanded', 'AppleSDGothicNeo', Arial, '맑은 고딕', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 170%;
  letter-spacing: -0.5px;
  color: #fff;
  background-color: var(--main_black);
  overflow-x: hidden;
}

body > article {padding: 230px 150px;}
a {color: #fff; text-decoration: none;}
main {height: 100%;}


/* 헤더 네비게이션 */
header, nav > ul {width: 100%; height: 60px; display: flex; align-items: center;}
header {position: fixed; top: 0; z-index: 100; transition: 0.5s; padding-top: 3px; z-index: 99999; pointer-events: none; /* header 전체에서 이벤트 무시 */}
header > * {position: absolute; pointer-events: auto; /* 실제 클릭해야 하는 로고, 버튼 등만 이벤트 가능 */}
header > h1 {left: 70px;}
header > a:nth-child(2) {right: 220px;}
header > a:nth-child(3) {right: 170px;}
header > select {right: 70px;
    font-family: "AppleSDGothicNeo";
    font-weight: 400;
    font-size: 19px;
    color: #fff;
    background-color: #111;
    border: none;
    transform: translateY(-6px);
    appearance: none; /*네이티브 화살표 제거*/
    background: url(../images/main_select_arrow_down.png) no-repeat 100% 60%; /*화살표 이미지로 추가*/
    padding-right: 17px; /*이미지와 글자 간격 맞추기*/
    transition: 0.3s;
    outline: none;
    cursor: pointer;
}
header > select option {background-color: #fff; /* 드롭다운 리스트 옵션 배경 */ color: var(--txt_gray_dark); text-align: center;}


/* 버튼 */
.link_btn {overflow: hidden; position: relative;font-size: 19px; font-weight: 700; border: 2px solid #fff; border-radius: 50px; padding: 8px 43px 8px 22px; display: inline-block; margin-top: 70px; transition: 0.3s;
  /* 화살표 */
  background-image: url('../images/btn_arrow.png');
  background-repeat: no-repeat;
  background-position: right 20px center; }
.link_btn:hover {background-color: #fff; color: var(--main_black); font-weight: bold; background-image: url('../images/btn_arrow_black.png');}
.link_btn > img {margin-left: 7px;}


/* mid_img 확대/축소용 overlay */
.mid_img.scroll-active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* header보다 위에 나타나도록 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* 필요하면 반투명 배경 가능 */
}

.mid_img.scroll-active img {
  transition: transform 0.3s ease;
  max-width: 100%;
  max-height: 100%;
}