@charset "utf-8";


/******************************************************************************************************************************************
*	SVG Icon Common Control
*******************************************************************************************************************************************/
i.svg_icon							{display:inline-block; width:24px; height:24px; cursor:pointer;}
i.svg_icon.ani_rotate svg:hover		{-webkit-transform:rotate(15deg)!important;-moz-transform:rotate(15deg)!important;-o-transform:rotate(15deg)!important;transform:rotate(15deg)!important; transition: all 0.3s;}

.svg_icon.scrap						{fill:#555555; color:#555555; stroke-width:0;/*stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:2; stroke:#444444;*/}
.svg_icon.scrap_white				{fill:#FFFFFF; color:#FFFFFF;}
.svg_icon.svg_blank					{fill:#FFFFFF; color:#FFFFFF; stroke-width:2.0;}

/******************************************************************************************************************************************
*	Common Image Icon Control
*******************************************************************************************************************************************/
.CIIBOX									{position:absolute; top:50%;  margin-top:-10px; font-size:0;}

i.common_icon							{font-size:0px; display:inline-block; width:20px; height:20px; background:url('/img/common/common_icon.png') no-repeat 0px 0px; background-size:300px auto; z-index:1}
i.common_icon.icon_playlist				{width:20px; height:20px; background-position:-40px 0px;}
i.common_icon.icon_play					{width:20px; height:20px; background-position:0px 0px;}
i.common_icon.icon_play:hover			{width:20px; height:20px; background-position:-20px 0px;}
i.common_icon.icon_question				{width:20px; height:20px; background-position:-60px 0px;}
i.common_icon.icon_download				{width:20px; height:20px; background-position:-80px 0px;}
i.common_icon.icon_tel					{width:20px; height:20px; background-position:-100px 0px;}
i.common_icon.icon_building				{width:20px; height:20px; background-position:-120px 0px;}
i.common_icon.icon_website				{width:20px; height:20px; background-position:-140px 0px;}


/******************************************************************************************************************************************
*	CSS Icon Common Control
*******************************************************************************************************************************************/
.cssIcon:before, 
.cssIcon:after			{position:absolute; content: ""; outline:0px solid transparent; box-sizing:content-box; -moz-box-sizing:content-box;}
.cssIcon				{position:relative; width:25px; height:25px}
.cssIcon.x:before		{background:#111; height:16px; width:1px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.cssIcon.x:after		{background:#111; height:16px; width:1px; -moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}

.cssIcon.balloon:before	{background-color:#eb3300; border-radius:50px 50px 0; height:26px; width:26px; left:0px; top:0px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.cssIcon.balloon:after	{content:'A'; display:block; font-style:normal; font-size:16px; font-weight:700; width:26px; height:26px; line-height:26px; margin-bottom:12px;  color:#FFF; text-align:center}

.cssIcon.minus:after	{background:#777; width:9px; height:1px; top:13px; left:9px; transform:rotate(0deg);}
.cssIcon.plus:after		{background:#777; width:9px; height:1px; top:13px; left:9px; transform:rotate(0deg);}
.cssIcon.plus:before	{background:#777; width:1px; height:9px; top:9px; left:13px;}

.cssIcon.home:before	{border-bottom:10px solid #FFF; border-left:12px solid rgba(0, 0, 0, 0); border-right:11px solid rgba(0, 0, 0, 0); border-radius:3px;}
.cssIcon.home:after		{border-left:6px solid #FFF; border-right:6px solid #FFF; border-top:6px solid #FFF; top:9px; left:3px; width:5px; height:6px; border-radius:3px;}

.cssIcon.bottomarrow:before {top:2px; right:0; border-width:5px 5px 5px; border-radius:2px; border-style:solid; border-color:#FFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);} /* NAV Top, Subpage Path Select */

.cssIcon.icon_bigcheck:before		{border-radius:1px; border-right:16px solid var(--IDTcolor); border-top:16px solid var(--IDTcolor); height:40px; left:-35px; top:-20px; width:70px;
									-moz-transform:rotate(135deg); -webkit-transform:rotate(135deg);  -o-transform:rotate(135deg); -ms-transform:rotate(135deg);transform:rotate(135deg);}

.CICC 					{position:absolute; content: ""; outline:0px solid transparent; box-sizing:content-box; -moz-box-sizing:content-box;}
.CICC i					{font-size:0px; position:relative;}
.CICC i.arrowL			{clear:both; position:absolute; transition:all 0.2s; top:6px; width:12px; height:12px; border:2px solid #444; border-radius:2px; border-top:none; border-right:none; -webkit-transform:rotate(45deg); transform:rotate(45deg); content:'';}


[class*='icono']				{opacity:1;}
[class*=icono-]					{display:inline-block; vertical-align:middle; position:relative; font-style:normal; color:currentColor; text-align:left; text-indent:-9999px; direction:ltr;}
[class*=icono-], 
[class*=icono-] *				{box-sizing:border-box;}
[class*=icono-]:after, 
[class*=icono-]:before			{content: ''; pointer-events:none;}
[class*=icono-][class*=Circle], 
[class*=icono-][class*=Square]	{border:2px solid;}
[class*=icono-][class*=Circle]	{border-radius:50%; width:20px; height:20px; margin:2px; aspect-ratio:1 / 1;}


[class*=icono-exclamation][class*=Circle]:after {box-shadow: inset 0 0 0 30px, 0 2px, 0 0px, 0 7px; top:3px;}
[class*=icono-exclamation]:after {position:absolute; width:2px; height:3px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}


/*************************************************************************************************************************
*	EDCON - 2024.12.18
**************************************************************************************************************************/
.edcon					{width:60px; text-align:center; color:transparent; background:rgba(0, 0, 0, .9); border-radius:7%; aspect-ratio: 1 / 1; cursor:pointer; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16); overflow:hidden; position:fixed; z-index:20;
						opacity:.6; -webkit-transition:right .3s ease-out; -moz-transition:right .3s ease-out; -o-transition:right .3s ease-out; -ms-transition:right .3s ease-out; transition:right .3s ease-out; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; -o-transition:.3s ease-out; -ms-transition:.3s ease-out; transition:.3s ease-out}

.edcon.top				{bottom:55px; right:-70px; }	
.edcon i				{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.edcon i.go_top:before	{border-right:3px solid #FFF; border-top:3px solid #FFF; width:12px; height:12px; left:6px; top:8px; 
						-moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}	
.edcon.on				{right:5px;}
.edcon:hover			{opacity:1; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; -o-transition:.3s ease-out; -ms-transition:.3s ease-out; transition:.3s ease-out}


@media screen and (max-width:980px) {
	.edcon				{width:40px; height:40px;}
}
