@charset "utf-8";

.wrap                   {margin:calc(96px + 2.5em) auto 0; padding:0 60px; position:relative; max-width:1720px;}
.wrap .contents > div   {padding-bottom:4em; position:relative}
@media all and (max-width:1400px){
    .wrap                 {padding:0 30px; margin:calc(96px + 2em) auto 0;}
}
@media all and (max-width:1150px){
    .wrap                 {margin:calc(75px + 2.5em) auto 0;}
}
@media all and (max-width:1024px){
    .wrap                 {margin:calc(66px + 2em) auto 0;}
    .wrap .contents > div {padding-bottom:3em}
}
@media all and (max-width:640px){
    .wrap                 {padding:0 20px;}
    .wrap .contents > div {padding-bottom:2em}
}
@media all and (max-width:360px){
    .wrap                 {margin:calc(57px + 1.8em) auto 0;}
}

/* title */
.wrap > .title                                      {display:flex; justify-content:space-between; flex-wrap:wrap; height:4em; align-items:end; margin-bottom:3.5em; z-index:2; position:relative;}
.wrap > .title h2                                   {text-align:center; position:absolute; top:0; left:0; right:0; margin:auto;}
.wrap > .title h2 strong                            {font-family:var(--font-jalnan); font-weight:normal; font-size:1.8em; color:#222; display:block; position:relative; line-height:1.1; width:max-content; margin:auto;}
.wrap > .title h2 strong:before,
.wrap > .title h2 strong:after                      {content:""; display:block; width:.9em; height:1px; background:#222; position:absolute; top:0; bottom:0; margin:auto;}
.wrap > .title h2 strong:before                     {left:-1.5em}
.wrap > .title h2 strong:after                      {right:-1.5em}
.wrap > .title h2 span                              {font-family:var(--font-pre); font-size:1.05em; opacity:.6; font-weight:600}

/*nav li 4개 이상 시 줄바꿈*/
.wrap > .title.wrapped								{height:auto;align-items:center;}
.wrap > .title.wrapped h2							{position:relative; flex:1 0 100%; line-height:1.2; margin-bottom:.5em;}

@media all and (max-width:1400px){
    .wrap > .title                                    {margin-bottom:2.5em}
    .wrap > .title h2 strong                          {font-size:1.4em}
    .wrap > .title h2 span                            {font-size:.9em}
}
@media all and (max-width:1024px){
    .wrap > .title                                    {margin-bottom:2em;height:auto;}
  	.wrap > .title                                    {height:auto;}
    .wrap > .title h2                                 {position:relative; flex:1 0 100%; line-height:1.2; margin-bottom:.5em;}
    .wrap > .title h2 strong                          {font-size:1.3em;}
}

@media all and (max-width:460px){
    .wrap > .title h2                                 {text-align:left;padding-right: calc(80px + .9em);}
    .wrap > .title h2 strong                          {width:100%;font-size:1.2em; margin:0;}
    .wrap > .title h2 strong:before,
  	.wrap > .title h2 strong:after						{display:none;}
    .wrap > .title h2 span                            {font-size:.8em}
}


.wrap > .title nav>ul                               {display:flex; flex-wrap:wrap; flex-wrap:wrap; align-items:end;}
.wrap > .title nav>ul>li:first-child a              {display:block; width:21px; height:2.2em; background:url(/economy/resource/images/common/icon_home.svg) no-repeat center; margin-right:1em}
.wrap > .title nav>ul>li:not(:first-child)          {padding:.5em 1em; position:relative;}
.wrap > .title nav>ul>li:not(:first-child):before   {content:""; display:block; width:4px; height:4px; border-radius:50%; background:#aaa; position:absolute; left:-2px; top:0; bottom:0; margin:auto;}

.wrap > .title nav button                           {position:relative; display:flex; justify-content:space-between; align-items:center; gap:1em; color:#444}
.wrap > .title nav button:before                    {content:""; display:block; width:0; height:0;  border-style: solid;border-width: 3px 3px 0px 3px; border-color: #aaa transparent transparent transparent; position:absolute; top:0; bottom:0; right:5px; margin:auto;}
.wrap > .title nav button:after                     {content:""; display:block; width:15px; height:15px; background:#f4f4f4; border-radius:3px;}

.wrap > .title nav li ul                            {position:absolute; left:0; z-index:2;}
.wrap > .title nav li ul                            {height:0; visibility:hidden; overflow:hidden; position:absolute; left:0; top:2.2em; width:110%; opacity:0; background:#fff; border:1px solid #ddd; border-radius:10px}
.wrap > .title nav li.active ul                     {overflow:inherit; visibility:visible; height:auto; gap:1em; transition:all .5s; opacity:1; box-shadow:5px 0 5px rgba(0, 0, 0, .2); padding:.5em 1em}
.wrap > .title nav li li a{display:block; padding:.5em 0; font-size:.9em}
.wrap > .title nav li li:not(:first-child) a        {border-top:1px solid #eee;}
@media all and (max-width:460px){
    .wrap > .title nav                                {background:#f4f4f4; width:100%; padding:.5em 1em .8em; margin-top:.5em}
    .wrap > .title nav>ul								{gap:.5em;}
    .wrap > .title nav>ul>li:first-child a            {width:17px; height:18px;}
    .wrap > .title nav>ul>li:not(:first-child)        {padding:0 .5em}
    .wrap > .title nav button                         {gap:.5em}
    .wrap > .title nav button:after					{border:1px solid #ddd;}
}

/* util */
.page_util                                                          {display:flex; justify-content:end; align-items:center;}
.page_util>li                                                       {position:relative; padding:0 1em}
.page_util>li:last-child                                            {padding-right:0;}
.page_util>li:not(:first-child):before                              {content:""; display:block; content:""; display:block; width:4px; height:4px; border-radius:50%; background:#aaa; position:absolute; left:-2px; top:0; bottom:0; margin:auto;}
.page_util>li>button                                                {display:flex; width:19px; height:19px; border-radius:8px;}
.page_util>li>button:before                                         {content:''; flex:none; display:block; width:100%; height:100%; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%;}
.page_util>li .share_btn:before                                     {background-image:url(/economy/resource/images/common/icon_share.svg); background-size:16px;}
.page_util>li.print>button:before                                   {background-image:url(/economy/resource/images/common/icon_print.svg); background-size:17px 16px;}
.page_util>li.page_share div                                        {height:0; visibility:hidden; overflow:hidden; position:absolute; left:0; top:30px; width:max-content; opacity:0; background:#fff; border:1px solid #ddd; border-radius:10px; text-align:center;}
.page_util>li.page_share div.active                                 {overflow:inherit; visibility:visible; height:auto; gap:1em; transition:all .5s; opacity:1; box-shadow:5px 0 5px rgba(0, 0, 0, .2); padding:.25em .5em}
.page_util > li.page_share ul                                       {padding-top:10px; display:flex; flex-flow:column; gap:7px; width:35px;}
.page_util > li.page_share ul > li a                                {display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.page_util > li.page_share ul > li[data-share] a:before             {content:''; display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%; border-radius:100%;}
.page_util > li.page_share ul > li[data-share="blog"] a:before      {background-image:url(/economy/resource/images/common/icon_blog.svg); background-color:#32b44a;}
.page_util > li.page_share ul > li[data-share="youtube"] a:before		{background-image:url(/economy/resource/images/common/icon_youtube.svg); background-color:#e03232;}
.page_util > li.page_share ul > li[data-share="facebook"] a:before	{background-image:url(/economy/resource/images/common/icon_facebook.svg); background-color:#385691;}
.page_util > li.page_share ul > li[data-share="instar"] a:before		{background:url(/economy/resource/images/common/icon_instar.svg) no-repeat 50% 50% / cover, linear-gradient(to bottom right, #4a48e8 20% , #ee3183 60%, #f0c05c 100%);}
.page_util > li.page_share ul > li[data-share="kakao"] a:before     {background-image:url(/economy/resource/images/common/icon_kakaoch.svg); background-color:#ffde00;}
.page_util > li.page_share ul > li[data-share="twitter"] a:before		{background-image:url(/economy/resource/images/common/icon_twitter.png); background-color:#000;}
.page_util > li.page_share ul > li[data-share="band"] a:before      {background-image:url(/economy/resource/images/common/icon_band.png); background-color:#50b748;}
.page_util > li.page_share ul > li[data-share="copy"] a:before      {background-image:url(/economy/resource/images/common/icon_copy.svg); background-color:#555555;}
.page_util > li.page_share .share_close                             {position:relative; width:30px; height:30px; margin-top:10px; margin-bottom:5px; background:#e5e5e5; border-radius:100%;}
.page_util > li.page_share .share_close::before                     {position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); content:''; background:var(--color-base);}
.page_util > li.page_share .share_close::after                      {position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); content:''; background:var(--color-base);}
.page_util > li.page_share .share_close:hover                       {transform:rotate(90deg);}
@media all and (max-width:460px){
    .page_util{position:absolute;/* top:1em*/ top:0; right:0;}
}

/* visual */
.visual_box                           {position:relative; color:#fff; min-height:340px; display:flex; align-items:center; flex-wrap:wrap; margin-bottom:2em; padding:2em 0}
.visual_box.center                    {text-align:center; font-size:1.25em;}
.visual_box.center h3                 {margin-left:auto; margin-right:auto;}
.visual_box>*                         {flex:1 0 100%; width:100%}
.visual_box:before                    {content:""; display:block; width:110%; height:100%; position:absolute; top:0; left:-5%; border-radius:30px; z-index:-1; background-size:cover; background-position:center; background-repeat:no-repeat;}
.visual_box h3                        {font-family:var(--font-jalnan); font-weight:normal; font-size:2.18em; position:relative; width:max-content; max-width:100%; margin-bottom:.3em}
.visual_box h3 span                   {display:block; position:absolute; width:.6em; height:.6em; background-repeat:no-repeat; background-position:center; line-height:50000; text-indent:-1000%; overflow:hidden;}
.visual_box h3 span:first-child       {background-image:url(/economy/resource/images/sub/icon_qL.svg); top:0; left:-.8em}
.visual_box h3 span:last-child        {background-image:url(/economy/resource/images/sub/icon_qR.svg); top:.12em; right:-.7em}
.visual_box p                         {font-family:var(--font-pre); font-size:1.12em; opacity:.8}
@media all and (max-width:1800px){
    .visual_box                         {padding:2em 3em}
    .visual_box:before                  {width:calc(100% + 4em); left:-2em;}
}
@media all and (max-width:1400px){
    .visual_box                         {min-height:250px;}
    .visual_box:before                  {width:calc(100% + 2em); left:-1em;}
    .visual_box h3                      {font-size:1.8em;}
    .visual_box p                       {font-size:1em}
}
@media all and (max-width:1024px){
    .visual_box                         {min-height:200px;}
}
@media all and (max-width:768px){
    .visual_box                         {padding:1.5em 1em; min-height:180px; line-height:1.3;}
    .visual_box h3                      {font-size:1.6em;}
    .visual_box h3 span                 {display:none;}
    .visual_box p br 					  {display:none}
}

/* box_board */
.box_board                          {position:relative; display:flex; flex-wrap:wrap; align-items:center; padding:2em 1em; gap:2.5em}
.box_board:before                   {display:block; content:""; width: 110%; height:100%; position:absolute; top:0; left:-5%; border-radius: 20px; border: 5px solid transparent; background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #0fafa1, #7dd12b, #e55631) border-box; z-index:-1}
.box_board i                        {display:block; width:114px; height:97px; background:rgba(93, 49, 255, .05) url(/economy/resource/images/bbs/box_icon.svg) no-repeat center / 60%; border-radius:20px;}
.box_board dt                       {font-size:1.4em; font-weight:600; margin-bottom:.2em}
.box_board dd                       {font-size:1.12em;}
@media all and (max-width:1800px){
    .box_board:before                 {width:calc(100% + 4em); left:-2em;}
}
@media all and (max-width:1400px){
    .box_board:before                 {width:calc(100% + 2em); left:-1em;}
}
@media all and (max-width:768px){
    .box_board                        {padding:1.5em 1em; gap:1.5em}
    .box_board i                      {width:90px; height:71px;}
    .box_board dt                     {font-size:1.35em;}
    .box_board dd                     {font-size:1em;}
}
@media all and (max-width:640px){
    .box_board                        {padding:1.5em 0; display:block; text-align:center; line-height:1.3}
    .box_board i                      {width:70px; height:50px; margin:0 auto 1em;}
    .box_board dt                     {margin-bottom:.5em}
}

/* tab */
.basic_tab ul               {display:flex; flex-wrap:wrap; border-bottom:1px solid #ddd; margin-bottom:5em; justify-content:center; align-items:center;}
.basic_tab button,
.basic_tab a                {display:block; padding:0 1.5em 1.5em; font-size:1.3em; line-height:1; position:relative; color:#888; width:100%;}
.basic_tab button           {font-weight:600; color:var(--color-point); font-size:1.4em;}
.basic_tab button:before    {content:""; display:block; width:100%; height:4px; background:var(--color-point); position:absolute; bottom:-1px; left:0;}

.basic_tab + .area_tab		{margin-top:-2em;margin-bottom:4em;}	

@media all and (max-width:1024px){
    .basic_tab ul             {margin-bottom:3em}
  	.basic_tab + .area_tab	{margin-top:-1.5em;margin-bottom:3em;}	
}
@media all and (max-width:680px){
    .basic_tab button,
    .basic_tab a              {font-size:1.2em; padding:0 1em 1em}
    .basic_tab button         {font-size:1.4em}
}
@media all and (max-width:460px){
    .basic_tab ul             {margin-bottom:2em; display:block; text-align:center;}
    .basic_tab a              {padding:.8em 1em; background:#f4f4f4; border-radius:10px; margin-bottom:.5em}
    .basic_tab button         {background:var(--color-point); color:#fff; border-radius:10px; margin-bottom:.5em; padding:1em;}
    .basic_tab button:before  {display:none;}
    .basic_tab button:after   {content:""; display:block; width:0; height:0; border-style: solid; border-width: 6px 7.5px 0px 7.5px; border-color: var(--color-point) transparent transparent transparent; position:absolute; bottom:-6px; left:0; right:0; margin:auto;}
	
  	.basic_tab + .area_tab	 {margin-top:-1em;margin-bottom:2em;}	
}