@charset "UTF-8";

/* ## layout */
.full-screen {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.scrollbar-track-y {
  opacity: 0 !important;
}

#scrollWrap {
  width: 100%;
  height: 100%;
}
#scrollWrap #wrapper {
  width: 100%;
  height: auto;
}

#header {
  background: #fff;
  clear: both;
  width: 100%;
  position: relative;
  z-index: 10;
  transition: all 0.3s;
  height: 6rem;
  display: flex;
  align-items: center;
  color: #fff;
  box-shadow: 0px 1px 4.9px 0.2px rgba(9, 9, 9, 0.1);
}
#contents {
  position: relative;
}
#footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: var(--bg-color-f5);
  color: var(--bg-color-a4);
  padding: 0;
  clear: both;
  transition: all 0.3s;
  z-index: 5;
  font-size: 1.3rem;
  padding-bottom: 5rem;
}

.theme-white #header {
  background-color: #fff;
  color: #131313;
}
.theme-white #footer {
  background-color: #fff;
  color: #131313;
}
.theme-white .logo span {
  color: #232323;
}
.theme-white .scroll-to-top .scroll-bar-text {
  color: #131313;
}

.layer-fix {
  overflow: hidden;
}

/* .theme-wide #gnb .topmenu > li > a{color: #fff;}
.theme-wide #header{background: transparent; position: fixed; box-shadow: none;}
.theme-wide .logo a{color: #232323;} */

#header.header-sticky {
  position: sticky;
  top: 0;
  z-index: 90;
}

.detail-page #header {
  position: relative;
}
.detail-page #contents {
  margin-top: -3.5rem;
}

.container {
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: var(--container-width);
  position: relative;
  width: 100%;
}
.container-sm {
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: calc(var(--container-width) - 200px);
  position: relative;
  width: 100%;
}
.container-full {
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  width: 100%;
}
.section-container {
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
}

#sp-wrapper {
  width: 100%;
  margin: 0 auto;
}
#sp-header {
  padding: 20px 0;
  background-color: #151515;
}
#sp-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#sp-header .btn {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 9px 23px 7px;
}
.sp-bg {
  background-color: #f5f7fa;
}
#sp-footer {
  padding: 10px;
  color: #777;
  margin-top: 30px;
  text-align: center;
  font-size: 13px;
}

#sp-header .btn-history-back {
  display: none;
}

#sp-wrapper.page-mypage #contents {
  max-width: 660px;
  margin: 0 auto;
}
#sp-wrapper.page-mypage #sp-content {
  max-width: 660px;
  margin: 0 auto;
}
/* #sp-wrapper.page-mypage #sp-footer{position: relative;}
#sp-wrapper.page-mypage .btn-back{display: none;}
#sp-wrapper.page-mypage .btn-history-back{display: block;}
#sp-wrapper.page-mypage #sp-header{padding: 40px 0 0 0 }
#sp-wrapper.page-mypage .subwrap-top{padding-top: 30px;}
#sp-wrapper.page-mypage .subwrap-top .container{overflow: visible;}
#sp-wrapper.page-mypage .subwrap-top .subwrap-title{font-size: 40px; color: #1a1a1a; line-height: 1em; font-weight: 500; text-align: center; display: block;} */

.hidden-header #header {
  display: none;
}

/**********
* ## header
**********/
/* #header .container{display: flex; align-items: center; justify-content: space-between;} */

.header-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.member-area {
  display: inline-block;
  margin-right: 1rem;
}
.member-area .btn-login {
  text-decoration: underline;
}

#header.open .util .list {
  transform: translateX(-1rem);
}

.logo {
  display: inline-block;
  z-index: 10;
}
.logo a {
  display: inline-flex;
  align-items: center;
  width: 146px;
  height: 24px;
  background: url("../images/logo-02.png") no-repeat 0 0;
  background-size: cover;
}
/* .logo a .logo-icon{display: inline-block; width: 50px; height: 26px; background: url('../images/logo-cg.png') no-repeat 0 0; background-size: cover; }
.logo a .logo-text{margin-left: 5px; padding-top: 4px; font-size: 20px; display: inline-block; color: var(--bg-color-3f); font-family: 'SBAggro'; font-weight: 500;} */

.tnb {
  display: flex;
  align-items: center;
}
.tnb li {
  position: relative;
}
.tnb li:last-child {
  margin-left: 2rem;
}

.header-util {
  display: flex;
  align-items: center;
  z-index: 10;
  height: 100%;
}

.util-search {
  width: 30px;
  height: 30px;
}
.util-search .ico-search {
  background: url("../images/icons/ico-search-w.png") no-repeat center/cover;
  width: 100%;
  height: 100%;
  background-size: 16px;
  position: static;
  display: block;
}

.util-user {
  margin-right: 1.5rem;
  position: relative;
}

.util-dropdown {
  position: relative;
  display: inline-block;
}
.user-icon-menu {
  display: none;
  position: absolute;
  top: 80%;
  left: 0;
  max-width: 200px;
  left: 50%;
  transform: translate(-50%, 0);
}
.user-icon-menu.on {
  display: block;
}
.user-icon-menu ul {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 12px 0 rgba(0, 0, 0, 0.12);
}
.user-icon-menu li {
  padding: 5px 10px;
}
.user-icon-menu li a {
  display: block;
  color: #888;
  text-align: center;
  font-size: 15px;
}
.user-icon-menu li a:hover {
  color: #000;
}

.user-icon-menu .pop-arrow {
  text-align: center;
  line-height: 1;
}
.pop-arrow .ico-arrow {
  display: inline-block;
  margin-bottom: -3px;
  width: 0px;
  height: 0px;
  border-bottom: 7px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

/* .util-button .btn-gnb{background: url('../images/icons/ico-menu-c.png') no-repeat center/cover; width: 25px; height: 18px;} */
.util-button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  right: 0.725rem;
}
.util-button button {
  display: inline-block;
  margin: 0;
}
.util-button .icon-bar {
  background-color: #000;
  width: 26px;
  height: 2px;
  display: block;
}
.util-button .icon-bar:nth-child(2) {
  margin: 7px 0;
}
.util-button .icon-bar:nth-child(3) {
  width: 20px;
}
.util-button .btn-side {
  background: url("../images/icons/ico-menu.png") no-repeat center/cover;
  width: 22px;
  height: 18px;
}

#header .util-user {
  display: none;
}

#header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.util {
  position: fixed;
  right: 1.5rem;
  width: 100%;
  bottom: 20%;
  z-index: 200;
}
.util .list {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}
.util .list li {
  display: block;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.util .list a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.util .list > li .dropdown {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.util .list > li .dropdown.active {
  opacity: 1;
  visibility: visible;
  height: 106px;
  top: -106px;
}
.util .list > li .dropdown li {
  position: absolute;
  bottom: 0;
  transform: scale(1);
}

.icon-q-kakao {
  background-image: url("../images/icons/q-kakao-talk.png");
  width: 16px;
  height: 15px;
  margin-right: 3px;
}
.icon-q-naver {
  background-image: url("../images/icons/q-naver-talk.png");
  width: 18px;
  height: 19px;
  margin-right: 3px;
}

/* #header.open .util .list a{width: 100px; height: 42px; line-height: 42px; margin: 0 auto;}
#header.open .util .list{right: 20px;} */

/* animation: aniDown 0.3s; -moz-animation: aniDown 0.3s; -webkit-animation: aniDown 0.3s; -o-animation: aniDown 0.3s; */
.mobile-search {
  position: fixed;
  top: -200px;
  left: 0;
  width: 100%;
  -webkit-transition: top ease 0.3s;
  transition: top ease 0.3s;
  z-index: 500;
  background-color: var(--text-body-color);
}
.mobile-search.active {
  top: 0;
}
.mobile-search-wrap {
  padding: 1.5rem;
  height: 10.5rem;
  max-width: calc(var(--container-width) - 200px);
  margin: 0 auto;
  position: relative;
}
.search-input-wrap {
  background-color: #fff;
  position: relative;
  padding: 10px 20px 20px;
  box-shadow: 0px 2px 4.8px 0.3px rgba(0, 0, 0, 0.2);
}
.search-input-wrap .input-container {
  position: relative;
  display: block;
  margin-bottom: 0;
}
.search-input-wrap input {
  background: #fff;
  border: 0;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.search-input-wrap button.btn-search {
  width: 50px;
  height: 50px;
  right: -5px;
}

.mobile-search-wrap .btn-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.search-logo {
  width: 120px;
  height: 27px;
  margin-bottom: 20px;
}

.btn-search {
  background: url("../images/icons/ico-search-m.png") no-repeat center;
  background-size: 22px auto;
  text-indent: -9999px;
}
.input-container .btn-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
}
.input.search {
  border-width: 2px;
  border-color: var(--text-body-color);
  border-radius: 4px;
}

/**********
* ## gnb
**********/
#gnb {
  width: 100%;
  text-align: center;
}
/* box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 12px 0 rgba(0, 0, 0, 0.12); */
/* #gnb:before{content: ""; position: absolute; left: 34px; top: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #f7f5f2;} */
#gnb .topmenu {
  display: flex;
  justify-content: center;
  align-items: center;
}
#gnb .topmenu > li {
  position: relative;
  padding: 0 1rem;
}
#gnb .topmenu > li > a {
  display: block;
  position: relative;
  color: var(--text-body-color);
  font-weight: 500;
  line-height: 6rem;
  font-size: 16px;
}
#gnb .topmenu > li > a.active,
#gnb .topmenu > li > a:hover {
  color: #000;
}
#gnb .topmenu > li > a:after {
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  background: var(--theme-color);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transition: all 0.4s;
  top: 97%;
}
#gnb .topmenu > li:hover > a:after {
  transform: scaleX(1);
}

.fixed #gnb .topmenu > li > a {
  color: #1c1c1c;
}

#gnb .topmenu > li.dropdown:hover .dropdown-menu {
  display: block;
  animation: aniFadeIn 0.3s;
  -moz-animation: aniFadeIn 0.3s;
  -webkit-animation: aniFadeIn 0.3s;
  -o-animation: aniFadeIn 0.3s;
}
#gnb .topmenu > li > .dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 4.8px 0.3px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  left: 0;
  min-width: 120px;
}
#gnb .topmenu > li > .dropdown-menu.active {
  display: block;
}
#gnb .topmenu > li > .dropdown-menu > ul {
  margin: 2rem 0;
  transition: all 0.4s;
}
/* #gnb .topmenu > li > .dropdown-menu.active > ul{opacity:1;transition:all 0.4s 0.4s;} */
#gnb .topmenu > li > .dropdown-menu > ul > li {
  margin: 1rem 0;
}
#gnb .topmenu > li > .dropdown-menu > ul > li > a {
  font-size: 15px;
  color: #1c1c1c;
  font-weight: 600;
}
#gnb .topmenu > li > .dropdown-menu > ul > li > a:hover {
  color: var(--theme-color);
}

.bg-gnb {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 166px;
}
.bg-gnb:before {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #d0d0d0;
  position: absolute;
  left: 0;
  top: 6rem;
}

.fixed .bg-gnb {
  box-shadow: 0px 1px 9.5px 0.5px rgba(9, 9, 9, 0.1);
}

/**********
* ## MOBILE
**********/
.menu-slide-container {
  position: fixed;
  z-index: 400;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  background-color: #fff;
  max-width: 600px;
}
.menu-slide-container.right-side {
  right: -100%;
}
.menu-slide-container.right-side.menu-open {
  right: 0;
}
.menu-slide-container.left-side {
  left: -280px;
}
.menu-slide-container.left-side.menu-open {
  left: 0;
}

.dim-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  display: none;
  z-index: 100;
}
.dim-menu.on {
  display: block;
}

.menu-header {
  position: relative;
  width: 100%;
  background-color: #0a0a0a;
  padding: 0 0 3rem;
}
.menu-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6rem;
}
.menu-header-util {
  display: flex;
  align-items: center;
}
.menu-header .user-wrap {
  position: relative;
  margin-top: 1rem;
  color: #fff;
}
.menu-header .user-wrap .info {
  display: inline-block;
}
.menu-header .user-wrap .info a {
  font-size: 2.4rem;
  position: relative;
  font-weight: 700;
  line-height: 1;
}
.menu-header .user-wrap .info a:first-child {
  padding-right: 1rem;
  margin-right: 1rem;
}
.menu-header .user-wrap .info a:first-child:after {
  position: absolute;
  right: 0;
  top: 5px;
  width: 1px;
  height: 70%;
  background-color: #fff;
  content: "";
}
.menu-header .user-wrap .desc {
  font-size: 1.8rem;
  margin: 0 0 2rem;
  color: #a4a4a4;
  line-height: 1;
}
.menu-header .user-wrap .user-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-header .user-wrap .user {
  font-size: 1.5rem;
}
.menu-header .user-wrap .user .btn {
  padding: 4px 6px;
  min-width: auto;
}
.menu-header .user-wrap .user .btn + .btn {
  margin-left: 10px;
}

.menu-content {
  z-index: 1;
  position: relative;
  background-color: #fff;
}

/* .menu-slide-container .menu-close {display: inline-block; width: 25px; height: 25px; background: url('../images/icons/ico-close-w.png') no-repeat center; text-decoration: none; -webkit-transition: all 0.25s; transition: all 0.25s; z-index: 2; background-size: 22px;} */

.menu-close {
  position: relative;
}
/* .menu-close{width: 25px; height: 25px; text-indent: -9999px; cursor: pointer; position: relative;}
.menu-close:before, .menu-close:after{width: 25px; height: 2px; top: 50%; margin-top: -1px; left: -2px; content: ""; background: #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute;}
.menu-close:after {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);} */

.menu-slide-container .header-top-menu {
  padding: 15px 0 15px 18px;
}
.menu-slide-container .header-top-menu li {
  padding: 6px 0;
  width: 50%;
}
.menu-slide-container .header-top-menu a {
  font-size: 1.4rem;
  letter-spacing: -0.5px;
}

.menu-slide {
  margin-bottom: 6rem;
}
.menu-slide ul {
  margin: 0;
  list-style: none;
}

.menu-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu-slide li {
  position: relative;
  text-align: left;
}
/* .menu-slide .dropdown-menu{display: none;} */
.menu-slide .dropdown-menu .dropdown-title {
  color: #e1e1e1;
  padding: 20px 0 5px 20px;
  font-size: 1.4rem;
  border-bottom: 2px solid #f5f7fa;
}
.menu-slide .dropdown-menu + .dropdown-menu {
  padding-top: 15px;
}
.menu-slide li.active ul li a,
.menu-slide li:hover ul li a {
  color: #ccc;
}
/* .menu-slide li.active a .text, .menu-slide li a:hover .text{border-bottom: 1px solid #fff; display: inline-block; padding-bottom: 10px;} */
/* .menu-slide li.active a span:after, .menu-slide li a:hover span::after{content: ''; width: 100%; top: 100%; left: 0; height: 2px; display: inline-block; background: #fff; position: absolute;} */
.menu-slide li a {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  line-height: 1em;
  text-decoration: none;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.menu-slide > li {
  position: relative;
  border-bottom: 1px solid var(--bg-color-f5);
}
.menu-slide > li > a {
  font-size: 1.8rem;
  color: #0a0a0a;
  display: block;
  padding: 2.5rem 0;
  display: flex;
  align-items: center;
}
.menu-slide > li > a > span {
  display: inline-block;
  position: relative;
}
.menu-slide > li > a > span.icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  flex-shrink: 1;
}
.menu-slide > li > a > span.text {
  flex-grow: 0;
}
/* .menu-slide li ul{display: inline-flex; margin-left: 2rem;}
.menu-slide li ul li{margin-right: 2rem; padding: 0;}
.menu-slide li ul li:last-child{margin-right: 0;}
.menu-slide li ul li a{font-size: 0.9rem; color: #666;}
.menu-slide li ul li a:hover{color: #fff;} */

/* .menu-tnb{margin: 30px 0 20px; border-bottom: 1px solid #eee; padding-bottom: 30px;}
.menu-tnb a{width: 47%; border-radius: 5px; display: inline-block; margin: 1%; padding: 10px 0; font-size: 18px; background-color: #ff8133; border: 1px solid #ff8133; text-align: center; color: #fff;}
.menu-tnb a:first-child{background-color: #fff; color: #ff8133;} */

.menu-community {
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto 4rem;
}
.menu-community .title {
  padding-left: 1.5rem;
  font-size: 1.8rem;
  color: var(--text-body-color);
  margin-bottom: 1rem;
  line-height: 1;
}
.menu-community ul {
  display: flex;
}
.menu-community ul li {
  flex: 0 0 50%;
  background-color: var(--theme-color);
}
.menu-community ul li a {
  display: block;
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.menu-community ul li:last-child {
  background-color: var(--key-color);
}
.menu-community ul li div {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.menu-community ul li p {
  line-height: 1;
}

.menu-link {
  margin-bottom: 4rem;
}
.menu-link ul {
  margin-bottom: 4rem;
}
.menu-link ul li {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
}
.menu-link ul li .title {
  flex-shrink: 0;
  width: 100px;
}
.menu-link ul li .title a {
  font-weight: 700;
  font-size: 1.8rem;
  display: inline-block;
  border-bottom: 1px solid var(--text-body-color);
  line-height: 1;
}
.menu-link ul li .sub {
  flex-grow: 1;
}
.menu-link ul li .sub a {
  color: #3f3f40;
  display: inline-block;
  position: relative;
  line-height: 1;
  margin-right: 2rem;
}

.menu-link .customer {
  display: flex;
  align-items: center;
  background-color: var(--bg-color-ed);
  height: 5rem;
  line-height: 5rem;
  justify-content: center;
}
.menu-link .customer .ico-cs {
  width: 1.6rem;
  height: 2rem;
  background-image: url("../images/common/menu-cs.png");
}
.menu-link .customer a {
  font-size: 1.8rem;
  color: var(--key-color);
  margin-left: 10px;
  display: inline-block;
  font-weight: 700;
}
.menu-link .customer .op-time {
  font-size: 1.3rem;
  font-weight: 700;
  color: #3f3f40;
  display: inline-block;
  margin-left: 10px;
  font-weight: 400;
}

.menu-ft {
  padding: 0 0 3rem;
}
.menu-ft ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bg-color-d1);
}
.menu-ft ul li {
  flex: 1;
  text-align: center;
}
.menu-ft ul li a {
  color: #3f3f40;
  font-size: 1.3rem;
}
.menu-ft ul li .bold {
  color: var(--text-body-color);
}
.menu-ft .copyright {
  font-size: 1rem;
  text-align: center;
}

/**********
* ## dlpo
**********/
.dlpo-wrap.hide {
  display: none;
}
.dlpo-wrap {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.dlpo-wrap {
  position: relative;
  top: 0;
  overflow: hidden;
  z-index: 20;
}
.dlpo-wrap .banner-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 5px 0;
  align-items: center;
  justify-content: center;
  background-color: #96faa3;
}
.dlpo-wrap .banner-item a {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 300;
  color: #000;
}

.dlpo-wrap .dlpo-close {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 1;
}
.dlpo-wrap .dlpo-close:before,
.dlpo-wrap .dlpo-close:after {
  width: 25px;
  height: 1px;
  top: 50%;
  margin-top: -1px;
  left: -2px;
  content: "";
  background: #fff;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  position: absolute;
}
.dlpo-wrap .dlpo-close:after {
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}
.dlpo-wrap.close {
  height: 0;
}

/**********
* ## footer
**********/
.hidden-footer #footer {
  display: none;
}
.has-fixed-button #footer {
  padding-bottom: 7.5rem;
}
.footer-info-wrap {
  display: flex;
  align-items: flex-start;
  padding: 2rem 0 3rem;
  flex-direction: column;
}

/* .footer-logo a{background: url('../images/logo-cg.png'); width: 70px; height: 90px; display: inline-block;} */
.footer-info-wrap .logo a .logo-icon {
  width: 40px;
  height: 20px;
}
.footer-info-wrap .logo a .logo-text {
  font-size: 1.3rem;
}
.footer-widget {
  margin-top: 1.2rem;
}
.footer-widget ul li {
  border-bottom: 1px solid #d0d0d0;
  padding: 10px 0;
  width: 9rem;
}
.footer-widget ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-widget ul li:first-child {
  padding-top: 0;
}
.footer-widget .widget-title {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1;
}

.footer-util {
  border-bottom: 1px solid var(--bg-color-d1);
  padding-top: 1.5rem;
  color: #3f3f40;
}
.footer-util ul {
  display: flex;
  align-items: center;
}
.footer-util ul li {
  flex: 1;
}
.footer-util ul li a {
  display: block;
  padding: 15px 0;
  text-align: center;
}
.footer-util ul li a.bold {
  color: #0a0a0a;
}

.company-info p {
  line-height: 1.6;
  font-family: "Pretendard", sans-serif;
}
.contact-info {
  margin-left: auto;
  font-weight: 500;
  text-align: right;
}
.contact-info div span {
  border-bottom: 1px solid #131313;
  display: inline-block;
}
.contact-info a {
  font-family: "S-CoreDream";
}
.copyright {
  letter-spacing: -0.5px;
  color: var(--bg-color-a4);
  margin-top: 1rem;
  display: block;
}

/**********
* ## FIXED UTIL BAR
**********/
.cg-step #footer,
.cg-step .fixed-util {
  display: none;
}
.cg-step .page-title {
  background-color: var(--key-color);
}
.cg-step .page-title h2 {
  color: #fff;
}
.cg-step .page-title .btn-prev {
  background-image: url("../images/icons/ico-arrow-prev-w.png");
}
.cg-step .page-title .util-button .btn-side {
  background-image: url("../images/icons/ico-menu-w.png");
}

