@media (max-width: 1500px){
	.inner{max-width: 1080px;}
	.cubeitem{right: -200px}
	.plusblock2 img{width: 60%}
	.plusblock3 img{width: 60%}
	.plusblock3{right: 0}
	.sub_plus01 img, .sub_plus02 img, .sub_plus03 img{width: 70%}
	.sub_plus02{bottom: -5%}
	
}


@media (max-width: 1024px){
	

	
	.nav_wrapper{position: relative !important}
	#intro li .section-content .inner .bannerbg{right: 0}
	#header .logo a img{padding: 30px}
	#video .tab-content{width: 100%}
	.youtube{margin: 0 auto}
	
	#intro ul{flex-wrap: wrap;}
	#intro li{width: 5%}
	#intro li.active {
    flex: none;
    width: 85%;}
    
    .fourtip ul li:nth-child(1) {
    margin-top: 0;}
	.fourtip ul li:nth-child(2) {
    margin-top: 0;}
    .fourtip ul li:nth-child(3) {
    margin-top: 0;}
    .fourtip ul li:nth-child(4) {
    margin-top: 0;}
	
	.fourtip ul li {
    flex: auto;
    margin: 5% 2%;
    text-align: center;
    border-radius: 30px;
    padding: 30px;
    opacity: 0;
    width: 40%;}
    
    .cubeitem{position: relative; top: 0; transform: translateY(0%); animation: none; margin-top: 20px}

    
    #cube{background: #f9f9f9 !important; padding-left: 30px; padding-right: 30px}
    

    
    .rightnav {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    min-width: auto;}
    
    .plusblock3 {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: -100px;
    animation: motion3 0.5s linear 0s infinite alternate;}
    
    .plusblock2 {
    position: absolute;
    z-index: 2;
    top: 50px;
    left: -100px;
    animation: motion2 0.5s linear 0s infinite alternate;}
    #four .title{text-align: center; opacity: 1}
    
    #four .fourtip ul li:nth-child(1){opacity: 1; transition-duration: 2s; transition-delay: 0.5s}
#four .fourtip ul li:nth-child(2){opacity: 1; transition-duration: 2s; transition-delay: 1s}
#four .fourtip ul li:nth-child(3){opacity: 1; transition-duration: 2s; transition-delay: 1.5s}
#four .fourtip ul li:nth-child(4){opacity: 1; transition-duration: 2s; transition-delay: 2s}


#cube h2{opacity: 1; transition-duration: 2s; transition-delay: 1s}
#cube h1{opacity: 1; transition-duration: 2s; transition-delay: 0.5s}
#cubee p{opacity: 1; transition-duration: 2s; transition-delay: 1.5s}
#cube a{opacity: 1; transition-duration: 2s; transition-delay: 1.5s}

