@charset "utf-8";

@media all and (max-width:1360px) {

.main-slide1{background-image:url('../images/bg-mainVisual01-t.png')}
.main-slide2{background-image:url('../images/bg-mainVisual02-t.png')}
.main-slide3{background-image:url('../images/bg-mainVisual03-t.png')}
.main-slide4{background-image:url('../images/bg-mainVisual04-t.png')}
.main-slide5{background-image:url('../images/bg-mainVisual05-t.png')}
.slide-pd{padding-bottom:6em;}
.main-slider .slide-con{padding:0 2em;text-align:center;}
.main-slider .slide-con h1{margin:.25em auto;}

.premium-inner .main-con{padding:4em 0}
.main-con{padding:4em 1em}

.ser-list ul li p{font-size:1.1em;}
.pre-right{width:70%}

.pre-wide-list.bg6 .pre-right {  }
.pre-wide-list.bg6 .pre-right .preCon-bg .device1 .device-inner {}
.pre-wide-list.bg6 .pre-right .device-inner {}
.html5-list li{margin:0 .5em 2em;}
#footer .totop{right:1em}

}

@media all and (max-width:1280px) {

    .pre-left .left-inner .preList-wrap{margin-left:2em;}
    .pre-left .left-inner .pre-list li{width:14.5em!important}
    .pre-left .left-inner .pre-list li.slick-current{box-shadow:-2em 7px 0px rgb(9 127 255 / 50%);}
    .pre-right .preCon-bg{width:17.5em;}
    .pre-right .preCon-bg .device1{left:0;right:0;}
    .pre-right .pre-txt{padding-left:2em;}
	
	.pre-wide-list.bg6 .pre-right .pre-txt{padding-left:0;padding-top:0.2em;}
	.pre-wide-list.bg6 .pre-right .pre-txt .ann{margin-top:1em;}
	.pre-wide-list.bg6 .pre-right .pre-txt>div{padding-top:0.4em;}
	
    .row-container li p:nth-child(2){min-height:7em;padding:1em 0;}
	.pre-right .preCon-bg .device1{position:relative;}
    #contact .f-wrap .fR-inner{max-width:100%;}
    #contact h2{font-size:2.2em;}
    .check-round input[type="checkbox"] + label{padding:1em}
}

