@charset "UTF-8";

#productMain .qMenu {position: absolute; right: 4.8rem; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; align-items: flex-end;}
#productMain .qMenu a {border: 1px solid #D9D9D9; background: #F5F5F5; width: 6rem; height: 6rem; border-radius: 6rem; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease;}
#productMain .qMenu a ~ a {margin-top: 2rem;}
#productMain .qMenu a p {color: #ffffff; display: none;}
#productMain .qMenu a span {display: block; width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
#productMain .qMenu a.building span {background-image: url("../images/quick_building.svg");}
#productMain .qMenu a.cart span {background-image: url("../images/quick_cart.svg");}
#productMain .qMenu a.catalog span {background-image: url("../images/quick_catalog.svg");}
#productMain .qMenu a:hover {width: fit-content; border-radius: 6rem; padding: 0 1.4rem 0 2.4rem; background: #DC202E; border: none; transition: all 0.5s ease;}
#productMain .qMenu a:hover p {display: block; margin-right: 2.6rem;}
#productMain .qMenu a.building:hover span {background-image: url("../images/quick_building_active.svg");}
#productMain .qMenu a.cart:hover span {background-image: url("../images/quick_cart_active.svg");}
#productMain .qMenu a.catalog:hover span {background-image: url("../images/quick_catalog_active.svg");}

#productMain .banner .scroll-down {position: absolute; bottom: 0.1rem; left: 0; z-index: 10; transform: rotate(90deg); margin-bottom: 4.8rem; color: #ffffff; font-size: 1.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-right: 4.8rem;}

#productMain .business {width: 100%;}
#productMain .business .cont-wrap {display: flex; align-items: center; height: 100vh; padding-left: 26rem;}
#productMain .business .left-cont .btn-arrow {width: 26rem;}
#productMain .business .left-cont .btn-arrow ~ .btn-arrow {margin-top: 1.2rem;}
#productMain .business .swiper-pagination-fraction {position: static; margin-top: 19.8rem; display: flex; align-items: baseline; color: rgba(0, 0, 0, 0.2); font-size: 2rem; font-weight: 700; margin-bottom: 4.8rem;}
#productMain .business .swiper-pagination-current {font-size: 4rem; line-height: 6rem; font-weight: 700; margin-right: 2.2rem; color: #000000;}
#productMain .business .swiper-pagination-total {line-height: 3.2rem; margin-left: 2rem;}
#productMain .sec-tit {font-weight: 900; font-size: 8rem; line-height: 10rem; margin-bottom: 3.2rem;}
#productMain .sec-desc {font-size: 2.2rem; line-height: 3.4rem;}

#productMain .businessSwiper {margin-right: unset; width: 114rem; height: 70rem;}
#productMain .businessSwiper .swiper-wrapper {position: absolute; right: 0; top: 0; width: 82rem;}
#productMain .businessSwiper #bullets {position: absolute; left: 0; top: 0; width: 40rem; bottom: unset; display: flex; flex-direction: column; justify-content: space-between; height: 100%; z-index: 10;}
#productMain .businessSwiper .swiper-pagination-bullet {width: 100%; height: 100%; background: none; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; opacity: 1; color: #999999; padding-left: 4rem; cursor: pointer; border-radius: unset; transition: background-color 0.3s;}
#productMain .businessSwiper .swiper-pagination-bullet:hover {background: #DC202E url("../images/icon_arrow02_white.svg") no-repeat right 4rem center/6rem; color: #ffffff;}
#productMain .businessSwiper .swiper-pagination-bullet p {font-weight: 900; font-size: 3rem; line-height: 4rem; margin-bottom: 1.1rem;}
#productMain .businessSwiper .swiper-pagination-bullet span {text-transform: uppercase; font-size: 1.4rem;}
#productMain .businessSwiper .swiper-pagination-bullet-active {color: #000000; border: 1px solid #000000; background: #FFFFFF url("../images/icon_arrow02.svg") no-repeat right 4rem center/6rem; transition: unset;}

