@charset "UTF-8";
#container_title { display: none; }
/* 서브페이지 비주얼 */
.visual {
  display: table; width: 100%; height: 470px; -webkit-overflow: hidden; -ms-overflow: hidden; overflow: hidden;
  background: url(/image/aboutus/visual.jpg); background-position: center; background-size: cover; }
.visual::before { content: ''; display: block; width: 100%; height: 470px; position: absolute; top: 0; left: 0;
  background: linear-gradient(0deg, transparent 0%, transparent 70%, #666 100%);
}




.visual.homepage { background-image: url(/image/homepage/visual.jpg); }
.visual.hosting { background-image: url(/image/hosting/visual.jpg); }
.visual.portfolio { background-image: url(/image/portfolio/visual.jpg); }
.visual.bbs { background-image: url(/image/bbs/visual.jpg); }
.visual.user { background-image: url(/image/user/visual.jpg); }
.visual.map { background-image: url(/image/aboutus/map-visual.jpg); }
.visual .title-area { text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; }
.visual h2 { font-size: 3rem; color:white; font-weight: 700; text-align: center; text-shadow: 2px 2px 2px #666; }
/* 서브페이지 타이틀 */
.title-area * { text-align: left;  margin: 0 0 3px; }
.list-area { margin: 0; padding: 0; }
.title-area .desc { display: block; margin-bottom: 4px; }
.title-area .page-title { color: #222; font-size: 1.5rem; font-weight: 500; margin-bottom: 30px; }
.title-area .page-title span { color: #c71526; }
.underline { border-bottom: 1px solid #999; }

/* 서브 네비게이션 */
.mysubmenu { position: relative; margin: -35px auto 0; width: 1200px; padding: 0 10px; z-index: 21; }
.mysubmenu .inner { padding: 0; width: 100%; border: 1px solid #ddd; background: #fff; min-width: 360px; }
.mysubmenu .menu_select { float: left; position: relative; width: 240px; border-right: 1px solid #ddd; }
.mysubmenu .sub-menulist-area { width: 260px; }
.mysubmenu .menu_select.home { padding: 0; width: 70px; height: 70px; background-color: #fff; background-position: center; text-align: center; }
.mysubmenu .menu_select.home a { line-height: 70px; font-size: 24px; padding: 0; }
.mysubmenu .menu_select.home a i { color: #353535; }
.mysubmenu .menu_select li  { position: relative; }
.mysubmenu .menu_select li.on a::before { content: ''; display: block; width: 4px; height: 100%; position: absolute;
  top: 0; left: 0; background-color: #00387D; }
.mysubmenu .menu_select li a { padding:0 24px; height: 70px; line-height: 70px; white-space: nowrap; }
.mysubmenu .current_menu { background-repeat: no-repeat; background-image: url(/image/common/navi_arrow.png);
  background-position: 92% center; background-size: 20px; }
.mysubmenu .all_menu { position: absolute; top: 71px; left: 0; outline: 1px solid #ddd; border-top: none; display: none; width:100%;
  z-index: 20; background: #fff; }
.mysubmenu li, .mysubmenu li a, .mysubmenu h3 { color: #222; }
.mysubmenu .all_menu ul+ul li { border-top: 1px solid #ddd; }
.mysubmenu .all_menu li:hover { background: #00387D; }
.mysubmenu .all_menu li:hover a { color: #fff; }
.mysubmenu .all_menu.all_submenu li { border-top: 1px solid #ddd; }
.mysubmenu .all_menu.all_submenu li:first-child { border-top: 0; }
/* 페이지 전체에서 공통으로 사용(나중에 하나의 파일로 엮을 예정 */
.main-section { width: 100%; padding: 60px 0; } /* 전체 페이지가 들어갈 공간 - 처음에는 index에서만 사용하려 했는데 sub에서도 사용 */
/* .fa-spin { -webkit-animation: none; animation: none; } */
.fa { vertical-align: 5%; }
.red { border:1px solid red; }
.inner { width: 1200px; margin: 0 auto; padding: 0 10px; height: 100%; }
.clearfix:before, .clearfix:after { display: block; content: ""; clear: both; }
.icon-title { background-image: url(/image/common/bullet.gif); background-repeat: no-repeat; background-position-y: 20%; padding-left: 20px; }
.icon-title > h3 { font-size: 1.1rem; color: #222; padding: 0 0 20px 0; }
.sicon-title {
  background-image: url(/image/common/bullet01.gif); background-repeat: no-repeat; background-position-y: 7px;
  padding: 0 0 20px 20px; font-size: 1rem; color: #222; }
.center { display: flex; justify-content: center; align-items: center; text-align: center; }
.text-area { width: 100%; }
.desc  { font-size: 1rem; }
.desc > p { margin: 10px auto; word-break: break-all; }
.usage img { padding: 10px 0 50px 25px; }
.box-rad { border-radius: 8px; border: 5px solid #EEEEEE; padding: 15px; margin-bottom:20px; font-size: 1rem; height: 100%; }
.mb-1 { margin-bottom: 10px }
.mb-2 { margin-bottom: 20px }
.pb-2 { padding-bottom: 20px }
.mt-3 { margin-top: 30px }
.mb-3 { margin-bottom: 30px }
.pb-3 { padding-bottom: 30px }
.mb-5 { margin-bottom: 50px }
/* 사이트맵 테이블 */
.sm_wrap table { border-collapse:collapse; border-spacing:0; margin-bottom: 30px; }
.sm_wrap a, .sm_wrap a:hover, a:focus, a:active { text-decoration: none; }
/* .sm_tbl { margin: 0 0 8px; } */
.sm_tbl thead { border-top:2px solid #999999; }
.sm_tbl th { padding: 12px; border-bottom: 1px solid #C4C4C4; color: #222; background: #F3F3F3; font-size: 0.92rem; }
.sm_tbl td { padding: 10px; border-bottom:1px solid #C4C4C4; line-height: 20px; font-size: 0.92rem; }
.sm_tbl .r_line { border-right:1px solid #C4C4C4; }
/* 사이트맵 테이블 끝 */
.view_more { margin: 35px 0 0; }
.view_more a { line-height: 40px; color: #343434; text-align: center; width: 150px; height: 40px; border: 1px solid #343434; background-color: transparent; }
@media screen and (max-width: 491px) {
}
@media screen and (max-width: 1199px) {
  .inner { width: 100%; max-width: 1180px; }
  .visual h2 { font-size: 2.8rem; font-weight: 600; }
  /* .title-area .desc { font-size: 1rem; } */
  .visual span { font-size: 15px; line-height: 22px; }
  .mysubmenu { margin: -30px auto 0; width: 100%; }
  .mysubmenu .menu_select { width: 180px; height: 60px; }
  .mysubmenu .sub-menulist-area { width: 220px; }
  .mysubmenu .menu_select.home { width: 60px; height: 60px; /* background-size: 18px auto; */ }
  .mysubmenu .menu_select.home a { line-height: 60px; }
  .mysubmenu .menu_select li a { padding: 0 15px; height: 60px; line-height: 60px; }
  .mysubmenu .all_menu { top: 61px; }
  .mysubmenu .current_menu { background-size: 15px auto; }
}
@media screen and (max-width: 767px) {
  .inner { width: 100%; max-width: 747px; }
  .visual { height: 360px; }
  .visual h2 { font-size: 2.2rem; font-weight: 500; }
  .mysubmenu { margin: -25px auto 0; }
  .mysubmenu .inner { display: flex; border-right: none; }
  .mysubmenu .menu_select { height: 50px; width: 45%; }
  .mysubmenu .sub-menulist-area { width: 55%; }
  .mysubmenu .menu_select li a { height: 50px; line-height: 50px; }
  .mysubmenu .menu_select.home { z-index: 30; width: 50px; height: 50px; border-right: 1px solid #ddd; background-size: 15px auto; flex: 0 0 50px; }
  .mysubmenu .menu_select.home a { line-height: 50px; }
  .mysubmenu .all_menu { top: 51px; }
  .mysubmenu .current_menu { height: 50px; background-size: 12px auto; }
}
@media screen and (max-width: 480px) {
  .visual { height: 300px; }
  .visual h2 { font-size: 2rem; }
  .title-area .page-title { font-size: 1.4rem; margin-bottom: 20px; }
}