body {width:100%;}

:root {
    --color01:#f5351a;
}
.gameBody {background-color: #f6f4f0;}
#header .inner,
#footer .inner {padding:0 50px; width:calc(100% - 100px);}
#header.active {
    position:fixed;
}

#header {background: linear-gradient(to top, #ffffff, #eeeeee); box-shadow:2px 6px 15px rgba(0, 0, 0, 0.5); width:100%; height:90px; line-height:90px; position:relative; top:0; left:0; z-index:999999; background-color:#fff;}
#header .inner {padding:0 50px; }
#header #logo {margin-right:40px;}
#header #logo img {width:255px;}

#header .lfBox ul li:not(:last-child) {
    margin-right:17px;
}

#header .lfBox ul li a {
  font-size: 15px;
  font-family: "Noto Sans CJK KR";
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
  text-align: left;
}
#header ul li a:hover {
    color:#f5351a !important;
}
#header .rtBox ul {
    margin-right:30px;
}
#header .rtBox ul li .mo {
    display:none;
}
#header .rtBox ul li:not(:last-child) {
    margin-right:5px;
}
#header .rtBox ul li a {
    padding:0 15px;
    width:fit-content;
    border-radius:20px;
    background-color:#fff;
    border:1px solid #c5c5c5;
    box-sizing:border-box;
    height:40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#header .rtBox ul li a:hover {
    border:1px solid transparent;
    box-shadow:3px 3px 10px rgba(0, 0, 0, 0.2);
}
#header .allBtn {background-color:transparent;}
#header .allBtn .mo {display:none;}
#header #nav {
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}
#header #nav ul li a {
    font-size:22px;
    font-weight:bold;
    color:#222222;
}
#header #nav ul li:not(:last-child) {
    margin-right:40px;
}
#header #nav ul:nth-child(1) {
    margin-right:150px;
}
#header #nav ul li a {
    position:relative;
    width:fit-content;
    height:fit-content;
}
#header #nav ul li a img {
    position:absolute;
    top:-16px;
    right:-12px;
    width:35px;
}
#header #nav .center {
    position:absolute;
    left:45%;
    transform:translateX(-50%);
}
#header #nav .center .img {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}
#header #nav .center .bg {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:-1;
    top:42px;
}
#header .dataBtnWrap {position:relative;}
#header .dataBtn {display:flex; flex-direction:row; align-items:center; justify-content:center; width:170px; height:65px; line-height:64px; border-radius:33px; background-color:#fff; text-align:center; font-size:18px; font-weight:400; color:var(--color01);}
#header .dataBtn:nth-child(2) {margin-left:7px;}
#header .dataBtn:hover {background-color:#000; color:#fff;}
#header .dataBtn .off {display:block;}
#header .dataBtn .on {display:none;}
#header .dataBtn:hover .off {display:none;}
#header .dataBtn:hover .on {display:block;}
#header .dataBtn img {width:24px; margin-right:5px;}

#header.active {position:fixed;} 

#header .navSub {display:none; position:absolute; top:60px; left:50%; transform:translateX(-50%); text-align:center; width:100%; min-width:175px;  box-sizing:border-box; box-shadow:3px 3px 5px rgba(0,0,0,0.1); }
#header .navSub.on {display:block;}
#header .navSub li, #header .navSub li a {width:100%;}
#header .navSub li a {}
#header .navSub li:last-child {margin-bottom:0;}
#header .navSub li a {display:block; padding:15px 0; background-color:#fff; font-size:17px; font-weight:400; letter-spacing:-0.6px; color:#333; line-height:1; opacity:1; position:relative; width:100%; height:100%;}
#header .navSub li:hover a {background-color:var(--color01); color:#fff;}     


