@charset "utf-8";

/* root */
:root {
    --color-base: #444;
    --color-point: #2692ab;
    --color-blue: #1e45c4;
    --color-mint: #59c7bd;
    --color-mint-white: #ebf4f4;
    --color-dark-green: #1f791d;
    --color-green: #1cc418;
    --color-red: #a61a0c;
    --font-jalnan: 'JalnanGothic', 'GmarketSans', "맑은 고딕","Malgun Gothic","돋움",Dotum, sans-serif;
    --font-paper: 'Paperlogy', 'GmarketSans', "맑은 고딕","Malgun Gothic","돋움",Dotum, sans-serif;
    --font-pre: 'Pretendard', 'GmarketSans', "맑은 고딕","Malgun Gothic","돋움",Dotum, sans-serif;
}

/* font */
body{font-family:'Paperlogy', "맑은 고딕","Malgun Gothic","돋움",Dotum, sans-serif; color:var(--color-base); word-break:keep-all;}

/* txt */
strong      {font-weight:600;}
.txt_point  {color:var(--color-point)}
.txt_mint  {color:var(--color-mint)}
.txt_blue   {color:var(--color-blue)}
.txt_green  {color:var(--color-dark-green)}
.txt_red    {color:var(--color-red)}

/* fullpage */
.section{position:relative;}
/*
@media all and (max-width:1500px){
    .section,
    .section>div{height:auto !important;}
}*/
@media all and (max-width:2500px){
    .section,
    .section>div{min-height:800px !important;}
}
@media all and (max-width:1500px){
    .section,
    .section>div{min-height:650px !important;}
}
@media all and (max-width:768px){
    .section,
    .section>div{min-height:initial !important;}
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-auto-height .fp-tableCell .fp-scrollable    { height:auto !important; min-height:auto !important; }
.fp-noscroll,
.fp-noscroll .fp-tableCell                      { height:max-content !important; min-height:max-content !important; }

@media all and (max-width:768px){
	.fp-tableCell,
	.fp-section, 
	.fp-slide													{ height:auto !important; }
}


/* ani */
@keyframes moveUp   {0%{transform:translateY(0);} 50%{transform:translateY(-.2em);} from{transform:translateY(0);}}
@keyframes moveR   {0%{transform:translateX(0);} 50%{transform:translateX(.2em);} from{transform:translateX(0);}}
@keyframes opacity  {0%{opacity:0} 50%{opacity:.5;} to{opacity:0;}}
@keyframes rocation {0%{transform:rotate(0);} from{transform:rotate(360deg)}}
@keyframes shakeIcon{0%{transform:rotate(0);} 35%{transform:rotate(15deg)} 65%{transform:rotate(-15deg)} from{transform:rotate(0)}}

/****** header ******/
.header                 {position:fixed; top:0; left:0; z-index:555; width:100%; transition:all .5s}

.header_wrap            {display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 60px; align-items:center; background:#fff; border-bottom:1px solid #ddd}

.header_wrap h1 a       {display:block; background-image:url(/economy/resource/images/common/logo.svg); background-position:center; background-repeat:no-repeat; background-size:contain; width:209px; height:34px; overflow:hidden; text-indent:100%; line-height:5000; white-space:nowrap; margin-top:-.35em; position:relative; z-index:5}
@media all and (max-width:1700px){
    .header_wrap h1 a   {width:190px;}
}
@media all and (max-width:1400px){
    .header_wrap        {padding:0 30px;}
}
@media all and (max-width:1368px){
    .header_wrap        {padding:1em 30px;}
}
@media all and (max-width:1024px){
    .header_wrap h1 a   {width:160px; margin-top:-.2em;}
}
@media all and (max-width:640px){
    .header_wrap        {padding:1em 20px;}
}
@media all and (max-width:368px){
    .header_wrap h1 a   {width:150px; margin-top:-.15em;}
}
/* nav : 1차 */
.header_wrap nav ul                         {display:flex; flex-wrap:wrap;}
@media all and (max-width:1368px){
    .header_wrap nav ul                     {display:none;}
}

.header_wrap nav>ul                         {gap:0 4.5em;}
.header_wrap nav>ul>li>a                    {display:block; font-weight:400; font-size:1.43em; position:relative; height:100%; padding:30px 5px;}
.header_wrap nav>ul>li>a:before             {content:""; display:block; background:var(--color-mint); width:0; height:3px; position:absolute; bottom:0; left:0;}
.header_wrap nav>ul>li.now>a:before,
.header_wrap nav>ul>li:hover>a:before,

.header_wrap nav>ul>li:focus>a:before       {width:100%; transition:all .5s}
.header_wrap nav>ul>li>a:after              {content:""; display:block; width:0; height:0; position:absolute; top:.8em; left:0; right:0; margin:auto;}

.header_wrap nav>ul>li.now>a:after          {width:15px; height:10px; background:url(/economy/resource/images/common/arr_rainbow.svg) no-repeat center; transition:all .5s}
@media all and (max-width:1700px){
    .header_wrap nav>ul                     {gap:0 2.5em;}
    .header_wrap nav>ul>li>a                {font-size:1.25em}
}
@media all and (max-width:1280px){
    .header_wrap nav>ul                     {gap:0 2em;}
    .header_wrap nav>ul>li>a                {font-size:1.1em}
}

/* nav : 2차 */
.header_wrap nav li ul                          {height:0; visibility:hidden; overflow:hidden; position:absolute; left:0; top:96px; width:100%; padding:0 60px 0 420px; opacity:0}
.header_wrap nav li.now ul                      {overflow:inherit; visibility:visible; height:auto; padding:1.5em 60px 1.5em 420px; background:var(--color-mint-white); justify-content:space-between; gap:1em; transition:all .5s; opacity:1}
.header_wrap nav li ul:before                   {content:"";display:block; width:340px; height:165px; background:url(/economy/resource/images/common/menu_bg.svg) no-repeat 0 bottom; position:absolute; bottom:-1px; left:0}

.header_wrap nav li li                          {flex-grow:1; text-align:center; position:relative; background:#fff; border:1px solid #deecec; border-radius:10px;}
.header_wrap nav li li:before                   {content:""; display:block; width:0; height:100%; position:absolute; top:0; left:0; border-radius:10px;}
.header_wrap nav li li:hover:before,
.header_wrap nav li li:focus:before             {width:100%; background:var(--color-point); transition:all .5s;}
.header_wrap nav li li a                        {display:block; padding:.8em; overflow:hidden; position:relative; z-index:1}
.header_wrap nav li li a:hover,
.header_wrap nav li li a:focus                  {color:#fff; transition:all .5s}
@media all and (max-width:1700px){
    .header_wrap nav li ul                      {top:92px;}
    .header_wrap nav li li a                    {padding:.5em}
}

@media all and (max-width:1280px){
    .header_wrap nav li ul                      {top:88px;}
    .header_wrap nav li.now ul                  {padding:1em 30px 1em 280px;}
    .header_wrap nav li ul:before               {width:300px; height:98px;}
}

/* fixed */
.fixed .header_wrap h1 a                {width:190px}
@media all and (max-width:1400px){
    .fixed .header_wrap                 {padding:.7em 30px;}
}
@media all and (max-width:1150px){
    .fixed .header_wrap                 {padding:1em 30px;}
}
@media all and (max-width:1024px){
    .fixed .header_wrap h1 a            {width:160px; margin-top:-.2em;}
}
@media all and (max-width:640px){
    .fixed .header_wrap                 {padding:1em 20px;}
}
@media all and (max-width:368px){
    .fixed .header_wrap h1 a   {width:150px; margin-top:-.15em;}
}

.fixed .header_wrap nav>ul>li>a         {padding:20px 5px; font-size:1.3em; transition:all .5s}
.fixed .header_wrap nav>ul>li>a:after   {top:.5em}
@media all and (max-width:1700px){
    .fixed .header_wrap nav>ul          {gap:0 2.5em;}
    .fixed .header_wrap nav>ul>li>a     {font-size:1.25em}
}
@media all and (max-width:1280px){
    .fixed .header_wrap nav>ul          {gap:0 2em;}
    .fixed .header_wrap nav>ul>li>a     {font-size:1.1em}
}

.fixed .header_wrap nav li ul           {top:72px;}
.fixed .header_wrap nav li.now ul       {padding:1em 60px 1em 420px;}
.fixed .header_wrap nav li ul:before    {width:280px;}
.fixed .header_wrap nav li li a         {padding:.5em}


/* util */
.util>ul                            {display:flex; flex-wrap:wrap; align-items:center; gap:1em;}
.util>ul a:not(.wanjumall):not(.top_family_site):not(.util>ul .top_family_site_wrap>ul>li>a),
.util>ul button:not(.wanjumall):not(.top_family_site):not(.util>ul .top_family_site_wrap>ul>li>a)     { width:18px; height:17px; display:block; overflow:hidden; text-indent:100%; line-height:5000; white-space:nowrap; 
																											background-repeat:no-repeat; background-position:center; position:relative;}
.util>ul .login                     {background-image:url(/economy/resource/images/common/icon_login.svg);}
.util>ul .logout                    {background-image:url(/economy/resource/images/common/icon_logout.svg);}
.util>ul .sitemap                   {position:relative;}
.util>ul .sitemap:before,
.util>ul .sitemap:after,
.util>ul .sitemap span              { display:block; content:""; width:100%; height:2px; background:#777; position:absolute; left:0;}
.util>ul .sitemap:before            { top:1px;}
.util>ul .sitemap:after             { bottom:0;}
.util>ul .sitemap span              { display:block; overflow:hidden; text-indent:100%; line-height:5000; white-space:nowrap; background-repeat:no-repeat; top:0; bottom:0; margin:auto;}
.util>ul .wanjumall           		{ border:1px solid transparent; border-radius:50px;background:linear-gradient(to right, #f59435, #e45931); color:#fff;display:flex; align-items:center; padding:0 1.25em; gap:.5em; height:40px; font-size:18px;}
.util>ul .wanjumall i               { display:block; width:14px; height:15px; background:url(/economy/resource/images/common/icon_mall.svg);filter: invert(1) brightness(100);}
.util>ul a:not(.wanjumall):hover,
.util>ul a:not(.wanjumall):focus,
.util>ul .wanjumall:hover i,
.util>ul .wanjumall:focus i         {animation:shakeIcon 1s infinite forwards;}
.util>ul .sitemap:hover:before      {animation:sitemapBtn 3s infinite .5s forwards;}
.util>ul .sitemap:hover:after       {animation:sitemapBtn 3s infinite .5s forwards;}
.util>ul .sitemap:hover span        {animation:sitemapBtn 3s infinite forwards;}
@keyframes sitemapBtn               {0%{width:100%} 50%{width:0} from{width:100%}}


.util>ul>li:has(.top_family_site)						{ position:relative; }
.util>ul .top_family_site           					{ position:relative; border:1px solid var(--color-point); border-radius:50px; color:#fff; display:flex; align-items:center;  padding:0 1.25em; gap:.5em; height:40px; font-size:18px;
															 background:var(--color-point) }
.util>ul .top_family_site::after						{ display:inline-block; vertical-align:middle; width:7px; height:7px; border-style:solid; border-width:0 1px 1px 0; border-color:#fff; transform:translateY(-40%) rotate(45deg); content:''; 
															transition:all ease 0.2s; margin-left:3px; }
.util>ul .top_family_site.active::after					{ transform:translateY(20%) rotate(225deg); }
.util>ul .top_family_site_wrap							{ position:absolute; display:none; left:50%; top:45px; width:165px; transform:translateX(-50%); z-index:91; word-break:break-all;}																			
.util>ul .top_family_site_wrap>ul						{ position:relative; z-index:2; padding:1.5em 1.5em 1.2em; border-radius:20px; background:rgba(38,146,171,.9); display:flex; flex-flow:column;}
.util>ul .top_family_site_wrap>ul>li					{ padding:5px; }
.util>ul .top_family_site_wrap>ul>li:not(:first-child)	{ border-top:1px solid rgba(255,255,255,.1); }
.util>ul .top_family_site_wrap>ul>li>a					{ display:block; color:#fff; font-size:.95rem; line-height:1.2 }
.util>ul .top_family_site_wrap>ul>li>a:hover,
.util>ul .top_family_site_wrap>ul>li>a:focus			{ animation:initial; }
body:has(.visual.active) .header:not(:has(nav .now)) .util>ul .top_family_site { border-color:#fff; background:transparent; }
body:has(.visual.active) .header:not(:has(nav .now)) .util>ul .top_family_site_wrap>ul	{ background:rgba(0,0,0,.9); }

@media all and (max-width:1568px){
	.header_wrap nav>ul									{ gap:0 2em; }
	.header_wrap nav>ul>li>a							{ font-size:1.2em; }
	
	.fixed .header_wrap nav>ul							{ gap:0 2.1em; }
	.fixed .header_wrap nav>ul>li>a						{ font-size:1.2em; }
	
}
@media all and (max-width:1468px){
	.header_wrap nav>ul									{ gap:0 1.7em; }
	.header_wrap nav>ul>li>a							{ font-size:1.167em; }
	.util>ul .wanjumall,
	.util>ul .top_family_site							{ font-size:14px; }
	
	.fixed .header_wrap nav>ul							{ gap:0 1.8em; }
	.fixed .header_wrap nav>ul>li>a						{ font-size:1.167em; }
}
@media all and (max-width:568px){
	.util>ul .top_family_site							{ display:none; }
}
@media all and (max-width:468px){
    .util>ul                        {gap:.8em}
    .util>ul .wanjumall             {text-indent:-1000%; border-radius:0; border:0; padding:0; width:15px; position:relative; overflow:hidden;background: transparent;}
    .util>ul .wanjumall i           {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;filter: invert(47%) sepia(22%) saturate(1425%) hue-rotate(144deg) brightness(98%) contrast(85%);;}
}

/* sitemap*/
.sitemap_wrap                               {position:fixed; height:0; visibility:hidden; overflow:hidden; left:0; top:-100%; width:100%; opacity:0; z-index:55; transition:all .5s;}
.sitemap_wrap.active                        {overflow:inherit; visibility:visible; height:100%; top:0; background:rgb(20, 53, 83, .8); gap:1em; opacity:1; backdrop-filter:blur(5px); transition:all .5s; display:flex; justify-content:center; align-items:center; color:#fff;}

/* 1차 */
.sitemap_wrap>ul                            {display:flex; flex-wrap:wrap; align-items:stretch;}
.sitemap_wrap>ul>li                         {position:relative; padding:0 5em 0 1em;}
.sitemap_wrap>ul>li:before                  {content:""; display:block; width:1px; height:100%; background:rgb(255, 255, 255, .1); position:absolute; top:0; left:0;}
.sitemap_wrap>ul>li:after                   {content:""; display:block; width:3px; height:0; background:#fff; position:absolute; top:0; left:-1px;}
.sitemap_wrap>ul>li:hover:after,
.sitemap_wrap>ul>li:focus:after             {height:2em; transition:all .5s;}
.sitemap_wrap>ul>li>a                       {font-family:var(--font-jalnan); font-size:1.68em; display:block; margin-bottom:1em;}
@media all and (max-width:1700px){
    .sitemap_wrap>ul>li                     {padding-right:1.5em;}
    .sitemap_wrap>ul>li>a                   {font-size:1.5em}
}
@media all and (max-width:1368px){
    .sitemap_wrap>ul                        {width:90%; max-height:80svh; overflow-y:auto; margin:auto; border-top:1px solid rgb(255, 255, 255, .15); border-bottom:1px solid rgb(255, 255, 255, .15);}
    .sitemap_wrap>ul>li                     {width:100%; border:1px solid rgb(255, 255, 255, .15); border-bottom:0; padding:1.5em 1em;}
    .sitemap_wrap>ul>li:first-child         {border-top:0;}
    .sitemap_wrap>ul>li:before              {display:none;}
    .sitemap_wrap>ul>li:after               {top:1.3em;}
    .sitemap_wrap>ul>li>a                   {font-size:1.2em; margin-bottom:.5em;}
}

/* 2차 */
.sitemap_wrap li li:not(:first-child)       {margin-top:.5em;}
.sitemap_wrap li li a                       {color:rgb(255, 255, 255, .5); transition:all .5s; position:relative; display:block; padding-right:30px}
.sitemap_wrap li:hover li a,
.sitemap_wrap li:focus li a                 {color:#fff; transition:all .5s}
.sitemap_wrap li li a:before                {content:""; display:block; width:0; height:10px; position:absolute; right:0; top:0; bottom:0; margin:auto;}
.sitemap_wrap li li a:hover:before,
.sitemap_wrap li li a:focus:before          {background:url(/economy/resource/images/common/arr.svg) no-repeat; width:19px; animation:sitemapArr 1s forwards infinite;}
@keyframes sitemapArr                       {0%{transform:translateX(0);} 50%{transform:translateX(-.2em);} from{transform:translateX(0);}}
@media all and (max-width:1368px){
    .sitemap_wrap li ul                     {display:flex; flex-wrap:wrap; gap:.5em 1em;}
    .sitemap_wrap li li:not(:first-child)   {margin-top:0;}
}

/* sitemap icon */
.sitemap_wrap li ul:before                  {content:""; display:block; width:25px; height:25px; background-position:center; background-repeat:no-repeat; background-size:contain; position:absolute; bottom:0; right:1.5em; opacity:.5;}
.sitemap_wrap li:hover ul:before,
.sitemap_wrap li:focus ul:before            {opacity:1; animation:moveUp 1s infinite forwards;}
.sitemap_wrap li:first-child ul:before      {background-image:url(/economy/resource/images/common/icon_site01.svg)}
.sitemap_wrap li:nth-child(2) ul:before     {background-image:url(/economy/resource/images/common/icon_site02.svg)}
.sitemap_wrap li:nth-child(3) ul:before     {background-image:url(/economy/resource/images/common/icon_site03.svg)}
.sitemap_wrap li:nth-child(4) ul:before     {background-image:url(/economy/resource/images/common/icon_site04.svg)}
.sitemap_wrap li:nth-child(5) ul:before     {background-image:url(/economy/resource/images/common/icon_site05.svg)}
.sitemap_wrap li:nth-child(6) ul:before     {background-image:url(/economy/resource/images/common/icon_site06.svg)}
@media all and (max-width:1150px){
    .sitemap_wrap li ul:before              {bottom:1em; right:1em;}
}

.sitemap_wrap button                        {background:url(/economy/resource/images/common/icon_x.svg) no-repeat center; width:45px; height:45px; overflow:hidden; text-indent:-100%; line-height:5000; position:absolute; top:2em; right:2em;}
.sitemap_wrap button:hover,
.sitemap_wrap button:focus                  {animation:rocation 1s forwards;}
@media all and (max-width:1150px){
    .sitemap_wrap button                    {width:32px; height:32px; top:1em; right:1em;}
}











/****** footer ******/
.footer                                     {overflow:inherit !important; background:#181818;}
.foot_wrap                                  { color:#fff; padding:50px 60px; position:relative; z-index:5; font-weight:100}

.foot_nav                                   {display:flex; flex-wrap:wrap; gap:0 2.5em; margin-bottom:2.5em; font-size:1.15em; font-weight:200}
.foot_nav li                                {position:relative;}
.foot_nav li:not(:first-child):before       {content:""; display:block; width:1px; height:12px; background:rgba(255, 255, 255, .2); position:absolute; top:0; bottom:0; margin:auto; left:-1.25em}

.footer p                                   {display:flex; align-items:center; gap:.5em}
.footer p span                              {display:block; width:1px; height:12px; text-indent:-10000%; line-height:5000; overflow:hidden; background:rgba(255, 255, 255, .2);}
.footer p br                                {display:none}
.footer .copy                               {opacity:.5;}

.family_site                                {position:absolute; top:50px; bottom:0; right:50px; height:max-content}

.family_site button                         {position:relative; color:#fff; font-size:1em; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-bottom:1px solid #fff; padding-bottom:.6em; gap:1em}
.family_site button i                       {display:block; width:7px; height:7px; overflow:hidden; text-indent:-10000%; line-height:50000; position:relative;}
.family_site button i:before,
.family_site button i:after                 {content:""; display:block; width:1px; height:100%; background:#fff; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
.family_site button i:after                 {transform:rotate(90deg);}

.family_site ul                             {opacity:0; height:0; overflow:hidden; clip: rect(0, 0, 0, 0); position:absolute; bottom:40px;}
.family_site ul.active                      {opacity:1; position:absolute; left:-30%; right:0; margin:auto; transition:all .5s; clip:auto; width:150%; height:auto; background:rgb(0, 0, 0, .9); padding:1.5em 1.5em 1.2em; border-radius:20px; font-size:16px; line-height:1.25; text-align:left;}
.family_site ul:before                      {content:""; display:block; width:0; height:0; border-style: solid;border-width: 6px 6px 0px 6px; border-color: rgb(0, 0, 0, .9) transparent transparent transparent; position:absolute; bottom:-6px; left:0; right:0; margin:auto; z-index:55555}
.family_site li:not(:first-child)           {padding-top:.8em; border-top:1px solid rgb(255, 255, 255, .1); margin-top:.8em}
.family_site li a                           {display:flex; flex-wrap:wrap; width:100%; word-break:break-all; padding-right:22px; position:relative;}
.family_site li a:after                     {content:""; display:block; width:14px; height:10px; position:absolute; top:0; bottom:0; right:0; margin:auto; background:url(/economy/resource/images/common/arr.svg) no-repeat center; filter:brightness(1000%); opacity:.1}
.family_site li a:hover:after,
.family_site li a:focus:after               {opacity:1; animation:moveR 1s infinite}
@media all and (max-width:1400px){
    .foot_wrap                              {padding:40px 30px; font-size:.95em}
    .foot_nav                               {font-size:1em}
    .family_site                            {top:35px; right:30px;}
}

@media all and (max-width:640px){
    .foot_wrap                     {padding:30px 20px 70px;}
    .footer p span                                {display:none}
    .footer p br                                {display:block}
    .family_site                            {top:auto; bottom:30px;  right:20px;}
	.family_site ul.active					{ padding:15px; border-radius:10px; }
	.family_site li a						{ font-size:.88rem; }
}