@charset "UTF-8";



/* megamenu-2022 */

header nav .logo-section {margin-top: -4px;}

header nav .search-button .icon-search {display: none;}

header nav.show-mobile-search .menu-section {display: flex;}

header nav.show-mobile-search .close-button-desktop-only {display: none;}

header nav .extra-section {margin-top: -4px; padding-right: 0;}

header nav .extra-section .search .search-go {background: url(https://web-eshop.cdn.hinet.net/eshop/img/ic/search.svg) no-repeat center center; width: 40px; padding: 0; text-indent: 100%; overflow: hidden; white-space: nowrap; display: block; }

header nav .extra-section .search .search-field.active .search-go {background: url(https://web-eshop.cdn.hinet.net/eshop/img/ic/search-blue.svg) no-repeat center center;}

header nav .extra-section .search-button span {left: 16px; top: 0;}

header nav .extra-section .search .search-field input {padding: 4px 166px 4px 12px; height: 32px; line-height: 32px; }

header nav .extra-section .search .search-field.active input {width: 180px; margin-right: 0; padding: 4px 32px 4px 20px; font-size: 0.75rem; height: 32px; border: 1px solid #209cff;}

header nav .extra-section .search .search-field.active .recommend-results {width: 180px; right: 0px; top: 1.6rem; left:auto; z-index: 19;}

header nav .extra-section .search .active .search-go {right: 0; top: 0; bottom: 0; padding: 0;}

header nav {padding-top: 10px; height: 89px;}

header nav .extra-section .search .search-field input {border-radius: 20px;}





/* header-2022 */

.header-spacer {height: 112px;}

section#header header {max-width: 1600px; min-width: 990px; padding-right: 2rem; transition: margin .1s linear;}

section#header header .corporate-switcher {right: initial; font-size: .8rem;}

section#header header .corporate-switcher ul {margin-left: 0.8rem;}

section#header header .corporate-switcher ul>li:last-child, section#header header .corporate-switcher ul>li:nth-child(4) {float: initial;}

section#header header .corporate-switcher ul>li:nth-child(3):after, section#header header .corporate-switcher ul>li:nth-child(4):after {content: '|';}

section#header header .corporate-switcher ul>li:last-child:after {content: ' ';}



/* second logo Begin */

header nav .logo-section a.logo {margin-right: 17px;}

section#header header .logo-line {border-right: 1px solid #333;width: 1px;height: 32px;}

section#header header .logo-index {color: #333;font-size: 20px;font-weight: 500;margin-right: 16px;margin-left: 16px;white-space: nowrap;}

section#header header .logo-index:hover {color: #333;}

@media screen and (max-width: 1280px) {section#header header .logo-line, section#header header .logo-index {display: none;}}

/* secondlogo End */



/* 20221019 */

header nav .extra-section .profile {height: 28px; width: 28px; padding: 0; margin: 0 .2rem;}



header nav .extra-section .profile-button span {width: 60px; height: 32px; min-width: auto; margin-top: 0; font-size: .7rem; color: #209cff; display: flex; justify-content: center; align-items: center;}

header nav .extra-section .profile-button span:hover {background-color: rgba(32,156,255,.2); opacity: 1; transform: scale(1); box-shadow: none;}

/* 20221019 */

header nav .extra-section .profile-button {width: 20px; padding-bottom: 20px;}



header nav .extra-section .profile-button:before {margin-left: 0; margin-right: 0;}

/* 20221024 */

header nav .extra-section .profile-button img {position: absolute; background: #fff; width: 24px; height: 24px; top: 0; left: 2px; padding: 2px; border-radius: 50%; margin-top: 2px; margin-right: 2.6px;}

header nav .extra-section .profile .sub-menu {right: -2rem; top: 1.8rem; padding-bottom: 2.8rem; padding-top: .6rem; background-repeat: no-repeat; box-shadow: 0 4px 4px rgb(0 0 0 / 12%); z-index: 19;}

header nav .extra-section .profile:hover .sub-menu {display: none;}

header nav .extra-section .profile .profile-button.active {opacity: .5;}

header nav .extra-section .profile .profile-button.active ~ .sub-menu.pop-card-Level {display: block; z-index: 19;}

header nav .extra-section .profile .sub-menu .profile-info {padding-left: 1.6rem; color: #0267b9;}

header nav .extra-section .profile .sub-menu .profile-name {font-size: 1.2rem; }

header nav .extra-section .profile .sub-menu .profile-home {width: 160px; margin: 12px auto; padding: 4px; font-size: .75rem; color: #209cff; border: none; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 14%), 0 2px 1px rgb(0 0 0 / 12%), 0 1px 3px rgb(0 0 0 / 20%); border-radius: 2rem; cursor: pointer;}

header nav .extra-section .profile .sub-menu .profile-logout {position: absolute; background: none; font-size: .75rem; bottom: .7rem; left: .6rem; right: .6rem; padding: 2px; color: #209cff; border: none; border-radius: 2rem; cursor: pointer;}

header nav .extra-section .profile .sub-menu .profile-logout:hover {background-color: rgba(32,156,255,.05);}

.icon-account-login-m:before {background: url(../img/levelCard/vector-0.png) no-repeat center center/28px;}

.icon-account-login-m~ .pop-card-Level .card-Level_card {background: url(../img/levelCard/bg-level-0.png)  no-repeat top center/cover;}



header nav .extra-section .profile .sub-menu.pop-card-Level .card-Level_card .btn {border: 0; box-shadow: none;}

header nav .icon-account-login-m~ .pop-card-Level .card-Level_menu ul {display: flex; flex-direction: column; align-items: flex-start; margin: .4rem 2rem; font-size: 15px;}

header nav .icon-account-login-m~ .pop-card-Level .card-Level_menu ul li {display: flex; margin-top: .6rem; margin-bottom: .6rem;}

header nav .icon-account-login-m~ .pop-card-Level .card-Level_menu ul li span {width: 24px; height: 24px; margin-right: 1rem;}

header nav .icon-account-login-m~ .pop-card-Level .card-Level_menu:after {content: ''; background: #e5e5e5; height: 1px; width: 90%; margin: 0 auto; display: flex;}



header nav .extra-section .location {width: 20px; height: 20px; margin: 0 .4rem;}

header nav .extra-section .location:hover {opacity: .5;}

header nav .extra-section .location-button img {width: 20px; height: 20px;}

header nav .extra-section .menu-ham {width: 24px; height: 24px; margin: 0 .6rem;}

header nav .extra-section .menu-ham-button:hover, header nav .extra-section .menu-ham-button.active {opacity: .5;}

header nav .extra-section .menu-ham-button img {position: relative; width: 24px; height: 24px;  opacity: 0; transition: all .2s;}

header nav .extra-section .menu-ham-button img.icon-menu-ham {position: absolute; width: 20px; height: 20px; margin-top: 2px; opacity: 1;}

header nav .extra-section .menu-ham-button.active img.icon-menu-close {opacity: 1; left: -2px;}

header nav .extra-section .menu-ham-button.active img.icon-menu-ham {opacity: 0;}



header nav .extra-section .search .search-field {height: 40px;}

header nav .extra-section .search .search-field:hover {opacity: .5;}

header nav .extra-section .search .search-field input {position: absolute; background: transparent; right: 0px;     padding-right: 24px; top: 0; border: 0; cursor: pointer; z-index: 9;}

header nav.show-mobile-search .extra-section .search .search-field.active {height: 32px; z-index:19;}

header nav .extra-section .search .search-field.active input {background-color: #fff; z-index: 1;}

header nav .extra-section .search .search-field .search-go {background: url(icon-search.svg) no-repeat center center; height: 40px;}

header nav .extra-section .search .search-field.active .search-go {height: 32px;}



header nav .drop-down-menu li {position: relative; z-index: 9;}

header nav .drop-down-menu li a {white-space: normal;}

header nav .drop-down-menu li a.menu-list-title {font-size: .9rem; padding-bottom: 1.6rem;}

header nav .drop-down-menu li .sub-menu {position: fixed; margin-top: 28px; width: 100vw; max-width: initial; left: 0; top: initial; padding-top: 0; padding-bottom: 0; box-shadow: inset 0 0 8px #999; border-radius: 0; transform: none; display: flex; justify-content: center; /*opacity: 1; height: auto;*/}

header nav .drop-down-menu li .sub-menu a {padding-left: .2rem !important; display: block;}

header nav .drop-down-menu li .sub-menu .sub-menu-item:before {display: none;}



header nav .drop-down-menu li .sub-menu:before {content: ''; position: absolute; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(232,245,255,.5) .2vh, rgba(232,245,255,1) .6vh, rgba(232,245,255,1) 100%); /*width: 100vw; max-width: 22%;*/ right: calc(50% + 500px); height: 100vh; left: 0; z-index: -1;}

header nav .drop-down-menu li .sub-menu:after {content: ''; height: 100vh; display: block;}

header nav .drop-down-menu li .sub-menu-apply {background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(232,245,255,.5) 0.2vh, rgba(232,245,255,1) .6vh, rgba(232,245,255,1) 100%); width: 320px; height: 100vh; padding: 2.2rem 1rem 1.6rem 0;}

header nav .drop-down-menu li .sub-menu-apply label {position: relative; font-size: 1.4rem; font-weight: bold; padding-bottom: 0.4rem; margin-left: 100px; line-height: 1.6; border-bottom: 1px solid #333;}

header nav .drop-down-menu li .sub-menu-apply label>span {position: absolute; margin-left: -100px; top: -14px; left:0; right:0;}

header nav .drop-down-menu li .sub-menu-apply label>span>img {width: 38%; height: 38%;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item {margin-top: 2.2rem; margin-bottom: .6rem; display: flex; flex-direction: column;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li {margin-bottom: 2.2vmin;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a {display: flex; flex-direction: row; align-items: center; color: #333; font-size: .8rem; padding: 0 0.4rem 0 0 !important;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a:hover {color: #209cff;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-icon {margin-right: .4rem;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-item {font-size: .9rem; font-weight: bold;}

header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-note {font-size: .7rem; color: #666;}

header nav .drop-down-menu li .sub-menu-menu-list {width: 1160px; padding: 2.6rem 1rem 1.6rem 0; display: flex;

    flex-wrap: wrap;}

header nav .drop-down-menu li .sub-menu-menu-list>li {width: 20%;}

header nav .drop-down-menu li .sub-menu-menu-list>li>label {font-size: 1.2rem; font-weight: bold; padding-left: 1rem; line-height: 1.6; display: block;}



header nav .drop-down-menu li:hover a.menu-list-title, header nav .drop-down-menu li.active a.menu-list-title {color: #209cff;}

header nav .drop-down-menu>li:hover:after, header nav .drop-down-menu>li.active:after {content: ''; position: absolute; bottom: -28px; left: 1rem; right: 1rem; border-bottom: 3px solid #209cff; display: block;}

header nav .drop-down-menu li.active .sub-menu, header nav .drop-down-menu li.active .sub-menu:hover {display: flex; opacity: 1; height: calc(100vh - 140px); /*height: auto;*/ transform: none; transition: none; max-height:100%; overflow:auto;}

header nav .drop-down-menu li:hover .sub-menu {display: flex;}



header nav .drop-down-menu li .sub-menu-item {font-size: .9rem; margin-top: 4.2vmin; padding-left: 1rem; display: flex; flex-direction: column;}

header nav .drop-down-menu li .sub-menu-item>li {margin-bottom: 4.4vmin; line-height: 1.6;}



header nav .drop-down-menu li .sub-menu-help-center {position: relative; background: #fff; width: 300px; border-radius: 42px; box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 20%); padding: .2rem .2rem .2rem .8rem;}

header nav .drop-down-menu li .sub-menu-help-center .menu-apply-icon {position: absolute; left: 16px; top: 33%;}

header nav .drop-down-menu li .sub-menu-help-center .menu-apply-item {font-size: .9rem; font-weight: bold; padding-bottom: 2px; padding-left: 2rem;}

header nav .drop-down-menu li .sub-menu-help-center .menu-apply-note {font-size: 0.65rem; color: #666; padding-left: 2rem; line-height: 1.6;}

header nav .drop-down-menu .sub-menu-close {position: fixed; background: #fff; bottom: 0; width: 100vw; left: 0; right: 0; border: 1px solid #ccc; z-index: 99;}

header nav .drop-down-menu .sub-menu-close {display: flex; justify-content: center;}

header nav .drop-down-menu .sub-menu-close a {font-weight: bold; padding: .6rem 0; display: flex; width: 100%; line-height: 32px; justify-content: center;}

header nav .drop-down-menu .sub-menu-close img.icon-menu-close {width: 24px; height: 24px; margin-left: .4rem; vertical-align: middle;}



header nav .menu-section, header nav.show-mobile-search .menu-section {opacity: 0; visibility: hidden; transition: all .1s ease-in-out;}

header nav .menu-section.active, header nav.show-mobile-search .menu-section.active {opacity: 1; visibility: visible; transition: all .2s;}



@media screen and (max-width: 1366px) {

  header nav .drop-down-menu li a.menu-list-title {font-size: .9rem;}

  header nav .drop-down-menu li .sub-menu-menu-list>li>label {font-size: 1rem;}

  header nav .drop-down-menu li .sub-menu-item {font-size: .85rem; margin-top: 1.6rem;}

  header nav .drop-down-menu li .sub-menu-item>li {margin-bottom: 1.4rem;}

  header nav .drop-down-menu li .sub-menu-apply label {font-size: 1rem;}

  header nav .drop-down-menu li .sub-menu-apply label>span {margin-left: -80px;}

  /*header nav .drop-down-menu li .sub-menu-apply label>span>img {width: 36%; height: 36%;}*/

  header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-item {font-size: .85rem;}

  header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-note {font-size: .65rem;}

  header nav .drop-down-menu li .sub-menu-help-center {width: 290px;}

  header nav .drop-down-menu li .sub-menu-help-center .menu-apply-item {font-size: .85rem;}

}

@media screen and (max-width: 1280px) {

  header nav .drop-down-menu li a.menu-list-title {font-size: .85rem;}

  header nav .drop-down-menu li .sub-menu-menu-list>li>label {font-size: .9rem;}

  header nav .drop-down-menu li .sub-menu-item {font-size: .8rem; margin-top: 1.4rem;}

  header nav .drop-down-menu li .sub-menu-item>li {margin-bottom: 1.2rem;}

  header nav .drop-down-menu li .sub-menu-apply label {font-size: .9rem;}

  header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-item {font-size: .8rem;}

  header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-note {font-size: .6rem;}

  header nav .drop-down-menu li .sub-menu-help-center .menu-apply-item {font-size: .8rem;}

}

@media screen and (max-width: 1180px) {

  header nav .menu-section {position: absolute; left: 180px;}

  header nav .drop-down-menu li a.menu-list-title {font-size: .75rem;}

  header nav .drop-down-menu li .sub-menu-menu-list>li>label {font-size: .8rem;}

  header nav .drop-down-menu li .sub-menu-item {font-size: .7rem; margin-top: 1rem;}

  header nav .drop-down-menu li .sub-menu-item>li {margin-bottom: 1rem;}

    header nav .drop-down-menu li .sub-menu-apply label {font-size: .8rem;}

  header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-item {font-size: .7rem;}

  header nav .drop-down-menu li .sub-menu-apply .sub-menu-item li a .menu-apply-note {font-size: .6rem;}

  header nav .drop-down-menu li .sub-menu-help-center .menu-apply-item {font-size: .7rem;}

}

 /*@media screen and (max-width: 1080px) {

  header nav .drop-down-menu li a.menu-list-title {display: none;}

}*/





/* eshop-2022 */

body {background-color: #fafafa;}



section.index-crazy {position: relative; padding: 0;}

.index-crazy-w {position: relative; width: 100%; padding-bottom: 31.25%; /*height: 500px;*/ display: block;}

.index-crazy-w:after {content: ''; position: absolute; background: linear-gradient(0deg, rgba(250,250,250,1) 0%, rgba(250,250,250,0) 100%); bottom: 0; left: 0; right: 0; height: 90px; }

.index-crazy-w-text {position: absolute; top: 12%; left: calc(50% - 530px);}

.index-crazy-w-button {position: absolute; z-index: 9;}

.index-crazy-w-button .button {padding: 0.6em 3.2em; font-size: .9rem;}



section.index-hello{position: relative; padding: 0; margin-top: -4.8vmin;}

.index-hello .neko {flex-direction: column;}

.index-hello .index-hello-head {font-size: 2.1vw; font-weight: bold; margin-bottom: 0;}



section.index-service{position: relative; padding: 0;}

.index-service .neko {flex-direction: column;}

.index-service .index-service-head {font-size: 2.1vw; font-weight: bold; margin-bottom: 1.6rem;}

.index-service .index-service-content {margin: 0 2rem;}

.index-service .index-service-content .neko {background: #fff; color: #333; margin: 0 0.4rem; padding: 4vh 1vw; flex-direction: column; box-shadow: 0 0 6px #ccc;}

.index-service .index-service-content .neko:hover {text-decoration: none; box-shadow: 0 0 8px #666; transition: all .3s;}

.index-service .index-service-img {margin-top: 2vh; order: 3;}

.index-service .index-service-img img {width: 8.8vw;}

.index-service .index-service-title {font-weight: bold; font-size: 1.5vw; /*margin-bottom: 2vh;*/ line-height: 1.2;}

.index-service .index-service-title:after {content: ''; background: #333; height: 1px; width: 14%; margin: 2vh auto; display: block;}

.index-service .index-service-text {font-size: 1vw; color: #666;}

.index-service .index-service-content .neko:hover .index-service-title { /*background-position-x: 0;*/

    color: #209cff;

    transition: all .3s;

}



section.index-kv-top.index-kv-top-2022 {background: none; margin-top: 2rem;}

.index-kv-top.index-kv-top-2022 .neko {flex-direction: column;}

.index-kv-top.index-kv-top-2022 .index-kv-head {font-size: 2.1vw; font-weight: bold; margin-bottom: 1rem; margin-top: 2rem;}

.index-kv-top.index-kv-top-2022 .mySwiper-kv {background-color: initial; width: 1000px; height: auto; margin-left: auto; margin-right: auto; border-radius: 20px; box-shadow: none;}

.index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-slide, .index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-slide a {border-radius: 20px;}

.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category {position: relative; background: initial; margin-bottom: 1.6rem; left: 0; right: 0; top: initial; bottom: initial; padding: initial; border-radius: initial; box-shadow: initial; z-index: 19;}

.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul {flex-direction: row;}

/*.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul:after {position: absolute; content: ''; border: 1px solid #ddd; bottom: 1px;     left: calc(100vw - 125vw); right: calc(100vw - 125vw); z-index: -1;}*/

.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul li a {font-size: 1rem; font-weight: normal; padding: .6rem 0; width: auto;border-bottom: 3px solid transparent; justify-content: center;}

.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul li a span {display: none;}

/*.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul li a:hover,*/ .index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul li.active a {color: #209cff;border-color: #209cff;transition: all .4s;}

.index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul li a:hover span, .index-kv-top.index-kv-top-2022 .mySwiper-kv .kv-category ul li.active a span {background: #209cff; transition: all .4s; transition-delay: .2s;}

.index-kv-top.index-kv-top-2022 .kv-tab-inner .swiper-wrapper {border-radius: 20px; box-shadow: 0.1rem 0.2rem 0.4rem rgb(0 0 0 / 25%);}

.index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-container-horizontal > .index-kv-top.index-kv-top-2022 .swiper-pagination-bullets, .index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-pagination-custom, .index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-pagination-fraction {top: 1rem;}

.index-kv-top.index-kv-top-2022 .swiper-pagination-bullet:hover, .index-kv-top.index-kv-top-2022.swiper-container-horizontal > .index-kv-top.index-kv-top-2022 .swiper-pagination-bullets .swiper-pagination-bullet:hover, .index-kv-top.index-kv-top-2022 .mySwiper-kv .my-bullet-active:after {background: #209cff;}

.index-kv-top.index-kv-top-2022 .swiper-container .swiper-button-prev, .index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-button-prev {background-position: center center; left: -8%; height: 44px; width: 44px; opacity: 1; border-radius: 50%; box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);}

.index-kv-top.index-kv-top-2022 .swiper-container .swiper-button-next, .index-kv-top.index-kv-top-2022 .mySwiper-kv .swiper-button-next {background-position: center center; right: -8%; height: 44px; width: 44px; opacity: 1; border-radius: 50%; box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);}

.index-kv-top.index-kv-top-2022 .swiper-container .swiper-button-disabled, .index-kv-top.index-kv-top-2022 .swiper-container:hover .swiper-button-next.swiper-button-disabled, .index-kv-top.index-kv-top-2022 .swiper-container:hover .swiper-button-prev.swiper-button-disabled {opacity: 0;}



section.footer .footer-label {font-size: 2.1vw;}



/* 20230321 */

.layout-edm header nav {height: 89px;  padding-top: 10px;}

.layout-edm .header-spacer {height: 112px;}