.hidden-utilbar .fixed-util {
  display: none;
}
.fixed-util {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;
  padding-top: 1px;
  background-color: rgba(165, 165, 165, 0.3);
}
.fixed-util ul {
  border-top: 1px solid var(--bg-color-a4);
  background-color: #fff;
  display: flex;
  align-items: center;
}
.fixed-util ul li {
  position: relative;
  flex: 1;
}
.fixed-util ul li a {
  box-sizing: content-box;
  display: block;
  padding-top: 0.7rem;
  height: 4.3rem;
  font-size: 1rem;
  color: var(--key-color);
  text-align: center;
}
.fixed-util ul li a:before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 1px;
}

.fixed-util li a:before {
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.fixed-util li.home a:before {
  background-image: url("../images/common/menu-home-b.png");
}
.fixed-util li.products a:before {
  background-image: url("../images/common/menu-club-search.png");
}
.fixed-util li.myclub a:before {
  background-image: url("../images/common/menu-myclub.png");
  background-size: 1.5rem;
}
.fixed-util li.review a:before {
  background-image: url("../images/common/menu-review.png");
  background-size: 1.9rem;
}
.fixed-util li.mycg a:before {
  background-image: url("../images/common/menu-mypage.png");
  background-size: 1.8rem;
}

/**********
* ## common
**********/

.form-group .label .icon {
  margin-left: 5px;
}
.form-group .form-content {
  position: relative;
  display: flex;
}
.form-group .form-content .location-input {
  display: flex;
  flex: 1;
}
.form-group .form-content .location-input .select-box {
  width: 57%;
}
.form-group .form-content .location-input .select-box.sub {
  margin-left: 3%;
  width: 40%;
}

.form-group .form-content .name-container {
  margin-right: 20px;
  width: 40%;
}
.form-group .form-content .phone-container {
  width: 60%;
}
.form-group .form-content + .help-desc {
  margin-top: 5px;
}

.phone-container .select-box {
  flex: 0 0 31%;
}
.phone-container .dx-input {
  flex: 0 0 31%;
  margin-left: 3.5%;
}

/* ## single page wrap  */
.btn-back {
  background: url("../images/icons/btn_back_s2.png") no-repeat center left;
  display: inline-block;
}
.btn-back span {
  margin-left: 30px;
  display: inline-block;
}

.page-mypage .btn-history-back {
  background: url("../images/icons/btn_back_s2.png") no-repeat center left;
  display: inline-block;
}
.page-mypage .btn-history-back span {
  margin-left: 30px;
  display: inline-block;
}
.page-mypage .bbs-tab {
  margin-bottom: 3rem;
}

.animation-arrow a:hover .icon-btn .arrow {
  transition: 0.5s;
  left: 0;
}
.animation-arrow a:hover .icon-btn .arrow + .arrow {
  transition: 0.5s;
  left: 100%;
}
.icon-arrow-wrap {
  width: 2rem;
  height: 2rem;
  background-color: #f2eee9;
  text-align: center;
  border-radius: 50%;
  margin-left: 1rem;
  position: relative;
}
.icon-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.icon-btn .arrow {
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: -100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.icon-btn .arrow + .arrow {
  left: 0;
}

/**********
* ## LOGIN
**********/
/* .panel-login .form-group{margin-bottom: 2rem;} */
/* .panel-login .panel-body{padding-top: 3rem;} */
.login-box {
  border-bottom: 1px solid #d0d0d0;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}
.login-box + .login-box {
  padding-bottom: 2rem;
}
.panel-login .form-group {
  margin-bottom: 1rem;
}
.input.round {
  border-radius: 30px;
  box-shadow: 0.8px 0.6px 9.5px 0.5px rgba(9, 9, 9, 0.05);
  background-color: #fff;
  height: 3rem;
  line-height: 3rem;
  padding-left: 2rem;
}
.input.border {
  background-color: #fff;
  height: 4rem;
  line-height: 4rem;
  padding-left: 0;
  border: 0;
  border-bottom: 1px solid var(--bg-color-d1);
}
.input.border:focus {
  border-bottom-color: #000;
}

.login-button {
  margin-top: 3rem;
}
.login-button .sp-submit {
  background-color: var(--theme-color);
  width: 100%;
}
.login-row .login-label {
  font-size: 14px;
  color: #111;
}
.login-button .sp-submit.btn-register {
  background-color: #626262;
  margin-top: 10px;
}
.social-login {
  position: relative;
  border: 1px solid var(--bg-color-d1);
  background-color: #fff;
  width: 100%;
  display: flex;
  border-radius: 4px;
  align-items: center;
  padding: 1rem;
  color: #000;
}
.social-login img {
  max-width: 30px;
  max-height: 30px;
  margin-right: 10px;
}
/* .social-login.google img{max-width: 25px; max-height: 25px;} */
.social-login p {
  margin-bottom: 1rem;
}
.social-login em {
  font-size: 15px;
  margin-left: 0.5rem;
}

.sl-btns a {
  width: 100%;
  display: block;
  border: 1px solid #ddd;
  padding: 9px 10px 10px 10px;
  margin-bottom: 10px;
  position: relative;
}
.sl-btns a img {
  position: absolute;
  left: 10px;
  top: 11px;
}
.sl-btns a .text {
  line-height: 1em;
  margin-left: 28px;
}

.login-register {
  padding: 15px 0;
  text-align: center;
}
.login-register p {
  margin-bottom: 10px;
}
.login-register a {
  text-decoration: underline;
}

.autologinalert {
  font-size: 12px;
  margin-top: 1rem;
}

.guest-wrap {
  margin-top: 2rem;
}
.guest-wrap h4 {
  font-size: 0.85rem;
}
.guest-privacy {
  border: 1px solid #cdcdcd;
  text-align: left;
  line-height: 1.6em;
  color: #666;
  background: #fafafa;
  padding: 10px;
  height: 150px;
  margin: 10px 0;
  overflow-y: auto;
  font-size: 0.65rem;
}
.guest-wrap .btn {
  margin-top: 1rem;
}
.guest-wrap .checkbox-custom label {
  font-size: 0.65rem;
  letter-spacing: -1px;
}

.guest-order {
  margin-top: 2rem;
  border-top: 1px solid #cdcdcd;
  padding-top: 1rem;
}
.guest-order-desc {
  background: #f2f2f2;
  padding: 0.5rem;
  margin-top: 1rem;
  font-size: 0.65rem;
}

/* ## PASSWORD / FINDACCOUNT */
.panel {
  width: 100%;
  max-width: 64rem;
  padding: 2.5rem;
  margin-bottom: 6rem;
}
.panel-header {
  padding: 0 0 2.5rem;
  background-color: #fff;
}
.panel-header.border {
  margin-bottom: 4rem;
  border-bottom: 1px solid #111;
}
.panel-header h2 {
  font-size: 2.4rem;
  font-weight: 400;
}
.panel-header .desc {
  font-size: 16px;
  color: #626262;
  font-weight: 400;
  margin-bottom: 1rem;
}
.panel-body {
  position: relative;
  margin: 0 auto;
}
.panel-body .desc {
  margin-bottom: 15px;
  line-height: 1.5;
}
.panel-link {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666;
}
/* .panel-link .check-box label{margin-left: 20px;}
.panel-link .check-box label::before{top: -1px}
.panel-link .check-box input[type="checkbox"]:checked + label::after{top: -1px;} */
.panel-link .links a {
  position: relative;
  padding-left: 10px;
  margin-left: 5px;
}
.panel-link .links a::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 1px;
  height: 15px;
  background-color: #626262;
  margin-right: 5px;
}
.panel-link .links a:first-child::before {
  display: none;
}
.panel-footer {
  position: relative;
  text-align: center;
  background-color: #fff;
  padding: 0;
  margin-top: 3rem;
}

.findaccount .form-table .phone-input {
  width: 50%;
}

.control-label {
  margin-bottom: 5px;
  display: inline-block;
}
.result-message {
  padding: 1rem 0;
  text-align: center;
}

.panel.findaccount .form-group {
  margin-bottom: 2rem;
}
.panel.findaccount .login-box {
  padding-bottom: 0;
}

.page-findid-result .result-box {
  background-color: var(--bg-color-ed);
  padding: 2rem;
  margin: 4rem 0 6rem;
}

/**********
* ## REGISTER
**********/
/* #sp-wrapper.register{max-width: 640px;} */
.register-section {
  margin-bottom: 5rem;
}
.register-section h4 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #111;
  font-weight: 500;
}

.register-section .bs-number-input {
  width: auto;
}

.check-agrea {
  margin-bottom: 1rem;
  margin-left: 1rem;
}
.check-agrea label {
  font-weight: 600;
  color: #000;
}
.check-agrea label .req {
  color: #ff8133;
  font-size: 12px;
}
.check-agrea label .req.sel {
  color: #888;
}

.check-container + .check-container {
  border-top: 0;
}

.agree-box {
  color: #626262;
}
.agree-box .check-title {
  font-weight: 600;
  color: #000;
  padding-left: 1rem;
  margin-bottom: 1rem;
  margin-top: 3rem;
}
.agree-box .error-place .error + .error {
  display: block;
  margin-left: 0;
  margin-top: 0;
}
.agree-box .check-container strong {
  margin-right: 5px;
}

.agree-box .check-box label {
  font-size: 15px;
}

.agree-box .info-box {
  border: 1px solid #d0d0d0;
  margin-top: 1rem;
  color: #000;
  padding: 1rem;
  margin-bottom: 0;
  font-size: 1.3rem;
}

.panel-body .btn-wrap {
  margin-top: 3rem;
}

.btn-inner {
  margin-left: 10px;
  display: inline-block;
}

.result-place {
  font-size: 12px;
  display: inline-block;
  margin-left: 1rem;
}
.result-place .success {
  color: #1473e6;
  background-color: transparent;
}
.result-place .fail {
  color: #ff8133;
}
.cert-container {
  display: none;
  margin-top: 10px;
}
.cert-container .input {
  width: calc(100% - 120px);
}
.cert-container .btn-inner {
  margin-left: 0;
}

.d-inline-flex {
  display: inline-flex;
}
.d-inline-flex .check-box + .check-box {
  margin-left: 10px;
}
.d-inline-flex .radio-box + .radio-box {
  margin-left: 10px;
}

.register-result-wrap .result-logo {
  margin: 3rem auto 3rem;
  text-align: center;
}
.register-result-wrap .result-logo img {
  width: 53px;
}
.register-result-wrap .result-message {
  padding: 0;
}
.register-result-wrap .result-message .title {
  font-size: 24px;
  color: #000;
  font-weight: 600;
  margin-bottom: 1rem;
}
.register-result-wrap .result-message .desc {
  color: #666;
}

.register-result-wrap .panel {
  background-color: var(--bg-color-ed);
  margin: 6rem 0 3rem;
  padding: 0;
  max-width: 100%;
}
.register-result-wrap .panel .panel-header {
  padding-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 500;
}
.register-result-wrap .panel .panel-body {
  padding: 2rem 1.5rem;
}
.register-result-wrap .panel .panel-body h5 {
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 1.5rem;
}
.register-result-wrap .panel .panel-body p {
  margin-bottom: 1rem;
}
.register-result-wrap .panel .panel-body a {
  text-decoration: underline;
}
.register-result-wrap .panel-section + .panel-section {
  margin-top: 3rem;
}
/* .register-result-wrap .panel{background-color: var(--bg-color-ed); padding: 1.5rem;} */

.pass-modify .form-btn {
  margin-top: 2rem;
}

/**********
* ## MAIN
**********/
#main {
  position: relative;
}
.section {
  position: relative;
  padding: 8rem 0 6rem;
}
.btn-more {
  border: 1px solid var(--key-color);
  color: var(--key-color);
  height: 4.5rem;
  line-height: 4.5rem;
  width: 22rem;
  background-color: #fff;
  padding: 0 !important;
  position: relative;
  border-radius: 4px;
}
.btn-more.btn-theme {
  background-color: var(--theme-color);
  color: #fff;
}
.btn-more.btn-gray {
  background-color: var(--bg-color-a4);
  color: #fff;
  border-color: var(--bg-color-d1);
}
.btn-more.btn-primary {
  background-color: var(--ad-color-07);
  color: #fff;
  border-color: var(--ad-color-07);
}
.btn-more.border-theme {
  border-color: var(--theme-color);
  color: var(--theme-color);
}
.btn-more.btn-dark {
  background-color: var(--bg-color-3f);
  border-color: var(--bg-color-3f);
  color: #fff;
}

.fixed-button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 1.5rem 0;
  background-color: #fff;
}
.fixed-button .btn-wrap {
  display: flex;
}
.fixed-button .btn-wrap .btn {
  flex: 1;
}
.fixed-button .btn-wrap .btn + .btn {
  margin-left: 1.5rem;
}
/* .fixed#fixed-button .btn-more{position: fixed;} */

.section-main-visual {
  position: relative;
  overflow: hidden;
}
.section-main-visual .swiper-slide {
  position: relative;
  display: flex;
}
.section-main-visual .screen-image {
  width: 100%;
}
.section-main-visual .screen-image img {
  width: 100%;
}

.section-main-visual .swiper-slide .screen-image a::after {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 132, 255, 0.05);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.section-main-visual .swiper-slide-active .screen-image a::after {
  opacity: 0;
}

/* .section-main-visual .screen-image.active{animation: aniScaleDown 4s ease-out;} */
/* .section-main-visual .screen-image::before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, 0.3);} */

.section-main-visual .screen-text-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: aniFadeIn 3s ease-out;
}
.section-main-visual .screen-text-continer {
  max-width: 650px;
  width: 100%;
}
.section-main-visual .screen-text1 {
  display: block;
  font-weight: 400;
  line-height: 1.3;
  font-size: 2.9rem;
  margin-bottom: 1rem;
}
.section-main-visual .screen-text2 {
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}
.section-main-visual .screen-text2 strong {
  margin-left: 5px;
}
.section-main-visual .screen-text2 span {
  background: url("../images/main/t20.png") no-repeat center/cover;
  width: 57px;
  height: 20px;
  display: inline-block;
  text-indent: -9999px;
  margin: 0 5px;
}
.section-main-visual .screen-text2 + .screen-text2 {
  line-height: 1.5;
  margin-top: 10px;
}

.screen-btns {
  display: flex;
  margin-top: 33px;
}
.section-main-visual .btn {
  width: 7rem;
  height: 2rem;
  line-height: 1.9rem;
  background-color: #fff;
  color: #1c1c1c;
  font-size: 0.7rem;
  display: inline-block;
  border: 1px solid #666;
  padding: 0;
}
.section-main-visual .btn + .btn {
  margin-left: 20px;
}
.section-main-visual .btn:hover {
  background-color: #666;
  color: #fff;
}

.section-main-visual .text-white .screen-text1 {
  color: #fff;
}
.section-main-visual .text-white .screen-text2 {
  color: #fff;
}

/* .section-main-visual .text-dark .screen-text1{border-color: #ecb10d; background-color: #ecb10d; color: #fff;}
.section-main-visual .text-dark .screen-text2{color: #121212;} */

.section-main-visual .swiper-pagination {
  bottom: 3rem;
  left: 0;
  width: 100%;
}
.section-main-visual .swiper-pagination .swiper-num-bg {
  margin: 0 auto;
  width: 6rem;
  height: 2.5rem;
  opacity: 0.3;
  background-color: #0a0a0a;
  position: relative;
}
.section-main-visual .swiper-num-wrap {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  color: #fff;
}
.section-main-visual .swiper-num-wrap span {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  color: #fff;
}
.swiper-num-wrap .swiper-pagination-current {
  font-weight: 500;
}

.section-main-visual .swiper-arrows .container {
  padding: 0;
  max-width: calc(var(--container-width) - 3rem);
}
.section-main-visual .swiper-arrows button {
  border: 0;
}

/* .swiper-pagination-bullet{width: 12px; height: 12px; background-color: #fff; opacity: 1; margin: 0 4px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px;}
.swiper {margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;} */
/* .section-main-visual .text-dark .btn-more{background-color: #121212; color: #fff;} */

.btn-arrow-wrap {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -25px;
}
.btn-arrow-wrap button {
  background-position: center;
  background-size: cover;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 1;
}
.btn-arrow-wrap .screen-prev {
  background-image: url("../images/icons/ico_slide_lt_dft.png");
  left: -100px;
}
.btn-arrow-wrap .screen-next {
  background-image: url("../images/icons/ico_slide_rt_dft.png");
  right: -100px;
}

.btn-arrow-wrap .screen-prev:hover {
  background-image: url("../images/icons/ico_slide_lt_act.png");
}
.btn-arrow-wrap .screen-next:hover {
  background-image: url("../images/icons/ico_slide_rt_act.png");
}

/* .pagination{position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.pagination li{position: relative; }
.pagination li a{display: inline-block; margin: 0 8px;} */

.section-header {
  position: relative;
  margin-bottom: 2rem;
}
.section-header .section-header-title {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
}
.section-header .in-mark {
  display: flex;
  align-items: center;
}
.section-header .in-mark .mark {
  margin-left: 1.5rem;
}
.section-header .section-header-desc {
  font-size: 1.8rem;
  color: #3f3f40;
  line-height: 1.35;
}
.section-header .section-header-line {
  width: 60px;
  margin: 0 auto 0.8rem;
  height: 1px;
  background-color: #3a95de;
}
.section-header .section-header-arrow button {
  width: 22px;
  height: 18px;
  background-size: 22px 18px;
  display: inline-block;
  background-repeat: no-repeat;
}

.btn-swiper-prev {
  background-image: url("../images/icons/m-ico-arw-slider-l.png");
}
.btn-swiper-next {
  background-image: url("../images/icons/m-ico-arw-slider-r.png");
}
/* .btn-swiper-prev.swiper-button-disabled{background-image: url('../images/icons/ico_arw_left_df.png'); }
.btn-swiper-next.swiper-button-disabled{background-image: url('../images/icons/ico_arw_right_df.png'); } */

.swiper-arrows {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 100%;
}
.swiper-arrows button {
  width: 45px;
  height: 45px;
  background-size: cover;
  display: inline-block;
  background-repeat: no-repeat;
  position: absolute;
}
.swiper-arrows .btn-swiper-prev {
  left: 0;
  margin-top: -22.5px;
}
.swiper-arrows .btn-swiper-next {
  right: 0;
  margin-top: -22.5px;
}
.swiper-arrows .btn-swiper-prev.swiper-button-disabled {
  opacity: 0.6;
}
.swiper-arrows .btn-swiper-next.swiper-button-disabled {
  opacity: 0.6;
}

.review-recom-swiper {
  position: relative;
}
.image-swiper {
  position: relative;
}
.review-swiper {
  position: relative;
}
.review-swiper .swiper-arrows {
  top: 33%;
}
.products-swiper {
  position: relative;
}
.products-swiper .swiper-arrows {
  top: 33%;
}
.myclub-swiper {
  position: relative;
}

#section-play {
  padding: 3rem 0;
}

/* .mq-swiper::after {content: ''; display: block; width: 200%; height: 1px; background: linear-gradient(90deg, black 50%, transparent 50%); background-size: 10% 1px; background-position: -50px; background-repeat: repeat-x; position: absolute; left: -10%; top: 40%; animation: line-slide 60s forwards infinite linear; z-index: 1;} */
.mq-swiper .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
  position: relative;
}
.mq-swiper .swiper-slide {
  width: auto;
  position: relative;
  font-size: 3rem;
  font-weight: 700;
  text-shadow: -1px 0 var(--bg-color-d1), 0 1px var(--bg-color-d1),
    1px 0 var(--bg-color-d1), 0 -1px var(--bg-color-d1);
  color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#section-review {
  padding-top: 0;
}
.swiper-paging {
  position: absolute;
  left: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: 10px !important;
  background: var(--bg-color-f5);
  border-radius: 5px;
}
.swiper-paging.swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background-color: var(--bg-color-a4);
  border-radius: 5px;
}
.review-swiper .swiper {
  padding-bottom: 3rem;
}

#section-products {
  background-color: var(--bg-color-f9);
}
.products-swiper .swiper {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
.products-swiper .grid-image-wrap {
  border-top: 1px solid var(--bg-color-d1);
  border-bottom: 1px solid var(--bg-color-d1);
}

#section-myclub {
  padding-bottom: 0;
}

