@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */

#header{opacity:0; visibility:hidden; animation:mainHeader .5s 3s both;}
#footer{opacity:0; visibility:hidden; height:0; animation:mainFooter .5s 3s both; overflow:hidden;}
.fixed{opacity:0; visibility:hidden; animation:fixedShow .5s 3s both;}
@keyframes mainHeader{
    100%{opacity:1; visibility:visible;}
}
@keyframes mainFooter{
    100%{opacity:1; visibility:visible; height:auto; overflow:visible;}
}
@keyframes fixedShow{
    100%{opacity:1; visibility:visible;}
}

 
/* main visual */
[data-mainVisual]{position:relative; height:100vh; overflow:hidden;}
[data-mainVisual] .videoWrap{position:relative; height:calc(100% - 40rem); overflow:hidden; border-bottom-left-radius:50% 160rem; border-bottom-right-radius:50% 160rem;}
[data-mainVisual] .videoWrap .txt{position:relative; top:13%; text-align:center; z-index:1; animation:maintxt 1s 2.5s both;}
[data-mainVisual] .videoWrap .txt h3{font-size:40rem; color:var(--color-point); line-height:1; animation:maintxtH3 1s 2.5s both;}
[data-mainVisual] .videoWrap .txt h2{margin-top:35rem; font-size:90rem; color:#111; line-height:1; font-weight:900; animation:maintxtH2 1s 2.5s both;}
[data-mainVisual] .videoWrap span{display:block; position:absolute; left:50%; top:65%; transform:translate(-50%,-50%); width:100%; z-index:10; text-align:center; color:#aaa; font-size:11vw; opacity:.1; text-transform:uppercase; font-family:var(--font-pop); font-weight:900; line-height:1; animation:mainBigtxt 1s 2.5s both;}
[data-mainVisual] .videoWrap video{display:block; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; clip-path:circle(5% at 50% 60%); animation:mainVideo 4s both;}
[data-mainVisual] .scrl{display:flex; align-items:center; justify-content:center; position:absolute; bottom:15rem; left:50%; transform:translateX(-50%); width:150rem; aspect-ratio:1/1; opacity:0; visibility:hidden; animation:scrlShow 1s 3s both;}
[data-mainVisual] .scrl img.txt{display:block; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; animation:scrlRotate 10s linear infinite;}
[data-mainVisual] .scrl img.arrow{display:block; width:27rem;}
@keyframes mainVideo{
    0%{clip-path:circle(5% at 50% 60%);}
    15%{clip-path:circle(15% at 20% 60%);}
    30%{clip-path:circle(10% at 80% 60%);}
    55%{clip-path:circle(5% at 50% 60%);}
    100%{clip-path:circle(100% at 50% 50%);}
}
@keyframes mainBigtxt{
    100%{opacity:0;}
}
@keyframes maintxt{
    100%{top:37%;}
}
@keyframes maintxtH3{
    100%{text-shadow:0 0 20rem rgba(0,0,0,.6); font-size:30rem;}
}
@keyframes maintxtH2{
    100%{color:#fff; text-shadow:0 0 20rem rgba(0,0,0,.6); font-size:75rem;}
}
@keyframes scrlShow{
    100%{opacity:1; visibility:visible;}
}
@keyframes scrlRotate{
    100%{transform:rotate(360deg);}
}

@media(max-width:768px){
    [data-mainVisual] .videoWrap{border-bottom-left-radius:50% 120rem; border-bottom-right-radius:50% 110rem;}
    [data-mainVisual] .videoWrap .txt h3{font-size:30rem;}
    [data-mainVisual] .videoWrap .txt h2{margin-top:25rem; font-size:70rem;}
    [data-mainVisual] .scrl{width:120rem;}
    [data-mainVisual] .scrl img.arrow{width:20rem;}
    @keyframes maintxtH3{
        100%{text-shadow:0 0 20rem rgba(0,0,0,.6); font-size:25rem;}
    }
    @keyframes maintxtH2{
        100%{color:#fff; text-shadow:0 0 20rem rgba(0,0,0,.6); font-size:60rem;}
    }
}
@media(max-width:480px){
    [data-mainVisual] .videoWrap{border-bottom-left-radius:50% 80rem; border-bottom-right-radius:50% 80rem;}
    [data-mainVisual] .videoWrap .txt h3{font-size:20rem;}
    [data-mainVisual] .videoWrap .txt h2{margin-top:20rem; font-size:40rem;}
    [data-mainVisual] .scrl{width:90rem;}
    [data-mainVisual] .scrl img.arrow{width:16rem;}
    @keyframes maintxtH3{
        100%{text-shadow:0 0 20rem rgba(0,0,0,.6); font-size:18rem;}
    }
    @keyframes maintxtH2{
        100%{color:#fff; text-shadow:0 0 20rem rgba(0,0,0,.6); font-size:35rem;}
    }
}


/* main common */
:root{
    --fs60:60rem;
    --fs55:55rem;
    --fs50:50rem;
    --fs45:45rem;
    --fs40:40rem;
    --fs35:35rem;
    --fs30:30rem;
    --fs28:28rem;
    --fs25:25rem;
    --fs22:22rem;
    --fs20:20rem;
    --fs18:18rem;
    --fs16:16rem;
    --fs15:15rem;
    --fs14:14rem;
    
    --p140:140rem;
    --p120:120rem;
    
    @media(max-width:1024px){
        --fs60:55rem;
        --fs55:50rem;
        --fs50:45rem;
        --fs45:40rem;
        --fs40:35rem;
        --fs35:32rem;
        
        --p140:120rem;
        --p120:100rem;
    }
    @media(max-width:768px){
        --fs60:50rem;
        --fs55:45rem;
        --fs50:40rem;
        --fs45:35rem;
        --fs40:32rem;
        --fs35:30rem;
        --fs30:26rem;
        --fs28:25rem;
        --fs25:23rem;
        --fs22:21rem;
        
        --p140:90rem;
        --p120:80rem;
    }
    @media(max-width:480px){
        --fs60:35rem;
        --fs55:35rem;
        --fs50:32rem;
        --fs45:28rem;
        --fs40:26rem;
        --fs35:24rem;
        --fs30:22rem;
        --fs28:20rem;
        --fs25:19rem;
        --fs22:18rem;
        --fs20:16rem;
        --fs18:15rem;
        --fs16:14rem;
        --fs15:13rem;
        --fs14:12rem;
        
        --p140:70rem;
        --p120:70rem;
    }
}

#container{animation:containerShow .5s 3s both; height:0; opacity:0; visibility:hidden; overflow:hidden;}
@keyframes containerShow{
    100%{opacity:1; height:auto; visibility:visible; overflow:visible;}
}

/*
body{overflow:hidden; animation:bodyShow 10s both;}
@keyframes bodyShow{
    100%{overflow:visible;}
}
*/

main{overflow:hidden;}
main *{box-sizing:border-box; word-break:keep-all;}
section{position:relative;}

.mainTit_wrap{margin-bottom:55rem;}
h2.mainTit{font-size:var(--fs40); color:#010101; line-height:1;}
h2.mainTit em{display:block; margin-bottom:20rem; color:var(--color-point); font-family:var(--font-pop); font-weight:600; font-size:var(--fs18);}

a.mainBtn_more{display:flex; align-items:center; justify-content:center; width:180rem; height:70rem; border-radius:35rem; font-weight:bold; font-size:var(--fs16); font-family:var(--font-pop); color:#fff; background:var(--color-point);}
a.mainBtn_more i{display:block; margin-left:10rem; font-size:var(--fs18);}
a.mainBtn_more.w{color:var(--color-point); background:#fff;}
a.mainBtn_more.st2{width:auto; height:auto; border-radius:0; color:#999; background:none; opacity:.7;}

.mainSwiper-ctrl{display:flex; gap:10rem;}
.mainSwiper-ctrl > div{display:flex; position:relative; left:auto; top:auto; right:auto; bottom:auto; margin:0; width:70rem; height:auto; aspect-ratio:1/1; border-radius:50%; background:#fff;}
.mainSwiper-ctrl > div:after{display:none;}
.mainSwiper-ctrl > div i{display:block; width:13rem; aspect-ratio:1/1; border-top:3rem solid var(--color-point); border-right:3rem solid var(--color-point);}
.mainSwiper-ctrl .swiper-button-prev i{margin-left:3rem; transform:rotate(-135deg);}
.mainSwiper-ctrl .swiper-button-next i{margin-right:3rem; transform:rotate(45deg);}

@media(max-width:1024px){
    .mainTit_wrap{margin-bottom:40rem;}
    
    a.mainBtn_more{width:160rem; height:60rem;}
    .mainSwiper-ctrl > div{width:60rem;}
    .mainSwiper-ctrl > div i{width:11rem;}
}
@media(max-width:768px){
    .mainTit_wrap{margin-bottom:30rem;}
    
    a.mainBtn_more{height:50rem;}
    .mainSwiper-ctrl > div{width:50rem;}
    .mainSwiper-ctrl > div i{width:9rem;}
}
@media(max-width:480px){
    h2.mainTit em{margin-bottom:13rem; font-size:14rem;}
    
    a.mainBtn_more{width:140rem; height:44rem;}
    a.mainBtn_more i{margin-left:7rem;}
    .mainSwiper-ctrl > div{width:45rem;}
    .mainSwiper-ctrl > div i{width:8rem;}
}



/* quick */
.quick{padding-top:var(--p120); z-index:1;}
.quickList{display:flex; justify-content:space-evenly;}
.quickList li:nth-child(2){transition-delay:.1s;}
.quickList li:nth-child(3){transition-delay:.2s;}
.quickList li:nth-child(4){transition-delay:.3s;}
.quickList span{display:flex; justify-content:center; align-items:center; margin-bottom:25rem; width:200rem; aspect-ratio:1/1; border-radius:50%; background:#f7f7f7; border:3rem solid #f7f7f7; transition:.3s ease;}
.quickList span img{height:65rem;}
.quickList em{display:block; font-size:var(--fs25); font-weight:bold; color:#111; text-align:center; line-height:1; transition:.3s ease;}
.quickInfo{display:flex; align-items:center; margin-top:60rem; padding:0 80rem; height:180rem; border-radius:15rem; background:url('/images/main/viewInfo_bg.jpg')no-repeat center/cover;}
.quickInfo h2{display:flex; align-items:center; width:270rem; font-size:var(--fs40); color:#fff;}
.quickInfo h2 img{display:block; margin-right:15rem; width:40rem;}
.quickInfo ul{padding-right:40rem; width:calc(100% - (270rem + 180rem));}
.quickInfo ul li{display:flex; font-size:var(--fs18); color:#fff;}
.quickInfo ul li+li{margin-top:15rem;}
.quickInfo ul span{display:flex; justify-content:center; align-items:center; font-weight:bold; line-height:1; width:92rem; height:34rem; border-radius:5rem; background:rgba(81,25,0,.3);}
.quickInfo ul p{margin-top:6rem; padding-left:20rem; font-weight:500; width:calc(100% - 92rem); line-height:1.5;}
@media(hover:hover){
    .quickList a:hover span{background:#fff; border-color:var(--color-point); box-shadow:20rem 20rem 50rem rgba(243,135,88,.25);}
    .quickList a:hover em{color:var(--color-point);}
}
@media(max-width:1024px){
    .quickList span{width:160rem;}
    .quickList span img{height:50rem;}
    .quickList em{font-size:var(--fs20);}
    .quickInfo{flex-wrap:wrap; align-items:flex-end; padding:40rem; height:auto;}
    .quickInfo h2{margin-bottom:30rem; width:100%; font-size:var(--fs30);}
    .quickInfo h2 img{width:30rem;}
    .quickInfo ul{width:calc(100% - 160rem);}
}
@media(max-width:768px){
    .quickList span{margin-bottom:20rem; width:120rem;}
    .quickList span img{height:40rem;}
    .quickInfo{margin-top:40rem; padding:30rem 20rem;}
    .quickInfo h2{margin-bottom:25rem;}
    .quickInfo h2 img{margin-right:10rem; width:23rem;}
}
@media(max-width:480px){
    .quickList{flex-wrap:wrap; margin:auto; width:90%;}
    .quickList li{width:50%;}
    .quickList li:nth-child(n+3){margin-top:30rem;}
    .quickList span{margin:0 auto 15rem;}
    .quickInfo{display:block; background-position:72% center; border-radius:10rem;}
    .quickInfo h2{margin-bottom:25rem; width:100%; font-size:var(--fs30);}
    .quickInfo h2 img{width:20rem;}
    .quickInfo ul{padding-right:0; width:100%;}
    .quickInfo ul span{width:70rem; height:30rem;}
    .quickInfo ul p{margin-top:4rem; padding-left:10rem; width:calc(100% - 70rem);}
    .quickInfo a.mainBtn_more{margin:30rem 0 0 auto;}
}


/* exhibition */
.exhibition{margin-top:-90rem; padding:calc(var(--p120) + 90rem) 0 var(--p120); background:#f9f5ef;}
.exhibition .inr{display:flex; align-items:center; position:initial; z-index:1;}
.exhibition .mainTit_wrap{display:flex; justify-content:center; flex-direction:column; position:relative; margin-bottom:0; height:600rem; width:290rem; z-index:2;}
.exhibition .mainSwiper-ctrl{margin-top:110rem;}
.exhibition .swiper{position:absolute; right:0; top:calc(var(--p120) + 90rem); width:calc(90% - 290rem);}
.exhibition .swiper .txt{position:absolute; left:0; top:60%; transform:translateY(-50%); padding:60rem 10rem; background:#fff; border:5rem solid var(--color-point); border-radius:15rem; width:500rem; text-align:center; z-index:1; opacity:0; visibility:hidden; transition:.5s ease;}
.exhibition .swiper-slide-active .txt{top:50%; opacity:1; visibility:visible;}
.exhibition .swiper .txt span{display:block; font-size:var(--fs18); color:#aaa; font-weight:bold; line-height:1;}
.exhibition .swiper .txt em{display:block; margin:10rem 0 45rem; font-size:var(--fs30); color:#111; font-weight:bold; line-height:1.4;}
.exhibition .swiper .txt a{margin:auto;}
.exhibition .swiper .img{position:relative; margin-left:auto; width:calc(100% - 200rem); height:600rem; border-top-left-radius:300rem; border-bottom-left-radius:300rem; overflow:hidden;}
.exhibition .swiper .img:before{content:''; display:block; position:absolute; left:0; top:0; width:30%; height:100%; background:linear-gradient(to right,var(--color-point),rgba(243,135,88,0));}
.exhibition .swiper .img img{display:block; width:100%; height:100%; object-fit:cover;}
.exhibition .obj{display:block; position:absolute; left:-90rem; bottom:40rem; width:870rem; opacity:.06;}
@media(min-width:1921px){
    .exhibition .swiper{width:calc(85% - 290rem);}
}
@media(max-width:1500px){
    .exhibition .mainTit_wrap{width:250rem;}
    .exhibition .swiper{width:calc(96% - 250rem);}
}
@media(max-width:1024px){
    .exhibition .inr{display:block; height:510rem;}
    .exhibition .mainTit_wrap{flex-direction:row; justify-content:space-between; width:100%; height:auto;}
    .exhibition .mainSwiper-ctrl{position:absolute; bottom:-10rem; right:0;}
    .exhibition .swiper{top:auto; bottom:var(--p120); width:96%;}
    .exhibition .swiper .txt{padding:40rem 10rem; width:400rem;}
    .exhibition .swiper .txt em{margin-bottom:35rem;}
    .exhibition .swiper .img{height:400rem;}
    .exhibition .obj{width:70%;}
}
@media(max-width:768px){
    .exhibition .inr{height:450rem;}
    .exhibition .mainSwiper-ctrl{bottom:-5rem;}
    .exhibition .swiper .txt{width:350rem;}
    .exhibition .swiper .img{width:calc(100% - 100rem); height:350rem;}
}
@media(max-width:480px){
    .exhibition .inr{height:auto;}
    .exhibition .mainTit_wrap{margin-bottom:30rem;}
    .exhibition .swiper{position:relative; bottom:auto; width:100%;}
    .exhibition .swiper-slide{display:flex; flex-direction:column-reverse;}
    .exhibition .swiper .txt{position:relative; padding:30rem 10rem 20rem; top:auto; transform:none; width:100%; border-radius:0 0 10rem 10rem; opacity:1; visibility:visible;}
    .exhibition .swiper .txt em{margin-bottom:25rem; font-size:var(--fs28);}
    .exhibition .swiper .img{width:100%; height:auto; aspect-ratio:1/1; border-radius:50% 50% 0 0;}
    .exhibition .swiper .img:before{top:auto; bottom:0; width:100%; height:30%; background:linear-gradient(to top,var(--color-point),rgba(243,135,88,0));}
    .exhibition .swiper .img_slide2 img{object-position:left;}
    .exhibition .obj{display:none;}
}


/* boardWrap */
.boardWrap{padding:var(--p120) 0;}
.boardWrap .inr{display:flex;}
.boardWrap .mainTit_wrap{display:flex; align-items:flex-end; justify-content:space-between;}
.boardWrap .event{position:relative; padding-right:160rem; width:44%; z-index:3;}
.boardWrap .event:after{content:''; display:block; position:absolute; right:80rem; top:0; width:1px; height:100%; background:#ddd;}
.boardWrap .event:before{content:''; display:block; position:absolute; right:0; width:100vw; height:100%; background:#fff;}
.boardWrap .event > div{position:relative; z-index:2;}
.boardWrap .eventSwiper a{display:block; position:relative; padding-bottom:35rem; height:calc(100% + 35rem); border-radius:15rem; overflow:hidden; background:var(--color-navy);}
.boardWrap .eventSwiper .thumb{display:block; width:100%; aspect-ratio:1/1;}
.boardWrap .eventSwiper .thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.boardWrap .eventSwiper .txt{position:absolute; bottom:35rem; left:0; padding:0 40rem; width:100%; background:var(--color-navy);}
.boardWrap .eventSwiper .txt img{position:absolute; left:0; top:-100rem; width:100%; height:100rem; object-fit:contain; object-position:bottom;}
.boardWrap .eventSwiper .txt span{display:block; margin-bottom:15rem; font-size:var(--fs16); font-family:var(--font-pop); font-weight:500; color:#fff; opacity:.6; line-height:1;}
.boardWrap .eventSwiper .txt em{display:block; font-size:var(--fs25); font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1;}
.boardWrap .eventSwiper .ctrl{display:flex; justify-content:center; align-items:center; gap:20rem; margin-top:20rem;}
.boardWrap .eventSwiper .ctrl .arrow{position:relative; left:auto; top:auto; right:auto; bottom:auto; margin:0; width:20rem; height:auto; aspect-ratio:1/1;}
.boardWrap .eventSwiper .ctrl .arrow:after{display:none;}
.boardWrap .eventSwiper .ctrl .arrow i{display:block; width:11rem; aspect-ratio:1/1; border-top:3rem solid var(--color-navy); border-right:3rem solid var(--color-navy);}
.boardWrap .eventSwiper .swiper-button-prev i{margin-left:3rem; transform:rotate(-135deg);}
.boardWrap .eventSwiper .swiper-button-next i{margin-right:3rem; transform:rotate(45deg);}
.boardWrap .eventSwiper .swiper-pagination{position:relative; bottom:auto; top:auto; width:auto;}
.boardWrap .eventSwiper .swiper-pagination-bullet{margin:0 4rem; width:8rem; height:8rem; border-radius:4rem; opacity:.15; background:var(--color-navy);}
.boardWrap .eventSwiper .swiper-pagination-bullet-active{background:var(--color-navy); opacity:1; width:30rem;}
.boardWrap .eventSwiper .swiper-wrapper{counter-reset:title;}
.boardWrap .eventSwiper .txt span:after{counter-increment:title; content:counters(title, ".", decimal-leading-zero)"";}
.boardWrap .news{width:56%;}
.boardWrap .newsSwiper{overflow:visible;}
.boardWrap .newsSwiper .thumb{display:block; width:100%; aspect-ratio:1/1; border-radius:15rem; overflow:hidden;}
.boardWrap .newsSwiper .thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.boardWrap .newsSwiper .txt{margin-top:30rem; padding:0 10rem;}
.boardWrap .newsSwiper .txt em{display:block; margin-bottom:20rem; font-size:var(--fs20); font-weight:500; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1;}
.boardWrap .newsSwiper .txt i{display:block; font-size:var(--fs14); color:#aaa; line-height:1;}
.boardWrap .newsSwiper .swiper-scrollbar{position:relative; margin-top:50rem; left:auto; bottom:auto; top:auto; height:6rem; border-radius:3rem; width:100%; background:rgba(13,54,90,.08)}
.boardWrap .newsSwiper .swiper-scrollbar-drag{background:var(--color-navy);}
.ko_board_noData{border-width:0; color:#aaa;}
@media(max-width:1024px){
    .boardWrap .event{padding-right:80rem;}
    .boardWrap .event:after{right:40rem;}
    .boardWrap .eventSwiper .txt{padding:0 20rem;}
    .boardWrap .eventSwiper .txt em{font-size:var(--fs20);}
/*    .boardWrap .newsSwiper .swiper-scrollbar{margin-top:35rem;}*/
}
@media(max-width:768px){
    .boardWrap .inr{display:block;}
    .boardWrap .event{padding-right:0; width:100%;}
    .boardWrap .event:before,
    .boardWrap .event:after{display:none;}
    .boardWrap .eventSwiper{overflow:visible;}
    .boardWrap .eventSwiper .txt em{font-size:var(--fs22);}
    .boardWrap .news{padding-top:var(--p120); width:100%;}
    .boardWrap .newsSwiper .swiper-scrollbar{display:none;}
}
@media(max-width:480px){
    .boardWrap .eventSwiper a{padding-bottom:30rem; height:calc(100% + 30rem); border-radius:10rem;}
    .boardWrap .eventSwiper .txt{bottom:30rem;}
    .boardWrap .newsSwiper .thumb{border-radius:10rem;}
    .boardWrap .newsSwiper .txt{margin-top:20rem;}
    .boardWrap .newsSwiper .txt em{margin-bottom:15rem; font-size:var(--fs18);}
}


/* partner */
.partner{padding:var(--p120) 0; background:url('/images/main/partnership_bg.jpg')no-repeat center top/cover;}
.partner:before{content:''; display:block; position:absolute; left:0; bottom:0; width:100%; height:50%; background:linear-gradient(to top,#fff,rgba(255,255,255,0));}
.partner .inr{z-index:1;}
.partner .mainTit_wrap{position:relative;}
.partner .mainSwiper-ctrl{position:absolute; right:0; bottom:-15rem;}
.partner .mainSwiper-ctrl .swiper-button-disabled{opacity:1;}
.partner .mainSwiper-ctrl .swiper-button-disabled i{border-color:#ddd;}
.partner .mainSwiper-ctrl .mainBtn_more{margin-left:20rem;}
.partnerSwiper{overflow:visible;}
.partnerSwiper a{display:block; position:relative;}
.partnerSwiper .thumb{display:block; position:relative; width:100%; padding-top:100%; overflow:hidden; border-radius:15rem;}
.partnerSwiper .thumb img{display:block; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.partnerSwiper em{display:block; margin-top:25rem; padding:0 10rem; font-size:var(--fs18); color:#222; font-weight:500; line-height:1.5; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
@media(max-width:1024px){
    .partner .mainSwiper-ctrl{bottom:-10rem;}
    .partner .mainSwiper-ctrl .mainBtn_more{margin-left:10rem;}
}
@media(max-width:768px){
    .partner .mainSwiper-ctrl{bottom:-5rem;}
    .partner .swiper-button-prev,
    .partner .swiper-button-next{display:none;}
}
@media(max-width:480px){
    .partner{background-position:80% center;}
    .partnerSwiper .thumb{border-radius:10rem;}
    .partnerSwiper em{margin-top:20rem; font-size:var(--fs18);}
}


/* guide */
.guide{padding-bottom:var(--p120);}
.guideBanner{position:relative; margin-top:80rem; padding:60rem 80rem 50rem; width:100%; border-radius:15rem; background:url('/images/main/moGuide_bg.jpg')no-repeat center/cover;}
.guideBanner .txt{position:relative; z-index:1;}
.guideBanner .txt h2{font-size:var(--fs50); color:#fff; line-height:1;}
.guideBanner .txt h2 span{display:inline-block;}
.guideBanner .txt h2 span:before{content:''; display:block; margin:0 auto 10rem; width:8rem; aspect-ratio:1/1; background:#fff; border-radius:50%;}
.guideBanner .txt h3{margin-top:15rem; font-size:var(--fs35); font-weight:500; color:#fff; line-height:1.5;}
.guideBanner .txt h3 b{font-weight:bold;}
.guideBanner .txt .btnWrap{display:flex; gap:15rem; margin-top:40rem;}
.guideBanner .txt .btnWrap a{display:flex; justify-content:center; align-items:center; width:180rem; height:60rem; border-radius:10rem; font-size:var(--fs20); font-family:var(--font-pop); font-weight:500; color:#111; background:#fff; line-height:1;}
.guideBanner .txt .btnWrap a em{display:block; margin-top:4rem; margin-left:10rem;}
.guideBanner .txt .btn_ios img{display:block; width:20rem;}
.guideBanner .txt .btn_and img{display:block; width:21rem;}
.guideBanner .img{display:block; position:absolute; right:9%; bottom:0; height:calc(100% + 80rem);}
@media(max-width:1024px){
    .guideBanner{margin-top:40rem; padding:50rem 40rem 40rem;}
    .guideBanner .txt h2{font-size:var(--fs45);}
    .guideBanner .txt h2 span:before{width:7rem;}
    .guideBanner .txt h3{font-size:var(--fs30);}
    .guideBanner .img{right:15rem; height:calc(100% + 40rem);}
}
@media(max-width:768px){
    .guideBanner{margin-top:20rem; padding:35rem 30rem 30rem;}
    .guideBanner .txt .btnWrap{gap:10rem; margin-top:30rem;}
    .guideBanner .txt .btnWrap a{width:160rem; height:55rem;}
    .guideBanner .img{height:calc(100% + 20rem);}
}
@media(max-width:480px){
    .guideBanner{margin-top:0; padding:30rem 20rem 0; background-position:11% center;}
    .guideBanner .txt h2 span:before{margin-bottom:8rem; width:5rem;}
    .guideBanner .txt h3{margin-top:10rem; font-size:18rem;}
    .guideBanner .txt .btnWrap a{font-size:var(--fs18); width:120rem; height:42rem; border-radius:5rem;}
    .guideBanner .txt .btnWrap a em{margin-left:6rem;}
    .guideBanner .txt .btn_ios img{width:15rem;}
    .guideBanner .txt .btn_and img{width:17rem;}
    .guideBanner .img{position:relative; margin-top:50rem; width:100%; height:auto;}
}