html{font-size:20px;}
body{font-size:1rem;}
.tablet{display:none;}
.mob{display:none;}
.mobbr{display:none;}
img{max-width:100%; -webkit-perspective: 1; image-rendering:auto; }
.inn{width:65rem; margin:0 auto;}
/*���*/
#wrap{ position:relative; overflow-y:auto;}
#header{ width:100%;z-index:200; position:absolute; top:0; left:0;height:3rem; }
#header.over{background:#fff; box-shadow:0px 1px 1px rgba(0,0,0,0.1);}
#header h1{position:absolute; top:.5rem; left:1rem; z-index:1000;}
#header h1 img{height:2rem;}
/*ž��*/
#header #nav { height:3rem;}
#header #nav > ul {clear:both; text-align:center; position:relative; padding:0px; margin:0; box-sizing:border-box;height:3rem; width: 60%; margin: 0 auto;}
#header #nav > ul > li { /* display:inline-block; */float:left; width:14.28%; height:3rem;vertical-align:top;white-space: nowrap;}
#header #nav > ul > li > div > a{position:relative; font-size:0.9rem;text-align:center; color:#fff; font-weight: 500;display:inline-block; height:3rem; line-height:3rem; text-transform: uppercase;position:relative; }
#header #nav > ul > li > div > a strong{font-weight: 600;}
#header #nav > ul > li > div.c_point {font-size: 16px; color: #31a643;}
#header #nav > ul > li > div.c_point > a {color: #31a643; font-size: 16px;}
#header #nav > ul > li > div.c_point > a > span { background-color: #fff; border:1px solid #31a643; border-radius: 10px; padding: 5px;}
#header #nav > ul > li > div.c_point > a span.c_blue {color: #2b80ae;}
#header #nav > ul > li > div.c_point > a img {width: 18%; vertical-align: text-bottom;}
#header.over #nav > ul > li > div > a{color:#333; }
#header #nav > ul > li.on > div > a{color:#4AC2E7;}
#header #nav > ul > li.on > div.c_point > a {color:inherit;}
#header #nav > ul > li.on > div > a:before{ content : ""; display : block; position : absolute; left : 0; bottom : 0; width : 100%; height : 4px; background : #44d1fd;}
#header #nav > ul > li .depth2{z-index: 100;display: none; text-align:center; width:100%; margin: 0 auto 0;}
#header #nav > ul > li .depth2 .tit{position: absolute; left: -12rem; top: 10rem; display:none; transition: all 0.3s;}
#header #nav > ul > li.on .depth2 .tit{display : block; }
#header #nav > ul > li.on .depth2 .tit h3{position:relative; font-family: 'Jalnan'; color:#4AC1E7; font-size:1.5rem; margin-bottom:.5rem;}
#header #nav > ul > li.on .depth2 .tit h3 img{position:absolute; bottom:0; }
#header #nav > ul > li.on:nth-child(1) .depth2 .tit h3 img{left:5.5rem;}
#header #nav > ul > li.on:nth-child(2) .depth2 .tit h3 img{left:5.5rem;}
#header #nav > ul > li.on:nth-child(3) .depth2 .tit h3 img{left:4.5rem;}
#header #nav > ul > li.on:nth-child(4) .depth2 .tit h3 img{left:5rem;}
#header #nav > ul > li.on:nth-child(5) .depth2 .tit h3 img{left:7rem;}
#header #nav > ul > li.on:nth-child(6) .depth2 .tit h3 img{left:6rem;}
#header #nav > ul > li.on .depth2 .tit p{color:#888; font-size:.8rem;}
/* 220411 hu.um */
#header #nav > ul > li {width: 13%;}
#header #nav > ul > li:nth-child(7) {width:20%;}
/* #header #nav > ul > li:nth-child(1) .depth2 ul{left:16%}
#header #nav > ul > li:nth-child(2) .depth2 ul{left:28.3%}
#header #nav > ul > li:nth-child(3) .depth2 ul{left:38.3%}
#header #nav > ul > li:nth-child(4) .depth2 ul{left:48%}
#header #nav > ul > li:nth-child(5) .depth2 ul{left:58%}
#header #nav > ul > li:nth-child(6) .depth2 ul{left:69%}
#header #nav > ul > li:nth-child(7) .depth2 ul{left:83.5%} */
#header #nav > ul > li .depth2{display:block;}
/* #header.over #nav > ul > li .depth2{display:block;} */
#header #nav ul li ul {z-index: 100; display: none;box-sizing:border-box; text-align:center; margin: 0; padding: 1rem 0;}
#header #nav ul li ul li {margin-top:0.74rem;}
#header #nav ul li ul li:first-child{margin-top: 0;}
#header #nav ul li ul li a{color:#777; height:auto; font-weight:normal;}
#header #nav ul li ul li a:hover{color:#3459A7;}
#header #nav ul li ul li a:focus{color:#3459A7;}
#header .gnb{position:absolute; top:.5rem; right:4rem;}
#header .gnb ul li{display:inline-block; }
#header .gnb ul li:not(:first-child){margin-left:.5rem}
#header .gnb ul li a{color:#fff; line-height:1.6rem; display: flex; justify-content: center; align-content: center;}
#header .gnb ul li a img{height:1.6rem; margin-right:.3rem;filter: drop-shadow(0px 0px 2px rgba(247,134,0,0.5));}
#header .gnb ul li select{vertical-align:bottom; border:1px solid #ddd; border-radius:.25rem; height:1.75rem; width: 6rem;}
#header .gnb ul li span{display:none;}
#header.over .gnb ul li a{color:#666; }
#header.over .gnb ul li a img{filter:none;}
.bg_box{margin: 0 auto !important; display:none; position: absolute; width: 100%; height: 12rem; top:3rem; z-index:10; box-sizing:border-box; background-color:#fff; box-sizing: border-box; box-shadow:0px 1px 1px rgba(0,0,0,0.1);}
.bg_box .box_img{width:65rem; margin: 0 auto; height: 100%; position:relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #111;}
.bg_box .box_img h3.np_title{color:#4AC2E7; margin-bottom: 1rem; font-size:1.4rem; line-height:1.3;}
.bg_box .box_img p{font-size: .9rem; font-weight: 300; line-height: 1.3;}
.webWrap #header .btn-gnb-menu{position:absolute; right:1rem; top:0; width:2.25rem; height:100%; line-height:100%; cursor:pointer; z-index:9999; text-align:center;}
.webWrap #header .btnAll {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:2rem; height:1.7rem; outline: none; z-index:9999;}
.webWrap #header .btnAll span { display: block; width: 100%; height: 3px; border-radius:.15rem; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
.webWrap #header .btnAll > span:nth-child(1) {top: 0;}
.webWrap #header .btnAll > span:nth-child(2) {top: 0.6rem; }
.webWrap #header .btnAll > span:nth-child(3) {top: 1.2rem;}
.webWrap #header.open .btn-gnb-menu{left:auto; right:.8rem; }
.webWrap #header.open .btnAll{ }
.webWrap #header.open .btnAll > span{background-color: #111;}
.webWrap #header.open .btnAll > span:nth-child(1){top: 0.8rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width:2.25rem;}
.webWrap #header.open .btnAll > span:nth-child(2){top: 0; opacity: 0; width:1.2rem;}
.webWrap #header.open .btnAll > span:nth-child(3){top: 0.8rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width:2.25rem;}
.webWrap #header.over .btnAll span{background-color:#0F3F76}
.webWrap #header .back{position:absolute; left: 0.6rem; top:0; cursor:pointer; z-index:10; top:50%; transform:translateY(-50%); }
.webWrap #header .back a{color:#fff; font-size:1.2rem; display:block; text-align:left;}
/*����Ʈ��*/
#header #navi{background:#FFE864 url('/images/web/main/sitemapBg.jpg')no-repeat 50% bottom; background-size:100%; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:0; z-index:100; transition:right 0.45s;overflow:hidden;}
#header.open #navi{transition:right 0.45s; right:0px;}
#menuAll h3{text-align: center; padding-top:8rem; line-height:1.3; margin-bottom:2rem; color:#0358CE;font-size:2.5rem; font-weight:100; letter-spacing:-0.06em;}
#menuAll h3 span{display:block; letter-spacing:5px; font-weight:600; margin-bottom:1rem; color:#FE8182;}
#menuAll h4{text-align:center;font-size:1.5rem;color:#222222;line-height:1.8rem;margin-bottom: 2rem;position:relative;}
#menuAll .menu-member{display:none;}
#menuAll .mobile_top > ul { overflow:hidden; width:65rem; margin:0 auto; }
#menuAll .mobile_top ul li{width:13.4%; float:left; margin:1% 1% 0 0;}
#menuAll .mobile_top ul li:last-child {margin-right:0;}
#menuAll .mobile_top ul li a{display:block; font-size:1rem; font-weight:500; color:#fff; background:#3A8BFC; padding:1rem 0; text-align:center; width:100%; border-radius:2rem;}
#menuAll .mobile_top ul li ul{ margin-top:2rem;}
#menuAll .mobile_top ul li ul li{float:none; width:100%; background:rgba(255,255,255,0.7); border-radius:2rem; text-align:center; padding:.75rem 0; position:relative; margin-top:20px; margin-left:0;}
#menuAll .mobile_top ul li ul li:first-child{margin-top:0;}
#menuAll .mobile_top ul li ul li a{ display:block; font-size:0.9rem; color:#0358CE; background:none; padding:0;}
#menuAll .mobile_top ul li ul li:hover{background:rgba(255,255,255,1)}
/*�����*/
.visual{position:relative; width:100%; height:40rem; background: url('/images/web/main/newMain/main-visual.png')no-repeat center bottom;background-size: cover;}
.visual:after{ content : ""; display : block; position : absolute; left :50%; bottom:-59px; margin-left:-107px; width : 214px; height : 60px; background: url("/images/web/main/newMain/main-visual-down.png") no-repeat left top; background-size: contain;}
.visual:before{ content : ""; display : block; position : absolute; left :50%; bottom:-20px; margin-left:-21.5px; width : 41px; height : 35px; background: url("/images/web/main/visual-down-txt.png") no-repeat left top; z-index:1; -webkit-animation: sdb04 2s infinite;
animation: sdb04 2s infinite;}
@keyframes sdb04 {
0% { transform: translate(0, -20px); opacity: 0; }
50% { opacity: 1;}
100% { transform: translate(0, 20px); opacity: 1; }
}
.visual .inn{ padding-top:6.5rem;}
.visual .inn .vtxt{float:left; width:60%; padding-top:3rem;}
.visual .inn .vtxt h3{color:#fff; font-size:1.6rem; line-height:1.5; font-weight:400;}
.visual .inn .vtxt h1 span{color:#0F3F76}
.visual .inn .vtxt h1{font-size:2.2rem; margin-top:1rem; color:#fff;}
.visual .inn .vtxt ul{margin-top:4rem;}
.visual .inn .vtxt ul li{display:inline-block;}
.visual .inn .vtxt ul li a{position:relative; overflow:hidden; display:block; line-height:1; background:rgba(255,255,255,.3) ; font-size:1.2rem; padding:.7rem 3rem .8rem 1.8rem; color:#fff; border-radius:1.5rem;}
.visual .inn .vtxt ul li a:before{ content : ""; display : block; position : absolute; right :1rem; top:50%; margin-top:-0.375rem;width : 1rem; height : .75rem; background: url("/images/web/main/arrow_next-w.png") no-repeat left top; background-size:1rem .75rem; transition: all 0.2s ease-out 0s;}
.visual .inn .vtxt ul li a.vBtn{background:rgba(255,255,255,1); color:#3459A7; margin-right:1rem;}
.visual .inn .vtxt ul li a.vBtn:before{background: url("/images/web/main/arrow_next-b.png") no-repeat left top; background-size:1rem .75rem;}
.visual .inn .vtxt ul li a:hover{box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); }
.visual .inn .vtxt ul li a:hover:before{transform:translateX(50%);}
/* .visual .inn .vimg{float:left; width:40%; -webkit-animation:wing 2.5s ease-in .3s infinite reverse;animation:wing 2.5s ease-in .3s infinite reverse;} */
/* 추가 220331 */
.visual .inn .v-txt p {font-size: 1rem; text-align: center; color: #1D427B; background-color: #fff; width: 45%; margin: 0 auto 1rem; padding: 0.7rem 0; border-radius: 10px; box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 25%);}
.visual .inn .v-cont {display: flex; flex-flow: nowrap;}
.visual .inn .v-cont > div {width: 33.333%;}
.visual .inn .v-cont > div ul li:hover {box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);}
.visual .inn .v-cont .v-left ul {display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0rem 3rem 3rem; width: 80%; margin: 0 auto;}
.visual .inn .v-cont .v-left ul li {text-align: left; background: rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 29px; margin-top: 0.5rem; transition: all 0.2s ease-out 0s;}
.visual .inn .v-cont .v-left ul li a {position:relative; color: #fff; display: block; padding: 15px 0 15px 20px;}
.visual .inn .v-cont .v-left ul li a:before, .visual .inn .v-cont .v-left ul li a:after {content: ""; background: #C5E1FF; -webkit-border-radius: 0.2rem; border-radius: 0.2rem; display: block; height: 3px; position: absolute; right: 1rem; width: 10px;}
.visual .inn .v-cont .v-left ul li a:before {top: 22px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.visual .inn .v-cont .v-left ul li a:after {bottom: 22px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.visual .inn .v-cont .v-left ul li a img {height: 22px; margin-right: 0.5rem;}
.visual .inn .v-cont .v-left ul li:hover {background: rgba(255, 255, 255, 0.4);}
.visual .inn .vimg {padding:2rem; -webkit-animation:wing 2.5s ease-in .3s infinite reverse;animation:wing 2.5s ease-in .3s infinite reverse;}
.visual .inn .v-cont .v-right ul {display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0rem 3rem 3rem; width: 90%; margin: 0 auto;}
.visual .inn .v-cont .v-right ul li {text-align: left; background: #fff; border: 1px solid #D3E6FF; box-sizing: border-box; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 29px; margin-top: 0.5rem; transition: all 0.2s ease-out 0s;}
.visual .inn .v-cont .v-right .f_gmkt {font-weight: 700;}
.visual .inn .v-cont .v-right ul li a {position:relative; color: #3A8BFC; display: block; padding: 18px 0 18px 20px; line-height: 22px;}
.visual .inn .v-cont .v-right ul li a:before, .visual .inn .v-cont .v-right ul li a:after {content: ""; background: #C5E1FF; -webkit-border-radius: 0.2rem; border-radius: 0.2rem; display: block; height: 3px; position: absolute; right: 1rem; width: 10px;}
.visual .inn .v-cont .v-right ul li a:before {top: 25px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.visual .inn .v-cont .v-right ul li a:after {bottom: 25px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.visual .inn .v-cont .v-right ul li a img {width: 22px; margin-right: 0.5rem;}
.visual .inn .v-cont .v-right ul li:hover {background: #3A8BFC; border: 1px solid #3A8BFC;}
.visual .inn .v-cont .v-right ul li:hover a {color: #fff;}
@keyframes wing {
0%,
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
15% {
-webkit-transform: translateX(-30px) rotate(-4deg);
transform: translateX(-30px) rotate(-4deg);
}
30% {
-webkit-transform: translateX(15px) rotate(4deg);
transform: translateX(15px) rotate(4deg);
}
45% {
-webkit-transform: translateX(-15px) rotate(-3.0deg);
transform: translateX(-15px) rotate(-3.0deg);
}
60% {
-webkit-transform: translateX(9px) rotate(2.1deg);
transform: translateX(9px) rotate(2.1deg);
}
75% {
-webkit-transform: translateX(-6px) rotate(-1.2deg);
transform: translateX(-6px) rotate(-1.2deg);
}
}
/*������*/
#container .round{overflow:hidden; border-radius:1rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);}
#container .titH3{color:#fff; font-size:2rem; margin-bottom:1.5rem; text-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);}
#container .cts1{background:#F5F7FD; padding:6rem 0 4rem;}
#container .cts1 .cts1_left{float:left; width:23.65rem;}
#container .cts1 .cts1_left > div:first-child{margin-bottom:1.4rem}
#container .cts1 .cts1_left > .tabImg img.img02{display:none;}
#container .cts1 .cts1_left .gameImg{height:560px;}
#container .cts1 .cts1_left .gameImg a{display:block; height: 100%;}
#container .cts1 .cts1_left .gameImg a.game02{display:none;}
#container .cts1 .cts1_right{float:right; width:calc(100% - 23.65rem); padding-left:1.4rem;}
/* #container .cts1 .cts1_right .swiper-slide{padding-top:70%;} */
#container .cts1 .cts1_right .cts1_slide{height:560px; overflow:hidden; border-radius:1rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);}
#container .cts1 .cts1_right .cts1_slide img{width:100%; height:100%;}
#container .cts1 .cts1_right .cts1_slide .pages1{top:.75rem; bottom:auto; text-align:right; padding-right:.75rem;}
#container .cts1 .cts1_right .cts1_quick{margin-top:1.4rem;}
#container .cts1 .cts1_right .cts1_quick ul{display:flex; justify-content: space-between; }
#container .cts1 .cts1_right .cts1_quick ul li{flex-basis:23%; height:9rem; background:#fff; border-radius:1rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);}
#container .cts1 .cts1_right .cts1_quick ul li a{display:block; width:100%; height:100%; display: flex; flex-direction: column; align-items: center;justify-content: center; border-radius:1rem; text-align:center; font-size:1rem; color:#444;}
#container .cts1 .cts1_right .cts1_quick ul li img{display:block; margin:0 auto .25rem; }
#container .cts1 .cts1_right .cts1_quick ul li:hover a{border:5px solid #0678FE;}
#container .cts2{background:url('/images/web/main/event-bg.jpg')no-repeat 50% 50%; background-size:cover; padding:6rem 0 4rem;}
#container .cts2 .inn{position:relative;}
#container .cts2 .inn:before{ content : ""; display : block; position : absolute; right :0; top:-3.5rem; width : 14.65rem; height : 11.15rem; background: url("/images/web/main/evnet-img.png") no-repeat left top; background-size:100%;}
#container .cts2 .round{position:relative; background:#fff; padding:2rem 2rem 0.5rem;}
#container .cts2 .eventWrap{padding-bottom:3.5rem;}
#container .cts2 .eventWrap .imgZone{padding-top:100%; border-radius:.7rem; margin-bottom:1rem;}
#container .cts2 .eventWrap .eveTit{font-size:.9rem; line-height:1.5; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; word-break: break-all; line-height: 1.3em;height: 1.3em;}
#container .cts2 .eventWrap .eveList a{display:block; cursor:pointer;}
#container .cts2 .swiper-button-next.next2,
#container .cts2 .swiper-button-prev.prev2{width:1.9rem; height:1.9rem; background-size:1.9rem 1.9rem; top:auto; bottom:.75rem;}
#container .cts2 .swiper-button-next.next2{background:url('/images/web/main/next2.svg')no-repeat 50% 50%; right:0rem; background-size:1.9rem 1.9rem;}
#container .cts2 .swiper-button-prev.prev2{background:url('/images/web/main/prev2.svg')no-repeat 50% 50%; left:0rem; background-size:1.9rem 1.9rem;}
#container .cts2 .pages2{bottom:1.5rem;}
#container .cts2 .pages2 .swiper-pagination-bullet{border:2px solid #ababab;}
#container .cts2 .pages2 .swiper-pagination-bullet-active{border:none;}
#container .cts3{position:relative;background:url('/images/web/main/webton-bg.jpg')no-repeat 50% 50%; background-size:cover; padding:6rem 0 4rem;}
#container .cts3:before{ content : ""; display : block; position : absolute; left :0; bottom:0; width : 12.8rem; height : 20.45rem; background: url("/images/web/main/webton-img.png") no-repeat left top; background-size:100%;}
#container .cts3 .inn{position:relative;}
#container .cts3 .ton_Tab{position :absolute; right :0; top:0.15rem;}
#container .cts3 .ton_Tab ul{text-align:right;}
#container .cts3 .ton_Tab ul li{display:inline-block; color:#fff; padding:.5rem 1.2rem; font-size:1.1rem; line-height:1; border-radius:1rem; transition: background 0.1s ease-out; }
#container .cts3 .ton_Tab ul li a {color:inherit;}
#container .cts3 .ton_Tab ul li.on{background:#fff; border-radius:1rem; color:#3459A7;}
#container .cts3 .webtonWrap{position:relative; padding-bottom:3.5rem;}
#container .cts3 .webtonWrap .webtList{border-radius:.7rem; overflow:hidden;}
#container .cts3 .webtonWrap .noList{color:#fff; text-align:center;}
#container .cts3 .webtonWrap .noList img{width:19rem; display:block; margin:0 auto;}
#container .cts3 .webtonWrap .imgZone{padding-top:75%; }
#container .cts3 .webtonWrap .webtList a{display:block; cursor:pointer;}
#container .cts3 .webtonWrap .eveTit{ background:#fff; padding:.5rem; height:4.5rem;}
#container .cts3 .webtonWrap .eveTit p.tit{font-size:.9rem; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; word-break: break-all; line-height: 1.3rem;height: 1.3rem;}
#container .cts3 .webtonWrap .eveTit p.date{color:#888; margin-top:.6rem;}
#container .cts3 .webtonWrap .eveTit p.score {margin-top:.5rem;}
#container .cts3 .webtonWrap .eveTit p.score span{display:inline-block; background:#FFDD00; padding:.3rem .7rem; border-radius:1rem; line-height:1; margin-right:.5rem;}
#container .cts3 .swiper-button-next.next3,
#container .cts3 .swiper-button-prev.prev3{width:1.9rem; height:1.9rem; top:auto; bottom:.75rem;}
#container .cts3 .swiper-button-next.next3{background:url('/images/web/main/next3.svg')no-repeat 50% 50%; right:0rem; background-size:1.9rem 1.9rem ;}
#container .cts3 .swiper-button-prev.prev3{background:url('/images/web/main/prev3.svg')no-repeat 50% 50%; left:0rem; background-size:1.9rem 1.9rem ;}
#container .cts3 .pages3{bottom:1.5rem;}
#container .cts3 .pages3 .swiper-pagination-bullet-active{background:#FFDD00;}
#container .notice{background:#F5F5F5; padding:1.5rem 0;}
#container .notice .inn{display:flex; justify-content: space-between;}
#container .notice .inn h3{position:relative; padding:0 2rem 0 3rem; border-right:1px solid #ddd; color: #0F3F76; font-size:1.2rem; height:2.75rem; line-height:2.75rem; margin-right:2rem;}
#container .notice .inn h3:before{ content : ""; display : block; position : absolute; left :0; top:50%;transform:translateY(-50%); width : 2.75rem; height : 2.75rem; background: url("/images/web/main/notice_icon.png") no-repeat left top; background-size:100%;}
#container .notice .inn .noticeWrap{ height: 2.75rem; width:100%;}
#container .notice .inn .noticeWrap .notList{height:2.75rem !important; line-height:2.75rem; font-size:1rem; padding-right:3rem; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; }
#container .notice .inn .noticeWrap .notList span{display:inline-block; margin-right:2rem;}
#container .notice .swiper-button-next.next4,
#container .notice .swiper-button-prev.prev4{width:.85rem; height:.5rem; margin-top:0; }
#container .notice .swiper-button-next.next4{background:url('/images/web/main/next4.png')no-repeat 50% 50%; right:0rem; background-size:.85rem .5rem; }
#container .notice .swiper-button-prev.prev4{background:url('/images/web/main/prev4.png')no-repeat 50% 50%; left:auto; right:1.3rem; background-size:.85rem .5rem; }
#container .footer{text-align:center; font-size:.9rem; padding:2rem 1rem; color:#444; border-top:1px solid #ddd;}
#container .footer ul{margin:1.5rem 0; }
#container .footer ul li{position:relative;display:inline-block; padding:0 1.5rem; }
#container .footer ul li a{color:#444;}
#container .footer ul li a b{color:#104076;}
#container .footer ul li:before{content:'';display : block; position : absolute; left :0; top:50%; margin-top : -0.25rem; width :1px; height : .5rem; background : #ddd; }
#container .footer ul li:first-child:before{display:none;}
#container .footer p{line-height:1.5; }
#container .footer p.copy{margin-top:.3rem;}
/*�����̵�ɼ�*/
.swiper-pagination-bullet{width:.75rem; height:.75rem; opacity:1; background:#fff; box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3); cursor:pointer}
.swiper-pagination-bullet-active{background:#0F3F76;}
/*�����˾�*/
.mainPop{position:fixed; left:0; top:0; background:rgba(0,0,0,0.8); width:100%;height:100%; z-index:900; transition: all 0.2s ease-out 0s;}
.mainPop > div{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:999; overflow:hidden; border-radius:15px; box-shadow: 0 0px 10px rgb(0, 0, 0, 0.3);}
.mainPop .popbtn{height:3rem; line-height:3rem; overflow:hidden; background:#fff; }
.mainPop .popbtn a{float:left;display:block; width:50%; text-align:center; font-size:1rem;}
.mainPop .popbtn a:first-child{border-right:1px solid #ddd;}
.endPopup{position:fixed; left:0; top:0; background:rgba(0,0,0,0.8); width:100%;height:100%; z-index:900; transition: all 0.2s ease-out 0s;}
.endPopup > div{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:999; overflow:hidden; border-radius:15px; box-shadow: 0 0px 10px rgb(0, 0, 0, 0.3);}
.endPopup .popbtn{height:3rem; line-height:3rem; overflow:hidden; background:#fff; }
.endPopup .popbtn a{float:left;display:block; width:100%; text-align:center; font-size:1rem;}
/********************************************************
�� ���̾ƿ� ����
********************************************************/
@media (max-width:1600px){
#container .cts3 .inn{padding:0 1rem 0 10vw;}
#container .cts3 .ton_Tab{position:relative; margin-bottom:1.5rem;}
#container .cts3 .ton_Tab ul{text-align:left;}
#header .gnb ul li a span{display:none;}
/* #header #nav > ul > li .depth2{width:63rem; margin-left: -34.5rem;} */
#header #nav > ul > li .depth2 .tit img{display:none;}
/* #header #nav > ul > li:nth-child(1) .depth2 ul{left:21%;}
#header #nav > ul > li:nth-child(2) .depth2 ul{left:35%;}
#header #nav > ul > li:nth-child(3) .depth2 ul{left:46%;}
#header #nav > ul > li:nth-child(4) .depth2 ul{left:57%;}
#header #nav > ul > li:nth-child(5) .depth2 ul{left:68%;}
#header #nav > ul > li:nth-child(6) .depth2 ul{left: 80%;} */
}
@media (max-width:1450px){
#header #nav > ul > li .depth2 .tit{visibility:collapse}
/* #header #nav > ul > li .depth2{width:49rem; margin-left: -25.5rem;}
#header #nav > ul > li:nth-child(1) .depth2 ul{left:14%;}
#header #nav > ul > li:nth-child(2) .depth2 ul{left:30%;}
#header #nav > ul > li:nth-child(3) .depth2 ul{left:42%;}
#header #nav > ul > li:nth-child(4) .depth2 ul{left:54%;}
#header #nav > ul > li:nth-child(5) .depth2 ul{left:66%;} */
}
@media (max-width:1350px){
#header #nav > ul > li .depth2 ul a{font-size:.7rem;}
/* #header #nav > ul > li:nth-child(1) .depth2 ul{left:16%;}
#header #nav > ul > li:nth-child(2) .depth2 ul{left:31%;}
#header #nav > ul > li:nth-child(3) .depth2 ul{left:42%;}
#header #nav > ul > li:nth-child(4) .depth2 ul{left:53%;}
#header #nav > ul > li:nth-child(5) .depth2 ul{left:65%;}
#header #nav > ul > li:nth-child(6) .depth2 ul{left:78%} */
}
@media (max-width:1300px){
html{font-size:18px;}
body{font-size:1rem}
.inn{width:100%; padding:0 1rem;}
#menuAll .mobile_top > ul{width:100%; padding:0 1rem;}
#container .cts1 .cts1_right .cts1_slide{height:29rem}
#container .cts1 .cts1_left .round:first-child{height:29rem}
#container .cts3 .inn{padding:0 1rem 0 25vw;}
#header #nav{display:none}
#header #nav > ul > li > div > a{font-size:.8rem;}
#header #nav > ul > li:nth-child(1) .depth2 ul{left:18%;}
#header #nav > ul > li:nth-child(5) .depth2 ul{left:63.5%;}
#header #nav > ul > li:nth-child(6) .depth2 ul{left:76%}
}
@media (max-width:1130px){
#header #nav{display:none}
}
/********************************************************
�� �º�
********************************************************/
@media (max-width:1030px){
html{font-size:16px;}
body{font-size:1rem}
.web{display:none;}
.tablet{display:block;}
/*��ü��*/
.webWrap #header.open .btnAll > span{background:#fff;}
#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; z-index:100; transition:right 0.45s;}
#header.open #navi{transition:right 0.45s; right:0px;}
#menuAll{display: block;}
#navi h3{display:none;}
#menuAll .menu-member{display:block; background:#3A8BFC; padding:.55rem 1rem; padding-left:10rem;}
#menuAll .menu-member ul li{display:inline-block; margin-right:1rem;}
#menuAll .menu-member ul li a{ color:#fff;}
#menuAll .menu-member ul li select{border:none; border-radius:.25rem; min-width:8rem; }
#menuAll .menu-member ul li span{display:none;}
#menuAll .mobile_top{width:100%;height:auto; flex-direction: column; margin-top:0}
#menuAll .mobile_top .mbtop{flex-direction: column;}
#menuAll .mobile_top .mbtop > li > a:after{display:none;}
/*1��*/
#navi ul.mbtop {width:100%; margin:0; padding:0;}
#navi ul.mbtop li {margin:0; float:none; width:100%; padding-right:0; border-bottom:1px #eeeeee solid; position:relative; }
#navi ul.mbtop li:after{ content :"\ea4c"; display : block; position : absolute; right:1rem; top:15px; font-size:1.3rem; font-family:'remixicon'; font-weight:500; }
#navi ul.mbtop li a {padding:0; background: none; text-align:left; display:block; width:100%; padding:1rem 1rem;box-sizing:border-box; font-size:1rem; color:#262626;}
#navi ul.mbtop li.open_li{ position:relative;}
#navi ul.mbtop li.open_li:after{ content :"\ea76";}
/*2��*/
#navi ul.mbtop li ul {display:none; float:none; background-color:#d3e6ff; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding:1rem 1rem; margin-top:0;}
#navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box; background: none; padding:0;}
#navi ul.mbtop li ul li a {color:#262626; background:url(none); height:auto; padding-left:0; font-size:.9rem;}
#navi ul.mbtop li ul li a:hover{color:#F56C1C;}
#navi ul.mbtop li ul li:after,
#navi ul.mbtop li ul li:before{display:none;}
#navi ul.mbtop li ul li:hover{background:none;}
/*3��*/
#navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
#navi ul.mbtop li ul li ul li {display:none;}
#menuAll .mobile_top > ul > li:nth-child(2) > a{ background: #fff; }
#menuAll .mobile_top > ul > li:nth-child(3) > a{ background: #fff; }
#menuAll .mobile_top > ul > li:nth-child(4) > a{ background: #fff; }
#menuAll .mobile_top > ul > li:nth-child(5) > a{ background: #fff; }
#navi ul.mbtop li.open_li > a {color:#0358CE;}
/*������*/
.visual{height:auto;}
.visual .inn{padding-top:3rem;}
.visual .inn .vtxt{float:none; width:100%; text-align:center; padding-top:1rem;}
.visual .inn .vtxt ul{margin:1rem 0;}
.visual .inn .vtxt ul li a{font-size:.9rem; padding: .5rem 2.3rem .6rem .8rem;}
/* .visual .inn .vimg{float:none; width:100%; padding:0 30vw;} */
.visual .inn .vimg img{display:block; margin:0 auto;}
/* 추가 css 220331 */
.visual .inn .v-txt p {width:65%;}
.visual .inn .v-cont .v-left ul {width:100%; padding: 0 1.5rem 3rem;}
.visual .inn .v-cont .v-right ul {width:100%; padding: 0 1.5rem 3rem;}
#container .cts1{padding: 6rem 0 2rem;}
#container .cts1 .cts1_left{width:100%; display:flex; align-items: flex-start; justify-content: space-between;}
#container .cts1 .cts1_left .round{flex-basis:49%; height:auto;}
#container .cts1 .cts1_left .round:first-child{height:auto;}
#container .cts1 .cts1_left .gameImg a{height:auto;}
#container .cts1 .cts1_left .gameImg a.game01{display:none;}
#container .cts1 .cts1_left .gameImg a.game02{display:block;}
#container .cts1 .cts1_left > .tabImg img.img01{display:none;}
#container .cts1 .cts1_left > .tabImg img.img02{display:block;}
#container .cts1 .cts1_right{width:100%; padding-left:0; margin-bottom:1rem;}
#container .cts1 .cts1_right .cts1_slide{height:auto;}
#container .cts2{padding:4rem 0 3rem;}
#container .cts3{padding:3rem 0 3rem;}
#container .footer{padding:2rem 1rem;}
}
@media (max-width:787px){
html{font-size:15px;}
body{font-size:1rem}
.mob{display:block;}
/* 추가 css 220331 */
.visual .inn .v-txt p {width: 65%;}
.visual .inn .v-cont .v-left ul {padding: 0 1rem 3rem;}
.visual .inn .v-cont .v-right ul {padding: 0 1rem 3rem;}
/* .visual .inn .vimg{float:none; width:100%; padding:0 15vw;} */
#container .titH3{text-align:center; }
#container .cts2{padding:3rem 0 8rem}
#container .cts2 .inn:before{right:50%; bottom:-11rem; top:auto; margin-right:-7.325rem;}
#container .cts3 .titH3{text-align:left;}
#container .footer ul li{ margin:.2rem 0; padding:0 1rem;}
#header .gnb ul li:not(:first-child){display:none;}
#menuAll .menu-member{padding:3rem .55rem 1rem;}
.mainPop > div{width:65%;}
}
@media (max-width: 550px) {
/* 추가 css 220331 */
.visual .inn .v-txt p {font-size: 0.8rem; width: 100%; margin: 1rem auto;}
.visual .inn .v-cont {display: block;}
.visual .inn .v-cont > div {width:100%;}
.visual .inn .v-cont > div.vimg {width: 65%; margin: 0 auto;}
.visual .inn .v-cont .v-left ul {flex-direction: row; padding: 0;}
.visual .inn .v-cont .v-left ul li {width:48%;}
.visual .inn .v-cont .v-left ul li:first-child {margin-right: 1%;}
.visual .inn .v-cont .v-left ul li:last-child {margin-left: 1%;}
.visual .inn .v-cont .v-left ul li a {padding:10px 0 10px 15px;}
.visual .inn .v-cont .v-left ul li a:before {transform: rotate(-45deg);}
.visual .inn .v-cont .v-left ul li a:after {transform: rotate(45deg);}
.visual .inn .v-cont .v-right ul li a {padding: 10px 0 10px 20px;}
.visual .inn .v-cont .v-right ul li a:before {top: 23px; transform: rotate(-45deg);}
.visual .inn .v-cont .v-right ul li a:after {bottom: 23px; transform: rotate(45deg);}
}
@media (max-width:485px){
.visual .inn .vtxt h3{font-size:1.2rem;}
#container .titH3{ font-size:1.5rem;}
#container .cts1 .cts1_left{flex-direction: column;}
#container .cts1 .cts1_left .round{flex-basis:100%; }
#container .cts1 .cts1_left > .tabImg img.img01{display:block;}
#container .cts1 .cts1_left > .tabImg img.img02{display:none;}
#container .cts1 .cts1_right .cts1_quick ul li{ height:7rem;}
#container .cts1 .cts1_right .cts1_quick ul li img{max-width:50%;}
#container .cts2 .round{padding:1rem 1rem 0.5rem;}
#container .cts3{padding:3rem 0 1rem;}
#container .cts3 .inn{padding:0 1rem;}
#container .cts3 .inn .titH3{padding-left:25vw; text-align:left;}
#container .cts3 .ton_Tab{padding-left:25vw}
#container .cts3 .ton_Tab{text-align:left;}
#container .cts3 .ton_Tab ul li{padding:0.4rem .8rem;}
#container .cts3:before{left:1rem; bottom:auto; top:2rem; width:6.8rem; height:10rem;}
#container .notice .inn h3{text-indent:-10000px; padding:0 0 0 3rem; margin-right:1rem; border-right:none;}
#container .notice .inn .noticeWrap .notList span{display:none;}
#container .footer h3 img{max-width:40%;}
.mainPop > div{width:80%;}
}
@media (max-width:386px){
#container .cts3 .inn .titH3{font-size:1.3rem;}
#container .cts1 .cts1_right .cts1_quick ul{flex-direction: row; flex-wrap: wrap;}
#container .cts1 .cts1_right .cts1_quick ul li{flex-basis: 48%; height:auto;}
#container .cts1 .cts1_right .cts1_quick ul li a{padding:1rem 0;}
#container .cts1 .cts1_right .cts1_quick ul li:nth-child(n + 3){margin-top:1rem;}
#container .cts1 .cts1_right .cts1_quick ul li img{max-width:50%;}
}