.myclub-swiper .swiper {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
.myclub-swiper .swiper-arrows {
  top: 32%;
}

.myclub-info {
  padding: 2rem;
  background-color: var(--bg-color-f5);
  margin-bottom: 3rem;
}
.myclub-info li {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}
.myclub-info li:first-child {
  margin-top: 0;
}
.myclub-info li .label {
  width: 3rem;
  flex-shrink: 1;
  background-color: #fff;
  border-radius: 50%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myclub-info li .text {
  flex-grow: 0;
  margin-left: 1rem;
  color: var(--key-color);
}

.myclub-wrap {
  background-color: var(--bg-color-f5);
  padding: 3rem 1.5rem 6rem;
}
.section-header h4 {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.section-header .desc {
  color: var(--bg-color-3f);
}
.section-header .desc .hash + .hash {
  margin-left: 1rem;
}
.myclub-wrap .swiper-paging {
  background-color: #ddd;
}

.club-item {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 4px;
}
.club-item .item-badge {
  margin-bottom: 3rem;
}
.club-item .item-badge .badge-club {
  font-size: 1.3rem;
}
.club-item .item-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.club-item .item-desc {
  color: var(--bg-color-3f);
  line-height: 1.3;
  margin-bottom: 3rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: 6rem;
  text-overflow: ellipsis;
}
.club-item .item-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.club-item .item-user .date {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
}

.club-item .item-progress {
  margin: 1.5rem 0 2rem;
}
.club-item .item-progress .progress {
  margin-bottom: 1rem;
}
.club-item .item-progress .progress svg {
  stroke: var(--bg-color-f5);
  border-radius: 1rem;
}
.club-item .item-progress .progress .label {
  position: absolute;
  top: 54%;
  left: 1rem;
  color: #fff;
  font-size: 1.3rem;
}

.progress-bar.progress-age svg path {
  stroke: #ffb31a !important;
}
.progress-bar.progress-avg svg path {
  stroke: #29ccab !important;
}
.progress-bar.progress-speed svg path {
  stroke: #3e5efa !important;
}
/* .progress-bar.bg-age{background-image: linear-gradient(to right, #79f2d8, #c67efc, #ffa31a, #f90);} */

.club-item .item-progress .progress.circle {
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
}
.club-item .item-progress .progress.circle .progress-bar {
  width: 100%;
  background-color: #fff;
}
.club-item .item-progress .progress.circle svg {
  stroke-linecap: round;
}
.club-item .item-progress .progress.circle .progressbar-text {
  font-size: 3rem;
  font-weight: 700;
  margin-top: 3px !important;
  color: var(--theme-color) !important;
}
.club-item .item-progress .progress.circle .progressbar-text span {
  font-size: 1.3rem;
}
.club-item .item-progress .progress-title {
  text-align: center;
  color: var(--key-color);
  font-size: 1.3rem;
  margin-top: 0.5 / rem;
}

.item-tags {
  margin-top: 1rem;
  display: flex;
}
.item-tags .tag {
  display: inline-block;
  border-radius: 1.2rem;
  background-color: var(--key-color);
  color: #fff;
  width: 7rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  margin-right: 1rem;
  font-size: 1.3rem;
}

.club-item.self-item {
  background-color: #fff;
  padding: 1.5rem;
  margin-bottom: 3rem;
}
.club-item.self-item .item-badge {
  margin-bottom: 1.5rem;
}
.myclub-area + .myclub-area {
  border-top: 1px solid var(--bg-color-d1);
  margin-top: 6rem;
  padding-top: 6rem;
}

#section-ranking {
  position: relative;
}
.ranking-banner {
  background-color: var(--bg-color-ed);
  height: 9rem;
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
}
.ranking-banner img {
  max-height: 45px;
}

.ranking-list {
  position: relative;
  margin-bottom: 3rem;
}
.ranking-list li {
  border: 1px solid var(--bg-color-d1);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.ranking-list li .num-wrap {
  width: 3.5rem;
  flex-shrink: 0;
  text-align: center;
}
.ranking-list li .num-wrap .rank {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--bg-color-f5);
  color: var(--theme-color);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 3.5rem;
  margin-bottom: 0.5rem;
}
.ranking-list li .num-wrap p {
  text-align: center;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
}
.ranking-list li .num-wrap .up .text {
  color: #f5402c;
}
.ranking-list li .num-wrap .up .icon {
  background-image: url("../images/icons/ico-rank-up.png");
  width: 0.5rem;
  height: 0.4rem;
  margin-right: 4px;
}
.ranking-list li .num-wrap .down .text {
  color: #0764fa;
}
.ranking-list li .num-wrap .down .icon {
  background-image: url("../images/icons/ico-rank-down.png");
  width: 0.5rem;
  height: 0.4rem;
  margin-right: 4px;
}
.ranking-list li .content {
  margin-left: 2rem;
  flex-grow: 1;
}
.ranking-list li .content .product-thumb {
  display: none;
  margin-right: 3rem;
}
.ranking-list li .content .product-thumb img {
  max-width: 80px;
}
.ranking-list li .content .product-title-wrap {
  margin-bottom: 1rem;
}
.ranking-list li .content .product-title-wrap .product-brand {
  margin-bottom: 0;
}
.ranking-list li .content .product-title-wrap .product-brand .brand {
  margin-left: 0;
}
.ranking-list li .content .product-title-wrap .title {
  font-size: 1.5rem;
}
.ranking-list li .content .rank-etc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ranking-list li .content .rank-etc .star {
  width: auto;
  padding: 1rem;
  background-color: var(--bg-color-f5);
  border-radius: 1rem;
}
/* .ranking-list li .content .rank-etc .star .ico-star{width: 2rem; height: 2rem; background-color: var(--bg-color-3f);} */
/* .ranking-list li .content .rank-etc .star em{display: inline-block; margin-left: 0.5rem; font-weight: 700;} */
.ranking-list li .content .rank-etc .rc-wrap {
  display: flex;
  align-items: center;
}
.ranking-list li .content .rank-etc .rc-wrap .label {
  font-size: 1.3rem;
  color: var(--key-color);
  margin-right: 1rem;
}
.ranking-list li .content .rank-etc .rc-wrap .progress.circle {
  width: 3.8rem;
  height: 3.8rem;
}
.ranking-list li .content .rank-etc .rc-wrap .progressbar-text {
  font-size: 1.3rem;
  color: var(--key-color);
}
.ranking-list li .content .rank-etc .rc-wrap .progressbar-text span {
  display: inline-block;
  font-size: 1rem;
}

.ranking-list li:first-child {
  border-color: var(--theme-color);
}
.ranking-list li:first-child .num-wrap .rank {
  background-color: var(--theme-color);
  color: #fff;
}

.ranking-list .banner {
  margin: 1.5rem 0;
}

.star {
  width: 6rem;
  display: flex;
  align-items: center;
}
.star .ico-star {
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("../images/common/star-01.png");
  background-size: 1.8rem;
}
.star em {
  display: inline-block;
  margin-top: 2px;
  margin-left: 0.5rem;
  font-weight: 700;
  color: var(--theme-color);
  line-height: 1;
}

#section-score {
  background-image: linear-gradient(to top, #020633, #020954, #020633);
}
#section-score .section-header {
  color: #fff;
}
#section-score .section-header .section-header-desc {
  color: #fff;
  margin-bottom: 1rem;
}
#section-score .section-header .desc {
  color: #fff;
}

.score-swiper {
  position: relative;
}
.score-swiper .swiper {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}
.score-swiper .swiper-arrows {
  top: 39%;
}
.score-swiper .swiper-pagination {
  bottom: -6px;
}
.score-swiper .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  background-color: var(--bg-color-3f);
  opacity: 1;
  margin: 0 1rem;
}
.score-swiper .swiper-pagination-bullet-active {
  background-color: #fff;
  width: 2rem;
  border-radius: 5px;
}

.score-item-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.score-header {
  height: 7.5rem;
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
  background-color: var(--bg-color-ed);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.score-header.text-xs {
  font-size: 1.5rem;
}
.score-header p {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem 1.5rem;
  background-color: #fff;
  position: relative;
}
.score-box .VS {
  position: absolute;
  top: 12%;
  left: 50%;
  font-size: 2.4rem;
  font-weight: 700;
  transform: translate(-50%, 0);
  width: 6rem;
  height: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background-color: var(--key-color);
  border-radius: 50%;
  color: #fff;
}
.score-box .grid-item {
  width: 48%;
  position: relative;
  border-color: var(--bg-color-d1);
}
.score-box .grid-item .grid-image-wrap {
  border-bottom: 1px solid var(--bg-color-d1);
}
.score-box .grid-item .grid-image-wrap:before {
  padding-bottom: 78%;
}
.score-box .grid-item .grid-image-wrap .grid-image img {
  top: 17%;
}
.score-box .grid-item .product-title-wrap {
  text-align: center;
  padding: 1.5rem 0.5rem;
  margin-bottom: 0;
}
.score-box .grid-item .product-title-wrap .brand {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0;
  margin: 0;
  margin-bottom: 0.5rem;
}
.score-box .grid-item .product-title-wrap .title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  height: 3.2rem;
}

.score-box .grid-item .grid-review {
  background-color: var(--bg-color-f9);
  padding: 1rem 0;
  text-align: center;
}
.score-box .grid-item .grid-review .star {
  width: auto;
  justify-content: center;
}
.score-box .grid-item .grid-review .star em {
  line-height: 1;
  font-size: 2rem;
}

.score-box .grid-item .grid-content {
  padding: 2rem;
}
.score-box .progress-wrap .progress-bar {
  background-color: #4e73df;
}

.review-progress-wrap .progress-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
  color: var(--bg-color-3f);
  margin: 2px 0;
}
.review-progress-wrap .progress-wrap .label {
  width: 4.8rem;
  text-align: justify;
}
.review-progress-wrap .progress-wrap .progress {
  margin: 0 1rem;
  height: 1rem;
  width: 100%;
}
.review-progress-wrap .progress-wrap .progress .progress-bar svg path {
  stroke: #4e73df;
}
.review-progress-wrap .progress-wrap .avg {
  position: relative;
}
.review-progress-wrap .progress-wrap .avg.letter {
  letter-spacing: 1.1px;
}

#section-board .section-header .section-header-title {
  margin-top: 1.2rem;
  font-size: 2.8rem;
}
#section-board .section-header .desc {
  color: var(--bg-color-3f);
}
.banner-community {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
  background: url("../images/main/online-community.jpg") no-repeat center/cover;
  margin-bottom: 6rem;
}
.banner-community .inner {
  position: relative;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 3rem);
  height: calc(100% - 3rem);
}
/* .banner-community .inner::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3;} */
.banner-community p {
  font-size: 2.4rem;
  color: #fff;
  text-align: center;
}
.banner-community p strong {
  display: block;
}

.board-wrap + .board-wrap {
  border-top: 1px solid var(--bg-color-d1);
  padding-top: 6rem;
  margin-top: 6rem;
}
.board-wrap {
  position: relative;
}
.board-wrap .bbs-gallery {
  padding-top: 0;
}
.board-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.board-title-wrap .section-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
  color: var(--text-body-color);
}
.board-title-wrap .more {
  color: var(--bg-color-3f);
}
.board-title-wrap .more i {
  margin-left: 4px;
}

/**********
* ## SUB
**********/
.sub {
  position: relative;
}
.sub section.bg-section {
  margin-bottom: 0;
  background-color: var(--bg-color-f5);
  padding-top: 3rem;
}
.section-page {
  position: relative;
  padding: 3rem 0;
}
.section-page:last-child {
  padding-bottom: 6rem;
}
.section-page + .section-page {
  padding-top: 1rem;
}
.section-title {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
}
.section-desc {
  position: relative;
}
.bg-desc {
  background-color: #f0f0f0;
  padding: 2rem 1rem;
  margin-bottom: 2rem;
}
.section-image {
  margin-top: 60px;
}
.section-title-wrap {
  text-align: center;
}
.section-content {
  position: relative;
}

.sub .section-title {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.main .page-title {
  display: none;
}
.page-title {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 4.5rem;
  background-color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}
.page-title h2 {
  font-size: 1.8rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 1.5rem;
  font-weight: 500;
}
.page-title .btn-prev {
  width: 20px;
  height: 28px;
  overflow: hidden;
  text-indent: -9999px;
}
.page-title .util-button .icon-bar {
  width: 24px;
}
.page-title .util-button .icon-bar:nth-child(2) {
  margin: 6px 0;
}
.page-title .util-button .icon-bar:nth-child(3) {
  width: 18px;
}

/**********
* #### SUB TOP
**********/
.sub-top-visual {
  position: relative;
  width: 100%;
  background-color: var(--bg-color-ed);
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: none;
}
.sub-top-visual .visual-title {
  font-size: 2.9rem;
  position: relative;
  line-height: 1.3;
  display: inline-block;
  font-weight: 600;
}
.sub-top-visual .line {
  width: 40px;
  height: 2px;
  background-color: var(--bg-color-a4);
  margin: 1.5rem 0 1rem;
}
.sub-top-visual .visual-desc {
  font-size: 1.5rem;
  color: #000;
  margin-top: 0;
  background-color: var(--key-color);
  color: #fff;
  padding: 8px 10px;
  line-height: 1;
}
.sub-top-visual .bg-ani {
  animation: aniUp 1s;
  -moz-animation: aniUp 1s;
  -webkit-animation: aniUp 1s;
  -o-animation: aniUp 1s;
  width: 15rem;
  height: 15rem;
  position: absolute;
  right: 0;
  z-index: 10;
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../images/common/bg-01.png");
}
.sub-top-visual .bg-ani2 {
  animation: aniUp2 1s;
  -moz-animation: aniUp2 1s;
  -webkit-animation: aniUp2 1s;
  -o-animation: aniUp2 1s;
  width: 14rem;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 10;
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../images/common/bg-02.png");
}

.sub-top-wrap {
  display: flex;
  height: 20rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sub-top-content {
  display: flex;
  flex-direction: column;
  margin-top: 3.5rem;
  justify-content: center;
  height: 100%;
  position: relative;
}

.sub-top-visual.products {
  display: block;
  background-color: var(--key-color);
}
.sub-top-visual.myclub {
  display: block;
  background-color: var(--key-color);
}
.sub-top-visual.review {
  display: block;
  background-color: var(--bg-color-3f);
}
.sub-top-visual.ranking {
  display: block;
  background-color: var(--bg-color-3f);
}
.sub-top-visual.score {
  display: block;
  background-color: var(--key-color);
}
.sub-top-visual.makegolf {
  background-image: url("../images/community/bg-deco-01.png");
}
.sub-top-visual.golfspy {
  background-image: url("../images/community/bg-deco-02.png");
}

/**********
* #### SUB TOP TAB
**********/
.sub-top-tab.white {
  background-color: #f0f0f0;
}
.sub-top-tab.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
/* .sub-top-tab.white ul li a{color: #96faa3;} */
.sub-top-tab.white ul li.active a,
.sub-top-tab.white ul li a:hover {
  color: #333;
}

.sub-top-tab {
  background: var(--bg-color-ed);
}
.sub-top-tab ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.sub-top-tab ul li {
  display: table-cell;
  width: 50%;
}
.sub-top-tab ul li a {
  display: block;
  text-align: center;
  color: #777;
  height: 4.5rem;
  line-height: 4.5rem;
  letter-spacing: 0;
}
.sub-top-tab ul li.active a,
.sub-top-tab ul li a:hover {
  color: var(--text-body-color);
  font-weight: 500;
}
.sub-top-tab.sticky .sub-top-tab ul li a {
  color: #a7a8a9;
}

/**********
* #### SUB TOP NAV
**********/
.sub-tab-nav-warp {
  position: relative;
  margin-top: 30px;
}
.sub-tab-nav-warp .btn-lnb {
  display: none;
}
.fixed-nav .sub-tab-nav-warp {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 2;
  background-color: #f7f7f7;
}
.fixed-nav .sub-tab-nav {
  margin-bottom: 0;
}
.fixed-nav #header {
  display: none;
}

.sub-tab-nav {
  font-size: 0;
  clear: both; /* display: none; */
  margin: 0 auto 3rem;
  text-align: center;
  display: flex;
}
.sub-tab-nav li {
  display: inline-block;
  position: relative;
  flex: 1;
  border-bottom: 2px solid #ddd;
}
.sub-tab-nav li:last-child {
  margin-right: 0;
}
.sub-tab-nav li a {
  display: block;
  padding: 17px 0 16px;
  font-size: 18px;
  color: #666;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  line-height: 1;
}
.sub-tab-nav li.active a,
.sub-tab-nav li a:hover {
  color: #111;
  font-weight: 500;
}
/* .sub-tab-nav li a:after {content: '';display: block; height: 2px;width: 100%; background: #121212;position: absolute;bottom: 0;left: 0;opacity: 0;transition: opacity .3s; ;} */
.sub-tab-nav li.active {
  border-bottom-color: #111;
  border-bottom-width: 3px;
}
/* .sub-tab-nav li.active a:after { opacity: 1; } */

/**********
* #### SUB LNB
**********/
.lnb-wrap {
  position: relative;
  margin-top: 3rem;
}
.lnb-wrap .lnb-menu {
  display: none;
  height: 4.5rem;
}
.lnb-wrap .lnb-menu.active {
  display: flex;
  height: auto;
  flex-direction: column;
  background-color: #fff;
  padding: 0 1.5rem;
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}
.lnb-wrap .lnb-menu li {
  flex: 1;
  background-color: #fff;
  width: 100%;
}
.lnb-wrap .lnb-menu .menu-box2:last-child {
  width: 100% !important;
  border: 0;
  background: #333;
}
/* .lnb-wrap .lnb-menu .sub-menu { background:#333; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: -1; padding-bottom: 10px;}  */
/* .lnb-wrap .lnb-menu .sub-menu a {color:#fff; border:0} */
.lnb-wrap .btn-lnb {
  letter-spacing: 0;
  width: 100%;
  height: 4.5rem;
  line-height: 4.5rem;
  max-width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.lnb-wrap .btn-lnb a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 1.5rem;
}
.lnb-wrap .lnb-menu a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: left;
  height: 40px;
  line-height: 40px;
  color: #777;
}
.lnb-wrap .lnb-menu a.active {
  font-weight: 500;
  color: var(--text-body-color);
}
/* .lnb-wrap .lnb-menu .sub-menu{display: none; position: absolute; background-color: #fff; z-index: -1; padding-bottom: 10px; top: 55px; width: 100%; left: 0; }
.lnb-wrap .lnb-menu .sub-menu.active{display: block; }
.lnb-wrap .lnb-menu .sub-menu a{text-align:left; padding:0 2rem; letter-spacing: 0; text-align:left; height: 40px; line-height: 40px; } */
.lnb-wrap .btn-lnb.active .ic {
  transform: rotate(-180deg);
}
.lnb-wrap .btn-lnb .ic {
  width: 50px;
  height: 50px;
  right: 1.5rem;
  top: 0;
  margin-top: 0;
  background: url("../images/icons/ico-angle-down.png") no-repeat center center;
  background-size: 25% auto;
  display: block;
  position: absolute;
  transition: all ease 0.2s;
}

.breadcrumb {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 3rem;
  bottom: 1rem;
}
.breadcrumb-item {
  margin-left: 5px;
  color: #777;
  font-weight: 500;
  font-size: 15px;
}
.breadcrumb-item:first-child {
  margin-left: 0;
}
.breadcrumb-item a {
  color: #777;
}
.breadcrumb-item .text {
  color: var(--key-color);
}

/**********
* #### SUB TOP ETC
**********/
.subwrap-top {
  padding: 3rem 0 0;
  background-position: top center;
  position: relative;
  display: none;
}
.subwrap-top.pc {
  overflow: hidden;
}
.subwrap-top .subwrap-title {
  font-size: 2.4rem;
  position: relative;
  font-weight: 600;
  line-height: 1;
}
.subwrap-top.bg-top {
  background-color: #f0f0f0;
  margin-bottom: 2rem;
}

.subwrap-top .arrow-prev {
  position: absolute;
  top: 30px;
  left: 15px;
}
.subwrap-top .arrow-prev span {
  color: #777;
  text-align: left;
  padding-left: 10px;
  vertical-align: middle;
}
.subwrap-top .arrow-prev img {
  vertical-align: middle;
  width: 30px;
}
.subwrap-top .arrow-next {
  position: absolute;
  top: 30px;
  right: 15px;
}
.subwrap-top .arrow-next span {
  color: #777;
  text-align: right;
  padding-right: 10px;
  vertical-align: middle;
}
.subwrap-top .arrow-next img {
  vertical-align: middle;
  width: 30px;
}

.subwrap-top .subwrap-title + a {
  position: absolute;
  bottom: 0;
  right: 10px;
}
.subwrap-title-s {
  font-size: 42px;
  color: #121212;
  font-weight: 700;
  line-height: 1.3em;
}

.wh-wrap {
  padding: 2rem 4rem 5rem;
  background-color: #fff;
}
.wh-wrap .subwrap-top {
  padding-top: 0;
}

/**********
* ## ABOUT
**********/
.company-wrap {
  text-align: center;
}
.company-wrap h3 {
  font-size: 2.4rem;
  line-height: 1.25;
  margin-bottom: 2rem;
  font-weight: 500;
}
.company-wrap .company-logo {
  margin-top: 5rem;
}
.company-banner {
  margin: 2rem 0;
}
.company-banner img {
  width: 100%;
}

.vision-wrap {
  display: flex;
  align-items: center;
}
.vision-box {
  flex-shrink: 0;
}
.vision-wrap.business .vision-box {
  background-color: #f0f0f0;
  padding: 2.5rem;
}
/* .vision-box img{display: block;} */
.vision-content {
  flex-grow: 1;
  margin-right: auto;
}
.vision-wrap.business .vision-content {
  margin-left: 9rem;
  margin-right: 0;
}
.vision-content li {
  margin-bottom: 2rem;
}
.vision-content li:last-child {
  margin-bottom: 0;
}
.vision-content li .title {
  font-size: 1.8rem;
  color: #0e4e60;
  position: relative;
  display: inline-block;
  line-height: 1.6;
}
.vision-content li .title span {
  display: inline-block;
  border-bottom: 1px solid #0e4e60;
}
.vision-content li p {
  color: #000;
  margin-top: 15px;
}

.section-vision {
  padding: 8rem 0;
}
.kp-logo-link {
  position: absolute;
  right: 5%;
  width: 200px;
  height: 300px;
  top: -150px;
}

