@font-face {
font-family: 'Pretendard';
font-weight: 800;
font-display: swap;
src:
    local('Pretendard ExtraBold'),
    url(../fonts/subset-Pretendard-ExtraBold.woff2) format('woff2');
}

@font-face {
font-family: 'Pretendard';
font-weight: 700;
font-display: swap;
src:
    local('Pretendard Bold'),
    url(../fonts/subset-Pretendard-Bold.woff2) format('woff2');
}

@font-face {
font-family: 'Pretendard';
font-weight: 600;
font-display: swap;
src:
    local('Pretendard SemiBold'),
    url(../fonts/subset-Pretendard-SemiBold.woff2) format('woff2');
}

@font-face {
font-family: 'Pretendard';
font-weight: 500;
font-display: swap;
src:
    local('Pretendard Medium'),
    url(../fonts/subset-Pretendard-Medium.woff2) format('woff2');
}

@font-face {
font-family: 'Pretendard';
font-weight: 400;
font-display: swap;
src:
    local('Pretendard Regular'),
    url(../fonts/subset-Pretendard-Regular.woff2) format('woff2');
}

@font-face {
font-family: 'Pretendard';
font-weight: 300;
font-display: swap;
src:
    local('Pretendard Light'),
    url(../fonts/subset-Pretendard-Light.woff2) format('woff2');
}