#productMain .product {width: 100%; height: 100vh; background: url("../images/product_main_bg.jpg") no-repeat center/cover; padding-left: 26rem; display: flex; flex-direction: column; justify-content: center;}
#productMain .product .title-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 4rem;}
#productMain .product .sec-tit {color: #ffffff; margin-bottom: 0;}
#productMain .product .btn-wrap {position: relative; width: 16.4rem; height: 100%; margin-right: 26rem;}
#productMain .product .btn-wrap div {width: 7.2rem; height: 7.2rem; margin-top: 0; transform: translateY(-50%);}
#productMain .product .swiper-button-prev:after, #productMain .product .swiper-button-next:after {content: unset;}
#productMain .product .swiper-button-prev {background: url("../images/icon_arrow_round_prev.svg") no-repeat center/cover;}
#productMain .product .swiper-button-next {background: url("../images/icon_arrow_round_next.svg") no-repeat center/cover; right: 0;}
#productMain .productSwiper {width: 100%;}
#productMain .productSwiper .swiper-slide a {display: block; width: 100%; height: 100%;}
#productMain .productSwiper .swiper-slide a:hover .detail {background: #DC202E url("../images/icon_arrow02_white.svg") no-repeat right 4rem center/5rem; color: #FFFFFF;}
#productMain .productSwiper .swiper-slide .thumb {position: relative; width: 100%; aspect-ratio: 440/420; background: #FFFFFF; display: flex; align-items: center; justify-content: center;}
#productMain .productSwiper .swiper-slide .badge {position: absolute; right: 2rem; top: 2rem; display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; color: #ffffff; font-weight: 700; z-index: 2;}
#productMain .productSwiper .swiper-slide .badge.new {background: #DC202E;}
#productMain .productSwiper .swiper-slide .badge.best {background: #000000;}
#productMain .productSwiper .swiper-slide .badge.soldout{background: #888888;}
#productMain .productSwiper .swiper-slide .badge.preorder{background: #000000;}
#productMain .productSwiper .swiper-slide .img-area {width: 72.727%; aspect-ratio: 1; overflow: hidden;}
#productMain .productSwiper .swiper-slide .img-area img {width: 100%; height: 100%; object-fit: contain;}
#productMain .productSwiper .swiper-slide .detail {width: 100%; aspect-ratio: 440/140; background: #ffffff; display: flex; flex-direction: column; padding-left: 4rem; justify-content: center;}
#productMain .productSwiper .swiper-slide .detail .category {display: block; margin-bottom: 0.8rem;}
#productMain .productSwiper .swiper-slide .detail .name {font-size: 2.4rem; font-weight: 700;}

#productMain .p-search {padding: 12rem 0; background: url("../images/search_main_bg.jpg") no-repeat center/cover; display: flex; flex-direction: column; align-items: center;}
#productMain .p-search h2 {font-size: 4rem; font-weight: 700; color: #ffffff; margin-bottom: 3.2rem;}
#productMain .p-search .search-input {position: relative;}
#productMain .p-search .search-input input {width: 68rem; height: 6.8rem; border-radius: 6rem; padding: 0 6.6rem 0 3.6rem; font-size: 1.8rem;}
#productMain .p-search .search-input input::placeholder {color: #888888;}
#productMain .p-search .search-input button {position: absolute; right: 2.8rem; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; background: url("../images/icon_search_red.svg") no-repeat center/cover;}

#productMain .skip-menu {display: flex; align-items: center;}
#productMain .skip-menu a {position: relative; display: flex; flex-direction: column; width: 100%; padding: 4.8rem; height: 33.6rem;}
#productMain .skip-menu a:hover {background: url("../images/icon_arrow02_red.svg") no-repeat left 4.8rem bottom 7.4rem/6rem; color: #DC202E;}
#productMain .skip-menu a:hover span {color: #DC202E;}
#productMain .skip-menu a:hover path {fill: #DC202E; }
#productMain .skip-menu a ~ a {border-left: 1px solid #D9D9D9;}
#productMain .skip-menu span {display: block; color: #767676; margin-bottom: 1.6rem; font-size: 1.8rem; font-weight: 700;}
#productMain .skip-menu p {font-size: 2.8rem; font-weight: 700; line-height: 4rem;}
#productMain .skip-menu a svg {position: absolute; right: 4.8rem; bottom: 4.8rem;}