/* start : 전체메뉴 */
body.no-scroll {overflow:hidden;}
#gnb {position:fixed; top:0; right:0; z-index:999999999999;}
#gnb.on {width:100%; height:100vh;}
#gnb.on .bg {display:block;}
#gnb.on .gnb_wrap {display:block; transform:translateX(0%); transition:all 0.6s; opacity:1;}
#gnb .bg {position:fixed !important; top:0 !important; left:0 !important; z-index:1; width:100%; height:100%; background-color:rgba(0,0,0,0.7); display:none;}
#gnb .gnbTopBox {align-items:center;}
#gnb #logoBox02 {align-items:center;}
#gnb #logoBox02 a img {width:220px;}
#gnb #gnb_close {background-color:transparent; font-size:26px; position:absolute; right:30px; top:35px;}
#gnb #gnb_close i {color:#000;}
#gnb .gnb_wrap {width:500px; height:calc(100% - 70px); padding:35px 30px; background-color:#fff; position:fixed; top:0; right:0; z-index:9; transform:translateX(100%); overflow-y:scroll; opacity:0;}
#gnb .gnb_wrap::-webkit-scrollbar { width:1px; -webkit-transition: all 300ms; transition: all 300ms;}
#gnb .gnb_wrap::-webkit-scrollbar-track { width:10px; /* 스크롤바의 너비 */ background-color:#ddd; }
#gnb .gnb_wrap::-webkit-scrollbar-thumb {height:5%; /* 스크롤바의 길이 */ background:#fff; /* 스크롤바의 색상 */ background-clip: padding-box; border:2px solid transparent; border-radius: 8px; }
#gnb .gnb_left, 
#gnb .gnbTopBox {display:none; }
#gnb.on .gnb_left {display:block;}
#gnb.on .gnbTopBox {display:flex;}
#gnb .gnb_left{ width:100%; margin: 0 auto; margin-top:60px; text-align:left; }
#gnb .gnb_left > li > a  {position:relative;  display:block; font-family:var(--NotoSans); font-size:18px; font-weight:400; color:#000; padding:20px 0; border-bottom:1px solid #e6e6e6; box-sizing:border-box;}
#gnb .gnb_left > li > a p {font-family:var(--NotoSans); font-size:18px; font-weight:400; color:#000; }
#gnb .gnb_left > li > a p {position:relative; width:fit-content;}
#gnb .gnb_left > li > a .icon {position: absolute; top: -12px; width:35px;}
#gnb .gnb_left > li > a .icon01 {left:60px;}
#gnb .gnb_left > li > a .icon02 {left:20px;}
#gnb .gnb_left > li > a.on {color:var(--color01); font-weight:600; border-bottom:1px solid var(--color01);}
#gnb .gnb_left > li > a > span { display:block; width:25px; float:right; text-align:center;}
#gnb .gnb_left > li > a > span::after {content: "\e942"; font-family: 'xeicon' !important; font-size:20px;}
#gnb .gnb_left > li > a > span.on::after {content:"\e945"; font-weight:400;}
#gnb .gnb_left > li > a:hover {color:var(--color01);}
#gnb .gnb_sub li a { font-size:16px; font-weight:400; color:#333; padding:10px 0; display:block;}
#gnb .gnb_sub li a:hover {color:var(--color01); }
#gnb .gnb_left > li:nth-child(1) > a {padding-top:0;}
#gnb .gnb_left ul { display:none; margin:15px 0;}
#gnb .gnb_left ul.on {display:block;}
#gnb .sidemenuMo {margin-top:30px; align-items:center;}
#gnb .sidemenuMo li {margin-right:15px;}
#gnb .sidemenuMo li a:hover i {color:var(--color01); opacity:1;}
#gnb .sidemenuMo li a i {font-size:30px; color:#333; opacity:0.3;}
#gnb .sidemenuMo li:nth-child(2) a i {position:relative; top:0.5px; font-size:31px;}
#gnb .sidemenuMo li .mo {display:none;}
#gnb .globalLink {margin-top:40px;}
#gnb .globalLink li {margin-right:15px;}
#gnb .globalLink li.active a {font-weight:600; color:var(--color01); border-bottom:1px solid var(--color01); box-sizing:border-box;}
#gnb .globalLink li a {display:block; font-size:16px; font-weight:400; color:#919191; line-height:1.2;}
#gnb .globalLink li:hover a {color:var(--color01);}

