@charset "utf-8";

/* 공통클래스 */
@media screen and (max-width: 1200px) {
  .section {
    padding: 130px 0 45px;
  }
  .subheading {
    font-size: 35px;
    margin-bottom: 25px;
    line-height: 1;
  }
  p.subheading-info {
    font-size: 16px;
    line-height: 1.6;
  }
}
@media screen and (max-width: 940px) {
  p.subheading-info > span {
    display: inline;
    white-space: wrap;
  }
}
@media screen and (max-width: 640px) {
   .section {
      padding: 85px 0 35px;
    }
}
@media screen and (max-width: 480px) {
  .subheading {
    font-size: 30px;
    margin-bottom: 25px;
    line-height: 1;
  }
  p.subheading-info {
    font-size: 13px;
    line-height: 1.3;
  }
}

/* mobile-menu */
@media screen and (max-width: 740px) {
  .mobile-menu .mobile-header .container {
    padding: 5px 0;
  }
}

/* header */
@media screen and (max-width: 740px) {
  .header {
    padding: 5px 0;
  }
  .header nav .menu {
    gap: 20px;
  }
}
@media screen and (max-width: 640px) {
  .header nav {
    visibility: hidden;
    opacity: 0;
  }
}

/* main */
/* visual영역 */
@media screen and (max-width: 1200px) {
  .visual .visualCover .cover-wrap {
    padding: 11vw 0 5vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p {
    font-size: 7.08vw;
    line-height: 7.5vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p.designer i {
    font-size: 1vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p.portfolio i {
    font-size: 1vw;
  }
  .visual .visualCover .cover-wrap .design-info p.myName {
    font-size: 10.67vw;
  }
  .visual .visualCover .cover-wrap .design-info p.info {
    font-size: 2vw;
  }
}
@media screen and (max-width: 940px) {
  .visual .visualCover .cover-wrap .design-info {
    margin-top: 270px;
    font-size: 16px;
  }
  .visual .framebox {
    padding-top: 100vh;
    overflow: hidden;
  }
  .visual .framebox video {
    width: 100%;
    height: 100vh;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 740px) {
  .visual {
    padding-top: 61px;
  }
  .visual .visualCover .cover-wrap {
    padding: 15vw 0 11vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p {
    font-size: 8vw;
    line-height: 9vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p.designer i {
    font-size: 1.2vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p.portfolio i {
    font-size: 1.2vw;
  }
  .visual .visualCover .cover-wrap .design-info {
    margin-top: 260px;
  }
  .visual .visualCover .cover-wrap .design-info p.myName {
    font-size: 11vw;
  }
  .visual .visualCover .cover-wrap .design-info p.info {
    font-size: 2.3vw;
  }
  /* .visual .framebox {
    padding-top: 100vh;
  }
  .visual .framebox video {
    width: 200%;
  } */
}
@media screen and (max-width: 640px) {
  .visual .visualCover .cover-wrap {
    padding: 20vw 0 11vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p {
    font-size: 9.5vw;
    line-height: 11vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p.designer i {
    font-size: 1.4vw;
  }
  .visual .visualCover .cover-wrap .coverTitle p.portfolio i {
    font-size: 1.4vw;
  }
  .visual .visualCover .cover-wrap .design-info {
    margin-top: 10vh;
    flex-direction: column;
    align-items: flex-start;
  }
  .visual .visualCover .cover-wrap .design-info p.myName {
    font-size: 13vw;
  }
  .visual .visualCover .cover-wrap .design-info p.info {
    font-size: 2.6vw;
  }
}
@media screen and (max-width: 480px) {
  .visual .visualCover .cover-wrap .design-info {
    margin-top: 24vh;
  }
  .visual .visualCover .cover-wrap {
    padding: 22vw 0 11vw;
  }
  .visual .framebox video {
    width: 250%;
    top: -5%;
  }
}
@media screen and (max-width: 320px) {
  .visual .visualCover .cover-wrap {
    padding: 31vw 0 11vw;
  }
}

/* about 영역 */
@media screen and (max-width: 1400px) {
  .about .myimg {
    left: 10%;
  }
}
@media screen and (max-width: 1200px) {
  .about .myimg {
    width: 55.89%;
  }
  .about .myimg.on img {
    opacity: .5;
  }
  .about .introduction {
    margin-left: 3vw;
  }
  .about .introduction .myname-wrap {
    gap: 10px;
  }
  .about .aboutContents {
    flex-basis: calc(55% - 6.5%);
  }
  .about .introduction .myname-wrap .myName2 {
    font-size: 70px;
  }
  .about .introduction .myname-wrap p {
    font-size: 40px;
  }
  .about .introduction .myMind {
    margin: 19px 0;
  }
  .about .introduction .myMind i {
    font-size: 26px;
  }
  .about .introduction .myMind p {
    font-size: 20px;
  }
  .about .introduction .hashtag {
    width: 27vw;
  }
  .about .introduction .hashtag span {
    font-size: 14px;
    padding: 0 10px;
  }
  .about .about-tabmenu li {
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin-left: -20px;
  }
  .about .about-tabmenu li a {
    font-size: 18px;
  }
  .about .aboutContents .about-content .about01 {
    flex-basis: 300px;
  }
  .about .aboutContents .about-content .about01 p.about-submenu {
    font-size: 23px;
  }
  .about .aboutContents .about-content .about01 p.about-submenu > span {
    display: block;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList {
    margin-top: 10px;
  }
  .about .aboutContents .about-content .about01 .ratio-area > p {
    font-size: 15px;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList:nth-child(2) {
    margin-top: 15px;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList p {
    flex-basis: 20%;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList .ratio {
    flex-basis: 60%;
  }
  .about .aboutContents .about-content .about02 p.about-submenu {
    font-size: 23px;
    margin-bottom: 20px;
  }
  .about .aboutContents .about-content .about02 ul li {
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 10px;
  }
  .about .aboutContents .about-content .about02 ul li > span {
    line-height: 1.6;
    display: block;
  }
}
@media screen and (max-width: 940px) {
  .about .myimg {
    width: 100%;
    left: 0;
  }
  .about .introduction {
    margin-left: 0;
  }
  .about .introduction .hashtag {
    width: 34vw;
  }
  .about .about-tabmenu {
    flex-direction: column;
    left: 0;
    right: auto;
    bottom: 30%;
    gap: 10px;
  }
  .about .about-tabmenu li {
    margin-left: 0;
  }
  .about .aboutContents {
    flex-basis: 52%;
  }
  .about .aboutContents .about-content {
    gap: 20px;
  }
  .about .aboutContents .about-content .about01 {
    flex-basis: 320px;
  }
  .about .aboutContents .about-content .about01 p.subheading-info {
    text-wrap: wrap;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList {
    margin-top: 5px;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList p {
    font-size: 15px;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList .progress {
    flex-basis: 70%;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList p {
    font-size: 13px;
  }
  .about .aboutContents .about-content .about01 .ratio-area > p > span {
    display: inline;
    white-space: wrap;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList .progress .progressbar-text {
    font-size: 13px;
  }
  
  
}
@media screen and (max-width: 740px) {
  .about .container {
    flex-direction: row;
  }
  .about .introduction {
    flex-basis: 35%;
  }
  .about .introduction .myname-wrap .myName2 {
    font-size: 55px;
  }
  .about .introduction .myname-wrap p {
    font-size: 38px;
  }
  .about .introduction .myMind {
    margin: 13px 0;
  }
  .about .introduction .myMind i {
    font-size: 20px;
  }
  .about .introduction .myMind p {
    font-size: 18px;
  }
  .about .introduction .hashtag span {
    font-size: 13px;
  }
  .about .about-tabmenu {
    bottom:30%;
    gap: 10px;
  }
  .about .about-tabmenu li {
    width: 217px;
    height: 40px;
    line-height: 40px;
    clip-path: none;
  }
  .about .about-tabmenu li a {
    font-size: 16px;
  }
  .about .aboutContents {
    flex-basis: 55%;
  }
  .about .aboutContents .about-content {
    gap: 20px;
  }
}
@media screen and (max-width: 640px) {
  .about .introduction {
    flex-basis: 47%;
  }
  .about .introduction .myname-wrap .myName2 {
    font-size: 8.59vw;
  }
  .about .introduction .myname-wrap p {
    font-size: 5.94vw;
  }
  .about .introduction .myMind p {
    font-size: 2.8vw;
  }
  .about .introduction .hashtag {
    width: 37vw;
  }
  .about .introduction .myMind i {
    font-size: 3.125vw;
  }
  .about .about-tabmenu li {
    width: 200px;
    height: 35px;
    line-height: 35px;
  }
  .about .about-tabmenu li a {
    font-size: 14px;
  }
  .about .aboutContents {
    flex-basis: 50%;
  }
  .about .aboutContents .about-content .about01 {
    flex-basis: 355px;
  }
  .about .aboutContents .about-content .about01 p.about-submenu {
    margin-bottom: 10px;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList .progress {
    flex-basis: 60%;
    gap: 10px;
  }
 .about .aboutContents .about-content .about01 .ratio-area .ratioList p {
    flex-basis: 35%;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList .ratio {
    flex-basis: 55%;
  }
  .about .aboutContents .about-content .about02 p.about-submenu {
    margin-bottom: 10px;
  } 
}
@media screen and (max-width: 480px) {
  .about.section {
    height: 130vh;
  }
  .about .container {
    flex-direction: column;
  }
  .about .myimg {
    clip-path: none;
  }
  .about .introduction {
    flex-basis: 40%;
  }
  .about .introduction .myname-wrap .myName2 {
    font-size: 56px;
  }
  .about .introduction .myname-wrap p {
    font-size: 40px;
   }
  .about .introduction .myMind p {
    font-size: 17px
  }
  .about .introduction .myMind p br {
    display: none;
  }
  .about .introduction .hashtag {
    width: 55vw;
  }
  .about .introduction .hashtag span {
    padding: 0px 5px;
  }
  .about .about-tabmenu {
    bottom: 0;
    margin-bottom: 10px;
    flex-direction: row;
  }
  .about .about-tabmenu li {
    width: 40px;
    height: 40px;
    padding: 5px;
  }
  .about .about-tabmenu li a:first-child {
    display: block;
  }
  .about .about-tabmenu li a:last-child {
    display:none
  }
   .about .aboutContents {
    flex-basis: 100%;
    margin-top: 10px;
  }
  .about .aboutContents .about-content {
    gap: 05px;
  }
  .about .aboutContents .about-content .about01 {
    flex-basis: 265px;
  }
  .about .aboutContents .about-content .about01 p.about-submenu {
    font-size: 18px;
  }
  .about .aboutContents .about-content .about01 .progress-area .progressList .progress {
    flex-basis: 75%;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList {
    margin-top: 5px;
  }
  .about .aboutContents .about-content .about01 .ratio-area > p {
    font-size: 13px;
  }
  .about .aboutContents .about-content .about01 .ratio-area .ratioList:nth-child(2) {
    margin-top: 10px;
  }
  .about .aboutContents .about-content .about02 p.about-submenu {
    font-size: 18px;
  }
  .about .aboutContents .about-content .about02 ul li {
    line-height: 1.2;
    font-size: 13px;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 320px) {
  .about .introduction .hashtag {
    width: 70vw;
  }
}

/* webCoding 영역 */
@media screen and (max-width: 1400px) {
  .webCoding .coding-wrap .codings .codingBottom .codingContents .imgbox {
    width: 47vw;
  }
  .webCoding .coding-wrap .codings .sw-control {
    overflow: hidden;
  }
  .webCoding .coding-wrap .codings .sw-control .webarrow {
    width:70px;
    height: 70px;
  }
  .webCoding .coding-wrap .codings .sw-control .webarrow.webPrev {
    left: 2%;
  }
  .webCoding .coding-wrap .codings .sw-control .webarrow.webNext {
    left: 98%;
  }
  .webCoding .coding-wrap .codings .sw-control .webarrow span {
    font-size: 70px;
    color: var(--bg);
  }
}
@media screen and (max-width:1200px) {
  .webCoding .coding-wrap .codings .sw-control .webarrow {
    width:60px;
    height: 60px;
    top: 40%;
  }
  .webCoding .coding-wrap .codings .sw-control .webarrow span {
    font-size: 60px;
  }
}
@media screen and (max-width: 940px) {
  .webCoding .coding-wrap .codings .codingBottom .codingContents .textbox .link p {
    width: 50px;
    height: 50px;
  }
  .webCoding .coding-wrap .codings .codingBottom .codingContents .textbox .link p a {
    font-size: 14px;
  }
}
@media screen and (max-width: 740px) {
  .webCoding {
    height: auto;
  }
  .webCoding-pin-container {
    height: auto;
  }
  .webCoding .coding-wrap {
    position: relative;
    height: auto;
    padding: 50px 0;
  }
  .webCoding .coding-wrap.coding1 {
    top: auto;
  }
  .webCoding .coding-wrap.coding2 {
    top: auto;
  }
  .webCoding .coding-wrap.coding3 {
    top: auto;
  }
  .webCoding .coding-wrap .codings {
    padding-top: 20px;
  }
  .webCoding .coding-wrap .codings .codingHeader .codingLeft {
    gap: 20px;
    flex-basis: 20%;
  }
  .webCoding .coding-wrap .codings .codingHeader .codingRight {
    flex-basis: 60%;
  }
  .webCoding .coding-wrap .codings .codingBottom {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .webCoding .coding-wrap .codings .codingBottom .codingContents {
    flex-basis: 100%;
  }
  .webCoding .coding-wrap .codings .codingBottom .codingContents .imgbox {
    width: 100%;
  }
  .webCoding .coding-wrap .codings .sw-control .webarrow {
    display: none;
  }
  .webCoding .coding-wrap .codings .sw-control .sw-pg {
    display: inline-block;
    text-align: center;
    margin-top: 20px;
  }
  .webCoding .coding-wrap .codings .sw-control .sw-pg .swiper-pagination-bullet {
    border-radius: 0;
    width: 50px;
    height: 4px;
  }
  .webCoding .coding-wrap .codings .sw-contro .sw-pg .swiper-pagination-bullet-active {
    background-color: var(--point);
  }
}
@media screen and (max-width: 640px) {
  .webCoding .coding-wrap .codings .codingBottom .codingContents .textbox .info-area p:first-child {
    font-size: 16px;
  }
  .webCoding .coding-wrap .codings .codingBottom .codingContents .textbox .info-area p:last-child {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .webCoding .coding-wrap .codings .codingHeader {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 20px;
    margin-bottom: 35px;
  }
  .webCoding .coding-wrap .codings .codingHeader .codingLeft {
    gap: 10px;
  }
  .webCoding .coding-wrap .codings .codingHeader .codingLeft .number-left {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
  }
  .webCoding .coding-wrap .codings .sw-control .sw-pg .swiper-pagination-bullet {
    border-radius: 0;
    width: 40px;
    height: 3px;
  }
}

/* design 영역 */
@media screen and (max-width: 1200px) {
  .design .design-wrap .design-flex .design-left .design-img li a {
    width: 300px;
    height: 300px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type a {
    font-size: 35px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type .arrow-down {
    font-size: 35px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type .arrow-up {
    font-size: 35px;
  }
}
@media screen and (max-width: 940px) {
  .design .design-wrap .design-flex .design-right .designList > li .design-type a {
    font-size: 30px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type .arrow-down {
    font-size: 30px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type .arrow-up {
    font-size: 30px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .subList > li a {
    font-size: 18px;
  }
}
@media screen and (max-width: 740px) {
  .design {
    height: 130vh;
  }
  .design .design-wrap .design-flex .design-right {
    flex-basis: 100%;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type .arrow-down {
    font-size: 35px;
  }
  .design .design-wrap .design-flex .design-right .designList > li .design-type .arrow-up {
    font-size: 35px;
  }
}
@media screen and (max-width: 640px) {
  .design {
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .design .design-wrap .design-flex .design-right .designList > li .subList > li {
    border-bottom: 1px solid transparent;
    flex-basis: fit-content;
    height: fit-content;
  }
  .design .design-wrap .design-flex .design-right .designList > li .subList {
    padding: 20px 10px;
  }
}

/* contact 영역 */
@media screen and (max-width: 1200px) {
  .contact .container .contactWrap .contact-left .contact-bottom {
    margin-top: 60px;
    gap: 50px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap {
    column-gap: 25px;
    row-gap: 35px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li > p span {
    display: inline;
    white-space: wrap;
  }
  .contact .container .contactWrap .contact-right {
    flex-basis: 30%;
  }
}
@media screen and (max-width: 940px) {
  .contact .container .contactWrap {
    flex-direction: column;
  }
  .contact .container .contactWrap .contact-right {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
  .contact .container .contactWrap .contact-left .contact-header p span {
    display:block
  }
  .contact .container .contactWrap .contact-left .contact-bottom {
    margin-top: 25px;
    gap: 50px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap {
    row-gap: 25px;
  }
  .contact .container .contactWrap .contact-right .sns {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    border-top: none;
    border-bottom: none;
  }
  .contact .container .contactWrap .contact-right .sns:first-child {
    border-right: 0;
  }
  .contact .container .contactWrap .contact-right .sns:last-child {
    border-left: 0;
  }
}
@media screen and (max-width: 740px) {
  .contact .container .contactWrap .contact-left {
    padding: 30px 0;
  }
  .contact .container .contactWrap .contact-left .contact-bottom {
    flex-direction: column;
    gap: 25px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .together {
    border-bottom: 1px solid var(--intro);
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap {
    column-gap: 75px;
  }

  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li .icon-wrap p {
    font-size: 14px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li > p {
    font-size: 14px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li > p span {
    display: block;
    white-space: nowrap;
  }
  .contact .container .contactWrap .contact-right .sns i {
    font-size: 40px;
  }
  .contact .container .contactWrap .contact-right .sns:nth-child(2) i {
    font-size: 45px;
  }

}
@media screen and (max-width: 640px) {
  .contact .container .contactWrap .contact-left {
    padding: 20px 15px;
  }    
  .contact .container .contactWrap .contact-left .contact-header p span {
    display: inline;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li > p span {
    display: inline;
    white-space: wrap;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap {
    column-gap: 20px;
  }
  .contact .container .contactWrap .contact-right .sns i {
    font-size: 35px;
  }
  .contact .container .contactWrap .contact-right .sns:nth-child(2) i {
    font-size: 40px;
  }
}
@media screen and (max-width: 480px) {
  .contact {
    padding-top: 100px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap {
    column-gap: 15px;
    row-gap: 15px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li .icon-wrap p {
    font-size: 13px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li > p {
    font-size: 12px;
  }
  .contact .container .contactWrap .contact-left .contact-bottom .address-wrap li > p {
    margin-top: 5px;
  }
}
/* 모달창 영역 */
@media screen and (max-width: 1200px) {
  .modalWrap .modalsbox .codingModal {
    padding: 25px 20px;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop1 .codingTitle > p {
    font-size: 40px;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 {
    margin-top: 15px;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 .useAll {
    gap: 35px;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 .useAll li > p:first-child {
    line-height: 1.3;
  }
  .modalWrap .modalsbox .codingModal .modalBottom {
    margin-top: 30px;
  }
}
@media screen and (max-width: 940px) {
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop1 .codingTitle > p {
    font-size: 35px;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 {
    align-items: flex-end;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 .useAll {
    column-gap: 24px;
    row-gap: 10px;
    flex-wrap: wrap;
    flex-basis: 50%;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 .useAll li p {
    font-size: 14px;
  }
}
@media screen and (max-width: 740px) {
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 .useAll {
    flex-basis: 55%;
  }
}
@media screen and (max-width: 640px) {
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop1 .codingTitle > p {
      font-size: 32px;
    }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop1 .codingTitle span {
    font-size: 14px;
  }
  .modalWrap .modalsbox .codingModal .modalHeader .modalTop2 .useAll li p {
    font-size: 13px;
  }
}

/* footer */
@media screen and (max-width: 1200px) {
  footer p {
    font-size: 12px;
  }
}
@media screen and (max-width: 480px) {
  footer p {
    font-size: 11px;
  }
}