.section-company {
  background: #131313 url("../images/company/02-04.jpg") no-repeat center/cover;
  padding-bottom: 6.5rem;
}
.section-company .section-header-title {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 400;
  margin: 1rem 0 2rem;
  line-height: 1;
}

.company-info-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.company-info-box {
  width: 12rem;
  height: 12rem;
  background-color: #fff;
  padding: 2.5rem 0;
  color: #000;
  text-align: center;
}
.company-info-icon {
  display: inline-block;
  width: 50px;
  height: 53px;
  background: url("../images/company/building.png") no-repeat center/cover;
  margin-bottom: 1.5rem;
}
.company-info-box:nth-child(2) .company-info-icon {
  background-image: url("../images/company/ceo.png");
  width: 71px;
  height: 48px;
}
.company-info-box:nth-child(3) .company-info-icon {
  background-image: url("../images/company/date.png");
  width: 51px;
  height: 50px;
}
.company-info-box:nth-child(4) .company-info-icon {
  background-image: url("../images/company/cowoker.png");
  width: 50px;
  height: 50px;
}
.company-info-box:nth-child(5) .company-info-icon {
  background-image: url("../images/company/location.png");
  width: 53px;
  height: 45px;
}
.company-info-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1;
}
.company-info-box p {
  text-align: center;
  line-height: 1.2;
  height: 36px;
}
.company-info-box:nth-child(5) .company-info-title {
  margin-bottom: 10px;
}

/**** 
** ## BRAND
*****/
.brand-desc {
  margin-bottom: 0.75rem;
}

.page-brand .breadcrumb-item,
.page-brand .breadcrumb-item a {
  color: #000;
}
.brand-top-logo {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
}

.page-brand .swiper-wrapper {
  transition-timing-function: linear;
}
.page-brand .swiper-slide {
  width: auto;
}
.page-brand .brand-slide {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translate(0, -50%);
}

