/*============================================================================================================
    공통
============================================================================================================*/
.main {position:relative;}
.main .section {padding:63px 0}
.main .section .title {text-align:center;}
.main .section .title h2 {font-size:36px; color:#111; font-weight:700; margin:0 auto 12px;}
.main .section .title p {font-size:16px; color:#111; font-weight:300; line-height:1.5; padding:0 15px}
.main .section .title p span {display:inline-block; padding:27px 0 0 0;}
.main .section .title p span b {font-weight:500;}
.main .section .content .icon {width:76px; height:76px; background:#fff; border-radius:50%; box-shadow:0px 0px 10px rgba(7,0,2,0.15)}
.main .section .content .icon i {display:inline-block; width:76px; height:76px; background-size:54px; background-position:center; background-repeat:no-repeat;}
/* 250829 수정 시작 */
.main .section .content .box-center {display: flex; justify-content: center;}
/* 250829 수정 끝 */
.main .section .content .box_type01 {width:100%; height:478px; border-radius:10px; padding:30px 30px 0; background: #fff; box-shadow:0px 0px 10px rgba(7,0,2,0.15);}
.main .section .content .box_type01 p.cpu_name {font-size:16px; color:#ff1a09; font-weight:500; line-height:1.375; letter-spacing:-0.5px; margin:0 auto 26px;}
.main .section .content .box_type01 h2 {font-size:22px; color:#111; font-weight:700; margin:0 auto 29px;}
.main .section .content .box_type01 .info {margin:0 auto 24px}
.main .section .content .box_type01 .info p {font-size:14px; color:#111; font-weight:300; line-height:1.714285}
.main .section .content .box_type01 .info p span {font-weight:500;}
.main .section .content .btn_type01 {display:inline-block; width:100%; font-size:16px; color:#fff; font-weight:500; text-align:center; border-radius:50px; padding:13px 0;}
.main .section .content .btn_bg {background:rgb(255,0,0); background:linear-gradient(120deg, rgba(255,90,18,1) 0%, rgba(255,0,0,1) 100%);}
.main .btntop {position:absolute;right:0; margin:0 auto; padding:40px 20px; transition:all 0.5s ease;z-index: 999;box-sizing: border-box;}
.main .btntop a {display:block; width:60px; height:61px; background-image:url(/images/chost/main/main-btntop.png); background-repeat:no-repeat; background-position:center; }

@media all and (max-width:1200px){
    .main .section {padding:50px 0}
    .main .section .title h2 {font-size:32px; margin:0 auto 8px;}
    .main .section .title p {font-size:14px;}
    .main .section .content .icon {width:72px; height:72px;}
    .main .section .content .icon i {width:72px; height:72px; background-size:46px;}
    .main .section .content .box_type01 {height:440px; border-radius:8px; padding:24px 24px 0;}
    .main .section .content .box_type01 p.cpu_name {font-size:14.5px; margin:0 auto 22px;}
    .main .section .content .box_type01 h2 {font-size:18px; margin:0 auto 22px;}
    .main .section .content .box_type01 .info {margin:0 auto 18px}
    .main .section .content .box_type01 .info p {font-size:13px;}
    .main .section .content .btn_type01 {font-size:14.5px; padding:10px 0;}    
}

@media all and (max-width:768px){
    .main .section {padding:35px 0}
    .main .section .title h2 {font-size:28px; margin:0 auto 5px;}
    .main .section .title p {font-size:12.5px; padding:0}
    .main .section .content .icon {width:68px; height:68px;}
    .main .section .content .icon i {width:68px; height:68px; background-size:42px;}
    .main .section .content .box_type01 {height:auto; border-radius:6px; padding:20px;}
    .main .section .content .box_type01 p.cpu_name {font-size:13px; margin:0 auto 18px;}
    .main .section .content .box_type01 h2 {font-size:15px; margin:0 auto 18px;}
    .main .section .content .box_type01 .info {margin:0 auto 14px}
    .main .section .content .box_type01 .info p {font-size:12px;}
    .main .section .content .btn_type01 {font-size:13px; padding:12px 0;} 
    .main .btntop {top:80px;}
    .main .btntop a {background-size:50px;}
}





/*============================================================================================================
    vs
============================================================================================================*/
.main .vs {width:100%; height:100vh; background:url('/images/chost/main/bnr-cn-260114.jpg') no-repeat center / cover;}
.main .vs .inner {height:100%}
.main .vs .inner:after {display:inline-block; vertical-align:middle; height:100%; content:'';}
.main .vs .content {display:inline-block; width:100%; vertical-align:middle;}
.main .vs .content .left {display:inline-block; width:65%; vertical-align:middle;}
.main .vs .content .left h2 {font-size:46px; color:#fff; font-weight:700; line-height:1.2; margin:0 auto 24px;}
.main .vs .content .left p {font-size:16px; color:#fff; font-weight:300; line-height:1.5}
.main .vs .content .right {display:inline-block; padding: 24px; width:35%; background: rgba(250, 250, 250, 0.8); border-radius: 4px; vertical-align:middle;}
.main .vs .content .right h2 {font-size:22px; color:#333; font-weight:700; margin:0 auto 6px;}
.main .vs .content .right label {display:block; font-size:18px; color:#333; font-weight:500; margin:0 auto 15px;}
.main .vs .content .right select {display:inline-block; width:70%; height:52px; font-size:15px; color:#222; font-weight:300; line-height:52px; background:#fff url('/images/chost/main/vs-select_arrow.png') no-repeat 90% center / auto; padding:0 20px; appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px;}
.main .vs .content .right select::-ms-expand {display:none;}
.main .vs .content .right button {display:inline-block; width:30%; height:52px; font-size:16px; color:#fff; font-weight:500; line-height:52px; background:linear-gradient(120deg, rgba(255,90,18,1) 0%, rgba(255,0,0,1) 100%); appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius: 0 4px 4px 0; transition: filter 0.25s ease; cursor:pointer;}
.main .vs .content .right button:hover {filter: brightness(1.4);}


/* 20260115 강나윤 수정 */
.main .vs .content .bottom{margin-top:52px; display: flex; align-items: center;}
.main .vs .content .bottom a{width:200px;}
.main .vs .content .bottom a button {display: flex; align-items: center; gap: 24px; margin-right: 20px; padding: 10px 20px; width: 180px; height: 68px; background: #fff; color: #333; font-size: 16px; border-radius: 4px; line-height: 20px; cursor: pointer;}
.main .vs .content .bottom a button:hover {background: #E0DFDF;}
.main .vs .content .bottom a button i {color: inherit;}
.main .vs .content .bottom img{width:180px;}

/* 20221215 김혜인 추가*/
.main .vs .content .vpn_btn{width: 580px; display: flex; background: linear-gradient(120deg, rgba(255,90,18,1) 0%, rgba(255,0,0,1) 100%); height: 45px; margin-top: 28px; border-radius: 4px; transition: background-position .4s ease, transform .2s ease, filter .2s ease;}
.main .vs .content .vpn_btn:hover {background-position: 100% 0; transform: scale(1.03); filter: brightness(1.05);}
.main .vs .content .vpn_btn a{color: #FFF; font-size: 18px; font-weight: 600; width: 100%; text-align: center; line-height: 42px;}
.main .vs .content .vpn_btn a span{padding: 32px;}
.main .vs .content .vpn_btn a i {margin-left: 4px; font-style: normal;}

@media all and (max-width:1200px){
    .main .vs .content .left h2 {font-size:40px; margin:0 auto 20px;}
    .main .vs .content .left p {font-size:14px;}
    .main .vs .content .right h2 {font-size:18px; margin:0 auto 4px;}
    .main .vs .content .right label {font-size:16px; margin:0 auto 10px;}
    .main .vs .content .right select {height:45px; font-size:14.5px; line-height:45px; padding:0 15px;}
    .main .vs .content .right button {height:45px; font-size:14.5px; line-height:45px;}
	.main .vs .content .bottom{display:none;}
}

@media all and (max-width:900px){
    .main .vs {height:85vh;}
    .main .vs .content .left {width:100%; margin:0 auto 35px;}
    .main .vs .content .left h2 {font-size:26px; letter-spacing:-0.5px; margin:0 auto 14px;}
    .main .vs .content .left p {font-size:12.5px; letter-spacing:-0.5px;}
    .main .vs .content .right {width:100%;}
    .main .vs .content .right h2 {font-size:16px; margin:0 auto 2px;}
    .main .vs .content .right label {font-size:14px; margin:0 auto 6px;}
    .main .vs .content .right select {font-size:13px; padding:0 12px;}
    .main .vs .content .right button {font-size:13px;}
	.main .vs .content .bottom{display:none;}
    
    .main .vs .content .vpn_btn{width: 100%;}
    .main .vs .content .vpn_btn a span{display: none;}
}
@media all and (max-width:500px){
    .main .vs .content .vpn_btn a{font-size: 16px;}
}


/* 2323-07-14 진성민 추가---------bgp_btn_cont버튼--------- */
.main .vs .bgp_btn{position: absolute; top: 274px; right: 0; height: auto; background: linear-gradient(to right, rgba(255,90,18,1), rgba(255,0,0,1)); border: 1px solid #FFF; border-right: none; border-radius: 10px 0 0 10px/10px 0 0 10px; padding: 60px 22px;}
.main .vs .bgp_btn h5{ color: #FFF; text-align: center; writing-mode: vertical-lr;}
.main .vs .bgp_btn h5 p {rotate: 90deg;display: inline-block;font-size: 21px;padding: 1px 0;}

/* pulsing 버튼호버방사 */
.pulsing {
  z-index: 2;
  position: relative;
}

.pulsing:hover::before,
.pulsing:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: pulse-ring 2.5s infinite;
}

.pulsing:hover::after {
  animation: pulse-ring 2.5s linear infinite;
}

@media all and (max-width:900px){
    .main .vs .bgp_btn{top: 585px; height: auto;padding: 25px 15px;}
    

    .main .vs .bgp_btn h5 p {font-size: 16px;}
}
/* 
@media all and (max-width:768px){
    .main .vs .bgp_btn{top: 650px; height: 150px; padding-top: 25px;}    
} */

@media all and (max-width:500px){
    
    .main .vs .bgp_btn{top: 600px; height: auto; padding: 25px 15px;}
    

    .main .vs .bgp_btn h5 p {font-size: 14px;}

}

/*============================================================================================================

/*============================================================================================================
    server
============================================================================================================*/
.main .server {background:#fff;}
.main .server .content {margin:108px auto 0;}
.main .server .content ul {margin:-7px;}
.main .server .content ul li {display:inline-block; width:25%; vertical-align:top; padding:7px}
.main .server .content ul li .box {padding:25px 20px 0;}

@media all and (max-width:1200px){
    .main .server .content {margin:85px auto 0;}
    .main .server .content ul {margin:-5px;}
    .main .server .content ul li {padding:5px}
    .main .server .content ul li .box {padding:20px 15px 0;}
}

@media all and (max-width:768px){
    .main .server .content {margin:55px auto 0;}
    .main .server .content ul {margin:-4px 0;}
    .main .server .content ul li {width:100%; padding:4px 0}
    .main .server .content ul li .box {padding:15px 10px;}
}





/*============================================================================================================
    hosting
============================================================================================================*/
.main .hosting {background:#f7f7f7;}
.main .hosting .content {margin:80px auto 0; border-top:1px solid #969696;}
.main .hosting .content table {background:#fff; }
.main .hosting .content table th {height:57px; font-size:18px; color:#1b1b1b; font-weight:500; border:1px solid #d4d4d4; }
.main .hosting .content table td {height:61px; font-size:16px; color:#1b1b1b; font-weight:300; text-align:center; border:1px solid #d4d4d4;}
.main .hosting .content table td a {display:inline-block; font-size:14px; color:#ff1a09; font-weight:500; border:1px solid #ff1a09; border-radius:9px; padding:8px;}

@media all and (max-width:1200px){
    .main .hosting .content {margin:60px auto 0;}
    .main .hosting .content table th {height:54px; font-size:16px;}
    .main .hosting .content table td {height:66px; font-size:14px;}
    .main .hosting .content table td a {font-size:13px; border-radius:7px; padding:6px;}   
}

@media all and (max-width:768px){
    .main .hosting .content {position:relative; width:100%; margin:40px auto 0;}
    .main .hosting .content > div {overflow-x:scroll;}
    .main .hosting .content:after {position:absolute; width:30px; height:100%; top:1px; right:0; background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(65%,#fff)); background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(65%,#fff)); background:linear-gradient(to right,rgba(255,255,255,0),#fff 65%); z-index:1; content:'';}
    .main .hosting .content table {width:1000px;}    
}





/*============================================================================================================
    colocation
============================================================================================================*/
.main .colocation {background:#fff;}
.main .colocation .inner {max-width:900px;}
.main .colocation .content {margin:72px auto 0;}
.main .colocation .content ul {margin:-10px;}
.main .colocation .content ul li {display:inline-block; width:33.33333%; vertical-align:top; padding:10px}

@media all and (max-width:1200px){
    .main .colocation .content {margin:65px auto 0;}
    .main .colocation .content ul {margin:-7px;}
    .main .colocation .content ul li {padding:7px}    
}

@media all and (max-width:768px){
    .main .colocation .content {margin:50px auto 0;}
    .main .colocation .content ul {margin:-5px 0;}
    .main .colocation .content ul li {width:100%; padding:5px 0}
}





/*============================================================================================================
    bnr
============================================================================================================*/
.main .bnr {background:url('/images/chost/main/bnr-bg.jpg') no-repeat center / cover; padding:77px 0;}
.main .bnr .content ul li {display:inline-block; width:25%; vertical-align:top;}
.main .bnr .content ul li h2 {height:52px; font-size:22px; color:#fff; font-weight:700; line-height:1.18181818; margin:0 auto 17px; }
.main .bnr .content ul li p {font-size:15px; color:#fff; font-weight:300; line-height:1.46666; padding:0 35px 0 0;}

@media all and (max-width:1024px){
    .main .bnr {padding:50px 0;}
    .main .bnr .content ul {margin:-30px -20px}
    .main .bnr .content ul li {width:50%; padding:30px;}
    .main .bnr .content ul li h2 {height:auto; font-size:19px; margin:0 auto 12px; }
    .main .bnr .content ul li p {font-size:13.5px; padding:0;}
}

@media all and (max-width:768px){
    .main .bnr .content ul {margin:-20px 0}
    .main .bnr .content ul li {width:100%; padding:20px 0;}
    .main .bnr .content ul li h2 {font-size:16.5px; margin:0 auto 8px; }
    .main .bnr .content ul li p {font-size:13px;}
}





/*============================================================================================================
    management
============================================================================================================*/
.main .management {background:#f7f7f7;}
.main .management .content {margin:81px auto 0;}
.main .management .content > h2 {font-size:22px; color:#111; font-weight:700; text-align:center; margin:0 auto 55px;}
.main .management .content ul li {display:inline-block; width:25%; vertical-align:top; text-align:center;}
.main .management .content ul li a {display:inline-block;}
.main .management .content ul li .icon {margin:0 auto 14px;}
.main .management .content ul li i.icon01 {background-image:url('/images/chost/main/management-icon01.png');}
.main .management .content ul li i.icon02 {background-image:url('/images/chost/main/management-icon02.png');}
.main .management .content ul li i.icon03 {background-image:url('/images/chost/main/management-icon03.png');}
.main .management .content ul li i.icon04 {background-image:url('/images/chost/main/management-icon04.png');}
.main .management .content ul li .txt p {font-size:16px; color:#111; font-weight:500; line-height:1.25}
.main .management .content .note {border-top:1px solid #d8d9d9; margin:88px auto 0; padding:73px 0 0 0;}
.main .management .content .note h2 {font-size:18px; color:#111; font-weight:500; margin:0 auto 7px;}
.main .management .content .note p {font-size:15px; color:#111; font-weight:300; line-height:1.6; text-indent:-9px; padding:0 0 0 9px;}

@media all and (max-width:1200px){
    .main .management .content {margin:60px auto 0;}
    .main .management .content > h2 {font-size:18px; margin:0 auto 40px;}
    .main .management .content ul li .icon {margin:0 auto 10px;}
    .main .management .content ul li .txt p {font-size:14.5px;}
    .main .management .content .note {margin:60px auto 0; padding:50px 0 0 0;}
    .main .management .content .note h2 {font-size:16px; margin:0 auto 5px;}
    .main .management .content .note p {font-size:14px;}    
}

@media all and (max-width:768px){
    .main .management .content {margin:45px auto 0;}
    .main .management .content > h2 {font-size:16px; margin:0 auto 30px;}
    .main .management .content ul li {width:50%; padding:0 0 30px;}
    .main .management .content ul li .icon {margin:0 auto 6px;}
    .main .management .content ul li .txt p {font-size:13px;}
    .main .management .content .note {margin:15px auto 0; padding:35px 0 0 0;}
    .main .management .content .note h2 {font-size:15px; margin:0 auto 3px;}
    .main .management .content .note p {font-size:12.5px;}
}





/*============================================================================================================
    about
============================================================================================================*/
.main .about {background:#fff;}
.main .about .content {margin:26px auto 0;}
.main .about .content ul li {display:inline-block; width:50%; vertical-align:top; padding:41px 0;}
.main .about .content ul li .left {display:inline-block; width:76px; vertical-align:top;}
.main .about .content ul li .left i.icon01 {background-image:url('/images/chost/main/about-icon01.png');}
.main .about .content ul li .left i.icon02 {background-image:url('/images/chost/main/about-icon02.png');}
.main .about .content ul li .left i.icon03 {background-image:url('/images/chost/main/about-icon03.png');}
.main .about .content ul li .left i.icon04 {background-image:url('/images/chost/main/about-icon04.png');}
.main .about .content ul li .left i.icon05 {background-image:url('/images/chost/main/about-icon05.png');}
.main .about .content ul li .left i.icon06 {background-image:url('/images/chost/main/about-icon06.png');}
.main .about .content ul li .right {display:inline-block; width:calc(100% - 76px); vertical-align:top; padding:0 25px;}
.main .about .content ul li .right h2 {font-size:18px; color:#111; font-weight:500; margin:0 auto 6px;}
.main .about .content ul li .right p {font-size:15px; color:#111; font-weight:300; line-height:1.6;}

@media all and (max-width:1200px){
    .main .about .content {margin:15px auto 0;}
    .main .about .content ul li {padding:32px 0;}
    .main .about .content ul li .left {width:72px;}
    .main .about .content ul li .right {width:calc(100% - 72px); padding:0 30px;}
    .main .about .content ul li .right h2 {font-size:16px; margin:0 auto 4px;}
    .main .about .content ul li .right p {font-size:13.5px;}
}

@media all and (max-width:768px){
    .main .about .content {margin:10px auto 0;}
    .main .about .content ul li {width:100%; padding:24px 0;}
    .main .about .content ul li .left {width:68px;}
    .main .about .content ul li .right {width:calc(100% - 68px); padding:0 30px;}
    .main .about .content ul li .right h2 {font-size:14px; margin:0 auto 2px;}
    .main .about .content ul li .right p {font-size:12px;}    
}





/*============================================================================================================
    client
============================================================================================================*/
.main .client {background:url('/images/chost/main/client-bg.jpg') no-repeat center / cover; padding:63px 0 96px;}
.main .client .title h2 {color:#fff;}
.main .client .content {position:relative; margin:60px auto 0;}
.main .client .content .slide {text-align:center;}
.main .client .content .slide a {display:inline-block;}
.main .client .content .slick-arrow {position:absolute; width:55px; height:80px; top:50%; text-indent:-99999px; background-color:transparent; background-size:13px; background-position:center; background-repeat:no-repeat; margin:-40px auto 0; cursor:pointer; z-index:1;}
.main .client .content .slick-prev {background-image:url('/images/chost/main/client-arrow_prev.png'); left:-55px;}
.main .client .content .slick-next {background-image:url('/images/chost/main/client-arrow_next.png'); right:-55px;}

@media all and (max-width:1230px){
    .main .client {padding:55px 0 85px;}
    .main .client .content {margin:55px auto 0;}
    .main .client .content .slick-list {margin:0 50px;}
    .main .client .content .slick-arrow {width:50px; background-size:10px;}
    .main .client .content .slick-prev {left:0;}
    .main .client .content .slick-next {right:0;}
}

@media all and (max-width:1024px){
    .main .client {padding:50px 0 80px;}
    .main .client .content {margin:50px auto 0;}
    .main .client .content .slick-list {margin:0 48px;}
    .main .client .content .slick-arrow {width:48px; background-size:8px;}
}

@media all and (max-width:768px){
    .main .client {padding:35px 0 50px;}
    .main .client .content {margin:35px auto 0;}
    .main .client .content .slick-list {margin:0 40px;}
    .main .client .content .slick-arrow {width:40px;}
}

.divpopup{position:fixed;z-index:100;filter:alpha(opacity=80);line-height:0px;vertical-align:middle;text-align:center;background-image:url(back_top.jpg)}

@media all and (max-width:1200px){
.divpopup{display:none}
#popup{display:none}
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  }
  70% {
    box-shadow: 0 0 0 25px rgba(255,255,255,0);
  }
  100% {
    box-shadow: 0 0 0 25px rgba(255,255,255,0);
  }
}
@keyframes pulse-ring2 {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  }
  70% {
    box-shadow: 0 0 0 50px rgba(255,255,255,0);
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255,255,255,0);
  }
}


/* chat bot */
.chat-toggle-btn {background: linear-gradient(135deg, #b05de0 0%, #006699 100%) !important; border: 1px solid #fff !important;}
.chat-form-header {background: linear-gradient(135deg, #b05de0 0%, #006699 100%) !important;}
.chat-form-submit {background: linear-gradient(135deg, #b05de0 0%, #006699 100%) !important;}