#cube .step3 .step:nth-child(1){opacity: 1; transition-duration: 2s; transition-delay: 0.5s}
#cube .step3 .step:nth-child(2){opacity: 1; transition-duration: 2s; transition-delay: 1s}
#cube .step3 .step:nth-child(3){opacity: 1; transition-duration: 2s; transition-delay: 1.5s}
    .right_tab {
    position: relative;
    right: 0;
    top: 0;
    transform: translateY(0%);
    margin-top: 30px;}
    
    .right_tab h2{text-align: center}
    #video ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
    justify-content: center;}
    
    .fp-viewing-3 #footer {
    display: block !important;}
    
    #footer{padding-left: 15px; padding-right: 15px}
    #footer ul li:first-child{padding-right: 50px}
    #cube h1, #cube h2, #cube a, #cube p{opacity: 1}
    
    
    
    .brandstory{padding-left: 15px; padding-right: 15px;}
    .ci{padding-left: 15px; padding-right: 15px;}
    .edustory{padding-left: 15px; padding-right: 15px;}
    .chul{padding-left: 15px; padding-right: 15px;}
    .brand_table{padding-left: 15px; padding-right: 15px;}
    
    .sub_plus01 img{width: 60%}
    .sub_plus02 img{width: 60%}
    .sub_plus03 img{width: 60%}
    .sub_plus03{right: 0}
    .sub_plus02{right: 5%}
    
    .product03{padding-left: 15px; padding-right: 15px;}
    .product04{padding-left: 15px; padding-right: 15px;}
    .product05{padding-left: 15px; padding-right: 15px;}
    .product06{padding-left: 15px; padding-right: 15px;}
    .product07{padding-left: 15px; padding-right: 15px;}
    .step_list2{padding-left: 15px; padding-right: 15px;}
    .solution{padding-left: 15px; padding-right: 15px;}
    .menul_pu{padding-left: 15px; padding-right: 15px;}
    .step_list{padding-left: 15px; padding-right: 15px;}
    .friends{padding-left: 15px; padding-right: 15px;}
    .gamesystem{padding-left: 15px; padding-right: 15px;}
    .gamesystem .gamesystem_banner .tit2{margin-left: 0; margin-top: 20px}
    .ink{padding-left: 15px; padding-right: 15px;}
    .ink_list ul li {
    text-align: center;
    width: 25%;
    margin: 0 1% 0 0;}
    .pum ul{display: block;}
    .menul2{padding-left: 15px; padding-right: 15px;}
    .menul{padding-left: 15px; padding-right: 15px;}
    .menul3{padding-left: 15px; padding-right: 15px;}
    .cube_video{padding-left: 15px; padding-right: 15px;}
    .packge{padding-left: 15px; padding-right: 15px;}
    .monster01{padding-left: 15px; padding-right: 15px;}
    .monster02{padding-left: 15px; padding-right: 15px;}
    .monster03{padding-left: 15px; padding-right: 15px;}
    .space{padding-left: 15px; padding-right: 15px;}
    .space2{padding-left: 15px; padding-right: 15px;}
    .form_mail{padding-left: 15px; padding-right: 15px;}
}

@media (max-width: 800px){
	
	
	.hd_pops_con{width: 100% !important; height: auto !important;}
	

	.hd_pops{width: 90%;left: 50% !important; top: 5% !important; transform: translateX(-50%);}
	
	.hd_pops .hd_pops_close{bottom: -20px; color: #fff}

    .lang {
    position: absolute;
    right: 60px;
    top: 20px;}
    
	
	#header{position: fixed; background: #333;}
	#header .logo a img{padding: 0}
	
	.nav_wrapper{position: relative !important}
	#header .logo a img{width: 100%}
	
	#intro li .section-content h2{font-size: 30px; line-height: 50px;}
	#intro li .section-content p{font-size: 20px; line-height: 40px}
	
	#intro li .section-content h3{font-size: 30px; line-height: 50px;}
	#intro li .section-content h1{font-size: 40px; line-height: 50px;}
	
	#intro li .section-content .inner{margin: 0}
	.bannertitle{left: 5%}
	
	#intro li .section-content .inner .bannerbg {
    position: relative;
    left: 20%;
    top: 50%;
    transform: translateY(0%); text-align: right}
    
    #intro li .section-content .inner .bannerbg img{width: 60%;}
	#intro ul{flex-wrap: wrap;}
	#intro li{width: 100%}
	#intro li.active{flex: auto;}
	
	#intro li .section-title h2 {
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: rotate(0deg);
    margin-left: -10px;
    white-space: nowrap;}
    
    
    #four {
    padding: 50px 15px;}
    .plusblock1 img{width: 60%}
    .plusblock2 img{width: 60%}
    .plusblock3 img{width: 60%}
    .plusblock4 img{width: 60%}
    .plusblock5 img{width: 60%}
    .plusblock6 img{width: 60%}
   
   
   
   
   .fp-viewing-1 #header>ul>li>a{color: #fff}
.fp-viewing-1 #header .menu ul li > a{color: #fff}
.fp-viewing-1 #header .logo{background: none; background-repeat: no-repeat;}
.fp-viewing-1 #header .logo img{opacity: 1}

.fp-viewing-2 #header>ul>li>a{color: #fff}
.fp-viewing-2 #header .menu ul li > a{color: #fff}
.fp-viewing-2 #header .logo{background: none; background-repeat: no-repeat;}
.fp-viewing-2 #header .logo img{opacity: 1}


.fp-viewing-3 #header>ul>li>a{color: #fff}
.fp-viewing-3 #header .menu ul li > a{color: #fff}
.fp-viewing-3 #header .logo{background: none; background-repeat: no-repeat;}
.fp-viewing-3 #header .logo img{opacity: 1}

