@charset "utf-8";

/*공통*/
#page_area .tit_box{margin-bottom:5rem;text-align:center}
#page_area .tit_box .s_tit{margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-color);font-family:'Play'}
#page_area .tit_box .tit{font-size:5.5rem;font-weight:700;color:#fff;font-family:'Play', 'Pretendard'}
#page_area .tit_box .txt{margin-top:1rem;font-size: 1.8rem;line-height: 150%;color:rgba(255,255,255,.6) }
#way_wrapper.w_page #page_area .tit_box .tit{color:#000}




/*---게임 페이지 공통---*/
#page_area.game_page .tit_box{margin-bottom:8rem}

/*게임 대표이미지*/
.main_img_box{max-width:172rem;width:calc(100% - 4rem);height:70rem;margin:0 auto;border-radius:3rem;position:relative;opacity:0;transition:opacity 1s}
.main_img_box.active{opacity:1}
.main_img_box.img01{background:url(/way_page/img/game01_img01.jpg) no-repeat center/cover}
.main_img_box.img02{background:url(/way_page/img/game02_img01.jpg) no-repeat center/cover}
.main_img_box .img_inner{max-width:154rem;width:100%;height:100%;position:relative}

.icon_box_area{width:28rem;border-radius:3rem;padding:3rem;background:rgba(22,49,68,.9);position:absolute;right:2rem;bottom:-3rem;opacity:0;transition:opacity 1.5s, bottom 1s;display:flex;flex-wrap:wrap;gap:4%;backdrop-filter:blur(2px)}
.icon_box_area.active{opacity:1;bottom:2rem}
.icon_box_area li{width:30.6%;text-align:center}
.icon_box_area li a{display:block;width:100%}
.icon_box_area li .icon_box{width:100%;padding-bottom:100%;margin-bottom:1rem;border-radius:2rem;background:rgba(255,255,255,.1);overflow:hidden;position:relative;transition:all .3s}
.icon_box_area li .icon_inner{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.icon_box_area li .icon_inner:before{content:'';width:0;height:0;border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .8s}
.icon_box_area li .icon_inner img{max-width:45%;width:auto;position:relative;z-index:2}
.icon_box_area li.icon03 .icon_inner img{max-width:65%}
.icon_box_area li.icon01 .icon_inner:before{background:#df0011}
.icon_box_area li.icon02 .icon_inner:before{background:#115b8b}
.icon_box_area li.icon03 .icon_inner:before{background:#f4421f}

.icon_box_area li.deactivate{opacity:.3; pointer-events: none;}
.icon_box_area li .tit{font-size:12px;font-weight:700;color:rgba(255,255,255,.7);transition:all .5s;font-family:'Play'}
.icon_box_area li:hover .icon_inner:before{width:200%;height:200%}
.icon_box_area li:hover .tit{color:#fff}

.icon_box_area_2way{width:22rem}
.icon_box_area_2way li{width:48%}


/*게임 내용영역*/
.game_page_inner{max-width:154rem;width:100%;margin:0 auto;padding:13rem 2rem 0}
.game_page .game_cont_area{}
.game_cont_area .cont_box{width:100%;align-items:center;display:flex;flex-wrap:wrap}
.game_cont_area .cont_box + .cont_box{margin-top:10rem;padding-top:10rem;border-top:1px dashed rgba(255,255,255,.3)}

.game_cont_area .slide_img_box{width:70rem;position:relative}
.game_cont_area .slide_img_box .pt_img{width:17rem;position:absolute;z-index:10;animation:bounce 2s ease-in-out infinite}
.game_cont_area .slide_img_box .pt_img01{bottom:-4rem;left:-5rem;}

.game_cont_area .slide_img_box .pt_img02{width:30rem;position:absolute;bottom:-6rem;left:-18rem;z-index:10}

.game_cont_area .slide_img_box .page_slide{width:100%;height:100%;border-radius:3rem;overflow:hidden}
.game_cont_area .slide_img_box .swiper-slide img{width:100%}
.game_cont_area .slide_img_box .page_pagination{width:auto;padding:.5rem 1.5rem;border-radius:5rem;background:rgba(0,0,0,.5);position:absolute;bottom:2rem;left:auto;right:2rem;z-index:10}
.game_cont_area .slide_img_box .swiper-pagination-bullet{background:#fff;opacity:1}
.game_cont_area .slide_img_box .swiper-pagination-bullet-active{background:var(--pt-color)}
.game_cont_area .slide_img_box .img_box{width:100%;height:100%;border-radius:3rem;overflow:hidden}
.game_cont_area .slide_img_box .img_box img{width:100%}

.game_cont_area .txt_box{width:calc(100% - 70rem);padding-left:7rem}
.game_cont_area .txt_box .tit{margin-bottom:2.5rem;font-size:2.7rem;font-weight:700;color:#fff}
.game_cont_area .txt_box .txt{font-size:1.7rem;line-height:150%;color:rgba(255,255,255,.6)}
.game_cont_area .txt_box .txt p{word-break:keep-all}
.game_cont_area .txt_box .txt p + p{margin-top:1.5rem}

.game_cont_area .txt_box .txt_list{font-size:1.8rem;line-height:150%;color:rgba(255,255,255,.6)}
.game_cont_area .txt_box .txt_list li{margin-bottom:1.5rem;padding:0 0 1.5rem 1.5rem;border-bottom:1px dashed rgba(255,255,255,.2);word-break:break-all;position:relative;word-break:keep-all}
.game_cont_area .txt_box .txt_list li:before{content:'';width:3px;height:3px;border-radius:3px;background:#fff;position:absolute;top:1.2rem;left:0;font-family:'Play'}
.game_cont_area .txt_box .txt_list li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}

.game_cont_area .cont_box:nth-child(even){flex-direction:row-reverse;}
.game_cont_area .cont_box:nth-child(even) .txt_box{padding:0 7rem 0 0}

@keyframes bounce {0%{transform:translateY(0)}50% {transform:translateY(3rem)}100%{transform:translateY(0)}}

/*게임 영상*/
.game_page .video{width:100%;margin-top:15rem;padding:8rem 5rem;border-radius:3rem;text-align:center;background: url(/index/include/include02/bg.jpg) no-repeat bottom center #2e2e2e;}
.game_page .video .s_tit{margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-color);font-family:'Play';}
.game_page .video .tit{margin-bottom:3rem;font-size:4.5rem;font-weight:700;text-align:center;color:#fff;font-family:'Play'}
.game_page .video .video_img{width:100%;height:50rem;border-radius:3rem;overflow:hidden;position:relative}
.game_page .video .video_img01{background:url(/way_page/img/game01_video.jpg) no-repeat center/cover;}
.game_page .video .video_img02{background:url(/way_page/img/game02_video.jpg) no-repeat center/cover;}
.play_btn{width:14rem;height:9.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer}
.game_page .video .play_btn:before{content:'';width:100%;height:100%;border-radius:3rem;background:var(--pt-color);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.9;transition:all .3s}
.game_page .video .play_btn:hover:before{width:110%;height:110%;}
.game_page .video .play_btn img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}


.youtube_wrap{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:-9999;opacity:0;transition:all 1s}
.youtube_wrap.on{z-index:9999;opacity:1}
.youtube_wrap .youtube_wrap_bg{width:100%;height:100%;background:rgba(0,0,0,.7);position:absolute;left:0;top:0}
.youtube_wrap .youtube_area{max-width:120rem;width:90%;background:#000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}
.youtube_wrap .youtube_area .youtube_close_btn{position:absolute;right:0;top:-4.5rem;z-index:10;cursor:pointer}
.youtube_wrap .youtube_box{width:100%;padding-bottom:56.25%}
.youtube_wrap .youtube_box iframe{width:calc(100% - 4rem) !important;height:calc(100% - 4rem) !important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}




/*회사소개 - 회사소개영역*/
.about_page .cont_box + .cont_box{margin-top: 10rem;padding-top: 10rem;border-top:1px dashed rgba(255,255,255,.5)}
.about_page .about_cont{border-top:1px solid rgba(255,255,255,.8)}
.about_page .a_cont_box{padding-top: 10rem;display: flex;flex-wrap:wrap;align-items: flex-start}
.about_page .a_cont_box + .a_cont_box{margin-top:10rem;border-top:1px dashed rgba(255,255,255,.3)} 
.about_page .a_cont_box .cont_tit{width: 45rem;display:flex;flex-wrap:wrap;align-items:center;gap:2rem}
.about_page .a_cont_box .cont_tit .num{width:4.5rem;height:4.5rem;border-radius:4.5rem;background: var(--pt-color);font-size: 1.6rem;font-weight: 700;color: #fff;display:flex;align-items: center;justify-content: center;font-family: 'Play' }
.about_page .a_cont_box .cont_tit .txt{font-size:2.5rem;font-weight:700;color: #fff; }

.about_page .a_cont_box .cont_txt{width:calc(100% - 45rem);}
.about_page .a_cont_box .cont_txt li + li{margin-top: 5rem}
.about_page .a_cont_box .cont_txt li .txt_tit{margin-bottom: 1rem;font-size: 2.2rem;font-weight: 700;color: #fff}
.about_page .a_cont_box .cont_txt li .txt{font-size: 1.7rem;line-height: 150%;color: rgba(255,255,255,.6);word-break: keep-all}


.about_page .slide_img_area{margin-top: 10rem}
.about_page .about_slider{width: 100%;height:50rem;margin: 0 auto;border-radius: 3rem;overflow: hidden;position: relative}
.about_page .about_slider .swiper-slide img{width: 100%;height: 100%;object-fit: cover}
.about_page .about_slider .page_pagination{width:auto;padding:.5rem 1.5rem;border-radius:5rem;background:rgba(0,0,0,.5);position:absolute;bottom:2rem;left:auto;right:2rem;z-index:10}
.about_page .about_slider .swiper-pagination-bullet{background:#fff;opacity:1}
.about_page .about_slider .swiper-pagination-bullet-active{background:var(--pt-color)}

.about_page .slide_img_area .txt_box{margin-top:5rem;font-size: 1.7rem;line-height: 150%;color: rgba(255,255,255,.6); text-align: center;word-break: break-all} 
.about_page .slide_img_area .txt_box span{font-weight: 500;color: #fff;}
.about_page .slide_img_area .txt_box p + p{margin-top: 2rem}



/*회사소개 - 팀원소개영역*/
.about_page .meb_list{display:flex;flex-wrap:wrap;justify-content: center; gap:3rem 2%}
.about_page .meb_list li{width:32%;position:relative}
.about_page .meb_list li:before{content:'';width:100%;height:50%;background:linear-gradient(0deg,rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 100%);position:absolute;bottom:0;left:0;z-index:2}
.about_page .meb_list li .img_box{width:100%;border-radius:2rem;overflow:hidden;position:relative}
.about_page .meb_list li .img_box  img{width:100%}
.about_page .meb_list li .img_box .img02{width:100%;position:absolute;top:0;left:0;opacity:0;transition:opacity .5s}

.about_page .meb_list li:hover .img_box .img02{opacity:1}


.about_page .meb_list .m_txt_box{width:100%;padding:4rem;position:absolute;bottom: 0;left:0;z-index:3}
.about_page .meb_list .m_txt_box .tit{ display:flex;flex-wrap:wrap;align-items: flex-end;gap:.5rem 1rem}
.about_page .meb_list .m_txt_box .name{font-size:3rem;font-weight:700;color: #fff}
.about_page .meb_list .m_txt_box .t_txt{font-size: 1.5rem;font-weight: 700;color: rgba(255,255,255,.6);font-family: 'Play'}
.about_page .meb_list .m_txt_box .txt{margin-top:1rem;font-size: 1.5rem;line-height: 150%;color: rgba(255,255,255,.6);word-break: keep-all}


/*회사소개 - 오시는 길*/
.about_map{border-radius:3rem;filter:grayscale(1);transition:filter .3s }
.about_map:hover{filter:grayscale(0)}
.about_map, .about_map .wrap_map{width: 100% !important ;height: 50rem !important }
.about_map .cont{display:none}
.map_address{margin-top: 3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content: center;gap:1rem 2rem}
.map_address .icon_tit{font-size:1.7rem;font-weight: 700;color: #fff;display: flex;flex-wrap:wrap;align-items:center;gap:1rem;font-family:'Play';}
.map_address .icon_tit .icon{width: 4rem;height: 4rem;border-radius:4rem;background:var(--pt-color);display: flex;flex-wrap:wrap;align-items: center;justify-content: center}
.map_address .add{font-size:1.7rem;font-weight: 500;color: #fff;}



@media(max-width:1280px){
	#page_area .tit_box .tit{font-size:5.2rem}
	#page_area.game_page .tit_box{margin-bottom:5rem}
	
	/*게임 페이지*/
	.main_img_box{height:60rem}
	
	.game_page_inner{padding:9rem 2rem 0}
	.game_cont_area .slide_img_box{width:50rem}
	.game_cont_area .txt_box{width:calc(100% - 50rem);padding-left:5rem}
	.game_cont_area .cont_box:nth-child(even) .txt_box{padding:0 5rem 0 0}
	.game_cont_area .txt_box .tit{font-size:2.4rem}
	
	.game_page .video{margin-top:10rem}
	.game_page .video .tit{font-size:4.2rem}
	
	.game_cont_area .slide_img_box .pt_img02{width:28rem;left:-12rem}
	
	/*회사소개 - 회사소개 영역*/
	.about_page .a_cont_box .cont_tit{width:40rem}
	.about_page .a_cont_box .cont_txt{width:calc(100% - 40rem)}
	
	/*회사소개 - 팀원소개 영역*/
	.about_page .meb_list .m_txt_box{padding:3rem}
	.about_page .meb_list .m_txt_box .name{font-size:2.7rem}
	
}
@media(max-width:1024px){
	#page_area .tit_box .tit{font-size:4.9rem}
	
	
	/*게임페이지*/
	.game_page_inner{padding:8rem 2rem 0}
	.main_img_box{height:55rem}
	
	.game_cont_area .cont_box{max-width:80rem;margin:0 auto;flex-direction: column;justify-content:center}
	.game_cont_area .cont_box + .cont_box{margin-top:7rem;padding-top:7rem}
	
	.game_cont_area .slide_img_box{max-width:60rem;width:100%;margin:0 auto 5rem}
	.game_cont_area .slide_img_box .pt_img{width:13rem}
	.game_cont_area .txt_box{width:100%;padding:0;text-align:center}
	.game_cont_area .cont_box:nth-child(even) .txt_box{padding:0}
	
	.game_cont_area .txt_box .txt_list li{padding-left:0}
	.game_cont_area .txt_box .txt_list li:before{display:none}
	
	
	.game_page .video{padding:5rem 3rem}
	.game_page .video .tit{font-size:3.9rem}
	.game_page .video .video_img{height:40rem}
	.game_page .video .play_btn{width:11rem;height:7.5rem;}
	.game_page .video .play_btn:before{border-radius:2rem}
	.game_page .video .play_btn img{width:2.2rem}
	
	/*회사소개 - 회사소개 영역*/
	.about_page .cont_box + .cont_box{margin-top:8rem;padding-top: 8rem }
	.about_page .a_cont_box{padding-top:8rem}
	.about_page .a_cont_box + .a_cont_box{margin-top: 8rem;padding-top: 8rem }
	.about_page .a_cont_box .cont_tit{width: 100%;margin-bottom:3rem;flex-direction: column;gap:1rem}
	.about_page .a_cont_box .cont_txt{width: 100%;border-radius: 2rem;padding:5rem 3rem;background:#222;text-align: center}
	.about_page .a_cont_box .cont_txt li .txt_tit{font-size:1.9rem}
	.about_page .a_cont_box .cont_txt li + li{margin-top: 2rem;padding-top: 2rem;border-top:1px dashed rgba(255,255,255,.3)}
	
	.about_page .slide_img_area{margin-top:8rem}
	.about_page .about_slider{height: 45rem;}
	.about_page .slide_img_area .txt_box p br{display: none}
	
	/*회사소개 - 팀원소개 영역*/
	.about_page .meb_list{max-width:80rem;width: 100%;margin: 0 auto}
	.about_page .meb_list li{width:49%}
	.about_page .meb_list .m_txt_box .name{font-size:2.4rem}
	
	/*회사소개 - 오시는 길 영역*/
	.about_map, .about_map .wrap_map{height:40rem !important}
	
}
@media(max-width:767px){
	#page_area .tit_box{margin-bottom:3rem}
	#page_area .tit_box .tit{font-size:4.6rem}
	#page_area.game_page .tit_box{margin-bottom:3rem}
	
	
	/*게임페이지*/
	.game_page_inner{padding:7rem 2rem 0}
	.main_img_box{height:50rem}
	.main_img_box.img02 {background: url(/way_page/img/game02_img01_m.jpg) no-repeat center / cover;}
	.game_cont_area .cont_box + .cont_box{margin-top:5rem;padding-top:5rem}

	
	.game_page .video{margin-top:5rem;padding:3rem 2rem}
	.game_page .video .tit{margin-bottom:2rem;font-size:3.6rem}
	.game_page .video .video_img{height:35rem}
	
	.game_cont_area .slide_img_box .pt_img02{width:25rem;left:-10rem}
	
	/*회사소개 - 회사소개 영역*/
	.about_page .cont_box + .cont_box{margin-top:5rem;padding-top:5rem}
	.about_page .a_cont_box{padding-top:5rem}
	.about_page .a_cont_box + .a_cont_box{margin-top:5rem;padding-top: 5rem}
	.about_page .slide_img_area{margin-top: 5rem}
	.about_page .about_slider{height:35rem}
	
	
	/*회사소개 - 팀원소개 영역*/
	.about_page .meb_list li:before{display:none}
	.about_page .meb_list .m_txt_box{margin-top: 2rem;padding:0;position: unset }
	.about_page .meb_list .m_txt_box .tit{align-items: center;justify-content: center;flex-direction: column}
	.about_page .meb_list .m_txt_box .name{font-size:2.1rem}
	.about_page .meb_list .m_txt_box .txt{text-align: center}
	
	/*회사소개 - 오시는 길 영역*/
	.about_map, .about_map .wrap_map{height:35rem !important}
	.map_address{text-align: center}
	.map_address .icon_tit{width:100%;justify-content: center;flex-direction: column}
	
}
@media(max-width:480px){
	#page_area .tit_box .tit{font-size:4.3rem}
	
	/*게임페이지*/
	.game_page_inner{padding:6rem 2rem 0}
	.main_img_box{height:45rem}
	
	
	.icon_box_area{width:26rem;padding:2rem;bottom:0;right:auto;left:50%;transform:translateX(-50%)}
	.icon_box_area.active{bottom:1rem}
	
	.icon_box_area_2way{width:19rem}
	
	
	.game_cont_area .slide_img_box{margin-bottom:3rem}
	.game_cont_area .txt_box .tit{margin-bottom:1rem}
	
	.game_page .video .tit{font-size:3.3rem}
	.game_page .video .play_btn{width:8rem;height:6rem}
	.game_page .video .play_btn img{width:2rem}
	
	.game_cont_area .slide_img_box .pt_img02 {width:18rem;left:-7rem;bottom:-4rem}
	
	
	/*회사소개 - 회사소개 영역*/
	.about_page .a_cont_box .cont_tit .num{width:3.5rem;height: 3.5rem;}
	.about_page .a_cont_box .cont_tit .txt{font-size:2.2rem}
	
	.about_page .about_slider{height:26rem}
	.about_page .about_slider .page_pagination{padding:.5rem 1rem;bottom:1rem;right:1rem;display:flex}
	.about_page .about_slider .swiper-pagination-bullet{width:5px;height:5px}

	
	
}
@media(max-width:320px){
	#page_area .tit_box {font-size:4rem}
	
}