@font-face { font-family: 'GongGothicMedium'; src: url('https://github.com/projectnoonnu/noonfonts_20-10/blob/main/GongGothicMedium.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {
    font-family: 'DungGeunMo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream-7ExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-1Thin';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'S-CoreDream-6Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream-5Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
}
ul {margin: 0; padding: 0; list-style: none;}
a {color: inherit;
    text-decoration: none;
}
.wrap {
    background: url(../img/bg13.png) repeat;
    width: 100%;
}
.header {
    width: auto;
    position: absolute;
    right: 80px; 
    bottom: 50px;
    z-index: 9999999;
}

.gnb {
    display: inline-block;
    font-size: 37px;
    font-family: 'Amatic SC', cursive;
    color: #fff;
    position: relative;
}

.gnb li {
    text-shadow: 3px 3px 2px rgba(0,0,0,0.5);
    text-align: right;
    font-weight: 800;
    transform: rotate(-2deg);
}

.gnb li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px 19px 13px;
    box-sizing: border-box;
}

.gnb li:nth-child(1) {
    background: url(../img/gnb_bd/bd_1.png) no-repeat right center;
}

.gnb li:nth-child(2) {
    background: url(../img/gnb_bd/bd_2.png) no-repeat right center;
}

.gnb li:nth-child(3) {
    background: url(../img/gnb_bd/bd_3.png) no-repeat right center;
}

.gnb li:nth-child(4) {
    background: url(../img/gnb_bd/bd_4.png) no-repeat right center;
}

.gnb li:nth-child(4) a {
    padding: 8px 17px 13px;
}

.gnb li:nth-child(5) {  
    background: url(../img/gnb_bd/bd_5.png) no-repeat right center;
}

.gnb_li_hover1 {animation: border_move1 1.2s linear infinite;}
.gnb_li_hover2 {animation: border_move2 1.2s linear infinite;}
.gnb_li_hover3 {animation: border_move3 1.2s linear infinite;}
.gnb_li_hover4 {animation: border_move4 1.2s linear infinite;}
.gnb_li_hover5 {animation: border_move5 1.2s linear infinite;}