.fp-viewing-4 #header>ul>li>a{color: #fff}
.fp-viewing-4 #header .menu ul li > a{color: #fff}
.fp-viewing-4 #header .logo img{opacity: 1}
   
   
   
   
   
    #cube{
    padding: 50px 15px;}
    
    #video{
    padding: 50px 15px;}
    
    #video ul.tabs li img{display: inline-block}
    
    
    
    .big_title h2{font-size: 40px; line-height: 55px}
    
    .product06 .tit .right{display: none}
    .product06 .tit .left{display: none}
    .product06 .tit{min-height: auto; margin-bottom: 50px}
    .wbox{padding: 20px;}
    .wbox .right{display: none}
    .wbox2 .tit2{padding: 20px;}
    .wbox2 .right{display: none}
    
    .step_list2 ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}
    
    .step_list2 ul li{width: 100%}
    .step_list2 ul li img{width: 100%}
    
    .menul_pu .tit2 ul{display: block}
    .menul_pu .tit2 ul li{width: 100%}
    
    .ink_list ul{flex-wrap: wrap; justify-content: flex-start;}
    .ink_list ul li {
    text-align: center;
    width: auto;
    margin: 2% 1%;}
    
    .ink_partner ul{flex-wrap: wrap; justify-content: flex-start;}
    .ink_partner ul li {
    text-align: center;
    width: auto;
    margin: 2% 1%;}
}

@media (max-width: 770px){
	
	
	
	.step_list ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}
    
    .step_list ul li {
    width: 100%; margin-bottom: 20px}
	
	.step_list ul li:nth-child(2), .step_list ul li:nth-child(4){display: none}
	
    .menu{padding: 0}
    #header .logo{    position: fixed;
    top: 10px;
    left: 15px;
    z-index: 9999; max-width: 150px}
    #header .logo img{width: 100%}
    .nav_wrapper{width: 100%; background: #333}
    .menu .menu {
    width: 100%;
    min-height: auto;
    transition: all 0.3s ease;
    text-align: right;
    font-family: 'Gmarket Sans';
    font-weight: 500;
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    align-items: center;
    justify-content: center;
    top: 60px;}
    .menu ul li{padding: 10px}
    .spinner-master{background: #333}
    .menu ul li > a{font-size: 1.5em;}
    .menu ul ul > li a{color: #fff !important}
    .menu ul{text-align: left}
    .menu ul ul{padding: 0; transform: translateX(0%)}
    
    .right_tab {
    position: relative;
    right: 0;
    top: 0;
    transform: translateY(0%);
    margin-top: 30px;
    text-align: center;}
    #video ul.tabs li{width: auto}

   #cube{background: #f9f9f9 !important}

   #footer ul{display: block}
   
   #footer{text-align: center}
   .fp-tableCell{display: block;}
   
   #footer ul li:last-child{border-left: 0px solid #4e4e50;
    padding: 20px 0 0 0 ;}
    
    #footer ul li:first-child {
    padding-right: 0;}
    
    .menu ul ul.ul3 {
    background: none;
    border-radius: 0;}
    
    .menu ul ul.ul4 {
    background: none;
    border-radius: 0;}
    .dot{display: none}
   
   
   body{overflow-x: hidden !important}
   
   .plusblock1 {display: none}
    .plusblock2 {display: none}
    .plusblock3 {display: none}
    .plusblock4 {display: none}
    .plusblock5 {display: none}
    .plusblock6 {display: none}
    
    .sub_plus01 {display: none}
    .sub_plus02 {display: none}
    .sub_plus03 {display: none}

   
   
}




