@charset "UTF-8";

/*contnet*/
.mainVisual img{width: 100%; height: 430px; object-fit: cover;}
.mainVisual .slick-arrow{color: #fff; font-weight: 200; font-size: 30px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 100; background: rgba(255,255,255,0.3); border-radius: 50%; padding:10px; cursor: pointer;}
.mainVisual .slick-arrow.prev{left: 20px;}
.mainVisual .slick-arrow.next{right: 20px;}
.mainVisual .slick-dots{position: absolute; width: 100%; bottom: 10px; display: flex; justify-content: center; gap: 10px; border-radius: 20px;}
.mainVisual .slick-dots button{font-size: 0; width: 20px; height: 3px; background: rgba(255,255,255,0.3); cursor: pointer;}
.mainVisual .slick-dots .slick-active button{background: #ffd89b;}

.mainGame ul{gap: 40px; margin-top: 40px;}
.mainGame li{width: calc(25% - 34px); position: relative; z-index: 0;}
.mainGame li::before,.mainGame li::after{content: ""; display: block; position: absolute; z-index: -2; width:calc(100% + 6px); height: calc(100% + 6px); right: -6px; bottom: -6px; background: #FF9C3F; background: linear-gradient(180deg, rgba(255, 156, 63, 1) 0%, rgba(255, 232, 188, 1) 22%, rgba(255, 156, 63, 1) 44%, rgba(255, 203, 140, 1) 70%, rgba(255, 156, 63, 1) 100%); border-radius: 22px;}
.mainGame li::before{top: -3px; left: -3px; z-index: -1; background: linear-gradient(90deg, rgba(255, 156, 63, 1) 0%, rgba(255, 232, 188, 1) 22%, rgba(255, 156, 63, 1) 44%, rgba(255, 203, 140, 1) 70%, rgba(255, 156, 63, 1) 100%); border-radius: 22px;}
.mainGame li h3{position: absolute; top:15px; font-size: 40px; text-align: center; width: 100%; z-index: 100; font-family: 'GangwonEducationTteontteon'; background: -webkit-linear-gradient(180deg, rgba(255, 156, 63, 1) 0%, rgba(255, 232, 188, 1) 22%, rgba(255, 156, 63, 1) 44%, rgba(255, 203, 140, 1) 70%, rgba(255, 156, 63, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-top: 10px;}
.mainGame li img{width: 100%;height: 100%;object-fit: cover;}
.mainGame .imgScale{border-radius: 20px; width: 100%; height: 250px;}

.banner li{width: 280px;}
.banner li img{width: 100%;}

.pcLogin{display: block; position: static; transform: unset; width: 100%; box-sizing: border-box;}
.pcLogin::before{display: none;}

@media only screen and (max-width:767px){
    #content{padding: 0;}
    #content,.conRight,.headerTop{display: block;}
    .main #content{height: auto; margin-top: 0;}
    .mainCon,.wFull .mainCon{width: 100%;}
    .mainVisual{border-radius: 0;}
    .mainVisual img{height: 160px;}
    .mainVisual .slick-arrow{font-size: 18px;}

    .mainGame{padding: 20px; padding-top: 0;}
    .mainGame ul{flex-wrap: wrap; gap: 25px; margin-top: 30px;}
    .mainGame li{width: calc(50% - 15px)}
    .mainGame li h3{font-size: 20px; top: 5px;}
    .banner{padding: 20px;}
    .banner li{width: 100%;}
    .banner li img{width: 100%;}

    .pcLogin{width: 70%; position: fixed; transform: translate(-50%,-50%); display: none;}
    .pcLogin::before{display: block;}

    .mainGame .imgScale{height: 170px;}
}