@charset "utf-8";
/**
 * @File Name : all.css
 * @Description : Base Adjust + Layout[main+sub] Mobile First!
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2026.08.04 | 김효진 | 최초 등록
 * 2026.10.12 | 최승희 | gn1c2에 로고 추가
 * </pre>
 * @author 디자인팀 김효진
 * @since 2026.08.04
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* 스크롤바 전체 폭 설정 */
::-webkit-scrollbar {
    width:5px;  /* 세로 스크롤바 폭 */
    height:5px; /* 가로 스크롤바 높이 */
}

/* 스크롤바 막대 (움직이는 부분) 스타일 */
::-webkit-scrollbar-thumb {
    background-color:rgba(0,0,0,.5); /* 막대 색상 */
    border-radius:9999px;    /* 막대 둥글게 */
}

/* 스크롤바 뒷배경 (트랙) 스타일 */
::-webkit-scrollbar-track {
    background-color: #f0faf4; /* 배경 색상 */
}	

/* 막대에 마우스를 올렸을 때 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* base.css )) Overwrite. 20200117 ◆◆◆ */
body {
	background:transparent;
	color:#000; /* ☆#555 */
	font-weight:400;
	font-size:18px; /* (((16px */
	line-height:1.75; /* ☆ */
	letter-spacing:-.025em; /* (-.50px/16px) */
	height:100%;
	overflow:hidden;
}

[lang|='ko'],
[lang|='ko']>*{
	font-family:
		'Paperlogy',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6 {letter-spacing:-.025em}

/* ◇◆ 공용 ◇◆ */
/* ◇◆ Layout[main+sub] ◇◆◇◆◇◆◇◆◇◆ */
html,
body,
#container, #wrap, #body {min-height:100%;}
.container {position:relative;
	min-width:280px; /* ☆ */
	margin:auto; /* ☆ */
	max-width:1500px;
}
#container {position:static;overflow-y:auto;height:100dvh;box-sizing:border-box;}
	#head {position:absolute;top:0;left:0;width:100%;height:50px;background:#fff;border-bottom:1px solid #d3d8ec;overflow:hidden;box-sizing:border-box;z-index:1}
	#wrap {
		clear:both;
		min-height:50px; /* ☆ 펼친 콘텐츠 높이 고려. */
		z-index:2;overflow-x:hidden;
	}
		#wrap>.container{position:static;} /* ))) sub.css, main.css */
			#body {max-width:840px;height:100%;margin:auto;font-size:17px;}
	#foot {clear:both;position:relative;	}
 

/* 배치.유틸 20191220 */
.width1expand1 {margin-left:-20px;margin-right:-20px;}

