@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');

*{margin:0; padding:0;
    list-style:none;
    box-sizing:border-box;}

body{background-color: #ffffff;
    color:#000000;
    font-family: 'NanumSquareNeo';}

a{text-decoration: none;
    color:inherit;}

.wrap{width:100%;
    margin:0 auto;}

.myself_wrap{width:90%;
            margin:0 auto;
            padding:50px 0;
            border-bottom: 1px solid #d5d5d5;}

.myself_wrap > ul{width:100%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;}

.myself_wrap ul li{width:45%;}
.myself_wrap ul li h4{width:100%;
                    margin:0 auto;
                    padding:20px 0;
                    font-size: 16px;
                    color: #2DB88E;}

.myself_wrap ul li h3{width:100%;
                margin:0 auto;
                padding:20px 0;
                font-size: 20px;
                color: #000000;
                text-align: center;}


.introduce span{color: #2DB88E;
                font-weight: bold;}

.introduce div{width:200px;
                margin: 35px auto;
                text-align: center;}

.introduce div p{margin:30px 0;}
.introduce div img{width:100%;}

.introduce .txt{width:100%;
            margin-top:60px;
            line-height: 20px;}

.introduce ul{display: flex;
            justify-content: space-between;
            margin-top:30px;}


.info img{width:25px;
        height:25px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;}

.info ul li{line-height: 35px;
            font-size: 14px;}

.career p, 
.activities p, 
.certificate p{font-size: 14px;
                line-height: 20px;}

.certificate ul{display: flex;
                justify-content: space-between;}

.certificate img{width: 42px;
                height: 42px;
                margin-right:5px;}



/*second wrap*/

.second_myself_wrap{width:90%;
                    margin:0 auto;
                    padding:50px 0;
                    visibility: hidden;}

.second_myself_wrap h3{width:100%;
                        margin:0 auto;
                        padding:20px 0;
                        font-size: 20px;
                        text-align: center;}

.second_myself_wrap span{color: #2DB88E;
                        font-size: 20px;}

.second_me{width:100%;
            margin: 0 auto;
            font-size: 14px;
            line-height: 25px;
            display: flex;
            justify-content: space-between;}

.second_me h4{padding:30px 0;
                text-align: center;
                font-size: 16px;
                color: #2DB88E;}
                
.second_me > div{width:calc(90% / 3);
                    margin:0 auto;}

.second_me > div > img{width:100px;
                        height:100px;
                        display: block;
                        margin:30px auto;}

.second_me > div > ul{display: flex;
                        justify-content: space-around;
                        font-weight: bold;
                        margin: 20px 0;}

/*design practicep*/


.designP{width:95%;
        margin:100px auto;
        visibility: hidden;}

.designP h3{width:100%;
            margin-top:50px;
            padding:10px 0;
            font-size: 20px;
            text-align: center;}

.designP .title span{width:100%;
                    margin-bottom: 20px;
                    display: inline-block;
                    line-height: 20px;
                    font-size: 12px;
                    font-weight: 500;
                    text-align: center;
                    color:#2DB88E;}

.swiper-wrapper{width:95%;
                display: flex;
                justify-content: space-between;}

.swiper-slide{width:300px;
                height:100%;
                margin:20px auto;
                display: flex;
                justify-content: space-between;
                justify-content: center;
                border-radius: 20px;}

.swiper-slide img {width: 100%;
                    height: 400px;
                    margin:auto;
                    object-fit: cover;
                    border-radius: 5px;}

.swiper-slide img:hover{transform: scale(105%);
                    transition: 0.3s;}

.swiper-slide h4{margin:20px auto;
                text-align: center;
                font-size: 14px;
                color:#7d7d7d;}


.swiper-slide p{margin:20px auto;
                text-align: center;
                line-height: 50px;
                width:150px;
                height:50px;
                border-radius: 30px;
                color:#ffffff;
                background-color: #2DB88E;
                border:2px solid #2DB88E;}

.swiper-slide p:hover{background-color: #ffffff;
                        color:#000000;}





.bg{width:100%;
    height:100vh;
    margin-top:30px;
    background-position: center;
    background-size: cover;
    background-image: url("../images/contact_bg.png");
    position: relative;
    visibility: hidden;}

.imgbox{width:350px;}

.imgbox img{width:100%;
            margin-top:50px;
            margin-left:120px;}


.text{position:absolute;
    right: 180px;
    bottom:240px;
    text-align: end;}

.text h2{font-size: 80px;
        font-family: "Fredoka", sans-serif;
        margin-bottom:20px;}

.text p{line-height: 22px;}


.info{margin-top:30px;
    line-height: 22px;}

.text ul{display: flex;
        justify-content: right;
        margin-top:40px;
        font-size: 14px;
        font-weight: bold;}

.text ul li{margin-left:30px;
            padding-bottom:5px;
            border-bottom: 1px solid #000000;
            cursor: pointer;}