@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.siriawrap .siriawrapimg{width: auto;display: inline-block;}
.siriawrap label,.siriawrap h1,.siriawrap h2,.siriawrap h3,.siriawrap h4,.siriawrap a,.siriawrap div,.siriawrap span,.siriawrap p,.siriawrap li{font-family: 'SUIT-Regular' !important; letter-spacing: -1px;}
html,body{height: 100%;}
.siriawrap{width:100%; position: relative;height: 100%;margin: auto;max-width: 720px;}
.siriaquick{position: fixed;bottom: 3%; right: 3%;z-index: 30;width: 15.278%;max-width: 110px;;}
.siriaquick a{display: none;}
.siriaquick a.on{display: block}
.siriawrap .siria{width:100%;  margin: auto;position: relative;overflow: hidden;max-width: 720px;}
.siriawrap .siria img{width: auto;}
.siriawrap .mo{display: none !important;}
.siriawrap .web{display: inline-block !important;}
.siriawrap .siria .inner{width: 720px; margin: auto;position: relative;}
.siriawrap .siriahead{padding: 20px 30px;width: 100%;position: relative;}
.siriawrap .siriahead p{font-size: 24px;line-height: 34px;float: left;}
.siriawrap .siriahead a{position: absolute;top: 50%;right: 30px;transform: translate(0,-50%);}
.siriawrap .siriavis{position: relative;padding-bottom: 720px;width: 100%;margin-bottom: 5%}
.siriawrap .siriavis iframe{position: absolute;width: 100%; height: 100%;left: 0;top: 0;z-index: 2;}
.siriawrap .siriavis img{position: absolute;z-index: 1;}
.siriawrap .siriacont{padding:70px 0 145px 50px;background: #fff;}
.siriawrap .siriacont.bk{background: #333;}
.siriawrap .siriacont .siria1 h1{position: relative;margin-bottom: 145px;padding-left: 34px; opacity: 0;}
.siriawrap .siriacont .siria1 h1.on{animation: fade-in-left 0.6s ease both;}
.siriawrap .siriacont .siria h1{position: relative;margin-bottom: 145px;padding-left: 34px; }
.siriawrap .siriacont .siria h1:before{content: '';position: absolute;width: 6px; height: 100%; background: #99a837;left: 0;top: 0;}
.siriawrap .siriacont .siria h1 span{font-size: 36px;margin-bottom: 12px; color:#666;display: inline-block;}
.siriawrap .siriacont .siria h1 p{font-size: 62px;line-height: 80px; color:#000;font-weight: 700;}
.siriawrap .siriacont .siria p.T1{font-size: 48px; line-height: 65px;color: #000;font-weight: 700;margin-bottom: 58px;}
.siriawrap .siriacont .siria p.T2{font-size: 34px; line-height: 50px;color: #444;margin-bottom: 73px;}
.siriawrap .siriacont .siria p.T3{font-size: 34px; line-height: 50px;color: #444; }
.siriawrap .siriacont .siria p.T3.mbs{margin-bottom: 73px}
.siriawrap .siriacont .siria p.T3 span{color: #99a837;font-weight: 700;;}
.siriawrap .siriacont .siria p.T3 span span{display: inline-block;position: relative;}
.siriawrap .siriacont .siria p.T3 span span::before{content: '';position: absolute;left: 0;bottom: 3px;width: 100%; height: 2px;background: #99a837;}
.siriawrap .siriacont .siria p.T3 span.on span::before{animation: cowi 1s ease both;}
.siriawrap .siriacont .siria p.T3 span.on span:nth-of-type(2):before{animation-delay: 0.5s;}
.siriawrap .siriacont .siria p.T3 span.on span:nth-of-type(3):before{animation-delay: 1s;}
.siriawrap .siriacont .siria p.T3 span.on span:nth-of-type(4):before{animation-delay: 1.5s;}
.siriawrap .siriacont .siria p.T4{font-size: 28px; line-height: 46px;color: #444;}
.siriawrap .siriacont .siria p.T4 span{font-weight: 700;}
.siriagal{max-width: 720px; margin: auto;position: relative;margin-bottom: 60px;}
.siriagal .swiper{margin-left: auto; margin-right: auto;position: relative;overflow: hidden; overflow: clip; list-style: none;padding: 0; z-index: 1;display: block;margin-bottom: 40px;}
.siriagal .swiper-wrapper {position: relative; width: 100%;height: 100%; z-index: 1;display: flex; transition-property: transform;transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; }
.siriagal .swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper {transform: translate3d(0px, 0, 0);}
.siriagal .swiper-slide {flex-shrink: 0;width: 100%;height: 100%; position: relative;transition-property: transform; display: block;}
.siriagal span{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);z-index: 10;}
.siriagal .swiper-scrollbar {width: 86.112%;height: 10px;background: #dcdcdc;margin: auto;}
.siriagal .swiper-scrollbar-disabled > .swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled {display: none !important;}
.siriagal .swiper-horizontal > .swiper-scrollbar,.siriagal .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));}
.siriagal .swiper-vertical > .swiper-scrollbar,.siriagal .swiper-scrollbar.swiper-scrollbar-vertical {position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));}
.siriagal .swiper-scrollbar-drag {height: 100%; width: 100%; position: relative; background: #99a837; left: 0; top: 0;}
.siriagal .swiper-scrollbar-cursor-drag {cursor: move;}
.siriagal .swiper-scrollbar-lock {display: none;}
.siriagal3{margin-bottom: 145px;}
.siriawrap .siria.ttatxt{text-align: center;margin-bottom: 90px;;}
.siriawrap .siria.ttatxt .tta1{margin-bottom: 40px;display: inline-block;}
.siriawrap .siria.ttatxt .Tbox{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);height: 0;margin-bottom: 50px;}
.siriawrap .siria.ttatxt .Tbox.on{ transition: 2s ;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);height: 380px;}
.siriawrap .siriacont.bk{background: #333;padding: 105px 50px 145px 50px;}
.siriawrap .siriacont.bk .siria h1{position: relative;margin-bottom: 65px;padding-left: 0;}
.siriawrap .siriacont.bk .siria h1:before{display: none;}
.siriawrap .siriacont.bk .siria h1 span{font-size: 36px;margin-bottom: 12px; color:#fff;display: inline-block;}
.siriawrap .siriacont.bk .siria h1 p{font-size: 56px;line-height: 76px; color:#fff;font-weight: 700;}
.siriawrap .siriacont.bk .siria .T1{font-size: 34px; line-height: 50px;color:#fff;width: 620px;padding-left: 127px;text-align: center;font-weight: 400;position: relative;margin-bottom: 20px;}
.siriawrap .siriacont.bk .siria .T1>span{font-size: 28px; color:#fff;}
.siriawrap .siriacont.bk .siria .T1 .wave{position: absolute;left: 22px;top: 50%;width: 100px;height: 100px;transform: translate(0,-50%);}
.siriawrap .siriacont.bk .siria .T1 .wave span{position: absolute;border: 2px solid #e63c24;border-radius: 50%;display: inline-block;width: 3px; height: 3px;left: 50%; top: 50%; transform: translate(-50%,-50%);animation: wi100 6s ease infinite;}
.siriawrap .siriacont.bk .siria .T1 .wave span:nth-of-type(2){animation-delay: 1s;}
.siriawrap .siriacont.bk .siria .T1 .wave span:nth-of-type(3){animation-delay: 2s;}
.siriawrap .siriacont.bk .siria .T1 .wave span:nth-of-type(4){animation-delay: 3s;}
.siriawrap .siriacont.bk .siria .T1 .wave span:nth-of-type(5){animation-delay: 4s;}
.siriawrap .siriacont.bk .siria .T1 .wave span:nth-of-type(6){animation-delay: 5s;}
.siriawrap .siriacont.bk .sirialist{overflow: visible;margin-bottom: 150px;}
.siriawrap .siriacont.bk .sirialist:before{content: '';position: absolute;border: 1px dotted #e63c24;left: 71px;top: -47px;}
.siriawrap .siriacont.bk .sirialist.on:before{animation: hei100 3s linear both;}
.siriawrap .siriacont.bk .sirialist ul{display: flex;width: 100%;margin-bottom: 25px;position: relative;z-index: 2;}
.siriawrap .siriacont.bk .sirialist.on ul{opacity: 0;}
.siriawrap .siriacont.bk .sirialist.on ul.on{animation: fade-in-top 1s linear both;}
.siriawrap .siriacont.bk .sirialist.on ul:nth-of-type(2).on{animation-delay: 0.2s;}
.siriawrap .siriacont.bk .sirialist.on ul:nth-of-type(3).on{animation-delay: 0.4s;}
.siriawrap .siriacont.bk .sirialist.on ul:nth-of-type(4).on{animation-delay: 0.6s;}
.siriawrap .siriacont.bk .sirialist.on ul:nth-of-type(5).on{animation-delay: 0.8s;}
.siriawrap .siriacont.bk .sirialist.on ul:nth-of-type(6).on{animation-delay: 1s;}
.siriawrap .siriacont.bk .sirialist ul li{display: flex;width: 21%;align-items: center;justify-content: center;color:#e63c24;font-size: 32px;background: #ddd;padding: 20px 0;font-weight: 700;flex-wrap: wrap;align-content: stretch;}
.siriawrap .siriacont.bk .sirialist ul li:nth-of-type(2){width: 79%;background: #6c5f58;justify-content: left;}
.siriawrap .siriacont.bk .sirialist ul li:nth-of-type(2) p{color:#fff;font-size: 28px;line-height: 42px;font-weight: 400;padding-left: 40px;position: relative;display: block;}
.siriawrap .siriacont.bk .sirialist ul li:nth-of-type(2) p:before{content: '';position: absolute;margin-left: -14px; width: 5px; height: 5px; background: #fff; border-radius: 5px;top: 18px;}
.siriawrap .siriacont.bk p.T2{text-align: center;color:#fff;font-size: 50px;margin-bottom: 30px;}
.siriawrap .siriacont.bk p.T2 span{font-weight: 700;color:#fff;font-size: 56px;;}
.siriawrap .siriacont.bk p.T2.on span{animation: bigfont 0.5s linear both;}
.siriawrap .siriacont.bk p.T2.on span:nth-of-type(2){animation-delay: 0.3s}
.siriawrap .siriacont.bk p.T2.on span:nth-of-type(3){animation-delay: 0.6s}
.siriawrap .siriacont.bk .sirialist2{background: #fff;padding: 28px;margin-bottom: 2%;}
.siriawrap .siriacont.bk .sirialist2 ul{display: flex;width: 100%;position: relative;z-index: 2;border-bottom: 1px solid #000;justify-content: space-between;}
.siriawrap .siriacont.bk .sirialist2 ul li{display: flex;align-items: center;color:#000;font-size: 34px;padding: 10px 0;font-weight: 700;}
.siriawrap .siriacont.bk .sirialist2 ul li:nth-of-type(2){color:#000}
.siriawrap .siriacont.bk .sirialist2 ul li:nth-of-type(2) p{color:#99a837;font-weight: 700;font-size: 56px;vertical-align: middle;}
.siriawrap .siriacont.bk .sirialist2 ul:nth-of-type(3),.siriawrap .siriacont.bk .sirialist2 ul:nth-of-type(4){border-bottom: 0;}
.siriawrap .siriacont.bk .sirialist2 .insiriavis{padding-bottom: 30px;border-bottom: 1px solid #000;}
.siriawrap .siriacont.bk .sirialist2 .insiriavis.bone{padding-bottom: 0px;border-bottom:0;}
.siriawrap .siriacont.bk .sirialist2 .insiriavis .siriavis{width: 100%;padding-bottom: 56.25%;position: relative; }
.siriawrap .siriacont.bk p.T3{font-size: 28px; color:#fff;}
.siriawrap .siriacont.centercont{padding: 70px 50px ;}
.siriawrap .siriacont .siria5 .centerP{font-size: 48px; text-align: center;margin-bottom: 65px;font-weight: 700;color:#222}
.siriawrap .siriacont .siria5 .siriabtn{display: flex;width: 100%;justify-content: space-between;margin-bottom: 50px;;}
.siriawrap .siriacont .siria5 .siriabtn a{display: flex;align-items: center;flex-wrap: wrap;align-content: stretch;border: 5px solid #89a22f;border-radius: 20px;width: 49%;background: #fff; overflow: hidden;}
.siriawrap .siriacont .siria5 .siriabtn a img{width: 100%;}
.siriawrap .siriacont .siria5 .siriabtn a .centerbox{padding: 24px;width: 100%;height: 236px;}
.siriawrap .siriacont .siria5 .siriabtn a .centerbox .centerT1{font-size: 28px;line-height: 40px;margin-bottom: 20px;}
.siriawrap .siriacont .siria5 .siriabtn a .centerbox .centerT2{position: relative; font-size: 38px;width: 100%;font-weight: 700;}
.siriawrap .siriacont .siria5 .siriabtn a .centerbox .centerT2 span{position: absolute;right: 0;top: 50%; transform: translate(0,-50%);width: 29.7%;}
.siriawrap .siriacont p.T4{font-size: 26px;line-height: 40px; color:#444;text-align: center;margin-bottom: 52px;}

@media (max-width: 721px) {
    .siriawrap .mo{display: inline-block !important;}
    .siriawrap .web{display: none !important;}
    .siriawrap{width:100%;  margin: auto;position: relative;height: 100%;max-width: 720px; margin: auto;}
    .siriawrap .siria{width:100%;  margin: auto;position: relative;min-width: auto;}
    .siriawrap .siria .inner{width: 100%; margin: auto;position: relative;}
    .siriawrap .siria img{width: 100%;}
    .siriawrap .siriahead{padding: 2.9% 4%;width: 100%;position: relative;}
    .siriawrap .siriahead p{font-size: 24px;line-height: 34px;float: left;}
    .siriawrap .siriahead a{position: absolute;top: 50%;right: 4%;transform: translate(0,-50%);width: 27.856%;}
    .siriawrap .siriahead p{font-size: calc( 24px + 24 * ( 100vw - 720px ) / 720 );line-height: calc( 34px + 34 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriavis{padding-bottom: 100%;margin-bottom: 5%}
    .siriawrap .siriacont{padding:10% 0 15% 7%;}
    .siriawrap .siriacont .siria1 h1{margin-bottom: calc( 145px + 145 * ( 100vw - 720px ) / 720 );;padding-left: calc( 34px + 34 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria1 h1:before{width: calc( 6px + 6 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria1 h1 span{font-size: calc( 36px + 36 * ( 100vw - 720px ) / 720 );;margin-bottom: calc( 12px + 12 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria1 h1 p{font-size: calc( 62px + 62 * ( 100vw - 720px ) / 720 );;line-height: calc( 80px + 80 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siriacont .siria p.T1{font-size: calc( 48px + 48 * ( 100vw - 720px ) / 720 ); line-height: calc( 65px + 65 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siriacont .siria p.T1{font-size: calc( 48px + 48 * ( 100vw - 720px ) / 720 ); line-height: calc( 65px + 65 * ( 100vw - 720px ) / 720 );font-weight: 700;margin-bottom: calc( 58px + 58 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siriacont .siria p.T2{font-size: calc( 34px + 34 * ( 100vw - 720px ) / 720 );; line-height: calc( 50px + 50 * ( 100vw - 720px ) / 720 );margin-bottom: calc( 73px + 73 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria p.T3{font-size: calc( 34px + 34 * ( 100vw - 720px ) / 720 );; line-height: calc( 50px + 50 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria p.T3.mbs{margin-bottom: calc( 58px + 58 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siriacont .siria p.T4{font-size: calc( 28px + 28 * ( 100vw - 720px ) / 720 );; line-height: calc( 46px + 46 * ( 100vw - 720px ) / 720 );;color: #444;}
    .siriawrap .siria.ttatxt{text-align: center;margin-bottom: calc( 90px + 90 * ( 100vw - 720px ) / 720 );;;}
    .siriawrap .siria.ttatxt .Tbox.on{ transition: 2s ;height: calc( 380px + 380 * ( 100vw - 720px ) / 720 );width: 74.577%;margin: auto;margin-bottom: calc( 50px + 50 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siria.ttatxt span{display: inline-block;width: 6.64%;}
    .siriawrap .siria.ttatxt .tta1{margin-bottom: calc( 40px + 40 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siria.ttatxt .Tbox{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);height: 0;}
    .siriagal3{margin-bottom: 15%;}
    .siriawrap .siriacont.bk{background: #333;padding: 15% 7% 15% 7%}
    .siriawrap .siriacont.bk .siria h1{position: relative;margin-bottom: calc( 65px + 65 * ( 100vw - 720px ) / 720 );padding-left: 0;}
    .siriawrap .siriacont.bk .siria h1:before{display: none;}
    .siriawrap .siriacont.bk .siria h1 span{font-size: calc( 36px + 36 * ( 100vw - 720px ) / 720 );margin-bottom: calc( 12px + 12 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk .siria h1 p{font-size: calc( 56px + 56 * ( 100vw - 720px ) / 720 );line-height: calc( 76px + 76 * ( 100vw - 720px ) / 720 ); }
    .siriawrap .siriacont.bk .siria .T1{font-size: calc( 34px + 34 * ( 100vw - 720px ) / 720 ); line-height: calc( 50px + 50 * ( 100vw - 720px ) / 720 );width: calc( 620px + 620 * ( 100vw - 720px ) / 720 );padding-left: calc( 127px + 127 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk .siria .T1>span{font-size: calc( 28px + 28 * ( 100vw - 720px ) / 720 ); }
    .siriawrap .siriacont.bk .siria .T1 .wave{position: absolute;left: calc( 22px + 22 * ( 100vw - 720px ) / 720 );top: 50%;width: calc( 100px + 100 * ( 100vw - 720px ) / 720 );height: calc( 100px + 100 * ( 100vw - 720px ) / 720 );transform: translate(0,-50%);}
    .siriawrap .siriacont.bk .siria .T1 .wave span{position: absolute;border: 2px solid #e63c24;border-radius: 50%;display: inline-block;width: 3px; height: 3px;left: 50%; top: 50%; transform: translate(-50%,-50%);animation: wi100_2 6s ease infinite;}
    .siriawrap .siriacont.bk .sirialist ul{margin-bottom: 3%;}
    .siriawrap .siriacont.bk .sirialist{margin-bottom: calc( 150px + 150 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk .sirialist:before{left: calc( 71px + 71 * ( 100vw - 720px ) / 720 );top: -6%}
    .siriawrap .siriacont.bk .sirialist ul li{font-size: calc( 32px + 32 * ( 100vw - 720px ) / 720 );padding: 3% 0;}
    .siriawrap .siriacont.bk .sirialist ul li:nth-of-type(2) p{font-size: calc( 28px + 28 * ( 100vw - 720px ) / 720 );line-height: calc( 42px + 42 * ( 100vw - 720px ) / 720 );padding-left: calc( 40px + 40 * ( 100vw - 720px ) / 720 )}
    .siriawrap .siriacont.bk .sirialist ul li:nth-of-type(2) p:before{margin-left: calc( -14px + -14 * ( 100vw - 720px ) / 720 ); width: calc( 5px + 5 * ( 100vw - 720px ) / 720 ); height: calc( 5px + 5 * ( 100vw - 720px ) / 720 ); top: calc( 20px + 20 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk p.T2{font-size: calc( 50px + 50 * ( 100vw - 720px ) / 720 );;margin-bottom: calc( 30px + 30 * ( 100vw - 720px ) / 720 );;}
    .siriawrap .siriacont.bk p.T2 span{font-size: calc( 56px + 56 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk .sirialist2 ul li{font-size: calc( 34px + 34 * ( 100vw - 720px ) / 720 );padding: 3% 0;}
    .siriawrap .siriacont.bk .sirialist2 ul li:nth-of-type(2) p{font-size: calc( 56px + 56 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk .sirialist2{padding: calc( 28px + 28 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk .sirialist2 ul{display: flex;width: 100%;position: relative;z-index: 2;border-bottom: 1px solid #000;justify-content: space-between;}
    .siriawrap .siriacont.bk .sirialist2 ul li{font-size: calc( 34px + 34 * ( 100vw - 720px ) / 720 );padding: 3% 0;}
    .siriawrap .siriacont.bk .sirialist2 ul li:nth-of-type(2) p{font-size: calc( 56px + 56 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.centercont{padding: 10% 7% 10% 7%;}
    .siriawrap .siriacont .siria5 .centerP{font-size: calc( 48px + 48 * ( 100vw - 720px ) / 720 );margin-bottom: calc( 65px + 65 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria5 .siriabtn a .centerbox{padding: calc( 24px + 24 * ( 100vw - 720px ) / 720 );width: 100%;height: calc( 236px + 236 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria5 .siriabtn a .centerbox .centerT1{font-size: calc( 28px + 28 * ( 100vw - 720px ) / 720 );line-height: calc( 40px + 40 * ( 100vw - 720px ) / 720 );margin-bottom: calc( 20px + 20 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont .siria5 .siriabtn a .centerbox .centerT2{font-size: calc( 38px + 38 * ( 100vw - 720px ) / 720 );width: 100%;}
    .siriawrap .siriacont p.T4{font-size: calc( 26px + 26 * ( 100vw - 720px ) / 720 );line-height: calc( 40px + 40 * ( 100vw - 720px ) / 720 );margin-bottom: calc( 52px + 52 * ( 100vw - 720px ) / 720 );}
    .siriawrap .siriacont.bk p.T3{font-size: calc( 28px + 28 * ( 100vw - 720px ) / 720 );}
}
@keyframes bigfont {0%{color:#fff;}100%{color:#e2f371;}}
@keyframes cowi {0%{width: 0;}100%{width: 100%;}}
@keyframes wi100 {0%{width: 3px;height: 3px; opacity: 1;} 50%{opacity: 1;}100%{width: 100px;height: 100px; opacity: 0;}}
@keyframes wi100_2 {0%{width: 3px;height: 3px; opacity: 1;} 50%{opacity: 1;}100%{width: calc( 100px + 100 * ( 100vw - 720px ) / 720 );height: calc( 100px + 100 * ( 100vw - 720px ) / 720 ); opacity: 0;}}
@keyframes hei100 {0%{height: 0;}100%{height: 100%;}}
@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}