/* html 배경 */
html {background:#edf6ff;scroll-behavior:smooth;overflow:hidden;}

/* gn1 */
#gn1 {position:relative;}
#gn1 .cont {overflow:hidden;}
#gn1 ul {font-size:0}
#gn1 ul li {display:inline-block;vertical-align:top;padding:9px 0}
#gn1 ul li a {position:relative;display:block;font-size:16px;line-height:32px;font-weight:400;color:#000;padding:0 15px;}
#gn1 ul li a:before {position:absolute;top:50%;left:0;content:"";display:block;width:1px;height:11px;background:#d8dde5;margin-top:-5.5px;}
#gn1 ul li.on a {background-color:#0e1d6b;color:#ffff;border-radius:9999px;margin:0 11px;font-weight:700}
#gn1 ul li.on a:before {left:-11px;}
#gn1 ul li:first-child a:before {display:none}
#gn1 .gn1c1 {float:left;margin-left:4px;}
#gn1 .gn1c2 {float:right;margin-right:4px}
#gn1 .gn1c2 li{position:relative;}
#gn1 .gn1c2 li a {padding-right:30px}
#gn1 .gn1c2 li a:after {position:absolute;top:50%;right:16px;content:"";display:block;width:11px;height:11px;background:url(../../img/inc/layout_sprite.png) no-repeat 0 0 / 1000px auto;margin-top:-5.5px;transition:right .4s ease}
/* gn1c2 로고 추가 */
#gn1 .gn1c2 li:before {position:absolute;top:50%;left:0;content:"";display:block;width:1px;height:11px;background:#d8dde5;margin-top:-5.5px;}
#gn1 .gn1c2 li:first-child:before {display:none;}
#gn1 .gn1c2 li a:before {position:static;display:inline-block;vertical-align:middle;width:19px;height:19px;background:url(../../img/inc/layout_sprite.png) no-repeat 0 0 / 1000px auto;margin:-3px 5px 0 0;}
#gn1 .gn1c2 li:first-child a {padding-left:0;}
#gn1 .gn1c2 li:first-child a:before {display:inline-block;}
#gn1 .gn1c2 li:nth-of-type(1) a:before {background-position:0 -126px;}
#gn1 .gn1c2 li:nth-of-type(2) a:before {background-position:-21px -126px;}
#gn1 .gn1c2 li:nth-of-type(3) a:before {background-position:-42px -126px;}
[id*=gn] li:first-child a:before {display:none}
@media screen and (min-width:1260px){
	#gn1 ul li a:hover, #gn1 ul li a:focus {text-decoration:underline;text-underline-offset:4px;}
	#gn1 ul li a:hover:after, #gn1 ul li a:focus:after {right:13px}
}
@media screen and (max-width:899px){
	#gn1 {width:100%}
	#gn1c .cont {display:inline-block;vertical-align:top;white-space:nowrap;overflow:hidden;}
	#gn1 .gn1c1, #gn1 .gn1c2 {float:none;display:inline-block;vertical-align:top;margin:0}
	#gn1 ul li a {padding-left:10px;padding-right:10px;}
	#gn1 .gn1c2 li a {padding-right:25px}
	#gn1 .gn1c2 li:first-child a {padding-left:15px;}
	#gn1 .gn1c2 li a:after {right:10px}
	#gn1 .gn1c2 li:first-child:before {display:block;}
}
@media screen and (max-width:729px){
	#gn1:before, #gn1:after {position:absolute;top:0;content:"";display:block;width:40px;height:100%;z-index:1}
	#gn1:before {display:none;left:0;background:linear-gradient(to left, transparent 15%, #fff)}
	#gn1:after {right:0;background:linear-gradient(to left, #fff 30%, transparent)}
	#gn1.move:before, #gn1.end:after {display:block;}
	#gn1.start:before, #gn1.end:after {display:none;}
}
@media screen and (max-width:599px){
	#gn1 ul li a {font-size:14px;}
}

/* wrap */
#wrap {max-width:840px;padding-left:300px;margin:auto;padding-top:75px;margin-bottom:130px;transition:padding .4s ease 0s;}
.close #wrap {padding-left:0;transition-delay:.05s}
@media screen and (max-width:1259px){
	#wrap {padding-left:0;}
}
@media screen and (max-width:872px){
	#wrap {margin-bottom:85px}
	#body {margin-left:16px;margin-right:16px;}
}
@media screen and (max-width:599px){
	#body {font-size:16px;}
}
@media screen and (max-width:449px){
	#wrap {margin-bottom:65px}
}

/* sidebar */
#sidebar {position:fixed;top:50px;left:0;width:300px;height:calc(100% - 50px);transition:left .4s ease .05s;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.05)}
#sidebar .wrap1 {position:relative;width:100%;height:100%;z-index:1;background:#fff;padding:32px 20px 30px;box-sizing:border-box;}
#sidebar .wrap1 .hg1 {margin-bottom:20px;text-align:center;}
#sidebar .wrap1 .hg1 .slogo {display:block;width:98px;height:26px;background:url(../../img/inc/layout_sprite.png) no-repeat 0 -147px / 1000px auto;text-indent:-9999px;margin:0 0 161px}
#sidebar .wrap1 .hg1 .ht1 {position:relative;display:block;width:111px;height:32px;background:url(../../img/inc/layout_sprite.png) no-repeat -176px -65px / 1000px auto;margin:auto;text-indent:-9999px;}
#sidebar .wrap1 .hg1 .ht1:before, #sidebar .wrap1 .hg1 .ht1:after {position:absolute;top:-84px;content:"";display:block;background:url(../../img/inc/layout_sprite.png) no-repeat;background-size:1000px auto;}
#sidebar .wrap1 .hg1 .ht1:before {left:-16px;width:76px;height:61px;background-position:-176px 0;animation:iacts_move2 .8s ease-in-out infinite;will-change:transform;/* animation:iacts_shake 2s ease-out 1s infinite;transform-origin:bottom; */}
#sidebar .wrap1 .hg1 .ht1:after {right:-15px;width:65px;height:63px;background-position:-254px 0;animation:iacts_move2 1.1s ease-in-out infinite;will-change:transform;}
#sidebar .wrap1 .hg1 .ht2 {font-size:17px;line-height:24px;color:#555;font-weight:500;margin:12px 0 37px}
#sidebar .wrap1 .hg1 .ht2 span {display:block;}
#sidebar .wrap1 .hg1 .ht3 {position:relative;display:block;width:130px;height:32px;background:url(../../img/inc/layout_sprite.png) no-repeat -176px -99px / 1000px auto;text-indent:-9999px;margin:auto;}
#sidebar .wrap1 .hg1 .ht3:before, #sidebar .wrap1 .hg1 .ht3:after {position:absolute;content:"";display:block;background:url(../../img/inc/layout_sprite.png);background-repeat:no-repeat;background-size:1000px auto;}
#sidebar .wrap1 .hg1 .ht3:before {top:-117px;left:50%;width:71px;height:103px;background-position:-532px 0;margin-left:-36px;}
#sidebar .wrap1 .hg1 .ht3:after {top:-117px;left:50%;width:21px;height:26px;background-position:-154px -58px;margin-left:-10px;animation:iacts_shake 2s ease-out 1s infinite;transform-origin:bottom;}
#sidebar .wrap1 .btns .b1 {position:relative;display:block;width:100%;height:50px;font-size:17px;font-weight:500;text-align:left;box-sizing:border-box;border-radius:10px;border:0;padding:0 10px 0 59px;margin-bottom:10px}
#sidebar .wrap1 .btns .b1:before {position:absolute;top:50%;left:29px;content:"";display:block;width:28px;height:25px;background:url(../../img/inc/layout_sprite.png) no-repeat;background-size:1000px auto;margin-top:-14.5px;}
#sidebar .wrap1 .btns .b1.newchat {background-color:#2163c1;color:#fff;line-height:51px;}
#sidebar .wrap1 .btns .b1.save {border:1px solid #2163c1;line-height:49px;background-color:#fff;color:#2163c1}
#sidebar .wrap1 .btns .b1.newchat:before {background-position:0 -29px}
#sidebar .wrap1 .btns .b1.save:before {background-position:-30px -29px}
#sidebar .wrap1 .btns .b1.save[disabled="disabled"] {border-color:#dadfe7;background-color:#f6f7f9;color:#b9bec6;cursor:no-drop}
#sidebar .wrap1 .btns .b1.save[disabled="disabled"]:before {background-position:-60px -29px;}
#sidebar .wrap1 .menu1 {margin-top:30px;border:1px solid #dadfe7;border-radius:10px;overflow:hidden;}
#sidebar .wrap1 .menu1 .h1 {display:block;background:#f7f7f7;font-size:19px;color:#000;font-weight:600;line-height:49px;padding:0 28px}
#sidebar .wrap1 .menu1 .lst {padding:4px 28px 10px}
#sidebar .wrap1 .menu1 .lst li {line-height:20px;margin:15px 0}
#sidebar .wrap1 .menu1 .lst li a {position:relative;display:block;font-size:17px;color:#333;font-weight:500;padding-left:33px}
#sidebar .wrap1 .menu1 .lst li a:before, #sidebar .wrap1 .menu1 .lst li a:after {position:absolute;content:"";display:block;background:url(../../img/inc/layout_sprite.png);background-repeat:no-repeat;background-size:1000px auto;}
#sidebar .wrap1 .menu1 .lst li a:before {top:0;left:0;width:24px;height:20px;}
#sidebar .wrap1 .menu1 .lst li.n1 a:before {background-position:-100px -79px}
#sidebar .wrap1 .menu1 .lst li.n2 a:before {background-position:-100px -101px}
#sidebar .wrap1 .menu1 .lst li.n3 a:before {background-position:-100px -123px}
#sidebar .wrap1 .menu1 .lst li a:after {top:50%;right:0;width:6px;height:10px;background-position:-126px -79px;margin-top:-5px}
#sidebar .b2 {position:absolute;top:24px;right:9px;width:50px;height:50px;background:#fff url(../../img/inc/layout_sprite.png) no-repeat -90px -29px / 1000px auto;border:0;text-indent:-9999px;border:1px solid #fff;box-sizing:border-box;z-index:1;border-radius:100%;transition:all .4s ease .03s}
.close #sidebar {left:-300px;transition-delay:0s}
.close #sidebar .b2 {right:-69px;border-color:#e0e0e1;background-color:#fff;background-position:-90px -30px;box-shadow:10px 10px 30px rgba(0,0,0,.1)}
@media screen and (max-width:999px){
	#sidebar {left:-300px;}
	#sidebar .b2 {right:-61px;border-color:#e0e0e1;background-color:#fff;background-position:-90px -30px;box-shadow:10px 10px 30px rgba(0,0,0,.1)}
	.close #sidebar {left:0}
	.close #sidebar .b2 {right:9px;border-color:#fff;background-position:-90px -29px;box-shadow:none;}
}
@media screen and (max-width:449px){
	#sidebar .wrap1 {padding:19px 16px 15px}
	#sidebar .b2 {top:8px;}
	#sidebar .b2 {right:-59px;}
}

/* foot */
#foot {position:fixed;bottom:0;left:0;width:calc(100% - 5px);background:#edf6ff;padding-left:300px;box-sizing:border-box;transition:padding .4s ease .05s;}
.close  #foot {padding-left:0;}
@media screen and (max-width:1259px){
	#foot {padding-left:0;}
}
@media screen and (max-width:449px){
	#foot {padding-top:15px;}
}

/* 애니메이션 */
@keyframes iacts_ani1 {
	0% {transform:scale(.4);opacity:0;}
	40% {opacity:1;}
	100% {transform:scale(1);opacity:0;}
}
@keyframes iacts_shake{
	0%, 64%, 100% {transform:rotate(0deg);}
	6.4%, 19.2%, 32%, 44.8%, 57.6% {transform:rotate(-10deg);}
	12.8%, 25.6%, 38.4%, 51.2% {transform:rotate(10deg);}
	64%, 100% {transform:rotate(0deg);} /* 휴식 */
}
@keyframes iacts_walk{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(-3deg)}
    100%{transform: rotate(0deg)}
}
@keyframes iacts_move {
    0%, 100% {transform: translateX(0);}
    33% {transform: translateX(-3px);}
    66% {transform: translateX(3px);}
}
@keyframes iacts_move2 {
    0%,100% {transform:translateY(0);}
    50% {transform:translateY(2px);}
}
@keyframes iacts_rotate {
	0% {transform:rotate(0deg)}
	100% {transform: rotate(360deg)}
}
@keyframes iacts_pulse {
  0% {opacity:.4;}
  100% {opacity:1;}
}
@keyframes iacts_loader {
    100% {width:100%}
}