@media (max-width: 1024px){ /*ipad-pro*/
    .br{display: block;}
    .br-lg{display: none !important;}
    .dropdown-toggle::after{position: absolute; left: 70%; top: 50%;}
    .container{max-width: 936px;}
    .sub .abicon{right:4%;}
    .inner-shadow-right {box-shadow: inset -10px -5px 20px rgba(0, 0, 0, 0.1) !important;}
    .overflow-scroll{overflow-y: scroll;}
    .w-l-100 {width: 100%;}
    .bottom-md-20{bottom: 20%;}

    .nav-justified .nav-item{font-size: 0.9rem !important;}

    .container03 .text-center{float: none; width: 100%; padding-top: 1rem !important; text-align: center !important; }
    .container03 .number-display{float: none !important; clear: both !important; width: 100%; margin: auto !important;}
    .container04{height: 780px;}
    .container04 .mx-pro-3{margin-left: 2rem !important; margin-right: 2rem !important;}

    
    /*serverHosting*/
    .sub-con01 div{margin: 0 !important;}
    .sub-con01 div ul li{padding-right: 1.8rem !important; padding-left: 1.8rem !important;}
    .main .container01 .caption-box, .server .caption-box{width: 40%;}
    .main .container01 .caption-box:nth-child(3), .server .caption-box:nth-child(3){margin-top: 3rem !important;}
    .main .container01 .nav .px-lg-5, .server .container .nav .px-lg-5{padding: 0 1.5rem !important;}
    .server div .tab li button{width: 130px; height: 90px; background: #333; border-right: .5px solid #666; color: white;}

    /* DDOS */
    .bnr-con-group {flex-direction: column; width: 80%; height: 100%;}
    .bnr-con-box {width: 100%; border-bottom: 1px solid #D4D4D8; border-right: 0px}
    .bnr-con-box .box-con {display: flex; align-items: center; justify-content: space-between;}
    .bnr-con-box .box-con img {position: unset;}
    .ddos-banner {bottom:30%; width: 550px; margin: auto;}

    .ddos-merit-box {padding: 35px 40px; width: 82%}
    .ddos-merit-box ul {flex-direction: column;}
    .ddos-merit-box ul li {width: 100%;}


    .ddos-consulting {position: relative;} 
    .sub-consulting-group .consulting-area {width: 700px;}
    .consulting-img {background: url('/img/ddos-consulting-02.png') no-repeat; background-size: contain;}
    .ddos-consulting .ddos-consulting-info {position: absolute; top: 80px;  right:90px; text-align: left;}
    .ddos-consulting .ddos-consulting-info h4 {padding-bottom: 5px; font-weight: 700; font-size: 1.25rem;}
    .ddos-consulting .ddos-consulting-info p {margin: 0; font-size: 1rem;}

    .colo .container ul li .mx-4{margin-left: 0rem !important; margin-right: 0rem !important;}

    .web-aside{position: fixed; top: 16%; right: 1.5%; width: 8%; z-index: 9999;}
    .web-aside .aside-chat a article{position: fixed; top: 23.5%; right: 10%;}

    .firewall .firewallImg {width: 32%;}
    .firewall .sub-con02 div div, .firewall .sub-con03 div {margin: 0 !important;}
    .firewall .sub-con03 .firewallImg {width: 30%; margin-bottom: 3rem !important; padding-bottom: 3rem !important;}    

    .ssl .sub-con01 ul li{margin: 0 2rem !important;}
    .ddos .ddos-sub-con-01 ul li {margin-right: 2.3rem !important; margin-left: 2.3rem !important;}

    .partner div ul li h4{margin-top: 0.8rem !important;}
}
 
@media (max-width: 768px) { /*ipad*/
    .br-md{display: block;}
    .container{max-width: 680px;}
    .sub .abicon{right: 6%;}
    .border-md-bottom-0{border-bottom: 0px !important;}
    .border-md-right {border-right: 1px solid #dee2e6 !important;}
    .w-m-100 {width: 100%;}
    .border-lg-right-0 {border-right: 1px solid #dee2e6 !important;}
    .border-lg-bottom-0 {border-bottom: 0px !important;}
    .d-m-none {display: none;}
    
    .dropdown:hover .dropdown-menu{display: block !important; position: unset !important;}
    .dropdown .dropdown-menu{margin: 0 !important; padding: 0 !important;}
    .dropdown .nav-link{padding-bottom: 0 !important;}
    .navbar-collapse{height: 100%;}
    .navbar-collapse ul li .shadow-sm{box-shadow: none !important;}
    .dropdown-toggle::after{display: none;}
    .main .carousel-inner{height: 700px;}
    .container04, .container04 .container{padding: 0 !important;}
    

    .sub .banner{display: none;}
    .sub .m-banner {display: block !important; width: 100%;}
    .main .accordion ul, .server .accordion ul{display: block !important;}
    .server div ul .px-lg-5::after{content: unset;}
    .server div ul .px-lg-5::before{content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 1px; background: #ccc;}
    .server div ul .px-lg-5 button.active, .server div ul .px-lg-5 button:hover {color: var(--red);}
    .server div ul .px-lg-5 button.active::before, .server div ul .px-lg-5 button:hover::before{content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 2px; background: var(--red);}
    .main .container01 .text-contents p span, .server .text-contents p span{margin-right: 6%;}
    .main .container01 .text-contents p span, .server .text-contents p .coreThread{margin-right: 6%;}
    .main .container01 .text-contents p .pip, .server .text-contents p .pip{margin-right: 6%;}
    .server div .tab li button{width: 100%; height: 60px; background: #333; border-right: 0; color: white; cursor: pointer;}

    .firewall .firewallImg {width: 100% !important; margin: 0 !important; padding: 0 !important;}
    .firewall .sub-con02 div div, .firewall .sub-con03 div {margin: 0 !important;}

    .ssl .sub-con01 ul li{margin:2rem 0rem !important;}

    .ddos .ddos-sub-con-01 ul li {margin-right: 0rem !important; margin-left: 0rem !important;}

    .partner div ul li h4{margin-top: 1.5rem !important;}
    .partner div ul li{border-right: 1px solid #dee2e6 !important;}
    .partner div ul li {padding-right: 1rem !important; padding-left: 1rem !important;}

    .managed{padding: 2rem 0 !important; height: 170px !important;}
    .managed h1{line-height: 3rem !important;}

    .event .event-list {display: flex; flex-direction:column; align-items: center; }
    .event .event-cont {margin: 0 30px; width: 350px;}
    .event img {margin-top: 40px;}

    /* DDOS */
    .carousel-inner {height: 600px;}
    .sub .ddos-bnr h1 {font-size: 3rem;}
    .sub .ddos-bnr p {font-size:1.25rem; line-height: 22px;}
    .ddos-banner {bottom: 40%; width: 400px; margin: auto;}
    .bnr-con-group {flex-direction: column; width: 90%; height: 100%;}
    .bnr-con-box {width: 100%; border-bottom: 1px solid #D4D4D8; border-right: 0px}
    .bnr-con-box .box-con {display: flex; align-items: center; justify-content: space-between;}
    .bnr-con-box .box-con img {position: unset;}
    .ddos-merit-box {padding: 35px 20px 35px 0; width: 85%}

    .ddos-consulting {position: relative;} 
    .sub-consulting-group .consulting-area {width: 550px;}
    .consulting-img {background: url('/img/ddos-consulting-02.png') no-repeat; background-size: contain;}
    .ddos-consulting .ddos-consulting-info {position: absolute; top: 70px;  right:90px; text-align: left;}
    .ddos-consulting .ddos-consulting-info h4 {padding-bottom: 5px; font-weight: 700; font-size: 1.0rem;}
    .ddos-consulting .ddos-consulting-info p {margin: 0; font-size: 14px;}

    footer{margin-bottom: 5rem !important;}
    .web-aside{display: none;}
    .m-aside{display: block !important; z-index: 1029;}
    .m-aside a img{width: 40px;}
    .m-aside .aside-chat article{position: fixed; left: 26%; bottom: 11%;}
    .m-aside .aside-chat article img{width: 100px;}

    /* taiwan */
    .taiwan .carousel-caption {right: 15%; left: 15%;}
    .taiwan .text-contents p:first-child{position: relative; margin-bottom: 1rem;}
    .taiwan .text-contents p .long-text{position: unset; margin-right: 0;}
    .taiwan .weAdvantages ul li{width: 100% !important; margin-bottom: 2.5rem;}
    .taiwan .weAdvantages ul li h2 {word-break: normal !important;}
    
}
@media (min-width: 577px) and (max-width: 664px) { /*VPS페이지 이벤트 상품*/
    .text-caption p {padding-bottom: 0rem !important; }
    .text-caption .discount-price {padding: 0 0 0 0 !important;}   
}

@media (max-width: 576px) { /*mobile*/
    .br{display: none;}
    .br-sm{display: block;}
    .w-r-100{width: 100% !important;}
    h1, .h1{font-size: 1.5rem; word-break: keep-all !important;}
    h2, .h2{font-size: 1.5rem; word-break: keep-all !important;}
    .font-big{font-size: 1.2rem;}
    .font-m{font-size: 1rem;}
    .border-r-top{border-top: 1px solid #ccc !important; padding: 1rem 0;} /*border responsivle top*/
    .bottom-0 {bottom: 0%;}
    .bottom-12 {bottom: 12%;}
    .bottom-20 {bottom: 20%;}
    .carousel-caption h1{font-size: 2rem;}
    .carousel-caption p{font-size: 1rem; line-height: 22px;}
    .carousel-item{height: 28rem;}
    .btn{padding: .8rem 2.5rem; font-size: 14px;}
    .dropdown-toggle::after{display: none;}
    header .show{display: inline-block !important; z-index: 9999;}
    header {overflow-y: auto;}
    .navbar-collapse{height: unset;}
    .text-small-sm {font-size: 0.9rem !important;}

    .main .carousel-inner{height: 450px;}
    .main .carousel-item .pc_bnr {display: none;}
    .main .carousel-item .mobile_bnr {display: block}

    .main .container01 .caption-box {width: 100%;}
    .container01 .mt-sm-5 .nav .w-25 button {padding: 10px !important; font-size: 0.8em !important;}
    .container01 .border-left{border-left: 0 !important;}
    .container01 .servercon ul li:last-child {margin-top: 0 !important;}
    .server div .tab li button:hover::before{content: ''; position: absolute; bottom: 6px; left: 0; width: 100%; height: 2px;}
    
    .container03 .number-display{width: 100%; height: 392px;}
    .container04{height: 1340px; padding: 5rem 0 !important;}
    .container04 div ul li{width: 80%;}
    .container04 div ul li div{padding-bottom: 0 !important;}
    
    .sub .m-banner .carousel-inner{width: 100%; height: auto !important;}
    .sub .m-banner .carousel-inner .carousel-caption {right: 10%; bottom: 0%; left: 10%;}
    .sub .abicon{position: relative; top: 0; left: 0%;}
    .sub .carousel-inner img{height: 20rem;}
    .sub .carousel-caption, .sub .container .carousel-caption {right: 10%; bottom: 18%; left: 10%;}
    /*serverHosting*/
    
    .server .caption-box{width: 100%; margin-bottom: 3rem !important;}
    .main .container01 .caption-box:last-child, .server .caption-box:last-child{margin-bottom: 0 !important;}
    .main .container01 .caption-box:nth-child(3), .server .caption-box:nth-child(3){margin-top: 0rem !important;}

    .managed{padding: 1.6rem 0 !important; height: 100px !important;}
    .managed h1{font-size: 1rem !important; line-height: 1.5rem !important;}

    .event .row{margin-right: unset; margin-left: unset;}
    
    /* DDOS */
    .carousel-inner {height: 370px;}
    .sub .ddos-bnr h1 {font-size: 2rem;}
    .sub .ddos-bnr p {font-size:1rem; line-height: 22px;}
    .ddos-banner {bottom:30%; width: 310px; margin: auto;}

    .bnr-con-group {flex-direction: column; width: 100%; height: 100%;}
    .bnr-con-box {width: 100%; border-bottom: 1px solid #D4D4D8; border-right: 0px}
    .bnr-con-box .box-con {display: flex; align-items: center; justify-content: space-between;}
    .bnr-con-box .box-con img {position: unset;}

    .ddos-merit h2 {line-height: normal;}
    .ddos-merit .merit-lock {top: 75%; right: 2%}
    .ddos-merit-box {padding: 0; width: 93%}
    .ddos-merit-box ul {flex-direction: column;}
    .ddos-merit-box ul li {width: 85%;}
    .ddos-cloudflare-bnr .sub-area-bottom p{padding-top: 140px;}

    .ddos-cloudflare-bnr {background: url('/img/ddos-cloudflare-01.png') center no-repeat; background-size: cover; height: 454px;}
    .ddos-cloudflare-bnr .sub-area-bottom p {padding: 280px 0 0 0; color: white; text-align: center; line-height: 2.5rem; font-size: 20px; font-style: normal; }

    .sub-consulting-group .consulting-area {width: 480px;}
    .consulting-img {position: relative;  background: url('/img/ddos-consulting-03.png') no-repeat; background-size: contain; margin: 0 15px;}
    .ddos-consulting .ddos-consulting-info {position: absolute; top: 65px; right: 90px; text-align: left;}
    .ddos-consulting .ddos-consulting-info h4 {padding-bottom: 5px; font-weight: 700; font-size: 1.0rem;}
    .ddos-consulting .ddos-consulting-info p {margin: 0; font-size: 14px;}




    .ip div div img{height: 260px;}
   
    .m-aside a img{width: 30px;}

    /* taiwan page */
    .taiwan .carousel-caption{}
    .taiwan .carousel-caption h1 span{font-size: 1rem; font-weight: 500;}
    
    
}

/* VPS 이벤트상품 뱃지 */
@media (max-width: 1160px) and (min-width: 1025px) {
    .badge-area .badge {display: block !important; margin-bottom: 0.25rem;}
}
@media (max-width: 882px) and (min-width: 768px) {
    .badge-area .badge {display: block !important; margin-bottom: 0.25rem;}
}
@media (max-width: 767px) and (min-width: 577px) {
    .badge-area {top: -30px !important;}
}