#main{background-color: #EFF8FF;} #main .inner{width: 1520px;margin: 0 auto;} #main .in_line{width: calc(100% - 80px);border: 2px solid #000000;border-radius: 10px;margin: 0 auto;} #main .cont_w{overflow: hidden;} #main .main_con01 .in_line{padding-top: 116px;padding-bottom: 110px;border-radius: 10px 10px 0 0 ;border-bottom: none;} #main .main_con01 .inner{display: flex;justify-content: space-between;align-items: center;} #main .main_con01 .swiper{width: 528px;} #main .m_title h3{font-size: 60px;color: #FFFFFF;font-weight: 600;-webkit-text-stroke: 1.5px black;text-shadow: 4px 4px 0 #000;font-family: 'Ria';} #main .m_title h3 b{color: #A1D9F1;font-family: 'Ria';} #main .m_title p{display: block;margin-top: 30px;font-size: 20px;color: #222222;font-weight: 400;line-height: 34px;;} #main .m_title p b{color: #429BE9;font-weight: inherit;position: relative;z-index: 5;} #main .m_title p b:before{content: '';display: block;width: 100%;height: 15px;background-color: #D6ECFF;position: absolute;bottom: -3px;left: 0;;z-index: -1;transform: scaleX(0);transition-duration: 0.5s;} #main .on .m_title p b:before{transform: scaleX(1);transition-delay: 1s;} #main .main_con01{position: relative;z-index: 5;;} #main .main_con01 .left{width: 890px;} #main .main_con01 .list{margin-top: 40px;} #main .main_con01 .list ul{display: flex;gap: 14px;flex-direction: column;} #main .main_con01 .list ul li{display: flex;gap: 26px;align-items: center;} #main .main_con01 .list ul li span{display: flex;width: 150px;height: 54px;background-color: #E1F1FE;border-radius: 8px;align-items: center;justify-content: center;font-size: 18px;color: #00438C;font-weight: 500;} #main .main_con01 .list ul li p{font-size: 18px;color: #395144;font-weight: 500;} #main .main_con01 .list ul li p{font-size: 18px;color: #395144;font-weight: 500;} #main .main_con01 .txt{position: relative;padding-top: 40px;margin-top: 40px;;} #main .main_con01 .txt:before{content: '';display: block;width: 100%;height: 1.5px;background: url(/earthday2026/img/main/dash_line.png);position: absolute;top: 0;left: 0;} #main .main_con01 .txt ul {display: flex;flex-direction: column;gap: 30px;} #main .main_con01 .txt ul li{display: flex;;font-size: 18px;color: #222222;line-height: 30px;;} #main .main_con01 .txt ul li span{width: 138px;display: block;} #main .main_con01 .txt ul li p{width: calc(100% - 138px);font-size: 18px;color: #222222;line-height: 30px;;} #main .main_con01 .txt ul li span{font-weight: 600;} #main .main_con01 .img{border-radius: 10px;overflow: hidden;;} #main .main_con01 .img img{display: block;max-width: 100%} #main .main_con01 .swiper-pagination{position: static;} #main .main_con01 .swiper-pagination-bullet{background-color: #429BE9;width: 8px;height: 8px;margin: 0 4px;margin-top: 20px;} #main .flow_w{margin-bottom: 120px;overflow: hidden;width: 100%;} #main .flow_w .flow .wr{position: relative;} #main .flow_w .flow{overflow: hidden;} #main .flow_w .flow img{display: block;} #main .flow_w .flow {height: 100px;background-color: #429BE9;display: flex;align-items: center;position: relative;;} #main .flow_w .flow2 {background-color: #fff;border-top: 2px solid #222222;border-bottom: 2px solid #222222;;} #main .flow_w .flow1 .after{position: absolute;top: 0;transform: translateX(100%);} #main .flow_w .flow2 .after{position: absolute;top: 0;transform: translateX(-100%);} #main .main_con02{padding-bottom: 142px;background: linear-gradient(to bottom, #EFF8FF, #ECFBDE);} #main .main_con02 .in_line{padding-top: 120px;} #main .main_con02 .m_title{text-align: center; margin-bottom: 40px;} #main .main_con02 .tables{position: relative;} #main .main_con02 .tables .table_top{height: 70px;width: 100%;border-radius: 50px;background-color: #fff;border: 1.5px solid #222222;display: flex;align-items: center;margin-bottom: 20px;position: sticky;top: 100px;z-index: 5;} #main .main_con02 .tables .table_top strong{font-size: 18px;color: #222222;font-weight: 700;} #main .main_con02 .tables .table_top span{width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;background-color: #429BE9;border-radius: 50%;font-size: 18px;color: #FFFFFF;font-weight: 700;} #main .main_con02 .tables .table_top .table_today{display: flex;justify-content: center;flex: 1;align-items: center;gap: 9px;border-right: 1.5px dashed #C0CBB5;} #main .main_con02 .tables .table_top .table_today:last-child{border-right: none;} #main .main_con02 .tables .table_body{display: flex;;gap: 10px} #main .main_con02 .tables .table_body > div{display: flex;flex-direction: column;flex: 1;gap: 10px} #main .main_con02 .tables .table_body .box{padding: 20px;background-color: #DDF5C7;border-radius: 12px;} #main .main_con02 .tables .table_body .box .tit span{display: flex;width: 134px;height: 32px;align-items: center;justify-content: center;background-color: #67C115;border-radius: 50px;font-weight: 700;color: #FFFFFF;font-size: 14px;} #main .main_con02 .tables .table_body .box .tit strong{font-size: 16px;color: #6D8755;font-weight: 500;margin-top: 12px;display: flex;align-items: center;gap: 8px} #main .main_con02 .tables .table_body .box .tit strong:before{content: '';display: block;width: 13px;height: 16px;background: url(/earthday2026/img/main/pin01.svg)} #main .main_con02 .tables .table_body .box.important2 .tit strong:before{background: url(/earthday2026/img/main/pin02.svg)} #main .main_con02 .tables .table_body .box.important3 .tit strong:before{background: url(/earthday2026/img/main/pin03.svg)} #main .main_con02 .tables .table_body .box .tit{border-bottom: 1px solid #C3DEAB;padding-bottom: 15px;margin-bottom: 18px;} #main .main_con02 .tables .table_body .box .txt{display: flex;gap: 8px;align-items: flex-start;} #main .main_con02 .tables .table_body .box .txt:before{content: '';width: 5px;height: 5px;border: 1px solid #222222;box-sizing: border-box;border-radius: 50%;;display: block;position: relative;top: 11px;} #main .main_con02 .tables .table_body .box .txt p{font-size: 17px;color: #222222;line-height: 26px;width: calc(100% - 13px);} #main .main_con02 .tables .table_body .box .txt p{font-size: 17px;color: #222222;line-height: 26px;width: calc(100% - 13px);} #main .main_con02 .tables .table_body .box.important1{background-color: #67C115;} #main .main_con02 .tables .table_body .box.important2{background-color: #DBF0F2;} #main .main_con02 .tables .table_body .box.important1 .tit span{background-color: #fff;color: #67C115;} #main .main_con02 .tables .table_body .box.important1 .tit strong{color: #EEFFDF;} #main .main_con02 .tables .table_body .box.important2 .tit strong{color: #466885;} #main .main_con02 .tables .table_body .box.important2 .tit span{background-color: #429BE9;} #main .main_con02 .tables .table_body .box.important1 .txt p{color: #FFFFFF;} #main .main_con02 .tables .table_body .box.important1 .txt:before{border-color: #FFFFFF;} #main .main_con02 .text{ margin-top: 70px;} #main .main_con02 .text strong{display: block;color: #222222;font-size: 20px; margin-bottom: 20px;} #main .main_con02 .text ul li:before{content: '';width: 5px;height: 5px;border: 1px solid #222222;box-sizing: border-box;border-radius: 50%;;display: block;position: absolute;top: 11px;left: 0} #main .main_con02 .text ul{display: flex;flex-direction: column;gap: 7px} #main .main_con02 .text ul li{font-size: 17px;color: #222222;line-height: 26px;width: calc(100% - 13px);position: relative;padding-left: 10px} #main .main_con02 .text ul li{font-size: 17px;color: #222222;line-height: 26px;width: calc(100% - 13px);position: relative;padding-left: 10px} #main .main_con02 .text span{font-size: 15px;color: #222222;line-height: 26px;display: block;margin-top: 10px;} #main .main_con02 .in_line{padding-bottom: 130px;} #main .main_visual{padding-top: 147px;padding-bottom: 40px;position: relative;} #main .main_visual .cloud{position: absolute;bottom: -137px;right: 0px;} #main .main_visual .zeroli{position: absolute;bottom: 20px;right: 17px;z-index: 5;} #main .main_visual .zeroli div{transform: translateY(70px) scale(0.9);opacity: 0;} #main .main_visual .zeroli div img{max-width: 580px} #main .main_visual.on .zeroli div{transform: translateY(0) scale(1);opacity: 1;transition-duration: 2s;} #main .main_visual .in_line{height: 909px;position: relative;z-index: 2;;} #main .main_visual .vis_typo{height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative; z-index: 50;} #main .main_visual .vis_typo .vis_typo01{display: flex;;} #main .main_visual .vis_typo span{color: #fff;font-size: 140px;font-family: 'KerisKedyuche';font-weight: 700; -webkit-text-stroke: 3px #0053AE;text-shadow: 10px 10px 0 #0053AE;} #main .main_visual .vis_typo span.b{color: #70CEFF;} #main .main_visual .bubble{position: absolute;top: 50%;left: 50%;} #main .main_visual .bubble01{margin-left: -740px;margin-top: -370px;;} #main .main_visual .bubble03{margin-left: -843px;margin-top: 40px;;} #main .main_visual .bubble04{margin-left: -432px;margin-top: 177px;;} #main .main_visual .bubble02{margin-left: 345px;margin-top: -407px;;} #main .main_visual .bubble05{margin-left: 648px;margin-top: -272px;;} #main .main_visual .t03{margin-left: -0.5%;} #main .main_visual .t02{margin-left: -0.5%;} #main .main_visual .t04{margin-left: -1%;} #main .main_visual .t06{margin-left: -1%;} #main .main_visual .t07{margin-left: -0.5%;;position: relative;z-index: 2;;} #main .main_visual .t08{margin-left: -0.5%;;position: relative;z-index: 2;;} #main .main_visual .t11{margin-left: -0.5%;;position: relative;z-index: 2;;} #main .main_visual .t10{margin-left: -1.5%;;position: relative;z-index: 2;;} #main .main_visual .t13{margin-left: -0.9%;;position: relative;z-index: 2;;} #main .main_visual .t05, #main .main_visual .t12, #main .main_visual .ml{margin-left: 2%;} #main .main_visual .t05{margin-left: 2%;} #main .main_visual .vis_typo .vis_s_typo span{font-size: 80px;-webkit-text-stroke: 3px #00711A;text-shadow: 6px 6px 0 #00711A;display: block;} #main .main_visual .vis_typo .vis_s_typo{display: flex;width: 100%;justify-content: center;margin-top: 11px;} #main .main_visual .vis_typo .vis_s_typo span b{color: #7CD12E;font-family: inherit;font-weight: inherit;} #main .main_visual .vis_typo span{transform: scale(0.3);transition: 0.6s;opacity: 0;} #main .main_visual.on .vis_typo span{transform: scale(1);opacity: 1;} #main .main_visual.on .vis_typo span.t02{transform: translateY(-10%);} #main .main_visual.on .vis_typo span.t04{transform: translateY(-8%) rotate(10deg);} #main .main_visual.on .vis_typo span.t06{transform: translateY(0%) rotate(-8deg);} #main .main_visual.on .vis_typo span.t02{transition-delay: 0.15s;} #main .main_visual.on .vis_typo span.t03{transition-delay: 0.3s;} #main .main_visual.on .vis_typo span.t04{transition-delay: 0.45s;} #main .main_visual.on .vis_typo span.t05{transition-delay: 0.6s;} #main .main_visual.on .vis_typo span.t06{transition-delay: 0.75s;} #main .main_visual.on .vis_typo span.t07{transition-delay: 0.9s;} #main .main_visual.on .vis_typo span.t08{transition-delay: 1.05s;} #main .main_visual.on .vis_typo span.t14{transition-delay: 2s;} #main .main_visual.on .vis_typo span.t15{transition-delay: 2.3s;} #main .main_visual .vis_typo02{display: flex;} #main .main_visual .vis_typo02{gap: 80px;transition-duration: 0.9s;transition-delay: 1.3s;opacity: 0;} #main .main_visual.on .vis_typo02{gap: 0px;opacity: 1;} #main .main_con01 .left{transform: translateY(70px);opacity: 0;} #main .main_con01.on .left{transform: translateY(0px);opacity: 1;transition-duration: 1s;} #main .main_con01 .right{transform: translateY(70px);opacity: 0;} #main .main_con01.on .right{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s;} #main .main_con02 .m_title{transform: translateY(70px);opacity: 0;} #main .main_con02.on .m_title{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.0s;} #main .main_con02 .tables{transform: translateY(70px);opacity: 0;} #main .main_con02.on .tables{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s;} #main .main_con02 .text{transform: translateY(70px);opacity: 0;} #main .main_con02.on .text{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s;} #main .flow_w .flow1 img{display: block;animation: flow 50s infinite linear;} #main .flow_w .flow2 img{display: block;animation: flow2 50s infinite linear;} #main .main_visual .bubble{transform: translateY(100px) scale(0.7);opacity: 0;} #main .main_visual.on .bubble{transform: translateY(0px) scale(1);opacity: 1;transition-duration: 1s;} #main .main_visual.on .bubble02{transition-delay: 0.3s;} #main .main_visual.on .bubble03{transition-delay: 0.6s;} #main .main_visual.on .bubble04{transition-delay: 0.9s;} #main .main_visual.on .bubble05{transition-delay: 1.2s;} #main .main_visual .bubble div{animation: 2s mot infinite linear;} #main .main_visual .bubble02 div{animation: 2s mot1 infinite linear;animation-delay: 0.2s;} #main .main_visual .bubble03 div{animation: 2s mot1 infinite linear;animation-delay: 0.4s;} #main .main_visual .cloud{animation: 2s cloud infinite linear;animation-delay: 0.4s;transform-origin: right center;} #main .main_visual .zeroli{animation: 2s zeroli infinite linear;animation-delay: 0.4s;} #main .main_visual .bubble04 div{animation-delay: 0.6s;} #main .main_visual .bubble05 div{animation-delay: 0.8s;} @keyframes mot { 0%{transform: rotate(0deg);} 50%{transform: rotate(-10deg) translateY(-10px);} 100%{transform: rotate(0deg) translateY(0px);} } @keyframes cloud { 0%{transform: scale(1) translateY(0);;} 50%{transform: scale(0.955) translateY(10px);} 100%{transform: scale(1) translateY(0);;} } @keyframes mot1 { 0%{transform: rotate(0deg);} 50%{transform: rotate(10deg) translateY(-10px);} 100%{transform: rotate(0deg) translateY(0px);} } @keyframes zeroli { 0%{transform: rotate(0);} 50%{transform: rotate(3deg);} 100%{transform: rotate(0deg);} } @keyframes flow { 0%{transform: translateX(0);} 100%{transform: translateX(-100%);} } @keyframes flow2 { 0%{transform: translateX(0);} 100%{transform: translateX(100%);} } @media (max-width: 1660px) { #main .main_visual .bubble04 {margin-top: 247px;} #main .main_visual .bubble01{margin-left: 0;left: 40px;} #main .main_visual .bubble03{margin-left: 0;left: 20px;} #main .main_visual .bubble05{margin-left: 0;left: auto;right: 20px;} } @media (max-width: 1560px) { #main .inner{width: 100%;padding: 0 20px;} #main .in_line{width: calc(100% - 20px);} #main .m_title h3{font-size: 50px;line-height: 1.2;} #main .m_title p{font-size: 18px;line-height: 1.5;;} #main .main_con01 .list ul li span { width: 110px; height: 44px;font-size: 15px;} #main .main_con01 .list ul li{gap:10px } #main .main_con01 .list ul li p{font-size: 16px;} #main .main_con01 .txt ul li p, #main .main_con01 .txt ul li span{font-size: 15px;line-height: 1.5;;} #main .main_con01 .left{width: 680px;} #main .main_con01 .txt ul li p br{display: none;} #main .main_con01 .txt ul li p{word-break: keep-all;} #main .main_con02 .tables .table_body .box .txt p{word-break: keep-all;} #main .main_con02 .tables .table_body .box .txt p{font-size: 15px;} #main .main_visual .vis_typo span{font-size: 100px;} #main .main_visual .vis_typo .vis_s_typo span{font-size: 50px;} } @media (max-width: 1160px) { #main .main_con02 .text{ margin-top: 30px;} #main .main_con02 .text strong{font-size: 14px; margin-bottom: 10px;} #main .main_con02 .text ul li:before{width: 3px;height: 3px;top: 8px} #main .main_con02 .text span{font-size: 9px} #main .main_con02 .text ul li{font-size: 12px;line-height: 1.5} #main .main_con01 .swiper-pagination-bullet{margin-top: 5px;width: 5px;height: 5px} #main .main_visual .bubble01{top: 10%;margin-top: 0;;} #main .main_visual .bubble02{top: 5%;margin-left: 0;margin-top: 0;left: 60%;} #main .main_visual .bubble03{top: 60%;margin-left: 0;margin-top: 0;} #main .main_visual .bubble04{bottom: 5%;top: auto;} #main .main_visual .bubble01 img{width: 100px;} #main .main_visual .bubble02 img{width: 100px;} #main .main_visual .bubble03 img{width: 130px;} #main .main_visual .bubble04 img{width: 150px;} #main .main_visual .bubble05 img{width: 160px;} #main .main_visual{padding-top: 80px;padding-bottom: 20px;} #main .main_visual .in_line{height: calc(100vh - 100px);} #main .main_visual .vis_typo span{font-size: 70px;} #main .main_visual .vis_typo .vis_s_typo span{font-size: 40px;} #main .main_visual .zeroli img{width: 450px;} #main .main_visual .cloud img{width: 500px;} #main .main_visual .cloud{bottom: -80px;} #main .inner{flex-direction: column-reverse;} #main .main_con01 .left{width: 100%;} #main .m_title h3{font-size: 40px;} #main .m_title h3 br{display: none;} #main .m_title p{font-size: 16px;margin-top: 20px;word-break: keep-all;} #main .m_title p br{display: none;} #main .main_con01 .list ul{gap: 7px} #main .main_con01 .txt{margin-top: 20px;padding-top: 20px;;} #main .main_con01 .in_line{padding: 60px 0;} #main .main_con01 .list{margin-top: 20px;} #main .main_con01 .txt ul li p, #main .main_con01 .txt ul li span{font-size: 14px;} #main .main_con01 .txt ul{gap: 10px} #main .flow_w .flow img{height: 32px;} #main .flow_w .flow{height: 60px;} #main .main_con02 .in_line{padding: 60px 0;} #main .main_con02 .tables .table_body .box .txt p{font-size: 13px;line-height: 1.5;} #main .main_con02 .tables .table_body .box .tit strong{font-size: 15px;} #main .main_con02 .tables .table_body .box .tit span{font-size: 12px;width: 104px;height: 26px;} #main .main_con02 .tables .table_body .box{padding: 10px;border-radius: 8px;} #main .main_con02 .tables .table_body .box .tit{padding-bottom: 15px;margin-bottom: 15px;;} #main .main_con02 .tables .table_body .box .txt:before{top: 5px;} #main .main_con02 .tables .table_top{height: 50px;margin-bottom: 10px;;} #main .main_con02 .tables .table_top strong{font-size: 14px;} #main .main_con02 .tables .table_body .box .txt p br{display: none;} #main .main_con02 .tables .table_top span{font-size: 14px;width: 26px;height: 26px;} #main .main_con02{padding-bottom: 60px;} #main .main_con01 .inner{gap: 40px} #main .main_con02 .tables .table_body .box .tit strong{font-size: 14px;} #main .main_con01 .img img, #main .main_con01 .swiper{max-width: 100%;} #main .main_con01 .right{max-width: 100%;} } @media (max-width: 776px) { #main .main_con02 .tables .table_body{padding-left: 110px;} #main .main_con02 .tables .table_body > div{flex-direction: row;} #main .main_con02 .tables .table_body .box{width: 200px; flex-shrink: 0;} #main .main_con02 .tables{position: relative;} /*#main .main_con02 .tables .table_top{position: absolute;left: 0;flex-direction: column;height: 100%;width: 100px;border-radius: 10px;top: 0;}*/ /*#main .main_con02 .tables .table_top > div{border-right: none; border-bottom: 1.5px dashed #C0CBB5;}*/ /*#main .main_con02 .tables .table_top > div:last-child{border-bottom: none;}*/ /*#main .main_con02 .tables .table_top > div{flex-direction: column;}*/ #main .main_con02 .tables .table_top{gap: 10px} #main .main_con02 .tables{overflow-x: scroll;} #main .m_title h3{font-size: 32px;} #main .main_con02 .m_title h3 b{display: block;} #main .main_con02 .tables .table_top strong{font-size: 13px;} #main .main_con02 .tables .table_top{width: 70px;} #main .main_con02 .tables .table_body{padding-left: 0} #main .main_con02 .tables .table_body .box .tit span {font-size: 11px;width: 94px;height: 21px;} #main .main_con02 .tables .table_body .box .tit strong{font-size: 13px;margin-top: 7px;;} #main .main_con02 .tables .table_body .box .txt p{font-size: 12px;} #main .main_con02 .tables .table_body .box .txt:before { content: ''; width: 4px; height: 4px;top: 6px;} #main .main_con02 .tables .table_top{top: 0;position: relative;width: 910px} #main .main_con02 .tables .table_body .box{width: 170px;height: 144px;} #main .main_con02 .tables .table_body .box .tit{margin-bottom: 10px;margin-bottom: 10px;;} #main .main_con02 .tables .table_body{padding-left: 0px;} #main .m_title h3 br{display: block;} #main .m_title p{font-size: 13px;} #main .main_con01 .list ul li{flex-direction: column;justify-content: flex-start;align-items: flex-start;} #main .main_con01 .list ul li span{width: 100%;justify-content: flex-start;padding: 0 10px;font-size: 13px;height: 30px;} #main .main_con01 .list ul li p{font-size: 13px;line-height: 1.5;;} #main .main_con01 .txt ul li{flex-direction: column;gap: 10px;} #main .main_con01 .txt ul li p, #main .main_con01 .txt ul li span{width: 100%;font-size: 13px;} #main .main_con01 .txt ul li span br{display: none;} #main .flow_w{margin-bottom: 60px;} #main .main_visual .bubble05 img{width: 100px;} #main .main_visual .bubble02 img{width: 60px;} #main .main_visual .bubble03 img{width: 80px;} #main .main_visual .bubble01 img{width: 70px;} #main .main_visual .bubble04{margin-left: 0;left: 20%;} #main .main_visual .bubble04 img{width: 90px;} #main .main_con02 .tables .table_body .box .tit strong:before{width: 9px;background-size: 100% auto !Important;height: 11px} } @media (max-width: 660px) { #main .main_visual .vis_typo span{font-size: 45px;-webkit-text-stroke: 1.5px #0053AE;text-shadow: 4px 4px 0 #0053AE;} #main .main_visual .vis_typo .vis_s_typo span{font-size: 30px; -webkit-text-stroke: 1.5px #00711A; text-shadow: 3px 3px 0 #00711A;} #main .main_visual .zeroli img{width: 320px;} #main .main_visual .cloud img{width: 320px;} } @media (max-width: 480px) { #main .main_visual .vis_typo span{font-size: 36px;} #main .main_visual .vis_typo .vis_s_typo span{font-size: 23px;} #main .main_visual .zeroli img{width: 290px;} #main .main_visual .zeroli{right: -20px;} #main .m_title h3{font-size: 27px;} #main .main_visual .bubble01{top: 20%;} #main .main_visual .bubble05 {margin-top: -182px;} #main .main_visual .bubble02 img{width: 80px;} }