html {height:100%;}
body {-webkit-font-smoothing: antialiased;}
html, body {margin:0; padding:0; font-family: Pretendard, sans-serif}
ul, ol, li {margin:0; padding:0; list-style:none;}
a {text-decoration: none;}
div, li, ul, ol, a {box-sizing:border-box;}
h1, h2, h3, h4, h5, p {padding:0; margin:0;} 
button {cursor: pointer; border:0; background-color:transparent;}
body {color:#000;}
div, input, p, ul, li, button, span {box-sizing: border-box;}
img {vertical-align:middle; border:0;}
table, input, select, textarea, button {font-family: Pretendard, sans-serif;}

.wrap {margin:0 auto;}

.header {position:relative; }
.header .inner {max-width:1920px; position:absolute; align-items: center; z-index:100; top:0; left:0; width:100%; height:84px; padding:0 80px; display:flex; justify-content: space-between;}
.header-btns {display:flex; gap:40px; }
.header-btns > a {flex-shrink: 0;}
.header-btns > a img {width:36px; height:36px;}
.header video {background-color:#000; width:100%; vertical-align: middle;}

.intro { padding-bottom:140px;background:#fff url(../img/bg_intro.png) no-repeat bottom center; background-size: cover;}
.intro-top {background:#70AEDF; text-align:center;}
.intro-top img {max-width:100%;}
.intro-text {padding:140px 100px 0; margin:0 auto; text-align:center; color:#70AEDF; }
.intro-text .tit {font-size:70px; line-height:140%; font-weight:800; letter-spacing:-2px;}
.intro-text .txt {margin-top:60px; font-size:30px; line-height:140%; font-weight:500; letter-spacing:-1px;}
.character {width:800px; margin:80px auto 0; display:flex; flex-wrap: wrap; gap:40px;}
.character > li {flex-shrink:0; width:240px; color:#222; text-align: center;}
.character > li img {margin-bottom:16px; }
.character .txt {font-size:18px; line-height:140%; font-weight:400;}
.character .name {margin-top:4px; font-size:24px; line-height:140%; font-weight:600; display: block;}

.video-wrap {background-color:#000; overflow:hidden;}
.video-wrap > div {height:866px; padding:0 190px; position:relative; }
.video-wrap > div iframe {width:100%; height:100%;}
.visual {padding:140px 100px;}
.visual > .inner {max-width:1540px; margin:0 auto;}
.visual > .inner img {width:100%;}
.visual .text-area {margin-top:60px; text-align: center; color:#70AEDF;}
.visual .text-area .tit {font-size:70px; font-weight:800; line-height:140%; letter-spacing: -2px;}
.visual .text-area .txt {margin-top:60px; font-size:32px; font-weight:500; line-height:140%; letter-spacing: -1px;}
.visual {background: linear-gradient(120.65deg, #95D0FF 0%, #ECFFD5 76%, #FFFFFF 100%);}

.character-detail {padding:138px 100px; background:url(../img/bg_character-detail.png) no-repeat bottom center; background-size:cover;}
.character-detail .inner {display:flex; gap:45px; max-width:1500px; margin:0 auto;}
.character-detail .inner .left {flex-basis: 396px; flex-shrink: 0; text-align: center;}
.btn-kakao {margin-top:46px; color:#222; font-size:30px; font-weight:700; letter-spacing: -1px; background-color:#F7E317; border-radius: 100px; height:88px; width:100%;}
.btn-kakao::before {content:''; margin-right:10px; vertical-align: middle; display:inline-block; width:48px; height:48px; background:url(../img/icon-kakao.png) no-repeat; background-size: contain;}
.character-detail .right {flex:1;}
.character-detail .txt-top {text-align: center;}
.character-detail .txt-top .txt1 {margin-top:10px; margin-bottom:16px; color:#222; font-size:28px; font-weight:600;}
.character-detail .txt-top .txt1 strong {font-size:56px; font-weight: 700; display: block;}
.character-detail .txt-top .txt2 { font-size:28px; font-weight:500;}
.character-detail .txt-bottom {margin-top:83px;}
.character-detail .txt-bottom .txt {color:#FF9900; font-size:36px; font-weight: 800; margin-top:30px; text-align: center; letter-spacing:-1px;}
.character-detail .txt-bottom .disc {color:#222; margin-top:30px; font-size:24px; font-weight:500; text-align: center;}
.character-detail .txt-bottom .disc p  {text-align: center;} 
.character-detail .txt-bottom .disc p::before {content:''; vertical-align: middle; margin-right:12px; display: inline-block; width:8px; height:8px; background: #222; border-radius: 50%;}
.character-detail .txt-bottom .disc p + p {margin-top:10px;}
.rd-box { text-align: center; color:#fff; font-size:38px; font-weight:700; line-height:80px; height:80px;border-radius: 24px; background-color:#FFC400;}


.gallery {background-color: #fff; padding:140px 20px;}
.gallery .inner {max-width:1540px; margin:0 auto;}
.gallery .tit {font-size:160px; font-weight:800; color:#222; line-height:140%; letter-spacing:-3px;}
.gallery .inner ul {margin-top:80px; gap:20px; display: flex; flex-wrap: wrap;}
.gallery .inner ul > li {flex-basis:calc(33.3% - 14px);}
.gallery .inner ul > li img {width:100%;}
.btn-more {margin-top:30px; display:block; color:#222; font-size:36px; font-weight:700; letter-spacing: -1px; width:100%; height:130px; background-color:#F7F8F9; border-radius: 24px;}
.btn-more::after {content:''; margin-left:10px; vertical-align: middle; display:inline-block; width:48px; height:48px; background:url(../img/btn-more.png) no-repeat; background-size: contain;}

.wrap .footer {padding:25px; height:65px; background-color:#000; text-align:center; color:#fff; font-size:14px;}
.wrap .footer p {line-height:100%;}

@media all and (max-width:1540px){
    .video-wrap {}
    .video-wrap > div { padding-bottom:56.25%; height:0; overflow:hidden; }
    .video-wrap > div iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
}



@media all and (max-width:767px){
    .header .inner {height:64px; padding:0 20px; }
    .header-btns {gap:10px; }
    .header-btns > a img {width:24px; height:24px;}



    .intro {padding-bottom:60px;}
	.intro-text {padding:60px 20px 0; }
    .intro-text .tit {font-size:28px; }
    .intro-text .txt {margin-top:20px; font-size:16px;}

    .character {width:auto; margin:40px 20px 0; display:flex; flex-wrap: wrap; gap:15px;}
    .character > li {flex-shrink:0; width:calc(50% - 8px); color:#222; text-align: center;}
    .character > li img {margin-bottom:4px; width:100%;}
    .character .txt {font-size:14px;}
    .character .name {margin-top:4px; font-size:18px;}

    .character-detail {padding:60px 20px;}
    .character-detail .inner {display:block;}
    .character-detail .inner .left img {max-width:100%;}

    .btn-kakao {margin-top:26px; font-size:20px; height:60px;}
    .btn-kakao::before {margin-right:7px; width:21px; height:21px; }
    .character-detail .right {margin-top:23px;}
    .character-detail .txt-top {text-align: center;}
    .character-detail .txt-top img {width:108px; height:90px;}
    .character-detail .txt-top .txt1 {margin-top:10px; margin-bottom:16px;  font-size:14px; }
    .character-detail .txt-top .txt1 strong {font-size:28px;}
    .character-detail .txt-top .txt2 { font-size:15px;}
    .character-detail .txt-bottom {margin-top:30px;}
    .character-detail .txt-bottom .txt {color:#FF9900; font-size:24px;  margin-top:20px; letter-spacing:-1px;}
    .character-detail .txt-bottom .disc {color:#222; margin-top:26px; font-size:14px;}
    .character-detail .txt-bottom .disc p  {text-align: center;} 
    .character-detail .txt-bottom .disc p::before {margin-right:6px;  width:4px; height:4px; }
    .character-detail .txt-bottom .disc p + p {margin-top:10px;}
    .rd-box { font-size:20px; line-height:52px; height:52px;border-radius:12px; }

    .visual {padding:60px 20px;}
    .visual > .inner img {width:100%;}
    .visual .text-area {margin-top:40px; }
    .visual .text-area .tit {font-size:28px;letter-spacing: -1px;}
    .visual .text-area .txt {margin-top:20px; font-size:16px; letter-spacing: -1px;}

    .gallery { padding:60px 20px;}
    .gallery .tit {font-size:32px; letter-spacing:-1px;}
    .gallery .inner ul {margin-top:20px; gap:10px; display: flex; flex-wrap: wrap;}
    .gallery .inner ul > li {flex-basis:calc(33.3% - 7px);}
    .gallery .inner ul > li img {width:100%;}
    .btn-more {margin-top:16px; display:block; font-size:18px; height:57px;border-radius: 12px;}
    .btn-more::after {margin-left:10px; vertical-align: middle; display:inline-block; width:24px; height:24px;}

    .wrap .footer {padding:25px; height:65px; background-color:#000; text-align:center; color:#fff; font-size:14px;}
    .wrap .footer p {line-height:100%;}


    .hide-m {display:none;}

}