@charset "utf-8";

@font-face {
  font-family: "Gmarket-L";
  src: url("../font/GmarketSansLight.otf");
}

@font-face {
  font-family: "Gmarket-M";
  src: url("../font/GmarketSansMedium.otf");
}

@font-face {
  font-family: "Gmarket-B";
  src: url("../font/GmarketSansBold.otf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #333;
}

ul {
  list-style: none;
}

.clear::after {
  content: "";
  display: block;
  clear: both;
}

.inner {
  width: 100%;
}

/* =================== header 시작 ===================   */

.inner header {
}

.inner header .top {
  background-color: #f5f5f5;
  border-bottom: 1px solid #cccccc;
  box-shadow: inset 0 -5px 5px #e4e4e4;
  height: 55px;
}

.inner header .top-inner {
  max-width: 1260px;
  margin: 0 auto;
}

.inner header .top-inner .top_gnb {
  display: flex;
  justify-content: space-between;
}

.inner header .top-inner .top_gnb .gnb-list ul {
}

.inner header .top-inner .top_gnb .gnb-list ul li {
  float: left;
  height: 48px;
  line-height: 48px;
  text-align: center;
  margin: 14px 0 0 -14px;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(1) {
  margin-top: 7px;
  position: relative;
  z-index: 10;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(1) a span::before {
  content: "";
  display: inline-block;
  width: 89px;
  height: 22px;
  background: url("../image/nav_top_ico01.png") no-repeat center/cover;
  vertical-align: middle;
}

.inner header .top-inner .top_gnb .gnb-list ul li a span::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 22px;
  background: url("../image/nav_top_ico07.png") no-repeat 0 0 / cover;
  vertical-align: middle;
  margin: -5px 5px 0 0;
}

.inner
  header
  .top-inner
  .top_gnb
  .gnb-list
  ul
  li:nth-child(n + 2):nth-child(-n + 5)
  a {
  color: #ffffff;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(3) a span::before {
  width: 21px;
  height: 18px;
  background: url("../image/nav_top_ico05.png") no-repeat 0 0 / cover;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(4) a span::before {
  width: 22px;
  height: 17px;
  background: url("../image/nav_top_ico06.png") no-repeat 0 0 / cover;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(5) a span::before {
  width: 22px;
  height: 22px;
  background: url("../image/nav_top_ico08.png") no-repeat 0 0 / cover;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(6) a span::before {
  width: 24px;
  height: 24px;
  background: url("../image/nav_top_ico03_b.png") no-repeat 0 0 / cover;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(7) a span::before {
  width: 22px;
  height: 19px;
  background: url("../image/nav_top_ico04_b.png") no-repeat 0 0 / cover;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(8) a span::before {
  width: 22px;
  height: 22px;
  background: url("../image/nav_top_ico02_b.png") no-repeat 0 0 / cover;
}

.inner header .top-inner .top_gnb .gnb-list ul li a {
  display: block;
  height: 41px;
  line-height: 41px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  padding: 0 27px;
  position: relative;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(1) a {
  height: 48px;
  line-height: 48px;
}

.inner header .top-inner .top_gnb .gnb-list ul li a span {
  z-index: 10;
  position: relative;
}

.inner header .top-inner .top_gnb .gnb-list ul li a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 49%;
  left: 0;
  bottom: 0;
  background: url("../image/nav_top02.png") no-repeat 0 0 / auto 100%;
  z-index: 9;
}

.inner header .top-inner .top_gnb .gnb-list ul li a::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  left: 49%;
  bottom: 0;
  background: url("../image/nav_top02.png") no-repeat 0 0 / auto 100%;
  z-index: 9;
  background-position: 100% 0;
}

.inner header .top-inner .top_gnb .gnb-right {
  display: flex;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(1) a::before {
  background: url("../image/nav_top_over.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(1) a::after {
  background: url("../image/nav_top_over.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(2) a::before {
  background: url("../image/nav_top02.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(2) a::after {
  background: url("../image/nav_top02.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(3) a::before {
  background: url("../image/nav_top03.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(3) a::after {
  background: url("../image/nav_top03.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(4) a::before {
  background: url("../image/nav_top04.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(4) a::after {
  background: url("../image/nav_top04.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(5) a::before {
  background: url("../image/nav_top08.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(5) a::after {
  background: url("../image/nav_top08.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(6) a::before {
  background: url("../image/nav_top05kk.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(6) a::after {
  background: url("../image/nav_top05kk.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(7) a::before {
  background: url("../image/nav_top06kk.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(7) a::after {
  background: url("../image/nav_top06kk.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(8) a::before {
  background: url("../image/nav_top07kk.png") no-repeat 0 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-list ul li:nth-child(8) a::after {
  background: url("../image/nav_top07kk.png") no-repeat 100% 0 / auto 100%;
}

.inner header .top-inner .top_gnb .gnb-right .map {
}
.inner header .top-inner .top_gnb .gnb-right .map ul {
}
.inner header .top-inner .top_gnb .gnb-right .map ul li {
  float: left;
  margin-top: 14px;
}

.inner header .top-inner .top_gnb .gnb-right .map ul li a {
  display: block;
  height: 41px;
  line-height: 41px;
  padding: 0 10px;
  font-size: 14px;
}

.inner header .top-inner .top_gnb .gnb-right .map ul li:nth-child(2) {
  position: relative;
}

.inner header .top-inner .top_gnb .gnb-right .map ul li:nth-child(2)::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 15px;
  background-color: #e0e0e0;
  transform: translateY(-50%);
}

.inner header .top-inner .top_gnb .gnb-right .lang {
}
.inner header .top-inner .top_gnb .gnb-right .lang button {
  display: block;
  width: 156px;
  height: 55px;
  padding: 13px 17px 0;
  border: none;
  background-color: #6d6c6c;
  font-weight: 600;
  color: #ffffff;
}
.inner header .top-inner .top_gnb .gnb-right .lang button span {
  position: relative;
  display: inline-block;
  width: 122px;
  height: 100%;
  padding-top: 10px;
  border-top: 1px solid #999898;
}

.inner header .top-inner .top_gnb .gnb-right .lang button span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 17px;
  background: url(../image/ico_lang.png) 0 0 / cover;
  vertical-align: middle;
  left: 0px;
  top: 10px;
  margin: auto;
}
.inner header .top-inner .top_gnb .gnb-right .lang button span::after {
  content: "";
  width: 12px;
  height: 7px;
  position: absolute;
  background: url(../image/ico_lang_arr.png) 0 0 / cover;
  right: 0;
  top: 13px;
}

.inner header .logo-wrap {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  height: 104px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cbcbcb;
}

.inner header .logo-wrap .logo {
}

.inner header .logo-wrap .logo a {
}
.inner header .logo-wrap .main-gnb {
}
.inner header .logo-wrap .main-gnb ul {
}
.inner header .logo-wrap .main-gnb ul li {
  float: left;
}
.inner header .logo-wrap .main-gnb ul li a {
  margin: 0 30px;
  display: block;
  height: 103px;
  line-height: 103px;
  font-family: "Gmarket-M";
  font-size: 20px;
  white-space: nowrap;
}
.inner header .logo-wrap .sns-link {
}
.inner header .logo-wrap .sns-link .btn-sns {
  width: 256px;
  height: 82px;
  background: url(../image/ico_header_sns.png) 0 0 / cover;
  /* background 순서 : 경로 > repeat여부 > 포지션(위치 상하 좌우 or center) 사이즈 (contain or cover) */
  border: none;
  position: relative;
}
.inner header .logo-wrap .sns-link .btn-sns::after {
  content: "";
  width: 26px;
  height: 26px;
  border: 1px solid #3982db;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  background: #ffffff url(../image/ico_header_sns_barr.png) no-repeat 50%;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

/* =================== header 끝 ===================   */

/* =================== main 시작 ===================   */

main {
  width: 100%;
  background: url("../image/bg_main.jpg") no-repeat 50% 100%;
  padding-bottom: 70px;
}

main .main-wrap {
  max-width: 1260px;
  margin: 0 auto;
}

/* =================== section-1 시작 ===================   */

main .main-wrap .section-1 {
  padding-top: 28px;
}

main .main-wrap .section-1 .left {
  float: left;
  width: 40%;
}
main .main-wrap .section-1 .left .weather-api {
}
main .main-wrap .section-1 .left .logo-suseong {
  padding: 25px 0px 33px;
  text-align: center;
}
main .main-wrap .section-1 .left .srch-area {
  padding: 7px;
  background: linear-gradient(to right, #8cbf3b, #29a67a, #35a5de, #3781dd);
  width: 487px;
  height: 60px;
}

main .main-wrap .section-1 .left .srch-area .srch-wrap {
  position: relative;
  width: 473px;
  height: 46px;
}

main .main-wrap .section-1 .left .srch-area .srch-wrap input {
  border: none;
  width: 100%;
  height: 100%;
}

main .main-wrap .section-1 .left .srch-area label {
  display: none;
}
main .main-wrap .section-1 .left .srch-area span {
  width: 100%;
  height: 100%;
  padding: 7px 8px;
  padding-right: 45px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 36px;
  font-weight: 600;
  font-size: 20px;
  color: #2f7ade;
  letter-spacing: -1px;
  font-family: "Gmarket-B";
}
main .main-wrap .section-1 .left .srch-area .srch-wrap span em {
  font-style: normal;
  color: #44a261;
}
main .main-wrap .section-1 .left .srch-area .srch-wrap button {
  border: none;
  width: 40px;
  height: 46px;

  position: absolute;
  top: 0;
  right: 0;
  background: url(../image/ico_srch.png) no-repeat center;
}
main .main-wrap .section-1 .left .hotkey {
  margin-top: 20px;
  text-align: center;
}
main .main-wrap .section-1 .left .hotkey h4 {
  float: left;
  padding: 5px 8px 1px;
  border-radius: 30px;
  background-color: #c5df90;
  font-family: "Gmarket-M";
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-right: 14px;
}
main .main-wrap .section-1 .left .hotkey ul {
  display: flex;
  gap: 20px;
}
main .main-wrap .section-1 .left .hotkey ul li a {
}

main .main-wrap .section-1 .right {
  float: right;
}

main .main-wrap .section-1 .right .main-bnn {
  width: 731px;
  position: relative;
}
main .main-wrap .section-1 .right .main-bnn .bxslider {
}

main .main-wrap .section-1 .right .main-bnn .bxslider li {
}

main .main-wrap .section-1 .right .main-bnn .bxslider li a {
}

main .main-wrap .section-1 .right .main-bnn .bxslider li a img {
  border-radius: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.bx-wrapper {
  border: none;
  background-color: transparent !important;
  box-shadow: none;
  margin-bottom: 0;
}

.bx-wrapper .bx-pager {
  padding-top: 0;
  position: static;
}

.bx-wrapper .bx-pager.bx-default-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  margin-top: 15px;
  gap: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background-color: #aaaaaa;
  margin: 0 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background-color: #2ca6e0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

main .main-wrap .section-1 .right .main-bnn #playStopButton {
  width: 30px;
  height: 30px;
  position: absolute;
  border: none;
  background-color: transparent;
  cursor: pointer;
  bottom: 0;
  right: 250px;
}

main .main-wrap .section-1 .right .main-bnn #playStopButton span {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
}

main .main-wrap .section-1 .right .main-bnn #playStopButton span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
  background: url("../image/sp_main.png") no-repeat;
  background-position: var(--bg-position, 0 0);
}

/* =================== section-1 끝 ===================   */

/* =================== section-2 시작 ===================   */

main .main-wrap .section-2 .left .tab-box ul li .icon-Slider #playStopButton-1 {
  width: 30px;
  height: 30px;
  position: absolute;
  border: none;
  background-color: transparent;
  cursor: pointer;
  bottom: -44px;
  right: 250px;
}

main
  .main-wrap
  .section-2
  .left
  .tab-box
  ul
  li
  .icon-Slider
  #playStopButton-1
  span {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
}

main
  .main-wrap
  .section-2
  .left
  .tab-box
  ul
  li
  .icon-Slider
  #playStopButton-1
  span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
  background: url("../image/sp_main.png") no-repeat;
  background-position: var(--bg-position, 0 0);
}

.bx-wrapper .bx-controls-direction {
  position: relative;
}

.bx-wrapper .bx-controls-direction a {
  top: 30px !important;
  width: 30px;
  height: 30px;
}

.bx-wrapper .bx-controls-direction .bx-prev {
  left: 200px;
  background: url("../image/sp_main.png") -68px 0px no-repeat;
}

.bx-wrapper .bx-controls-direction .bx-next {
  right: 200px;
  position: relative;
  background: none;
  color: transparent;
}

.bx-wrapper .bx-controls-direction .bx-next::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../image/sp_main.png") no-repeat -68px 0;
  transform: scaleX(-1);
  width: 30px;
  height: 30px;
}

main .main-wrap .section-2 {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
}

main .main-wrap .section-2 .left .tab-box {
  height: 245px;
  position: relative;
  margin-top: 20px;
  padding: 20px 10px 20px 140px;
  border: 2px solid #ffffff;
  border-radius: 15px;
  z-index: 1000;
}

main .main-wrap .section-2 .left {
  width: 730px;
  height: 363px;
  padding: 20px;
  border-radius: 30px;
  background-color: #d1ebfc;
}
main .main-wrap .section-2 .left .tab-menu {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

main .main-wrap .section-2 .left .tab-menu li {
}
main .main-wrap .section-2 .left .tab-menu li a {
  font-size: 20px;
  color: #ffffff;
  background-color: #6c6b6b;
  display: inline-block;
  width: 137px;
  height: 54px;
  border-radius: 23px 0;
  text-align: center;
  line-height: 54px;
  font-family: "Gmarket-M";
}

main .main-wrap .section-2 .left .tab-menu li:nth-last-child(1) a {
  width: 56px;
  border: 2px solid #4f5466;
  background-color: #ffffff;
}

main .main-wrap .section-2 .left .tab-menu li:nth-last-child(1) a::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../image/ico_svctab_more.png") no-repeat 0 0;
}

main .main-wrap .section-2 .left .tab-box::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: -10px;
  width: 170px;
  height: auto;
  aspect-ratio: 405/484;
  background: url("../image/bg_svczone_ddubi.png") no-repeat 0 0 / cover;
}
main .main-wrap .section-2 .left .tab-box ul {
}
main .main-wrap .section-2 .left .tab-box ul li {
}
main .main-wrap .section-2 .left .tab-box ul li .icon-Slider {
  position: relative;
}

main .main-wrap .section-2 .left .tab-box ul li .icon-Slider .bx-wrapper {
}

main
  .main-wrap
  .section-2
  .left
  .tab-box
  ul
  li
  .icon-Slider
  .bx-wrapper
  .bx-viewport {
  height: auto;
}

main .main-wrap .section-2 .left .tab-box ul li .icon-Slider .bxslider-icon {
  display: flex;
}
main .main-wrap .section-2 .left .tab-box ul li .icon-Slider .bxslider-icon li {
}
main
  .main-wrap
  .section-2
  .left
  .tab-box
  ul
  li
  .icon-Slider
  .bxslider-icon
  li
  a {
}

main
  .main-wrap
  .section-2
  .left
  .tab-box
  ul
  li
  .icon-Slider
  .bxslider-icon
  li
  a
  img {
  background-color: #ffffff;
  border-radius: 35%;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

main
  .main-wrap
  .section-2
  .left
  .tab-box
  ul
  li
  .icon-Slider
  .bxslider-icon
  li
  span {
  display: block;
  text-align: center;
  margin-top: 15px;
  font-family: "Gmarket-M";
  color: #333333;
}

main .main-wrap .section-2 .right {
  width: 488px;
}
main .main-wrap .section-2 .right .ceo-info-inner {
}
main .main-wrap .section-2 .right .ceo-info-inner .area-ceo {
  width: 100%;
  height: 250px;
  border: 2px solid #d1ebfc;
  border-radius: 30px;
  background: url("../image/bg_mayor2.jpg") no-repeat 100% 100%;
}
main .main-wrap .section-2 .right .ceo-info-inner .area-ceo {
}
main .main-wrap .section-2 .right .ceo-info-inner .area-ceo .text01 {
  display: block;
  padding: 35px 0 0 26px;
}
main .main-wrap .section-2 .right .ceo-info-inner .area-ceo .text02 {
  display: block;
  padding: 35px 0 0 26px;
}
main .main-wrap .section-2 .right .ceo-info-inner .area-ceo .ceo-btn1 {
  display: block;
  width: 150px;
  height: 33px;
  line-height: 33px;
  margin: 10px 0 0 20px;
  border-radius: 30px;
  font-family: "Gmarket-M";
  font-size: 15px;
  background: #dadf00;
  text-align: center;
}
main .main-wrap .section-2 .right .ceo-info-inner .area-ceo .ceo-btn2 {
  display: block;
  width: 150px;
  height: 33px;
  line-height: 33px;
  margin: 4px 0 0 20px;
  border-radius: 30px;
  font-family: "Gmarket-M";
  font-size: 15px;
  background: #dadf00;
  text-align: center;
}

main .main-wrap .section-2 .right .ceo-info-inner .area-info {
  margin: 30px 0 0;
}

main .main-wrap .section-2 .right .ceo-info-inner .area-info .info-list {
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  background-color: #3e508a;
}

main .main-wrap .section-2 .right .ceo-info-inner .area-info .info-list li {
  height: 79px;
  position: relative;
  flex: 1;
}

main
  .main-wrap
  .section-2
  .right
  .ceo-info-inner
  .area-info
  .info-list
  li::before {
  content: "";
  position: absolute;
  border-left: 1px solid #6573a1;
  top: 16px;
  left: 0;
  bottom: 14px;
}

main .main-wrap .section-2 .right .ceo-info-inner .area-info .info-list li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

main
  .main-wrap
  .section-2
  .right
  .ceo-info-inner
  .area-info
  .info-list
  li
  a::before {
  content: "";
  display: block;
  width: 60px;
  height: 34px;
  margin: 0 auto 5px;
  background: url("../image/ico_info01.png") no-repeat 0 0;
}

main
  .main-wrap
  .section-2
  .right
  .ceo-info-inner
  .area-info
  .info-list
  li:nth-child(2)
  a::before {
  background: url("../image/ico_info02.png") no-repeat 0 0;
}

main
  .main-wrap
  .section-2
  .right
  .ceo-info-inner
  .area-info
  .info-list
  li:nth-child(3)
  a::before {
  background: url("../image/ico_info03.png") no-repeat 0 0;
}

main
  .main-wrap
  .section-2
  .right
  .ceo-info-inner
  .area-info
  .info-list
  li:nth-child(4)
  a::before {
  background: url("../image/ico_info04.png") no-repeat 0 0;
}

main
  .main-wrap
  .section-2
  .right
  .ceo-info-inner
  .area-info
  .info-list
  li
  a
  span {
  font-weight: 600px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
}
/* =================== section-2 끝 ===================   */

/* =================== section-3 시작 ===================   */

main .main-wrap .section-3 {
  margin-top: 50px;
}
main .main-wrap .section-3 .area-notice {
  height: 360px;
  background: #eeeeee;
  border-radius: 0 0 20px 0;
  padding: 64px 0 0 142px;
  position: relative;
  overflow: hidden;
}
main .main-wrap .section-3 .area-notice .tab-mn {
  height: 100%;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 20px 0;
}

main .main-wrap .section-3 .area-notice .tab-mn > li {
  height: 100%;
}

main .main-wrap .section-3 .area-notice .tab-mn > li > a {
  display: flex;
  align-items: center;
  position: absolute;
  top: 12px;
  left: 0;
  width: 142px;
  height: 66px;
  font-family: "Gmarket-M";
  font-size: 16px;
  text-align: center;
  padding-left: 24px;
  transition: left 0.4s cubic-bezier(0.38, 0.18, 0.43, 1.93);
}

main .main-wrap .section-3 .area-notice .tab-mn > li > a.active {
  justify-content: center;
  left: 24px;
  padding-left: 0;
  border-radius: 24px 0;
  background: #3b80d8;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.12);
  text-align: center;
}

main .main-wrap .section-3 .area-notice .tab-mn > li:nth-child(2) > a {
  top: 78px;
}

main .main-wrap .section-3 .area-notice .tab-mn > li:nth-child(3) > a {
  top: 144px;
}

main .main-wrap .section-3 .area-notice .tab-mn > li:nth-child(4) > a {
  top: 210px;
}

main .main-wrap .section-3 .area-notice .tab-mn > li:nth-child(5) > a {
  top: 276px;
}

main .main-wrap .section-3 .area-notice .tab-mn > li > a > span {
  text-align: left;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 66px;
  padding-left: 5px;
  border-top: 1px solid #cbcbcb;
}

main .main-wrap .section-3 .area-notice .tab-mn > li:nth-child(1) > a > span {
  border-top: 0;
}
main .main-wrap .section-3 .area-notice .tab-mn > li > a.active > span {
  border-top: 0;
  text-align: center;
}

main .main-wrap .section-3 .area-notice .tab-mn li .tab-contents {
  display: none;
  position: absolute;
  top: 64px;
}

/* main .main-wrap .section-3 .area-notice .tab-mn li #news02 .news-list li a span,
#news05 .news-list li a span {
  background: transparent;
} */

main .main-wrap .section-3 .area-notice .tab-mn li .news-list {
  display: flex;
}

main .main-wrap .section-3 .area-notice .tab-mn li .news-list li {
  width: 25%;
  padding: 29px 30px 0;
  position: relative;
}

main .main-wrap .section-3 .area-notice .tab-mn li .news-list li::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  bottom: 40px;
  bottom: 40px;
  border-left: 1px solid #e4e4e4;
}

main
  .main-wrap
  .section-3
  .area-notice
  .tab-mn
  li
  .news-list
  li:nth-child(1)::before {
  border-left: 0;
}

main .main-wrap .section-3 .area-notice .tab-mn li .news-list li a {
  position: relative;
  height: 168px;
  padding-top: 40px;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  color: #333333;
  display: block;
}

main .main-wrap .section-3 .area-notice .tab-mn li .news-list li a span {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  background: #d1ebfc;
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  color: #3a3c84;
}

main
  .main-wrap
  .section-3
  .area-notice
  .tab-mn
  li:nth-child(2)
  .news-list
  li
  a
  span {
  background: transparent;
}
main
  .main-wrap
  .section-3
  .area-notice
  .tab-mn
  li:nth-child(5)
  .news-list
  li
  a
  span {
  background: transparent;
}

main .main-wrap .section-3 .area-notice .tab-mn li .news-list li .date {
  display: flex;
  align-items: center;
  margin-top: 35px;
  padding-top: 18px;
  border-top: 1px solid #e4e4e4;
  font-size: 16px;
  line-height: 1.3;
  color: #666666;
  letter-spacing: 0;
}

main .main-wrap .section-3 .area-notice .tab-mn li .news-list li .date::before {
  content: "";
  width: 16px;
  height: 17px;
  margin-right: 8px;
  background: url("../image/ico_date.png") no-repeat 0 0;
}

/* =================== section-3 끝 ===================   */

/* =================== section-4 시작 ===================   */

main .main-wrap .section-4 {
  padding: 70px 0;
  display: flex;
  justify-content: space-between;
  max-width: 1260px;
  margin: 0 auto;
}
main .main-wrap .section-4 .left {
  width: calc(50% - 20px);
}
main .main-wrap .section-4 .left h1 {
  margin-bottom: 20px;
  font-family: "Gmarket-L";
  line-height: 1.2;
  font-size: 24px;
}
main .main-wrap .section-4 .left h1 strong {
  font-family: "Gmarket-B";
}
main .main-wrap .section-4 .left h1 span {
  color: #853bd8;
  font-family: "Gmarket-L";
}
main .main-wrap .section-4 .left .area-popup {
  padding-bottom: 44px;
}
main .main-wrap .section-4 .left .area-popup .bxslider-popup {
}
main .main-wrap .section-4 .left .area-popup .bxslider-popup li {
  /* padding: 0 7px; */
}
main .main-wrap .section-4 .left .area-popup .bxslider-popup li a {
}
main .main-wrap .section-4 .left .area-popup .bxslider-popup li a img {
}
main .main-wrap .section-4 .left .area-news {
  overflow: hidden;
  margin-top: 30px;
  height: 232px;
}

main .main-wrap .section-4 .left .area-news ul {
  margin: 0 -7px;
  height: 100%;
}

main .main-wrap .section-4 .left .area-news ul li {
  float: left;
  width: 50%;
  padding: 0 7px;
  height: 100%;
}

main .main-wrap .section-4 .left .area-news ul li a {
  height: 100%;
  position: relative;
}

main .main-wrap .section-4 .left .area-news ul li:nth-child(1) a .img {
  background: url(../image/img_comm011.jpg) no-repeat 0 0 / cover;
  width: 100%;
  height: 100%;
}

main .main-wrap .section-4 .left .area-news ul li:nth-child(2) a .img {
  background: url("../image/getImage.do") no-repeat 0 0 / cover;
  width: 100%;
  height: 100%;
}

main .main-wrap .section-4 .left .area-news ul li a .tit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 15px 15px;
}
main .main-wrap .section-4 .left .area-news ul li a .tit em {
  font-style: normal;
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
}
main .main-wrap .section-4 .left .area-news ul li a .tit em::after {
  content: "+";
  display: inline-block;
  margin: 0 0 0 3px;
  font-size: 18px;
  line-height: 10px;
}

main .main-wrap .section-4 .left .area-news ul li a .tit strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0 0;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.7);
}

main .main-wrap .section-4 .right {
  width: calc(50% - 20px);
}

main .main-wrap .section-4 .right h1 {
  font-family: "Gmarket-L";
  font-size: 24px;
  margin: 0 0 20px;
}
main .main-wrap .section-4 .right h1 strong {
}
main .main-wrap .section-4 .right h1 span {
}
main .main-wrap .section-4 .right .area-sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main .main-wrap .section-4 .right .area-sns .sns-item {
  position: relative;
  width: calc(50% - 7px);
  background: #ffffff;
}

main .main-wrap .section-4 .right .area-sns .sns-item a {
  display: block;
  overflow: hidden;
  position: relative;
}
main .main-wrap .section-4 .right .area-sns .sns-item a .ico {
  display: inline-block;
  overflow: hidden;
  color: transparent !important;
  white-space: nowrap;
  background: url(../image/sp_main.png) no-repeat 0 0;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 44px;
  height: 44px;
}
main .main-wrap .section-4 .right .area-sns .sns-item a .facebook {
  background-position: 0 -192px;
}
main .main-wrap .section-4 .right .area-sns .sns-item a .blog {
  background-position: -48px -192px;
}
main .main-wrap .section-4 .right .area-sns .sns-item a .insta {
  background-position: 0 -240px;
}
main .main-wrap .section-4 .right .area-sns .sns-item a .youtube {
  background-position: -48px -240px;
}
main .main-wrap .section-4 .right .area-sns .sns-item .item-1 .img {
  background: url(../image/467719202_901650148790336_6392612319072894822_n.jpg)
    no-repeat 0 0 / cover;
  width: 296px;
  height: 197px;
}
main .main-wrap .section-4 .right .area-sns .sns-item a .txt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 50px;
  margin: 8px 0 7px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 25px;
}
main .main-wrap .section-4 .right .area-sns .sns-item .item-2 .img {
  background: url(../image/blogImgNew1.png) no-repeat 0 0 / cover;
  width: 296px;
  height: 197px;
}

main .main-wrap .section-4 .right .area-sns .sns-item .item-1,
.item-2 {
  border: 1px solid #cccccc;
}

main .main-wrap .section-4 .right .area-sns .sns-item .item-3,
.item-4 {
  margin-top: 14px;
  border: 1px solid #cccccc;
}

main .main-wrap .section-4 .right .area-sns .sns-item .item-3 .img {
  background: url("../image/467546852_1075854277552430_8591874885711983811_n.jpg")
    no-repeat 0 0 / cover;
  width: 296px;
  height: 197px;
}

main .main-wrap .section-4 .right .area-sns .sns-item .item-4 .img {
  background: url("../image/20241113103010216.jpg") no-repeat 0 0 / cover;
  width: 296px;
  height: 197px;
}
/* =================== section-4 끝 ===================   */

/* =================== section-5 시작 ===================   */

main .main-wrap .section-5 {
  margin-bottom: 70px;
}
main .main-wrap .section-5 .tab-usersvc {
  width: 100%;
  position: relative;
}

main .main-wrap .section-5 .tab-usersvc::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  height: 3px;
  background: #dadf00;
}

main .main-wrap .section-5 .tab-usersvc > li {
  float: left;
  width: 25%;
}
main .main-wrap .section-5 .tab-usersvc > li > a {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  background: #ffffff;
  color: #222222;
  display: block;
  text-align: center;
  height: 68px;
  line-height: 68px;
  font-family: "Gmarket-B";
  position: relative;
}

main .main-wrap .section-5 .tab-usersvc > li > a.active {
  border-color: #dadf00;
  background: #dadf00;
  color: #333;
}

main .main-wrap .section-5 .tab-usersvc > li > a.active::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 20px solid transparent;
  border-bottom: 0;
  border-top-color: #dadf00;
  z-index: 11;
}

main .main-wrap .section-5 .tab-usersvc > li:nth-child(4) > a {
  border-right: 1px solid #cccccc;
}

main .main-wrap .section-5 .tab-usersvc > li > a::before {
  content: "";
  display: inline-block;
  width: 54px;
  height: 54px;
  vertical-align: middle;
  background: url(../image/sp_main.png) no-repeat 0 0;
}

main .main-wrap .section-5 .tab-usersvc > li > a .title {
  margin-left: 10px;
}

main .main-wrap .section-5 .tab-usersvc > li:nth-child(1) > a::before {
  background-position: -270px -34px;
}

main .main-wrap .section-5 .tab-usersvc > li:nth-child(2) > a::before {
  background-position: -270px -92px;
}

main .main-wrap .section-5 .tab-usersvc > li:nth-child(3) > a::before {
  background-position: -270px -150px;
}
main .main-wrap .section-5 .tab-usersvc > li:nth-child(4) > a::before {
  background-position: -270px -208px;
}

main .main-wrap .section-5 .tab-usersvc > li > .item-usersvc-01 {
  position: absolute;
  top: 68px;
  left: 0;
  border: 1px solid #cccccc;
  display: block;
  width: 100%;
  padding: 28px 0 55px;
  background: #ffffff;
}

main .main-wrap .section-5 .tab-usersvc li .item-usersvc-01 li {
  float: left;
  width: 10%;
}
main .main-wrap .section-5 .tab-usersvc li .item-usersvc-01 li a {
  margin-top: 20px;
  display: block;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(1)
  a
  .img {
  background: url(../image/ico_part01.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(2)
  a
  .img {
  background: url(../image/ico_part02.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(3)
  a
  .img {
  background: url(../image/ico_part03.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(4)
  a
  .img {
  background: url(../image/ico_part04.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(5)
  a
  .img {
  background: url(../image/ico_part05.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(6)
  a
  .img {
  background: url(../image/ico_part06.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(7)
  a
  .img {
  background: url(../image/ico_part07.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(8)
  a
  .img {
  background: url(../image/ico_part08.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(9)
  a
  .img {
  background: url(../image/ico_part09.png) no-repeat center/cover;
}

main
  .main-wrap
  .section-5
  .tab-usersvc
  li
  .item-usersvc-01
  li:nth-child(10)
  a
  .img {
  background: url(../image/ico_part10.png) no-repeat center/cover;
}

main .main-wrap .section-5 .tab-usersvc li .item-usersvc-01 li a .img {
  display: block;
  background: url(../image/ico_part01.png) no-repeat center/cover;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

main .main-wrap .section-5 .tab-usersvc li .item-usersvc-01 li a .title {
  text-align: center;
  display: inline-block;
  width: 100%;
}

main .main-wrap .section-5 .tab-usersvc > li > .item-usersvc-02 {
  position: absolute;
  top: 68px;
  left: 0;
  border: 1px solid #cccccc;
  display: block;
  width: 100%;
  padding: 28px 0 55px;
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
}

main .main-wrap .section-5 .tab-usersvc > li > .item-usersvc-02 li {
  width: calc(20% - 30px);
  /* 계산법 사용시 무조건 띄우고 연산(+ 또는 - 또는 /) 넣어주기 */
  margin: 0 15px;
}

main .main-wrap .section-5 .tab-usersvc > li > .item-usersvc-02 li a {
  display: block;
  position: relative;
  padding: 0 0 0 25px;
  border-bottom: 1px dashed #dddfe0;
  font-size: 16px;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main .main-wrap .section-5 .tab-usersvc > li > .item-usersvc-02 li a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bbbbbb;
  margin: auto;
}

main .main-wrap .section-5 .tab-usersvc > li > .item-usersvc-02,
.item-usersvc-02 {
  display: none;
}
/* =================== section-5 끝 ===================   */

/* =================== main 끝 ===================   */

/* =================== main-area-info 시작 ===================   */

main .main-area-info {
  width: 100px;
  position: fixed;
  top: 278px;
  right: 22px;
  z-index: 100;
}
main .main-area-info .go-top {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background: url(../image/ico_sky_top.png) no-repeat 0 0;
  color: transparent;
}
main .main-area-info .info-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
  width: 100px;
  margin: 15px auto;
}
main .main-area-info .info-list li {
}
main .main-area-info .info-list li a {
  display: block;
  position: relative;
  width: 100%;
  height: 120px;
  padding-top: 10px;
  border-radius: 25px;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

main .main-area-info .info-list li a::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 5px;
  border-radius: 50%;
  background: #ffffff;
}

main .main-area-info .info-list li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

main .main-area-info .info-list li:nth-child(1) a::after {
  width: 53px;
  height: 58px;
  background: url(../image/ico_quick01.png) no-repeat 0 0;
}

main .main-area-info .info-list li:nth-child(2) a::after {
  width: 59px;
  height: 58px;
  background: url(../image/ico_quick02.png) no-repeat 0 0;
}

main .main-area-info .info-list li:nth-child(3) a::after {
  width: 56px;
  height: 60px;
  background: url(../image/ico_quick03.png) no-repeat 0 0;
}

main .main-area-info .info-list li:nth-child(1) a {
  background: #98d8d5;
}
main .main-area-info .info-list li:nth-child(2) a {
  background: #c5df90;
}
main .main-area-info .info-list li:nth-child(3) a {
  background: #e8eb69;
}
main .main-area-info .info-list li a span {
}
main .main-area-info .go-btm {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background: url(../image/ico_sky_btm.png) no-repeat 0 0;
  color: transparent;
}

/* =================== main-area-info 끝 ===================   */

/* =================== footer 시작 ===================   */

/* =================== footer-site 시작 ===================   */

footer {
}

footer .footer-wrap {
}
footer .footer-wrap .footer-site {
  background-color: #6d6c6c;
}

footer .footer-wrap .footer-site .fs-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
}
footer .footer-wrap .footer-site .fs-inner .fs-box {
  border-right: 1px solid #999898;
  width: 25%;
}
footer .footer-wrap .footer-site .fs-inner .fs-box button {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 32px 0 20px;
  background: none;
  font-size: 15px;
  line-height: 50px;
  color: #ffffff;
  text-align: left;
  border: none;
}

footer .footer-wrap .footer-site .fs-inner .fs-box button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border: 1px solid #ffffff;
  border-width: 0 0 2px 2px;
  transform: translateY(-25%) rotate(-45deg);
  transition: all 0.25s;
}

footer .footer-wrap .footer-site .fs-inner .fs-box .fs-01,
.fs-02,
.fs-03,
.fs-04 {
  display: none;
}

footer .footer-wrap .footer-site .fs-inner .fs-box:nth-child(1) {
  border-left: 1px solid #999898;
}

/* =================== footer-site 끝 ===================   */

/* =================== footer-menu 시작 ===================   */

footer .footer-wrap .footer-menu {
  max-width: 1260px;
  margin: 0 auto;
  padding: 10px 0;
}
footer .footer-wrap .footer-menu .fm-list {
  display: flex;
}
footer .footer-wrap .footer-menu .fm-list li {
}

footer .footer-wrap .footer-menu .fm-list li a {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
}

footer .footer-wrap .footer-menu .fm-list li:nth-child(1) a {
  padding-left: 0;
}

footer .footer-wrap .footer-menu .fm-list li a strong {
  color: #1f5da9;
  font-weight: 500;
}

/* =================== footer-menu 끝 ===================   */

/* =================== footer-copy 시작 ===================   */

footer .footer-wrap .footer-copy {
  max-width: 1260px;
  margin: 10px auto 40px;
  position: relative;
}
footer .footer-wrap .footer-copy .logo {
  float: left;
  margin: 5px 0 0;
}
footer .footer-wrap .footer-copy .logo img {
  height: 34px;
}
footer .footer-wrap .footer-copy .area-copy {
  float: left;
  margin: 0 0 0 20px;
  line-height: 1.6;
  letter-spacing: -1px;
}
footer .footer-wrap .footer-copy .area-copy p {
  font-size: 14px;
  color: #333333;
}
footer .footer-wrap .footer-copy .area-mark {
  position: absolute;
  top: -50px;
  right: 0;
}
footer .footer-wrap .footer-copy .area-mark ul {
  display: flex;
  align-items: center;
}
footer .footer-wrap .footer-copy .area-mark ul li a {
  margin: 25px 5px 0 0;
}
footer .footer-wrap .footer-copy .area-mark ul li a img {
}

/* =================== footer-copy 끝 ===================   */

/* =================== footer 끝 ===================   */
