@charset "utf-8";
/* CSS Document */

.wrap_submain { background: url(/img/hosting/main_bg.jpg)left top no-repeat; background-size: cover; min-height: 670px !important; z-index: 1; }
section.submain { width: 100%; font-family: Nanum_BG; }
.info_cycle { position: relative; float: none; margin: 60px auto 0 auto; width: 280px; height: 280px; border-radius: 50%; border-width: 5px; border-style: solid; background: #fff; letter-spacing: -0.05em; text-align: center; z-index: 5; box-shadow: inset 3px 3px 5px #bbb; }
.info_cycle span.float_l i { position: absolute; margin-left: 30px; margin-top: 100px; color: #ccc; z-index: 7; cursor: pointer; }
.info_cycle span.float_r i { position: absolute; margin-left: -35px; margin-top: 100px; color: #ccc; z-index: 6; cursor: pointer; }
.cycle_in { clear: both; margin: 40px auto 0 auto; width: 280px; height: 280px; text-align: center; }
.cycle_in h2 { font-family: Nanum_BGL; font-weight: 100; font-size: 25px; color: #000; }
.cycle_in img { margin-top: 0px; opacity: .25; width: 70px; height: auto; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)'; }
.cycle_in ul { margin-top: 0; line-height: 120%; font-size: 14px; font-family: Nanum_Go; }
.cycle_in .btn { background: #000; color: #fff; font-size: 12px; margin-top: 20px; padding: 6px 20px; border-radius: 15px; }
.cycle_in .btn i { padding-right: 3px; }

@media only screen and (min-width:600px) and (max-width:768px) {
.wrap_submain { background: url(/img/hosting/main_bg.jpg)left top no-repeat; background-size: cover; min-height: 670px !important; z-index: 1; }
section.submain { width: 100%; font-family: Nanum_BG; }
.info_cycle { position: relative; float: none; margin: 60px auto 0 auto; width: 400px; height: 400px; border-radius: 50%; border-width: 5px; border-style: solid; background: #fff; letter-spacing: -0.05em; text-align: center; z-index: 5; box-shadow: inset 3px 3px 5px #bbb; }
.info_cycle span.float_l i { position: absolute; margin-left: 30px; margin-top: 170px; color: #ccc; z-index: 7; cursor: pointer; }
.info_cycle span.float_r i { position: absolute; margin-left: -35px; margin-top: 170px; color: #ccc; z-index: 6; cursor: pointer; }
.cycle_in { clear: both; margin: 80px auto 0 auto; width: 330px; height: 330px; text-align: center; }
.cycle_in h2 { font-family: Nanum_BGL; font-weight: 100; font-size: 35px; color: #000; }
.cycle_in img { margin-top: 0px; opacity: .25; width: 90px; height: auto; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=25)'; }
.cycle_in ul { margin-top: 0; line-height: 140%; font-size: 14px; font-family: Nanum_Go; }
.cycle_in .btn { background: #000; color: #fff; font-size: 14px; margin-top: 20px; padding: 6px 25px; border-radius: 15px; }
.cycle_in .btn i { padding-right: 3px; }

}

/**/
.submain_contents { width: 100%; float: left; margin: 0; overflow: hidden; }
.info_menu { width: 100%; height: 70px; margin: 10px 0 0 0; padding: 0; text-align: center; background: transparent; }
.info_menu h2 { position: absolute; float: none; font-family: RobotoCon; margin: 0; top: 75px; width: 100%; text-align: center; font-size: 40px; font-weight: 300 !important; letter-spacing: -0.03em; text-transform: uppercase; line-height: 100%; }
.main_icon { float: none; text-align: center; width: 100%; margin: 5px auto; }
.main_icon li { float: none; display: inline-block; cursor: pointer; min-width: 45px; text-align: center; }
.main_icon span { display: block; visibility: hidden; font-size: 12px; margin-bottom: 0px; padding: 2px 4px; }
.main_icon li:hover span { visibility: visible; border-radius: 8px; color: #fff; }
.main_icon li img { border-width: 2px; border-style: solid; border-color: transparent; margin-top: -5px; }
.main_icon li:hover img { margin-top: -3px; }
/**/
.info_service { width: 100%; height: auto; padding: 0 0 5px 0; margin-bottom: 30px; background: #005fca; color: #fff; line-height: 110%; overflow: hidden; }
.info_service li { float: left; width: 95%; padding: 2px 0 2px 5%; font-size: 13px; }
.info_service li span { color: #FF0; }
.info_service .color_org { color: #F60 !important; }
.info_service li:first-child { padding: 5px 0 5px 5% !important; margin-bottom: 5px; text-align: center; background: rgba(0,0,0,0.4); }
.info_service li i { margin-right: 3px; opacity: .5; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; }
.info_service a { display: block; color: #fff; font-size: 12px; margin-right: 10px; margin-top: -100px; }
.info_service a > i.fa-lock { margin-top: 56px !important; }
.info_service a i { color: #fff; margin-right: 2px; opacity: .5; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; }
.info_service a:hover i { opacity: 1; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; }
/**/
.info_contents { width: 90%; float: left; }
.info_contents dl { float: left; width: 100%; margin-left: 5%; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd }
.info_contents dl:last-child { border: none; }
.info_contents dt { margin-bottom: 10px; /*color: #ccc*/ color:#454545; }
.info_contents dd { color: #000; font-size: 14px; overflow: hidden; }

.cs_center ul { margin-top: 0; background-position:left 86px}
.cs_center li { padding: 0 0 1px 60px; }
.cs_center li span { font-size: 22px; font-weight: 600; }
.cs_center li span.cs_center_weekend {display:inline;padding-left:6px}
.cs_center li span.cs_center_weekend:after {display:block;content:''}
.cs_center li:nth-child(1) { padding-left: 0; font-family: Nanum_SR; letter-spacing: -1px; padding-bottom: 8px; }
.cs_center li:nth-child(3) { font-size: 30px; font-weight: 600; padding-left: 50px; }
.cs_center li:nth-child(4) { padding-left:55px; } /* 170418 add */
.cs_center li:nth-child(5) { padding-left:55px; } /* 170418 add */

.name_server p { line-height: 20px; margin-bottom: 10px; padding-left: 40px; background-repeat: no-repeat; background-position: left top; }
.name_server p:nth-child(1) { background-image: url(/img/icon_01.png); }
.name_server p:nth-child(2) { background-image: url(/img/icon_02.png); }
.notice p { float: left; font-family: Nanum_Go; font-weight: normal; margin-bottom: 6px; width: 100%; height: auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.notice p:before { content: '-'; padding-right: 3px; color: #777; }
.notice dt span { margin-right: 15px; padding: 3px; }
/* 페이지별 맞춤 */
/* 호스팅 */
.submain_hosting .info_cycle { border-color: #005fca }
.submain_hosting .info_menu h2 { color: #005fca; }
.submain_hosting .main_icon li:hover span { background: #005fca; }
.submain_hosting .main_icon span { color: #005fca; }
.submain_hosting .info_service { background: #005fca; }
.submain_hosting .cycle_in .btn:hover { background: #005fca; }
/* 도메인 */
.submain_domain .info_cycle { border-color: #0e736e }
.submain_domain .info_menu h2 { color: #0e736e; }
.submain_domain .main_icon li:hover span { background: #0e736e; }
.submain_domain .main_icon span { color: #0e736e; }
.submain_domain .info_service { background: #0e736e; }
.submain_domain .cycle_in .btn:hover { background: #0e736e; }
/* IDC */
.submain_idc .info_cycle { border-color: #4c287c }
.submain_idc .info_menu h2 { color: #4c287c; }
.submain_idc .main_icon li:hover span { background: #4c287c; }
.submain_idc .main_icon span { color: #4c287c; }
.submain_idc .info_service { background: #4c287c; }
.submain_idc .cycle_in .btn:hover { background: #4c287c; }
/* 이미지호스팅 */
.submain_img .info_cycle { border-color: #8d1779 }
.submain_img .info_menu h2 { color: #8d1779; }
.submain_img .main_icon li:hover span { background: #8d1779; }
.submain_img .main_icon span { color: #8d1779; }
.submain_img .info_service { background: #8d1779; }
.submain_img .cycle_in .btn:hover { background: #8d1779; }
/* 부가서비스 */
.submain_add .info_cycle { border-color: #99410b }
.submain_add .info_menu h2 { color: #99410b; }
.submain_add .main_icon li:hover span { background: #99410b; }
.submain_add .main_icon span { color: #99410b; }
.submain_add .info_service { background: #99410b; }
.submain_add .cycle_in .btn:hover { background: #99410b; }
/* 무료서비스 */
.submain_free .info_cycle { border-color: #65990b }
.submain_free .info_menu h2 { color: #65990b; }
.submain_free .main_icon li:hover span { background: #65990b; }
.submain_free .main_icon span { color: #65990b; }
.submain_free .info_service { background: #65990b; }
.submain_free .cycle_in .btn:hover { background: #65990b; }


/* 서버호스팅 메인페이지 */
.top_new_idc_txt { text-align:center; overflow:hidden; margin-right:0; }