/* product: 제품 */
#product .sub-banner {background: url("../images/banner_product.jpg") no-repeat center/cover;}
#product .product-menu {width: 100%; margin-top: 7rem; background: #F5F5F5; padding: 6rem 0;}
#product .product-menu .menu-wrap {display: flex;}
#product .product-menu .menu-wrap > li {width: 22.2rem; display: flex;}
#product .product-menu .menu-wrap > li:last-child {width: 16.8rem;}
#product .product-menu .menu-wrap > li:after {display: block; content: ''; width: 0.1rem; height: 30.1rem; background: #D9D9D9; margin: 0 2.47rem;}
#product .product-menu .menu-wrap > li:last-child:after {display: none;}
#product .product-menu .menu {width: 100%;}
#product .product-menu .menu li.menu-tit {padding-bottom: 1.6rem; border-bottom: 1px solid #222222;}
#product .product-menu .menu li.menu-tit a {font-size: 1.8rem; font-weight: 700;}
#product .product-menu .menu li.menu-tit + li {margin-top: 1.6rem; padding-top: 0;}
#product .product-menu .menu li {display: flex; align-items: center; color: #222222;}
#product .product-menu .menu li {font-size: 1.4rem; line-height: 2rem; transition: 0.3s;}
#product .product-menu .menu li:not(.menu-tit, .fc-blue):hover a {color: #DC202E; transition: 0.3s;}
#product .product-menu .menu li:not(.menu-tit, .fc-blue):hover:after {display: block; content: ''; width: 2rem; height: 2rem; background: url("../images/icon_arrow_more_red.svg") no-repeat center/cover; transition: 0.3s;}
#product .product-menu .menu li:not(.menu-tit) {padding: 0.6rem 0;}

#product .dl-thumb-list {margin-top: 4rem;}
#product .dl-thumb-list .select-40 {margin-bottom: 2rem;}
#product .dl-thumb-list a {height: 45rem; display: flex; align-items: center; justify-content: center; padding: 4rem 0;}
#product .dl-thumb-list a img {max-width: 30rem; object-fit: contain;}
#product .dl-thumb-list ul li a .dim .txt {line-height: 3.6rem; font-weight: 700; margin-bottom: 2rem;}
#product .dl-thumb-list ul li a .dim .icon {background: url("../images/icon_product_show_white.svg") no-repeat center/cover;}
#product .dl-thumb-list ul li .cate {margin-right: 0; width: fit-content; margin-bottom: 0.4rem;}
#product .dl-thumb-list ul li a:hover ~ .tit {color: #DC202E;}
#product .dl-thumb-list ul li .badge{width: 6rem; height: 6rem;  border-radius: 50%; color: #ffffff; display: flex; align-items: center; justify-content: center; position: absolute; top:2rem; right: 2rem;}
#product .dl-thumb-list ul li .badge.new{background: #DC202E;}
#product .dl-thumb-list ul li .badge.soldout{background: #888888;}
#product .dl-thumb-list ul li .badge.preorder{background: #000000;}

#product .pdc-basic {display: flex;}
#product .pdcSwiper {position: relative; width: 62rem; height: 62rem; overflow: inherit; margin-right: 10rem; margin-left: 0;}
#product .pdcSwiper .swiper-slide {border: 1px solid #EEEEEE; display: flex; align-items: center; justify-content: center; padding: 9.4rem; overflow: hidden;}
#product .pdcSwiper .swiper-slide img {width: 100%; height: 100%; object-fit: contain;}
#product .pdcSwiper .swiper-button-next {right: 1.2rem; background-image: url("../images/icon_p_swiper_next.svg")}
#product .pdcSwiper .swiper-button-prev {left: 1.2rem; background-image: url("../images/icon_p_swiper_prev.svg")}
#product .swiper-button-next, #product .swiper-button-prev {background-repeat: no-repeat; background-size: cover; background-position: center;}
#product .pdcSwiper .swiper-button-next, #product .pdcSwiper .swiper-button-prev {width: 6rem; height: 6rem;}
.swiper-button-next:after,.swiper-button-prev:after {content: none;}
#product .pdcSwiper .expand-btn {position: absolute; right: 0; bottom: 0; width: 5.2rem; height: 5.2rem; background: url("../images/btn_plus_swiper.svg") no-repeat center/cover;}

