@charset "utf-8";

.essential				{display:inline-block; margin:0px 0 0 5px; width:6px; height:6px; border-radius:50%; vertical-align:2px; background-color:var(--IDTcolor);}
.essential:after		{content:'';}



.icon-notice			{position:relative; margin:0px auto 0px auto; width:100%; bottom:0px; font-size:0px;}
.icon-notice:after		{font-family:GongGothic; font-weight:400; content:'공지'; position:relative; display:inline-block; height:22px; padding:0px 6px; color:#FFF; font-size:12px; line-height:22px; letter-spacing:-0.5px; background-color:var(--IDTcolor); border-radius:2px;} /*  게시판내 공지 */

/******************************************************************************************************************************************
*	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;}


/******************************************************************************************************************************************
*	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);}

.cssIcon.bigrplus:after		{background:var(--IDTcolor); width:45px; height:14px; top:13px; left:-29px; border-radius:20px; transform:rotate(0deg); opacity:0.5;}
.cssIcon.bigrplus:before	{background:#777; width:14px; height:45px; top:-2px; left:-13px;  border-radius:20px; opacity:0.5;}

.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:'';}


/*************************************************************************************************************************
*	EDCON - 2021.02.18
**************************************************************************************************************************/
.edcon					{width:60px; height:60px; text-align:center; color:transparent; background:rgba(0, 0, 0, .9); 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;}
}

.rightQban				{width:60px; height:60px; text-align:center; color:transparent; cursor:pointer; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16); overflow:hidden; position:fixed; z-index:20;
						-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}

.rightQban.sns_naverblog{bottom:250px; right:5px; background:#00c73c; opacity:.8;}
.rightQban.sns_youtube	{bottom:185px; right:5px; background:#ff0000; opacity:.8;}
.rightQban.sns_tel		{bottom:120px; right:5px; background:#f9d303; opacity:.8;}

.rightQban: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}

.rightQban > a > img	{position:absolute; top:50%; left:50%; -ms-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:40px; height:40px;}

@media screen and (max-width:980px) {
	.rightQban				{width:40px; height:40px;}
	.rightQban.sns_naverblog{bottom:190px; right:5px;}
	.rightQban.sns_youtube	{bottom:145px; right:5px;}
	.rightQban.sns_tel		{bottom:100px; right:5px;}
}

.Mchatbot				{position:absolute; bottom:437px; right:-60px; opacity:.8; width:200px; height:200px; text-align:center; color:transparent; cursor:pointer; overflow:hidden; position:fixed; z-index:21;}
.Mchatbot:hover			{opacity:1; -webkit-transform:rotate(10deg)!important;-moz-transform:rotate(10deg)!important;-o-transform:rotate(10deg)!important;transform:rotate(10deg)!important; transition: all 0.3s;}

.Mchatbot .chat_title	{position:absolute; bottom:53px; right:72px; font-family:GongGothic; font-size:16px; font-weight:900; color:var(--IDTcolor); line-height:18px !important; letter-spacing:-.75px; text-decoration:none;}

.Mchatbot .chat_title.en	{position:absolute; bottom:53px; right:64px; font-family:celmonKr; font-size:14px; font-weight:900; letter-spacing:-.75px;}
.Mchatbot .chat_title.cn	{position:absolute; bottom:73px; right:72px; font-family:celmonKr; font-size:16px; font-weight:900; letter-spacing:-.75px;}
.Mchatbot .chat_title.ru	{position:absolute; bottom:53px; right:72px; font-family:celmonKr; font-size:12px; font-weight:900; letter-spacing:-.75px;}
.Mchatbot .chat_title.mg	{position:absolute; bottom:53px; right:72px; font-family:celmonKr; font-size:14px; font-weight:900; letter-spacing:-.75px;}

@media screen and (max-width:997px) {
	.Mchatbot				{bottom:318px; right:-35px; width:120px; height:120px;}
	.Mchatbot img			{width:120px; height:120px;}

	.Mchatbot .chat_title	{bottom:28px; right:42px; font-size:12px; line-height:12px !important;}
}