﻿*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'popins',sans-serif;
}
section
{
    position:relative;
    width:100%;
    min-height:100vh;
    padding:100px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
}
header
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:20px 100px;
    display:flex;
    justify-content :space-between ;
    align-items :center;
}
header.logo
{
    position:relative ;
    max-width :80px;
}
header ul{
    position:relative;
    display:flex;
}
header ul li {
    list-style:none ;
}
header ul li a
{
    display:inline-block ;
    color :#333;
    font-weight :400;
    margin-left :40px;
    text-decoration :none ;
}
.content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .content .textbox 
    {
        position: relative;
        max-width: 600px;
    }
        .content .textbox h2 
        {
            color: #333;
            font-size: 1cm;
            line-height: 1.4cm;
            font-weight: 500;
        }
            .content .textbox h2 span{
                color :#017143;
                font-size :1.2em;
                font-weight :900 ;
            }
    .content .textbox p
    {
        color:#333;
    }
    .content .textbox a
    {
        display :inline-block ;
        margin-top :20px;
        padding:8px 20px;
        background :#017143;
        color:#fff;
        border-radius:40px;
        font-weight :500;
        letter-spacing :1px;
        text-decoration :none ;
    }
    .content .imgbox{
        width:600px;
        display :flex;
        justify-content :flex-end  ;
        padding-right :50px;
        margin-top :50px;
    }
    .content .imgbox img
    {
        max-width :340px;
    }
    .thumb{
        position :absolute ;
        left:50%;
        bottom:20px;
        transform :translate(-50%);
        display:flex ;
    }
    .thumb li
    {
        list-style :none;
        display :inline-block ;
        margin :0 20px;
        cursor :pointer ;
        transition :0.5s;
    }
    .thumb li:hover 
    {
        transform :translateY(-15px);
    }
   
    .thumb li img 
    {
        max-width :60px;
    }
.sci {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.sci li
{
    list-style:none ;
}
.sci li a
{
    display :inline-block ;
    margin :5px 0;
    transform :scale(0.6) ;
    filter :invert(1);
}
.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #017143;
    clip-path :circle(600px at right 800px) ;
}