.ks_badge {position: absolute; right: 32.5rem; top: 1rem; width: 4rem; height: 4rem; background: url("../images/ks_logo.svg") no-repeat center/90%;}
#product .pdc-basic-info {width: calc(100% - 72rem);}
#product .pdc-basic-info .title {margin-top: 4rem;}
#product .pdc-basic-info .title h3 {font-size: 6rem; font-weight: 700; margin-bottom: 0.8rem;}
#product .pdc-basic-info .title span {font-size: 2rem; color: #767676;}
#product .pdc-table {margin-top: 6rem;}
#product .pdc-table .table-tit {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.6rem; border-bottom: 1px solid #000000;}
#product .pdc-table .table-tit h4 {font-size: 2.2rem; font-weight: 700;}
#product .pdc-table .table-tit button {color: #DC202E; padding: 0 2rem; border: 1px solid #D9D9D9; line-height: 4rem; border-radius: 10rem; font-weight: 400;}
#product .pdc-table ul {padding-top: 2.4rem; display: flex; flex-wrap: wrap;}
#product .pdc-table ul li {padding: 1.6rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #EEEEEE; width: calc(50% - 2rem);}
#product .pdc-table ul li:nth-child(2n) {margin-left: 4rem;}
#product .pdc-table ul li div {display: flex; align-items: center; justify-content: space-between; width: 100%;}
#product .pdc-table ul li p {font-size: 1.8rem;}
#product .pdc-table .dw-btn {width: 2.4rem; height: 2.4rem; background: url("../images/icon_download_gray.svg") no-repeat center/cover;}

#product .pdc-info article {margin-top: 8rem;}
#product .pdc-info article h3 {font-size: 3.2rem; font-weight: 700; margin-bottom: 2.4rem;}
#product .pdc-info article img {max-width: 126rem; width: 100%; height: 100%;}
#product .pdc-info .txt-wrap {margin-top: 4rem; color: #767676; line-height: 2.4rem;}
#product .pdc-info .txt-wrap figure {margin: 0;}
#product .pdc-info .txt-wrap h4,#product .pdc-info .txt-wrap h3 {color: #222222; font-size: 1.8rem; font-weight: 700;}
#product .pdc-info .txt-wrap h4 + p,#product .pdc-info .txt-wrap h4 + ul,#product .pdc-info .txt-wrap h3 + p,#product .pdc-info .txt-wrap h3 + ul {margin-top: 0.8rem;}
#product .pdc-info .txt-wrap h4 ~ h4,#product .pdc-info .txt-wrap h3 ~ h3 {margin-top: 2rem;}
#product .pdc-info .txt-wrap ul li {display: flex; align-items: center;}
#product .pdc-info .txt-wrap ul li:before {content: ''; display: block; width: 0.267rem; height: 0.267rem; border-radius: 50%; background: #888888; margin-right: 0.867rem;}
#product .pdc-info .txt-wrap figure.table {border-top: 1px solid #000000;}
#product .pdc-info .txt-wrap figure.table tr {border-bottom: 1px solid #EEEEEE;}
#product .pdc-info .txt-wrap figure.table th,#product .pdc-info .txt-wrap figure.table td {padding: 2rem 0; text-align: center;}
#product .pdc-info .txt-wrap figure.table th {background: #F9F9F9; color: #000000; font-weight: 700; border-right: 1px solid #EEEEEE;}
#product .pdc-info .txt-wrap figure.table tbody tr:first-of-type td ~ td{border-left: 1px solid #EEEEEE;}
#product .pdc-info .txt-wrap figure.table tbody tr td ~ td{border-left: 1px solid #EEEEEE;}
#product .snb.active {background: #F5F5F5;}

#product .relSwiper .thumb {border: 1px solid #EEEEEE; height: 45rem; padding: 7rem; display: flex; align-items: center; justify-content: center; margin-bottom: 2.4rem;}
#product .relSwiper .thumb img {object-fit: contain;}
#product .relSwiper .swiper-button-next,#product .relSwiper .swiper-button-prev {width: 6rem; height: 6rem; border: 1px solid #D9D9D9; background-size: 4rem; background-color: #FFFFFF; top: 19.5rem; margin-top: 0;}
#product .relSwiper .swiper-button-next {right: 0; background-image: url("../images/icon_r_swiper_next.svg");}
#product .relSwiper .swiper-button-prev {left: 0; background-image: url("../images/icon_r_swiper_prev.svg");}
#product .relSwiper span {color: #888888;}
#product .relSwiper p {margin-top: 0.4rem; color: #222222; font-size: 2.2rem; font-weight: 700;}

