@charset "UTF-8";
ul,li,ol{ list-style:none;}
*{ margin:0; padding:0; }
#wrap{width:100%; height:auto; background-color:#121212; }
body {background-color: #121212;}
header{ width:100%; height:937px;}

.top_back{ width:100%; height:100%;  position: absolute; top: 0; left:0;}
.main_me{
    font-family: 'Oswald', sans-serif;
    position: relative;
    color: #fff;
    padding: 1em;
}
.main_me p{ font-size:40px; letter-spacing:5px;}
.main_me h2{ font-size:55px; letter-spacing:4px;font-weight:400;}
.main_me h4{ font-size:20px; line-height:50px; font-weight:400;}
#skill { font-size: 25px;  line-height:50px; font-weight:400;}
.now {position:relative; z-index:100; transition:all 1s;}
.down {position:relative; z-index:100; top:200px; left:-20px; width:25px; margin:0 auto;height:40px; }
.down i{ font-size:40px; color:#fff;}

.mid_back{ width:1500px; height:auto; background-color:#fff; margin:0 auto;
margin-top:-100px;}

.site{ width:1300px; height:937px; background-color:#fff; margin:0 auto; display:flex;
align-items:center;justify-content:space-between; margin-top:100px;}

.home{ width:372px; height:617px; margin-top:10px; margin-left: 180px; background-size:cover; overflow:hidden;
position:relative; z-index:20; border:1px solid #eee;  box-shadow: 4px 4px 4px -1px rgba(0,0,0,.20)}

.home2{ display:flex; margin:0 auto;}


.home2{ order:2;}
.text2{ order:1;}

.img_slide{ width:1116px; height:617px;  display:flex; position:relative;}
.img_slide_1{ width:372px; height:617px;  display:flex; position:relative;}
.img_slide_style{ width:1860px; height:617px;  display:flex; position:relative; }
.img_slide_style_1{ width:372px; height:617px;  display:flex; position:relative; }
.img_slide li{ width:372px; height:100%; background-size:cover;}
.img_slide_1 li{ width:372px; height:100%; background-size:cover;}
.img_slide_style li{ width:372px; height:100%; background-size:cover; }
.img_slide a{ display:block; width: 100%; height:100%; }
.img_slide_1 a{ display:block; width: 100%; height:100%; }
.img_slide_style a{ display:block; width: 100%; height:100%; }
.icon{ width:50px; height:50px; position:absolute; top:0; z-index:100; cursor:pointer;
top:50%;  background-color:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content: center;}
.icon i{ font-size:20px; color:#fff; transition:all 0.5s ease-in-out;}
.icon:hover i{ color:gold; }

.prev{ left:0; border-top-right-radius:10px; border-bottom-right-radius:10px; transition:all 1s ease-in-out;}
.next{ right:0; border-top-left-radius:10px; border-bottom-left-radius:10px;}




.text{ width:500px; height:750px; margin-top:100px; font-family: 'Noto Sans KR', sans-serif;}
.text h1{ font-size:60px; }
.text span{font-size:40px; font-family: 'Do Hyeon', sans-serif;}

.p_01{font-family: 'Noto Sans KR', sans-serif; font-size:20px; color:#666; font-weight:400;}



.bottom_text{ width:300px; height:auto;  margin-top:30px; font-size:14px; color:#666; display:block; font-family:none;}
.bottom_text2{ float: right;}

.text2{ text-align:right; }

/**첫번째 사이트**/
.text1 h1{ color:#1b368b;}
.text1 span{  color:#1b368b;}

/**두번째 사이트**/
.text2 h1{ color:#ffcd00; }
.text2 span{ color:#ffcd00;}

/**세번째 사이트**/
.text3 h1{ color:#3796cc;}
.text3 span{ color:#3796cc;}


/**네번째 사이트**/
.text4 h1{ color:#e34f41; }
.text4 span{ color:#e34f41;}

/**다섯번째 사이트**/
.text5 h1{ color:#0173ba}
.text5 span{ color:#0173ba}



.pro{ width:1500px; height:250px; background-color:#eee; display:flex; align-items:center;
box-sizing:border-box; padding:0 250px; justify-content:space-between;}

.me{ width:250px; height:200px; background-color:red; border-radius:100px; background-image:url(../img/me.jpg);
background-size:cover;}

.pro_text{ width:750px; height:200px; display: flex;justify-content: space-around;}
.pro_text ul{ width:auto; height:auto; font-size:17px; font-weight:600; font-family: 'Oswald', sans-serif;}
.pro_text li:first-child { font-size:30px; color:#1b368b;}

a {text-decoration:none;}


/* add CSS */
.main_logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_title {
    font-size: 20px;
}

.menu-link {
    color: #FFF;
    font-size: 18px;
    transition: color 0.5s ease; /* 0.5초 동안 부드럽게 변환, easing 함수는 ease */
}

.menu-link:hover {
    color: #ffcd00;
}
.nav_menu {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.nav_menu li {
    margin: 0 15px 0 15px;
    display: inline-flex;
}

.banner_div {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.banner_box {
    max-width: 250px;
    width: 15%;
    margin: 5px 5px 0 5px;
}
.banner_a {
    display: flex;
    width: 100%;
    height: 100%;
}

.banner_a img {
    width: 100%;
    transition: all 0.2s linear;
}

.banner_a:hover img {
    transform: scale(1.2);
}

.text_area {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.text_div {
    height: 300px;
    width: 90%;
}
.text_box a {
    color: #C23A58;
    transition: color 0.5s ease;
}

.text_box a:hover {
    color: #C546E9;
}



.text_box {
    margin-top: 20px;
    font-size: 14px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
    border-radius: 30px 0 30px 0;
    padding: 20px;
}

.text_div > .text_box:nth-child(1),
.text_div > .text_box:nth-child(25) {
    background-image: url(/img/box1.png);
}

.text_div > .text_box:nth-child(2),
.text_div > .text_box:nth-child(8),
.text_div > .text_box:nth-child(14),
.text_div > .text_box:nth-child(19),
.text_div > .text_box:nth-child(26) {
    background-image: url(/img/box2.png);
}

.text_div > .text_box:nth-child(3),
.text_div > .text_box:nth-child(9),
.text_div > .text_box:nth-child(15),
.text_div > .text_box:nth-child(20),
.text_div > .text_box:nth-child(27) {
    background-image: url(/img/box3.png);
}

.text_div > .text_box:nth-child(4),
.text_div > .text_box:nth-child(10),
.text_div > .text_box:nth-child(16),
.text_div > .text_box:nth-child(21),
.text_div > .text_box:nth-child(28) {
    background-image: url(/img/box4.png);
}

.text_div > .text_box:nth-child(5),
.text_div > .text_box:nth-child(11),
.text_div > .text_box:nth-child(17),
.text_div > .text_box:nth-child(22) {
    background-image: url(/img/box5.png);
}

.text_div > .text_box:nth-child(6),
.text_div > .text_box:nth-child(12),
.text_div > .text_box:nth-child(18),
.text_div > .text_box:nth-child(23) {
    background-image: url(/img/box6.png);
}

.text_div > .text_box:nth-child(7),
.text_div > .text_box:nth-child(13),
.text_div > .text_box:nth-child(24) {
    background-image: url(/img/box7.png);
}

#footer {
    margin-top: 20px;
    background-color: #696969;
}
.footer_top {
    display: flex;
}

.footer_top ul li a {
    color: #5d607d;
}
.main_photo {
    margin-top: 20px;
}
.main_photo img {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.nav-links li {
    margin: 0 10px;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links {
    display: none;
}

.footer_menu {
    display: flex;

}
.footer_menu li{
    margin: 10px;
    
}
/* 화면 너비가 700px 이하일 때 적용되는 스타일 */
@media (max-width: 700px) {
    .main_title {
        margin-right: auto;
    }
    .banner_box {
        width: 30%;
    }
    .nav_menu {
        display: none;
    }

    .nav-links.active {
        display: flex;
        position: absolute;
        background-color: #696969;
        border-radius: 15px;
        z-index: 1000;
        flex-direction: column;
        right: 0;
    }
    .nav-links.active li {
        padding: 5px;
    }
    .hamburger {
        display: block;
    }

}