@charset "utf-8";

/* pretendard */
@font-face {
  font-weight: 300;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Light.woff") format("woff");
}

@font-face {
  font-weight: 400;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Regular.woff") format("woff");
}

@font-face {
  font-weight: 500;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Medium.woff") format("woff");
}

@font-face {
  font-weight: 600;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-SemiBold.woff") format("woff");
}

@font-face {
  font-weight: 700;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Bold.woff") format("woff");
}

@font-face {
  font-weight: 800;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-ExtraBold.woff") format("woff");
}

@font-face {
  font-weight: 900;
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Black.woff") format("woff");
}

/* GmarketSans */
@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    src: url('../fonts/GmarketSans/GmarketSansLight.ttf') format('truetype'),
         url('../fonts/GmarketSans/GmarketSansLight.woff') format('woff'),
         url('../fonts/GmarketSans/GmarketSansLight.woff2') format('woff2');
}
  
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    src: url('../fonts/GmarketSans/GmarketSansMedium.ttf') format('truetype'),
         url('../fonts/GmarketSans/GmarketSansMedium.woff') format('woff'),
         url('../fonts/GmarketSans/GmarketSansMedium.woff2') format('woff2');
}
  
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    src: url('../fonts/GmarketSans/GmarketSansBold.ttf') format('truetype'),
         url('../fonts/GmarketSans/GmarketSansBold.woff') format('woff'),
         url('../fonts/GmarketSans/GmarketSansBold.woff2') format('woff2');
}
body{font-family:'Pretendard', sans-serif !important;letter-spacing:-0.2px;word-wrap:break-word;color:#000;font-weight: 400; position: relative; overflow-x: hidden; box-sizing: border-box;}
.intro {margin: 0; padding: 0; width: 100%; height: 100vh;}
.intro #wrap {position: relative; width: 100%; height:100%; background: green;}
.intro .box-wrap {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; height: 100%;}
.intro .box-wrap .box {position: relative; flex: 0 0 50%; max-width: 50%; height: 100%; display: flex; align-items: center; overflow: hidden;}
.intro .box-wrap .box::before{content: "";position: absolute;inset: 0;background: url(../img/intro/bg2.jpg) no-repeat center / cover;transition: transform .5s linear; transform: scale(1);z-index: 0;}
.intro .box-wrap .box:hover::before {transform: scale(1.1);}  
.intro .box-wrap .box.brand::before {background-image: url(../img/intro/bg1.jpg);}

.intro .box-wrap .box::after {content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, .5); transition: opacity .5s linear; z-index: 1;}
.intro .box-wrap .box:hover::after {opacity: 0;}

.intro .box-wrap .txt-wrap {width: 100%; padding: 72px 68px 68px 110px; color: #fff; background: rgba(181, 82, 15, .9); z-index: 10;}
.intro .box-wrap .txt-wrap h2 {font-family: 'GmarketSans', sans-serif; font-weight: 700; line-height: 1; font-size: 60px; letter-spacing: -0.02em;}
.intro .box-wrap .txt-wrap .tit {margin: 36px 0 30px; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.02em;}
.intro .box-wrap .txt-wrap .para {font-size: 24px; line-height: 1.5; letter-spacing: -0.02em;}
.intro .box-wrap .txt-wrap .para b {font-weight: 500 !important;}
.intro .box-wrap .box.brand .txt-wrap{background-color: rgba(241,  233, 220, .9); color: #b5520f;}
.intro .arrow-wrap {text-align: right; margin-top: 2px;}
.intro .arrow-wrap .arrow {display: inline-block; width: 106px; height: 14px; background: url(../img/intro/arrow_wh.png)no-repeat center bottom / 100% auto ;}
.intro .box.brand .arrow-wrap .arrow {background-image: url(../img/intro/arrow_brown.png);}


@media (max-width: 1200px) {
    .intro .box-wrap .txt-wrap {padding: 40px;}
    .intro .box-wrap .txt-wrap h2 {font-size: 50px;}
    .intro .box-wrap .txt-wrap .tit {font-size: 30px; margin: 20px 0 18px;}
    .intro .box-wrap .txt-wrap .para {font-size: 18px;}
}
@media (max-width: 768px) {
    .intro .box-wrap .box {flex: 0 0 100%; max-width: 100%; height: 50%;}
    .intro .box-wrap .box::before {background-position: 0 top;}
    .intro .box-wrap .box.brand::before {background-position: 0 bottom;}
    
    .intro .box-wrap .txt-wrap {padding: 36px 30px 28px 42px;}
    .intro .box-wrap .txt-wrap h2 {font-size: 30px;}
    .intro .box-wrap .txt-wrap .tit{margin: 18px 0 16px; font-size: 18px;}
    .intro .box-wrap .txt-wrap .para {font-size: 13px;}
    .intro .arrow-wrap .arrow {width: 55px; height: 7px;}
}