#product .dl-thumb-list ul li .dim {background: rgba(220, 32, 46, 0.8);}

#thumbModal {width: 126rem; aspect-ratio: 1260/1000; max-height: 90vh;}
#thumbModal .modal-content {display: flex; align-items: center; justify-content: center;}
#thumbModal .modal-close {position: absolute; top: 2rem; right: 2rem; width: 8rem; height: 8rem; background: url("../images/icon_modal_close.svg") no-repeat center/cover; z-index: 2;}

.thumbSwiper {width: 100%;}
.thumbSwiper .swiper-wrapper {width: 100%; align-items: center;}
.thumbSwiper .swiper-slide {height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.thumbSwiper .swiper-slide img {width: 68.571%; max-height: 60vh; object-fit: contain;}
.thumbSwiper .swiper-button-next {right: 4rem; background-image: url("../images/icon_t_swiper_next.svg");}
.thumbSwiper .swiper-button-prev {left: 4rem; background-image: url("../images/icon_t_swiper_prev.svg");}
.thumbSwiper .swiper-button-next, .thumbSwiper .swiper-button-prev {background-repeat: no-repeat; background-size: cover; background-position: center; width: 8rem; height: 8rem;}

/* 고객지원: partnerCS */
#partnerCS .sub-banner {background: url("../images/banner_cs.jpg") no-repeat center/cover;}
#partnerCS .dl-thumb-list ul li button:hover + .tit {color: #DC202E;}
#partnerCS .search-filter {background: #F5F5F5; padding: 4rem;}
 .label {font-size: 1.8rem; height: 5rem; line-height: 5rem;}
#partnerCS .search-filter .label:not(.system-detail .label) {min-width: 9.2rem; display: inline-flex;}
#partnerCS .system-detail {display: flex; align-items: start; margin-left: 4rem;}
#partnerCS .system-detail .label {margin-right: 3rem; min-width: fit-content;}
#partnerCS .check-wrap {margin-left: 2.5rem;}
#partnerCS .check-wrap .common-check ~ .common-check {margin-left: 2.5rem;}
#partnerCS .common-check:not(.check-wrap .common-check),#partnerCS .check-wrap .common-check div {height: 5rem;}
#partnerCS .check-wrap .common-check div {height: 3.2rem;}
#partnerCS .search-filter .common-search {justify-content: flex-start; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #D9D9D9;}
#partnerCS .dw-btn {width: 2.6rem; height: 2.3rem; background: url("../images/icon_download.svg") no-repeat center/cover;}
#partnerCS .sort {position: relative; padding-right: 2.4rem;}
#partnerCS .sort:after {content: ''; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: url("../images/icon_arrow_down_button_02.svg") no-repeat right center/cover; width: 2rem; height: 2rem;}
#partnerCS .sort.active:after {transform: rotate(180deg);}

#partnerCS .map-list-wrap {display: flex; margin-top: 6.2rem;}
#partnerCS .map-list {width: 33.6rem; border: 1px solid #DEDEDE; height: 80rem; overflow-y: auto;}
#partnerCS .map-list li {padding: 2.8rem;}
#partnerCS .map-list li ~ li {border-top: 1px solid #DEDEDE;}
#partnerCS .map-list li p {color: #222222; font-size: 1.8rem; font-weight: 700; margin-bottom: 1.2rem;}
#partnerCS .map-list li span {color: #444444; word-break: break-all;}
#partnerCS .map-list li.active {border: 1px solid #DC202E;}
#partnerCS .map-list li.active p {color: #DC202E;}
#partnerCS .map-list::-webkit-scrollbar {width: 2rem; background: transparent;}
#partnerCS .map-list::-webkit-scrollbar-thumb {background: #CCCCCC; border-radius: 1rem; background-clip: padding-box;
    border: 4px solid transparent;}
#partnerCS .map-list::-webkit-scrollbar-track {background: #F5F5F5; border-left: 1px solid #DEDEDE;}
#partnerCS .map-area {border: 1px solid #DEDEDE;}
#partnerCS .map-info > div {padding-right: 3.5rem;}
#partnerCS .common-tab > div {padding-top: 2.4rem;}