.container-wide {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
}
.page-brand .breadcrumb {
  position: relative;
  margin-bottom: 2rem;
  margin-right: 3rem;
  right: 0;
  bottom: 0;
}
.bs-image-wrap {
  border-radius: 22px;
  background-color: #ccc;
  height: 35rem;
  padding: 1rem 8rem;
  overflow: hidden;
  position: relative;
}
.bs-image-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bs-title {
  font-size: 2.9rem;
  font-weight: 600;
  color: #33ae9c;
  padding-left: 8rem;
  position: relative;
}
.bs-content {
  position: relative;
  z-index: 1;
  color: #000;
}
.bs-content .title {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.section-robotics {
  background-color: #f0f0f0;
}
.section-robotics .vision-content {
  margin-left: 3rem;
}
.vision-box.robotics {
  padding: 0;
}
.vision-box.robotics img {
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
}

.section-robotics .vision-content .title {
  font-size: 2.9rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.text-highlight {
  background: linear-gradient(to right top, #1e7bbe, #164e86);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background: -webkit-gradient(linear, left top, right top, color-stop(5%, #1e7bbe), color-stop(36%, #ff414d), color-stop(58%, #a33ffa), color-stop(78%, #3798fb), color-stop(99%, #164e86));
    background: linear-gradient(to top, #1e7bbe, #164e86), linear-gradient(to bottom, #000, #000);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

.row-item {
  display: flex;
  margin-bottom: 4rem;
  align-items: center;
}
.row-item .row-image {
  flex-shrink: 1;
}
.row-item .row-cont {
  flex-grow: 0;
  margin-left: 3rem;
  font-size: 0.9rem;
}

.row-item.rtl {
  display: flex;
  flex-direction: row-reverse;
}

.row-item.rtl .row-cont {
  margin-left: 0;
  margin-right: 3rem;
  text-align: right;
}

/**** 
** ## PRODUCTS
*****/
.total-avg {
  font-size: 2rem;
  font-weight: 900;
  margin-left: 1rem;
  line-height: 1;
}
.total-star-wrap {
  background-image: url("../images/common/star-set.png");
  background-size: 23.4rem 1.8rem;
  width: 11.4rem;
  height: 1.8rem;
  display: block;
  background-position: -12rem 0;
  background-repeat: no-repeat;
}
.total-star {
  background-position: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  background-image: url("../images/common/star-set.png");
  display: block;
  width: 11.4rem;
  height: 1.8rem;
  background-size: 23.4rem 1.8rem;
}

.product-info-wrap {
  border: 1px solid var(--bg-color-d1);
}
.product-info-wrap .product-info {
  margin: 0;
}
.product-info {
  background-color: #fff;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}
.product-info li {
  /* flex: 0 0 30%; margin: 0 1.5%; */
  flex: 1;
  text-align: center;
}
.product-info li .icon {
  border-radius: 50%;
  width: 7rem;
  height: 7rem;
  background-color: #f2f3fa;
}
.product-info li:nth-child(1) .icon {
  background-image: url("../images/products/clubsearch-01.png");
}
.product-info li:nth-child(2) .icon {
  background-image: url("../images/products/clubsearch-02.png");
}
.product-info li:nth-child(3) .icon {
  background-image: url("../images/products/clubsearch-03.png");
}
.product-info li p {
  color: var(--bg-color-3f);
  margin-top: 1.6rem;
  line-height: 1.3;
}

.products-wrap .grid-list {
  justify-content: space-between;
  margin-top: 5rem;
  margin-left: -2rem;
}
.products-wrap .grid-item {
  width: calc(50% - 2rem);
  background-color: #c0c0c0;
  max-width: 50%;
}
.products-wrap .grid-item .grid-image-wrap {
  margin-bottom: 0;
}
.products-wrap .grid-item .grid-content {
  position: absolute;
  left: 3rem;
  bottom: 3rem;
  color: #000;
}
.products-wrap .grid-item .grid-title {
  margin-bottom: 0;
}
.products-wrap .grid-item .grid-desc {
  margin-top: 0.8rem;
}

.product-mark {
  margin-bottom: 1rem;
  display: flex;
}
/* .grid-desc{font-size: 0.9rem;}
.grid-title-sub{font-size: 0.9rem;} */
.grid-price span.price {
  font-size: 1.2rem;
  font-weight: 600;
}

.review .grid-item .grid-review {
  background-image: linear-gradient(to top, #020633, #020954, #020633),
    linear-gradient(to bottom, #020c73, #020c73);
  color: #fff;
  text-align: center;
  padding: 2rem;
  display: flex;
  align-items: center;
}
.review .grid-item .grid-review .label {
  font-size: 1.5rem;
  margin-right: 1rem;
  line-height: 1;
  margin-right: auto;
  margin-top: 4px;
}

.review .grid-item .grid-content {
  text-align: center;
}
.review .grid-item .grid-content .btn-border {
  border-color: var(--theme-color);
  color: var(--theme-color);
  min-width: 13rem;
}
.review .grid-item .grid-content .btn-border:hover {
  background-color: #fff;
}

.product-title-wrap {
  position: relative;
  margin-bottom: 2rem;
}
.product-title-wrap .product-brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}
.product-title-wrap .product-brand .text {
  color: var(--bg-color-3f);
}
.product-title-wrap .product-brand .brand {
  margin-left: 5px;
}
.product-title-wrap .title {
  font-size: 1.8rem;
  font-weight: 700;
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
}
.grid-list .grid-item {
  flex: 1;
}
/* .grid-list .grid-item:last-child{margin-bottom: 0;} */
.grid-item {
  position: relative;
  border: 1px solid var(--bg-color-d1);
}
.grid-item .grid-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.grid-item .grid-header {
  padding: 1.5rem 1.5rem;
  background-color: #fff;
}
.grid-item .grid-image img {
  width: 100%;
}
.grid-item .grid-content {
  height: auto;
  position: relative;
  padding: 3rem 1.5rem;
  background-color: #fff;
}
.grid-item .grid-title {
  font-weight: 400;
  line-height: 1.2;
}
.grid-item .grid-btn {
  margin-top: 2rem;
  text-align: center;
}
.grid-item .grid-btn .btn-icon-wrap {
  padding: 0;
  height: 3.4rem;
  line-height: 3.4rem;
}
.grid-item .grid-badge {
  text-align: center;
}

.grid-item .grid-image-wrap .grid-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.grid-item .grid-image-wrap .grid-badge .badge {
  display: block;
  margin-bottom: 1rem;
}

.grid-item .grid-match {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.grid-item .grid-match span {
  font-size: 1.3rem;
  line-height: 3.5rem;
  height: 3.5rem;
  text-align: center;
  display: inline-block;
}
.grid-item .grid-match .label {
  background-color: var(--key-color);
  border: 1px solid var(--key-color);
  color: #fff;
  font-weight: 700;
  width: 6rem;
  color: var(--ad-color-4d);
}
.grid-item .grid-match .text {
  border: 1px solid var(--key-color);
  color: var(--key-color);
  border-left: 0;
  width: 16rem;
}

.grid-item .grid-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grid-item .grid-user .user {
  font-weight: 700;
}
.grid-item .grid-user .date {
  font-weight: 400;
  color: var(--bg-color-3f);
}

.grid-item .grid-count {
  position: absolute;
  right: 0;
  top: 0;
}
.grid-item .grid-count .comment-count {
  background-color: var(--bg-color-ed);
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 1.5rem;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
}

.grid-container {
  max-width: 900px;
}
.grid-list.bg-white .grid-item {
  border-right: 1px solid #ddd;
  padding-right: 45px;
  margin-left: 45px;
}
.grid-list.bg-white .grid-image-wrap .grid-image img {
  width: 100%;
}
.grid-list.bg-white .grid-item:first-child {
  margin-left: 0;
}
.grid-list.bg-white .grid-content {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px 15px 50px 15px;
}
.grid-list.bg-white .grid-item:last-child {
  border-right: 0;
  padding-right: 0;
}
.grid-list.bg-white .grid-title {
  text-align: left;
  padding-left: 10px;
}

/* .grid-item:hover .grid-image-wrap img{transform: scale(1.1); } */
/* .grid-item .grid-link{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} */
.grid-item .grid-image-wrap {
  position: relative;
  width: 100%;
  background-color: #fff;
}
.grid-item .grid-image-wrap:before {
  content: "";
  display: block;
  padding-bottom: 68.52%;
}
.grid-item .grid-image-wrap .grid-logo {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  z-index: 2;
}
.grid-item .grid-image-wrap .grid-logo img {
  height: 25px;
}
.grid-item .grid-image-wrap .grid-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.grid-item .grid-image-wrap .grid-image img {
  position: absolute;
  top: 10%;
  left: 17.5%;
  width: 65%;
  min-height: 65%;
  transition: transform 0.2s;
  object-fit: cover;
}
.grid-item .grid-image-wrap .grid-mark {
  position: absolute;
  bottom: -4rem;
  right: 5%;
  z-index: 1;
  display: inline-flex;
}

.grid-item .grid-content .table-wrap table .match th {
  background-color: var(--key-color);
  color: #fff;
  border-top-color: var(--key-color);
}
.grid-item .grid-content .table-wrap table .match td {
  background-color: var(--bg-color-ed);
  color: var(--text-body-color);
}

.mb-3 .grid-item {
  margin-bottom: 3rem;
}

.sub-top-visual.products .sub-top-wrap {
  align-items: flex-start;
}
.sub-top-visual.products .section-header {
  margin-bottom: 0;
  color: #fff;
}
.sub-top-visual.products .section-header .section-header-desc {
  color: #fff;
}

.products-list .grid-image-wrap {
  border-top: 1px solid var(--bg-color-a4);
  border-bottom: 1px solid var(--bg-color-a4);
}
.products-list .product-title-wrap {
  margin-bottom: 1rem;
}
.products-list .grid-mark {
  position: absolute;
  right: 0;
  bottom: 22%;
}
.products-list .grid-mark .ico-mark {
  width: 6rem;
  height: 6rem;
}
.products-list .grid-badge {
  text-align: left;
  margin-bottom: 1rem;
}
.products-list .grid-user {
  display: block;
}
.products-list .date {
  font-size: 1.3rem;
}
.products-list .grid-desc {
  font-size: 1.3rem;
}
.products-list .btn-wrap {
  text-align: right;
  margin-bottom: 2rem;
}
.products-list .btn-wrap .btn {
  min-width: 8rem;
}
.products-list .btn-wrap.paging-wrap {
  text-align: center;
}

.data-btn-wrap {
  margin: 2rem 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data-btn-wrap li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.data-btn-wrap li:last-child {
  padding-left: 1.5rem;
}
.data-btn-wrap li:last-child a {
  background-color: var(--theme-color);
  background-image: url("../images/products/clubsearch-bigdata.png");
}
.data-btn-wrap li a {
  display: block;
  text-align: center;
  padding: 2.25rem 0;
  width: 100%;
  background-color: var(--ad-color-ffa);
  border-radius: 10px;
  color: #fff;
  background: url("../images/products/clubsearch-item.png") no-repeat
    center/cover;
}
.data-btn-wrap li a p {
  font-weight: 700;
}

.banner {
  margin-top: 4rem;
}
.banner + .banner {
  margin-top: 1.5rem;
}

/**** 
** #### STEP
*****/
.step-header {
  text-align: center;
  padding-top: 6rem;
}
.step-header .step-badge {
  margin-bottom: 2rem;
}
.step-header h3 {
  font-size: 2.4rem;
  margin-bottom: 2.5rem;
}
.step-header h4 {
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
}
.step-header h4 em {
  font-weight: 600;
}
.step-header .desc {
  font-size: 1.8rem;
  color: var(--bg-color-3f);
}

.step-wrap {
  position: relative;
}
.step-wrap.full-screen {
  height: calc(100vh - 7.5rem);
  background-color: #fff;
}

.section-page.section-step {
  padding-top: 0;
}
.step-swiper .swiper-slide {
  background-color: #fff;
  z-index: 10;
}
.step-swiper .swiper-slide-active {
  z-index: 100;
}

.club-type {
  margin-top: 6rem;
}
.club-type ul li {
  margin-bottom: 2rem;
}
.club-type ul li button {
  border-radius: 2rem;
  border: 1px solid var(--key-color);
  width: 100%;
  text-align: center;
  height: 4rem;
  line-height: 4rem;
  color: var(--key-color);
  transition: all ease 0.3s;
}
.club-type ul li button.active,
.club-type ul li button:hover {
  background-color: var(--key-color);
  color: #fff;
}

.club-type ul.list {
  display: flex;
  flex-wrap: wrap;
}
.club-type ul.list li {
  flex: 0 0 49%;
}
.club-type ul.list li:nth-child(2n) {
  margin-left: 2%;
}
.club-type ul.list.mode-update li button:hover {
  background-color: #fff;
  color: var(--key-color);
}

.steps {
  display: flex;
  justify-content: center;
  margin: 2rem 0 3rem;
}
.steps li {
  margin: 0 1rem;
}
.steps li a {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  background-color: var(--bg-color-ed);
  color: #fff;
  border-radius: 1.5rem;
  font-size: 1.3rem;
}
.steps li a.active {
  background-color: var(--ad-color-07);
}
.steps li:nth-child(2) a.active {
  background-color: var(--ad-color-06);
}
.steps li:last-child a.active {
  background-color: var(--theme-color);
}

.step-box {
  border: 1px solid var(--bg-color-a4);
  padding: 1.5rem;
  margin-bottom: 4rem;
}
.step-box .desc {
  margin-bottom: 1rem;
  color: var(--bg-color-3f);
}
.step-box.my-data {
  margin-bottom: 0;
}

.step-form {
  margin-top: 6rem;
}
.step-form .form-group {
  margin-bottom: 4rem;
}
.step-form .form-group.has-input-box {
  margin-bottom: 2.5rem;
}
.step-form .form-group .label {
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
}
.step-form .form-group .label em {
  font-size: 1.5rem;
  margin-left: 0.5rem;
}
.step-form .form-group .label em.dt {
  display: block;
  margin-left: 0;
  margin-top: 3px;
}
/* .step-form .radio-box-wrap{display: flex; flex-wrap: wrap; margin: 0 -0.75rem;}
.step-form .radio-box-wrap + .radio-box-wrap{margin-top: 1.5rem;}
.step-form .radio-box-wrap .radio-box{flex: 0 0 33.33333%; padding: 0 0.75rem;} */
.step-form .radio-box {
  margin: 0 0 1.5rem;
}
.step-form .radio-box label::before {
  display: none;
  transition: none;
}
.step-form .radio-box label::after {
  display: none;
}
.step-form .radio-box label {
  background-color: var(--bg-color-ed);
  height: 4rem;
  border-radius: 4px;
  margin-left: 0;
  display: block;
  width: 100%;
  line-height: 4rem;
}
.step-form .radio-box input[type="radio"]:checked + label {
  background-color: var(--theme-color);
  color: #fff;
}

.step-form .radio-box.in-icon label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-form .radio-box.in-icon label .icon {
  margin-left: 5px;
}
.step-form
  .radio-box.in-icon.arrow-up
  input[type="radio"]:checked
  + label
  .icon {
  background-image: url("../images/icons/ico-arw-up-w.png");
}
.step-form
  .radio-box.in-icon.arrow-down
  input[type="radio"]:checked
  + label
  .icon {
  background-image: url("../images/icons/ico-arw-down-w.png");
}

.step-form .form-group .add-group {
  margin-top: 1.5rem;
}

.step-form .form-group .inner-label {
  font-size: 1.8rem;
  color: var(--bg-color-3f);
  display: flex;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.step-form .form-group .inner-label a {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.step-form .form-group .inner-label .ico-help {
  margin-left: 1rem;
}
.step-form .form-group .inner-label .text {
  font-size: 1.5rem;
  margin-left: 0.25rem;
}

.step-form .form-group .inner + .inner {
  margin-top: 2rem;
}

.step-form .input {
  border-radius: 4px !important;
  padding-left: 1.5rem;
}

.check-box-wrap {
  position: relative;
}
.check-box-wrap .check-box {
  background-color: var(--bg-color-ed);
  height: 4rem;
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
}
.check-box-wrap .check-box label {
  height: 4rem;
  background-color: var(--bg-color-ed);
  width: 100%;
  margin-left: 0;
  padding-left: 3.5rem;
  line-height: 4rem;
  border-radius: 4px;
  transition: all ease 0.2s;
}
.check-box-wrap .check-box label::before,
.check-box-wrap .check-box label::after {
  top: 1.2rem;
  left: 1rem;
}

.check-box-wrap .check-box.icon input[type="checkbox"]:checked + label {
  background-color: var(--theme-color);
  color: #fff;
}
.check-box-wrap .check-box.icon input[type="checkbox"]:checked + label::after {
  top: 1.2rem;
}

.step-range {
  padding: 1.5rem 2rem 4rem;
}
.step-range .noUi-connects {
  background-color: var(--bg-color-ed);
}
.step-range .noUi-connect {
  background: var(--ad-color-07);
}
.step-range .noUi-horizontal {
  height: 4px;
}
.step-range .noUi-target {
  border: 0;
  box-shadow: none;
}
.step-range .noUi-horizontal .noUi-handle {
  width: 2rem;
  height: 2rem;
  right: -1rem;
  top: -0.8rem;
}
.step-range .noUi-handle {
  border: 0;
  box-shadow: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ad-color-07);
  cursor: pointer;
}
.step-range .noUi-handle:before,
.step-range .noUi-handle:after {
  display: none;
}

.step-range .noUi-pips {
  color: var(--bg-color-a4);
}
.step-range .active-pip {
  color: var(--ad-color-07);
}
.step-range .noUi-value-sub {
  font-size: 1.5rem;
}
.step-range .noUi-value-sub:nth-child(4n) {
  display: none;
}

.step-range .year-range {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--ad-color-07);
  font-size: 1.8rem;
  font-weight: 600;
}

.step-btns {
  width: 100%;
  z-index: 10;
  transition: all ease 0.3s;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
}
.step-btns.intro .btn-step-prev {
  display: none;
}
.step-btns.intro .btn-step-next {
  margin-left: 0 !important;
}
.step-btns .btn-wrap {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  width: 100%;
}
.step-btns .btn {
  height: 4.5rem;
  line-height: 4.5rem;
}
.step-btns .btn + .btn {
  margin-left: 1.5rem;
}
.step-btns .btn-step-next {
  background-color: var(--ad-color-07);
  color: #fff;
  width: 100%;
  border-radius: 4px;
  flex: 1;
}
.step-btns .btn-step-prev {
  background-color: var(--bg-color-a4);
  color: #fff;
  min-width: 95px;
}
.step-btns .btn-step-prev .icon {
  margin-left: 0;
  margin-right: 1rem;
  background-color: var(--bg-color-a4);
}

.layer-step-result .pop-wrap {
  width: 100%;
  height: calc(100% - 4.5rem);
  top: 4.5rem !important;
  margin-top: 0 !important;
}
.layer-step-result .pop-wrap .pop-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.layer-step-result .pop-wrap .pop-content .loading {
  margin-top: 3rem;
}

body.st-up .layer-popup.layer-step-result .pop-content{padding-bottom: 1rem;}

/**** 
** #### PRODUCT RESULT
*****/
.page-product-result .section-banner {
  max-width: 1000px;
  margin: 0 auto;
}
.page-product-result .section {
  padding-top: 3rem;
  padding-bottom: 6rem;
}

.section-header.with-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-header.with-button .section-title {
  margin-bottom: 0;
}
.section-header.with-button .btn {
  min-width: 8rem;
}
.product-result-list .product-title-wrap .product-brand {
  margin-bottom: 0.5rem;
}
.product-result-list .product-title-wrap .brand {
  margin-left: 0;
}
.grid-result-list.product-result-list
  .grid-list
  .grid-item
  .grid-content
  .product-title-wrap
  .title {
  font-size: 1.3rem;
}
.grid-result-list.product-result-list .grid-list .grid-item {
  display: flex;
  align-items: center;
  padding: 2.5rem 0;
}
.product-result-list .grid-list .grid-item .grid-mark {
  position: absolute;
  right: 0;
  top: 1.5rem;
  z-index: 1;
}

.product-result-list .grid-badge {
  text-align: left;
}

.btn-data-more {
  background-color: var(--bg-color-3f);
  color: #fff;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.3rem;
}
.btn-data-more.active .icon {
  transform: rotate(180deg);
}

.table-wrap table.table-more {
  display: none;
  border-top: 0;
}
.table-wrap table.table-more.active {
  display: table;
}

.etc-btns .desc {
  margin-bottom: 0.8rem;
}
.etc-btn-group {
  border-top: 1px solid var(--bg-color-a4);
  margin-top: 3rem;
}
.etc-btn-group .etc-btns {
  margin-top: 3rem;
}

/**** 
** #### PRODUCT SPEC
*****/
.spec-wrap {
  position: relative;
}
.spec-header {
  height: 17.3rem;
  background: var(--bg-color-d1) url("../images/common/bg-pattern.png")
    no-repeat center/cover;
  position: relative;
}
.spec-brand {
  text-align: center;
  margin: 0 auto;
  padding-top: 1rem;
}
.spec-brand img {
  max-width: 120px;
}
.spec-thumb {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  width: 18rem;
  height: 18rem;
  border: 1px solid var(--bg-color-a4);
  left: 50%;
  margin-left: -9rem;
  background-color: #fff;
  z-index: 4;
  overflow: hidden;
}
.spec-thumb img {
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 80%;
  left: 10%;
  top: 22%;
}
.spec-thumb.no-image img {
  max-width: 100%;
  top: 0;
  left: 0;
}
.spec-container {
  padding: 13rem 1.5rem 0;
  max-width: calc(var(--container-width) - 200px);
  margin: 0 auto 2.5rem;
}

body.st-up .layer-popup .pop-content{padding-bottom: 0;}

.brand-rank {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border: 1px solid var(--bg-color-d1);
  border-radius: 4px;
  background-color: #fff;
  padding: 5px 10px;
  text-align: center;
}
.brand-rank .text {
  font-weight: 600;
  display: block;
}

.spec-tabs {
  position: relative;
  margin-bottom: 2.5rem;
}
.spec-tabs ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.spec-tabs ul li {
  flex: 1;
}
.spec-tabs ul li a {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--bg-color-a4);
  color: var(--bg-color-a4);
  text-align: center;
  padding: 1rem 0;
  font-size: 1.8rem;
}
.spec-tabs ul li a.active {
  color: var(--ad-color-07);
  border-bottom-color: var(--ad-color-07);
  font-weight: 600;
}

.spec-content .section-title {
  margin-bottom: 2rem;
  font-weight: 400;
}
.spec-content .section-title span {
  margin-left: 1rem;
  font-size: 1.8rem;
  color: var(--bg-color-3f);
}
.spec-content .sub-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.spec-content .spec-sub .sub-desc{
  font-size: 1.6rem;
  margin-top: 1.5rem;
}
.spec-content .spec-sub {
  margin-top: 3rem;
}
.spec-container .tab-container {
  margin-top: 4rem;
}
.spec-content .icon-box {
  margin-top: 4rem;
}
.icon-box {
  border: 1px solid var(--bg-color-a4);
  padding: 1.5rem;
}

.spec-content .info-wrap {
  background-color: var(--bg-color-f9);
  padding: 1.5rem;
}
.spec-content .info-wrap .label {
  display: block;
  margin-bottom: 1rem;
}

.spec-content .info-top {
  margin-bottom: 2rem;
}

.spec-content .table-wrap tbody td {
  word-break: break-all;
}

.loft-wrap .center-bar {
  height: 12rem;
  background-color: var(--ad-color-07);
  width: 1px;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  margin-top: -6rem;
}
.loft-wrap .loft-bar {
  display: flex;
  justify-content: center;
  height: 1px;
  background-color: var(--bg-color-d1);
  margin-top: 7.5rem;
  margin-bottom: 8.6rem;
  position: relative;
}
.loft-wrap .loft-bar .bar {
  height: 8rem;
  margin-top: -4rem;
  width: 1px;
  background-color: var(--bg-color-a4);
  position: relative;
}
.loft-wrap .text {
  background-color: var(--bg-color-f9);
  width: 10rem;
  height: 10rem;
  position: relative;
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -5rem;
  z-index: 1;
}
.loft-wrap .text span {
  background-color: var(--bg-color-ed);
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.8rem;
}

.loft-wrap .loft-bar .bar.r1 {
  right: -1rem;
}
.loft-wrap .loft-bar .bar.r2 {
  right: -4rem;
  height: 5rem;
  margin-top: -2.5rem;
}
.loft-wrap .loft-bar .bar.r3 {
  right: -7rem;
  height: 2rem;
  margin-top: -1rem;
}

.loft-wrap .loft-bar .bar.l1 {
  left: -1rem;
}
.loft-wrap .loft-bar .bar.l2 {
  left: -4rem;
  height: 5rem;
  margin-top: -2.5rem;
}
.loft-wrap .loft-bar .bar.l3 {
  left: -7rem;
  height: 2rem;
  margin-top: -1rem;
}

.shaft-wrap {
  position: relative;
  margin-bottom: 3rem;
  margin-top: 1.5rem;
}
.shaft-item {
  background-color: var(--bg-color-f9);
  padding: 1.5rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--bg-color-d1);
}
.shaft-item .shaft-title {
  display: flex;
  margin-bottom: 5px;
}
.shaft-item .shaft-title .label {
  flex-shrink: 0;
}
.shaft-item .shaft-title .label em {
  display: inline-block;
  background-color: var(--key-color);
  padding: 1px 5px;
  color: #fff;
  border-radius: 4px;
  font-size: 1.3rem;
}
.shaft-item .shaft-title .text {
  flex-grow: 1;
  margin-left: 0.5rem;
}
.shaft-item .highlight {
  color: var(--ad-color-94);
}
.shaft-item .table-wrap {
  margin-top: 1.5rem;
}
.shaft-item .table-wrap tbody th {
  padding: 0.725rem 1rem;
  width: 35%;
  background-color: var(--bg-color-ed);
}
/* .shaft-item .table-wrap table tbody td{text-align: center;} */
.shaft-item .memo {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 1.5rem;
  border: 1px solid var(--bg-color-d1);
  border-top: 0;
}
.shaft-item .memo .label {
  flex-shrink: 0;
}
.shaft-item .memo .text {
  flex-grow: 1;
  margin-left: 10px;
}

.shaft-item ul {
  display: flex;
  margin-top: 1.5rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border: 1px solid var(--bg-color-d1);
  border-bottom: 0;
}
.shaft-item ul + ul {
  margin-top: 0;
  border-top: 0;
}
.shaft-item ul li {
  display: flex;
  flex: 0 0 50%;
  font-size: 1.3rem;
  padding: 5px;
}
.shaft-item ul li .label {
  flex-shrink: 0;
  background-color: var(--bg-color-ed);
  width: 50%;
  text-align: center;
}
.shaft-item ul li .text {
  flex-grow: 1;
  padding-left: 10px;
}
.shaft-item ul.last {
  flex-direction: column;
}
.shaft-item ul.last li {
  flex: 1;
  width: 100%;
}
.shaft-item ul.last li .label {
  width: 35%;
}

/**** 
** #### BRAND
*****/

.search-wrap .inner {
  display: flex;
}
.search-wrap .inner .select-box {
  width: 12rem;
}
.search-wrap .inner .select-box + .select-box {
  margin-left: 1.5rem;
}
.search-wrap .inner .btn {
  width: 8rem;
  min-width: 8rem;
  margin-left: 1rem;
}

.brand-item-wrap .search-wrap {
  margin-bottom: 3rem;
}
.brand-item-wrap .table-wrap {
  margin-bottom: 6rem;
}
.brand-item-wrap .table-wrap th.brand-1 {
  background-color: var(--bg-color-ed);
}
.brand-item-wrap .table-wrap th.brand-2 {
  background-color: var(--bg-color-f9);
}
.brand-item-wrap .table-wrap th.brand-3 {
  background-color: var(--bg-color-f5);
}

/**** 
** #### DATA
*****/
.section-banner {
  text-align: center;
}
.section-banner + .section-banner{margin-top: 1.5rem;}
/* .section-banner + .section-banner .banner {
  margin-top: 1.5rem;
} */
.data-info-box {
  padding: 4rem 1.5rem;
  background-color: var(--bg-color-f9);
  margin-bottom: 2rem;
}
.data-info-box .dash li {
  margin-bottom: 2rem;
}
.data-info-box .dash li:last-child {
  margin-bottom: 0;
}
.data-info-box .dash li label {
  width: 1.5rem;
  margin-right: 1rem;
}
.data-info-box .dash li .text {
  font-size: 1.3rem;
}
.data-info-box .dash li .ico-check {
  background-image: url("../images/icons/ico-check-grey.png");
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 3px;
}

.data-info-wrap .icon-text-wrap .icon {
  margin-top: 2px;
}
.data-info-wrap .icon-text-wrap .text {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
  line-height: 1.3;
}

/**********
* ## MYCLUB
**********/
.sub-top-visual.myclub .sub-top-wrap {
  align-items: flex-start;
}
.sub-top-visual.myclub .section-header {
  margin-bottom: 0;
  color: #fff;
}
.sub-top-visual.myclub .section-header .section-header-desc {
  color: #fff;
}

.page-myclub .myclub-info {
  border: 1px solid var(--bg-color-d1);
  background-color: #fff;
}

.myclub-list .club-post {
  position: relative;
  margin-bottom: 3rem;
}
.myclub-list .club-item {
  border: 1px solid var(--bg-color-d1);
}
.club-item.border {
  border: 1px solid var(--bg-color-d1);
}

/**********
* #### MYCLUB VIEW
**********/
.myclub-header {
  border-bottom: 1px solid var(--bg-color-d1);
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}
.myclub-header .product-title-wrap {
  margin-bottom: 0.5rem;
}
.myclub-content {
  position: relative;
}
.myclub-content + .myclub-content {
  margin-top: 4rem;
}
.myclub-content + .btn-wrap {
  margin-top: 3rem;
}
.myclub-content + .btn-wrap a + a {
  margin-left: 1rem;
}
.info-list {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
.info-list li {
  display: flex;
  align-items: center;
  line-height: 1;
}
.info-list .dot {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--ad-color-07);
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
}
.info-list li + li {
  margin-left: 2rem;
}

.myclub-content .table-wrap table tbody th {
  width: 35%;
}

.club-item-wrap .item {
  display: flex;
  margin-bottom: 2rem;
}
.club-item-wrap .item .label {
  flex-shrink: 0;
  background-color: var(--bg-color-ed);
  width: 8rem;
  text-align: center;
  display: inline-block;
  padding: 1rem 0;
  font-weight: 600;
}
.club-item-wrap .item .text {
  flex-grow: 1;
  background-color: var(--bg-color-f9);
  display: inline-block;
  padding: 1rem 1rem 1rem 1.5rem;
}

.club-item-memo {
  background-color: var(--bg-color-f9);
  padding: 1.5rem;
}
.club-item-memo .q {
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.myclub-comment-wrap .club-item-memo {
  margin-top: 3rem;
}

.myclub-comment-wrap {
  padding-top: 3rem;
  margin-top: 2rem;
  border-top: 1px solid var(--bg-color-d1);
}

.page-myclub .section-page.last .etc-btns {
  border-top: 1px solid var(--bg-color-d1);
  padding-top: 3rem;
}

.name-card {
  margin-top: 3rem;
}
.name-card img {
  width: auto;
  max-width: 100%;
}

.myclub-comment-wrap .user-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.myclub-comment-wrap .user-wrap .date {
  color: var(--bg-color-3f);
  font-size: 1.3rem;
}
.myclub-comment-wrap .user-wrap .item-tags {
  display: inline-block;
  margin-top: 0;
}
.myclub-comment-wrap .user-wrap .item-tags .tag {
  margin-right: 0.5rem;
}
.myclub-comment-wrap .btn-wrap {
  margin: 3rem 0;
}

.club-score-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.score-progress-wrap .progress-wrap {
  display: flex;
  align-items: center;
}
.score-progress-wrap .progress-wrap + .progress-wrap {
  margin-top: 1rem;
}
.score-progress-wrap .progress-wrap .progress {
  height: 2.5rem;
  border-radius: 4px;
  max-width: 16rem;
}
.score-progress-wrap .progress-wrap .progress .progress-bar {
  border-radius: 4px;
}
.score-progress-wrap .progress-wrap .label {
  position: absolute;
  color: #fff;
  z-index: 1;
  left: 1rem;
  font-size: 1.3rem;
}
.score-progress-wrap .progress-wrap .text {
  font-weight: 600;
  margin-left: 1rem;
}
.score-progress-wrap .progress-wrap .progress svg {
  border-radius: 4px;
}

.score-total-wrap {
  text-align: center;
}
.score-total-wrap .progressbar-text {
  font-size: 3rem;
  font-weight: 600;
}
.score-total-wrap .progressbar-text span {
  font-size: 1.3rem;
  font-weight: 400;
}
.score-total-wrap .progress-title {
  margin-top: 0.8rem;
}

.page-myclub .ico-check-grey {
  width: 2rem;
  height: 2rem;
  background-size: 2rem auto;
  margin-right: 1rem;
}

.layer-golf-data .pop-content .pop-info {
  padding: 2rem;
  margin-bottom: 12rem;
}
.layer-golf-data .pop-content .pop-info .dash {
  margin-bottom: 3rem;
}
.layer-golf-data .pop-content .pop-info .dash li {
  margin-bottom: 1rem;
}
.layer-golf-data .pop-content .table-bg thead th + th {
  border-left: 1px solid var(--bg-color-d1);
}
.layer-golf-data .pop-content .tab-container .tabs {
  display: flex;
  flex-wrap: wrap;
}
.layer-golf-data .pop-content .tab-container .tabs li {
  flex: 0 0 33.333%;
}
.layer-golf-data .pop-content .tab-container .tabs li a {
  display: block;
  text-align: center;
  padding: 5px;
  border: 1px solid #d0d0d0;
  margin-top: -1px;
  margin-left: -1px;
}
.layer-golf-data .pop-content .tab-container .tabs li a.active {
  background-color: var(--theme-color);
  color: #fff;
}
.layer-golf-data .pop-content .tab-container .tab-content {
  display: none;
}
.layer-golf-data .pop-content .tab-container .tab-content.active {
  display: block;
}
.layer-golf-data .pop-content .golf-data-desc {
  border: 1px solid var(--bg-color-d1);
  padding: 10px;
  border-top: 0;
  font-size: 1.3rem;
  background-color: var(--bg-color-f9);
}

.table-wrap table.table-fixed {
  table-layout: fixed;
}

/**********
* #### MYCLUB SELF
**********/

.layer-info .pop-content {
  padding: 4rem 1.5rem;
}
.layer-info .pop-title {
  font-size: 2.4rem;
  font-weight: 600;
}
.layer-info .pop-footer {
  text-align: center;
  padding-bottom: 4rem;
}
.layer-info .pop-footer button {
  width: 22rem;
  height: 4rem;
  line-height: 4rem;
  padding: 0;
}
.layer-info .pop-info li {
  margin-bottom: 2rem;
}
.layer-info .pop-info li:last-child {
  margin-bottom: 0;
}

.pop-info-content {
  padding: 2rem 1.5rem;
  background-color: var(--bg-color-f0);
}
.pop-info-content h4 {
  font-size: 1.8rem;
}
.pop-info-content .btn-wrap {
  margin-top: 2rem;
}
.pop-info-content + .pop-info-content {
  margin-top: 3rem;
}

.self-step .step-header h3 {
  line-height: 1.25;
  font-weight: 400;
}

.step-form .btn-item {
  width: 100%;
  border: 1px solid var(--bg-color-d1);
  padding: 0;
  height: 4rem;
  line-height: 4rem;
  text-align: left;
  padding-left: 1.5rem;
  padding-right: 1rem;
  color: #4d4c4c;
}
.step-form .btn-item.btn-icon-wrap {
  justify-content: space-between;
}

.brand-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-left: 1px solid var(--bg-color-d1);
}
.brand-list li {
  flex: 0 0 33.33%;
  margin-top: -1px;
  margin-left: -1px;
}
.brand-list li a {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--bg-color-d1);
  height: 12rem;
  position: relative;
}
.brand-list li a .bg-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #0617cc;
  display: none;
}
.brand-list li a.active .bg-border {
  display: block;
}
.brand-list li a .image {
  overflow: hidden;
  margin-bottom: 1rem;
  height: 7.5rem;
}
.brand-list li a .image img {
  max-width: 100%;
  height: 100%;
  width: 100%;
}

.layer-popup.layer-item .pop-content {
  padding: 0 1.5rem;
}
.layer-item .step-header {
  padding-top: 3rem;
}
.layer-item .step-form {
  margin-top: 3rem;
}
.layer-item .step-container {
  padding-bottom: 16rem;
}

.item-list {
  border-top: 1px solid var(--bg-color-d1);
}
.item-list li a {
  display: flex;
  align-items: center;
  background: url("../images/icons/ico-check-non.png") no-repeat;
  border: 1px solid var(--bg-color-d1);
  border-top: 0;
  padding: 1rem;
  background-position: 95% center;
  background-size: 3rem;
  position: relative;
}
.item-list li a .image {
  width: 5rem;
  margin-right: 1rem;
}
.item-list li a .image img {
  max-width: 100%;
  width: auto;
}
.item-list li a .content .date {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
}
.item-list li a .bg-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #0617cc;
  display: none;
}
.item-list li a.active .bg-border {
  display: block;
}
.item-list li a.active {
  background-image: url("../images/icons/ico-check-act.png");
}

.self-result .section-header {
  margin-top: 6rem;
}
.self-result .self-wrap {
  background-color: var(--bg-color-f9);
  position: relative;
}
.self-result .self-container {
  padding: 9rem 1.5rem 6rem;
  max-width: calc(var(--container-width) - 200px);
  margin: 13rem auto 0;
}
.self-result .spec-thumb {
  top: -9rem;
}
.self-result .self-container .product-title-wrap {
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.self-result .club-item .item-progress {
  margin: 0;
}
.self-result .club-item.self-item {
  padding: 0;
  background-color: transparent;
  margin-bottom: 8rem;
}

.self-result .progress-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bg-color-3f);
  margin: 1rem 0;
}
.self-result .club-item .item-progress .progress {
  margin-bottom: 0;
  width: calc(100% - 8rem);
}
.status {
  display: inline-block;
  width: 6.5rem;
  height: 2rem;
  line-height: 2rem;
  border: 1px solid #18cf00;
  font-size: 1.3rem;
  border-radius: 4px;
  text-align: center;
}
.status.status-fit {
  background-color: #e5efff;
  border-color: #0764fa;
  color: #0764fa;
}
.status.status-down {
  background-color: #f2e7e6;
  border-color: #f5402c;
  color: #f5402c;
}
.status.status-normal {
  background-color: #eef6ed;
  color: #18cf00;
}
/* .self-result .progress-wrap .progress{margin: 0 1rem; height: 1rem; width: 100%;} */

/**********
* ## REVIEW
**********/
.sub-top-visual.review .sub-top-wrap {
  align-items: flex-start;
}
.sub-top-visual.review .section-header {
  margin-bottom: 0;
  color: #fff;
}
.sub-top-visual.review .section-header .section-header-desc {
  color: #fff;
}

.review .btn-wrap {
  margin-top: 3rem;
}

.grid-result-list {
  position: relative;
}
.grid-result-list .bbs-top {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  color: var(--bg-color-3f);
  padding-bottom: 2.5rem;
  padding-top: 0;
}
.grid-result-list .bbs-top .bbs-total {
  font-weight: 500;
}
.grid-result-list .bbs-top .bbs-order {
  position: relative;
}
.grid-result-list .bbs-top .bbs-order a {
  position: relative;
  padding-right: 10px;
  margin-right: 5px;
}
.grid-result-list .bbs-top .bbs-order a.active {
  text-decoration: underline;
  font-weight: 600;
}
.grid-result-list .bbs-top .bbs-order a:last-child {
  padding-right: 0;
  margin-right: 0;
}
.grid-result-list .bbs-top .bbs-order a:last-child::after {
  display: none;
}
.grid-result-list .bbs-top .bbs-order a::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  height: 12px;
  width: 1px;
  background-color: var(--bg-color-3f);
}

.grid-result-list .grid-list {
  display: block;
  margin-bottom: 3rem;
}

.grid-result-list .grid-list .grid-item {
  border: 0;
  border-bottom: 1px solid var(--bg-color-d1);
}
.grid-result-list .grid-list .grid-item > a {
  display: flex;
  align-items: center;
  padding: 2.5rem 0;
}
.grid-result-list .grid-list .grid-item .grid-image {
  flex-shrink: 0;
  width: 40%;
  border: 1px solid var(--bg-color-d1);
}
.grid-result-list .grid-list .grid-item .grid-image img {
  width: 100%;
}
.grid-result-list .grid-list .grid-item .grid-content {
  margin-left: 5%;
  width: 55%;
  padding: 0;
}
.grid-result-list .grid-list .grid-item .grid-content .grid-etc {
  display: flex;
}
.grid-result-list .grid-list .grid-item .grid-content .grid-etc .info {
  display: inline-block;
  color: var(--bg-color-a4);
  margin-left: 1.5rem;
}
.grid-result-list
  .grid-list
  .grid-item
  .grid-content
  .product-title-wrap
  .brand {
  font-weight: 600;
}
.grid-result-list
  .grid-list
  .grid-item
  .grid-content
  .product-title-wrap
  .title {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
}

.grid-result-list .grid-list .grid-item .grid-content .grid-etc .btn {
  font-size: 1.3rem;
  min-width: 9rem;
  padding: 5.5px 10px 4px;
  flex: 1;
}
.grid-result-list .grid-list .grid-item .grid-content .btn-wrap{margin-top: 10px; margin-bottom: 0;}
.grid-result-list .grid-list .grid-item .grid-content .btn-wrap .btn {padding: 5.5px 10px 4px; font-size: 1.3rem; width: 100%;}


.grid-result-list
  .grid-list
  .grid-item
  .grid-content
  .grid-etc
  .btn.btn-border {
  min-width: 7rem;
  margin-left: 1rem;
  border-color: var(--theme-color);
  color: var(--theme-color);
}

.grid-result-list .grid-list .grid-item .btn-wrap {
  text-align: right;
  margin-bottom: 2rem;
}
.grid-result-list .grid-list .grid-item .btn-wrap .btn {
  min-width: 8rem;
}

.grid-result-list.product-result-list .bbs-top{display: block;}
.grid-result-list.product-result-list .bbs-top .inner{display: flex; justify-content: space-between;}
.grid-result-list.product-result-list .bbs-top .inner .bbs-order{margin-left: auto;}

.etc-desc{margin-top: 1rem; padding: 1rem; border: 1px solid var(--bg-color-a4);}
.etc-desc a{display: flex; align-items: center;}
.etc-desc a .text{margin-right: 4px;}

.btn-more-wrap .text {
  margin-right: 5px;
}

.set-item {
  display: none;
}
.set-item.active {
  display: block;
  margin-top: 1rem;
}

.step-range.avg {
  display: flex;
  align-items: center;
  padding: 0 0 1rem 1rem;
  justify-content: space-between;
}
.step-range.avg > div {
  width: calc(100% - 7rem);
}
.step-range.avg > .avg-box {
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  border: 1px solid var(--ad-color-07);
  color: var(--ad-color-07);
  background-color: var(--bg-color-ed);
  border-radius: 4px;
  text-align: center;
}

.step-range.avg .noUi-horizontal {
  height: 6px;
}
.step-range.avg .noUi-horizontal .noUi-handle {
  width: 1.5rem;
  height: 1.5rem;
  top: -0.5rem;
}

.step-range.avg .noUi-tooltip {
  background-color: var(--bg-color-ed);
  color: var(--ad-color-07);
  border-radius: 4px;
  border: 0;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0;
  width: 4rem;
}

.step-range.avg .noUi-horizontal .noUi-tooltip {
  bottom: -220%;
}

.step-range.avg .noUi-pips-horizontal {
  padding: 0;
  height: 4rem;
}
.step-range.avg .noUi-marker-horizontal.noUi-marker-large {
  display: none;
}
.step-range.avg .noUi-value-sub {
  display: none;
}
.step-range.avg .noUi-marker-horizontal.noUi-marker-sub {
  display: none;
}

#focus-avg .inner-label {
  margin-bottom: 0;
}

.image-upload-wrap {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px dotted var(--bg-color-a4);
}
.image-upload-wrap input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
}

