@charset "UTF-8";


/* 메인배너 */
.banner-outer-container {width: 100%; overflow: hidden; }
.banner-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}
.banner-wrapper {display: flex;	transition: transform 0.5s ease;}
.banner-slide {flex: 0 0 100%;  max-width: 100%;}
.banner-slide img {width: 100%;	height: auto;display: block;}
.banner-slide.inactive img {opacity: 0.5; transition: opacity 0.3s ease;}
.banner-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.banner-controls button {
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 18px;
	border-radius: 5px;
	pointer-events: auto;
}
.banner-indicators {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	z-index: 10;
}
.banner-indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	margin: 0 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.banner-indicator.active {background-color: #000;}

@media (min-width: 768px) {
    .banner-slide {flex: 0 0 50%; max-width: 50%;}
}
@media (min-width: 1024px) {
    .banner-slide {flex: 0 0 calc(100% / 3); max-width: calc(100% / 3);}
}

/* 소형 배너 */
.ms-container {
    width: 100%;
    max-width: 1400px;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.ms-container p {flex: 0 0 calc(33.33% - 20px); box-sizing: border-box; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.ms-container p:hover {transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
.ms-container img {width: 100%; height: auto; display: block;}

@media (max-width: 768px) {
    .ms-container {
        flex-direction: column;  padding: 0 20px; margin: 10px auto;}
    .ms-container p {
        flex: 0 0 100%; margin-bottom: 10px;}
    .ms-container p:last-child {margin-bottom: 0;}
}

/* 배송대행 구매대행 신청 */
.delivery-container {
  max-width: 1400px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.delivery-item {flex: 0 0 calc(33.33% - 20px); margin-bottom: 20px;}
.delivery-icon-title {display: flex; align-items: center; margin-bottom: 10px; justify-content: center;}
.delivery-icon-title img {margin-right: 10px;}
.delivery-icon-title h3 {font-size: 25px; font-weight: 600; margin: 0;}
.delivery-button {
  background-color: #4a90e2;
  border-radius: 25px;
  padding: 15px;
  text-align: center;
}
.delivery-button p {color: white; margin: 0; font-size: 16px;}
.dbuttonBg1 {background-color: #5b5bff;}
.dbuttonBg2 {background-color: #ff025a;}
.dbuttonBg3 {background-color: #bd18ff;}

@media (max-width: 768px) {
  .delivery-container {flex-direction: column;  padding: 0 20px;}
  .delivery-item {flex: 0 0 100%; margin-bottom: 30px;}
  .delivery-icon-title {justify-content: center;}
  .delivery-button {padding: 12px;}
  .delivery-button p {font-size: 14px;}
}
/* 배송대행이란 구매대행이란 배송비용안내 등등 */
.icon-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 10px;
}
.icon-item {
	display: flex;
	align-items: center;
	width: calc(25% - 20px);
	margin-bottom: 20px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.3s ease;
}
.icon-item:hover {box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.icon {
	margin-right: 25px;
	margin-left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}
.icon-item:hover .icon {transform: translateY(-5px);}
.icon img {width: 100%; height: 100%;}
.text {flex: 1; text-align: center; font-size: 17px; font-weight: 600; border-left: 1px solid #ccc;  padding-left: 10px;}

@media (max-width: 1024px) {
	.icon-grid {margin-top: -50px;}
	.icon-item {width: calc(50% - 10px);}
	.icon {margin-right: 5px; margin-left: 3px;}
}
/* 유투브 섹션 */
.youtube-section {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}
.youtube-section img {max-width: 100%; height: auto;}

@media (max-width: 768px) {
	.youtube-section {flex-direction: column; padding: 0 5px; gap: 10px;}
	.youtube-section p {margin: 0;}
}

/* 공지사항 */
.notice-info-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 30px auto 40px auto;
    gap: 30px;
}
.notice-info-section {background-color: #f0f5fe; border-radius: 5px; overflow: hidden;}
.notice-info-title {
    font-size: 22px;
    font-weight: 550;
    padding: 20px 20px;
    color: white;
    margin: 0;
    font-style: normal;
	text-align: center;
}
.notice-title-right {float: right;}
.notice-title-center {text-align: center;}
.notice-info-title a {color: white;}
.notice-main {flex: 2; width: 100%;}
.notice-main .notice-info-title {background-color: #0052CC;}
.inventory-section,
.shipping-section {flex: 1;}
.inventory-section .notice-info-title,
.shipping-section .notice-info-title {background-color: #00bae9;}
.notice-info-content {padding: 0 20px 20px 20px;}
.notice-list {list-style-type: none; padding: 0; margin-top: 20px;}
.notice-item {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notice-item::before {
    content: 'N';
    position: absolute;
    left: 0;
    color: #0042e9;
    font-weight: bold;
}
.notice-item a {color: #000;}
.notice-item a:hover {color: #000;}
.notice-icon-container {text-align: center; margin-top: 20px;}
.notice-icon-container img {height: auto; margin-top: 5px;}
.notice-view-more {
    display: block;
    text-align: center;
    font-weight: 550;
    margin-top: 10px;
    color: #666;
    text-decoration: none;
}
@media screen and (max-width: 1024px) {
    .notice-info-container {display: block; padding: 0 10px;}
    .notice-main {width: 100%; margin-bottom: 20px;}
    .inventory-section,
    .shipping-section {width: calc(50% - 10px);  float: left;}
    .shipping-section {float: right;}
    .notice-info-container::after {content: ""; display: table; clear: both;}
}

/* 배송/구매대행 절차 */
.tab-container {max-width: 1400px; width: 100%; margin: 0 auto; border-bottom: 1px solid #f7913d;}
.tab-buttons {display: flex; justify-content: center; border-bottom: 1px solid #f7913d;}
.tab-button {
	background-color: #fef2e6;
	padding: 20px 50px;
	border: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
}
.tab-button.active {background-color: #f7913d; color: white; font-size: 22px; font-weight: 600;}
.tab-content {display: none; padding: 20px;}
.tab-content.active {display: block;}
.steps {display: flex; justify-content: space-between;flex-wrap: wrap; margin-top: 15px;}
.step {text-align: center; width: 18%; margin-bottom: 20px;}
.step-number {
	background-color: #f7913d;
	color: white;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
}
.step img { margin-bottom: 10px;}
.step-title {font-weight: bold;	margin-bottom: 10px;}
.step-description {font-size: 16px; font-weight: 500;}

 @media (max-width: 1024px) {
	.steps {justify-content: space-around;}
	.step {width: 45%; margin-bottom: 30px;}
	.step:last-child {width: 45%; margin-right: auto; margin-left: 0;	}
}

/* 고객센터 */
.contact-center {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
	margin-top: 40px;
	align-items: center;
}
.contact-header {display: flex; align-items: center; margin-bottom: 20px; justify-content: center;}
.c-icon img {margin-right: 20px;}
.title h2 {margin: 0; font-size: 24px; font-weight: 600;}
.title p {margin: 5px 0 0; font-size: 18px; font-weight: 600;}
.operating-hours {
	margin: 0 auto;
	background-color: #1e3a8a;
	color: white;
	padding: 10px 20px;
	border-radius: 25px;
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
	max-width: 70%;
}
.notice {text-align: center; font-size: 18px; margin: 30px auto; font-weight: bold; color: #959595;}
.contact-numbers {display: flex; justify-content: space-between; gap: 20px;}
.contact-box1,.contact-box2,.contact-box3 {
	flex: 1;
	border: 1px solid #b3b3b3;
	padding: 20px;
	text-align: center;
	
}
.contact-box1 p ,.contact-box2 p ,.contact-box3 p {margin: 0 0 10px; font-size: 18px; font-weight: bold;}
.contact-box1 h3,.contact-box2 h3,.contact-box3 h3 {margin: 0; font-size: 28px; font-weight: bold;}
.contact-box1 h3 a,.contact-box2 h3 a,.contact-box3 h3 a {color: #000;}
.contact-box1 h3 a:hover,.contact-box2 h3 a:hover,.contact-box3 h3 a:hover {color: #000;}
.contact-box1,.contact-box3 {background-color: #f1f5f9;}

@media (max-width: 768px) {
	.contact-header {flex-direction: column; text-align: center;}
	.c-icon img {margin-right: 0; margin-bottom: 10px;}
	.notice {text-align: center; font-size: 14px; font-weight: bold; color: #959595;}
	.operating-hours {flex-direction: column; align-items: center; font-size: 18px; max-width: 100%; border-radius: 5px;}
	.operating-hours span {margin-bottom: 5px;}
	.contact-numbers {flex-direction: column;}
}
	
/* 계좌정보 */
.account-info-container {display: flex;	width: 100%; background-color: #f0f0f0;}
.account-info {width: 100%;	max-width: 1400px; margin: 20px auto; display: flex; gap: 20px;}
.account-box {flex: 2; background-color: white; padding: 0; display: flex; align-items: center; min-height: 150px}
.account-title {
	width: 33.33%;
	flex-direction: row;
	white-space: nowrap;
    border-right: 1px solid #ccc;
    font-size: 21px; 
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    text-align: center;
}
.account-title img {margin-right: 10px; display: inline-block;}
.account-title span {justify-content: center; align-items: center; display: inline-block;}
.account-details {padding-left: 50px; justify-content: center; align-items: center;}
.account-details h3 {margin: 0 0 10px 0; font-weight: bold; font-size: 24px;}
.details-f1 {font-size: 20px; font-weight: bold;}
.details-f2 {font-size: 16px; font-weight: bold;}
.account-details p {margin: 5px 0; justify-content: center;}
.info-box {
	flex: 1;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
}
.info-section {
	flex: 1 0 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px;
	box-sizing: border-box;
}
.info-section:nth-child(1),
.info-section:nth-child(2) {border-bottom: 1px solid #ccc; text-align: center;}
.info-section:nth-child(1),
.info-section:nth-child(3) {border-right: 1px solid #ccc; text-align: center;}
.info-section:nth-child(4) {text-align: center;}
.info-section-rate {font-size: 24px;  color: #CF0508; font-weight: bold; margin-top: 5px;}
.info-section-txt {font-size: 18px;  color: #000; font-weight: bold; margin-top: 5px;}
.unipass-icon, .hs-code-icon {margin-bottom: 3px; margin-top: -5px;}
.info-section a {color: #000;}
.info-section a:hover,.contact-box2 h3 a:hover,.contact-box3 h3 a:hover {color: #000;}

@media (max-width: 1024px) {
    .account-info {flex-direction: column;}
    .account-box {flex-direction: column; width: 100%;  margin: 0 5px;}
    .account-title {
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding: 20px 0;
        margin-bottom: 10px;
        width: 100%;
		height: 80px;
		flex-direction: row;
        justify-content: center;
    }
    .account-details {padding: 20px 0;}
    .info-box {width: 100%; margin-top: 0;}
    .info-section {flex: 1 0 50%;}
    .info-section:nth-child(1),
    .info-section:nth-child(2) {border-bottom: 1px solid #ccc;}
    .info-section:nth-child(1),
    .info-section:nth-child(3) {border-right: 1px solid #ccc;}
    .info-section:nth-child(3),
    .info-section:nth-child(4) {border-bottom: none;}
}

/* 중국배너 */
.partner-logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 40px auto;
    padding: 20px;
}
.logo-container {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    margin: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}
.logo-container img {max-width: 100%; height: auto; object-fit: contain;}

@media (max-width: 768px) {
    .logo-container {min-width: 150px;}
}

/* 주소탭 */
.cn-address-container {
	display: flex;
	max-width: 1400px;
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 50PX;
}
.cn-address-tab-menu {
    margin: 5px 0;
	padding: 5px;
	width: 25%;
    margin: 5px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
	padding: 5px;
}
.cn-address-tab {
	display: flex;
    justify-content: space-between;
	border-bottom: 5px solid #fee3ce;
    align-items: center;
    width: 100%;
    padding: 25px 15px;
    border: none;
    background-color: #fee3ce;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    font-size: 22px;
    text-overflow: ellipsis;
}
.cn-address-tab:last-child {margin-bottom: 0; border-bottom: none;}
.cn-address-tab.active {background-color: #fc7b16; color: white; border-bottom: 5px solid #fc7b16;}
.cn-address-content {width: 75%; background-color: white; padding: 30px;}
.cn-address-panel {display: none;}
.cn-address-panel.active {display: block;}
.cn-address-zipcode {
	color: red;
	font-weight: bold;
	font-size: 21px;
	margin-bottom: 10px;
	margin-top: 20px;
}
.cn-address-detail,
.cn-address-contact {margin-bottom: 10px; margin-top: -7px;}

@media (max-width: 768px) {
  .cn-address-container {flex-direction: column; border: none;}
  .cn-address-tab-menu {gwidth: 100%; display: contents; gap: 0; padding: 0;}
  .cn-address-tab {margin-bottom: 0; padding: 20px; width: 100%; margin: 0; border-bottom: 1px solid #ccc;}
  .cn-address-tab:last-child {margin-bottom: 0; border-bottom: none;}
  .cn-address-content {width: 100%; padding: 0;}
  .cn-address-panel {display: none;	padding: 15px;	border-bottom: 1px solid #ccc;	background-color: white;}
  .cn-address-panel.active {display: block;}
}




/* ---------------------------------- */
/* Popup
------------------------------------- */
.main-popLayer{display:block;}
.layer-popup{position:fixed;top:0px;left:0px; width:100%; height:auto; z-index:1000; background:rgba(0,0,0,0.7); display:flex;flex-wrap: wrap; flex-direction: column; /*수직 정렬*/ align-items: center; justify-content: center;}
.layer-popup .main-popup-box{position:relative; } /*background:#fff; padding:5px;*/
.layer-popup .popup-title{background:#4d5980; overflow:hidden;display: flex;}
.layer-popup .popup-title a{ display:block ; float:left; padding:5px; color:#fff; flex: 1; text-align:center;line-height:20px; }
.layer-popup .popup-title a.active{ color:#ebf812;}
.layer-popup .popup-img p{margin:0px;}
.layer-popup .popup-x{position:absolute; top:-30px; right:-30px}
.layer-popup .popup-x a{display:block; width:30px; height:30px; line-height:30px; text-align:center;font-weight:bold; font-size:30px; color:#fff}
.layer-popup .NotOpen{position:absolute; top:0px; left:50%; margin-left:-75px}
.layer-popup .NotOpen{font-size:12px; display:block; width:150px; height:30px; line-height:30px; text-align:center; border-radius:15px; background:#4d5980; color:#fff}


.main-popup{position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:9999; background:rgba(0,0,0,0.7); display:flex;flex-wrap: wrap; flex-direction: column; /*수직 정렬*/ align-items: center; justify-content: center;}
.main-popup .main-popup-box{width:770px;background:rgba(255,255,255,0.1); position:relative; padding:5px; }
.main-popup .popup-title{background:#4d5980; overflow:hidden;display: flex;}
.main-popup .popup-title a{ display:block ; float:left; padding:5px; color:#fff; flex: 1; text-align:center;line-height:20px; }
.main-popup .popup-title a.active{ color:#ebf812;}
.main-popup .popup-img p{margin:0px;}
.main-popup .popup-x{position:absolute; top:-30px; right:0px}
.main-popup .popup-x a{display:block; width:30px; height:30px; line-height:30px; text-align:center;font-weight:bold; font-size:30px; color:#fff}
.main-popup .NotOpen{position:absolute; bottom:-30px; left:50%; margin-left:-75px}
.main-popup .NotOpen{font-size:12px; display:block; width:150px; height:30px; line-height:30px; text-align:center; border-radius:15px; background:#4d5980; color:#fff}
.main-popup .main-popup-box .popup-sub-box{width:370px;float:left;overflow:hidden;margin:5px; height:260px;}
/* 팝업> 공지사항 */
.main-popup .main-popup-box .popup-sub-box.Notice{background:rgba(255,255,255,0.9); padding: 5px; letter-spacing:-0.1em; line-height:20px;}

@media(max-width:1099px){
.main-popup .main-popup-box{width:900px;}
.main-popup .main-popup-box .popup-sub-box{width:48%;float:left;overflow:hidden;margin:5px;}
.main-popup .main-popup-box .popup-sub-box p{margin:0;}
}

@media(max-width:995px){
.main-popup .main-popup-box{padding:10px; width:100%;}
.main-popup .main-popup-box .popup-sub-box{width:49%;height:auto;margin:0px; margin-bottom:0px;}
}

@media(max-width:768px){
.main-popup .main-popup-box .popup-sub-box:nth-child(odd){margin-right:2%;}
.main-popup .popup-title a{ padding:10px 5px; }
.main-popup .popup-x{right:30px}
}

@media (max-width: 576px) {
	.youtube-section {width:100%;}
	.youtube-section p {width:100%;}
	.youtube-section iframe {width:100%;}
}

@media (max-width: 480px) {
	.youtube-section {width:100%;}
	.youtube-section p {width:100%;}
	.youtube-section iframe {width:100%;}
}