/* end : 전체메뉴 */

#footer {width:100%; position:relative; background-color:#fff;}
#footer .inner {padding:40px 40px 140px 40px; width:calc(100% - 80px);}
#footer .topBox {width:calc(100% - 80px); position:absolute; top:40px; left:50%; transform:translateX(-50%);}
#footer .topBox .lfBox li:not(:last-child) {margin-right:3px;}
#footer .topBox .lfBox li a { display:block; width:150px; height:60px; line-height:60px; text-align:center; border-radius:30px; background-color:#1d1d1d; font-size:15px; font-weight:500; color:#f6f4f0;}
#footer .topBox .rtBox li a {font-size:15px; font-weight:350; color:#333333;}
#footer .topBox .lfBox li:hover a {background-color:var(--color01);}
#footer .topBox .rtBox li:not(:last-child) {margin-right:25px;}
#footer .topBox .rtBox li.active a {font-weight:500;}
#footer .topBox .rtBox li a:hover {font-weight:400; color:var(--color01);}
#footer .topBox .rtBox button {position:relative; z-index:99; width:60px; height:60px; line-height:1; text-align:center; border-radius:50%; background-color:#1d1d1d;}
#footer .topBox .rtBox button:hover {background-color:var(--color01);}
#footer .centerBox { width:100%; text-align:center;}
#footer .centerBox a {display:block; width:fit-content; margin:0 auto;}
#footer .centerBox a img {display:block; margin:0 auto;}
#footer .centerBox a .logo01 {}
#footer .centerBox a .border {margin:30px auto; display:block; width:312px; height:2px; background-color:#000;}
#footer .centerBox a .logo02 {width:190px;}
#footer .centerBox .info01 li span {margin-top:5px;}
#footer .centerBox .info01 li {display:flex; flex-direction:row; align-items:center; justify-content:center;}
#footer .centerBox .info01 li p {font-size:18px; font-weight:400; color:#7a7a7a; margin-bottom:10px;}
#footer .centerBox .info01 li span {font-size:16px; font-weight:300; color:#7a7a7a;}
#footer .centerBox .info01 li p:not(:last-child) {
    margin-right:20px;
}
#footer .centerBox .info01 li span:not(:last-child) {
    margin-right:25px;
}
#footer .centerBox .info02 a {
  display:block;
  margin:20px auto 25px auto;
  background-color: rgb(230, 230, 230);
  width: 140px;
  height: 40px;
  line-height:40px;
  text-align: center;
  font-size: 16px;
  font-weight:300;
  color: rgba(0, 0, 0, 0.659);
  border-radius:20px;
  cursor:pointer;
}
#footer .centerBox .info02 img:nth-child(1) {
    margin-right:10px;
}
#footer .bottomBox_mo {
    display:none;
}
#footer .bottomBox {
    align-items:flex-end;
}
#footer .bottomBox dt {
    align-items:center;
    margin-bottom:10px;
}
#footer .bottomBox dt p {
    font-size:20px;
    font-weight:bold;
    color:#333333;
    margin-right:10px;
}
#footer .bottomBox dt span {
    font-size:13px;
    font-weight:300;
    color:#a4a4a4;
}
#footer .bottomBox dd {
    display:flex; 
    flex-direction:row;
    align-items:center;
}
#footer .bottomBox dd a {
    display:block;
    font-size:16px;
    font-weight:bold;
    color:#333333;
    line-height:1;
}
#footer .bottomBox dd a:hover {
    color:var(--color01);
}
#footer .bottomBox dd a:not(:last-child) {
    margin-right:25px;
}
#footer .bottomBox dd i {
    font-size:18px;
    color:#c1c1c1;
    position: relative;
    top:2px;
    padding-right:4px;
}
#footer .bottomBox .copyright {
    font-size:13px;
    font-weight:300;
    color:#000000;
    opacity:0.3;
}
.bottomGnb {
    position:fixed;
    left:0;
    bottom:0;    
    z-index:99999;
    width:100%;
    height:100px;
    line-height:100px;
    background-color:#1d1d1d;
    display:none;
}
.bottomGnb.active {
    display:block;
}
.bottomGnb ul,
.bottomGnb ul li a {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}
.bottomGnb ul li a {
    font-size:18px;
    font-weight:bold;
    color:#fff;
    opacity:0.5;
}
.bottomGnb ul li a img {
    margin-right:10px;
}
.bottomGnb ul li:not(:last-child) {
    margin-right:65px;
}
.bottomGnb ul li:hover a {
    opacity:1;
}
.rightBn {
    position:fixed;
    height:100%;
    bottom:0;
    right:0;
    z-index:999;
}
.rightBn.active {
    bottom:100px;
}
.rightBn.active .down {
    bottom:40%;
}
.rightBn .userInfo {
    position:absolute;
    right:20px;
    bottom:30px;
}
.rightBn .down {
    position:absolute;
    bottom:30%;
    right:0;
}
@media screen and (max-width:1900px) {
    .rightBn {display:none !important;}
}
@media screen and (max-width:1680px) {
    #header #nav ul:nth-child(1) {margin-right:140px;}
    #header .lfBox ul {display:none;}
    #header .rtBox ul li .pc {
        display:none;
    }    
    #header .rtBox ul li .mo {
        display:block;
    }
    #header .rtBox ul li a {padding:0; width:54px; height:54px; border-radius:50%;}
    #header .rtBox ul li a .goo {width:30px;}
    #header .rtBox ul li a .app {width:25px;}
    #header .rtBox ul li a .one {width:33px;}
    #header .allBtn .mo {display:block;}
    #header .allBtn .pc {display:none;}

    #footer .bottomBox {padding-top:60px;}
    .rightBn .userInfo img {width:140px;}
}
@media screen and (max-width:1600px) {
    #header #nav ul:nth-child(1) {margin-right:120px;}
}
@media screen and (max-width:1380px) {
    #header #nav ul li a {font-size:20px;}
    #header .rtBox ul {margin-right:35px;}
    #footer .topBox {width:100%; position:relative; top:0; left:0; transform:initial;}
}
@media screen and (max-width:1200px) {
    #header #nav ul {display:none;}
    #header #nav .center .bg {top:43px;}
    #header #nav {position:absolute; left:50%; transform:translateX(-50%);}
    #header #nav .center {left:50%;}
    #footer .inner {padding:40px 20px; width:calc(100% - 40px);}
    .bottomGnb {display:none !important;}
    .rightBn,
    .rightBn.active {bottom:0;}
    .rightBn .userInfo {bottom:30px; right:20px;}
    .rightBn .userInfo img {width:120px;}
}
@media screen and (max-width:980px) {
    #gnb .sidemenuMo li .mo {display:block;}
    #gnb .sidemenuMo li .pc {display:none;}
    #header .inner {padding:0 20px;}
    #header .inner, #footer .inner {width:calc(100% - 40px);}
    #footer .inner {padding:40px 20px 80px 20px;}
    #footer .topBox .lfBox,
    #footer .topBox .rtBox #topScroll {display:none !important;}
    #footer .topBox .rtBox {width:100%; justify-content:center; flex-wrap:wrap;}
    #footer .topBox .rtBox li {margin-bottom:5px;}
    #footer .topBox .rtBox li a {font-size:30px;}
    #footer .centerBox a .logo01 {display:none;}
    #footer .centerBox a .border {width:100%;}
    #footer .centerBox a .logo02 {width:390px;}
    #footer .centerBox .info01 li p {font-size:20px; line-height:1.3; margin-bottom:5px; word-break:keep-all;}
    #footer .centerBox .info01 li:nth-child(3) {display:none;}

    #footer .centerBox .info02 div {width:100%;}
    #footer .centerBox .info02 img {display:block; width:50%;}
    #footer .centerBox .info02 a {
        margin:20px auto 0 auto;
    }
    #footer .bottomBox  {display:none;}
    #footer .bottomBox_mo {
        display:block;
        padding:60px 0;
    }  
    #footer .bottomBox_mo dt,
    #footer .bottomBox_mo dd {
        justify-content:center;
    }
    #footer .bottomBox_mo dt {
        flex-direction:column;
        margin-bottom:20px;
    }
    #footer .bottomBox_mo dt p,
    #footer .bottomBox_mo dt span {
        width:100%;
        display:block;
    }  
    #footer .bottomBox_mo dt p {
        font-size:36px;
    }
    #footer .bottomBox_mo dt span {
        font-size:26px;
    }
    #footer .bottomBox_mo dd i,
    #footer .bottomBox_mo dd a {
        font-size:32px;
    }
    #footer .bottomBox_mo dd a:not(:last-child) {
        margin-right:30px;
    }
}
@media screen and (max-width:680px) {
    #gnb .gnb_left > li > a .icon  {width:30px; top:-12px;}
    #gnb .gnb_wrap {width:calc(100% - 40px); height:calc(100% - 50px); padding:25px 20px;}
    #header {height:55px; line-height:55px;}
    #header #logo img {width:191px; margin-left:-10px;;}
    #header .rtBox ul {margin-right:20px;}
    #header .rtBox ul li:nth-child(1) img {width:22.5px;}
    #header .rtBox ul li:nth-child(2) img {width:20px;}
    #header .rtBox ul li:nth-child(3) img {width:25px;}
    #header .allBtn .mo {width:20px;}
    #header #nav .center .img {width:50px;}
    #header #nav .center .bg {width:120px; top:26px;}

    #header .rtBox ul li a {padding:0; width:45px; height:45px; border-radius:50%;}
    #header .rtBox ul li a .goo {width:25px;}
    #header .rtBox ul li a .app {width:20px;}
    #header .rtBox ul li a .one {width:27px;}

    #footer .topBox .rtBox li a {font-size:18px;}
    #footer .centerBox a .logo01 {display:none;}
    #footer .centerBox a .border {width:100%;}
    #footer .centerBox a .logo02 {width:260px;}
    #footer .centerBox .info01 li p {font-size:18px; line-height:1.3; margin-bottom:3px;}
    #footer .centerBox .info02 div {display:block;}
    #footer .centerBox .info02 img {display:block; width:70%; margin:0 auto !important;}
    #footer .centerBox .info02 div img:nth-child(1) {margin-bottom:10px !important;}
    #footer .centerBox .info02 a {
        margin:20px auto 0 auto;
    }
    #footer .bottomBox  {display:none;}
    #footer .bottomBox_mo {
        display:block;
        padding:40px 0;
    }  
    #footer .bottomBox_mo dt,
    #footer .bottomBox_mo dd {
        justify-content:center;
    }
    #footer .bottomBox_mo dt {
        flex-direction:column;
        margin-bottom:15px;
    }
    #footer .bottomBox_mo dt p,
    #footer .bottomBox_mo dt span {
        width:100%;
        display:block;
    }  
    #footer .bottomBox_mo dt p {
        font-size:19px;
    }
    #footer .bottomBox_mo dt span {
        font-size:15px;
    }
    #footer .bottomBox_mo dd i,
    #footer .bottomBox_mo dd a {
        font-size:19px;
    }
    #footer .bottomBox_mo dd a:not(:last-child) {
        margin-right:20px;
    }    
}
@media screen and (max-width:580px) {
    #header .rtBox ul li a {padding:0; width:35px; height:35px;}
    #header .rtBox ul li a .goo {width:18px;}
    #header .rtBox ul li a .app {width:13px;}
    #header .rtBox ul li a .one {width:19px;}
}
@media screen and (max-width:480px) {
    #header .rtBox ul li a {padding:0; width:30px; height:30px;}
    #header .rtBox ul li a .goo {width:15px;}
    #header .rtBox ul li a .app {width:10px;}
    #header .rtBox ul li a .one {width:15px;}    
    #header #logo img,
    #gnb #logoBox02 a img {width:151px;}
    #header .rtBox ul {margin-right:15px;}
    #header .lfBox ul li:not(:last-child), #header .rtBox ul li:not(:last-child) {margin-right:3px;}
    #header .rtBox ul {margin-right:10px;}
    #gnb .sidemenuMo li:nth-child(1) .mo {width:18px;}
    #gnb .sidemenuMo li:nth-child(2) .mo {width:17px;}
    #gnb .sidemenuMo li:nth-child(3) .mo {width:20px;}
    #header .allBtn .mo {width:17px;}
    #header #nav {left:52%;}
    #header #nav .center .img {width:40px; top:5px;}
    #header #nav .center .bg {width:100px; top:26px;}
    .rightBn .userInfo img {width:100px;}
    #footer .centerBox a .border {margin:20px auto;}
    #footer .centerBox a .logo02 {width:65%;}
    #footer .topBox .rtBox li a {font-size:16px;}
    #footer .centerBox .info01 li .br {display:block;}
    #footer .centerBox .info01 li p {font-size:14px;}
    #footer .centerBox .info01 li:nth-child(2) p {letter-spacing:-1px;}
    #footer .bottomBox_mo dd a:not(:last-child) {margin-right:15px;}
    #footer .bottomBox_mo dd i, #footer .bottomBox_mo dd a {font-size:16px;}
    #footer .centerBox .info02 img {display:block; width:70%;}    
    #footer .centerBox .info02 div img:nth-child(1) {margin-bottom:5px !important;}
}
@media screen and (max-width:380px) {
   #header #logo img {width:141px;}
}
@media screen and (max-width:350px) {
    #header .rtBox ul li a {width:25px; height:25px;}
    #header .rtBox ul li a .goo {width:13px;}
    #header .rtBox ul li a .app {width:11px;}
    #header .rtBox ul li a .one {width:14px;}      
}
.slider01Box {width:100%; position:relative; left:-40px; right:-40px; overflow:hidden; padding:0 40px;}
.slider01 {
    overflow:initial !important;
}
.slider01 .swiper-slide {
    text-align:center;
    opacity:0 !important;
}
.slider01 .swiper-slide-active {
    opacity:1 !important;
}
.slider01 .swiper-slide .img {
    width:100%;
    border-radius:14px;
    overflow:hidden;
    background-color:#fff;
}
.slider01 .swiper-slide .mo {
    display:none;
}
.slider01 .swiper-slide .deco {
    padding-top:2px;
}
.slider01 .swiper-pagination {
    position:relative;
    text-align:center;
}
.slider01 .swiper-pagination-bullet {
    width:14px; 
    height:14px; 
    border-radius:50%; 
    background-color:#cbc9c6;
    opacity:1 !important;
}
.slider01 .swiper-pagination-bullet-active {
    background-color:#f5351a;
}
.slider01 .swiper-button-prev1,
.slider01 .swiper-button-next1 {box-shadow:3px 3px 10px rgba(0,0,0,0.3); position:absolute; top:45%; transform:translateY(-50%); width:63px; height:63px; border-radius:50%; background-color:#fff; z-index:9; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer;}
.slider01 .swiper-button-prev1 {left:-31.5px;}
.slider01 .swiper-button-next1 {right:-31.5px;}
.slider01 .swiper-button-prev1 i,
.slider01 .swiper-button-next1 i {font-size:26px; color:#000; letter-spacing:0;}
.slider01 .swiper-button-disabled {opacity:0.35;}
.slider01 .swiper-button-prev1:hover,
.slider01 .swiper-button-next1:hover {background-color:var(--color01); color:#fff;}
.slider01 .swiper-button-prev1:hover i,
.slider01 .swiper-button-next1:hover i {color:#fff;}

@media screen and (max-width:1200px) {
    .slider01 .swiper-pagination {margin-top:25px;}
    .slider01 .swiper-slide .deco {display:none;}
    .slider01 .swiper-button-prev1, .slider01 .swiper-button-next1 {display:none;}
    .slider01Box {left:0; right:0; padding:0; width:100%;}
}