.uploaded-image-list {
  border: 0px solid #a8a8a8;
  margin: 2% 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.uploaded-image-list .image-item {
  flex: 0 0 31%;
  margin: 1%;
  border: 1px solid var(--bg-color-d1);
  text-align: center;
  padding: 5px;
}
.uploaded-image-list .image-item .check-container {
  border: 0;
}
.uploaded-image-list img {
  max-width: 100%;
  margin-bottom: 10px;
  max-height: 100%;
  object-fit: fill;
  height: 80px;
  display: inline-block;
}
.uploaded-image-list a {
  display: block;
  font-size: 1.3rem;
  min-width: auto;
}

.d_picture {
  position: relative;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 20px;
}
.d_picture img {
  max-width: 150px;
  height: 90px;
  border-radius: 5px;
}
.d_picture ul li {
  display: inline-block;
  font-size: 14px;
  margin-right: 1%;
}

.file-inner {
  position: relative;
  overflow: hidden;
}

.file-inner .input {
  width: 100%;
  float: left;
  width: calc(100% - 120px);
}
.file-inner .btn-file {
  float: left;
  background: #636363;
  font-size: 13px;
  height: 4rem;
  line-height: 4rem;
  color: #fff;
  margin-left: 10px;
  max-width: 80px;
  padding: 0;
  min-width: 8rem;
}

/**********
* #### REVIEW VIEW
**********/
.page-review .product-title-wrap {
  margin-bottom: 3rem;
}
.review-info-top {
  position: relative;
}
.bg-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.bg-dim div {
  position: absolute;
  top: 10%;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  width: 80%;
  height: 80%;
  font-size: 2.4rem;
  border: 1px solid var(--bg-color-d1);
  background-color: #fff;
}
.bg-dim p {
  font-size: 2.4rem;
  text-align: center;
}
.bg-dim p .text-color {
  color: var(--ad-color-07);
}
.review-num-wrap {
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--bg-color-d1);
  border-top: 1px solid var(--bg-color-d1);
  padding: 1.5rem 0;
  margin-bottom: 6rem;
}
.review-num-wrap .review-total {
  flex-shrink: 0;
  width: 32%;
  margin-right: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.review-num-wrap .review-total .star em {
  font-size: 2.4rem;
}
.review-num-wrap .review-total::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background-color: var(--bg-color-d1);
}
.review-num-wrap .review-progress-wrap {
  flex-grow: 1;
}
.review-num-wrap .section-title {
  font-size: 1.5rem;
  color: var(--bg-color-3f);
  margin-bottom: 1rem;
  font-weight: 400;
}

.recom-wrap {
  position: relative;
}
.recom-wrap .section-title {
  font-weight: 400;
}
.recom-box {
  border: 1px solid var(--bg-color-d1);
  border-radius: 4px;
  padding: 1.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recom-box .label {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
  line-height: 1;
}
.recom-box .progress-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.etc-info-wrap {
  margin-top: 4rem;
}
.etc-info-wrap ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.etc-info-wrap ul li {
  flex: 0 0 32%;
}
.etc-info-wrap ul li a {
  display: block;
  width: 100%;
  min-width: auto;
  padding: 0;
  height: 4rem;
  line-height: 4rem;
}

.bar-container {
  background-color: var(--bg-color-ed);
  position: relative;
  width: 4rem;
  height: 8rem;
  border-radius: 4px;
  margin: 0.85rem 0;
}
.bar {
  background-color: var(--ad-color-07);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  animation: grow 1.5s ease-out forwards;
  transform-origin: bottom;
  border-radius: 4px;
}
@keyframes grow {
  from {
    transform: scaleY(0);
  }
}

.review-rel-list {
  margin-top: 4rem;
}
.review-rel-list .grid-item {
  border-color: var(--bg-color-d1);
  padding-bottom: 2rem;
}
.review-rel-list .grid-item + .grid-item {
  border-left: 0;
}
.review-rel-list .product-title-wrap {
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}
.review-rel-list .product-title-wrap .badge {
  font-size: 1.3rem;
}
.review-rel-list .product-title-wrap .title {
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--bg-color-3f);
}

.review-user-list {
  margin-top: 4rem;
}
.review-user-list .section-header{margin-bottom: 0; display: flex; align-items: center; margin-bottom: 1rem;}
.review-user-list .section-header .section-title{margin-bottom: 0;}
.review-user-list .section-header .btn-link{margin-left: auto;}
.select-box.full {
  width: 100%;
}
.select-box.full .btn-select {
  background-position: 95% 50%;
}

.review-user-list .media .time {
  text-align: right;
  display: block;
  margin-bottom: 0;
}