#partnerCS .cs-visual {width: 192rem; margin: 0 auto; color: #FFFFFF; background: url("../images/visual_cs.jpg") no-repeat center/cover; padding: 8rem 33rem 5.6rem;}
#partnerCS .cs-visual .title {margin-bottom: 4.8rem;}
#partnerCS .cs-visual .title h4 {font-size: 4rem; font-weight: 700; margin-bottom: 2.4rem;}
#partnerCS .cs-visual .title p {font-size: 1.8rem;}
#partnerCS .cs-visual .number span {font-size: 1.8rem; font-weight: 700;}
#partnerCS .cs-visual .number p {margin-top: 0.8rem; font-size: 3.2rem; font-weight: 700;}
#partnerCS .cs-visual .box {margin-top: 4rem; display: flex; background: rgba(255, 255, 255, 0.9); color: #000000;}
#partnerCS .cs-visual .box > div {width: 100%; padding: 3.4rem 4rem 2.4rem; display: flex; align-items: center; justify-content: space-between;}
#partnerCS .cs-visual .box p {font-size: 1.8rem; font-weight: 700; margin-bottom: 1.2rem;}
#partnerCS .cs-visual .box .icon {display: block; width: 8rem; height: 8rem; background-color:
#FFFFFF; border-radius: 50%; background-repeat: no-repeat; background-size: 4.8rem; background-position: center;}
#partnerCS .cs-visual .box .icon.school {background-image: url("../images/icon_school_red.svg");}
#partnerCS .cs-visual .box .icon.setting {background-image: url("../images/icon_setting_red.svg");}

#partnerCS .table-wrap h4 {color: #222222; font-size: 2.2rem; line-height: 3.4rem;}
#partnerCS .common-table {margin-top: 1.6rem;}

/* 대리점공간: agencySpace */
#agencySpace .sub-banner {background: url("../images/banner_agency.jpg") no-repeat center/cover;}
#agencySpace .snb li.link a {padding-right:  2.8rem; background: url("../images/icon_snb_link.svg") no-repeat right center/2.4rem;}
#agencySpace .check-wrap {width: 83.019%;}
#agencySpace .common-check {width: 100%;}
#agencySpace .check-wrap .common-check {display: block;}
#agencySpace .common-check div {height: 3.2rem;}
#agencySpace .common-check div ~ div {margin-top: 1.2rem;}
#agencySpace p.label {margin: 2rem 0; height: unset; line-height: 2.4rem; font-size: 1.6rem;}
#agencySpace .custom-file p.label {margin: 0 0.8rem 0 0;}
#agencySpace .custom-file .label {height: 4rem; line-height: 4rem; min-width: 4.8rem; font-size: 1.6rem; margin-right: 0.8rem;}
#agencySpace .custom-file > div {position: relative; display: flex; width: 100%;}
#agencySpace .custom-file .delete-btn {position: absolute; right: 0.8rem; top: 0; bottom: 0; margin: auto; width: 2.8rem; height: 2.8rem; background: url("../images/delete_btn.svg") no-repeat center/cover;}
#agencySpace .notice-txt {display: flex; align-items: center; margin-top: 1.2rem; color: #767676;}
#agencySpace .notice-txt:before {display: block; content: ''; width: 0.267rem; height: 0.267rem; background: #767676; border-radius: 50%; margin-right: 0.867rem;}

/* loginJoin */
#loginJoin {margin-top: 8rem;}
#loginJoin .inner {padding: 10rem 0 12rem; width: 80rem; margin: 0 auto;}
#loginJoin .title {font-size: 6rem; font-weight: 700; text-align: center; margin-bottom: 6rem;}
#loginJoin .cont-box {width: 100%; background: #FFFFFF; padding: 6rem 0; display: flex; flex-direction: column; align-items: center;}
#loginJoin .cont-box .input-wrap input {max-width: unset;}
#loginJoin .btn-wrap button {border-radius: 0.4rem; font-size: 1.8rem; font-weight: 700; margin-top: 4.8rem;}
#loginJoin .btn-wrap button ~ button {margin-left: 1.2rem;}
#loginJoin .common-check label {font-size: 1.6rem;}
#loginJoin .link-wrap {display: flex; align-items: center;}
#loginJoin .link-wrap a {display: flex; align-items: center;}
#loginJoin .link-wrap a ~ a:before {display: block; content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #D9D9D9; margin: 0 1.2rem;}

