@charset "utf-8";

/****** main header ******/
body:has(.visual.active) .header:not(:has(nav .now)) .header_wrap               {background:none; border-bottom:0; transition:all .5s;}
body:has(.visual.active) .header:not(:has(nav .now)) .header_wrap h1 a          {filter:brightness(1000%); transition:all .5s}

/* nav : 1차 */
body:has(.visual.active) .header:not(:has(nav .now)) .header_wrap nav>ul>li>a   {color:#fff; transition:all .5s;}

/* util */
body:has(.visual.active) .header:not(:has(nav .now)) .util                      {color:#fff;}
body:has(.visual.active) .header:not(:has(nav .now)) .util i,
body:has(.visual.active) .header:not(:has(nav .now)) .util a:not(.wanjumall)    {filter:brightness(1000%);}
body:has(.visual.active) .header:not(:has(nav .now)) .util .wanjumall           {border-color:rgb(255, 255, 255, .8);background:transparent;}
body:has(.visual.active) .header:not(:has(nav .now)) .util .sitemap:before,
body:has(.visual.active) .header:not(:has(nav .now)) .util .sitemap:after,
body:has(.visual.active) .header:not(:has(nav .now)) .util .sitemap span        {background:#fff;}

/****** paging ******/
.paging                             {position:fixed; bottom:0; top:0; margin:auto; right:60px; height:max-content; font-family:var(--font-buri); z-index:5; color:#fff;
    font-size:14px;}
.paging.none                        {opacity:0; transition:all .5s}
.paging li                          {position:relative; width:21px; height:21px; display:flex; justify-content:center; align-items:center; margin:.5em 0}
.paging li.now                      {transition:all .5s}
.paging li span                     {display:block; width:7px; height:7px; background:#fff; border-radius:50%; overflow:hidden; text-indent:-100%; line-height:5000;}
.paging li:after                    {content:""; display:block; width:0; height:0; border-radius:50%; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
.paging li.now:after                {width:100%; height:100%; background:#fff; opacity:0; animation: opacity 3s infinite forwards;}
@media all and (max-width:1400px){
    .paging                         {right:30px}
}
@media all and (max-width:640px){
    .paging                         {right:10px;}
}

/****** txt_scroll ******/
body:has(.sub_wrap) .txt_scroll     {display:none;}
.txt_scroll                         {position:fixed; bottom:2em; left:50px; font-size:14px; writing-mode:vertical-lr; letter-spacing:1px; color:rgb(255, 255, 255, .5); z-index:1}
.txt_scroll.none                    {display:none}
.txt_scroll:before                  {content:""; display:block; width:1px; height:calc(100% + 2em); background:linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5)); position:absolute; left:0; bottom:-2em}
.txt_scroll:after                   {content:""; display:block; width:5px; height:5px; border-radius:50%; position:absolute; top:-5px; left:-2px; background:rgb(255, 255, 255, .5); animation: scrollCir 5s ease-in-out infinite forwards;}
.txt_scroll span                    {display:block; position:relative; padding-top:25px;}
.txt_scroll span:before,
.txt_scroll span:after              {content:""; display:block; width:7px; height:7px; border-top:2px solid #fff; border-left:2px solid #fff; transform:rotate(225deg); position:absolute; top:0; right:5px; opacity:0; animation: scrollArr 5s ease-in-out infinite forwards;}
.txt_scroll span:after              {top:8px;animation: scrollArr 5s ease-in-out 2s infinite forwards;}
@keyframes scrollCir                {0%{top:-5px; opacity:0} 10%{top:-5px; opacity:1} to{top:calc(100% + 5px + 2em); opacity:1;}}
@keyframes scrollArr                {0%{transform:translateY(0) rotate(225deg); opacity:0;} 50%{transform:translateY(-.2em) rotate(225deg); opacity:1;} to{transform:translateY(0) rotate(225deg); opacity:0;}}

@media all and (max-width:1024px){
    .txt_scroll                     {left:30px;}
}
@media all and (max-width:768px){
    .txt_scroll                     {left:20px; font-size:12px; display:none; }



	.paging							{ display:none; }
}

/* section 1~5 */
#section1,
#section2,
#section3,
#section4{width:100%; height:100svh !important; overflow:hidden; position:relative}
@media all and (max-width:768px){
	#section4{ height:auto !important; }
	#section2 .fp-tableCell,
	#section3 .fp-tableCell				{ height:100svh !important; }
	#section4							{ padding:5em 20px 6em 20px; }
}
/****** visual ******/
.visual_slide                           {width:100%; height:100svh; overflow:hidden}
.visual_slide video,
.visual_slide img                       {width:100vw; height:100%; position:absolute; top:0; left:0; z-index:-1; object-fit:cover;}

.visual_wrap                            {position:absolute; bottom:0; left:0; z-index:555; width:100%; height:90%; color:#fff;
    overflow:hidden; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; }

.visual_txt                             {flex:1 0 100%; position:relative; text-align:center; margin-bottom:8svh}
.visual_txt dt span                     {display:block; font-size:1.87em; font-weight:600; color:#fff; transform:translateY(-50%); opacity:0;}
.visual_txt dt strong                   {display:block; font-family:var(--font-jalnan); font-size:4.37em; font-weight:normal; color:#fff; white-space:nowrap; width:0; overflow:hidden; margin:auto}
.visual_txt dd                          {display:block; font-size:1.37em; font-family:var(--font-pre); font-weight:100; transform:scale(0); opacity:0;}
.active .visual_txt dt span             {animation:visualTxtEn 1s .5s forwards;}
.active .visual_txt dt strong           {animation:visualTxtTi 5s 1s forwards;}
.active .visual_txt dd                  {animation:visualTxt 1s 2s forwards;}
@keyframes visualTxtEn                  {0%{opacity:0; transform:translateY(-50%);} to{opacity:.4; transform:translateY(0);}}
@keyframes visualTxtTi                  {0%{width:0} to{width:100%}}
@keyframes visualTxt                    {0%{transform:scale(0); opacity:0} to{transform:scale(1); opacity:1}}
@media all and (max-width:1400px){
    .visual_txt dt span                 {font-size:1.5em}
    .visual_txt dt strong               {font-size:4em}
    .visual_txt dd                      {font-size:1.2em}
}
@media all and (max-width:768px){
    .visual_txt                         {margin-bottom:6svh;}
    .visual_txt dt span                 {font-size:1.2em}
    .visual_txt dt strong               {font-size:2.5em}
    .visual_txt dd                      {font-size:1em}
}
@media all and (max-width:400px){
    .visual_txt dt span                 {font-size:1em}
    .visual_txt dt strong               {font-size:2.2em}
    .visual_txt dd                      {font-size:.9em}
}

/* swiper control */
div:has(.swiper) .slide_control                                            {display:flex; flex-wrap:wrap; align-items:center;}

div:has(.swiper) .swiper-pagination                                        {position:relative; width:auto; display:flex; flex-wrap:wrap; top:0;}
div:has(.swiper) .swiper-pagination span                                   {width:30px; height:37px; display:flex; justify-content:center; align-items:center; background:none; font-size:14px; font-weight:200; letter-spacing:0;}
div:has(.swiper) .swiper-pagination .swiper-pagination-bullet-active       {width:37px; transition:all .5s; font-weight:400}

div:has(.swiper) .btn_auto                                                 {position:relative; width:37px; height:37px; overflow:hidden; text-indent:-10000%; line-height:5000;}
div:has(.swiper) .btn_auto:before,
div:has(.swiper) .btn_auto:after                                           {content:""; display:block; width:3px; height:13px; position:absolute; top:0; bottom:0; margin:auto; transition:all .5s}
div:has(.swiper) .btn_auto:before                                          {left:13px;}
div:has(.swiper) .btn_auto:after                                           {right:13px;}
div:has(.swiper) .btn_auto.paused:before                                   {left:0; right:0; width:0; height:0; border-style:solid; border-width:7px 0px 7px 12px; background:none;}
div:has(.swiper) .btn_auto.paused:after                                    {display:none;}

/* infozone */
.infozone                                                           {width:36.85%; max-width:692px; position:relative;}

.infozone_slide                                                     {box-shadow:9px 0 10px rgb(0, 0, 0, .3); border-radius:20px; margin-bottom:1em}
.infozone_slide li img                                              {border-radius:20px; width:100%;}

.infozone .slide_control                                            {justify-content:center;}
.infozone .swiper-pagination .swiper-pagination-bullet-active       {border:2px solid rgb(255, 255, 255, .23);}
.infozone .btn_auto:before,
.infozone .btn_auto:after                                           {background:#fff;}
.infozone .btn_auto.paused:before                                   {border-color:transparent transparent transparent #fff;}

@media all and (max-width:1400px){
    .infozone                                                       {width:50%;}
}
@media all and (max-width:768px){
    .infozone                                                       {width:60%;}
}
@media all and (max-width:460px){
    .infozone                                                       {width:80%;}
}

/****** aboute ******/
.about                                      {text-align:center}

.about_tit                                  {position:absolute; top:8em; width:100%; text-align:center;}
.active .about_tit                          {animation:aboutTit 1s 1.2s forwards; overflow:hidden;}
.about_tit h2                               {font-size:3.62em; font-family:var(--font-jalnan); font-weight:normal; color:#181818}
.about_tit p                                {font-size:1.25em; font-family:var(--font-pre); color:#777}
@keyframes aboutTit                         {0%{top:8em; opacity:1; height:auto} to{top:-8em; opacity:0; height:0;}}
@media all and (max-width:1400px){
    .about_tit h2                           {font-size:2.5em;}
}
@media all and (max-width:768px){
    .about_tit h2                           {font-size:2.2em;}
}
@media all and (max-width:400px){
    .about_tit                              {top:7em;}
    .active .about_tit                      {animation:aboutTitM 1s 1.2s forwards; overflow:hidden;}
    @keyframes aboutTitM                     {0%{top:7em; opacity:1; height:auto} to{top:-7em; opacity:0; height:0;}}
    .about_tit h2                           {font-size:1.8em;}
}

.about_wrap                                 {display:flex; flex-wrap:wrap; margin:20em 3em 3em; background:rgb(38, 146, 171, .8); height:calc(100% - 24em); border-radius:20px; position:relative; overflow:hidden;}
.about_wrap:after                           {content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:url(/economy/resource/images/main/about_bg.jpg) no-repeat center / cover; z-index:-1}
.active .about_wrap                         {animation:aboutWrap 1s 1.2s forwards;}
@keyframes aboutWrap                        {0%{margin:20em 3em 3em; height:calc(100% - 23em); border-radius:20px; background:rgb(38, 146, 171, .8);} to{margin:0; height:100%; border-radius:0; background:rgb(38, 146, 171, .3);}}
.about_wrap:before                          {content:""; display:block; width:1px; height:0; background:linear-gradient(to top, rgb(255, 255, 255, .5) 50%, rgb(255, 255, 255, 0) 100%); position:absolute; bottom:0; left:0; right:0; margin:auto;}
.active .about_wrap:before                  {animation:aboutLine 1s .5s forwards;}
@keyframes aboutLine                        {0%{height:0; opacity:0} to{height:100%; opacity:1;}}
.about_wrap div                             {flex:1 0 50%; width:50%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:relative;}
.about_wrap div:before                      {content:""; display:block; width:100%; height:0; position:absolute; top:0; left:0}
.about_wrap div:hover:before,
.about_wrap div:focus:before                {height:100%; background:rgb(0, 0, 0, .5); transition:all .5s}
.about_wrap dl                              {position:relative; color:#fff; padding:0 20px; transition:all .5s}
.about_wrap dl:before                       {content:""; display:block; width:36px; height:36px; margin:auto; background-repeat:no-repeat; background-position:center; margin-bottom:3.5em;}
.about_wrap div:hover dl:before,
.about_wrap div:focus dl:before             {margin-bottom:1em; transition:all .5s}
.about_wrap dl:after                        {content:""; display:block; width:30px; height:30px; border-radius:50%; background:rgb(0, 0, 0, .1); position:absolute; top:20px; left:30px; right:0; margin:auto;}
.about_wrap div:first-child dl:before       {background-image:url(/economy/resource/images/main/about_icon01.svg);}
.about_wrap div:nth-child(2) dl:before      {background-image:url(/economy/resource/images/main/about_icon02.svg);}
.about_wrap dt                              {color:rgb(255, 255, 255, .5); position:relative; margin-bottom:0;}
.about_wrap div:hover dt,
.about_wrap div:focus dt                    {margin-bottom:4em; transition:all .5s}
.about_wrap dt strong                       {display:block; color:#fff; font-size:2.5em; font-weight:400;}
.about_wrap dt br                           {display:none;}
.about_wrap dt:before,
.about_wrap dt:after                        {content:""; display:block; width:6px; height:6px; border-radius:50%; background:rgb(255, 255, 255, .3); position:absolute; left:0; right:0; margin:auto;}
.about_wrap dt:before                       {bottom:6.5em;}
.about_wrap div:hover dt:before,
.about_wrap div:focus dt:before             {bottom:-1.5em; transition:all .5s}
.about_wrap dt:after                        {bottom:7.2em;}
.about_wrap div:hover dt:after,
.about_wrap div:focus dt:after              {bottom:-2.2em; transition:all .5s}
.about_wrap dd                              {visibility:hidden; height:0; overflow:hidden; opacity:0;}
.about_wrap div:hover dd,
.about_wrap div:focus dd                    {visibility:visible; height:auto; opacity:1; transition:all 1s}
@media all and (max-width:1400px){
    .about_wrap                             {display:flex; flex-wrap:wrap; margin:17em 2em 2em; background:rgb(38, 146, 171, .8); height:calc(100% - 19em); border-radius:20px; position:relative; overflow:hidden;}
    .active .about_wrap                     {animation:aboutWrap1400 1s 1.2s forwards;}
    @keyframes aboutWrap1400                {0%{margin:17em 2em 2em; height:calc(100% - 19em); border-radius:20px; background:rgb(38, 146, 171, .8);} to{margin:0; height:100%; border-radius:0; background:rgb(38, 146, 171, .3);}}
    .active .about_wrap dl                  {margin-top:0; animation:aboutDt 1s 1.2s forwards;}
    @keyframes aboutDt                      {0%{margin-top:0;} to{margin-top:66px}}
    .about_wrap dt strong                   {font-size:2.2em;}
}
@media all and (max-width:768px){
    .about_wrap dl:before                   {width:28px; height:28px; margin-bottom:2.5em;}
    .about_wrap dl:after                    {width:20px; height:20px; top:15px; left:20px;}
    .about_wrap dt                          {line-height:1.2}
    .about_wrap div:hover dt,
    .about_wrap div:focus dt                {margin-bottom:2.5em; transition:all .5s}
    .about_wrap dt:before,
    .about_wrap dt:after                    {width:4px; height:4px;}
    .about_wrap dt:before                   {bottom:5.4em;}
    .about_wrap div:hover dt:before,
    .about_wrap div:focus dt:before         {bottom:-1em; transition:all .5s}
    .about_wrap dt:after                    {bottom:4.8em;}
    .about_wrap div:hover dt:after,
    .about_wrap div:focus dt:after          {bottom:-1.6em; transition:all .5s}
    .about_wrap dt strong                   {font-size:2em; margin-top:.2em}
}
@media all and (max-width:480px){
    .about_wrap dt:after                    {bottom:7em;}
    .about_wrap dt:before                   {bottom:7.6em;}
    .about_wrap dt strong                   {font-size:1.6em;}
    .about_wrap dt br                       {display:inherit;}
}

.about_wrap ul                              {display:flex; flex-wrap:wrap; gap:.8em; text-align:left;}
.about_wrap li                              {width:calc(50% - .5em);}
.about_wrap li a                            {border:1px solid rgb(255, 255, 255, .3); color:rgb(255, 255, 255, .5); display:block; padding:.8em 1em; border-radius:10px; font-size:1.12em; font-weight:100; position:relative;}
.about_wrap li a:hover,
.about_wrap li a:focus                      {font-weight:300; border-color:#fff; color:#fff; transition:all .5s;}
.about_wrap li a:before                     {content:""; display:block; width:19px; height:10px; background:url(/economy/resource/images/common/arr.svg) no-repeat center; position:absolute; top:0; bottom:0; right:1em; margin:auto; opacity:.15; filter:brightness(1000%);}
.about_wrap li a:after                      {content:""; display:block; width:17px; height:17px; border-radius:50%; background:#fff; position:absolute; top:0; bottom:0; right:.7em; margin:auto; opacity:0;}
.about_wrap li a:hover:before,
.about_wrap li a:focus:before               {animation:aboutArr 1s forwards;}
.about_wrap li a:hover:after,
.about_wrap li a:focus:after                {opacity:.15; transition:all .5s;}
@keyframes aboutArr                         {0%{opacity:.15; transform:translateX(0);} 10%{opacity:1; transform:translateX(0);} 20%{opacity:1; transform:translateX(.25em);} 50%{opacity:1; transform:translateX(0);} 80%{opacity:1; transform:translateX(.25em);} to{opacity:1; transform:translateX(0);}}
@media all and (max-width:768px){
    .about_wrap li a                        {font-size:1em;}
	.about_wrap								{ height:calc(100svh - 40svh); }
	 @keyframes aboutWrap1400                {0%{margin:17em 2em; height:calc(100% - 60svh); border-radius:20px; background:rgb(38, 146, 171, .8);} to{margin:0; height:100%; border-radius:0; background:rgb(38, 146, 171, .3);}}
}
@media all and (max-width:640px){
    .about_wrap ul                          {gap:0; border:1px solid rgba(255, 255, 255, .2); border-radius:10px;}
    .about_wrap li                          {width:100%;}
    .about_wrap li:not(:first-child)        {border-top:1px solid rgb(255, 255, 255, .15);}
    .about_wrap li a                        {border:0;}
}

/* share */
.share                                      {background:url(/economy/resource/images/main/share_bg.jpg) no-repeat 50% 50% / cover;}
.share>div                                  {display:flex; overflow:hidden; align-items:center; justify-content:space-between;}
@media all and (max-width:1400px){
    .share>div>div{padding-top:72px}
}
@media all and (max-width:1024px){
    .share>div>div{padding-top:67px}
}

.share_tit                                  {text-align:center; color:#fff; opacity:0; transform:translateY(-3em); margin:auto; width:100%; }
.active .share_tit                          {animation:shareTit 1.5s .5s forwards;}
@keyframes shareTit                         {0%{opacity:0; transform:translateY(-10em); width:auto;} 80%{opacity:1; transform:translateY(0); width:auto;} to{opacity:1; transform:translateY(0); width:max-content;}}
.share_tit h2                               {font-family:var(--font-jalnan); font-weight:100; font-size:4.18em; position:relative; width:max-content; margin:0 auto .65em}
.share_tit h2:before,
.share_tit h2:after                         {content:""; display:block; width:6px; height:6px; border-radius:50%; background:rgba(255, 255, 255, .5); position:absolute; left:0; right:0; margin:auto;}
.share_tit h2:before                        {bottom:-.1em}
.share_tit h2:after                         {bottom:-.3em}
.share_tit h2 i                             {display:block; position:relative; border-radius:50%; width:39px; height:39px; border:2px solid #fff; position:absolute; top:-.2em; right:-.6em; animation:rocation 2s infinite;}
.share_tit h2 i:before,
.share_tit h2 i:after                       {content:""; display:block; width:48.5%; height:3px; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; background:#fff;}
.share_tit h2 i:before                      {transform:rotate(90deg);}
.share_tit p                                {font-family:var(--font-pre); font-weight:100; font-size:1.12em}
@media all and (max-width:1400px){
    .share_tit h2                           {font-size:3em}
    .share_tit h2 i                         {width:31px; height:31px;}
}
@media all and (max-width:1024px){
    .share_tit h2                           {font-size:2.7em}
    .share_tit h2 i                         {width:28px; height:28px; right:-.8em}
}
@media all and (max-width:900px){
    .active .share_tit                      {animation:shareTit900 2s .5s forwards; white-space:nowrap;}
    @keyframes shareTit900                  {0%{opacity:0; transform:translateY(-10em); width:auto; display:block; flex:1 0 100%} 20%{opacity:1; transform:translateY(0);flex:1 0 100%; width:auto; display:block;}  80%{opacity:1; transform:translateY(0); width:auto; flex:1 0 100%} 90%{opacity:0; transform:translateY(10em); width:auto; flex:1 0 100%}  to{opacity:0; transform:translateY(10em); width:0; flex:0 0 0;}}
}

.share_wrap                                 {width:0; overflow:hidden; height:100%; visibility:hidden; background:#fff; opacity:0; transform:translateX(100%);}
.active .share_wrap                         {animation:shareWrap 1.5s 1.8s forwards; display:flex; flex-wrap:wrap; align-items:center; padding-left:8%;}
@keyframes shareWrap                        {0%{width:0; opacity:0; transform:translateX(100%); visibility:hidden;} to{width:calc(100% - 600px); opacity:1; transform:translateX(0); visibility:visible;}}
@media all and (max-width:1400px){
    .active .share_wrap                     {animation:shareWrap1500 1.5s 1.8s forwards; padding-left:30px}
    @keyframes shareWrap1500                {0%{width:0; opacity:0; transform:translateX(100%); visibility:hidden;} to{width:calc(100% - 400px); opacity:1; transform:translateX(0); visibility:visible;}}
}
@media all and (max-width:1024px){
    .active .share_wrap                     {animation:shareWrap1024 1.5s 1.8s forwards;}
    @keyframes shareWrap1024                {0%{width:0; opacity:0; transform:translateX(100%); visibility:hidden;} to{width:calc(100% - 300px); opacity:1; transform:translateX(0); visibility:visible;}}
}
@media all and (max-width:900px){
    .active .share_wrap                     {animation:shareWrap900 1s 2.5s forwards; width:100%; transform:translateX(100%);}
    @keyframes shareWrap900                 {0%{opacity:0; transform:translateX(100%); visibility:hidden;} to{opacity:1; transform:translateX(0); visibility:visible;}}
}
@media all and (max-width:640px){
    .active .share_wrap                      {padding-left:0;}
}

.share_container                            {width:100%; position:relative;}

.share_wrap h3                              {font-size:1.31em; color:var(--color-green); font-weight:100; margin-bottom:5svh}
.share_wrap h3 strong                       {display:block; font-family:var(--font-jalnan); font-size:2.58em; font-weight:normal; color:var(--color-dark-green)}
@media all and (max-width:1400px){
    .share_wrap h3                          {font-size:1.15em;}
    .share_wrap h3 strong                   {font-size:2.2em;}
}
@media all and (max-width:640px){
    .share_wrap h3                          {text-align:center; margin-bottom:.5em}
  .share_wrap 								{ height:100svh; }
}

.share_tab                                  {display:flex; flex-wrap:wrap; gap:1em; position:absolute; top:2.2em; right:50px;}
.share_tab a                                {position:relative; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; font-size:1.31em; font-weight:600; color:rgba(28, 196, 24, .5); padding:.8em 1.5em; border-radius:10px; min-width:224px; gap:1em}
.share_tab .now a                           {color:#fff; transition:all .5s}
.share_tab a:before                         {content:""; display:block; background:var(--color-green); width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; opacity:.05; border-radius:10px;}
.share_tab a:after                          {content:""; display:block; width:0; height:100%; position:absolute; top:0; left:0; z-index:-1; border-radius:10px;}
.share_tab .now a:after                     {width:100%; background:var(--color-green); transition:all .5s; z-index:-1}
.share_tab li:not(.now) a:hover:after,
.share_tab li:not(.now) a:focus:after       {width:100%; background:#fff; border:1px solid var(--color-green); transition:all .5s; z-index:-1}
.share_tab i                                {display:block; width:27px; height:27px; background-position:center right; background-repeat:no-repeat;}
.share_tab li:first-child i                 {background-image:url(/economy/resource/images/main/share_icon01.svg);}
.share_tab li:nth-child(2) i                {background-image:url(/economy/resource/images/main/share_icon02.svg);}
.share_tab .now i                           {filter:brightness(1000%); animation:shakeIcon 1s infinite}
@media all and (max-width:1400px){
    .share_tab                              {right:30px}
    .share_tab a                            {padding:.5em 1em; min-width:100px;}
}
@media all and (max-width:1024px){
    .share_tab a                            {padding:.4em 1em;}
    .share_tab i                            {width:20px; height:20px;}
}
@media all and (max-width:640px){
    .share_tab                              {position:relative; right:0; top:0; justify-content: center; margin-bottom:2em}
    .share_tab a                            {font-size:1.15em;}
}

.share_list                                 {width:0; overflow:hidden; height:0; visibility:hidden; background:#fff; opacity:0; transform:translateX(-100%); text-align:center; position:relative;}
.share_list.active                          {width:calc(100% + 150px); margin-left:-75px; margin-right:-75px; visibility:visible; height:auto; opacity:1; transform:translateX(0); transition:all .5s;}

.share_list li a                            {display:flex; flex-wrap:wrap; flex-direction:column-reverse; opacity:.5;  padding-bottom:5px}
.share_list .swiper-slide-active a          {flex-direction:inherit; opacity:1;}

.share_list p                               { width:100%; overflow:hidden; border-radius:160px; height:38svh; max-height:366px; top:-3.5em; position:relative; }
.share_list p img                           {object-fit:cover; width:100%; height:100%; filter:blur(5px);}
.share_list .swiper-slide-active p          {top:0;}
.share_list .swiper-slide-active p img      {filter:none;}

.share_list .swiper-slide					{ max-width:710px; }
.share_list .swiper-slide a					{ width:calc(100% - 75px); margin-left:75px; margin-right:75px; }
@media all and (max-width:1400px){
    .share_list p                           {height:30svh;}
}
@media all and (max-width:1024px){
    .share_list p                           {height:26svh;}
}
@media all and (max-width:640px){
    .share_list p                           {height:20svh;}
}

.share_list dl                              {width:1px; overflow:hidden; visibility:hidden; background:#fff; opacity:0; transform:translateY(100%);}
.share_list .swiper-slide-active dl         {visibility:visible; opacity:1; width:100%; transform:translateY(0);}
.share_list dt                              {color:var(--color-green); font-weight:800; font-size:1.37em; line-height:1.25; margin:1em 0}
.share_list dt strong                       {font-size:1.8em; font-weight:600; color:var(--color-base); display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.share_list dt + dd                         {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family:var(--font-pre); font-size:1.125em; color:#777; font-weight:100; margin:1em 0}
.share_list dd:last-child                   {color:var(--color-dark-green); position:relative; font-family:var(--font-pre); font-size:1.125em; width:max-content; margin:auto; padding-right:30px}
.share_list dd:last-child:before            {content:""; display:block; background:var(--color-green); width:17px; height:17px; border-radius:50%; opacity:.05; position:absolute; top:-.1em; left:-.4em;}
.share_list dd:last-child:after             {content:""; display:block; background:url(/economy/resource/images/common/arr.svg); width:19px; height:10px; border-radius:50%; position:absolute; top:0; bottom:0; right:0; margin:auto; width:19px; height:10px;}
@media all and (max-width:1500px){
    .share_list dt                          {font-size:1.2em; line-height:1.4;}
    .share_list dt strong                   {font-size:1.6em}
    .share_list dt + dd                     {font-size:1em; margin:0 0 1em; max-width:80%; margin:auto;}
}
@media all and (max-width:640px){
    .share_list dt strong                   {font-size:1.25em}
    .share_list dt + dd                     { margin:0 auto 1em;}
}

.share_list .btn_prev,
.share_list .btn_next                                               {display:block; width:81px; height:81px; text-indent:-1000%; line-height:50000; overflow:hidden; border-radius:50%; border:1px solid rgba(0, 0, 0, .1); position:absolute; bottom:0; margin:auto; z-index:2; background:#fff;}
.share_list .btn_prev                                               {top:-2svw; left:calc(710px - 81px);}
.share_list .btn_next                                               {top:-12svw; left:calc(710px - 40.5px);}
.share_list .btn_prev:before,
.share_list .btn_prev:after,
.share_list .btn_next:before,
.share_list .btn_next:after                                         {content:""; display:block; width:12px; height:2px; background:#ccc; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
.share_list .btn_prev:before,
.share_list .btn_next:before                                        {transform:rotate(45deg);}
.share_list .btn_prev:after,
.share_list .btn_next:after                                         {transform:rotate(-45deg);}
.share_list .btn_prev:after,
.share_list .btn_next:before                                        {top:-8px;}
.share_list .btn_prev:before,
.share_list .btn_next:after                                         {bottom:-8px;}
.share_list .btn_prev:hover:before,
.share_list .btn_prev:focus:before,
.share_list .btn_prev:hover:after,
.share_list .btn_prev:focus:after,
.share_list .btn_next:hover:before,
.share_list .btn_next:focus:before,
.share_list .btn_next:hover:after,
.share_list .btn_next:focus:after                                   {background:var(--color-green); transition:all .5s}

.share_list .slide_control                                          {justify-content:end; padding-right:calc(50px + 75px); z-index:1; background:#fff;}
.share_list .swiper-pagination .swiper-pagination-bullet-active     {border:2px solid rgba(28, 196, 24, .23); color:var(--color-green)}
.share_list .btn_auto:before,
.share_list .btn_auto:after                                         {background:var(--color-base);}
.share_list .btn_auto.paused:before                                 {border-color:transparent transparent transparent var(--color-base);}
.share_list .btn_more                                               {display:block; width:30px; height:37px; overflow:hidden; text-indent:-1000%; line-height:50000; position:relative;}
.share_list .btn_more:before,
.share_list .btn_more:after                                         {content:""; display:block; width:13px; height:3px; background:var(--color-green); position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
.share_list .btn_more:after{transform:rotate(90deg);}
@media all and (max-width:1500px){
    .share_list .btn_prev,
    .share_list .btn_next                                           { width:70px; height:70px;}
    .share_list .btn_prev                                          	{ top:-2svw; left:calc(610px - 80px);}
	.share_list .btn_next                                           { top:-12svw; left:calc(610px - 55px);}
	.share_wrap h3 strong											{ font-size:2.28em; }
	.share_tab a													{ min-width:194px; padding:.6em 1.5em }
	.share_list .swiper-slide										{ max-width:610px; }
	.share_list .swiper-slide a										{ width:calc(100% - 50px); margin-left:25px; margin-right:25px; }
	.share_list.active												{ width:calc(100% + 50px); margin-left:-25px; margin-right:-25px; }
	.share_list .slide_control										{ padding-right:calc(50px + 25px); }
}
@media all and (max-width:1400px){
    .share_list .slide_control                                      {padding-right:0;}
    .share_list .btn_prev,
    .share_list .btn_next                                           { width:30px; height:30px; border:0; background:none; position:relative; top:auto; left:auto;}
	.share_list .swiper-slide										{ max-width:590px; }
	.share_list .swiper-slide a										{ width:calc(100% - 30px); margin-left:15px; margin-right:15px; }
	.share_list.active												{ width:calc(100% + 30px); margin-left:-15px; margin-right:-15px; }
	.share_tab														{ top:1.7em; }
}
@media all and (max-width:1168px){
	.share_list .swiper-slide										{ max-width:560px; }
	.share_list .swiper-slide a										{ width:calc(100% - 30px); margin-left:15px; margin-right:15px; }
	.share_list.active												{ width:calc(100% + 30px); margin-left:-15px; margin-right:-15px; }
}
@media all and (max-width:768px){
	.active .share_wrap												{ padding-right:30px; }
	.share_list .swiper-slide										{ max-width:inherit; width:100% }
	.share_list .swiper-slide a										{ width:calc(100% - 30px); margin-left:15px; margin-right:15px; }
	.share_list.active												{ width:calc(100% + 30px); margin-left:-15px; margin-right:-15px; }
}
@media all and (max-width:640px){
	.active .share_wrap												{ padding-right:30px; padding-left:30px; }
    .share_list .slide_control                                      {position:relative; margin:1em auto 0; justify-content:center;}
	div:has(.swiper) .swiper-pagination span						{ width:25px; height:25px; font-size:11px; }
	div:has(.swiper) .swiper-pagination .swiper-pagination-bullet-active	{ width:25px; }
	div:has(.swiper) .btn_auto										{ width:25px; height:25px; }
  .share_tab														{ top:0; }
	
}

/* news */
.news                               {background:url(/economy/resource/images/main/news_bg.jpg) no-repeat center / cover; color:#fff; padding:30px 60px 0;}
.news>div                           {display:flex; flex-wrap:wrap; align-items:center;}
.news_container                     {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%}
.news_wrap                          {width:35%; position: relative; min-height:492px;}
.news_wrap:nth-child(3)             {width:55%}
@media all and (max-width:1500px){
    .news_wrap                      {width:35%; min-height:374px;}
    .news_wrap:nth-child(3)         {width:60%}
}
@media all and (max-width:1400px){
    .news                           {padding:30px 30px 0;}
    .news_wrap                      {width:35%; min-height:352px;}
    .news_wrap:nth-child(3)         {width:60%}
}
@media all and (max-width:1024px){
    .news_wrap                      {min-height:308px;}
}
@media all and (max-width:900px){
    .news_wrap,
    .news_wrap:nth-child(3)         {width:100%;}
    .news_wrap                      {min-height:208px;}
    .news_wrap:nth-child(3)         {margin-top:1.5em}
}
@media all and (max-width:640px){
    .news                           {padding:30px 20px 0;}
    .news_wrap                      {min-height:158px}
}

.news_tit                           {flex:1 0 100%; display:flex; align-items:end; margin-bottom:5em}
.news_tit h2                        {font-size:4.25em; font-weight:900; line-height:1}
.news_tit p                         {font-family:var(--font-pre); font-weight:100; font-size:1.25em; position:relative; padding-left:2em; line-height:1.2}
.news_tit p:before,
.news_tit p:after                   {content:""; display:block; width:6px; height:6px; border-radius:50%; background:#fff; position:absolute; bottom:.4em;}
.news_tit p:before                  {left:.65em;}
.news_tit p:after                   {left:1.2em; background:rgba(255, 255, 255, .2)}
@media all and (max-width:1500px){
    .news_tit                       {margin-bottom:4em}
}
@media all and (max-width:1400px){
    .news_tit                       {margin-bottom:3em}
    .news_tit h2                    {font-size:3em;}
    .news_tit p                     {font-size:1.1em}
}
@media all and (max-width:900px){
    .news_tit                       {margin-bottom:2.5em}
}
@media all and (max-width:640px){
    .news_tit                       {display:block; text-align:center; margin-bottom:4em}
    .news_tit h2                    {font-size:2.8em; margin-bottom:.3em}
    .news_tit p                     {padding:0;}
    .news_tit p:before,
    .news_tit p:after               {right:0; left:0; margin:auto; bottom:-1em}
    .news_tit p:before              {left:.6em}
    .news_tit p:after               {right:.6em}
}

.news_tab                           {position:relative; padding:0 2em; flex:1 0 100%}
.news_tab ul                        {display:flex; align-items:end; flex-wrap:wrap; gap:0 2em}
.news_tab li                        {font-size:1.43em; opacity:.3; line-height:1}
.news_tab .now                      {font-size:2.3em; opacity:1;}
.news_tab .news_more                {position:absolute; bottom:0; right:0; display:none; width:19px; height:19px; line-height:50000; text-indent:-10000%; overflow:hidden;}
.news_tab .news_more:before,
.news_tab .news_more:after          {content:""; display:block; width:100%; height:3px; background:#fff; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
.news_tab .news_more:after          {transform:rotate(90deg);}
.news_tab .now .news_more           {display:block;}
@media all and (max-width:1500px){
    .news_tab                       {position:relative; padding:0 2em}
}
@media all and (max-width:1400px){
    .news_tab                       {padding:0 40px 0 0}
    .news_tab ul                    {gap:.5em 1.5em;}
    .news_tab li                    {font-size:1.15em;}
    .news_tab .now                  {font-size:1.5em;}
}
@media all and (max-width:1024px){
    .news_tab .news_more            {width:15px; height:15px;}
}

@media all and (max-width:640px){
    .news_tab .now                  {font-size:1.4em;}
}

.news_list                          {width:0; overflow:hidden; height:0; visibility:hidden; opacity:0; position:absolute; top:2.5em; left:0;}
.news_list.active                   {width:100%; visibility:visible; height:auto; opacity:1; transition:all .5s; overflow:inherit}
.news_list ul                       {position:relative; margin-top:1.5em; padding:1em 3em 2em; min-height:52svh;}
.news_list ul:before                {content:""; display:block; width:100%; height:100%; border-radius:1.8em; position:absolute; top:0; left:0; background:rgba(0, 0, 0, .2)}
.news_list li a                     {display:flex; justify-content:space-between; flex-wrap:wrap; font-weight:100; position:relative; padding:1.5em 0; opacity:.7}
.news_list li a:hover,
.news_list li a:focus               {opacity:1; transition:all .5s}
.news_list li a strong              {overflow:hidden; width:calc(100% - 150px); white-space:nowrap; text-overflow:ellipsis; font-weight:200; font-size:1.12em}
.news_list li a span                {font-size:.9em}
.news_list li a:before,
.news_list li a:after               {content:""; display:block; width:100%; height:1px; background:rgba(255, 255, 255, .08); position:absolute; left:0; bottom:0;}
.news_list li a:after               {width:0; height:2px; background:#fff;}
.news_list li:hover a:after,
.news_list li:focus a:after         {width:100%; transition:all .5s;}

.news_list ul:has(.none_data)  		{display:flex;justify-content:center;height:100%;align-items: center;font-size: 1.2em;}
@media all and (max-width:1500px){
    .news_list ul                   {padding:.5em 2em 1em; min-height:38svh}
    .news_list li a                 {padding:1em 0;}
    .news_list li a strong          {font-size:1em}
}
@media all and (max-width:1400px){
    .news_list                      {top:1.2em}
    .news_list li a                 {padding:1em 0}
}
@media all and (max-width:900px){
    .news_list ul					{min-height:21svh;}
    .news_list li:nth-child(n+4)    {display:none;}
}
@media all and (max-width:668px){
	.news_tab .now					{ width:100%; }
	.news_list						{ position:initial; }
	.news_tab ul					{ gap:.5em 1em; }
}
@media all and (max-width:640px){
    .news_list ul                   {margin-top:1em; min-height:15svh;}
    .news_list ul:before            {border-radius:5px}
    .news_list li a                 {padding:.5em 0}
}
@media all and (max-width:510px){
}