.box-list {
  margin-top: 2rem;
}
.box-list .box-item {
  margin-bottom: 3rem;
  border: 1px solid var(--bg-color-d1);
}
.box-list .box-item .box-review-container {
  padding: 1.5rem;
}
.box-list .box-item .box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}
.box-list .box-item .box-header .date {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
}
.box-list .box-item .box-header .box-header-etc {
  display: inline-block;
}
.box-list .box-item .box-header .box-header-etc a {
  position: relative;
}
.box-list .box-item .box-header .box-header-etc a + a {
  padding-left: 0.75rem;
  margin-left: 0.25rem;
}
.box-list .box-item .box-header .box-header-etc a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  height: 12px;
  width: 1px;
  background-color: var(--bg-color-a4);
}
.box-list .box-item .box-avg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--bg-color-d1);
  height: 5rem;
  margin-bottom: 1.5rem;
}
.box-list .box-item .box-avg .recom {
  background-color: #e64322;
  color: #fff;
  flex-shrink: 0;
  width: 24.15%;
  height: 100%;
  line-height: 5rem;
  text-align: center;
}
.box-list .box-item .box-avg .recom.recom-2 {
  background-color: #ff9e0d;
}
.box-list .box-item .box-avg .recom.recom-3 {
  background-color: #00add9;
}
.box-list .box-item .box-avg .recom.recom-4 {
  background-color: #a4a4a4;
}
.box-list .box-item .box-avg ul {
  display: flex;
  flex-grow: 1;
  position: relative;
}
.box-list .box-item .box-avg ul.full {
  height: 100%;
}
.box-list .box-item .box-avg ul .bg-dim p {
  font-size: 1.3rem;
  line-height: 1.2;
}
.box-list .box-item .box-avg ul li {
  flex: 1;
  font-size: 1.3rem;
  text-align: center;
}
.box-list .box-item .box-avg ul li .avg {
  color: var(--ad-color-07);
  margin-bottom: 0.5rem;
  display: block;
  font-weight: 600;
}
.box-list .box-item .box-avg ul li .text {
  color: var(--bg-color-3f);
  display: block;
  line-height: 1;
}
.box-list .box-item .box-info {
  background-color: var(--bg-color-f9);
  border: 1px solid var(--bg-color-d1);
  padding: 1rem;
  font-size: 1.3rem;
  position: relative;
  margin-bottom: 2rem;
}
.box-old {
  font-size: 1.3rem;
  padding: 0.5rem 1rem;
  line-height: 1;
  background-color: var(--bg-color-f0);
  border-radius: 4px;
  margin-bottom: 1rem;
}
/* .box-list .box-item .box-info.shaft-info{margin-top: 0.5rem;}
.box-list .box-item .box-info.shaft-info ul li{display: block; }
.box-list .box-item .box-info.shaft-info ul li em{color: var(--ad-color-07);} */
.box-list .box-item .box-info .btn-icon-wrap {
  position: absolute;
  right: 1.5rem;
  top: 1.3rem;
}
.box-list .box-item .box-info .btn-icon-wrap .text {
  color: var(--bg-color-3f);
}
.box-list .box-item .box-info .dot + .dot {
  margin-left: 1rem;
}
.box-list .box-item .box-info.open .ico-angle-down-b {
  transform: rotate(180deg);
}
.box-list .box-item .box-info ul li {
  display: none;
}
.box-list .box-item .box-info ul li:first-child {
  display: block;
}
.box-list .box-item .box-info.open ul li {
  display: block;
}
.box-list .box-item .box-content .view-content {
  /* -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; */
  font-size: 15px;
}
.file-list {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.file-list div {
  margin-top: 0.5rem;
  flex: 0 0 25%;
  width: 5rem;
  height: 7rem;
  overflow: hidden;
}
.file-list div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .box-list .box-item .box-content.open .view-content{display: block; } */
.box-list .box-item .btn-wrap {
  text-align: right;
  margin-top: 5px;
}
.box-list .box-item .btn-wrap button {
  color: var(--bg-color-a4);
  font-size: 1.3rem;
}
.btn-wrap .rotate .icon {
  transform: rotateX(180deg);
}
.box-list .box-item .box-footer {
  border-top: 1px solid var(--bg-color-d1);
  padding-top: 1rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-list .box-item .box-footer a {
  display: flex;
  align-items: center;
}
.box-list .box-item .box-footer a .icon {
  margin-right: 0.5rem;
}
.box-list .box-item .box-footer a .count {
  margin-left: 0.5rem;
}
.box-list .box-item .box-footer a.btn-like.like-on {
  color: var(--ad-color-07);
}
.box-list .box-item .box-footer a.btn-like.like-on .ico-like {
  background-image: url("../images/icons/ico-like-on.png");
}

.box-list .box-item .comment-list-wrap .media-content {
  margin-top: 1.5rem;
}
/* .box-list .box-item .comment-list-wrap .media-content .btn-wrap{text-align: right;} */

.grid-item .star {
  width: auto;
  display: inline-flex;
}

.review-user-list .comment-list-wrap {
  border-top: 1px solid var(--bg-color-f0);
}
.review-user-list .comment-list-wrap .media {
  padding: 1.5rem;
}
.review-user-list .comment-list-wrap .media.cmt-dpeth1 {
  background-color: var(--bg-color-f9);
}

.page-review .alert-comment-message {
  position: fixed;
  bottom: 6rem;
  z-index: 10;
  left: 1.5rem;
  right: 1.5rem;
}

.spec-container.review-container {
  margin-bottom: 6rem;
}

.box-list .box-item .comment-list-wrap .box-info {
  border-color: #f0f0f0;
  background-color: var(--bg-color-f0);
}

.btn-admin-wrap .check-box label {
  margin-left: 2.5rem;
}

.layer-image .pop-footer {
  padding: 1rem;
}
.image-swiper .swiper-slide img {
  display: block;
  margin: 0 auto;
}
.image-swiper img {
  max-height: 80vh;
}

.layer-user-data .pop-content {
  padding: 2rem;
}
.user-data-list {
  position: relative;
}
.user-data-list h4 {
  font-size: 1.8rem;
}
.user-data-list + .user-data-list {
  margin-top: 3rem;
}
.layer-user-data .user-data-list .review-progress-wrap .progress-wrap .label {
  width: 33%;
}

/**********
* ## RANKING
**********/
.sub-top-visual.ranking .sub-top-wrap {
  align-items: flex-start;
}
.sub-top-visual.ranking .section-header {
  margin-bottom: 0;
  color: #fff;
}
.sub-top-visual.ranking .section-header .section-header-desc {
  color: #fff;
}

.ranking-top {
  display: block;
  margin-bottom: 3rem;
}
.ranking-top .icon-text-wrap {
  margin-top: 1rem;
}
.select-item-type {
  display: block;
}
.select-item-type.hide {
  display: none;
}

/**********
* ## SCORE
**********/
.sub-top-visual.score .sub-top-wrap {
  align-items: flex-start;
}
.sub-top-visual.score .section-header {
  margin-bottom: 0;
  color: #fff;
}
.sub-top-visual.score .section-header .section-header-desc {
  color: #fff;
}

.page-score .section-page {
  padding-top: 0;
}
.score-list .score-item-wrap + .score-item-wrap {
  margin-top: 3rem;
}
.score-list .banner {
  margin: 3rem 0;
}

/**********
* ## Contact
**********/
.contact-form {
  position: relative;
}
.contact-form .form-group {
  margin-bottom: 3rem;
}
.contact-form .radio-box-wrap {
  margin-right: 1rem;
}
.contact-form .input {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom-color: #000;
}
.contact-form textarea.input {
  border: 1px solid #d0d0d0;
  min-height: 20rem;
}
.contact-form .input.border {
  border: 1px solid #d0d0d0;
  background-color: #f5f5f5;
  width: 10rem;
  padding-left: 1rem;
}
.contact-form .select-box {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom-color: #000;
  border-radius: 0;
}
.contact-form .select-box.half {
  width: 100%;
}
.contact-form .input.half {
  width: 100%;
}
.contact-form .select-box .select-list a {
  line-height: 1;
  padding: 8px 5px;
}

.contact-form .btn {
  padding: 8.298px 10px;
}

.contact-errors {
  position: absolute;
  right: -280px;
  top: 0;
  font-size: 12px;
}
.contact-errors .alert {
  padding: 10px;
  margin-bottom: 5px;
}

.check-container {
  border: 1px solid #d0d0d0;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.check-container .check-box {
  display: block;
}
.check-container .check-box.icon label::before {
  top: 4px;
}
.check-container .check-box.icon label::after {
  top: 4px;
}
.check-container .check-box.icon input[type="checkbox"]:checked + label::after {
  top: 4px;
}

.check-container strong {
  color: var(--ad-color-07);
  display: inline-block;
}
.check-container .check-box .text {
  color: #666;
  margin-left: 2.5rem;
  font-size: 1.3rem;
  display: block;
}
.check-container .more {
  display: inline-block;
  line-height: 1;
}
.check-container .more a {
  color: #000;
  font-size: 13px;
  text-decoration: underline;
}

.btn-submit {
  background-color: var(--key-color);
  color: #fff;
  display: inline-block;
  padding: 1.5rem 4rem;
  border-radius: 4px;
}

.row-cert {
  display: none;
}
.error-cert-check {
  display: inline-block;
}

.contact-box {
  position: relative;
}
.contact-box + .contact-box {
  margin-top: 6rem;
}
.contact-top {
  display: flex;
  margin-bottom: 3rem;
  align-items: center;
}
.contact-top .contact-title {
  font-size: 1.8rem;
  font-weight: 600;
}
.contact-top .label-req {
  margin-left: 1.5rem;
  color: #000;
  padding-right: 0;
}
.contact-top .label-req .ico-check {
  margin-right: 5px;
}

/**********
* ## Form
**********/
.form-table {
  table-layout: fixed;
}
.form-table th,
.form-table td {
  padding: 1rem 0;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.form-table th {
  width: 20%;
  font-weight: 500;
  text-align: left;
  padding-left: 1rem;
  line-height: 1;
  background-color: #f0f0f0;
  color: #111;
}
.form-table th label {
  vertical-align: middle;
}
.form-table td {
  width: 80%;
  padding-left: 2rem;
}

.form-table th em {
  font-size: 14px;
  margin-left: 11px;
}
.form-table th.req {
  position: relative;
}
.form-table th.req::after {
  content: "*";
  padding-left: 5px;
  color: #fe0000;
}

.form-table .select-box {
  display: inline-block;
  vertical-align: middle;
}
.form-table .select-box + a {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  min-width: auto;
}

/* .bg_gray .form-table .dx-input, .bg_gray .form-table .select-box .btn-select {background-color: #f8f8f8; } */

.phone-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.phone-input + a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
.phone-input .select-box {
  width: 30%;
}
.phone-input .unit {
  width: 5%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #666;
  display: inline-block;
}
.phone-input .input {
  width: 30%;
}
.phone-input .btn {
  min-width: auto;
  width: 100%;
}
.phone-input .btn-inner {
  margin-left: 0;
  margin-top: 1rem;
  display: block;
  width: 100%;
}

.form-table .name-input {
  position: relative;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.button-input {
  position: relative;
  display: flex;
  align-items: center;
}
.button-input .input {
  flex-grow: 1;
}
.button-input .btn-inner {
  flex-shrink: 0;
}

.form-table .product-input {
  display: flex;
  width: 60%;
}
.form-table .product-input .dx-input {
  width: 70%;
}
.form-table .product-input .select-box {
  margin-left: 1%;
}

.email-input {
  position: relative;
}
.email-input .input {
  width: 45%;
}
.email-input .unit {
  width: 6%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #666;
  display: inline-block;
}
.email-input .select-box {
  position: relative;
  width: 100%;
  margin-top: 1rem;
}

.address-input .addr-line {
  margin-bottom: 1rem;
}

.form-table .num-input {
  position: relative;
  width: 50%;
  display: inline-block;
  vertical-align: middle;
}
.form-table .num-input .dx-input {
  width: 35%;
}
.form-table .num-input a {
  display: inline-block;
  margin-left: 10px;
}
.form-table .num-input .time {
  font-size: 14px;
  font-weight: 500;
  color: #fe0000;
  margin-left: 10px;
  display: inline-block;
}

.form-table .time-input {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-table .time-input .select-box {
  float: left;
  width: 20%;
}
.form-table .time-input .unit {
  float: left;
  width: 4%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.form-table .marker-input {
  position: relative;
  width: 58%;
  display: inline-block;
  vertical-align: middle;
}
.form-table .marker-input .dx-input {
  width: 76%;
}
.form-table .marker-input a {
  display: inline-block;
  margin-left: 10px;
}
.dx-input.search {
  background: url("../images/icons/search.png") no-repeat center right;
  background-size: 15px auto;
}

.contact-form .form-group.lg {
  margin-top: 20px;
}

.form-btn {
  display: flex;
}
.form-btn .btn {
  line-height: 1;
  font-size: 16px;
  min-width: 160px;
  padding: 15px 20px 17px;
}
.form-btn a.btn {
  padding: 17px 20px 15px;
}
.form-btn .btn + .btn {
  margin-left: 10px;
}
.form-btn .sp-submit {
  flex: 1;
}
.form-btn .sp-submit + .sp-submit {
  margin-left: 1rem;
}
.btn-line {
  border: 1px solid #333;
  width: auto;
  min-width: auto;
  font-size: 13px;
}
.btn-line:hover {
  color: #ccc;
}

/* .form-table td .error-place{bottom: 5px;} */

.form-table .help-desc {
  margin-top: 10px;
}
.form-table-footer {
  margin-top: 1rem;
}
.form-table-footer .check-box a {
  text-decoration: underline;
  color: #0e9bf5;
}
/* .form-table-footer .check-box label::before, .form-table-footer .check-box label::after{top: 1px;} */
/* .form-table-footer .check-box input[type="checkbox"]:checked + label::after{top: 4px;} */

.bs-number-input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bs-number-input .bno1 {
  width: 30%;
}
.bs-number-input .bno2 {
  width: 20%;
}
.bs-number-input .bno3 {
  width: 50%;
}

.bs-number-container {
  display: flex;
}
.bs-number-container input.n1 {
  width: 29%;
  margin-right: 1%;
}
.bs-number-container input.n2 {
  width: 24%;
  margin-right: 1%;
}
.bs-number-container input.n3 {
  width: 45%;
}

/**********
* ## SUPPORT
**********/
.page-support .bbs-tab-wrap {
  margin-top: 0;
}

/**********
* ####  QNA
**********/
.info-box {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #f0f0f0;
  margin-bottom: 3rem;
}
.info-icon {
  width: 75px;
  margin-right: 1rem;
  flex-shrink: 1;
}
.info-icon img {
  max-width: 75px;
}
.info-text {
  flex-grow: 0;
  color: #000;
}
.info-text .info-title {
  font-size: 1.8rem;
  font-weight: 600;
}

/* NOTICE */
.check-border {
  position: relative;
  display: inline-block;
  line-height: 1.25;
  font-size: 15px;
}
.check-border input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.check-border label {
  display: inline;
  cursor: pointer;
  text-align: center;
  line-height: 1em;
  font-weight: normal;
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid transparent;
  color: #233b4d;
}
.check-border input[type="checkbox"]:checked + label {
  color: #ecb10d;
  border-radius: 15px;
  border: 1px solid #ecb10d;
  font-weight: 500;
}

.list-empty {
  height: calc(100vh - 100px);
  background: #f2f2f2;
  text-align: center;
}
.list-empty:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.list-empty .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  color: #b8bfc4;
}

/**********
* ## Terms
**********/
.privacy-wrap {
  color: #666;
  line-height: 1.6em;
  display: block;
  clear: both;
  min-height: 600px;
  font-size: 15px;
}
.privacy-wrap .privacy-box + .privacy-box {
  margin-top: 4rem;
}
.privacy-wrap .privacy-box:last-child {
  padding-bottom: 0;
}
.privacy-wrap .privacy-box.summary {
  padding: 1.5rem;
  background: #f8f8f8;
  margin-bottom: 20px;
}
.privacy-wrap .privacy-box.summary p {
  color: #333;
}
.privacy-wrap .privacy-box.summary span.desc {
  font-size: 13px;
  color: #999;
}
.privacy-wrap .privacy-box.summary p + p {
  margin-top: 20px;
}
.privacy-box h4 {
  margin: 15px 0 5px;
  color: #000;
  font-weight: 500;
}
.terms .privacy-box h4 {
  margin-top: 60px;
}
.terms .privacy-box h4:first-child {
  margin-top: 0;
}

.privacy-box.summary .list-style-box,
.privacy-box.summary .list-style {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.privacy-box.summary .list-style li {
  padding: 2px 0;
}

.privacy-wrap .privacy-box .privacy-title {
  font-weight: 700;
  color: #333;
  font-size: 18px;
}
.privacy-wrap .privacy-box p + p,
.privacy-wrap .privacy-box div + p,
.privacy-wrap .privacy-box p + div,
.privacy-wrap .privacy-box div + div {
  margin-top: 10px;
}
.privacy-wrap .privacy-listbox {
  padding: 20px;
  border: 1px solid #d5d5d5;
}
.privacy-wrap .privacy-listbox p {
  line-height: 1.4em;
}
.privacy-wrap .privacy-listbox p + p,
.privacy-wrap .list-style ul li ul {
  margin-left: 1.5rem;
}
.list-style-box .list-style {
  position: relative;
  font-size: 15px;
  color: #666;
  line-height: 1.4em;
}

/**********
* ## FAQ
**********/
.faq-wrap {
  margin: 0 auto;
}
.faq-wrap ul.faq li.faq-item {
  border-bottom: 1px solid #d0d0d0;
  overflow: hidden;
}
.faq-wrap ul.faq li.faq-item a.faq-title {
  padding: 1rem 0 1rem 1rem;
  display: block;
  position: relative;
  overflow: hidden;
}
.faq-wrap ul.faq li.faq-item a.faq-title:hover {
  background-color: #f0f5fe;
}
.faq-wrap ul.faq li.faq-item a.faq-title.active:hover {
  background-color: #fff;
}
.faq-wrap ul.faq li.faq-item a.faq-title span {
  vertical-align: middle;
  display: inline-block;
}
.faq-wrap ul.faq li.faq-item a.faq-title span.faq-label {
  float: left;
}
.faq-wrap ul.faq li.faq-item a.faq-title span.subject {
  width: 90%;
  float: left;
}
.faq-wrap ul.faq li.faq-item a.faq-title span.arrow {
  text-indent: -9999px;
  background: url("../images/icons/ico-menu-plus.png") center no-repeat;
  width: 13px;
  height: 13px;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 1rem;
  opacity: 0.5;
}
.faq-wrap ul.faq li.faq-item a.faq-title.active span.arrow {
  background-image: url("../images/icons/ico-menu-minus.png");
}
.faq-wrap ul.faq li.faq-item .answer {
  display: none;
  background-color: #f0f0f0;
  padding: 1.2rem 1rem 2rem 1rem;
  overflow: hidden;
}
/* .faq-wrap ul.faq li.faq-item .answer .label-a {float: left;} */
.faq-wrap ul.faq li.faq-item .answer .answer-content {
  width: 90%;
  font-size: 1.3rem;
}
.faq-wrap ul.faq li.faq-item .faq-label {
  display: inline-block;
  color: #000;
  margin-right: 0.5rem;
  font-weight: 700;
  width: 18px;
  text-align: center;
  font-family: "Play", sans-serif;
}
.faq-wrap .btn-wrap {
  margin-top: 20px;
  text-align: center;
}

/**********
* ## MYPAGE
**********/
.mypage-container {
  position: relative;
}
.mypage-container + .mypage-container {
  margin-top: 6rem;
}
.mypage-list {
  position: relative;
  border-top: 2px solid var(--bg-color-a4);
}
.mypage-list li {
  border-bottom: 1px solid #e5e5e5;
}
.mypage-list li:hover {
  background-color: #f0f5fe;
}
.mypage-list li a {
  display: block;
  padding: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mypage-header {
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
}
.mypage-header h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.mypage-header p {
  background-color: var(--bg-color-ed);
  padding: 1rem;
}

.user-icon-wrap {
  display: flex;
  align-items: center;
}
.user-icon-wrap .ico-user {
  width: 5rem;
  height: 5rem;
}
.user-icon-wrap .user-name {
  margin-left: 1rem;
  display: inline-block;
}
.user-icon-wrap .user-name .date {
  color: #777;
  font-size: 1.3rem;
}

.box-info {
  background-color: var(--bg-color-ed);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.mypage-content .row-item {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
}
.mypage-content .row-item .item {
  flex: 1;
  width: 100%;
  margin-top: 1rem;
  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.12);
}
.mypage-content .row-item .item h4 {
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 5px;
}
.mypage-content .row-item .item p {
  margin-bottom: 1rem;
  color: #777;
}
.mypage-content .row-item .item a {
  display: block;
  padding: 1.5rem;
  transition: background ease 0.3s;
  background: var(--bg-color-f5) url("../images/icons/ico-arrow-next.png")
    no-repeat 95% 25%;
  background-size: 22px;
}
.mypage-content .row-item .item:hover a {
  background-color: var(--bg-color-ed);
}

.mypage-container .section-title {
  font-size: 1.8rem;
}

.service-list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-list li {
  border: 1px solid var(--bg-color-d1);
  border-radius: 4px;
  flex: 0 0 49%;
}
.service-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1rem;
}
.service-list li a .ico-circle {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  background-color: var(--bg-color-ed);
  border-radius: 50%;
}

.time-wrap {
  display: flex;
  align-items: center;
}
.time-wrap .icon {
  margin-right: 0.8rem;
}
/* .ico-time{width: 15px; height: 15px; background-color: #eee; border-radius: 50%;} */
.time-wrap .text {
  font-size: 1.3rem;
  color: var(--bg-color-a4);
}

.mypage-content {
  position: relative;
}
.mypage-content .contact-form {
  width: 100%;
  max-width: 100%;
}
.mypage-content .form-btn {
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
}

.qna-list li {
  border: 1px solid #d0d0d0;
  background-color: #f5f5f5;
  padding: 1rem;
}
.qna-list li .title {
  font-size: 0.9rem;
  color: #000;
  font-weight: 600;
  margin-bottom: 10px;
}
.qna-list li p {
  color: #000;
}

/* .product-input{position: relative; overflow: hidden;}
.product-input .input-wrap{width: 80%; float: left; overflow: hidden;}
.product-input .dx-input{width: 40%; border: 1px solid #ccc; height: 35px; padding: 0 5px; float: left;}
.product-input .dx-input:first-child{width: 58%; margin-right: 2%;}
.product-input button{width: 18%; margin-left: 2%; min-width: auto; float: left;} */

.file-input {
  position: relative;
  display: flex;
  align-items: center;
}
.file-input input[type="file"] {
  display: none;
}
.file-input .input {
  float: left;
  width: calc(100% - 8rem);
  flex-grow: 1;
}
.file-input button {
  width: 8rem;
  margin-left: 1.5rem;
  flex-shrink: 0;
  min-width: 8rem;
  padding: 0;
  line-height: 4rem;
  height: 4rem;
}

.input-inner {
  margin-bottom: 10px;
}

#resultFile {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0 -10px 20px -10px;
}
.file-item {
  flex: 0 0 25%;
  padding: 10px;
  position: relative;
}
.file-item .file-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 140px;
  height: 140px;
  display: inline-block;
}
.file-item .icon-ga-main {
  position: absolute;
  top: 10px;
  max-width: 140px;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: #fff;
  line-height: 30px;
  text-align: center;
}
.file-item p {
  text-align: center;
}

.btn-tabs {
  margin-bottom: 30px;
  text-align: center;
}
.btn-tabs a + a {
  margin-left: 10px;
}
.btn-tabs a.active {
  background-color: #2c353c;
  color: #fff;
  border-color: #2c353c;
}

.phone-mode {
  display: none;
}
.reset-cert {
  margin-top: 1rem;
}
.reset-cert i::after {
  content: "\f2f1";
}

.mypage-container .step-form {
  margin-top: 3rem;
}

/**********
* ## BOARD
**********/
.bbs-wrap {
  margin: 0 auto;
  min-height: 600px;
}

.bbs-top {
  position: relative;
  padding: 0.5rem 0;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
}
.bbs-top .top-left {
  color: #333;
}
.bbs-top .top-right {
  margin-left: auto;
}
/* .bbs-top .top-right a{ line-height: 1;} */
.bbs-top .top-right a + a {
  margin-left: 5px;
  border-left: 1px solid #ddd;
  padding-left: 8px;
}
.bbs-top .top-right ul.search-wrap > li {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.search-status {
  margin-top: 3px;
}
.status-label {
  color: #000;
  margin-right: 10px;
  display: inline-block;
  font-weight: 500;
}
.search-status label {
  margin: 0 5px;
}

.bbs-top .top-right ul.search-wrap > li + li::before {
  content: "";
  width: 1px;
  height: 20px;
  background: #ccc;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: -1px;
}
.bbs-top .top-right ul.search-wrap > li input[type="text"] {
  border: 0;
  padding: 10px;
  width: 170px;
  color: #333;
}
.bbs-top .top-right ul.search-wrap > li .btn-search {
  width: 20px;
  height: 20px;
  background: url("../images/icons/ico-search-b.png") no-repeat center center;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 0;
  background-size: 15px auto;
}
.bbs-top .top-right ul.search-wrap .select-box {
  width: 85px;
  border: 0;
}
.bbs-top .top-right ul.search-wrap .select-box .btn-select {
  padding-right: 30px;
  height: 33px;
  line-height: 33px;
  color: #000;
}
.bbs-top .top-right ul.search-wrap .all-view {
  margin-right: 10px;
}
.bbs-top .top-right .btn-write {
  margin-left: 20px;
}

.search-order {
  text-align: right;
  margin-bottom: 20px;
  line-height: 1;
}
.search-order .select-box {
  width: auto;
  display: inline-block;
}
.search-order .select-box .btn-select {
  height: 33px;
  line-height: 33px;
  font-size: 14px;
  color: #000;
}
.search-order .select-box .select-list li a {
  font-size: 14px;
}

.search-category {
  padding: 20px 0 30px;
  margin-bottom: 30px;
  text-align: center;
  border: 1px solid #d5d5d5;
}
.search-category .select-box {
  display: inline-block;
  width: 200px;
  vertical-align: middle;
}
.search-category .select-box + .select-box {
  margin-left: 15px;
}

.bbs-tab-wrap {
  position: relative;
  margin: 1.5rem 0 2.5rem;
}
.bbs-tab {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bbs-tab li {
  position: relative;
  flex: 1;
  padding: 0 0.5rem;
}
.bbs-tab li:last-child {
  margin-right: 0;
}
.bbs-tab li a {
  display: inline-block; /* -webkit-transition: color 0.3s;transition: color 0.3s; */
  text-align: center;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #666;
  height: 40px;
  width: 100%;
  line-height: 40px;
  background-color: #f5f5f5;
  font-size: 1.3rem;
}
.bbs-tab li a.active {
  font-weight: 500;
  border-color: #000;
  background-color: #000;
  color: #fff;
}
.bbs-tab li a:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.bbs-table {
  min-height: 300px;
}
.bbs-wrap .bbs-table {
  min-height: auto;
}
.bbs-table .line {
  display: block;
  width: 100%;
  height: 1px;
  background: #ececec;
  margin: 20px auto;
}
.bbs-table .tit {
  color: #666;
}
.bbs-table table {
  table-layout: fixed;
}
.bbs-table table thead th {
  position: relative;
  font-weight: 500;
}
.bbs-table table tbody td.ft-s {
  font-size: 13px;
  color: #333;
}
.bbs-table table thead td span.icon {
  font-size: 9px;
  opacity: 0.5;
  margin-left: 5px;
  vertical-align: middle;
  padding-bottom: 3px;
}
.bbs-table table tbody tr:hover {
  background-color: #f9f9f9;
}
.bbs-table table tbody td {
  position: relative;
}
.bbs-table table tbody td.date {
  color: #999;
}
.bbs-table table tbody td .state {
  color: #f42534;
}
.bbs-table table tbody td .state.end {
  color: #999;
}
.bbs-table table thead th {
  padding: 15px 0;
  border-bottom: 1px solid #666;
  font-size: 15px;
}
.bbs-table table td.subject {
  font-weight: 500;
}
.bbs-table table td.subject .category {
  font-size: 14px;
  vertical-align: middle;
  background-color: #f0edff;
  border-radius: 5px;
  width: 40px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  font-weight: 500;
  margin-right: 5px;
}
.bbs-table table td.subject .category.key-1 {
  color: #6841ff;
}
.bbs-table table td.subject .category.key-2 {
  color: #61cdc9;
}
.bbs-table table td a {
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width: 95%;
  vertical-align: middle;
}
.bbs-table table td a:hover {
  text-decoration: underline;
}
.bbs-table table td.last-btn a.btn span {
  text-decoration: underline;
}
.bbs-table table td.last-btn span {
  font-size: 13px;
}
.bbs-table table td .bbs-col {
  font-size: 13px;
  color: #777;
  display: inline-block;
  position: relative;
  padding-right: 10px;
  margin-right: 5px;
}
.bbs-table table td .bbs-col:first-child::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 0;
  width: 1px;
  height: 10px;
  background-color: #777;
}

.bbs-table table thead td,
.bbs-table table td.ft-s,
.bbs-table .type-box {
  font-size: 18px;
  padding: 15px;
}
.bbs-table table td.subject .category {
  display: block;
  margin-bottom: 5px;
}
.bbs-table table td.subject,
.bbs-table table td.subject + td {
  display: block;
  border: 0;
  padding: 20px 10px;
}
.bbs-table table td.subject {
  padding-bottom: 0;
}
.bbs-table table td.subject + td {
  padding-top: 5px;
  border-bottom: 1px solid #d5d5d5;
}
.bbs-table table td.subject a {
  padding: 0;
}

.bbs-table table tr.noti td {
  background: #f8f8f8;
  font-weight: 500;
}
.bbs-table table tr.noti td:first-child {
  color: #f42534;
}
.bbs-table table tr.cancel td,
.bbs-table table tr.cancel td a,
.bbs-table table tr.cancel td a:hover {
  color: #999 !important;
  cursor: default;
  text-decoration: none;
}

.bbs-table table td.bd_r {
  border-right: 1px solid #ececec;
}
.bbs-table table td.bd_l {
  border-left: 1px solid #ececec;
}
.bbs-table table td.info_left {
  text-align: left;
  padding: 0 20px;
}
.bbs-table table tbody td.date {
  font-size: 13px;
  color: #666;
  letter-spacing: -0.5px;
  font-weight: normal;
}
.bbs-table .type-box {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  font-size: 12px;
  padding: 0;
}
.bbs-table .type-box.end {
  background: #666666;
  border-color: #666666;
}
.bbs-table .type-box.ing {
  background: #f42534;
  border-color: #f42534;
}

.bbs-btn {
  margin: 5rem auto 0;
  text-align: center;
}
.bbs-btn a {
  min-width: 200px;
}
.bbs-btn a span {
  font-weight: 500;
  color: #333;
}
.bbs-btn a span.total {
  opacity: 0.6;
}
.bbs-btn .btn-line {
  border: 1px solid #a7a8a9;
  height: 50px;
  line-height: 47px;
  color: #333;
  display: inline-block;
  text-align: center;
  font-size: 1.5rem;
}
.bbs-btn .btn-line + .btn-line {
  margin-left: 10px;
}
.bbs-btn .btn-line.btn-success span {
  color: #fff;
}
.bbs-btn .btn-line.btn-primary span {
  color: #fff;
}

.bbs-list-search {
  font-size: 14px;
}
.bbs-list-search .search-wrap li .select-box {
  width: 90px;
}
.bbs-list-search .search-wrap li .btn-search {
  right: -10px;
}
.bbs-list-search .search-wrap {
  max-width: 320px;
  margin: 0 auto;
}
.bbs-list-search .search-wrap li input[type="text"] {
  max-width: 150px;
}

.bbs-list-footer {
  overflow: hidden;
  margin-top: 2rem;
}
.bbs-list-footer .btn {
  padding: 0;
  height: 45px;
  line-height: 43px;
}

.empty-wrap {
  padding: 100px 0 66px;
  margin: 0 auto;
  text-align: center;
}
.empty-wrap .icon {
  margin-bottom: 10px;
}
.empty-wrap p {
  color: #666;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.empty-wrap p span {
  color: #666;
}

.empty-wrap .btn-wrap {
  text-align: center;
}
.empty-wrap .btn-wrap a {
  min-width: 100px;
}
.empty-wrap .btn-wrap a + a {
  margin-left: 4px;
}

.empty-post {
  padding: 50px 0 !important;
  text-align: center;
}

.bbs-new {
  display: inline-block;
  background: #fe0000;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  font-weight: 700;
  margin-left: 3px;
  vertical-align: middle;
  position: relative;
  top: -5px;
}
.bbs-new + a {
  vertical-align: middle;
}

.bbs-icon {
  display: inline-block;
  background: #f2f2f2;
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 13px;
  text-align: center;
  vertical-align: text-bottom;
  margin-left: 3px;
}
.bbs-icon.download {
  background-image: url("../images/icons/ico_file.png");
  width: 16px;
  height: 16px;
}

.bbs-gallery {
  padding-top: 2rem;
}
.bbs-gallery .grid-item {
  margin-left: 0;
  margin-bottom: 1.3rem;
}
.bbs-gallery .grid-item .grid-image-wrap::before {
  padding-bottom: 61%;
}
/* .bbs-gallery .grid-item .grid-image-wrap .grid-image img{width: 100%; min-height: 100%; top: 0; left: 0;} */

.bbs-gallery.type-thumb .grid-list {
  flex-direction: column;
  flex-wrap: nowrap;
}
.bbs-gallery.type-thumb .grid-item {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all ease 0.3s;
}
.bbs-gallery.type-thumb .grid-item:last-child {
  margin-bottom: 0;
}
.bbs-gallery.type-thumb .grid-item a {
  display: flex;
}
.bbs-gallery.type-thumb .grid-item .grid-image {
  width: 9rem;
  height: 9rem;
  margin-right: 1rem;
  flex-shrink: 0;
  background-color: #d1d1d1;
}
.bbs-gallery.type-thumb .grid-item .grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bbs-gallery.type-thumb .grid-item .grid-content {
  flex-grow: 1;
  width: calc(100% - 10rem);
  padding: 0;
}
.bbs-gallery.type-thumb .grid-item .grid-content .grid-category {
  margin-bottom: 0.8rem;
}
.bbs-gallery.type-thumb .grid-item .grid-content .grid-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.bbs-gallery.type-thumb .grid-item .grid-content .grid-desc {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
  line-height: 1.2;
  margin-top: 0.8rem;
}
.bbs-gallery.type-thumb .grid-item .grid-content .grid-date {
  font-size: 1.3rem;
  color: var(--bg-color-3f);
  line-height: 1.2;
  margin-top: 0.8rem;
}

.bbs-badge .badge + .badge {
  margin-left: 1rem;
}
[class*="badge-board-"] {
  font-size: 1.3rem;
  padding: 0 1rem;
  border-radius: 3px;
  background-color: var(--bg-color-f5);
  color: var(--theme-color);
  border: 1px solid var(--bg-color-d1);
}
.badge-board-talk {
  background-color: #f7f0fc;
  border: 1px solid #940afd;
  color: #940afd;
}
.badge-board-wiki {
  background-color: #f0f1fc;
  border: 1px solid #0617cc;
  color: #0617cc;
}
.badge-board-tips {
  background-color: #fff9f1;
  border: 1px solid #ffa31a;
  color: #ffa31a;
}
.badge-board-view {
  background-color: #ecf7ff;
  border: 1px solid #008cf0;
  color: #008cf0;
}
.badge-board-short {
  background-color: #ffedf2;
  border: 1px solid #f21f54;
  color: #f21f54;
}
.badge-board-poll {
  background-color: #fff4f2;
  border: 1px solid #f5402c;
  color: #f5402c;
}
.badge-board-bestshot {
  background-color: #f5fcfb;
  border: 1px solid #08a687;
  color: #08a687;
}
.badge-board-clubstate {
  background-color: #faf2f9;
  border: 1px solid #cc06b8;
  color: #cc06b8;
}
.badge-board-only {
  background-color: #edf2fa;
  border: 1px solid #0764fa;
  color: #0764fa;
}
.badge-board-notice {
  border: 1px solid var(--bg-color-a4);
  background-color: var(--bg-color-f5);
  color: var(--bg-color-3f);
}

.bbs-gallery.event .grid-item {
  border: 0;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--bg-color-d1);
}
.bbs-gallery.event .grid-item .grid-image img {
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
}
.bbs-gallery.event .grid-item .grid-content {
  padding: 1.5rem 0 0;
  text-align: center;
}
.bbs-gallery.event .grid-item .grid-content .grid-date {
  color: var(--bg-color-3f);
  font-size: 1.3rem;
  margin-top: 0.5rem;
}

/**********
* ## Board view
**********/
.bbs_btn {
  text-align: center;
  margin: 20px auto 0;
}
table.bbs-view {
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  border-top: 2px solid #777;
}
table.bbs-view td {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
table.bbs-view td img {
  max-width: 100%;
}
table.bbs-view td.date {
  text-align: right;
}
table.bbs-view td.subject {
  text-align: left;
}
table.bbs-view td.subject .detail-header {
  padding: 0;
  font-size: 15px;
  color: #666;
  letter-spacing: -0.5px;
  position: relative;
}
table.bbs-view td.subject .detail-header .info {
  background: none;
  margin-right: 10px;
}
table.bbs-view td.subject .detail-header .info em {
  color: #333;
  padding-right: 3px;
}

table.bbs-view td.subject .detail-header .label-type {
  position: absolute;
  top: 50%;
  margin-top: -13px;
  right: 30px;
}
.label-type.end {
  background-color: #999;
}
.label-type span {
  background: #f42534;
  display: inline-block;
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  line-height: 1em;
}

table.bbs-view td.subject .detail-header .bbs-badge {
  margin-bottom: 0.5rem;
}
table.bbs-view td.subject .detail-header p.hd-cate {
  color: #333;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 15px;
}
table.bbs-view td.subject .detail-header p.hd-tit {
  color: #333;
  font-size: 2.4rem;
  padding-bottom: 1rem;
  letter-spacing: -1px;
  font-weight: 500;
  line-height: 1.3em;
}
table.bbs-view td.subject .detail-header p.hd-tit span + span {
  margin-left: 10px;
}
table.bbs-view td.subject .detail-header p .type {
  padding-right: 10px;
  margin-right: 15px;
  border-right: 1px solid #d9d9d9;
}
table.bbs-view td.subject a {
  color: #333;
}
table.bbs-view td.subject a:hover {
  color: #333;
  text-decoration: underline;
}
table.bbs-view td.subject p.date {
  display: none;
  color: #777;
  margin-top: 4px;
  clear: both;
}

table.bbs-view td.subject ul li {
  font-size: 14px;
  color: #666;
  float: left;
  padding: 10px;
}
table.bbs-view td.subject ul li:first-child {
  padding-left: 0;
}
table.bbs-view td.subject ul li.dot {
  padding: 10px 0;
}

table.bbs-view thead td {
  padding: 16px 0;
}
table.bbs-view tbody td {
  border-bottom: 0;
}
table.bbs-view tbody td.contents {
  text-align: left;
  padding: 1.5rem 0;
  color: #333;
  word-break: break-word;
  overflow: hidden;
}
table.bbs-view tbody td.contents #player {
  margin: 0 auto 30px;
  display: block;
}
table.bbs-view tbody td.contents p {
  word-break: break-word;
  line-height: 1.4;
}
#post-content {
  min-height: 20rem;
}
#post-content iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
  min-height: 280px;
}

table.bbs-view tbody td.contents img {
  max-width: 100%;
}
table.bbs-view tbody td.contents.btn-wrap {
  text-align: center;
}

table.bbs-view tbody td.contents .recommand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}
table.bbs-view tbody td.contents .recommand a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 10px;
  width: 7rem;
  height: 7rem;
  border-radius: 7rem;
  background-color: var(--bg-color-ed);
}
table.bbs-view tbody td.contents .recommand a:hover {
  background-color: var(--theme-color);
  color: #fff;
  text-decoration: none;
}
/* table.bbs-view tbody td.contents .recommand .good{background:#e9e9e9; }
table.bbs-view tbody td.contents .recommand .bad{background:#e9e9e9;} */

