.a{height:100vh;display:flex;align-items:center}.a-left{flex:1;display:flex;align-items:center;justify-content:center;position:relative;height:100%}.a-right{flex:1}.a-card.bg{position:absolute;top:50px;left:50px;background-color:#333}.a-card{width:60%;height:70vh;border-radius:30px;position:relative;overflow:hidden}.a-image{width:100%;height:100%;object-fit:cover}.a-title{font-weight:600}.a-sub{font-weight:600;margin:20px 0}.a-desc{font-weight:300}@media screen and (max-width:480px){.a{flex-direction:column;text-align:center;margin-top:50px}.a-left{width:100%}.a-card{height:30vh}.a-card.bg{display:none}.a-right{padding:20px}}.c{height:100vh;position:relative}.c-bg{width:20px;height:100%;background-color:#59b256;position:absolute}.c-wrapper{padding:50px;display:flex}.c-left{flex:1}.c-right{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column}.c-title{font-size:60px;width:80%}.c-info-item{display:flex;align-items:center;margin:50px 0;font-weight:300;width:70%}.c-icon{width:30px;height:30px;margin-right:20px}.c-desc{font-weight:200}form{margin-top:20px}input{width:50%;height:50px;border:none;border-bottom:1px solid #59b256;margin:10px 0;padding-left:10px;font-size:14px}textarea{margin:10px 0;padding-left:10px;font-size:14px;width:100%;border:1px solid #59b256}button{border:none;padding:15px;font-weight:500;background-color:#59b256;color:#fff;cursor:pointer}.popup{position:fixed;bottom:20px;right:20px;background-color:#4caf50;color:#fff;padding:16px;border-radius:4px;box-shadow:0 4px 8px #0000001a;transition:opacity .5s ease}@media screen and (max-width: 480px){.c-wrapper{flex-direction:column;padding:0 50px}.c-title{font-size:30px}.c-info-item{margin:20px 0;width:100%}.c-desc{display:none}form{margin-top:0;display:flex;flex-wrap:wrap}input{width:35%;height:40px;margin:10px 10px 10px 0}button{margin-top:10px}}.i{display:flex;height:100vh}.i-left{flex:1;display:flex;align-items:center;justify-content:center}.i-right{flex:1;position:relative}.i-left-wrapper{padding:50px;height:50%;display:flex;flex-direction:column;justify-content:space-between}.i-intro{font-size:30px;font-weight:300}.i-name{font-size:60px}.i-title{height:50px;overflow:hidden}.i-title-wrapper{height:100%;animation:move 10s ease-in-out infinite alternate}@keyframes move{25%{transform:translateY(-50px)}50%{transform:translateY(-100px)}75%{transform:translateY(-150px)}to{transform:translateY(-200px)}}.i-title-item{height:50px;font-size:30px;font-weight:700;color:#59b256;display:flex;align-items:center}.i-scroll{width:30px;height:30px;position:absolute;bottom:20px}.i-image{height:100%;width:100%;object-fit:cover;position:absolute}.i-bg{clip-path:polygon(100% 0%,100% 51%,100% 100%,25% 100%,0% 50%,25% 0%);background-color:#59b256;width:100%;height:100%;position:absolute;top:0;right:0}@media screen and (max-width: 480px){.i{flex-direction:column}.i-left-wrapper{padding:10px;align-items:center;justify-content:center;text-align:center;height:100%}.i-desc{display:none}svg{display:none}}.pl{padding:50px 100px;display:flex;flex-direction:column;align-items:center;text-align:center}.pl-texts{width:65%}.pl-title{font-size:50px;font-weight:600}.pl-desc{margin:20px 0}.pl-list{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}@media screen and (max-width:480px){.pl{padding:10px}.pl-texts{width:100%}.pl-desc{display:none}}.p{width:30%;height:40vh;margin:20px 10px;border:2px solid rgb(243 242 242);border-radius:10px 10px 0 0;overflow:hidden}.p-browser{height:20px;background-color:#f3f2f2;display:flex;align-items:center;position:sticky;z-index:2}.p-circle{width:6px;height:6px;border-radius:50%;margin:3px;background-color:#fff}.p-img{width:100%;transition:all 10s ease}.p:hover .p-img{transform:translateY(-100%)}@media screen and (max-width:480px){.p{width:40%;height:20vh}}.t{width:50px;height:25px;border-radius:20px;border:1px solid #999;background-color:#fff;position:fixed;top:10px;right:10px;z-index:999;display:flex;align-items:center;justify-content:space-around}.t-icon{width:15px;height:15px}.t-button{width:25px;height:25px;border-radius:50%;background-color:#999;position:absolute;cursor:pointer}@media screen and (max-width:480px){.t-button{margin:0}}