@media all and (max-width:1024px) {

    .main-con h2{font-size:1.85em;}
    .pre-wide-list h2{padding:0 1em;font-size:1.85em}

    .pre-left{position:absolute;top:8em;width:100%;padding-top:0;}
    .pre-left .left-inner{max-width:initial;text-align:center;}
    .pre-left .left-inner .preList-wrap{margin-left:1em;margin-right:1em;}
    .pre-left .left-inner .pre-list{max-width:86.5%;margin:0 auto;}
    .pre-left .left-inner .preList-wrap .slick-track{width:100%!important}
    .pre-left .left-inner .pre-list li{width:initial;width:14em!important;margin:0 .85em .75em;font-size:.85em;text-align:center;}
    .pre-left .left-inner .pre-list li.active{margin-left:0;box-shadow:none;}
    .pre-wide-list{padding:4em 0}
    .pre-right{float:none;width:95%;margin:10em auto 0;border-radius:20px;}
    .pre-left .pre-list .slick-list{padding:0!important}
    .pre-right .pre-txt .inner-tit{font-size:1.5em}
    .pre-right .pre-txt .inner-label{font-size:.85em;}
    .pre-right .pre-txt .inner-txt{font-size:.95em;}
    .pre-right .pre-txt .ann p{font-size:.85em;}
	
	
	.pre-wide-list.bg6 .pre-right .pre-txt .flex-row{flex-direction:column-reverse; gap: 1em;}
	
	
    .row-container li{width:32%}
    .row-container li p:nth-child(1){font-size:1.25em;}
    .row-container li p:nth-child(2){font-size:.95em;}

    .worksList-wrap .work-info>div{padding:1em 0 2.3em}
    .worksList-wrap .work-img{width:43%}
    .worksList-wrap .work-info{width:calc(100% - 36%)}
    .worksList-wrap .work-info .gameImg-list li{width:calc(25% - .75em)}
    .worksList-wrap .work-info .gameImg-list li:nth-child(5){display:none;}

    .worksList-wrap .work-info h3{font-size:1.375em}
    .worksList-wrap .work-info p{font-size:.95em}

    .html5-list li{width:calc(50% - 1.5em);margin:0 .6em 2em;}
    .html5-list li .basic .basic-txt{padding:2.5em .25em 2em;}
    .html5-list li .basic p{font-size:1.25em;}

    #contact .f-wrap > div{float:none!important;width:80%;margin:0 auto;text-align:center;}
    #contact h2{font-size:1.85em;font-weight:600;text-align:center;}
    #contact .f-wrap .fR{margin:3em auto 0;padding:2em 1em;background:#f5f5f5;border-radius:10px;}
    #contact .f-wrap .fR-inner{max-width:85%;margin:0 auto;}
    #contact .f-wrap .fR-inner .tit{padding-bottom:1.5em;font-size:1.1em;letter-spacing:-.5px;}
    .txtArea-wrap .add-file .file-btn{background:#fff}
    .contact-ipt input{background:#f5f5f5}
    .contact-ipt .txtArea-wrap textarea{background:#f5f5f5}
    .check-round input[type="checkbox"] + label{padding:1em 0}

    #game-popup{width:95%}
	
    .pop-content iframe{width:100%;}
    .pop-header p{font-size:.95em;letter-spacing:-.7px;}
    .pop-content .popInner-btn{margin-right:.5em;}
    .pop-header p{padding-right:1em;}
}


@media all and (max-width:768px) {

    #header h1{margin-top:.95em}
    .main-container{padding-top:4em}
    .main-slide1{background-image:url('../images/bg-mainVisual01-m.png')}
	.main-slide2{background-image:url('../images/bg-mainVisual02-m.png')}
	.main-slide3{background-image:url('../images/bg-mainVisual03-m.png')}
	.main-slide4{background-image:url('../images/bg-mainVisual04-m.png')}
	.main-slide5{background-image:url('../images/bg-mainVisual05-m.png')}
	.main-slider .slide-con .tit-sm{font-size:1.4em;margin-bottom:.5em;}
	.main-slider .slide-con h1{font-size:2.2em;}
	.main-slider .slide-con .tit-subs span{display:inline;}
    .main-slider .btn-radius{margin-top:1.5em;font-size:.95em;}
    .main-slider .item{height:34.563em}
    .main-slider .slick-dots{bottom:2em;}
    .main-slider .slide-con .tit-subs{font-size:1em;}
    .main-con h2{font-size:1.8em;}
    #header #gnb > li a{line-height:4em;}

    .ser-list ul:nth-child(2){padding-top:0}
    .ser-list ul:nth-child(2) li:nth-child(3), .ser-list ul:nth-child(2) li:nth-child(4){padding-bottom:0}
    .ser-list ul li{width:50%;padding:0 0 1.5em;}
    .ser-list ul li i{width:2.7em;height:2.7em;}
    .ser-list ul li i.ser1{background:url(../images/icon/service1.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser2{background:url(../images/icon/service2.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser3{background:url(../images/icon/service3.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser4{background:url(../images/icon/service4.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser5{background:url(../images/icon/service5.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser6{background:url(../images/icon/service6.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser7{background:url(../images/icon/service7.png)50%/2.7em no-repeat}
    .ser-list ul li i.ser8{background:url(../images/icon/service8.png)50%/2.7em no-repeat}

    .pre-wide-list h2 span{display:block;}
    .pre-wide-list.bg5 .pre-right .preCon-bg .device1 .device-bt a{color:#000}
    .pre-wide-list.bg5 .pre-right .preCon-bg .device1 .device-bt a .blank{background:url(../images/icon/ico-blank.png)50%/10px no-repeat}
    .pre-left{display:none;}
    .pre-left{top:10em;}
    .pre-right{position:relative;height:auto;margin:7em auto 0;}

    .pre-right .preCon-bg{width:10.5em;}
    .pre-right .preCon-bg .device1 .device-inner{width:100%;height:22em}
    .pre-right .m-cate{display:inline-block;position:absolute;top:-5em;left:50%;min-width:15em;padding:.75em 0;border-radius:10em;background:#fff;color:#1a88ff;font-weight:500;transform:translateX(-50%);text-align:center;}
    .pre-right .preCon-bg .device1 .device-bt a{margin:.5em 0 0 0;padding:.2em 1em;background:#fff;border-radius:20px;}

    .premium-view .slick-dots{position:absolute;bottom:1.5em;left:50%;transform:translateX(-50%);text-align:center}
    .premium-view .slick-dots li{display:inline-block;}
    .premium-view .slick-dots li button{width:10px;height:10px;margin:0 .25em;border-radius:10px;background:#fff;opacity:.6;transition:.3s;text-indent:-999em;}
    .premium-view .slick-dots li.slick-active button{width:20px;opacity:1;}

    .worksCate-wrap ul{overflow-x:auto;margin-bottom:2.2em;padding-bottom:.5em;white-space:nowrap;}
    .worksCate-wrap ul li{margin-bottom:0}
    .worksList-wrap ul{display:block;overflow:hidden;}
    .worksList-wrap li{display:block;float:left;width:50%;padding-bottom:2em;}
    .worksList-wrap li:nth-child(odd){padding-right:.5em;}
    .worksList-wrap li:nth-child(even){padding-left:.5em;}
    .worksList-wrap .work-info h3{font-size:1.25em;}
    .worksList-wrap .work-info p{overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;}
    .worksList-wrap .work-img{display:inline-block;float:none;width:100%;}
    .worksList-wrap .work-info{display:inline-block;float:none;width:100%;padding-left:0}
    .worksList-wrap .work-info>div{padding:1em 0 0}
    .worksList-wrap .work-info h3{overflow:hidden;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .worksList-wrap .work-info p{padding-top:.4em; min-height:3.3em;}
    .worksList-wrap .work-info .gameImg-list{display:none}

    .row-container{display:block;}
    .row-container li{position:relative;width:100%;max-width:initial;height:0;padding-top:40.28%;border-radius:10px;overflow:hidden;}
    .row-container li:not(:last-child){margin-bottom:1em;}
    .row-container li:before{display:block;content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:100%;background:rgba(0,0,0,.7);z-index:1}
    .row-container li .txt-box{position:absolute;top:50%;left:50%;width:95%;max-width:20em;z-index:2;transform:translate(-50%, -50%);color:#fff;text-align:center;}
    .row-container li p:nth-child(1){font-size:1.35em;}
    .row-container li p:nth-child(2){min-height:initial;padding:1em 0 0}
    .row-container .img-wrap{position:absolute;top:0;}
    .row-container .img-wrap{width:100%;}
    .row-container .img-wrap img{width:100%;}

    .client-list li{width:calc(100% / 5);padding-bottom:1em;}
    .client-list li.pb-0{padding-bottom:1em;}

    .main-con h2 span{display:block}
    #contact .f-wrap > div{width:100%;}

    .pop-content div ul li span{font-size:.9em;line-height:1.3}
    .pop-content .link-new{font-size:.9em;}
    
    .pop-header{padding:.75em 1em}
    .pop-content iframe{width:95%;}
}

@media all and (max-width:580px) {

    .main-con h2{margin-bottom:1em;}
    .pre-right{padding:1em;}
    .pre-right .pre-txt{padding-left:1em;}
    .pre-right .pre-txt .inner-txt span{display:initial;}
    .worksList-wrap .work-info>div{padding:.75em 0 0}
    .worksList-wrap .work-info h3{font-size:1.1em;}
    .row-container li{padding-top:60.28%;}

    .html5-list li:last-child{width:60%}
    .html5-list li .html-inner{min-height:355px;}
    .html5-list li .basic p{font-size:1.1em}
    .html5-list li .action .tit{font-size:1.1em;}
    .html5-list li .action .close-btn{bottom:3em;}
    #contact .f-wrap .fR-inner{max-width:100%;}

    .pop-content .popInner-btn{font-size:.85em;}
}

@media all and (max-width:480px) {

    .main-container{padding-top:4em;}
    #header h1{margin-top:1em}
    #header .logo{background-size:9em;}
    #header #gnb li a span{display:none;}

	.main-slider .slide-con .tit-sm{font-size:1em}
	.main-slider .slide-con h1{font-size:1.8em;}

    .main-con h2{font-size:1.5em;margin-bottom:1.5em}
    .ser-list ul li p{font-size:.95em;}

    .pre-wide-list h2{font-size:1.5em;line-height:1.3}
    .pre-left .left-inner .pre-list li{height:3.3em;line-height:3.3em}
    .pre-right{height:24em}
    .pre-right .pre-txt>div{padding-top:.75em;}
    .pre-right .pre-txt .inner-tit{font-size:1.25em;margin:0;}

    .pre-right .pre-txt .ann{margin-top:1em;}
    .pre-right .pre-txt .ann p{font-size:.8em;}
    .pre-right .preCon-bg{width:8.5em;}
    .pre-right .preCon-bg .device1 .device-inner{height:18em;}
    .pre-right .pre-txt .ann{display:none}

    .worksList-wrap li{float:none;width:100%;padding-bottom:2em;}
    .worksList-wrap li:nth-child(odd){padding-right:0;}
    .worksList-wrap li:nth-child(even){padding-left:0;}
    .worksList-wrap .work-info{padding-left:.5em;}
    .worksList-wrap .work-info h3{font-size:1.2em;}
    .worksList-wrap .btn-wrap{padding-top:1em;}
    .worksList-wrap .btn-wrap a{padding:.65em 2em;}


    .row-container li p:nth-child(1){font-size:1.2em;}
    .row-container li p:nth-child(2){padding:1em .5em 0;font-size:.92em;}
    .client-list li{width:calc(100% / 4)}

    .chk-list li{width:50%;}
    .chk-list li:nth-child(3n){padding-right:.75em}
    .chk-list li:nth-child(even){padding-right:0}

    .html5-list li{width:95%}
    .html5-list li:last-child{width:95%}
    .html5-list li .html-inner{min-height:315px;background:url(../images/html_5.png)50% 100%/290px no-repeat}
    .html5-list li .action .close-btn{bottom:5.5em;}

    .html5-list li .action>div{display:none;}
    .html5-list li:nth-child(1) .html-inner{background:url(../images/html_1.png)50% 130%/380px no-repeat}
    .html5-list li:nth-child(2) .html-inner{background:url(../images/html_2.png)50% 130%/380px no-repeat}
    .html5-list li:nth-child(3) .html-inner{background:url(../images/html_3.png)50% 130%/380px no-repeat}
    .html5-list li:nth-child(4) .html-inner{background:url(../images/html_4.png)50% 130%/380px no-repeat}
    .html5-list li:nth-child(5) .html-inner{background:url(../images/html_5.png)50% 130%/380px no-repeat}
    .html5-list li .action .tit{padding-top:4em;}
    .html5-list li .basic .basic-txt{padding:0 1em;}
    .html5-list li .basic p{padding-top:1.75em;padding-bottom:1em;font-size:1.25em}




    #contact h2{font-size:1.5em;}
    .contact-btn{margin-top:1em;padding:.65em 3em}
    .contact-ipt .txtArea-wrap .add-file{bottom: 8.3em;}
}

/* @media (prefers-color-scheme: light) {
  #header{background:#ffffff;}
} */

/*
@media (prefers-color-scheme: dark) {
  /* 다크 모드에 적용할 스타일 정의
    #header{background:#ffffff;}

}*/