/* 상단 로고 */
#header {position:fixed; width:100%; height:80px; top:0; left:0; background:rgba(255, 255, 255, .8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items: center; justify-content: space-between; padding:0 40px; box-shadow:0 2px 4px rgba(0,0,0,.05); z-index:2; opacity:0;}
#header h1 img {width:120px;}
#header .gnb > ul {display:flex; gap:10px; height:100%;}
#header .gnb > ul > li {font-size:1.1rem; height:100%; display: flex; align-items: center; position:relative;}
#header .gnb > ul > li.on {font-weight:800;}
#header .gnb > ul > li > a {display:inline-block; padding:20px;}
#header .gnb > ul > li:hover > a {color:#235FAF;}
#header select {width:150px;}

#m_header {display:none; position:fixed; align-items: center; justify-content: space-between; width:100%; top:0; left:0; height:50px; padding:0 10px; z-index:2; background:rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 2px 4px rgba(0,0,0,.05);}
#m_header h1 {height:24px;}
#m_header h1 a {display:block; height:100%;}
#m_header h1 a img {display: block; height:100%;}
#m_header .btn_open_gnb {font-size:2rem;}
#m_header .btn_select_language {font-size:1.6rem;}

@media screen and (max-width:768px){
  #m_header h1 {height:20px;}
}

