@charset "utf-8";
/* ====== 공통 영역 ====== */
@media (max-width: 1280px){
}
@media (max-width: 980px){
    .container {
        width: 96%;
    }
    .section {
        padding: 50px 0;
    }
    h2 {
        font-size: 50px;
    }
    h4 {
        font-size: 1.15em;
    }
}
@media (max-width: 680px){
    .section {
        padding: 40px 0;
    }
    h2 {
        font-size: 38px;
    }
    h4 {
        font-size: 0.9em;
    }
}
@media (max-width: 460px){
    .section {
        padding: 30px 0;
    }
    h2 {
        font-size: 30px;
    }
}

/* ====== header 영역 ====== */
@media (max-width: 1280px){
    header ul li a {
        line-height: 65px;
        font-size: 1.2em;
    }
        header ul li a img {
        width: 28px;
        margin-right: 3px;
    }
}
@media (max-width: 980px){
    .mb-btn {
        display: block;
    }
    header {
        display: none;
    }
}
@media (max-width: 680px){
    #home {
        background: url(../img/visual/mb-visual.gif) no-repeat;
        background-size: 100% 100%;
    }
}

/* ====== main 영역 ====== */
/* === home === */
@media (max-width: 1280px){
    #home .home-type #animatedStr {
        font-size: 1.6em;
    }
    #home .title-wrapper .title {
        font-size: 5em;
    }
    #home .play {
        font-size: 1.6em;
    }
    #home .profile-btn span {
        font-size: 1.3em;
    }
}
@media (max-width: 980px){}
@media (max-width: 680px){
    #home .home-type img {
        width: 44px;
    }
    #home .home-type #animatedStr {
        font-size: 1.25em;
    }
    #home .title-wrapper .title {
        font-size: 4em;
    }
    #home .play {
        top: 35%;
        font-size: 1.4em;
    }
    #home .profile-btn {
        top: 40%;
    }
    #home .profile-btn span {
        font-size: 1.2em;
    }
}
/* === profile === */
@media (max-width: 1280px){
}
@media (max-width: 1044px){
    #profile {
        height: 100%;
    }
}
@media (max-width: 980px){
    #profile .title {
        -webkit-text-stroke: 3px #292929;
        margin-bottom: 20px;
    }
    .character > div {
        padding: 20px 20px 5px 20px;
    }
    .character > div h4 {
        font-size: 1.6em;
        -webkit-text-stroke: .4px #292929;
        margin-top: 6px;
    }
    .info table {
        font-size: 1em;
    }
    .info table tr td {
        padding: 12px 0;
    }
    .grid-container .skill {
        grid-column: 1/5;
    }
    .skill .skill-title img {
        width: 28px;
    }
    .skill .skill-title h4 {
        font-size: 1.2em;
        margin-left: 4px;
    }
    .skill .skill-icons {
        padding: 15px 48px;
    }
    .skill .skill-icons div {
        width: 55px;
    }
    .grid-container .etc {
        grid-column: 1/3;
        grid-row: 4/5;
        height: 50%;
    }
    .etc .etc-title h4 {
        font-size: 1.2em;
        margin-left: 4px;
    }
    .etc .etc-title img {
        width: 28px;
    }
    .etc .etc-desc {
        padding: 20px 10px;
    }
    .etc .etc-desc p {
        margin-bottom: 8px;
    }
}
@media (max-width: 680px){
    #profile .title {
        -webkit-text-stroke: 2px #292929;
        margin-bottom: 20px;
    }
    #profile .grid-container {
        gap: 1rem;
    }
    .grid-container .character {
        grid-column: 2/3;
        grid-row: 1/3;
    }
    .character > div {
        padding: 14px;
    }
    .character > div h4 {
        font-size: 1.4em;
        -webkit-text-stroke: .3px #292929;
    }
    .character > h4 {
        padding: 10px 0;
        margin-bottom: 10px;
    }
    .grid-container .info {
        grid-column: 1/5;
        grid-row: 3/4;
    }
    .info h4 {
        padding: 10px 0;
        margin-bottom: 10px;
    }
    .info table {
        font-size: 0.9em;
        border-spacing: 0 10px;
    }
    .info table tr td {
        padding: 10px 0;
    }
    .grid-container .skill {
        grid-column: 1/5;
        grid-row: 4/5;
    }
    .skill .skill-title img {
        width: 24px;
    }
    .skill .skill-icons div {
        width: 40px;
    }
    .skill .skill-icons {
        padding: 15px 35px;
    }
    .grid-container .etc {
        grid-column: 1/3;
        grid-row: 5/6;
    }
    .etc .etc-desc {
        padding: 12px 6px;
    }
    .etc .etc-desc p {
        font-size: 0.8em;
    }
}
@media (max-width: 460px){
    .info table {
        font-size: 0.8em;
        border-spacing: 0 9px;
    }
    .skill .skill-icons div {
        width: 30px;
    }
    .grid-container .etc {
        grid-column: 1/5;
    }
}
/* === coding === */
@media (max-width: 1280px){
    #coding .text-swiper .swiper-slide .work-title img {
        width: 40px;
        height: 50px;
    }
    #coding .text-swiper .swiper-slide .work-title h4 {
        font-size: 1.6em;
        margin-left: 8px;
    }
    #coding .text-swiper .swiper-slide .work-desc p {
        margin: 26px 0 24px;
        font-size: 1.2em;
    }
    #coding .text-swiper .swiper-slide .work-desc a {
        padding: 8px 16px;
        font-size: 0.9em;
    }
    .next-btn img,
    .prev-btn img {
        width: 55px;
        height: 65px;
    }
}
@media (max-width: 980px){
    #coding .title {
        -webkit-text-stroke: 3px #292929;
        margin-bottom: 110px;
    }
    #coding .uiux-swiper {
        width: 66%;
        margin: 0;
    }
    #coding .text-swiper .swiper-slide .work-title img {
        width: 30px;
        height: 40px;
    }
    #coding .text-swiper .swiper-slide .work-title h4 {
        font-size: 1.4em;
        margin-left: 7px;
    }
    #coding .text-swiper .swiper-slide .work-desc p {
        margin: 22px;
        font-size: 1em;
        line-height: 1.2em;
    }
    #coding .text-swiper .swiper-slide .work-desc a {
        padding: 6px 14px;
        font-size: 0.8em;
    }
    .next-btn img,
    .prev-btn img {
        width: 42px;
        height: 52px;
    }
    .next-btn {
        left: 105%;
    }
    .prev-btn {
        right: 105%;
    }
}
@media (max-width: 680px){    
    #coding .title {
        -webkit-text-stroke: 2px #292929;
        margin-bottom: 88px;
    }
    #coding .swiper-container {
        display: block;
    }
    #coding .uiux-swiper {
        width: 74%;    
        margin: 0 auto;
    }
    #coding .text-swiper {
        margin: 0 auto;
    }
    #coding .text-swiper .swiper-slide .work-title {
        display: none;
    }
    #coding .text-swiper .swiper-slide .work-title img {
        width: 20px;
        height: 30px;
    }
    #coding .text-swiper .swiper-slide .work-title h4 {
        font-size: 1.2em;
        margin-left: 6px;
    }
    #coding .text-swiper .swiper-slide .work-desc {
        margin-top: 27px;
    }
    #coding .text-swiper .swiper-slide .work-desc p {
        margin: 0 0 10px 0;
        font-size: 1.1em;
    }
    #coding .text-swiper .swiper-slide .work-desc a {
        padding: 5px 12px;
        font-size: 0.65em;
    }
    .next-btn img,
    .prev-btn img {
        width: 30px;
        height: 40px;
    }
    .next-btn {
        left: 100%;
    }
    .prev-btn {
        right: 100%;
    }
}
/* === design === */
@media (max-width: 1280px){
    #design img {
        width: 260px;
    }
}
@media (max-width: 980px){
    #design .container {
        width: 96%;
    }
    #design .title {
        -webkit-text-stroke: 3px #292929;
        margin-bottom: 20px;
    }
}
@media (max-width: 680px){    
    #design .title {
        -webkit-text-stroke: 2px #292929;
        margin-bottom: 20px;
    }
    #design img {
        width: 230px;
    }
    #design .ai {
        top: 62%;
    }
}
@media (max-width: 580px){
    #design img {
        width: 200px;
    }
    #design .ai {
        top: 66%;
    }
}
@media (max-width: 480px){
    #design img {
        width: 180px;
    }
}
/* === contact === */
@media (max-width: 1280px){}
@media (max-width: 980px){
    #contact .title {
        -webkit-text-stroke: 3px #292929;
        margin-bottom: 20px;
    }
}
@media (max-width: 680px){
    #contact .title {
        -webkit-text-stroke: 2px #292929;
        margin-bottom: 20px;
    }
    
}