/* 상단 로고 */
#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 {height:100%;}
#header .gnb > ul {display:flex; height:100%;}
#header .gnb > ul > li {font-size:1.2rem; 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 30px;}
#header .gnb > ul > li:hover > a {color:#235FAF;}
#header .gnb > ul > li .gnb_2 {padding-top:13px; position:absolute; left:-20px; bottom:0px; visibility: hidden; opacity:0;}
#header .gnb > ul > li ul {display:flex; align-items: center; gap:30px; height:60px; background:#fff; border-radius:30px; padding:0 40px; box-shadow:0 2px 5px rgba(0,0,0,.15); border:1px solid #d9d9d9;}
#header .gnb > ul > li ul > li {font-size:1rem; font-weight:300; width: max-content;}
#header .gnb > ul > li ul > li:hover {font-weight:800;}
#header .gnb > ul > li:hover .gnb_2 {bottom:-73px; visibility:visible; opacity:1; transition:all ease .2s;}
#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;}
}

.logo {position:relative;}
.logo a {overflow:hidden;}
.logo a .shining {width:30px; height:40px; position:absolute; background:#fff; transform:rotate(27deg) translateY(-50%); top:50%; display:none; opacity:.6;}

.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 {bottom: 10px !important;}
#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 {bottom: 20px !important;}
#mainBn_m .swiper-pagination-fraction {bottom: 10px !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:1280px; margin:80px auto 0; display:flex; gap:30px;}
#midBn .mid_banner_grid {width:calc((100% - 120px) / 3);}
#midBn .swiper-slide {background: #fff; height:100%;}
#midBn .swiper-slide .bn_block {/*height: 240px;*/ display:flex; justify-content: space-between; height:100%; gap: 10px;}
#midBn .swiper-slide .bn_block .text_area {display: flex; flex-direction: column; gap:1rem; position:relative;}
#midBn .swiper-slide .bn_block .game_type {font-size:1.3rem; font-weight:800; color:#235FAF; display:flex; gap:7px; align-items: flex-end;}
#midBn .swiper-slide .bn_block .game_type span {height:unset; border-radius:unset; border:none; padding:0; font-size:0.8rem;}
#midBn .swiper-slide .bn_block .game_title {font-size:1.2rem; font-weight:500; word-break:break-word; line-height: 1.2;}
#midBn .swiper-slide .bn_block .game_description {font-size:0.9rem; font-weight:200; line-height:1.3; height: 2.2rem; overflow: hidden;}
#midBn .swiper-slide .bn_block .game_description b {font-weight:200;}
#midBn .swiper-slide .bn_block .img_area {text-align:right; display:flex; align-items:flex-start; justify-content: flex-end;}
#midBn .swiper-slide .bn_block .img_area img {height:200px; border-radius: 4px;}
#midBn .swiper-pagination.swiper-pagination-fraction {background:rgba(0,0,0,.4); color:#fff; padding:0 10px; height:26px; border-radius:13px; display:flex; justify-content: center; align-items: center; bottom: 0; right: 0; left: unset !important; opacity: 1; border: 1px solid #fff; transform:unset !important;}
#midBn .split_line {width:1px; border-right:1px solid #ccc;}

#midBnTab {display:none;}

@media screen and (max-width:1300px){
  #midBn {width:100%; padding:0 10px; gap:10px; margin-top:40px; overflow-x:auto;}
  #midBn .mid_banner_grid {width:calc((100% - 20px) / 3); border:1px solid #ccc; border-radius:10px; overflow: hidden; background:#fff;}
  #midBn .split_line {display:none}
  #midBn .swiper-container {height:100%;}
  #midBn .swiper-slide {padding:20px; height:100%;}
  #midBn .swiper-slide .bn_block .text_area {width:calc(60% - 10px);}
  /* #midBn .swiper-slide .bn_block .text_area br {display:none;} */
  #midBn .swiper-slide .bn_block .img_area {width:40%;}
  #midBn .swiper-slide .bn_block .img_area img {height:unset; max-height:200px; max-width:100%;}
  #midBn .swiper-pagination.swiper-pagination-fraction {bottom: 20px; right: 20px;}
}

@media screen and (max-width:1080px){
  #midBn .swiper-slide .bn_block .game_title {font-size:1rem;}
}

@media screen and (max-width:980px){
  #midBnTab {display:flex; margin-top:40px; padding:0 10px;}
  #midBnTab button {padding:10px 0; border:1px solid #ccc; font-size:0.9rem; width:calc(100% / 3); background:#f1f1f1; color:#999;}
  #midBnTab button:first-child {border-radius:10px 0 0 0; border-right:none;}
  #midBnTab button:last-child {border-radius:0 10px 0 0; border-left:none;}
  #midBnTab button.on {background:#fff; border-bottom:none; color:#333;}
  #midBn {display:block; gap:0; width:100%; margin-top:0;}
  #midBn .mid_banner_grid {border-radius:0 0 10px 10px; border-top:none;}
  #midBn .bn_1 {width:100%;}
  #midBn .bn_2 {width:100%; display:none;}
  #midBn .bn_3 {width:100%; display:none;}
  #midBn .swiper-slide .bn_block .game_title {font-size:1.2rem;}
}

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

/* 메인화면 하단영역 */
#bottom_area {width:1280px; margin:80px auto 0; display:flex; gap:40px;}
#bottom_area .movie {height:210px; position:relative; width:calc((100% - 40px) / 3); border:1px solid #ccc; border-radius:10px;}
#bottom_area .movie img {height:210px; border-radius:10px;}
#bottom_area .movie .open_movie_popup {width:80px; height:60px; background:#ff0000; border-radius:16px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#bottom_area .movie .open_movie_popup:after {content:""; width:0; height:0; border:10px solid transparent; border-left:16px solid #fff; position:absolute; top:50%; left:50%; transform:translate(calc(-50% + 8px), -50%);}
#bottom_area .movie .open_movie_popup:hover {background:#e10101;}
#bottom_area .board_outer {width:calc(100% - ((100% - 40px) / 3));}
#bottom_area .board {display:flex; gap:30px; border:1px solid #ccc; padding:30px; border-radius:10px; height: 210px;}
#bottom_area .board .board_block {width:calc((100% - 61px) / 2); position:relative;}
#bottom_area .board .board_block .board_title {font-size:1.3rem; font-weight:800; color:#235FAF;}
#bottom_area .board .split_line {width:1px; border-right:1px solid #ccc;}
#bottom_area .board .view_more {position:absolute; top:0; right:0;}
#bottom_area .board ul {margin-top:14px;}
#bottom_area .board ul li {font-size: 0.9rem;}
#bottom_area .board ul li a {display:block; padding:5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
#bottom_area .board ul li a:hover {opacity:.7;}

#boardTab {display:none;}

@media screen and (max-width:1300px){
  #bottom_area {width:100%; padding:0 10px; gap:10px; margin-top:40px;}
}

@media screen and (max-width:980px){
  #boardTab {display:flex;}
  #boardTab button {padding:10px 0; border:1px solid #ccc; font-size:0.9rem; width:calc(100% / 2); background:#f1f1f1; color:#999;}
  #boardTab button:first-child {border-radius:10px 0 0 0;}
  #boardTab button:last-child {border-radius:0 10px 0 0; border-left:none;}
  #boardTab button.on {background:#fff; border-bottom:none; color:#333;}
  #bottom_area .board {gap:0; border-radius:0 0 10px 10px; border-top:none;}
  #bottom_area .board .board_block {width:100%; margin-top:0; }
  #bottom_area .board .split_line {display:none;}
  .board_block.articles {display:none;}
}

@media screen and (max-width:760px){
  #bottom_area {display:block;}
  #bottom_area .movie {width:100%; height:unset;}
  #bottom_area .movie img {width:100%; height:unset;}
  #bottom_area .board {height:unset;}
  #bottom_area .board_outer {width:100%; margin-top:40px;}
}

@media screen and (max-width:420px){
  #bottom_area .board {padding:15px;}
}

/* 푸터 */
#footer {height:80px; margin-top:80px; border-top:1px solid #999; padding:0 40px; display:flex; align-items: center; justify-content: space-between; opacity:0;}
#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; height:unset;}
  #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; display:flex; margin-top:40px; gap:40px; align-items: flex-start;}
#sub_layout .aside {width:260px; padding:0 26px 16px; box-shadow:2px 2px 4px rgba(0,0,0,.15); border:1px solid #d9d9d9; border-radius:10px;}
#sub_layout .aside .gnb_title {font-size:1.4rem; font-weight:600; height:70px; border-bottom:1px solid #ccc; display:flex; align-items: center;}
#sub_layout .aside > ul {margin-top:14px;}
#sub_layout .aside > ul > li {font-size:1.2rem;}
#sub_layout .aside > ul > li > a {padding:10px 0; display:block; position:relative;}
#sub_layout .aside > ul > li > a > i {opacity:0; color:#a2b6d1; position:absolute; top:50%; right:0; transform:translateY(-50%);}
#sub_layout .aside > ul > li.on > a {font-weight:800; color:#235FAF;}
#sub_layout .aside > ul > li.on > a > i {opacity:1;}
#sub_layout .aside > ul > li:not(.on):hover > a {font-weight:600;}
#sub_layout .aside > ul > li:last-child {margin-bottom:0;}
#sub_layout .aside > ul > li > ul {padding-left:10px; margin-top:0; margin-bottom:10px;}
#sub_layout .aside > ul > li > ul > li > a {font-size:0.9rem; font-weight:300; padding:5px 0; display:block;}
#sub_layout .aside > ul > li > ul > li.on > a {font-weight:600;}
#sub_layout .aside > ul > li > ul > li:hover > a {font-weight:600;}
#sub_layout .content {width:calc(100% - 300px); position:relative;}
#sub_layout .content .page_title {font-size:1.8rem; font-weight:700; height:70px; border-bottom:1px solid #999; display:flex; align-items: center;}
#sub_layout .content .path {font-size:0.9rem; position:absolute; top:0; right:0;}
#sub_layout .content .path a:last-child {font-weight:600;}
#sub_layout .content .path i {margin:0 .3rem; color:#999;}
#sub_layout .content .slogan {padding:20px 0 40px;}
#sub_layout .content .slogan_en {font-size:2.4rem; font-weight:800; color:#235FAF; letter-spacing: -1px;}
#sub_layout .content .slogan_kr {font-size:1.2rem; margin-top:5px; line-height: 1.3;}
#sub_layout .content .article p {line-height:1.3;}
#sub_layout .content .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 .aside {width:100%; padding:20px 20px 10px;}
  #sub_layout .aside .gnb_title {font-size:1.2rem; height:unset; padding-bottom:20px; margin-bottom:10px;}
  #sub_layout .aside > ul {display:flex; margin:0; flex-wrap:wrap; gap:0 20px;}
  #sub_layout .aside > ul > li > a {padding:10px 0;}
  #sub_layout .aside > ul > li > a i {display:none;}
  #sub_layout .aside > ul > li > ul {display:none;}
  #sub_layout .content {width:100%; margin-top:30px;}
  #sub_layout .content .path {display:none;}

  .aside_depth_2 {padding:20px; border:1px solid #d9d9d9; border-radius:10px; box-shadow:2px 2px 4px rgba(0,0,0,.15); margin-top:10px;}
  .aside_depth_2 ul {display:flex; flex-wrap: wrap; gap:0 20px;}
  .aside_depth_2 ul li a {padding:10px 0; display:block;}
  .aside_depth_2 ul li.on {font-weight:600;}
}

@media screen and (max-width:580px){
  #sub_layout .content .slogan_en {font-size:2rem;}
  #sub_layout .content .slogan_kr {font-size:1rem;}
  .aside_dropdown_icon {font-size:1.4rem;}
}

@media screen and (max-width:480px){
  #sub_layout .aside {display:block;}
}

@media screen and (max-width:380px){
  #sub_layout .content .slogan_en {font-size:1.6rem;}
}

/* 제품 리스트 */
ul.prd_list {display:flex; flex-wrap: wrap; gap:40px; opacity:0;}
ul.prd_list li {width:calc((100% - 80px) / 3);}
ul.prd_list li .prd_img {width:100%; border-bottom:1px solid #ccc; /*border-radius:4px;*/ display: flex; align-items: center; justify-content: center; overflow:hidden;}
ul.prd_list li .prd_img img {border-radius:4px;}
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;}
/* ul.prd_list li:hover .prd_img img {zoom:110%;}
ul.prd_list li:hover p {opacity:0.6;} */

@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%;}
}


/* 리스트 레이아웃 */
.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 div {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 div {display:inline-block; padding:20px 10px;}
.list_layout ul li div .top_notice_icon {font-weight:800; color:#235FAF;}

.search_wrap {margin-top:40px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; justify-content: center; width:100%;}
.search_wrap select {width:100px;}
.search_wrap input[type='text'] {width:calc(100% - 190px); max-width:400px;}
.search_wrap .btn_search {width:80px;}


/* 미니게임 */
.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%;}