@keyframes border_move1 {
    0% {background: url(../img/gnb_bd/bd_1_h2.png) no-repeat right center; color:#96ff00}

    49% {background: url(../img/gnb_bd/bd_1_h2.png) no-repeat right center; color:#96ff00}
    50% {background: url(../img/gnb_bd/bd_1_h1.png) no-repeat right center; color:#00ff8a}

    99% {background: url(../img/gnb_bd/bd_1_h1.png) no-repeat right center; color:#00ff8a}
    100% {background: url(../img/gnb_bd/bd_1_h2.png) no-repeat right center; color:#96ff00}
}


@keyframes border_move2 {
    0% {background: url(../img/gnb_bd/bd_2_h2.png) no-repeat right center; color:#96ff00}

    49% {background: url(../img/gnb_bd/bd_2_h2.png) no-repeat right center; color:#96ff00}
    50% {background: url(../img/gnb_bd/bd_2_h1.png) no-repeat right center; color:#00ff8a}

    99% {background: url(../img/gnb_bd/bd_2_h1.png) no-repeat right center; color:#00ff8a}
    100% {background: url(../img/gnb_bd/bd_2_h2.png) no-repeat right center; color:#96ff00}
}

@keyframes border_move3 {
    0% {background: url(../img/gnb_bd/bd_3_h2.png) no-repeat right center;color:#96ff00}

    49% {background: url(../img/gnb_bd/bd_3_h2.png) no-repeat right center;color:#96ff00}
    50% {background: url(../img/gnb_bd/bd_3_h1.png) no-repeat right center;color:#00ff8a}

    99% {background: url(../img/gnb_bd/bd_3_h1.png) no-repeat right center;color:#00ff8a}
    100% {background: url(../img/gnb_bd/bd_3_h2.png) no-repeat right center;color:#96ff00}
}

@keyframes border_move4 {
    0% {background: url(../img/gnb_bd/bd_4_h2.png) no-repeat right center; color:#96ff00}

    49% {background: url(../img/gnb_bd/bd_4_h2.png) no-repeat right center; color:#96ff00}
    50% {background: url(../img/gnb_bd/bd_4_h1.png) no-repeat right center; color:#00ff8a}

    99% {background: url(../img/gnb_bd/bd_4_h1.png) no-repeat right center; color:#00ff8a}
    100% {background: url(../img/gnb_bd/bd_4_h2.png) no-repeat right center; color:#96ff00}
}

@keyframes border_move5 {
    0% {background: url(../img/gnb_bd/bd_5_h2.png) no-repeat right center; color:#96ff00}

    49% {background: url(../img/gnb_bd/bd_5_h2.png) no-repeat right center; color:#96ff00}
    50% {background: url(../img/gnb_bd/bd_5_h1.png) no-repeat right center; color:#00ff8a}

    99% {background: url(../img/gnb_bd/bd_5_h1.png) no-repeat right center; color:#00ff8a}
    100% {background: url(../img/gnb_bd/bd_5_h2.png) no-repeat right center; color:#96ff00}
}


.gnb li a {
    display: block;
    width: 100%;
    height: 100%;
}

.sec1 {
    width: 100%;
    height: 100vh;
    background: url(../img/bg13.png) repeat;
    position: relative;
    overflow: hidden;
}

.sec1 .text {
    position: absolute;
    top:75px;
    left:95px;
    font-size: 0;
    font-family: 'Pacifico', cursive;
    color: #fff;
    opacity: 1;
    line-height: 1.2;
    letter-spacing: -1px;
    transform: rotateZ(-25deg);
}

.text_box:nth-child(1) {
    color: #fff;
    text-shadow: 3px 3px 0 rgb(198, 112, 255), 5px 5px 0 rgb(255, 77, 33), 30px 30px 15px rgba(124, 55, 43, 0);
    animation: text_act2 0.8s 1s forwards;
}

.text_box:nth-child(2) {
    color: #fff;
    text-shadow: 3px 3px 0 rgb(198, 112, 255), 5px 5px 0 rgb(255, 77, 33), 30px 30px 15px rgba(124, 55, 43, 0);
    animation: text_act3 0.8s 1.3s forwards;
}

.text_box div {
    font-size: 100px;
    float: left;
    
    transform: translateY(0);
    /* transform: translateY(0); */
    opacity: 0;
    /* text-shadow: 3px 3px 0 rgb(198, 112, 255), 5px 5px 0 rgb(255, 110, 26); */
}

.text_box:nth-child(2) {
    clear: both;
    margin-left: 80px;
}


@keyframes text_act {
    0% {transform: translateY(-500%);} 
    100% {transform: translateY(0%); opacity: 1;}
}

@keyframes text_act2 {
    0% {text-shadow: 3px 3px 0 #c670ff, 5px 5px 0 #ffa939, 30px 30px 15px rgba(124, 55, 43, 0);}
    100% {color: #fff173; text-shadow: 3px 3px 0 #ff27c9, 5px 5px 0 #28ff02, 30px 30px 15px rgba(124, 55, 43, 1);}
}

@keyframes text_act3 {
    0% {text-shadow: 3px 3px 0 #c670ff, 5px 5px 0 #ffa939, 30px 30px 15px rgba(124, 55, 43, 0);}
    100% {color: #b702ff; text-shadow: 3px 3px 0  #a2ff0c, 5px 5px 0 #743fb1, 30px 30px 15px rgba(124, 55, 43, 1);}
}

@keyframes text_act4 {
    0% {transform: translateY(10%);}
    2% {transform: translateY(0%);}
    4% {transform: translateY(14%);}
    6% {transform: translateY(5%);}
    8% {transform: translateY(12%);}
    10% {transform: translateY(0);}
    12% {transform: translateY(0);}
}

@keyframes text_act5 {
    0% {transform: skew(2deg) }
    2% {transform: skew(20deg) }
    4% {transform: skew(1deg) }
    6% {transform: skew(7deg) }
    8% {transform: skew(-3deg) }
    10% {transform: skew(5deg)}
    12% {transform: skew(-8deg)}
    14% {transform: skew(2deg)}
}


.text_box:nth-child(1) div:nth-child(3) {animation: text_act 0.1s forwards, text_act4 7s 3s infinite;}
.text_box:nth-child(2) div:nth-child(4) {animation: text_act 0.1s 0.05s forwards, text_act4 6.8s 3.1s infinite;}
.text_box:nth-child(2) div:nth-child(9) {animation: text_act 0.1s 0.1s forwards, text_act5 7.1s 3.3s infinite;}
.text_box:nth-child(1) div:nth-child(4) {animation: text_act 0.1s 0.15s forwards, text_act5 7s 3s infinite;}
.text_box:nth-child(2) div:nth-child(6) {animation: text_act 0.1s 0.2s forwards, text_act5 7.1s 3.2s infinite;}
.text_box:nth-child(2) div:nth-child(1) {animation: text_act 0.1s 0.25s forwards, text_act4 7s 3.3s infinite;}
.text_box:nth-child(1) div:nth-child(2) {animation: text_act 0.1s 0.3s forwards, text_act4 7.3s 3.1s infinite;}
.text_box:nth-child(1) div:nth-child(1) {animation: text_act 0.1s 0.5s forwards, text_act4 6.9s 3s infinite;}
.text_box:nth-child(2) div:nth-child(3) {animation: text_act 0.1s 0.55s forwards, text_act5 6.9s 3.3s infinite;}
.text_box:nth-child(2) div:nth-child(2) {animation: text_act 0.1s 0.6s forwards, text_act5 7.1s 3.1s infinite;}
.text_box:nth-child(1) div:nth-child(2) {animation: text_act 0.1s 0.65s forwards, text_act4 6.6s 3s infinite;}
.text_box:nth-child(2) div:nth-child(7) {animation: text_act 0.1s 0.7s forwards, text_act4 7.2s 3.2s infinite;}
.text_box:nth-child(2) div:nth-child(5) {animation: text_act 0.1s 0.75s forwards, text_act5 7s 3.1s infinite;}
.text_box:nth-child(1) div:nth-child(5) {animation: text_act 0.1s 0.8s forwards, text_act4 7.3s 3s infinite;}
.text_box:nth-child(2) div:nth-child(8) {animation: text_act 0.1s 0.85s forwards, text_act4 7.1s 3.4s infinite;}


.box_out {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    transform: translate(-3%, 0%);
}

.box {
    width: 420px;
    height: 500px;
    box-sizing: border-box;
    position: absolute;
    left: 120%;
}
.box:nth-child(1) {
    top:25%;
}
.box:nth-child(2) {
    top: 35%;
}
.box:nth-child(3) {
    top: 22%;
}
.box:nth-child(4) { 
    top: 37%;
}
.box:nth-child(5) {
    top: 20%;
}


.box_inner {
    background: #fff;
    width: 80%;
    height: 100%;
    box-shadow: 5px 10px 8px 0 rgba(0,0,0,0.3);
    border-radius: 20px;
    text-align: center;
}
.box:nth-child(1) .box_inner, .box:nth-child(6) .box_inner {
    background: url(../img/others4_2.jpg) no-repeat top
}
.box:nth-child(2) .box_inner, .box:nth-child(7) .box_inner {
    background: url(../img/others1_2.jpg) no-repeat top
}
.box:nth-child(3) .box_inner, .box:nth-child(8) .box_inner {
    background: url(../img/others3_4.jpg) no-repeat top
}
.box:nth-child(4) .box_inner, .box:nth-child(9) .box_inner {
    background: url(../img/others2_2.jpg) no-repeat top
}
.box:nth-child(5) .box_inner, .box:nth-child(10) .box_inner {
    background: url(../img/others5_2.jpg) no-repeat top
}

.box:nth-child(6) {left: 2100px; top: 28%;}
.box:nth-child(7) {left: 2520px; top: 35%;}
.box:nth-child(8) {left: 2940px; top: 22%;}
.box:nth-child(9) {left: 3360px; top: 37%;}
.box:nth-child(10) {left: 3780px; top: 20%;}

.box_small {
    width: 80%;
    height: 80%;
    border-radius: 15px;
    background: #000;
}


.box_inner div {
    text-align: center;
    font-size: 48px;
    font-weight: 900;
    color: #fff;
}

.box_big {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    /* opacity: 1; */
    position: fixed;
    top:0;
    left:0;
    z-index: 999;
}

.box_what {
    width: auto;
    height: 700px;
    position: absolute;
    top:50%;
    left:50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-25deg) scale(0.7);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
    transition: all 0.3s;
    border-radius: 20px;
    overflow: hidden;
}

.box_what_act {
    /* transition: all 1s; */
    transform: translate(-50%, -50%) rotate(0) scale(1);
    opacity: 1;
}


.box_what img {
    height: 100%;
}

.sec1_indi {
    width: 40px;
    height: 40px;
    position: absolute;
    left:50%;
    bottom:20px;
    transform: translateX(-50%) scale(0.8);
    z-index: 99;
    color: #fff;
}

.sec1_indi .circle {
    border-radius: 50%;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
.sec1_indi .circle:nth-child(1) {
    width: 15px;
    height: 15px;
    border: 1px solid;
    animation: indi_move1 0.5s infinite linear;
}

.sec1_indi .circle:nth-child(2) {
    width: 27px;
    height: 27px;
    border: 4px solid;
    animation: indi_move2 0.5s infinite linear;
}

.sec1_indi .circle:nth-child(3) {
    width: 40px;
    height: 40px;
    border: 2px solid;
    animation: indi_move3 0.5s infinite linear;
}

@keyframes indi_move1 {
    0% {border: 1px solid;}
    33% {border: 2px solid;}
    66% {border: 3px solid;}
    100% {border: 1px solid;}
}
@keyframes indi_move2 {
    0% {border: 4px solid;}
    33% {border: 3px solid;}
    66% {border: 2px solid;}
    100% {border: 4px solid;}
}
@keyframes indi_move3 {
    0% {border: 2px solid;}
    33% {border: 3px solid;}
    66% {border: 4px solid;}
    100% {border: 2px solid;}
}

.sec1_indi:hover {
    cursor: pointer;
    transform: translateX(-50%) scale(1);
    transform-origin: center;
}


/* 섹션 시작 */
.sc {
    width: 100%;
    height: 100vh;
    padding: 50px 100px 100px;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
}
.sc_box {
    width: 90%;
    max-width: 1500px;
    height: calc(100% - 100px);
    /* background: burlywood; */
}

.sec2 {
    height: auto;
    background: #be6658;
}

.sec2_border {
    width: 100%;
    height: 100%;
}

.title {
    font-size: 0;
    display: inline-block;
    height: 100px;
    transition: transform 0.1s 0.1s;
}

.sec2 .title {
    transform: translateX(-200%);
}
.sec3 .title {
    opacity: 0;
    transform: translateY(-200%);
}

.title span {
    font-family: 'Amatic SC', cursive;
    font-size: 60px;
    color: #fff;
    font-weight: 800;
}
.sec2 .title span:nth-child(5) {
    margin-right: 10px;
}

.sc .title_active1 {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.sc .title_active2 {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.sc_in {
    height: 100%;
    font-family: 'GmarketSansLight';
    border-radius: 30px 0 30px 0;
    padding: 50px;
    box-sizing: border-box;
}

.intro {
    float: left;
    width: 40%;
    border: 5px solid #fff;
    transform: translateY(300%);
    opacity: 0;
}

.name {
    margin-top: 20px;
    font-size: 60px;
}

.yum_box {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}

.yum_pc {
    width: 400px;
    height: 400px;
    border-radius: 2% 22% 15% 25%;
    overflow: hidden;
    border: 5px solid #fff;
    box-sizing: border-box;
}

.yum_pc img {
    width: 100%;
}

.simple_info {font-size: 0;}

.simple_info span{
    font-size: 16px;
    padding-right: 10px;
    box-sizing: border-box;
}

.info {
    width: calc(60% - 40px);
    background: #fff;
    float: right;
    color: #555;
    transform: translateX(100%);
    opacity: 0;
    overflow: hidden;
}

.intro_time {
    transition: transform 0.2s 0.5s, opacity 0.2s 0.5s;
}

.intro_active {
    transform: translateY(0);
    opacity: 1;
}

.info_time {
    transition: transform 0.2s 0.5s, opacity 0.2s 0.5s;
}

.info_active {
    transform: translateX(0);
    opacity: 1;
}

.info_big_title {
    font-size: 20px;
    display: inline-block;
    padding: 10px;
    background: #333;
    color: #fff;
    border-radius: 5px 0 5px 0;
    margin-bottom: 10px;
    position: relative;
}

.info_2_box {
    overflow: hidden;
}

.info_box {
    padding: 30px 0;
    box-sizing: border-box;
    overflow: hidden;
}


.info_txt {
    border-left: 4px solid #333;
    padding-left: 10px;
    line-height: 1.1;
}

.info_title {
    font-family: 'GmarketSansMedium';
    /* margin-bottom: 5px; */
}

.info_txt div {
    padding: 5px 0;
    /* color: #000; */
    font-weight: 600;
}

.info_txt div:first-child {
    padding-top: 10px;
}
.info_txt div:last-child {
    padding-bottom: 0;
}


.info_txt span {
    font-family: 'S-CoreDream-1Thin';
}


/* 섹션3 */
.sec3 {
    width: 100%;
    height: 100vh;
    background: #dd917e;
}

.skills {
    width: 100%;
    background: #fff repeat;
    position: relative;
    padding: 5vw 7vw;
    /* transform: translateX(-100%); */
    opacity: 1;
}

.skill_box {
    width: calc((100% - (150px)) / 2);
    height: 100%;
}
.skill_box:nth-child(1) {
    float: left;
}
.skill_box:nth-child(2) {
    float: right;
}

.skill {
    width: 100%;
    height: calc((100% - (50px * 3)) / 4);
    margin-bottom: 50px;
    box-sizing: border-box;
}
.skill:nth-child(2n) {margin-right: 0;}

.pro_name {
    width: auto;
    height: 100%;
    float: left;
    /* background: rosybrown; */
    font-size: 30px;
    font-weight: 800;
    line-height: 93px;
    color: #333;
    opacity: 0;
    transform: translateY(20%);
    /* transition: all 0.4s; */
}
/* .pro_name_active{
    transform: translateY(0);
    opacity: 1;
} */

.pro_name img {
    height: 100%;
    /* box-shadow: 3px 5px 1px 0 rgba(0,0,0,0.2); */
    border-radius: 5px;
}

.gauge {
    width: calc(100% - 110px);
    height: 100%;
    float: right;
    /* background: #be6658; */
    position: relative;
}
.gauge_in {
    width: 100%;
    height: 15px;
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    /* background: #dd917e; */
    /* background: #ddd; */
    
    
    /* overflow: hidden; */
}

.gauge_num {
    position: absolute;
    top:-40px;
    right:0px;
    font-size: 0px;
    text-align: right;
    /* color: #000; */
    font-family: 'Rubik', sans-serif;
    /* color: #5a3b77; */
    color: #b46a5e;
    
}
.gauge_num span:nth-child(1) {
    font-size: 33px;
    font-weight: 600;
}
.gauge_num span:nth-child(2) {
    font-size: 20px;
}

.gauge_box {
    position: relative;
    height: 100%;
    width: 100%;
    /* border-radius: 8px 0 8px 0; */
    /* overflow: hidden; */
    background: #ebc7be;
}



.gauge_color {
    /* border-radius: 8px 0 8px 0; */
    /* width: 30px; */
    /* width: 0; */
    height: 100%;
    /* background: #5a3b77; */
    background: #b46a5e;
    position: absolute;
    top:0;
    left:0;
    /* border-radius: 0 30px 30px 0; */
}

.gauge_color div{
    width: 50px;
    position: absolute;
    top:50%;
    right:-5px;
    transform: translateY(-50%);
}
.gauge_color div img {
    width: 100%;
}



/* 섹션4 */
.sec4 {
    width: 100%;
    height: auto;
    padding: 0;
}

.sec4 .title {
    opacity: 1;
    transform: translateX(-200%);
}

.sec4_inner {
    padding: 50px 100px 100px;
    box-sizing: border-box;
}

.sec4_1 {
    background: #8b60a0;
}

.sec4_2 {
    background: #445f97;
    /* background: linear-gradient(to bottom, #445f97, #8271be); */
}

.sec4_3 {
    background: #3d8066;
    /* background: linear-gradient(to bottom, #3d8066, #4fa0a0); */
}

.portfolio {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
    padding: 50px 100px;
    overflow: hidden;
}

.title_R {
    float: right;
    font-size: 20px;
    line-height: 100px;
}

.pt_title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0;
    opacity: 0;
    transform: translateY(20%);
}

.pt_title_active {
    transition: all 0.3s;
    opacity: 1;
    transform: translateY(0);
}

.pt_title span:nth-child(1) {
    font-size: 40px;
    font-weight: 900;
    margin-right: 20px;
}

.pt_title span:nth-child(2) {
    font-size: 60px;
}

.pofol_1 .pt_title span:nth-child(1) {color: #9779b3;}
.pofol_1 .pt_title span:nth-child(2) {color: #5a3b77;}

.pf_sample_img {
    float: left;
    width: 55%;
    position: relative;
    top:0;
    margin: 0 auto;
}

.pf_img_box {
    position: absolute;
    opacity: 0;
}
.pf_img_box img {
    border-radius: 12px;
    /* box-shadow: 0 6px 12px -5px rgba(0,0,0,0.6); */
}
.pf_img_box:nth-child(1) {
    position: static;
    text-align: center;
    transform: translateY(30%);
    /* background: aqua; */
}
.pf_img_box:nth-child(2) {
    bottom:0;
    left: 0;
    transform: translateX(-40%);
}
.pf_img_box:nth-child(3) {
    bottom:0;
    right: 0;
    transform: translateX(40%);
}

.pofol_3 .pf_img_box:nth-child(1) {
    position: static;
    text-align: right;
    transform: translateY(30%);
    /* background: aqua; */
    float: right;
    padding-right: 30px;
    box-sizing: border-box;
}

.pofol_3 .pf_img_box:nth-child(2) {
    transform: translateX(-40%);
    /* background: aqua; */
    padding-left: 30px;
    box-sizing: border-box;
}



.portfolio .pf_sample_img .pf_img_active_X {
    transition: transform 0.6s 0.2s, opacity 0.6s 0.2s;
    opacity: 1;
    transform: translateX(0);
}
.portfolio .pf_sample_img .pf_img_active_Y {
    transition: transform 0.8s, opacity 0.8s;
    opacity: 1;
    transform: translateY(0);
}

.portfolio > img:nth-child(2) {
    width: 100%;
    margin-top: -230px;
}

.pofol_R {
    font-family: 'GmarketSansLight';
    width: calc(45% - 50px);
    float: right;
    color: #333;
    font-weight: 600;
    font-size: 25px;
    /* background: seagreen; */
    /* overflow: hidden; */
}

.pofol_L_box {
    float: left;
    width: 5px;
    height: 0;
    border-radius: 2.5px;
    background: #ddd;
    transform-origin: left top;
    transform: scaleY(0);
}

.pofol_L_box_active {
    background: #ddd;
    transform-origin: left top;
    transform: scaleY(1);
    transition: transform 0.7s ease-in;
}


.pofol_R_box {
    width: calc(100% - 5px);
    /* border-left: 4px solid #ddd; */
    /* border-radius: 4px; */
    float: right;
    transform: translateX(-9px);
}

.pofol_out_box {
    margin-bottom: 30px;
    box-sizing: border-box;
    overflow: hidden;
    transform: translateY(40%);
    opacity: 0;
}

.pofol_out_box:last-child {
    margin-bottom: 0;
}

.pf_list_style, .vpt_title {
    float: left;
}

.pofol_inner_box {
    width: calc(100% - 28px);
    float: left;
    overflow: hidden;
}

.pofol_title {
    font-size: 15px;
    padding-left: 15px;
    line-height: 32px;
    box-sizing: border-box;
}

.pofol_content {
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.vpt_content {
    line-height: 32px;
    width: auto;
    float: left;
}

.desc_box {
    line-height: 26px;
}

/* 사용된 스킬 */
.use_skill {
    width: calc((100% - (10px * 5)) / 6);
    /* width: 70px; */
    height: 50px;
    line-height: 50px;
    float: left;
    font-size: 14px;
    margin-right: 10px;
    border-radius: 5px;
    text-align: center;
    font-family: 'GmarketSansMedium';
    letter-spacing: 0px;
}

.use_skill:nth-child(3) {
    line-height: 15px;
    padding: 10px 0;
    box-sizing: border-box;
}

.use_skill:last-child {
    margin-right: 0;
}


/* .pofol_1 .use_skill:nth-child(1) {
   background: #eec9c9;
    color: #864750;
} */



.pofol_1 .use_skill:nth-child(1),
.pofol_2 .use_skill:nth-child(1) {
    background: #eec9e0;
    color: #7d4786;
}

.pofol_1 .use_skill:nth-child(2),
.pofol_2 .use_skill:nth-child(2) {
    background: #e5d4f5;
    color: #50246d;
}

.pofol_1 .use_skill:nth-child(3),
.pofol_2 .use_skill:nth-child(1) {
    background: #c9d5ee;
     color: #475686;
}

.pofol_1 .use_skill:nth-child(4),
.pofol_2 .use_skill:nth-child(2) {
    background: #c9e5ee;
    color: #476286;
}

.pofol_1 .use_skill:nth-child(5),
.pofol_2 .use_skill:nth-child(3),
.pofol_3 .use_skill:nth-child(1) {
    background: #c9f3e0;
    color: #246d46;
}

.pofol_1 .use_skill:nth-child(6),
.pofol_2 .use_skill:nth-child(4),
.pofol_3 .use_skill:nth-child(2) {
    background: #d7eec9;
     color: #37773d;
}

.pofol_2 .use_skill:nth-child(5),
.pofol_3 .use_skill:nth-child(3) {
    background: #f7eec0;
     color: #8d7c1a;
} 

.pofol_2 .use_skill:nth-child(6),
.pofol_3 .use_skill:nth-child(4) {
    background: #f3d7c0;
     color: #cf6823;
} 

/* 사용된 색상 */
.use_color {
    height: auto;
    float: left;
    font-size: 0;
    margin-right: 15px;
    text-align: center;
    color: #555;
    line-height: 1.3;
}

.use_color div:nth-child(1) {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 3px 3px 0 0 rgba(53, 53, 53, 0.2);
}

.use_color_border {
    border-right: 1px solid #ccc;
    padding-right: 20px;
    margin-right: 20px;
}

.use_color div:nth-child(2) {
    width: 100%;
    font-size: 10px;
    margin-top: 10px;
}

.pofol_1 .use_color:nth-child(1) div:nth-child(1) {
    background: #a657a5;
}
.pofol_1 .use_color:nth-child(2) div:nth-child(1) {
    background: #fff4ed;
    box-sizing: border-box;
}
.pofol_1 .use_color:nth-child(3) div:nth-child(1) {
    background: #dddddd;
    box-sizing: border-box;
}


/* 포트폴리오 설명 */
.pofol_intro {
    color: #555;
}

.desc_box {
    font-size: 18px;
}

.desc_box p {
    margin: 0;
    padding: 0;
}
.desc_box p:nth-child(1) {
    margin-bottom: 15px;
}

.desc_box p span {
    font-size: 18px;
    font-weight: 900;
    font-family: 'GmarketSansMedium';
}

.pofol_1 .desc_box p span  {
    color: #8b60a0;
}

.btn_web {
    margin-top: 50px;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    font-weight: 400;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    z-index: 9;
    opacity: 0;
    transform: translateY(40%);
}

.btn_web a {
    padding: 10px 18px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
}

.pofol_1 .btn_web {background: #8b60a0;}
.pofol_1 .btn_web:hover {
    background: radial-gradient(#8b60a0 15%, #bfa0dd 85%);
    animation: bt_web_move 0.5s linear infinite;
}

@keyframes bt_web_move {
    0% {background: radial-gradient(#8b60a0 10%, #bfa0dd 90%)}
    33% {background: radial-gradient(#8b60a0 18%, #bfa0dd 82%)}
    66% {background: radial-gradient(#8b60a0 26%, #bfa0dd 74%)}
    99% {background: radial-gradient(#8b60a0 18%, #bfa0dd 82%)}
}

@keyframes title_move {
    0% {transform: rotateZ(10deg) scaleY(1.3);}
    20% {transform: scaleY(1.5) translateY(-5%) rotateZ(0);}
    40% {transform: translateY(0) scaleY(1.1);}
    60% {transform: scaleY(1) rotateZ(-5deg);}
    80% {transform: scaleY(1.5) translateY(-5%) rotateZ(5deg);}
    100% {transform: skewY(5deg) skewX(-10deg) scaleY(1.5) rotateZ(0);}
}

.title span:nth-child(1){
    display: inline-block;
    animation: title_move 1.8s linear infinite;
}
.title span:nth-child(3){
    display: inline-block;
    animation: title_move 1.8s 0.2s linear infinite;
}
.title span:nth-child(4){
    display: inline-block;
    animation: title_move 1.8s 0.4s linear infinite;
}
.title span:nth-child(7){
    display: inline-block;
    animation: title_move 1.8s 0.8s linear infinite;
}


/* 포폴 2번, 3번 따로 줄 것들*/
.sec4_2 .title {
    opacity: 0;
    transform: translateX(-200%);
}

.sec4_3 .title {
    opacity: 0;
    transform: translateX(-200%);
}

.pofol_2 .pt_title span:nth-child(1) {color: #6a83b4;}
.pofol_2 .pt_title span:nth-child(2) {color: #1d3057;}

.pofol_3 .pt_title span:nth-child(1) {color: rgb(108, 175, 150);}
.pofol_3 .pt_title span:nth-child(2) {color: #1b5a42;}


.pofol_2 .use_color:nth-child(1) div:nth-child(1) {
    background: #333333;
    box-sizing: border-box;
}
.pofol_2 .use_color:nth-child(2) div:nth-child(1) {
    background: #eeeeee;
    box-sizing: border-box;
}

.pofol_2 .desc_box p span  {
    color: #445f97;
}

.pofol_2 .btn_web {background: #445f97;}
.pofol_2 .btn_web:hover {
    background: radial-gradient(#445f97 15%, #85a6e7 85%);
    animation: bt_web_move2 0.5s linear infinite;
}

@keyframes bt_web_move2 {
    0% {background: radial-gradient(#445f97 10%, #85a6e7 90%)}
    33% {background: radial-gradient(#445f97 18%, #85a6e7 82%)}
    66% {background: radial-gradient(#445f97 26%, #85a6e7 74%)}
    99% {background: radial-gradient(#445f97 18%, #85a6e7 82%)}
}


.pofol_3 .use_color:nth-child(1) div:nth-child(1) {
    background: #007042;
    box-sizing: border-box;
}

.pofol_3 .use_color:nth-child(2) div:nth-child(1) {
    background: #F6F5EF;
    box-sizing: border-box;
}

.pofol_3 .use_color:nth-child(3) div:nth-child(1) {
    background: #004227;
    box-sizing: border-box;
}

.pofol_3 .use_color:nth-child(4) div:nth-child(1) {
    background: #EEE8C4;
    box-sizing: border-box;
}

.pofol_3 .desc_box p span  {
    color: #3d8066;
}

.pofol_3 .desc_box p:nth-child(1) {
    margin-bottom: 0;
}


.pofol_3 .btn_web {background: #3d8066;}
.pofol_3 .btn_web:hover {
    background: radial-gradient(#3d8066 15%, #8ad3b7 85%);
    animation: bt_web_move3 0.5s linear infinite;
}

@keyframes bt_web_move3 {
    0% {background: radial-gradient(#3d8066 10%, #8ad3b7 90%)}
    33% {background: radial-gradient(#3d8066 18%, #8ad3b7 82%)}
    66% {background: radial-gradient(#3d8066 26%, #8ad3b7 74%)}
    99% {background: radial-gradient(#3d8066 18%, #8ad3b7 82%)}
}


/* 섹션5 */
.sec5 {
    background: linear-gradient(to bottom, #6cc2c2, #ff8766);
    position: relative;
}

.contact_box {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    padding: 30px 80px;
    border-radius: 30px;
}

.sec5 .title {
    opacity: 0;
    transform: translateY(-200%);
}

.contact {
    font-family: 'S-CoreDream-3Light';
    letter-spacing: 1px;
}

.contact_big {
    width: calc((220px * 3) + (100px * 2));
    height: 220px;
    margin: 0 auto;
    text-align: center;
}

.contact_big .con_txt span:nth-child(2) {
    font-size: 15px;
}

.contact_big .con_1 .con_txt span {
    display: inline-block;
    width: 100%;
}

.contact_big .con_1 .con_txt {
    line-height: 20px;
}

.contact_big .con_box {
    border-radius: 30px;
    width: 220px;
    /* height: 20vw; */
    height: 220px;
    float: left;
    margin-right: 100px;
    box-shadow: 8px 8px 0 0 rgba(0,0,0,0.2);
    transform: translateY(-40%);
    overflow: hidden;
}

.contact_big a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
}

.contact_big .con_icon {
    margin: 0 auto;
    width: auto;
    text-align: center;
    /* background: #246d46; */
    margin-bottom: 10px;
}

.contact_big .con_txt {
    text-align: center;
    width: 100%;
}

.contact_big .con_box:nth-child(1) {
    background: linear-gradient(to bottom, #ff8359, #ff6633);
}
.contact_big .con_box:nth-child(2) {
    background: linear-gradient(to bottom, #5aa789, #3d8066);
}
.contact_big .con_box:nth-child(3) {
    background: linear-gradient(to bottom, #31a2a2, #1f7e7e);
}

.contact_big .con_box:hover a {
    background: rgba(0,0,0,0.4);
    transition: all 0.5s;
    color: rgba(255,255,255,0.5);
}
.contact_big .con_box:hover img {
    transition: all 0.5s;
    opacity: 0.5;
}

.contact_big .con_box:last-child {
    margin-right: 0;
}


/* .contact_big {display: none;} */


/* 컨택트 작은사이즈 */
.contact_sm {display: none;}
.contact_sm .con_box {
    margin-bottom: 35px;
    overflow: hidden;
    opacity: 0;
    font-weight: bold;
}

.contact_sm .con_box:nth-child(1) {
    transform: translateX(-40%);
}

.contact_sm .con_box:nth-child(2) {
    padding-left: 60px;
    transform: translateX(-50%);
}

.contact_sm .con_box:nth-child(3) {
    padding-left: 120px;
    transform: translateX(-60%);
}

.contact_sm .con_icon, .con_txt {
    float: left;
}

.contact_sm .con_icon img {
    height: 100%;
}

.con_txt {
    font-family: 'GmarketSansBold';
    font-weight: normal;
    font-style: normal;
}

.contact_sm .con_txt a {
    padding: 0 10px;
    box-sizing: border-box;
}

.contact_sm .con_box a {
    display: block;
    width: 100%;
    line-height: 40px;
    height: 40px;
}

.contact_sm img:nth-child(2){
    display: none;
}
.contact_sm .con_icon:hover img:nth-child(1) {
    display: none;
}
.contact_sm .con_icon:hover img:nth-child(2) {
    display: block;
}

.contact_sm .con_txt:hover a {
    color: #fff6b0;
    font-weight: 900;
}



/* 하단 무지개 구름 */

.sky_box {
    /* background: coral; */
    position: absolute;
    width: 100%;
    height: 300px;
    left:0;
    bottom: 0;
}

.sky {
    position: absolute;
    width: 100%;
    height: 250px;
    bottom:0;
    left:0;
    /* background: #eee; */
}

.sky:nth-child(3) {
    animation: sky2 25s 1s infinite;
}


@keyframes sky1 {
    0% {transform: translateY(0%);}
    25% {transform: translateY(-8%);}
    50% {transform: translateY(0%);}
    75% {transform: translateY(-6%);}
    100% {transform: translateY(0);}
}

@keyframes sky2 {
    0% {transform: translateY(0%);}
    25% {transform: translateY(6%);}
    50% {transform: translateY(0%);}
    75% {transform: translateY(5%);}
    100% {transform: translateY(0);}
}

.sky:nth-child(3) .cloud {
    position: absolute;
    border-radius: 50%;
    background: #2f8585;
}

.sky:nth-child(3) .cloud:nth-child(1) {
    width: 400px;
    height: 400px;
    left:-5%;
    top:50%;
}

.sky:nth-child(3) .cloud:nth-child(2) {
    width: 600px;
    height: 600px;
    left:10%;
    top:15%;
}

.sky:nth-child(3) .cloud:nth-child(3) {
    width: 450px;
    height: 450px;
    left:32%;
    top:0;
}

.sky:nth-child(3) .cloud:nth-child(4) {
    width: 400px;
    height: 400px;
    left:50%;
    top:30%;
}

.sky:nth-child(3) .cloud:nth-child(5) {
    width: 400px;
    height: 400px;
    left:65%;
    top:15%;
}

.sky:nth-child(3) .cloud:nth-child(6) {
    width: 700px;
    height: 700px;
    left:80%;
    top:-10%;
}

.sky:nth-child(2) {
    /* background: chocolate; */
    height: 550px;
    top:-45%;
    left:45%;
    /* background: cornsilk; */
}


.rainbow {
    position: absolute;
    width: 820px;
    height: 700px;
    /* background: chartreuse; */
    border-radius: 50%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    animation: rainbow 30s 3s infinite;
}

@keyframes rainbow {
    0% {transform: translateY(0%);}
    25% {transform: translateY(3%);}
    50% {transform: translateY(0%);}
    75% {transform: translateY(5%);}
    100% {transform: translateY(0);}
}

.rainbow_in {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
}

.rainbow1 {
    border: 20px solid;
    color: #f56161;
}
.rainbow2 {
    border: 20px solid;
    color: #ffa467;
}
.rainbow3 {
    border: 20px solid;
    color: #e4e276;
}
.rainbow4 {
    border: 20px solid;
    color: #7dc576;
}
.rainbow5 {
    border: 20px solid;
    color: #38b99d;
}
.rainbow6 {
    border: 20px solid;
    color: #5a95c5;
}
.rainbow7 {
    border: 20px solid;
    color: #8c77ca;
}

.sky:nth-child(1) {
    position: absolute;
    width: 100%;
    height: 300px;
    top:0;
    left:0%;
    animation: sky1 18s infinite;
}

.sky:nth-child(1) .cloud {
    position: absolute;
    border-radius: 50%;
    background: #d47861;
}

.sky:nth-child(1) .cloud:nth-child(1) {
    width: 500px;
    height: 500px;
    left:-10%;
    top:40%;
}

.sky:nth-child(1) .cloud:nth-child(2) {
    width: 350px;
    height: 350px;
    left:5%;
    top:5%;
}

.sky:nth-child(1) .cloud:nth-child(3) {
    width: 600px;
    height: 600px;
    left:15%;
    top:-20%;
}

.sky:nth-child(1) .cloud:nth-child(4) {
    width: 400px;
    height: 400px;
    left:50%;
    top:30%;
}

.sky:nth-child(1) .cloud:nth-child(5) {
    width: 400px;
    height: 400px;
    left:65%;
    top:15%;
}

.sky:nth-child(1) .cloud:nth-child(6) {
    width: 700px;
    height: 700px;
    left:80%;
    top:-10%;
}



@media screen and (min-width: 2300px) {
    .text_box div {
        font-size: 200px;
    }
}

@media screen and (min-width: 2000px) {
    .sec1 .text {
        top: 80px;
        left: 80px;
    }
    .text_box:nth-child(2) {
        clear: both;
        margin-left: 140px;
    }

    .text_box div {
        font-size: 170px;
    }

    .box_out {
        top: 305px;
    } 
}

@media screen and (max-width: 1800px) {
    .box_out {
        top: 15px;
    }    
}

@media screen and (max-width: 1700px) {
    .header {
        right: 40px;
    }
    .sec1 .text {
        left: 95px;
        top:70px;
    }

    .box_out {
        top: 30px;
    }    

    .portfolio {
        padding: 50px 80px;
    }

    .use_skill {
        width: calc((100% - (10px * 2)) / 3);
    }

    .use_skill:nth-child(1),
    .use_skill:nth-child(2),
    .use_skill:nth-child(3) {
        margin-bottom: 10px;
    }

    .use_skill:nth-child(3n) {
        margin-right: 0;
    }

    .pofol_3 .use_skill {
        width: calc((100% - (10px * 3)) / 4);
        margin-bottom: 0;
    }

    .pofol_3 .use_skill:nth-child(3) {
        margin-right: 10px;
    }

    .pofol_3 .use_skill:nth-child(4) {
        margin-right: 0;
    }

    .use_skill:nth-child(3) span {
        width: 100%;
        display: inline-block;
    }

    .pofol_1 .pf_sample_img, .pofol_2 .pf_sample_img {
        padding-bottom: 100px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1650px) {
    .yum_pc {
        width: 300px;
        height: 300px; 
        margin-bottom: 50px
    }
}

@media screen and (max-width: 1600px) {
    .sec1 .text {
        left: 90px;
        top:65px;
    }
    .box_out {
        top: 45px;
    }    
}

@media screen and (max-width: 1500px) {
    .sec1 .text {
        left: 90px;
        top:60px;
    }

    .box_out {
        top: 60px;
    } 

    .sec3 {
        width: 100%;
        height: auto;
        background: #dd917e;
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }
    
    .skills {
        width: 100%;
        background: #fff repeat;
        position: relative;
        padding: 5vw 7vw;
        opacity: 1;
        overflow: hidden;
    }
    
    .skill_box {
        width: calc((100% - (9vw)) / 2);
        float: left;
    }
    .skill_box:nth-child(1) {
        float: left;
    }
    .skill_box:nth-child(2) {
        float: right;
    }
    
    .skill {
        height: calc((450px - (50px * 3)) / 4);
        margin-bottom: 50px;
        box-sizing: border-box;
    }
    .skill:last-child {margin-bottom: 0;}
    
    .pro_name {
        width: auto;
        height: 100%;
        float: left;
        color: #333;
        opacity: 0;
        transform: translateY(20%);
    }
    .pro_name img {
        height: 100%;
        border-radius: 5px;
    }
    
    .gauge {
        width: calc(100% - 90px);
    }

    .gauge_num span:nth-child(1) {
        font-size: 30px;
    }


    .portfolio {
        padding: 50px 130px;
    }

    .sec4_inner {
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }

    .sec4 {
        width: 100%;
        height: auto;
        padding: 0;
    }
    
    .sec4 .title {
        opacity: 1;
        transform: translateX(-200%);
    }
    
    .sec4_inner {
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }

    .pofol_R {
        margin-left: 10px;
    }
    
    .pt_title {
        margin-bottom: 50px;
    }

    .pf_sample_img {
        float: none;
        width: 100%;
    }

    .pf_img_box {
        float: none;
    }
    
    .pf_img_box:nth-child(1) {
        max-width: 560px;
    }

    .pf_img_box:nth-child(1) {
        margin-left: 14vw;
    }
    .pf_img_box:nth-child(2) {
        left: 40px;
    }
    .pf_img_box:nth-child(3) {
        right: 40px;
    }

    .pf_img_box:nth-child(1) {
        max-width: 560px;
    }

    .pf_img_box img {
        width: 100%;
    }

    .pf_img_box:nth-child(2) {
        max-width: 260px;
    }

    .pf_img_box:nth-child(3) {
        max-width: 136px;
    }

    .pofol_3 .pf_sample_img {
        width:80%;
    }

    .use_skill:nth-child(3) {
        margin-right: 10px;
    }

    .pofol_3 .use_skill {
        width: calc((100% - (10px * 5)) / 6);
    }

    .use_skill:nth-child(1),
    .use_skill:nth-child(2),
    .use_skill:nth-child(3) {
        margin-bottom: 0;
    }

    .pofol_3 .pf_img_box:nth-child(2) {
        width: 100%;
        max-width: 136px;
        padding-left: 0;
        left: 0;
    }

    .pofol_3 .pf_sample_img {
        text-align: right;
    }

    .pofol_3 .pf_img_box:nth-child(1) {
        float: none;
        display: inline-block;
        margin-left: 0;
        padding-right: 0;
    }
    .pofol_3 .pf_img_box {
        padding: 0;
    }
    .pofol_R {
        margin-top: 80px;
        width: 100%;
        float: none;
    }
    
    .use_skill {
        width: calc((70% - (10px * 5)) / 6);
    }

    .use_skill:nth-child(3) span {
        display: inline-block;
        width: 100%;
    }
    
    .btn_box {
        text-align: center;
    }
    .btn_web {
        margin-left: -10px;
    }
    
}

@media screen and (max-width: 1400px) {
    .sec1 .text {
        left: 85px;
        top:55px;
    }

    .box_out {
        top: 75px;
    }    

    .contact_big {
        width: calc((200px * 3) + (80px * 2));
        height: 200px;
    }

    .contact_big .con_box {
        width: 200px;
        height: 200px;
        margin-right: 80px;
    }
}

@media screen and (max-width: 1360px) {
    .yum_pc {
        width: 250px;
        height: 250px;
        margin-bottom: 50px
    }

    .intro {
        padding: 50px 20px 50px 40px;
    }

    .pf_img_box:nth-child(1) {
        margin-left: 10vw;
    }
}

@media screen and (max-width: 1300px) {
    .sec1 .text {
        left: 85px;
        top:50px;
    }

    .box_out {
        top: 90px;
    }    

    .pf_img_box:nth-child(1) {
        margin-left: 8vw;
    }
}

@media screen and (max-width: 1250px) {
    .pf_img_box:nth-child(1) {
        margin-left: 5vw;
    }
}

@media screen and (max-width: 1200px) {
    .wrap {
        padding-top: 98px;
        box-sizing: border-box;
    }
    .sec1 .text {
        left: 80px;
        top: 25px;
    }

    .box_out {
        top: 105px;
    }    

    .header {
        width: 100%;
        height: 100px;
        position: fixed;
        right: auto; 
        bottom: auto;
        top:0;
        left:0;
        z-index: 9999999;
        overflow: hidden;
        background: url(../img/bg13.png) repeat;
    }
    .gnb {
        text-align: center;
        display: block;
        padding: 15px 20px;
        height: 100%;
        box-sizing: border-box;
    }

    .gnb li {
        display: inline-block;
        transform: rotate(0);
        margin-right: 30px;
    }

    .gnb li:last-child {
        margin-right: 0;
    }

    .sc {
        height: 100vh;
        overflow: hidden;
    }
    
    .sec2 {
        padding: 50px 80px 80px;
        box-sizing: border-box;
        height: auto;
    }

    .sc_box {
        width: 100%;
    }
    
    
    .sc_in {
        height: 100%;
        font-family: 'GmarketSansLight';
        border-radius: 30px 0 30px 0;
        padding: 50px;
        box-sizing: border-box;
    }
    
    .intro {
        float: none;
        width: 100%;
        border: 4px solid #fff;
        transform: translateY(-300%);
        opacity: 0;
        height: auto !important;
        overflow: hidden;
        padding: 50px 80px;
    }
    
    .yum_box {
        width: 300px;
        overflow: hidden;
        margin-bottom: 0;
        float: left;
    }

    .yum_txt {
        width: calc(100% - 340px);
        float: right;
        padding-top: 50px;
        box-sizing: border-box;
    }
    
    .yum_pc {
        width: 100%;
        height: 300px;
        border-radius: 2% 22% 15% 25%;
        overflow: hidden;
        border: 4px solid #fff;
        box-sizing: border-box;
    }
    
    .yum_pc img {
        width: 100%;
    }
    
    .simple_info {font-size: 0;}
    
    .simple_info span{
        font-size: 16px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    

    .info {
        margin-top: 30px;
        width: 100%;
        float: none;
        transform: translateX(100%);
        opacity: 0;
        padding: 60px 80px;
    }
    
    .intro_active {
        transform: translateY(0);
        opacity: 1;
    }
    
    .info_active {
        transform: translateX(0);
        opacity: 1;
    }

    .info_out > .info_box {
        display: inline-block;
        padding-bottom: 0;
    }
    .info_2_box {
        clear: both;
        width: auto;
        float: left;
        margin-right: 50px;
    }

    .sec3 {
        width: 100%;
        height: auto;
        background: #dd917e;
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }
    
    .skills {
        width: 100%;
        background: #fff repeat;
        position: relative;
        padding: 5vw 7vw;
        opacity: 1;
        overflow: hidden;
    }
    
    .skill_box {
        width: calc((100% - (9vw)) / 2);
        float: left;
    }
    .skill_box:nth-child(1) {
        float: left;
    }
    .skill_box:nth-child(2) {
        float: right;
    }
    
    .skill {
        height: calc((500px - (60px * 3)) / 4);
        margin-bottom: 60px;
        box-sizing: border-box;
    }
    .skill:last-child {margin-bottom: 0;}
    
    .pro_name {
        width: auto;
        height: 100%;
        float: left;
        color: #333;
        opacity: 0;
        transform: translateY(20%);
    }
    .pro_name img {
        height: 100%;
        border-radius: 5px;
    }
    
    .gauge {
        width: calc(100% - 90px);
    }

    .gauge_num span:nth-child(1) {
        font-size: 30px;
    }


    /* 1200 섹션4 시작 */
    .sec4_inner {
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }

    .sec4 {
        width: 100%;
        height: auto;
        padding: 0;
    }
    
    .sec4 .title {
        opacity: 1;
        transform: translateX(-200%);
    }
    
    .sec4_inner {
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }

    .portfolio {
        padding: 50px 80px;
    }

    .pofol_R {
        margin-left: 10px;
    }
    
    .pt_title {
        margin-bottom: 50px;
    }

    .pf_sample_img {
        float: none;
        width: 100%;
        position: relative;
        top:0;
        margin: 0 auto;
    }

    .pofol_1 .pf_sample_img, .pofol_2 .pf_sample_img {
        padding-bottom: 0;
    }

    .pf_img_box {
        float: none;
    }
    
    .pf_img_box:nth-child(1) {
        max-width: 560px;
    }

    .pf_img_box:nth-child(1) {
        margin-left: 17vw;
    }
    .pf_img_box:nth-child(2) {
        left: 40px;
    }
    .pf_img_box:nth-child(3) {
        right: 40px;
    }

    .pf_img_box:nth-child(1) {
        max-width: 560px;
    }

    .pf_img_box img {
        width: 100%;
    }

    .pf_img_box:nth-child(2) {
        max-width: 260px;
    }

    .pf_img_box:nth-child(3) {
        max-width: 136px;
    }

    .pofol_3 .pf_sample_img {
        width:80%;
    }

    .use_skill:nth-child(3) {
        margin-right: 10px;
    }

    .pofol_3 .use_skill {
        width: calc((100% - (10px * 5)) / 6);
    }

    .use_skill:nth-child(1),
    .use_skill:nth-child(2),
    .use_skill:nth-child(3) {
        margin-bottom: 0;
    }

    .pofol_3 .pf_img_box:nth-child(2) {
        width: 100%;
        max-width: 136px;
        padding-left: 0;
        left: 0;
    }

    .pofol_3 .pf_sample_img {
        text-align: right;
    }

    .pofol_3 .pf_img_box:nth-child(1) {
        float: none;
        display: inline-block;
        margin-left: 0;
        padding-right: 0;
    }
    .pofol_3 .pf_img_box {
        padding: 0;
    }
    .pofol_R {
        margin-top: 80px;
        width: 100%;
        float: none;
    }
    
    .use_skill {
        width: calc((70% - (10px * 5)) / 6);
    }

    .use_skill:nth-child(3) span {
        display: inline-block;
        width: 100%;
    }
    
    .btn_box {
        text-align: center;
    }
    .btn_web {
        margin-left: -10px;
    }

    /* 1200 섹션5 시작 */
    .sec1 {
        height: calc(100vh - 96px);
    }
    .sec5 {
        height: calc(100vh - 96px);
        padding: 50px 80px 80px;
    }
    
    .contact_box {
        padding: 20px 80px;
    }
    
    .contact_big {
        width: 100%;
        height: 170px;
        margin: 0 auto;
        text-align: center;
    }
    
    .contact_big .con_box {
        display: inline-block;
        width: 170px;
        border-radius: 25px;
        height: 170px;
        float: none;
        margin-right: 60px;
    }
    .contact_big .con_box:last-child {
        margin-right: 0;
    }
    
    .contact_big a {
        padding: 30px 20px;
        position: relative;
    }
    
    .contact_big .con_icon {
        width: 50%;
        margin-bottom: 0;
    }

    .contact_big .con_icon img {
        width: 100%;
    }
    
    .contact_big .con_txt {
        text-align: center;
        width: 100%;
        font-size: 17px;
        line-height: 40px;
        margin-top: 10px;
    }

    .contact_big .con_box:nth-child(1) .con_txt,
    .contact_big .con_box:nth-child(2) .con_txt {
        line-height: 20px;
    }

    .contact_big .con_txt span {
        display: inline-block;
        width: 100%;
    }

    .contact_big .con_txt span:nth-child(2) {
        font-size: 15px;
    }
    
    .contact_big .con_box:nth-child(1) {
        background: linear-gradient(to bottom, #ff8359, #ff6633);
    }
    .contact_big .con_box:nth-child(2) {
        background: linear-gradient(to bottom, #5aa789, #3d8066);
    }
    .contact_big .con_box:nth-child(3) {
        background: linear-gradient(to bottom, #31a2a2, #1f7e7e);
    }
    
    .contact_big .con_box:hover a {
        background: rgba(0,0,0,0.4);
        transition: all 0.5s;
        color: rgba(255,255,255,0.5);
    }
    .contact_big .con_box:hover img {
        transition: all 0.5s;
        opacity: 0.5;
    }
    
    .contact_big .con_box:last-child {
        margin-right: 0;
    }
    
    
    /* .contact_big {display: none;} */
    
    
    /* 컨택트 작은사이즈 */
    .contact_sm {display: none;}
    .contact_sm .con_box {
        margin-bottom: 35px;
        overflow: hidden;
        opacity: 0;
    }
    
    .contact_sm .con_box:nth-child(1) {
        transform: translateX(-40%);
    }
    
    .contact_sm .con_box:nth-child(2) {
        padding-left: 80px;
        transform: translateX(-50%);
    }
    
    .contact_sm .con_box:nth-child(3) {
        padding-left: 160px;
        transform: translateX(-60%);
    }
    
    .contact_sm .con_icon, .con_txt {
        float: left;
    }
    
    .contact_sm .con_txt {
        margin-left: 10px;
    }
    
    .contact_sm .con_txt a {
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .contact_sm .con_box a {
        display: block;
        width: 100%;
        line-height: 40px;
        height: 40px;
    }
    
    .contact_sm img:nth-child(2){
        display: none;
    }
    .contact_sm .con_icon:hover img:nth-child(1) {
        display: none;
    }
    .contact_sm .con_icon:hover img:nth-child(2) {
        display: block;
    }
    
    .contact_sm .con_txt:hover a {
        color: #fff6b0;
        font-weight: 900;
    }
    
    
    
    /* 하단 무지개 구름 */
    .sky_box {
        position: absolute;
        width: 100%;
        height: 300px;
        left:0;
        bottom: 0;
    }

    .sky:nth-child(1) {
        top: 17%;
        left: -15%;
    }

    .sky:nth-child(1) .cloud:nth-child(3) {
        left: 15%;
        top: -15%;
    }

    .sky:nth-child(2) {
        top:-45%;
        left: 55%;
    }
    .sky:nth-child(3) {
        bottom: -10%;
    }

    .sky:nth-child(3) .cloud:nth-child(3) {
        width: 450px;
        height: 450px;
        left: 28%;
        top: -13%;
    }
    
    .sky:nth-child(3) .cloud:nth-child(2) {
        width: 500px;
        height: 500px;
        left: 5%;
        top: 7%;
    }
    
    .sky:nth-child(3) .cloud:nth-child(1) {
        width: 400px;
        height: 400px;
        left: -15%;
        top: 49%;
    }
}

@media screen and (max-width: 1150px) {
    .pf_img_box:nth-child(1) {
        margin-left: 15vw;
    }
}

@media screen and (max-width: 1100px) {
    .sec1 .text {
        left: 75px;
        top: 20px;
    }

    .box_out {
        top: 120px;
    }    
    
    .pf_img_box:nth-child(1) {
        margin-left: 13vw;
    }

    .pofol_1 .pf_img_box:nth-child(2),
    .pofol_2 .pf_img_box:nth-child(2) {
        left: 20px;
    }
    .pofol_1 .pf_img_box:nth-child(3),
    .pofol_2 .pf_img_box:nth-child(3) {
        right: 20px;
    }
}

@media screen and (max-width: 1050px) {
    .pf_img_box:nth-child(1) {
        margin-left: 9vw;
    }

    .use_skill {
        width: calc((80% - (10px * 5)) / 6);
    }

}

@media screen and (max-width: 1000px) {
    .sec1 .text {
        left: 65px;
        top: 10px;
    }

    .box_out {
        top: 135px;
    }    

    .sec2 {
        height: auto;
        background: #be6658;
    }

    .sc_box {
        width: 100%;
        max-width: 1500px;
        height: calc(100% - 100px);
    }
    
    .title {
        font-size: 0;
        display: inline-block;
        height: 100px;
        transition: transform 0.1s 0.1s;
    }
    
    .sec2 .title {
        transform: translateX(-200%);
    }

    .title span {
        font-family: 'Amatic SC', cursive;
        font-size: 60px;
        color: #fff;
        font-weight: 800;
    }
    .sec2 .title span:nth-child(5) {
        margin-right: 10px;
    }
    
    .sc .title_active1 {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    .sc .title_active2 {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .intro {
        float: none;
        width: 100%;
        border: 4px solid #fff;
        transform: translateY(-300%);
        opacity: 0;
        height: auto !important;
        overflow: hidden;
        padding: 50px 80px;
    }

    .yum_box {
        width: 250px;
        overflow: hidden;
        margin-bottom: 0;
        float: left;
    }

    .yum_txt {
        width: calc(100% - 290px);
        float: right;
        padding-top: 20px;
        box-sizing: border-box;
    }
    
    .yum_pc {
        height: 250px;
    }
    
    .simple_info {font-size: 0;}
    
    .simple_info span{
        font-size: 16px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    

    .info {
        margin-top: 30px;
        width: 100%;
        float: none;
        transform: translateX(100%);
        opacity: 0;
        padding: 60px 80px;
    }
    
    .intro_active {
        transform: translateY(0);
        opacity: 1;
    }

    .info_active {
        transform: translateX(0);
        opacity: 1;
    }

    .info_out > .info_box {
        display: block;
        padding-bottom: 0;
    }
    .info_2_box {
        clear: none;
        width: 100%;
        float: none;
        margin-right: 0;
    }


    .sec3 {
        width: 100%;
        height: auto;
        background: #dd917e;
        padding: 50px 80px 80px;
        box-sizing: border-box;
    }
    
    .skills {
        padding: 7vw 7vw;
    }
    
    .skill_box {
        width: calc((100% - (9vw)) / 2);
        float: left;
    }

    .skill {
        height: calc((460px - (60px * 3)) / 4);
        margin-bottom: 60px;
    } 
    
    .gauge_in {
        height: auto;
        top: 0;
        transform: translateY(0);
    }
    .gauge {
        width: calc(100% - 80px);
    }

    .gauge_box {
        height: 15px;
        position: static;
        float: left;
    }

    .gauge_color {
        height: 100%;
        position: static;
    }
    
    .gauge_num {
        position: static;
        float: right;
    }

    .gauge_num span:nth-child(1) {
        font-size: 30px;
    }


    .pofol_1 .pf_img_box:nth-child(2),
    .pofol_2 .pf_img_box:nth-child(2) {
        left: 0;
    }
    .pofol_1 .pf_img_box:nth-child(3),
    .pofol_2 .pf_img_box:nth-child(3) {
        right: 0;
    }

    .pf_img_box:nth-child(1) {
        margin-left: 6vw;
    }

    /* 섹션5 */
    .contact_box {
        padding: 20px 0 20px 7vw;
    }

    .contact_big {display: none;}
    .contact_sm {display: block;}

    .contact_sm .con_box:nth-child(2) {
        padding-left: 7vw;
    }
    
    .contact_sm .con_box:nth-child(3) {
        padding-left: 14vw;
    }

    /* 하단 무지개 구름 */
    .sky:nth-child(2) {
        top:-50%;
        left: 55%;
    }

    .sky:nth-child(3) {
        left: -2%;
    }

    .sky:nth-child(3) .cloud:nth-child(2) {
        width: 400px;
        height: 400px;
    }
}

@media screen and (max-width: 950px) {
    .pofol_3 .pf_sample_img {
        width: 90%;
    }

    .pf_img_box:nth-child(1){
        margin-left: 3vw;
        width: 59vw;
        max-width: 560px;
    }

    .pf_img_box:nth-child(2){
        width: 27.5vw;
        max-width: 260px;
    }

    .pf_img_box:nth-child(3) {
        width: 14.3vw;
        max-width: 136px;
    }

    .pofol_3 .pf_img_box:nth-child(2) {
        width: 14.3vw;
        max-width: 136px;
    }

    .use_skill {
        width: calc((90% - (10px * 5)) / 6);
    }
}

@media screen and (max-width: 900px) {
    .yum_txt {
        padding-top: 10px;
    }

    .sec1 .text {
        left: 60px;
        top: 5px;
    }

    .box_out {
        left: -30px;
        top: 150px;
    }    
    .box {
        left: 500%;
    }

    .simple_info span {
        display: inline-block;
        width: 100%;
    }

    .simple_info .simple_dot {
        display: none;
    }

    .gauge_box {
        height: 10px;
    }

    .gauge_color {
        height: 100%;
    }
    
    .gauge_num span:nth-child(1) {
        font-size: 25px;
    }

    .portfolio {
        padding: 50px 60px;
    }

    .pt_title span:nth-child(1) {
        font-size: 30px;
        font-weight: 900;
        margin-right: 10px;
    }

    .pt_title span:nth-child(2) {
        font-size: 50px;
    }

    .pf_img_box:nth-child(1) {
        margin-left: 5vw;
    }
    .pofol_1 .pf_sample_img,
    .pofol_2 .pf_sample_img {
        padding-bottom: 70px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 850px) {
    .use_skill {
        width: calc((100% - (10px * 5)) / 6);
    }
} 

@media screen and (max-width: 800px) {
    .wrap {
        padding-top: 90px;
        box-sizing: border-box;
    }

    .sec4_inner, .sec2, .sec3, .sec5 {
        padding: 50px 60px 80px;
    }

    .header {
        height: 90px;
    }
    .pofol_R {
        margin-top: 50px;
    }
    .pofol_title {
        font-size: 14px;
    }

    .vpt_content  {
        font-size: 21px;
    }

    .desc_box {
        font-size: 16px;
    }

    .pofol_3 .pf_sample_img {
        width: 95%;
    }
    
    .pt_title {
        margin-bottom: 30px;
    }

    .pf_img_box:nth-child(1) {
        width: 95%;
        margin: 0 auto;
    }

    .pofol_1 .pf_sample_img,
    .pofol_2 .pf_sample_img {
        padding-bottom: 120px;
    }

    .sec1, .sec5 {
        height: calc(100vh - 90px);
    }

    .gnb {
        height: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
    }
    .text_box div {
        font-size: 90px;
    }
    .sec1 .text {
        left: 50px;
        top: -5px;
    }

    .box_out {
        left: -150px;
        top: 200px;
    }    

    .gnb li {
        transform: scale(0.9);
        transform-origin: left;
        margin-right: 10px;
    }

    .use_skill {
        font-size: 12px;
    }

    .sky:nth-child(1) .cloud:nth-child(3) {
        width: 500px;
        height: 500px;
        left: 23%;
        top: -23%;
    }

   .sky:nth-child(1) {
        top: 30%;
        left: -20%;
    }

    .sky:nth-child(2) {
        top:-35%;
        left: 45%;
    } 

    .sky:nth-child(3) .cloud:nth-child(1) {
        width: 400px;
        height: 400px;
        left: -25%;
        top: 0%;
    }

    .sky:nth-child(3) .cloud:nth-child(2) {
        width: 250px;
        height: 250px;
        left: 10%;
        top: 10%;
    }

    .sky:nth-child(3) {
        left: 8%;
        bottom: -30%;
    }
    
    .rainbow1 {
        border: 17px solid;
    }
    .rainbow2 {
        border: 17px solid;
    }
    .rainbow3 {
        border: 17px solid;
    }
    .rainbow4 {
        border: 17px solid;
    }
    .rainbow5 {
        border: 17px solid;
    }
    .rainbow6 {
        border: 17px solid;
    }
    .rainbow7 {
        border: 17px solid;
    }

}

@media screen and (max-width: 720px) {
    .yum_box {
        width: 200px;
        overflow: hidden;
        margin-bottom: 0;
        float: left;
    }
    .yum_pc {
        width: 100%;
        height: 200px;
        border: 3px solid #fff;
    }

    .yum_txt {
        width: calc(100% - 220px);
        float: right;
        padding-top: 10px;
        box-sizing: border-box;
    }

    .intro {
        float: none;
        width: 100%;
        border: 4px solid #fff;
        height: auto !important;
        overflow: hidden;
    }

    .skills {
        padding: 8vw 6vw;
    }
    
    .skill_box {
        width: calc((100% - (6vw)) / 2);
    }

    .skill {
        height: calc((400px - (50px * 3)) / 4);
        margin-bottom: 50px;
    } 

    .gauge_box {
        margin-top: 5px;
    }

    .gauge_num span:nth-child(1) {
        font-size: 21px;
    }

    .use_skill, .pofol_3 .use_skill {
        width: calc((100% - (10px * 2)) / 3);
        height: 60px;
        line-height: 60px;
        font-size: 17px;
        border-radius: 8px;
    }

    .use_skill:nth-child(1),
    .use_skill:nth-child(2),
    .use_skill:nth-child(3) {
        margin-bottom: 10px;
    }

    .use_skill:nth-child(3) {
        line-height: 20px;
        padding: 10px 0;
    }

    .use_skill:nth-child(3n) {
        margin-right: 0;
    }

    .pofol_3 .use_skill:nth-child(3) {
        clear: both;        
    }
    .pofol_3 .use_skill:nth-child(4) {
        margin-right: 0;
    }
}

@media screen and (max-width: 780px) {
    .intro {
        float: none;
        width: 100%;
        border: 4px solid #fff;
        height: auto !important;
        overflow: hidden;
    }
    .intro, .info {
        padding: 50px 20px 50px 50px;
    }
}

@media screen and (max-width: 700px) {
    .wrap {
        padding-top: 80px;
        box-sizing: border-box;
    }

    .header {
        height: 80px;
    }

    .portfolio {
        padding: 50px;
    }

    .sec1 .sec5 {
        height: calc(100vh - 80px);
    }

    .gnb {
        padding: 5px 20px;
        height: 100%;
        box-sizing: border-box;
    }

    .sec1 .text {
        left: 40px;
        top: 0;
    }

    .box_out {
        left: -150px;
        top: 220px;
    }    

    .text_box div {
        font-size: 85px;
    }

    .gnb li {
        transform: scale(0.8);
        transform-origin: left;
        margin-right: -10px;
    }
    .gnb li:last-child {
        margin-right: -10px;
    }

    .gnb li:first-child {
        margin-left: 10px;
    }
}

@media screen and (max-width: 620px) {
    .gnb {
        padding: 5px 20px;
        height: 100%;
        box-sizing: border-box;
    }

    .sec1 .text {
        left: 40px;
        top: 0;
    }

    .box_out {
        left: -150px;
        top: 220px;
    }    

    .gnb li {
        transform: scale(0.7);
        transform-origin: center;
        margin-right: -20px;
    }

    .gnb li:last-child {
        margin-right: -20px;
    }

    .gnb li:first-child {
        margin-left: -4vw;
    }

    .intro {
        padding: 50px 20px 50px 30px;
    }

    .info {
        text-align: center;
        padding: 50px 10px;
    }

    .info_out {
        display: inline-block;
        text-align: left;
    }
    
    .name {
        font-size: 45px;
    }

    .simple_info span {
        font-size: 14px;
    }

    .pt_title span:nth-child(1) {
        font-size: 30px;
    }
    .pt_title span:nth-child(2) {
        font-size: 40px;
    }

    .use_color {
        margin-right: 15px;
    }
    
    .use_color div:nth-child(1) {
        width: 50px;
        height: 50px;
    }
    
    .use_color_border {
        padding-right: 20px;
        margin-right: 20px;
    }
}


@media screen and (max-width: 600px) {
    .sec1 .text {
        top: -10px;
        left: 30px;
    }
    .text_box:nth-child(2) {
        margin-left: 50px;
    }

    .text_box div {
        font-size: 80px;
    }

    .box_out {
        left: -230px;
        top: 200px;
    }    

    .title span {
        font-size: 40px;
    }

    .title{
        height: 60px;
    }

    .title_R {
        font-size: 20px;
        line-height: 60px;
    }

    .skills {
        padding: 8vw 10vw;
    }
    
    .skill_box {
        width: 100%;
        float: none;
    }

    .skill {
        height: calc(500px / 8);
        margin-bottom: 25px;
    }

    .skill_box:nth-child(2) {
        margin-top: 25px;
    }

    .gauge_in {
        height: auto;
        top: 5%;
    }
    .gauge_box {
        height: 15px;
        margin-top: 5px;
    }

    .gauge_num span:nth-child(1) {
        font-size: 21px;
    }

    .sec4_inner, .sec2, .sec3, .sec5 {
        padding: 50px;
    }

    .portfolio {
        padding: 40px;
    }
    
    .pofol_1 .pf_sample_img,
    .pofol_2 .pf_sample_img {
        padding-bottom: 100px;
    }

    .pofol_title {
        font-size: 13px;
    }

    .vpt_content {
        font-size: 19px;
    }
    .desc_box p span {
        font-size: 14px;
    }
    .desc_box {
        line-height: 20px;
        font-size: 14px;
    }
    
    .use_skill {
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        font-size: 14px;
    }

    .use_skill:nth-child(3) {
        line-height: 18px;
        padding: 7px 0;
    }

    .use_skill:nth-child(3n) {
        margin-right: 0;
    }

      /* 섹션5 */
      .contact_box {
        padding: 20px 0;
        text-align: center;
    }

    .contact_sm {
        width: auto;
        display: inline-block;
    }

    .contact_sm .con_box:nth-child(2) {
        padding-left: 0;
    }
    
    .contact_sm .con_box:nth-child(3) {
        padding-left: 0;
    }

    .sky_box {
        position: absolute;
        width: 100%;
        height: 300px;
        left: 0;
        bottom: -5%;
    }

    .sky:nth-child(1) .cloud:nth-child(3) {
        width: 440px;
        height: 440px;
        left: 43%;
        top: -15%;
    }

   .sky:nth-child(1) {
        top: 35%;
        left: -35%;
    }
    
    .sky:nth-child(2) {
        top:-25%;
        left: 45%;
    } 

    .rainbow {
        width: 620px;
        height: 600px;
    }

    .sky:nth-child(3) .cloud:nth-child(1) {
        width: 400px;
        height: 400px;
        left: -45%;
        top: 0%;
    }

    .sky:nth-child(3) {
        left: 15%;
        bottom: -30%;
    }

    .rainbow1 {
        border: 13px solid;
    }
    .rainbow2 {
        border: 13px solid;
    }
    .rainbow3 {
        border: 13px solid;
    }
    .rainbow4 {
        border: 13px solid;
    }
    .rainbow5 {
        border: 13px solid;
    }
    .rainbow6 {
        border: 13px solid;
    }
    .rainbow7 {
        border: 13px solid;
    }
}

@media screen and (max-width: 550px) {
    .yum_box {
        width: 150px;
    }

    .yum_pc {
        height: 170px;
    }

    .yum_txt {
        width: calc(100% - 170px);
        float: right;
        padding-top: 10px;
        box-sizing: border-box;
    }

    .info_box {
        padding: 20px 0;
    }
    .info_big_title {
        font-size: 18px;
    }
    .info_out {
        font-size: 14px;
    }
}

@media screen and (max-width: 540px) {
    .wrap {
        padding-top: 65px;
        box-sizing: border-box;
    }

    .header {
        height: 65px;
    }

    .sec1, .sec5 {
        height: calc(100vh - 65px);
    }

    .gnb {
        padding: 0 20px;
        height: 100%;
        box-sizing: border-box;
    }

    .gnb li {
        transform: scale(0.7);
        transform-origin: center;
        margin-top: -3px;
        margin-right: -30px;
    }

    .gnb li:last-child {
        margin-right: -30px;
    }

    .gnb li:first-child {
        margin-left: -5vw;
    }

    .portfolio {
        padding: 40px 30px;
    }
}

@media screen and (max-width: 520px) {
    .use_color {
        margin-right: 10px;
    }
    
    .use_color div:nth-child(1) {
        width: 45px;
        height: 45px;
    }
    
    .use_color_border {
        padding-right: 15px;
        margin-right: 15px;
    }
}

@media screen and (max-width: 500px) {
    .text_box div {
        font-size: 70px;
    }

    .gnb li {
        transform: scale(0.6);
        transform-origin: center;
        margin-right: -40px;
    }

    .gnb li:last-child {
        margin-right: -40px;
    }

    .gnb li:first-child {
        margin-left: -8vw;
    }

    .intro {
        padding: 30px 30px 30px 20px;
    }
    .info {
        padding: 30px 10px;
    }

    .yum_txt {
        padding-top: 0px;
    }

    .who_yum {
        font-size: 15px;
    }
    .name {
        font-size: 35px;
    }

    .simple_info span {
        font-size: 13px;
    }

    .gauge_box {
        height: 10px;
    }

    .pofol_1 .pf_sample_img,
    .pofol_2 .pf_sample_img {
        padding-bottom: 50px;
    }
    .pofol_1 .pf_img_box:nth-child(2),
    .pofol_2 .pf_img_box:nth-child(2) {
        left: 0;
    }
    .pofol_1 .pf_img_box:nth-child(3),
    .pofol_2 .pf_img_box:nth-child(3) {
        right: 0;
    }

    .btn_web {
        margin-top: 40px;
        font-size: 14px;
    }
    
    .btn_web a {
        padding: 8px 16px;
    }
}

@media screen and (max-width: 480px) {
    .sec4_inner, .sec2, .sec3, .sec5 {
        padding: 50px 30px;
    }

    .portfolio {
        padding: 40px 20px;
    }

    .pt_title span:nth-child(1) {
        font-size: 24px;
    }
    .pt_title span:nth-child(2) {
        font-size: 36px;
    }
}

@media screen and (max-width: 450px) {
    .yum_box{
        width: 50vw;
        margin: 0 0 10px 10px;
        float: right;
    }

    .yum_pc {
        height: 50vw;
    }

    .name {
        margin-top: 10px;
    }
    .yum_txt {
        width: 100%;
        padding-left: 10px;
    }

    .name, .simple_info {
        text-align: right;
    }

    .who_yum {
        font-size: 16px;
    }

    .name {
        font-size: 50px;
    }

    .simple_info span {
        font-size: 15px;
    }

    .info_out {
        font-size: 12px;
        letter-spacing: -1px;
    }

    .sec5 {
        padding: 50px 20px 80px;
    }

    .gnb li {
        transform: scale(0.6);
        transform-origin: center;
        margin-right: -50px;
    }

    .gnb li:last-child {
        margin-right: -50px;
    }

    .gnb li:first-child {
        margin-left: -12vw;
    }
}

@media screen and (max-width: 420px) {
    .use_color {
        margin-right: 5px;
    }
    
    .use_color div:nth-child(1) {
        width: 40px;
        height: 40px;
    } 

    .use_color_border {
        border-right: 1px solid #ccc;
        padding-right: 10px;
        margin-right: 10px;
    }

    .contact_sm .con_box a {
        display: block;
        width: 100%;
        line-height: 35px;
        height: 35px;
        font-size: 18px;
    }
}

@media screen and (max-width: 400px) {
    .sec1 .text {
        top: -20px;
        left: 30px;
    }
    .text_box:nth-child(2) {
        margin-left: 0px;
        padding-left: 0px;
    }

    .text_box:nth-child(2) div:nth-child(1) {
        padding-left: 50px;
        padding-bottom: 50px;
    }

    .text_box div {
        font-size: 60px;
    }

    .box_out {
        left: -280px;
        top: 190px;
    }    
    .pofol_1 .pf_sample_img,
    .pofol_2 .pf_sample_img {
        padding-bottom: 20px;
    }

    .sec4_inner, .sec2, .sec3, .sec5 {
        padding: 50px 20px;
    }
}

@media screen and (max-width: 370px) {
    .info_big_title {
        font-size: 16px;
    }
    .info_out {
        font-size: 11px;
    }

    .use_color {
        margin-right: 10px;
    }
    
    .use_color div:nth-child(1) {
        width: 40px;
        height: 40px;
    }
    
    .use_color_border {
        padding-right: 20px;
        margin-right: 20px;
    }

    .pofol_3 .use_color_border {
        padding-right: 0px;
        margin-right: 0px;
        border-right: 0;
    }

    .pofol_3 .use_color:nth-child(3) {
        clear: both;
        padding-right: 10px;
        margin-right: 0;
    }

    .pofol_3 .use_color:nth-child(3),
    .pofol_3 .use_color:nth-child(4) {
        border-top: 1px solid #ddd;
        padding-top: 15px;
        margin-top: 15px;
    }
}

@media screen and (max-width: 350px) {
    .contact_sm .con_box {
        margin-bottom: 35px;
    }

    .contact_sm .con_box a {
        display: block;
        width: 100%;
        line-height: 30px;
        height: 30px;
        font-size: 16px;
    }

    .contact_sm img {
        width: auto;
        height: 100%;
    }

    .portfolio {
        padding: 40px 10px;
    }
}