#loginJoin .step {margin-bottom: 4rem;}
#loginJoin .step ul {display: flex; align-items: center; justify-content: center;}
#loginJoin .step ul li {display: flex; flex-direction: column; align-items: center; position: relative}
#loginJoin .step ul li div {display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; background-color: #FFFFFF;}
#loginJoin .step ul li div span {color: #767676; font-size: 2.2rem; font-weight: 700;}
#loginJoin .step ul li div.icon {position: relative; background-color:#AAAAAA; background-repeat: no-repeat; background-size: 2.4rem; background-position: center;}
#loginJoin .step ul li.active div.icon {background-color:#DC202E;}
#loginJoin .step ul li div.icon span {display: none;}
#loginJoin .step ul li:nth-child(1) div.icon {background-image: url("../images/icon_check_done.svg");}
#loginJoin .step ul li:nth-child(2) div.icon {background-image: url("../images/icon_edit.svg");}
#loginJoin .step ul li:nth-child(3) div.icon {background-image: url("../images/icon_file_check.svg");}
#loginJoin .step ul li ~ li {margin-left: 6rem;}
#loginJoin .step ul li ~ li:before {position: absolute; left: -6rem; top: 2.9rem; display: block; content: ''; width: 6rem; height: 0.2rem; background: #D9D9D9;}
#loginJoin .step ul li p {font-weight: 700; color: #767676; margin-top: 0.8rem;}
#loginJoin .step ul li.active p {color: #DC202E;}

#loginJoin .cont-box.join {padding: 6rem 8rem; display: block;}
#loginJoin .cont-box.done {padding: 4rem 8rem;}
#loginJoin .cont-box.join > div ~ div,#loginJoin .cont-box.join .txt ~ label  {margin-top: 2.4rem;}
#loginJoin .cont-box.join .txt {display: block; color: #4CAF50; margin-top: 0.8rem;}
#loginJoin .cont-box.join .ok-txt,#loginJoin .cont-box.login-join .ok-txt {color: #4CAF50; display: block;}
#loginJoin .cont-box.join .error-txt,#loginJoin .cont-box.login-join .error-txt {color: #DC202E; display: block;}
#loginJoin .cont-box.join input.ok {border-color: #4CAF50; background: url("../images/icon_ok_green.svg") no-repeat right 1.6rem center/2.4rem; padding-right: 5rem;}
#loginJoin .cont-box.join input.error {border-color: #DC202E; color: #DC202E;}
#loginJoin .cont-box.login-join .input-wrap {display: block;}
#loginJoin .cont-box.login-join .txt {width: 40rem; white-space: break-spaces}
#loginJoin .policy-box {border: 1px solid #EEEEEE;}
#loginJoin .policy-box > div:first-child {padding: 1.2rem 2.4rem; border-bottom: 1px solid #EEEEEE;}
#loginJoin .policy-box > div:last-child {margin: 1.6rem 2.4rem;  color: #767676; height: 12rem; overflow-y: auto;}
#loginJoin .policy-box > div:last-child p {line-height: 2.4rem;}
#loginJoin .policy-box .common-check span {color: #DC202E;}
#loginJoin .input-wrap .timer {width: 100%;}
#loginJoin .join-check {text-align: center;}
#loginJoin .join-check img {margin-bottom: 1.2rem;}
#loginJoin .join-check p {font-size: 2.4rem;}

/* 적용분야 */
#areaApp .sub-banner {background-image: url("../images/banner_area.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;}
#areaApp .sub-banner.facilities {background-image: url("../images/banner_culture.jpg");}
#areaApp .sub-banner.biz {background-image: url("../images/banner_business.jpg");}
#areaApp .sub-banner.gym {background-image: url("../images/banner_gym.jpg");}
#areaApp .sub-banner.reside {background-image: url("../images/banner_residential.jpg");}

