/* header */
.fixed { position: fixed; top: 0; left: 0; width: 100%; background: #fff; padding: 16px; z-index: 100; border-bottom: 1px solid #eaeaea; }
.fixed .open_btn { position: absolute; top: 0; left: 0; border: 0; width: 54px; height: 54px; font-size: 30px; color: #3d3d3d; }
.fixed h1 { text-align: center; }
.fixed h1 img {display: block; margin: auto; width: 91px; }

/* aside */
aside { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; z-index: 101; transition: all 0.4s ease-out; overflow-y: auto;}
aside.open {left: 0;}
aside .navigation { width: calc(100% - 14px); height: 100%; background: #fff; padding: 15px 0; }
aside .side_login { position: relative; width: calc(100% - 14px); min-height: 100%; background: #fff; padding: 0 0; }
aside .navigation .close_btn { position: absolute; top: 0; right: 14px; width: 54px; height: 50px; font-size: 30px; border:0; color: #3d3d3d; }
aside .side_login .close_btn { position: absolute; top: 8px; right: 14px; width: 54px; height: 60px; font-size: 30px; border:0; color: #3d3d3d; }
aside .dim_bg { position: absolute; top: 0; right: 0px; width: 14px; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; transition: all 0.4s 0.3s ease-out; }
aside.open .dim_bg { opacity: 1; }

.navigation .user_status { padding: 0 15px 15px; }
.navigation .user_status .user_data { border-bottom: 1px solid #eee; line-height: 24px; padding-bottom: 10px; margin-bottom: 6px; }
.navigation .user_status .user_team dl { font-size: 0; }
.navigation .user_status .user_team dl:after { clear: both; content: ''; display: block; }
.navigation .user_status .user_team dd, .navigation .user_status .user_team dt { display: inline-block; font-size: 15px; }
.navigation .user_status .user_team dt { float: left; width: 40%; }
.navigation .user_status .user_team dd { float: right; width: 60%; }
.navigation .user_status .user_team dd i { line-height: 20px; vertical-align: bottom; }
.navigation .user_status .user_timer { border-top: 1px solid #eee; line-height: 24px; padding-top: 10px; margin-top: 6px; }
.navigation .user_status .user_timer span { color: #055f9b; }

.navigation .user_session ul { display: -webkit-flex; display: -webkit-flex; display: flex; background: #055f9b; justify-content: space-around; }
.navigation .user_session ul li { flex: 1; text-align: center; border-right: 1px solid #7baaca; }
.navigation .user_session ul li:last-child { border-right: 0; }
.navigation .user_session ul li a, .navigation .user_session ul li button {display: block; width: 100%; font-size: 18px; font-weight: 300; color: #fff; border: 0; padding: 10px 0; }

.nav_list ul li { padding: 14px 15px; border-bottom: 1px solid #ddd; }
.nav_list ul li a { display: block; font-size: 20px; }
.nav_list ul .on_sub a:before {position: absolute; top: 28px; right: 29px; width: 11px; height: 1px; content: ''; background: #333; }
.nav_list ul .on_sub a:after {position: absolute; top: 23px; right: 34px; width: 1px; height: 11px; content: ''; background: #333; }
.nav_list ul .on_sub { position: relative; }
.nav_list ul .on_sub > ul { display: none; margin-top: 14px; background: #fafafa; border-top: 1px solid #ddd; }
.nav_list ul .on_sub > ul > li { padding: 10px; }
.nav_list ul .on_sub > ul > li > a { font-size: 16px; }

.side_login .user_status { padding: 22px 15px 15px; }
.side_login .user_status .user_data { line-height: 20px; }
.side_login .user_status .xi-profile { font-size: 30px; vertical-align: top;}
.side_login .user_status .user_data > div { display: inline-block; }
.side_login .basic-btn_group { font-size: 0; }
.side_login .basic-btn_group > .full_btn { display: inline-block; width: 50%; font-size: 18px; }
.side_login .basic-btn_group > .full_btn:first-child {border-right: 1px solid #89b4d0; }

.side_login .outlog_box { width: 100%; padding: 15px; background: #d8d8d8; font-size: 0;}
.side_login .outlog_box a {display: inline-block; width: 50%; padding: 50px 0 20px; color: #fff; background-size: 30px !important; font-size: 12px; text-align: center; border-right: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;}
.side_login .outlog_box a:nth-child(1) {background: url('/mobile/assets/images/main/side_icon-00.png') #055f9b center 14px no-repeat;}
.side_login .outlog_box a:nth-child(2) {background: url('/mobile/assets/images/main/side_icon-01.png') #055f9b center 14px no-repeat;}
.side_login .outlog_box a:nth-child(3) {background: url('/mobile/assets/images/main/side_icon-02.png') #055f9b center 14px no-repeat;}
.side_login .outlog_box a:nth-child(4) {background: url('/mobile/assets/images/main/side_icon-03.png') #055f9b center 14px no-repeat;}
.side_login .outlog_box a:nth-child(5) { padding-top: 68px; background: url('/mobile/assets/images/main/side_icon-04.png') #055f9b center 23px no-repeat;}
.side_login .outlog_box a:nth-child(6) {background: url('/mobile/assets/images/main/side_icon-05.png') #055f9b center 14px no-repeat;}

/* footer */
.top_footer { background: #434343; }
.top_footer ul { font-size: 0; border-top: 1px solid #717171; border-left: 1px solid #717171; }
.top_footer ul li { display: inline-block; width: 50%; text-align: center; border-right: 1px solid #717171; border-bottom: 1px solid #717171; }
.top_footer ul li a { display: block; width: 100%; padding: 7px; color: #fff; font-size: 12px; font-weight: 300; }
.bottom_footer { padding: 18px 15px; background: #212121; border: 1px solid #717171; border-top: 0; }
.bottom_footer .ft_logo { margin-bottom: 15px; }
.bottom_footer .ft_logo img { width: 100px; }
.bottom_footer .ft_addresss { color: #fff; line-height: 24px; }
.bottom_footer .ft_addresss p { font-size: 12px; }
.bottom_footer .ft_addresss p:last-child { margin-top: 10px; }
.bottom_footer .ft_addresss p img {display: inline-block; width: 15px; vertical-align: middle; margin-top: -3px; margin-right: 4px; }

.section {clear: both; padding-top: 50px;}
.section.first {padding-top: 0;}
.section:after {clear: both; content: ''; display: block;}
main {position: relative; display: block; width: 1290px; min-height: 610px; margin: 40px auto;}
.container {position: relative; width: 1290px; margin: auto;}

#visual {display: block; }
#visual .bx-wrapper {border: 0; margin-bottom: 0; box-shadow: none;}

/* basic layout */
#main { padding-top: 56px; min-height: calc(100vh - 227px); background: url('/mobile/assets/images/main/bg.png');}
#sub { position: relative; padding-top: 76px; padding-left: 15px; padding-right: 15px; padding-bottom: 20px; min-height: calc(100vh - 227px); }

#main .section {padding: 20px 0;}

/* main */
.squre_content {background: #fff; font-size: 0;}
.squre_content a {display: inline-block; width: 25%; font-size: 12px; text-align: center; padding: 23px 0; vertical-align: middle; border-right: 1px solid #ddd;}
.squre_content a:last-child {border-right: 0;}
.squre_content a img {max-width: 42px;}
.squre_content a span { display: block; height: 20px; margin-top: 12px; line-height: 1.22em;}
.squre_content .left_box span {height: 30px; margin-top: 6px;}

.main_section .full_btn { margin: 15px; width: auto; }
.main_section .col2-type_content {margin: 0 15px;}
.video_content img {max-width: 100%;}

#main .section.col2-type_wrap {padding-bottom: 0;}
.col2-type_wrap .col2-type_content {background: #fff; padding: 10px 15px 20px; margin-top: 20px;}

/* member  */
#member {background: #e9e9e9; padding-top: 120px;}
.member-wrap {width: 92%; margin: 0 auto; padding: 20px 20px 30px; background: #fff; text-align: center; }
.member-wrap .title {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;}
.member-wrap .title h1 { margin-bottom: 10px; font-size: 18px; font-weight: 400; color: #888;}
.member-wrap .title h1 img {display: block; margin: 0 auto 10px; width: 120px; padding-right: 6px;}
.member-wrap .title h4 {font-size: 20px; }
.member-wrap .title p {font-size: 16px; line-height: 1.5; color: #333;}
.sub_memo {color: #888; font-size: 13px; line-height: 1.4; margin-top: 14px;}

#admin_login input {margin-bottom: 10px;}
#admin_login .basic-btn_group {margin-top: 10px;}
#admin_login .admin_des {margin: 10px 0 20px;}
#admin_login .admin_des li {display: inline-block; padding: 0 12px; font-size: 16px; line-height: 16px;}
#admin_login .admin_des li:first-child {border-right: 1px solid #ddd;}

.usemap { width: 80%; margin: auto; }
.usemap .bx-wrapper {margin: 0; background: transparent; border: 0; box-shadow: none; }
.usemap .bx-wrapper .bx-prev { left: -32px; }
.usemap .bx-wrapper .bx-next { right: -32px; }

.check_proccess_step {margin-top: -16px; margin-bottom: 20px; font-size: 0; }
.check_proccess_step > div {width: 24.25%; padding: 5px 10px 10px; border: 1px solid #007db6; font-size: 13px; margin-right: 1%; display: inline-block; color: #333; }
.check_proccess_step > div:last-child {margin-right: 0;}
.check_proccess_step > div h2 {position: relative; font-size: 20px; margin-bottom: 14px;}
.check_proccess_step > div h2:after {position: absolute; bottom: 0; left: 0; width: 25px; height: 1px; background: #ddd; content:''; display: block;}
.check_proccess_step > .on {background: #007db6; color: #fff;}

.tablist {display: block; font-size: 0; text-align: center; margin-bottom: 26px; border-bottom: 1px solid #ccc;}
.tablist .tabs_item {position: relative; display: inline-block; padding: 15px; margin-bottom: -1px; font-size: 20px; color: #666; z-index: 1; cursor: pointer;}
.tablist .tabs_item.active {color: #171717; border-bottom: 3px solid #055f9b;}
.tab_content {display: none; padding: 16px; border: 1px solid #eee;}
.tab_content.active {display: block;}
#win_pop .hr {margin: 18px;}
.list_up_item {list-style: disc; padding-left: 30px; text-align: left;}
.list_up_item li {font-size: 16px; padding: 6px 0;}

/* 프로그레스 - 서클 */
.load-progress {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.85);
  z-index: 70;
}
.load-progress .load_circle {
  display: block;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.load-progress p {
  display: block;
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  text-align: center;
  color: #222;
}
.load-progress .spinner {
  -webkit-animation: rotator 1.4s linear infinite;
          animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}

@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
.load-progress .path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
          animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #F7C223;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #4285F4;
  }
}

@keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #F7C223;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #4285F4;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}