table.bbs-view tbody td.file-wrap {
  border-bottom: 1px solid #eee;
  padding: 2rem 1.5rem;
  text-align: left;
}
table.bbs-view tbody td.file-wrap ul {
  display: table;
  width: 100%;
  table-layout: fixed;
}
table.bbs-view tbody td.file-wrap ul li {
  width: 30px;
  display: table-cell;
  vertical-align: middle;
}
table.bbs-view tbody td.file-wrap ul li + li {
  width: 88%;
}
table.bbs-view tbody td.file-wrap p {
  color: #333;
  padding-left: 25px;
  background: url("../images/icons/ico-file.png") left center no-repeat;
  line-height: 1.4em;
  font-weight: 500;
  font-size: 17px;
  width: 20px;
  display: block;
  height: 20px;
}
table.bbs-view tbody td.file-wrap p span {
  display: none;
}
table.bbs-view tbody td.file-wrap a {
  color: #666;
  display: inline-block;
  font-weight: 500;
  word-break: break-all;
}
table.bbs-view tbody td.file-wrap a:hover {
  color: #333;
  text-decoration: underline;
}

table.bbs-view tbody td.btn-wrap {
  border-top: 1px solid #eee;
  padding: 30px;
  text-align: left;
}

table.bbs-view tbody tr:last-child td {
  border-bottom: 1px solid #ccc;
}

table.bbs-view tfoot td {
  font-size: 18px;
  color: #666;
  text-align: left;
}
table.bbs-view tfoot td a {
  color: #333;
}
table.bbs-view tfoot td a .title {
  padding: 0 10px;
  width: 60%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.bbs-view tfoot td a:hover .title {
  text-decoration: underline;
  font-weight: 500;
}
table.bbs-view tfoot td.prev {
  text-align: left;
}
table.bbs-view tfoot td.next {
  text-align: right;
}
table.bbs-view tfoot td.prev span.arrow {
  padding: 0 10px 0 32px;
  border-right: 1px solid #e5e5e5;
  background: url("../images/icons/arrow_prev.png") left center no-repeat;
}
table.bbs-view tfoot td.next span.arrow {
  padding: 0 32px 0 10px;
  border-left: 1px solid #e5e5e5;
  background: url("../images/icons/arrow_next.png") right center no-repeat;
}

.bbs-view .tag {
  text-align: left;
}
.bbs-view .tag .tag_box {
  color: #666;
}

.sns_area_title {
  font-size: 18px;
  display: block;
  margin: 0;
  height: auto;
  padding-bottom: 5px;
}
.bbs_photo .sns_area_title {
  display: none;
}

.bbs-view .tf_admin td .tf_img,
.bbs-view .tf_admin td .tf_name_wrap {
  display: inline-block;
  vertical-align: middle;
}
.bbs-view .tf_admin td .tf_name_wrap {
  background: url("../images/icons/admin.png") left center no-repeat;
  padding-left: 50px;
}
.bbs-view .tf_admin td .tf_img {
  margin-right: 10px;
}
.bbs-view .tf_admin td .tf_img img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.bbs-view .tf_admin td p {
  font-size: 14px;
  color: #333;
}

.bbs-view .tf_admin td p span + span {
  margin-left: 10px;
}
.bbs-view .tf_admin td.tf_share {
  text-align: right;
  line-height: 1em;
}
.bbs-view .tf_admin td.tf_share a + a {
  margin-left: 5px;
}

.bbs-bot {
  margin: 5rem 0 0;
}
.bbs-bot ul {
  display: flex;
  width: 100%;
  padding: 1.5rem 0;
  table-layout: fixed;
  border-top: 1px solid #ccc;
  align-items: center;
}
.bbs-bot ul + ul {
  border-bottom: 1px solid #ccc;
}
.bbs-bot ul li {
  display: table-cell;
  vertical-align: middle;
}
.bbs-bot ul li.label {
  font-weight: 500;
  font-size: 13px;
  color: #333;
  padding: 0;
  border-radius: 0;
  text-align: left;
  margin-right: 1rem;
}
.bbs-bot ul li.arrow {
  width: 70px;
  height: 1rem;
  background: url("../images/icons/ico-bbs-up.png") center no-repeat;
  opacity: 0.4;
  background-size: 15px;
}
.bbs-bot ul li.subject {
  width: 70%;
  color: #999;
}
.bbs-bot ul li.subject a {
  color: #333;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 90%;
  display: block;
}
.bbs-bot ul li.date {
  color: #666;
  font-size: 13px;
  margin-left: auto;
}
.bbs-bot ul + ul li.arrow {
  background-image: url("../images/icons/ico-bbs-down.png");
}

.post-action {
  display: flex;
  margin: 3rem 0;
}
.post-action .btn-line {
  line-height: 1;
  padding: 7px 12px;
}
.post-action .btn-line:hover {
  text-decoration: none !important;
}
.post-action .btn {
  min-width: auto;
  height: 40px;
  line-height: 38px;
  padding: 0 1rem;
}
.post-action .btn-group {
  display: flex;
}

.post-desc {
  padding: 20px;
  background-color: #f5f7fa;
  margin-bottom: 1rem;
  color: #111;
}
.list-group {
  position: relative;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.list-group-item {
  display: flex;
  border: 1px solid #e1e1e1;
  padding: 0.5rem 1.5rem;
  margin-bottom: -1px;
}
.list-group-title {
  width: 10%;
  font-weight: 500;
}

.poll-wrap {
  margin-top: 3rem;
}
.poll-line {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--bg-color-a4);
}
.poll-wrap h5 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}
.poll-wrap .check-container {
  margin-bottom: 1.5rem;
}
.poll-wrap .check-container + .check-container {
  border-top: 1px solid #d0d0d0;
}
.poll-wrap .help-block {
  margin-top: 3rem;
  display: block;
  font-size: 1.5rem;
  background-color: var(--bg-color-ed);
  padding: 1rem;
  border-radius: 4px;
  color: var(--text-body-color);
}

.poll-result {
  margin-top: 1rem;
}

.poll-wrap .progress-bar {
  background-color: var(--ad-color-07);
}

/*********
* ## Board write
**********/
.bbs-write {
  padding: 1.5rem 0;
  border-top: 2px solid #777;
}
/* .bbs-title{text-align: center; font-size: 18px;} */
.bt-label {
  display: block;
  margin-bottom: 5px;
}

.board-write {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.board-write .btn {
  width: 50%;
  height: 45px;
  line-height: 43px;
  padding: 0;
  font-size: 15px;
}

.board-table .category-input {
  width: 100%;
  position: relative;
}
.board-table .category-input .select-box {
  width: 30%;
  display: inline-block;
}
.board-table .category-input a.btn-info {
  position: absolute;
  right: 0;
  top: 0;
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
}

.board-table .category-input label.error {
  display: block;
}
.board-table textarea.dx-input {
  min-height: 250px;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f7f7f7;
  border: 1px solid #d1d1d1;
}
.well-sm {
  padding: 9px;
}
.passcord li {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
#captcha_key {
  height: 40px;
  line-height: 40px;
  max-width: 90px;
}
#captcha-reload {
  font-size: 0.65rem;
  padding: 0.3rem;
  background: #cdcdcd;
  border-radius: 2px;
  cursor: pointer;
}

.password-wrap .panel {
  margin: 100px auto;
}

.poll-item-area .inner {
  margin-top: 1rem;
}
.poll-date-wrap .item {
  display: flex;
  align-items: center;
}
.poll-date-wrap .item .label {
  width: 15%;
}
.poll-date-wrap .item input {
  width: 60%;
}
.poll-date-wrap .item select {
  width: 20%;
  margin-left: 5%;
}
.poll-date-wrap .item + .item {
  margin-top: 1.5rem;
}

/**********
* ## COMMENT
**********/
#comment-write-box {
  margin: 6rem 0 3rem;
}
.chk_comment_all_wrapper {
  padding: 15px 0 10px;
  font-size: 14px;
}
.comment-write-box-inner {
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.comment-write-box-inner .text-wrap {
  padding: 10px;
}
/* .comment-write-box-inner .text-wrap textarea.input{border: 0;} */
.comment-write-button-wrap {
  position: relative;
}
.comment-write-button-wrap .checkbox {
  display: inline-block;
  margin-right: 5px;
}
.comment-write-button-wrap .btn-group {
  margin-top: 0;
  display: flex;
}
.comment-write-button-wrap .btn {
  min-width: auto;
  line-height: 1;
  padding: 0 1rem;
  height: 3.5rem;
  line-height: 3.5rem;
}
.comment-write-button-wrap .btn-xs {
  padding: 3px 5px;
  background-color: #fff;
}
.comment-write-button-wrap .btn + .btn {
  margin-left: 10px;
}

.comment-write-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  padding-top: 0;
}
.comment-write-bottom .char-info {
  font-size: 1.3rem;
}
.comment-write {
  display: flex;
  align-items: center;
}

.comment-user {
  padding: 1rem;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}
.comment-user .user-name {
  margin-left: 1rem;
}
.comment-write-box-inner .ico-user {
  width: 3rem;
  height: 3rem;
}

#viewcomment {
  position: relative;
}

.comment-list-wrap {
  background-color: #fbfcfd;
}
.media-wrap {
  border-top: 1px solid #f0f0f0;
  margin-top: 20px;
}
.media {
  clear: both;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}
.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
}
.media-body,
.media-left,
.media-right {
  display: block;
}
.media-heading {
  font-size: 1.5rem;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 500;
}

.comment-list-wrap .media-heading {
  display: flex;
  justify-content: space-between;
}
.comment-list-wrap .media-content {
  position: relative;
  margin-bottom: 1rem;
  font-size: 15px;
}

.admin-manage-comment {
  margin-bottom: 20px;
}
.media.cmt-dpeth1 {
  background-color: #fff;
}
.media.bg-success {
  background-color: var(--bg-color-ed);
  border-top: 1px solid var(--bg-color-d1);
}

.media .time {
  font-size: 1.3rem;
  color: #777;
  display: inline-block;
  margin-bottom: 5px;
}
.media .ip {
  font-size: 11px;
  color: #777;
}
.media .reply {
  text-align: right;
  font-size: 1.3rem;
}
.media .reply a {
  padding-left: 1rem;
  font-weight: 400;
}
.media .reply .blame-button-wrap {
  padding: 0;
  margin-left: 1rem;
  height: 2.5rem;
  line-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  background-color: var(--ad-color-4d);
  border-radius: 4px;
}
.media .reply .blame-button-wrap .label {
  display: inline-block;
  padding: 0 4px;
}
.media .reply .blame-button-wrap span {
  background-color: #eee;
  padding: 0 4px;
  display: inline-block;
  min-width: 2rem;
  text-align: center;
}
.media .reply .blame-button-wrap span.is-comment-blame-0 {
  padding: 0;
  min-width: auto;
}
.media .label {
  font-size: 1.3rem;
}
.media .label-warning {
  background: #888;
  padding: 2px 6px;
  margin-right: 4px;
  font-weight: 400;
  color: #fff;
}

.btn-manage-wrap {
  position: relative;
  display: inline-block;
}
.btn-manage-wrap .btn {
  margin-left: 10px;
}
.btn-admin-manage-layer {
  display: none;
  border: 1px solid #ddd;
  position: absolute;
  background-color: #fff;
  z-index: 99999;
}
.btn-admin-manage-layer div.item {
  height: 23px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  padding-left: 2px;
  padding-right: 10px;
}
.btn-admin-manage-layer div.item {
  font: normal 11px "dotum";
  line-height: 23px;
}
.btn-admin-manage-layer div.item i {
  width: 20px;
  text-align: center;
}

/**********
* ## SEARCH
**********/
.page-search .section-title.with-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-search .section-title .more {
  font-size: 15px;
  text-decoration: underline;
  color: var(--ad-color-07);
}
.search-media-wrap {
  border: 1px solid var(--bg-color-d1);
  border-radius: 4px;
  margin-top: 3rem;
}
.search-media-wrap h4 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bg-color-d1);
  padding: 15px;
}
.search-media-wrap .btn-wrap {
  margin: 2rem 0;
}

.search-media-wrap .media-heading a {
  color: var(--theme-color);
}
.search-media-wrap .media-heading a + a {
  color: var(--bg-color-3f);
}

.search-media-wrap .media-box .media {
  padding: 20px 15px;
}

.media-box .media {
  display: flex;
}
.media-box .media-left {
  flex-shrink: 0;
}
.media-box .media-body {
  flex-grow: 1;
}
.media-box .media-body p {
  font-size: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-box .media-body .media-info {
  margin-top: 1rem;
}
.media-box .media-body .media-info span + span {
  font-size: 13px;
  color: var(--bg-color-3f);
  margin-left: 1rem;
}
.media-box .media-body .highlight {
  font-weight: 500;
}

/**********
* ## ANIMATION
**********/
@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes aniScaleDown {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes aniRightToLeft {
  from {
    width: 18px;
  }
  to {
    width: 0;
  }
}

@keyframes aniLeftToRight {
  from {
    right: -100px;
  }
  to {
    right: 0;
  }
}

/* animation slideUp  */
@keyframes aniSlideUp {
  from {
    top: -100%;
  }
  to {
    top: -158%;
  }
}

/****
* aniRotating
****/
@-webkit-keyframes aniRotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes aniRotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/****
* animation pf
****/
@keyframes aniPf {
  from {
    opacity: 0;
    right: -50px;
  }
  to {
    opacity: 1;
    right: 0;
  }
}
@-moz-keyframes aniPf {
  /* Firefox */
  from {
    opacity: 0;
    right: -50px;
  }
  to {
    opacity: 1;
    right: 0;
  }
}
@-webkit-keyframes aniPf {
  /* Safari and Chrome */
  from {
    opacity: 0;
    right: -50px;
  }
  to {
    opacity: 1;
    right: 0;
  }
}
@-o-keyframes aniPf {
  /* Opera */
  from {
    opacity: 0;
    right: -50px;
  }
  to {
    opacity: 1;
    right: 0;
  }
}

/****
* animation fadeIn
****/
@keyframes aniFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes aniFadeIn {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes aniFadeIn {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes aniFadeIn {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* animation aniDown  */
@keyframes aniDown {
  from {
    top: -200px;
  }
  to {
    top: 0;
  }
}

/* animation aniUp  */
@keyframes aniUp {
  from {
    opacity: 0;
    top: 150%;
  }
  to {
    opacity: 1;
    top: 30px;
  }
}
@keyframes aniUp2 {
  from {
    opacity: 0;
    top: 150%;
  }
  to {
    opacity: 1;
    top: 0;
  }
}

/* animation gnb  */
@keyframes aniGnb {
  from {
    height: 0;
  }
  to {
    height: 100vh;
  }
}

/****
* animation gradient
****/
@-webkit-keyframes aniGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes aniGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Preloader */
.handle-preloader.v-2 {
  background: -webkit-linear-gradient(0deg, #c335dc, #ff3c56 100%);
}
.handle-preloader {
  background: -webkit-linear-gradient(0deg, #41a0ea, #f18e95 75%);
}
.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.preloader-close {
  position: fixed;
  z-index: 99999999;
  font-size: 18px;
  background: #fff;
  width: 30px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  right: 15px;
  top: 15px;
  border-radius: 50%;
}

.handle-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}
.handle-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 150px;
  margin: 0 auto 45px auto;
  width: 150px;
}
.handle-preloader .animation-preloader .txt-loading {
  text-align: center;
  user-select: none;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading {
  font-weight: 500;
  letter-spacing: 15px;
  display: inline-block;
  position: relative;
  font-size: 70px;
  line-height: 70px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.3);
}

.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}
.handle-preloader
  .animation-preloader
  .txt-loading
  .letters-loading:nth-child(8):before {
  animation-delay: 1.4s;
}
.handle-preloader .loader-section {
  background-color: #ffffff;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: #ffffff;
}

.handle-preloader .animation-preloader .spinner {
  border: 3px solid #ffffff;
  border-top-color: rgba(255, 255, 255, 0.5);
}

@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}