@charset "utf-8";

/***************************************************************************************************
*	Main Title : 2023.01.06
***************************************************************************************************/
.main_title						{position:relative; display:flex; align-items:center; margin:60px auto 20px auto; max-width:var(--max-width);}
.main_title .title_txt			{flex-shrink:0; font-family:celmonHG; font-size:1.750rem; color:#242A30; font-weight:400; letter-spacing:0px; margin-right:20px;}
.main_title .title_line			{flex-grow:1; height:1px; width:90%; background-color:rgba(0, 0, 0, 0.04);}

@media screen and (max-width:980px){
	.main_title					{margin:30px auto 10px auto;}
	.main_title .title_txt		{font-size:1.125rem; font-weight:600;}
}

/* Main Article More */
a.ma_more						{width:35px; height:35px; position:relative; display:inline-block; font-size:0; border-radius:var(--round-thin); margin-right:-10px}
a.ma_more:before				{position:absolute; content:""; outline:0.1px solid transparent; box-sizing:content-box; background:#d7dce5; width:3px; height:19px; right:15px; top:7px; border-radius:var(--round-thin)}	
a.ma_more:after					{position:absolute; content:""; outline:0.1px solid transparent; box-sizing:content-box; background:#d7dce5; width:19px; height:3px; right:7px; top:15px;  border-radius:var(--round-thin)}
a.ma_more:hover:before			{transform:rotate(360deg); transition:all 0.7s ease-out; position:absolute; content:""; outline:0.1px solid transparent; box-sizing:content-box; background:var(--IDTcolor); width:3px; height:19px; right:15px; top:7px; border-radius:var(--round-thin)}	
a.ma_more:hover:after			{transform:rotate(360deg); transition:all 0.7s ease-out; position:absolute; content:""; outline:0.1px solid transparent; box-sizing:content-box; background:var(--IDTcolor); width:19px; height:3px; right:7px; top:15px;  border-radius:var(--round-thin)}

@media screen and (max-width:517px) {
	a.ma_more					{width:25px; height:25px; margin-right:0px}
	a.ma_more:before			{width:2px; height:14px; left:11px; top:5px;}	
	a.ma_more:after				{width:14px; height:2px; left:5px; top:11px;}
	a.ma_more:hover:before		{width:2px; height:14px; left:11px; top:5px;}	
	a.ma_more:hover:after		{width:14px; height:2px; left:5px; top:11px;}
}

.main_title em					{visibility:hidden; min-width:85px; height:30px; line-height:30px; padding-left:0; padding:0 10px; border-radius:15px; text-align:center; color:#fff; background-color:var(--IDTcolor); opacity:0; transition:opacity 1s; z-index:10; position:absolute; right:0px; top:25px; transform:translate(0px, 40%); font-size:13px; letter-spacing:-0.5px; box-sizing:border-box;}
.main_title em::after			{position:absolute; content:''; top:-4px; right:4px; transform:translate(-50%, -50%); border-style:solid; border-width:6px; border-color:transparent transparent var(--IDTcolor) transparent} 
.main_title:hover em			{visibility:visible; opacity:1;}



/***************************************************************************************************
*	Main ViSual : 2023.01.13
***************************************************************************************************/
.WRAP_mainVisual								{width:100%; margin:40px auto;}
.SW_mainVisual									{width:100%; height:400px; position:relative;}
.SW_mainVisual .swiper-slide					{height:100%; background-attachment:inherit; background-position:center center;}

/*.SW_mainVisual .swiper-slide img				{display:block; width:100%; height:100%; object-fit:cover;}*/
.SW_mainVisual .swiper-pagination				{position:absolute; left:50%; margin-left:-450px; text-align:left; bottom:20px;}
.SW_mainVisual .swiper-pagination-bullet-active	{opacity:1 !important; background:#FFF !important; outline:none;}
.SW_mainVisual .swiper-pagination-bullet		{margin:0 0px !important; width:12px; height:3px; display:inline-block; border-radius:0; background:#FFF; opacity:0.2;}

.SW_mainVisual .swiper-button-prev, 
.SW_mainVisual .swiper-button-next				{opacity:0; top:50%; width:44px !important; height:44px !important; cursor:pointer; outline:none; background-image:none; z-index:100;
												-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
												background-color:hsla(0,0%,100%,.9); border-radius:100%; border:none; box-shadow:0 2px 4px rgba(0,0,0,.04);}

.SW_mainVisual .swiper-button-prev				{left:50%; margin-left:-450px; opacity:.7; filter:alpha(opacity=70); -ms-filter:alpha(opacity=70); outline:none;}
.SW_mainVisual .swiper-button-prev:after		{position:absolute; top:calc(50% - 6px) !important; left:19px; width:12px; height:12px; border:2px solid #000; border-radius:2px; border-bottom:none; border-left:none; transform:rotate(225deg); content:'';}

.SW_mainVisual .swiper-button-next				{right:50%; margin-right:-450px; opacity:.7; filter:alpha(opacity=70); -ms-filter:alpha(opacity=70); outline:none;}
.SW_mainVisual .swiper-button-next:after		{position:absolute; top:calc(50% - 6px) !important; right:19px; width:12px; height:12px; border:2px solid #000; border-radius:2px; border-bottom:none; border-left:none; transform:rotate(45deg); content:'';}

.SW_mainVisual .swiper-button-prev:hover,
.SW_mainVisual .swiper-button-next:hover		{opacity:1.0; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); border:none;}

@media screen and (max-width:1280px){
	.WRAP_mainVisual							{margin:20px auto;}
}
@media screen and (max-width:980px){
	.WRAP_mainVisual							{margin:0px auto;}
	.SW_mainVisual								{height:35vw !important;}
	.SW_mainVisual .swiper-pagination			{left:0px; margin-left:20px;}
	.SW_mainVisual .swiper-button-prev			{left:0px; margin-left:10px;}
	.SW_mainVisual .swiper-button-next			{right:0px; margin-right:10px;}

	.SW_mainVisual .swiper-button-prev, 
	.SW_mainVisual .swiper-button-next			{width:34px !important; height:34px !important;}

	.SW_mainVisual .swiper-button-prev:after	{position:absolute; top:calc(50% - 4px) !important; left:15px; width:8px; height:8px;}
	.SW_mainVisual .swiper-button-next:after	{position:absolute; top:calc(50% - 4px) !important; right:14px; width:8px; height:8px;}
}

@media screen and (max-width:500px) {
	.SW_mainVisual								{height:55vw !important;}
	.SW_mainVisual .swiper-pagination-bullet	{width:12px; height:3px; display:inline-block; background:#FFF; opacity: .2;}

	.SW_mainVisual .swiper-button-prev, 
	.SW_mainVisual .swiper-button-next			{opacity:0;}
	.SW_mainVisual .swiper-button-prev			{left:-6%;  background-size:50px 50px; outline:none;}
	.SW_mainVisual .swiper-button-next			{right:-6%; background-size:50px 50px; outline:none;}
	.SW_mainVisual:hover .swiper-button-prev	{left:0px; opacity:0.5;}
	.SW_mainVisual:hover .swiper-button-next	{right:0px; opacity:0.5;}
	.SW_mainVisual .swiper-button-prev:hover,
	.SW_mainVisual .swiper-button-next:hover	{opacity:1; overflow:visible !important;}
}

/* Visual Structure */
.mainVS					{overflow:hidden; outline:1px solid rgba(0,0,0,0.1); outline-offset:-1px; border-radius:12px; position:relative; width:100%; height:100%;}
.mainVS:after			{content:""; width:100%; height:100%; left:0; top:0; position:absolute; border-radius:inherit; box-shadow:inset 0 0 0 1px rgb(0 0 0 / 10%); pointer-events:none;}

.mainVS_inBox			{border-radius:12px; transition:0.4s transform cubic-bezier(0.76, 0, 0.24, 1); display:flex; align-items:stretch; width:100%; height:100%; overflow:visible;}
.mainVS_inBox a			{width:100%}
.leftCnt				{width:100%; height:400px; overflow:hidden; background:var(--IDTcolor); display:flex; justify-content:space-between; color:#ffffff; position:relative; cursor:pointer;}
.leftCnt:before			{content:""; width:100%; height:100%; position:absolute; top:0; left:0; border-radius:inherit; opacity:0; transition:0.15s; pointer-events:none; transform:;}
.leftCnt_inBox			{display:flex; width:100%; flex-direction:column; align-items:flex-start; padding:50px;}

.MVS_imgArea			{display:block; width:50%; /* 비율조절 */object-fit:cover; height:-webkit-fill-available; opacity:0.9; box-shadow:0 0 160px 0 rgb(0 0 0 / 12%); outline:1px solid rgba(255,255,255,0.1); outline-offset:-1px;}

.txtArea1				{display:flex; font-size:12px; line-height:1; color:rgba(255, 255, 255, 0.6); font-weight:500; align-items:center; margin-top:10px; margin-bottom:8px; white-space:nowrap;}
.txtArea1 em			{display:block;color:rgba(255, 255, 255, 0.8);}
.txtArea1 em:after		{content:""; display:inline-block; width:1px; height:10px; background-color:currentColor; opacity:0.2; margin:0 12px; vertical-align: -1px;}

.txtArea2				{color:#ffffff; font-family:celmonHG; font-size:28px; letter-spacing:-1px; line-height:1.5; font-weight:700; text-decoration:underline; text-underline-offset:7px;}
.txtArea3				{color:rgba(255, 255, 255, 0.8); font-size:14px; margin-top:16px;}

@media (max-width:980px) {
	.mainVS				{border-radius:0px; }
	.mainVS_inBox		{display: block; border-radius:0px;}

	.leftCnt			{height:100%;}
	.leftCnt_inBox		{padding:30px;}

	.MVS_imgArea		{width:50%;}

	.txtArea2			{font-size:22px;}
}

@media (max-width:500px) {
	.mainVS				{border-radius:0px;}

	.leftCnt_inBox		{z-index:1; width:100%; padding:25px;}

	.MVS_imgArea		{position:absolute; width:100%; opacity:0.2;}
}



/****************************************************************************************************
* PARALLAX BANNER ZONE [S] : 2019.09.25 - FUNNY
*****************************************************************************************************/
.parallax-container				{position:relative; background-image:url(/shop/img/main/para_bg.jpg); background-position:center center; background-attachment:fixed; margin:0px auto; background-size:100% auto;}

.parallaxTXTwrap				{clear:both; position:static; display:block; width:100%; margin:0px auto; /*height:600px;*/ text-align:center;}
.parallaxTXTcontents			{position:relative; vertical-align:middle; text-align:center; margin:0px auto; padding:110px 0 110px 0;}
.parallaxTXTcontents a			{display:inline-block;}

.parallaxTXTcontents a .title	{display:inline-block; width:100%; padding:0; font-size:var(--FS-big); font-family:GongGothic; font-weight:900;letter-spacing:-0.05em; color:#FFF; margin-bottom:34px;
								text-shadow: -1px -1px 0 #000, 2px -1px 0 #000, -1px  2px 0 #000, 2px  2px 0 #000;}
.parallaxTXTcontents a .btn		{display:flex;  font-family:var(--FFH); font-size:var(--FS-medium); padding:10px; color:#FFF; font-weight:700; letter-spacing:4px; background-color:rgba(0,0,0,0.5); border:1px solid rgba(0,0,0,0.6); padding:0 27px 0 32px;}
.parallaxTXTcontents a .btn:hover{background-color:rgba(0,0,0,0.9);}

@media screen and (max-width:500px) {
	.parallax-container				{background-size:auto 100%;}

	.parallaxTXTcontents			{padding:50px 0;}
	.parallaxTXTcontents a .title	{font-size:24px; font-family:GongGothic; margin-bottom:14px;}
}

/***************************************************************************************************
*	Only Mobile Main Menu : 2024.04.19
***************************************************************************************************/
.mobile_mainMenu			{display:none;}
.mobile_mainMenu li a		{display:flex; justify-content:center; align-items:center; flex-direction:column; color:var(--mygray); font-weight:var(--FW700F); letter-spacing:-1px; gap:4px; padding:8px 0px 4px; /*background-color:blue;*/}
.mobile_mainMenu .miconBox	{display:flex; align-items:center; justify-content:center; background-color:var(--mygray009); padding:0.5rem 0.5rem; border-radius:15px;}
.miconBox i					{display:inline-block; width:24px; height:24px; margin:0 0px 0 0; cursor:pointer; transition:all 0.3s;}
.miconTitle					{text-align:center; margin-top:5px; font-size:var(--FS14);}

@media screen and (max-width:980px) {
	.mobile_mainMenu		{display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; list-style:none; margin:0; padding:0;}
	.mobile_mainMenu		{margin-top:10px}
}



/***************************************************************************************************
*	Main Direct Swiper: 2023.03.23
***************************************************************************************************/
.WRAP_direct					{position:relative; max-width:calc(var(--max-width) + 0px); margin:0px auto; padding:20px; overflow:hidden;}
.swiper.SW_direct				{overflow:hidden;}

.SW_direct									{margin:0px auto; width:100%; position:static; padding:0px; overflow:unset;}
.SW_direct:after							{clear:both; display:block; content:"";}

.SW_direct .swiper-button-prev, 
.SW_direct .swiper-button-next				{opacity:0; top:50%; width:50px !important; height:50px !important; cursor:pointer; outline:none; background-image:none; background-color:#FFF; z-index:1 !important;
											-webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; border-radius:100%; border:none; box-shadow:1px 1px 13px rgb(0 0 0 / 30%);}
.SW_direct .swiper-button-prev				{left:-50px; opacity:0; outline:none;}
.SW_direct .swiper-button-prev:after		{position:absolute; top:calc(50% - 8px) !important; left:20px; width:14px; height:14px; border:4px solid var(--mygray); border-radius:2px; border-top:none; border-left:none; -webkit-transform:rotate(135deg); transform:rotate(135deg); -moz-transform:rotate(135deg); content:'';}
.SW_direct .swiper-button-next				{right:-50px; opacity:0; outline:none;}
.SW_direct .swiper-button-next:after		{position:absolute; top:calc(50% - 8px) !important; right:20px; width:14px; height:14px; border:4px solid var(--mygray); border-radius:2px; border-top:none; border-left:none; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -moz-transform:rotate(-45deg); content:'';}
.SW_direct .swiper-button-prev:hover,
.SW_direct .swiper-button-next:hover		{opacity:1.0; border:none; overflow:visible !important; background-color:var(--IDTcolor); box-shadow:none;}
.SW_direct .swiper-button-prev:hover:after,
.SW_direct .swiper-button-next:hover:after	{border-color:#FFF;}

.SW_direct:hover .swiper-button-prev		{left:10px; opacity:1;}
.SW_direct:hover .swiper-button-next		{right:10px; opacity:1;}



@media screen and (max-width:980px) {
	.SW_direct .swiper-button-prev, 
	.SW_direct .swiper-button-next			{top:50%; width:40px !important; height:40px !important; }
	.SW_direct .swiper-button-prev:after	{margin-top:2px; left:15px; width:12px; height:12px; border:3px solid var(--mygray); border-radius:2px; border-top:none; border-left:none;}
	.SW_direct .swiper-button-next:after	{margin-top:2px; right:15px; width:12px; height:12px; border:3px solid var(--mygray); border-radius:2px; border-top:none; border-left:none;}
}


/***************************************************************************************************
*	Special Zone: 2023.03.31
***************************************************************************************************/
.specialZone	{position:relative; width:100%; margin:30px auto; padding:10px 0;
				background:radial-gradient(circle at top left,transparent 9%, #f8f9f8 10% ,#f8f9f8 15% , transparent 16%) , radial-gradient(circle at bottom left,transparent 9%, #f8f9f8 10% ,#f8f9f8 15% , transparent 16%), radial-gradient(circle at top right ,transparent 9%, #f8f9f8 10% ,#f8f9f8 15% , transparent 16%) , radial-gradient(circle at bottom right,transparent 9%, #f8f9f8 10% ,#f8f9f8 15% , transparent 16%),radial-gradient(circle, transparent 25%, #ffffff  26%),linear-gradient(0deg, transparent 44%, #f8f9f8 45%, #f8f9f8 55%, transparent 56%), linear-gradient(90deg, transparent 44%, #f8f9f8 45%, #f8f9f8 55%, transparent 56%);
				background-size:5em 5em;
				background-color:#ffffff;
				opacity:1}
.specialZone .aniBG									{width:100%; max-width:var(--max-width); position:absolute; top:0px; left:50%; transform:translateX(-50%); z-index:0}
.aniBG img[class*='ani_icon_']						{position:absolute; height:auto;}
.aniBG img[class*='ani_icon_'].ani_icon_specialdc	{width:200px; top:60px; left:-230px; animation:ani_updown 3s ease infinite;}
.aniBG img[class*='ani_icon_'].ani_icon_star1		{width:20px; top:150px; left:-70px; animation:ani_blink 2s steps(1, end) infinite;}
.aniBG img[class*='ani_icon_'].ani_icon_star2		{width:30px; top:220px; left:-220px; animation:ani_blink2 2.5s steps(1, end) infinite;}
.aniBG img[class*='ani_icon_'].ani_icon_secret_search{width:80px; top:240px; left:-140px; animation:ani_wobble 5s ease infinite; transform-origin:50% 50%;}
.aniBG img[class*='ani_icon_'].ani_icon_star3		{width:31px; top:270px; right:-110px; animation:ani_blink2 2s steps(1, end) infinite;}
.aniBG img[class*='ani_icon_'].ani_icon_star4		{width:19px; top:310px; right:-80px; animation:ani_blink 2s steps(1, end) infinite;}
.aniBG img[class*='ani_icon_'].ani_icon_discount	{width:70px; top:340px; right:-60px; animation:ani_rotate 6s linear infinite alternate both;}

@media screen and (max-width:980px) {
	.specialZone			{background:none;}
	.specialZone .aniBG		{display:none;}
}