@media (max-width: 500px){
	
	.fourtip ul li{width: 49%; margin: 0.5%; padding: 30px 10px; border-radius: 15px;}
	#four.active .fourtip ul li:nth-child(1){margin: 0.5%}
	.fourtip ul li h2{font-size: 20px;}
	.bannertitle {
    position: relative;
    left: 0%;
    z-index: 2;
    top: 0%; 
    transform: translateY(0%);
    letter-spacing: -1px;
    left: 0; padding: 100px 15px 0 15px}
   #intro li.active{width: 100%}
   
   
   #footer ul li p {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -1px;
    color: #a2a2a2;
    font-weight: 200;
    word-break: keep-all;
    display: inline;}
   
   .cubeitem{right: -15%}
   #video ul.tabs li p {
    font-size: 14px;
    line-height: 25px;
    margin-left: 8px;
    letter-spacing: -1px;}
   #cube h1 {
    font-family: 'Binggrae';
    margin: 0;
    font-weight: 900;
    color: #3dbff1;
    font-size: 25px;
    line-height: 35px;
    letter-spacing: -1px;}
    #cube h2 {
    font-family: 'Binggrae';
    font-weight: 900;
    color: #3dbff1;
    font-size: 18px;
    line-height: 25px;
    margin-top: 5px;
    letter-spacing: -1px;}
    
    #cube p {
    font-family: 'Gmarket Sans';
    margin: 15px 0;
    color: #606060;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -1px;}
    
    .step3 .step {
    font-size: 20px;
    padding: 5px 10px;
    font-size: 16px;
    color: #606060;
    line-height: 32px;
    font-weight: 600;
    border: 2px dashed #606060;
    margin: 5px 0;
    display: table;
    border-radius: 30px;}
    
    #intro li .section-content .inner .bannerbg img{width: 100%}
	
	#intro li {
    width: 5%;}
    #intro li.active {
    width: 85%;}
    
    
	.rightnav {
    position: fixed;
    left: 15px;
    top: 50%;
    transform: translateY(-0%);
    min-width: 150px;}
    
    .topshop{display: none}
    .mini{display: none}
    
    #intro li .section-content h2 {
    font-size: 20px;
    line-height: 30px; word-break: keep-all}
    
    #intro li .section-content p {
    font-size: 18px;
    line-height: 25px;
    margin-top: 15px; word-break: keep-all}
    
    .right_tab h2 {
    margin-bottom: 20px;
    color: #90d143;
    letter-spacing: -1px;
    font-size: 30px;
    line-height: 40px;
    font-weight: 900;
    font-family: 'Binggrae';}
    .menul{padding: 110px 15px }
    .menul2{padding: 110px 15px }
    .menul3{padding: 110px 15px }
    .product02{padding: 110px 15px }
    .brandstory{padding: 150px 15px 50px 15px}
    .brandstory h2{font-size: 30px; line-height: 40px}
    .brandstory p{font-size: 18px; line-height: 25px; margin-top: 30px}
    .product h2{font-size: 30px; line-height: 40px; word-break: keep-all;}
    .ci .ci_tit ul{display: block}
    .ci .ci_tit ul li{width: 100%}
    .schooling ul{display: block;}
    .sub_table th, .sub_table td {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #606060;
    padding: 5px;
    text-align: center;}
    
    .ink_list ul li{width: 48%; margin: 2% 1%}
    .ink_list ul li img{width: 100%}
    
    .big_title h2{font-size: 25px !important; line-height: 35px !important;}
    .big_title h3 {
    font-size: 18px;
    font-family: 'Binggrae';
    line-height: 25px;
    color: #fff;
    font-weight: bold;}
    .gamesystem .table_img ul{display: block}
    .gamesystem .table_img ul li:first-child{display: block}
    .gamesystem .table_img ul li{width: 100%}
    .gamesystem .table_img ul li:last-child{width: 100%; margin: 2% 0 0 0}
    
    .sub_title h2{font-size: 20px !important; line-height: 30px !important}
    
    .emt40{height: 20px}
    .friends .box{padding: 80px 15px}
    
    .friends .box h2{font-size: 25px; line-height: 35px}
    .friends .box h3{font-size: 18px; line-height: 25px}
    .friends .box p{font-size: 16px; line-height: 20px}
    .step_list ul li:nth-child(2), .step_list ul li:nth-child(4){width: 100%; padding: 30px 0}
    .step_list ul li:nth-child(2) img, .step_list ul li:nth-child(4) img{transform: rotate(90deg)}
    .step_list ul{display: block}
    .step_list ul li{width: 100%}
    .marginback {margin-top: 0px !important;}
    
    .menul_pu .da_button{display: block}
    .menul_pu .da_button h2{margin-bottom: 15px}
    .wbox2, .wbox{padding: 50px 15px}
    
    .product06 .tit{margin-top: 50px;}
    .product06 .tit h3 {font-size: 20px; line-height: 30px}
    .product06 .tit p{font-size: 16px; line-height: 22px}
    .product02 p{font-size: 20px; line-height: 30px}
    .product04 h4 b{font-size: 20px; line-height: 30px}
    .product{padding: 150px 15px 100px 15px}
    
    .menul2 .s_menu{font-size: 20px; line-height: 30px; padding: 10 20px}
    .menul2 h3{font-size: 20px; line-height: 30px}
    .menul2 h1{font-size: 25px; line-height: 30px; margin-bottom: 50px}
    
    .menul3 .s_menu{font-size: 20px; line-height: 30px; padding: 10 20px}
    .menul3 h3{font-size: 20px; line-height: 30px}
    .menul3 h1{font-size: 25px; line-height: 30px; margin-bottom: 50px}
    
    .menul .s_menu{font-size: 20px; line-height: 30px; padding: 10 20px}
    .menul h3{font-size: 20px; line-height: 30px}
    .menul h1{font-size: 25px; line-height: 30px; margin-bottom: 50px}
    .menul_pu .tit1 h3 span{display: none}
    
    .menul_pu .song {
    margin-top: 50px;
    font-family: 'Binggrae';
    color: #d9feff;
    font-weight: bold;
    font-size: 25px;
    line-height: 35px;
    text-align: center;}
    
    .cube_video ul{display: block}
    .cube_video ul li{width: 100%; margin: 10px 0}
    .cube_video ul li:last-child{padding-left: 0; padding-top: 30px}
    .cube_video ul li h1{font-size: 25px; line-height: 35px}
    
    .monster01 .monster {
    position: relative;
    left: 0;
    bottom: 0;
    margin-bottom: 30px;}
    .monster01 .textbox{padding-left: 0}
    
    .monster02 .monster {
    position: relative;
    left: 0;
    bottom: 0;
    margin-bottom: 30px;}
    .monster02 .textbox{padding-left: 0}
    
    .monster03 .monster {
    position: relative;
    left: 0;
    bottom: 0;
    margin-bottom: 30px;}
    .monster03 .textbox{padding-left: 0}
    
    .packge .item4 li{width: 40%; margin: 3%;}
    .packge .item4{flex-wrap: wrap;margin-bottom: 50px; justify-content: center;}
    
    .step_list .step_title {
    padding: 8px;
    color: #fff;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 30px; }
    
   #four .title p{word-break: keep-all}
   #four .title p br{display: none}
    
    .schooling ul li:last-child{width: 100%}
    .schooling ul li h2{font-size: 25px; line-height: 30px; margin-bottom: 50px}
    .schooling ul li p{font-size: 20px; line-height: 30px}
    .space h2{font-size: 25px; line-height: 35px}
    .space h3{font-size: 20px; line-height: 30px; margin-bottom: 50px}
    .black_box{display: block}
    .black_box li{width: 100%; margin: 2% 0}
    .space2 h2{font-size: 25px; line-height: 35px}
    .space2 h3{font-size: 20px; line-height: 30px; margin-bottom: 50px}
    
    .space2 .table_img .sub_table td, .space2 .table_img .sub_table th {
    word-break: break-all;
    padding: 15px 5px;
    font-size: 14px;}
    .space h4 span{display: none}
    
    .space2 .sub_table td, .space2 .sub_table th {
    word-break: break-all;
    padding: 15px 5px; font-size: 14px}
    
    .space .table_img ul{display: block}
    .space .table_img ul li{width: 100%}
    .space .table_img ul li:last-child{width: 100%; margin-left: 0; margin-top: 2%}
    .sub_title p{font-size: 18px !important; line-height: 25px !important;}
    .space2 .tit5 {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    flex-wrap: wrap;}
    .space2 .tit5 li{width: 45%; margin: 2%}
    
    .space2 .tit2{display: block}
    .space2 .tit2 li:last-child{width: 100%; margin-top: 20px}
    .gamego h2{font-size: 25px; line-height: 35px}
    
    .form_mail .mail_box{padding: 25px 15px;}
    .form_mail .mail_box ul{display: block}
    .form_mail .mail_box ul li:first-child{width: 100%; margin-bottom: 8px}
    .form_mail .mail_box ul li:last-child{width: 100%}
    
    .ascontact h3{width: 100%}
    .ascontact h2{font-size: 25px; line-height: 35px; margin: 10px 0; text-align: center}
    .ascontact h2 span{display: block; margin-left: 0}
}