.mobile_gnb_modal {display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.7); z-index:11; backdrop-filter: blur(4px);}
.m_gnb {display:none; width:280px; height:100%; position:fixed; top:0; left:-280px; z-index:12; background: #fff; padding:20px;}
.m_gnb > ul {display:block; padding:10px 0;}
.m_gnb > ul > li {display:block; height:unset;}
.m_gnb > ul > li > a {padding:10px 0; display:flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: 600;
}
.m_gnb > ul > li .gnb_2 {display:none; padding-top:0; position:static; visibility:visible; opacity:1;}
.m_gnb > ul > li ul {display:block; height:unset; padding:0; box-shadow:none; border:none;}
.m_gnb > ul > li ul > li {width:100%;}
.m_gnb > ul > li ul > li a {display:block; padding:10px 0 10px 10px;}
.m_gnb > ul > li ul > li:last-child {margin-bottom:10px;}
.mobile_top_btn {padding:0;}
.m_gnb .mobile_menu_title {display:block; font-size:1.2rem; font-weight:800; padding-bottom:20px; border-bottom:1px solid #ccc;}
.m_gnb .btn_close_gnb {display:block; position:absolute; top:15px; right:20px; font-size:1.6rem; padding:0;}

/* 언어선택 */
.sites_outer {position:relative;}
#select_sites {position:absolute; top:42px; left:0; display:flex; flex-direction:column; align-items:flex-start; background:#fff; width:150px; border:1px solid #ccc; border-radius:4px; overflow:hidden; box-shadow:1px 1px 3px rgba(0,0,0,.15);}
#select_sites button {border:none !important; width:100%; border-bottom:1px solid #ccc !important; border-radius:0; justify-content:space-between; padding:0 10px; }
#select_sites button:last-child {border-bottom:none !important;}
#select_sites button i {font-size:0.8rem;}

#wrap {padding-top:80px;}

@media screen and (max-width:1300px){
  #header {display:none;}
  #m_header {display:flex;}
  .m_gnb {display:block;}
  #wrap {padding-top:50px;}
}

/* 메인배너 */
#mainBn {display:none;}
#mainBn .swiper-slide img {width:100%;}
#mainBn .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom {bottom: 20px !important;}
#mainBn .swiper-pagination-fraction {display:none;}
#mainBn .swiper-button-prev {width:100px !important; height:100px !important; background-color:rgba(0,0,0,.2); border-radius:0 50% 50% 0; left:0 !important; margin-top:0 !important; transform:translateY(-50%); background-image:none; transition:all ease .3s;}
#mainBn .swiper-button-next {width:100px !important; height:100px !important; background-color:rgba(0,0,0,.2); border-radius:50% 0 0 50%; right:0 !important; margin-top:0 !important; transform:translateY(-50%); background-image:none; transition:all ease .3s;}
#mainBn svg {width:100px; height:100px; position:absolute;}
#mainBn .swiper-button-prev svg {border-radius:0 50% 50% 0; right:0;}
#mainBn .swiper-button-next svg {border-radius:50% 0 0 50%; left:0;}
#mainBn .swiper-button-prev:hover,
#mainBn .swiper-button-next:hover {width:110px !important; transition:all ease .3s;}
#mainBn .swiper-pagination-bullet {background:rgba(0,0,0,.2); width:14px !important; height:14px !important; border-radius:7px !important; transition:all ease .2s; border:1px solid rgba(0,0,0,.8); opacity:1 !important;}
#mainBn .swiper-pagination-bullet-active {background:rgba(255,255,255,.8) !important; transition:all ease .2s;}

/* 메인배너 - 모바일 */
#mainBn_m {display:none;}
#mainBn_m .swiper-slide img {width:100%;}
#mainBn_m .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 20px !important;}
#mainBn_m .swiper-pagination-bullet {background:rgba(0,0,0,.2); width:14px !important; height:14px !important; border-radius:7px !important; transition:all ease .2s; border:1px solid rgba(0,0,0,.8); opacity:1 !important;}
#mainBn_m .swiper-pagination-bullet-active {background:rgba(255,255,255,.8) !important; transition:all ease .2s;}

/* 메인화면 중간배너 */
#midBn {width:100%; margin:40px auto 0; display:flex; position:relative;}
#midBn .swiper-container {width:calc(100% - 160px); max-width:1280px;}
#midBn .swiper-button {position:absolute; width:80px !important; height:80px !important; background-color:unset; border-radius:50%; margin-top:0 !important; background-image:none; display:none;}
#midBn svg {width:80px; height:80px; position:absolute;}
#midBn .swiper-button-prev svg {right:0; transition:all ease .2s;}
#midBn .swiper-button-next svg {left:0; transition:all ease .2s;}
#midBn .swiper-button-prev:hover svg {right:5px; transition:all ease .2s;}
#midBn .swiper-button-next:hover svg {left:5px; transition:all ease .2s;}
#midBn .swiper-slide {background: #fff; height:100%; width:calc((100% - 60px) / 4);}
#midBn .swiper-slide .img_area {margin-bottom:20px; border:1px solid #ccc; border-radius:6px; overflow:hidden; display: flex; justify-content: space-between; align-items: center; padding:10px 0 10px 20px; position:relative; transition:ease all .2s;}
#midBn .swiper-slide .img_area img.prd_logo {width:50%;}
#midBn .swiper-slide .img_area img.prd_img {width:50%;}
#midBn .swiper-slide .img_area_shadow {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; box-shadow:inset 0 0 0px rgba(0,0,0,.2);}
#midBn .swiper-slide:hover .img_area {cursor:pointer; border-color:#333; transition:ease all .2s;}
#midBn .swiper-slide:hover .text_area {color:#235FAF; cursor:pointer;}
/* #midBn .swiper-slide:hover .img_area_shadow {box-shadow:inset 0 0 16px rgba(0,0,0,.2); transition:ease all .4s;} */
#midBn .swiper-slide .game_title {font-size:1.2rem; margin-top:1rem; font-weight:500; word-break: break-all;}
#midBn .swiper-slide .game_description {font-size:0.9rem; margin-top:1rem; font-weight:200; line-height:1.3;}
#midBn .swiper-slide a {/*position:absolute; left:0; bottom:0;*/ margin-top:20px; float:right;}
#midBn .swiper-pagination-fraction {display:none; bottom: 0 !important; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(0, 0, 0, .6); color: #fff; left: 0 !important; transform: unset !important; justify-content: center; align-items: center;}

@media screen and (max-width:1300px){
  /* #midBn {width:calc(100% - 20px);} */
}

@media screen and (max-width:980px){
  /* #midBn .swiper-slide {background: #fff; height:100%; width:calc((100% - 40px) / 3);} */
}

@media screen and (max-width:480px){
  #midBn .swiper-pagination-fraction {display:flex;}
}

/* 스와이프 배너 공통 */
.swiper-pagination {width:unset !important; left:50% !important; transform:translateX(-50%) !important; white-space: nowrap;}


/* 푸터 */
#footer {height:80px; margin-top:80px; border-top:1px solid #999; padding:0 40px; display:flex; align-items: center; justify-content: space-between;}
#footer .copyright {font-size:1.1rem; font-weight:500;}
#footer .copyright span {font-size:1.2rem;}
#footer .links {display:flex; gap:50px;}
#footer .links .relative_site {display:flex; gap:30px; align-items: center;}
#footer .links .relative_site a img.participation {width:130px;}
#footer .links .relative_site a img.usta {width:100px;}
#footer .links .sns {display:flex; gap:10px; align-items: center;}
#footer .links .sns a img {width:26px; border-radius:5px;}
#footer .links .sns a img.youtube {width:30px;}

@media screen and (max-width:760px){
  #footer {display:block; padding:0; border-top:none;}
  #footer .links {padding:40px 0; background:#F0F2F6; width:100%; display:block;}
  #footer .links .relative_site {justify-content: center;}
  #footer .links .sns {margin-top:20px; justify-content: center; gap:20px;}
  #footer .links img {mix-blend-mode: multiply;}
  #footer .links .sns a img {width:50px; border-radius:10px;}
  #footer .links .sns a img.youtube {width:60px;}
  #footer .copyright {height:60px; display:flex; justify-content: center; align-items: center;}
}

@media screen and (max-width:320px){
  #footer .links .relative_site {gap:10px;}
  #footer .links .sns a img {width:40px; border-radius:8px;}
  #footer .links .sns a img.youtube {width:50px;}
}

/* 서브페이지 시작 */
#sub_layout {width:1280px; margin:0 auto; margin-top:40px; position:relative;}
#sub_layout .page_title {font-size:2.4rem; font-weight:700; height:70px; border-bottom:1px solid #999; display:flex; align-items: center;}
#sub_layout .page_guide {font-size:1.2rem; margin:20px 0; color: #0087ff; line-height:1.3;}
#sub_layout .article p {line-height:1.3;}
#sub_layout .article .sub_title {font-size:1.2rem; font-weight:600; color:#235FAF;}

@media screen and (max-width:1300px){
  #sub_layout {display:block; padding:0 10px; width:100%;}
  #sub_layout {width:100%; margin-top:30px;}
}

@media screen and (max-width:768px){
  #sub_layout .page_title {font-size:2rem;}
}

@media screen and (max-width:380px){
  #sub_layout .page_title {font-size:1.4rem;}
  #sub_layout .page_guide {font-size:1rem;}
}

/* 제품 리스트 */
ul.prd_list {display:flex; flex-wrap: wrap; gap:40px; opacity:0; margin-top:40px;}
ul.prd_list li {width:calc((100% - 80px) / 3);}
ul.prd_list li .prd_img {width:100%; border:1px solid #ccc; border-radius:4px; display: flex; align-items: center; justify-content: center; overflow:hidden;}
ul.prd_list li .game_title {font-weight:600; line-height:1.3; margin-top:10px; text-align:center;}
ul.prd_list li .game_summery {font-weight:300; margin-top:6px; line-height:1.3; display:none;}

@media screen and (max-width:768px){
  ul.prd_list {gap:30px 20px;}
  ul.prd_list li {width:calc((100% - 40px) / 3);}
}

@media screen and (max-width:520px){
  ul.prd_list li {width:calc((100% - 20px) / 2);}
}

@media screen and (max-width:320px){
  ul.prd_list li {width:100%;}
}


.download_modal {position:absolute; width:100%; height:0; bottom:0; left:0; z-index:2; opacity:0; display:flex; align-items: center; justify-content: center; background:rgba(0,0,0,.7); transition:all ease .2s;}
.download_modal i {font-size:3rem; color:#fff;}

/* 문서 (브로슈어, 매뉴얼) 리스트 */
ul.document_list {display:flex; flex-wrap: wrap; gap:40px; margin-top:40px;}
ul.document_list li {width:calc((100% - 120px) / 4); text-align: center;}
/*ul.document_list li:hover .download_modal{opacity:1; transition:all ease .2s; height:100%;}*/
ul.document_list li .thumb_img {position:relative;}
ul.document_list li .thumb_img .document_img {width:100%; border:1px solid #ccc; box-shadow:2px 2px 3px rgba(0,0,0,.15);}
ul.document_list li .game_title {font-weight:600; line-height:1.3; margin-top:10px; text-align:center;}
ul.document_list li:hover .game_title {color:#235FAF;}
ul.document_list li .game_summery {font-weight:300; margin-top:6px; line-height:1.3; display:none;}

ul.document_list li .thumb_img .front_img {position:absolute; right:0; bottom:3px; width:0; z-index:2;}
ul.document_list li .thumb_img .click_txt {position:absolute; right: 10px; bottom: 13px; z-index:2; font-size:0.9rem; text-align:right; opacity:0;}
ul.document_list li .thumb_img .next_img {position:absolute; right:0; bottom:3px; width:0; z-index:1;}

@media screen and (max-width:768px){
  ul.document_list {gap:30px 20px;}
  ul.document_list li {width:calc((100% - 40px) / 3);}
}

@media screen and (max-width:520px){
  ul.document_list li {width:calc((100% - 20px) / 2);}
}

@media screen and (max-width:320px){
  ul.document_list li {width:100%;}
}


/* 리스트 레이아웃 */
.list_layout ul.list_head {border-top:1px solid #999; border-bottom:1px solid #999;}
.list_layout ul.list_head li {display:flex; align-items:center;}
.list_layout ul.list_head li span {text-align:center;}
.list_layout ul.list_body li {border-bottom:1px solid #ccc;}
.list_layout ul.list_body li:hover {background:#eff7ff;}
.list_layout ul.list_body li a {display:flex; align-items:center;}
.list_layout ul li {height:50px;}
.list_layout ul li span {display:inline-block; padding:20px 10px;}


/* 미니게임 */
.minigame_btn {display:flex; justify-content:center; width:100%; margin-top:100px;}
#minigame {width:100%; height:100%; position:fixed; z-index:2; top:50%; left:50%; transform:translate(-50%, -50%); background:#000; border:1px solid #000;}
#minigame iframe {width:100%; height:100%;}

#minigame_main {width:100%; max-width:1280px; margin:0 auto; margin:80px auto;}
#minigame_main .minigame_header {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px;}
#minigame_main .minigame_header .section_title {display:flex; flex-direction:column; gap:5px;}
#minigame_main .minigame_header .section_title p.title {font-size:2rem; font-weight:600;}
#minigame_main .minigame_header .section_title p.desc {font-size:1rem; color:#666;}
#minigame_main iframe {width:100%; height:800px;}