#areaApp .banner-cont {background-image: url("../images/area_banner_01.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; height: 64rem;}
#areaApp .banner-cont.studio {background-image: url("../images/area_banner_02.jpg");}
#areaApp .banner-cont.gym {background-image: url("../images/area_banner_03.jpg");}
#areaApp .banner-cont.audio {background-image: url("../images/area_banner_04.jpg");}
#areaApp .banner-cont.culture {background-image: url("../images/area_banner_05.jpg");}
#areaApp .banner-cont.religion {background-image: url("../images/area_banner_06.jpg");}
#areaApp .banner-cont.bdc {background-image: url("../images/area_banner_07.jpg");}
#areaApp .banner-cont.conference {background-image: url("../images/area_banner_08.jpg");}
#areaApp .banner-cont.auditorium {background-image: url("../images/area_banner_09.jpg");}
#areaApp .banner-cont.factory {background-image: url("../images/area_banner_10.jpg");}
#areaApp .banner-cont.security {background-image: url("../images/area_banner_11.jpg");}
#areaApp .banner-cont.indoor {background-image: url("../images/area_banner_12.jpg");}
#areaApp .banner-cont.outdoor {background-image: url("../images/area_banner_13.jpg");}
#areaApp .banner-cont.apt {background-image: url("../images/area_banner_14.jpg");}
#areaApp .banner-cont.house {background-image: url("../images/area_banner_15.jpg");}
#areaApp .banner-cont .inner {display: flex; flex-direction: column; height: 100%; justify-content: flex-end; padding-bottom: 6rem;}
#areaApp .banner-cont h3 {color: #FFFFFF; font-size: 6rem; font-weight: 700; margin-bottom: 2.4rem;}
#areaApp .banner-cont p {width: fit-content; color: #FFFFFF;}

#areaApp .bg-cont {background: #F5F5F5; padding: 10rem 0;}
#areaApp .bg-cont h4 {color: #222222; font-size: 3.2rem; font-weight: 700; margin-bottom: 2rem;}
#areaApp .bg-cont .detail {margin-top: 4rem;}
#areaApp .bg-cont .detail p {color: #222222; font-size: 2.2rem; font-weight: 700; margin-bottom: 1.6rem;}
#areaApp .bg-cont .detail ul li {color: #767676; display: flex; align-items: center;}
#areaApp .bg-cont .detail ul li:before {display: block; content: ''; width: 0.267rem; height: 0.267rem; border-radius: 50%; background: #888888; margin-right: 0.867rem;}

#areaApp .table-cont {padding: 10rem 0 12rem;}
#areaApp .table-cont h4 {color: #222222; font-size: 3.2rem; font-weight: 700; margin-bottom: 2.4rem;}
#areaApp .table-cont .common-table thead th {background: #F9F9F9; border-bottom: 1px solid #EEEEEE;}
#areaApp .table-cont .common-table tbody td {border-color: #EEEEEE;}
#areaApp .table-cont .common-table tbody td ~ td {border-left: 1px solid #EEEEEE;}

/* 약관동의 */
#loginJoin .policy-box > div:last-child h3,#loginJoin .policy-box > div:last-child h4 {margin-bottom: 1rem;}
#loginJoin .policy-box > div:last-child p + h4,#loginJoin .policy-box > div:last-child ul + h4,#loginJoin .policy-box > div:last-child ul + h3,#loginJoin .policy-box > div:last-child p + h3,#loginJoin .policy-box > div:last-child p + p,#loginJoin .policy-box > div:last-child p + ul,#loginJoin .policy-box > div:last-child ul > li + li {margin-top: 1rem;}

/* animation */
@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}

@media all and (max-width: 1440px) {
    #productMain .bannerSwiper .slide-cont {left: 13.542%;}
    #productMain .bannerSwiper .swiper-controller {left: 13.542%; top: 24.074%;}
    #productMain .business .cont-wrap,#productMain .product {padding-left: 13.542%;}
    #productMain .businessSwiper {width: 59.375%; height: 64.815%;}
    #productMain .businessSwiper .swiper-wrapper {width: 71.93%;}
    #productMain .business .swiper-pagination-fraction {margin-top: 18.333%; margin-bottom: 4.444%;}
    #productMain .businessSwiper #bullets {width: 35.088%;}
    #productMain .businessSwiper .swiper-pagination-bullet {}
    #productMain .sec-tit {margin-bottom: 2.963%;}
    #partnerCS .cs-visual{padding: 4.166% 1.718% 2.916%; width: 100%;}
}

/*24-12-02*/
#productMain .qMenu a.interact span{background-image: url("../images/quick_inact.svg");}
#productMain .qMenu a.interact:hover{background: #3C3C3B;}
#productMain .qMenu a.interact:hover span{background-image: url("../images/quick_inact_hv.svg")}