@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url("https://fonts.cdnfonts.com/css/gill-sans-2");
#container.portfolio {
  padding-top: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.03em;
  font-family: "Nanum Gothic", "NanumSquare", "NanumSquareNeo", HelveticaNeue-Light, AppleSDGothicNeo-Light, "Malgun Gothic", sans-serif !important;
  color: #231F20;
}

strong {
  font-weight: normal;
}

.tit_comm {
  font-size: 2.6em;
  line-height: 1.2;
  font-weight: 400;
  font-family: "Gill Sans", "NanumSquare", "NanumSquareNeo", HelveticaNeue-Light, AppleSDGothicNeo-Light, "Malgun Gothic", sans-serif !important;
}

.desc {
  line-height: 1.8;
}

.wrap_tit + .contents {
  margin-top: 60px;
}

.wrap_tit .desc {
  margin-top: 1.6em;
}

.gill {
  font-family: "Gill Sans", "NanumSquare", "NanumSquareNeo", HelveticaNeue-Light, AppleSDGothicNeo-Light, "Malgun Gothic", sans-serif !important;
}

.img.full img {
  width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  -o-object-fit: cover;
     object-fit: cover;
}

.dual {
  display: flex;
}
.dual > div {
  flex-grow: 1;
}

section {
  padding: 150px 0;
}

section.img_area {
  padding: 0;
}

@media screen and (max-width: 1480px) {
  #container.portfolio {
    font-size: 18px;
  }
  section {
    padding: 10.13vw 0;
  }
}
@media screen and (max-width: 1024px) {
  #container.portfolio {
    font-size: 16px;
  }
  section {
    padding: 80px 0;
  }
}
@media screen and (max-width: 768px) {
  section {
    padding: 60px 0;
  }
  .tit_comm {
    font-size: 30px;
  }
  .wrap_tit + .contents {
    margin-top: 24px;
  }
}
#visual {
  position: relative;
  height: 100vh;
  height: 100dvh;
  background: url(../../img/portfolio/p10/p10_visual.jpg) center/cover;
  color: #fff;
}
#visual .tit_comm {
  position: absolute;
  bottom: 80px;
  left: 80px;
  font-size: 3.6em;
}
@media screen and (max-width: 1480px) {
  #visual .tit_comm {
    left: 5.4vw;
  }
}
@media screen and (max-width: 1024px) {
  #visual .tit_comm {
    left: 40px;
    font-size: 6.32vw;
  }
}
@media screen and (max-width: 768px) {
  #visual .tit_comm {
    bottom: 40px;
    left: 20px;
    font-size: 40px;
  }
}

.section1 {
  padding: 180px 0;
  background: #EEEEED;
}
.section1 .wrap_tit {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}
.section1 .wrap_tit .tit_comm {
  flex-shrink: 0;
}
.section1 .wrap_tit .desc {
  max-width: 600px;
  margin-top: 0;
}
@media screen and (max-width: 1480px) {
  .section1 {
    padding: 12.16vw 0;
  }
}
@media screen and (max-width: 768px) {
  .section1 {
    padding: 80px 0;
  }
  .section1 .wrap_tit {
    flex-direction: column;
    gap: 32px;
  }
  .section1 .wrap_tit .tit_comm br {
    display: none;
    font-size: 0;
  }
}

.section2 {
  background-color: #000;
}
.section2 .img {
  position: relative;
}
.section2 .contents {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1;
}
.section2 .tit {
  display: block;
  font-size: 30px;
  font-weight: 800;
  transition: 1s 0.2s;
}
.section2 .gill {
  display: block;
  position: relative;
  align-items: center;
  transition: 1s 0.2s;
}
.section2 .gill:before, .section2 .gill:after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 3px;
  background: #fff;
  transition: 1s 1s;
  transform: translateX(-50%);
}
.section2 .img:first-child {
  color: #fff;
}
.section2 .img:first-child .contents:after {
  background: #fff;
}
.section2 .img:first-child .tit {
  transform: translateY(100%);
}
.section2 .img:first-child .gill {
  transform: translateY(-100%);
  margin-top: 12px;
  padding-top: 12px;
}
.section2 .img:first-child .gill:before {
  top: 0;
  background: #fff;
  content: "";
}
.section2 .img:last-child {
  color: #652C90;
}
.section2 .img:last-child .contents:after {
  background: #652C90;
}
.section2 .img:last-child .tit {
  transform: translateY(-100%);
}
.section2 .img:last-child .gill {
  transform: translateY(100%);
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.section2 .img:last-child .gill:after {
  bottom: 0;
  background: #652C90;
  content: "";
}
.section2 .aos-animate .contents .tit, .section2 .aos-animate .contents .gill {
  transform: unset !important;
}
.section2 .aos-animate .contents .gill:before,
.section2 .aos-animate .contents .gill:after {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .section2 .tit {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .section2 .img img {
    height: 50vw;
  }
  .section2 .tit {
    font-size: 18px;
  }
  .section2 .gill:before, .section2 .gill:after {
    height: 2px;
  }
}

.section3 {
  padding-bottom: 0;
  background: #000;
  text-align: center;
  color: #fff;
  margin-top: -1px;
}
.section3 .contents .sup {
  display: block;
  font-size: 1.2em;
}
.section3 .contents .title {
  display: block;
  margin-top: 0.3em;
  font-size: 3.6em;
  font-weight: bold;
  line-height: 1.1;
}
.section3 .contents .desc {
  margin-top: 2em;
  color: #873DBE;
}
.section3 .img {
  margin-top: 60px;
  transition-delay: 0.3s;
}
@media screen and (max-width: 768px) {
  .section3 .contents .title {
    font-size: 40px;
  }
}

.section4 {
  background: #EEEEED;
}
.section4 .wrap_tit {
  margin-top: 150px;
}
.section4 .contents {
  display: flex;
  justify-content: center;
  align-items: center;
}
.section4 .contents .img {
  position: relative;
  z-index: 3;
}
@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}
.section4 .contents .circle {
  display: flex;
  align-items: center;
  width: 530px;
  height: 530px;
  transform: translateX(-450px);
  margin-left: 120px;
  transition: 1.2s 0.1s;
  position: relative;
  z-index: 2;
  padding: 4px 4px 4px 3px;
}
.section4 .contents .circle svg {
  position: absolute;
  top: 0;
  left: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-180deg);
}
.section4 .contents .circle .outer {
  top: 50%;
  width: 530px;
  height: 530px;
  margin-top: -265px;
}
.section4 .contents .circle .inner {
  top: 50%;
  width: 202px;
  height: 202px;
  margin-top: -101px;
}
.section4 .contents .circle span {
  font-weight: 600;
  opacity: 0;
  transition: 1s;
}
.section4 .contents .circle [class^=item] {
  position: relative;
  width: 327px;
  height: 327px;
  border: 1px solid rgba(88, 89, 91, 0.5);
  border-radius: 100%;
  transition: 1.2s;
}
.section4 .contents .circle .item1 {
  display: flex;
  align-items: center;
  background-color: #E6E7E8;
  z-index: 2;
  transition-delay: 0.2s;
}
.section4 .contents .circle .item1 span {
  text-align: center;
}
.section4 .contents .circle .item1 .txt1 {
  width: 202px;
  transition-delay: 1.8s;
  flex-shrink: 0;
}
.section4 .contents .circle .item1 .txt2 {
  flex-grow: 1;
  transition-delay: 2.3s;
}
.section4 .contents .circle .item2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F1F2F2;
  margin-left: -328px;
  z-index: 1;
  transition-delay: 0.6s;
}
.section4 .contents .circle .item2 .txt3 {
  padding-left: 126px;
  transition-delay: 2.8s;
}
.section4 .contents.aos-animate .circle {
  transform: translateX(0);
}
.section4 .contents.aos-animate .circle .item2 {
  margin-left: -126px;
}
.section4 .contents.aos-animate .circle span {
  opacity: 1;
}
.section4 .contents.aos-animate .circle .outer {
  animation: drawCircle 2s 1.2s linear forwards;
}
.section4 .contents.aos-animate .circle .inner {
  animation: drawCircle 2s 0.5s linear forwards;
}
@media screen and (max-width: 1480px) {
  .section4 .wrap_tit {
    margin-top: 10.13vw;
  }
  .section4 .contents .img {
    width: 35.81vw;
  }
  .section4 .contents .circle {
    width: 35.81vw;
    height: 35.81vw;
    margin-left: 8.1vw;
    transform: translateX(-30.4vw);
    padding: 1px;
  }
  .section4 .contents .circle .outer {
    width: 35.81vw;
    height: 35.81vw;
    margin-top: -17.905vw;
  }
  .section4 .contents .circle .outer circle {
    width: 35.81vw;
    height: 35.81vw;
  }
  .section4 .contents .circle .inner {
    width: 13.64vw;
    height: 13.64vw;
    margin-top: -6.82vw;
  }
  .section4 .contents .circle .inner circle {
    width: 13.64vw;
    height: 13.64vw;
  }
  .section4 .contents .circle [class^=item] {
    width: 22.16vw;
    height: 22.16vw;
  }
  .section4 .contents .circle .item1 .txt1 {
    width: 13.64vw;
  }
  .section4 .contents .circle .item2 {
    margin-left: -22.16vw;
  }
  .section4 .contents .circle .item2 .txt3 {
    padding-left: 8.51vw;
  }
  .section4 .contents.aos-animate .circle {
    margin-left: 8.1vw;
  }
  .section4 .contents.aos-animate .circle .item2 {
    margin-left: -8.51vw;
  }
}
@media screen and (max-width: 768px) {
  .section4 .wrap_tit {
    margin-top: 60px;
  }
  .section4 .contents {
    transform: scale(1.2);
  }
  .section4 .contents span {
    font-size: 2.3vw;
  }
  .section4 .contents.aos-animate .circle {
    margin-left: 20px;
  }
  .section4 .contents .outer circle {
    stroke-width: 1px;
  }
  .section4 .contents .inner circle {
    stroke-width: 3px;
  }
}
@media screen and (max-width: 440px) {
  .section4 .dual {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  .section4 .dual .circle {
    transform: unset;
    margin-top: -4vw;
  }
}

.section6 .contents {
  margin-top: 40px;
}
.section6 [class^=row] {
  padding: 40px 0;
  color: #fff;
}
.section6 [class^=row] .wfix {
  display: flex;
}
.section6 [class^=row] .item1 {
  width: 50%;
  font-size: 18px;
}
.section6 [class^=row] .item2, .section6 [class^=row] .item3 {
  width: 25%;
  font-size: 16px;
}
.section6 .row1 {
  background: #652C90;
  height: 360px;
}
.section6 .row2 {
  background: #F286B6;
}
.section6 .row3 {
  background: #66666D;
  margin-top: 150px;
}
.section6 .row4 {
  background: #A7A9AB;
}
@media screen and (max-width: 1024px) {
  .section6 .contents {
    margin-top: 32px;
  }
  .section6 [class^=row] {
    padding: 24px 0;
  }
  .section6 [class^=row] .item1 {
    font-size: 16px;
  }
  .section6 [class^=row] .item2, .section6 [class^=row] .item3 {
    font-size: 14px;
  }
  .section6 .row1 {
    height: 35vw;
  }
  .section6 .row3 {
    margin-top: 12vw;
  }
}
@media screen and (max-width: 768px) {
  .section6 [class^=row] .wfix {
    flex-wrap: wrap;
  }
  .section6 [class^=row] .item1 {
    width: 100%;
    margin-bottom: 12px;
  }
  .section6 [class^=row] .item2, .section6 [class^=row] .item3 {
    width: auto;
  }
  .section6 [class^=row] .item2 {
    min-width: 50%;
  }
  .section6 .row1 {
    height: auto;
  }
}

.section7 {
  background: #66676D;
  color: #fff;
}
.section7 .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding: 20px 100px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.section7 .typo {
  flex-grow: 1;
  text-align: center;
  max-width: 850px;
}
.section7 .typo img {
  height: 52px;
}
.section7 .conts {
  width: 180px;
  flex-shrink: 0;
}
.section7 .conts strong {
  display: block;
}
.section7 .conts span {
  display: block;
  font-size: 0.9em;
}
@media screen and (max-width: 1480px) {
  .section7 .row {
    gap: 40px;
    padding: 20px 0;
  }
}
@media screen and (max-width: 1024px) {
  .section7 .row {
    padding: 12px 0;
  }
  .section7 .conts {
    width: 140px;
  }
}
@media screen and (max-width: 768px) {
  .section7 .row {
    display: block;
    text-align: center;
  }
  .section7 .typo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section7 .typo img {
    height: auto;
    max-height: 40px;
  }
  .section7 .conts {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    width: auto;
    margin-top: 12px;
  }
}

.section8 {
  position: relative;
  padding-bottom: 390px;
  background: #66676D;
  color: #fff;
}
.section8:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 390px;
  background: url(../../img/portfolio/p10/p10_sect8_img01.png) no-repeat center bottom/100% auto;
  opacity: 0;
  transition: 1s 0.5s;
  content: "";
}
.section8 .contents {
  margin-top: 2em;
  text-align: center;
}
.section8 .gill {
  font-size: 2em;
  line-height: 1.2;
}
.section8.aos-animate:after {
  opacity: 1;
}
@media screen and (max-width: 1480px) {
  .section8 {
    padding-bottom: 26.35vw;
  }
  .section8:after {
    height: 26.35vw;
  }
}
@media screen and (max-width: 768px) {
  .section8 .gill {
    font-size: 30px;
  }
}

.section9 {
  position: relative;
}
.section9 .contents {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 428px;
  padding-top: 4vw;
  background: url(../../img/portfolio/p10/p10_sect9_img02.png) no-repeat center top/120% 100%;
  text-align: center;
}
.section9 .contents .gill {
  font-size: 2.6em;
  line-height: 1.2;
  font-weight: bold;
}
@media screen and (max-width: 1480px) {
  .section9 .contents {
    height: 28.9vw;
  }
}
@media screen and (max-width: 1024px) {
  .section9 .img img {
    height: 80vw;
  }
  .section9 .contents .gill {
    font-size: 4vw;
  }
}
@media screen and (max-width: 768px) {
  .section9 .img img {
    height: 100vw;
  }
  .section9 .contents {
    padding-top: 8vw;
    background-size: 150% 100%;
  }
  .section9 .contents .gill {
    font-size: 20px;
  }
}

.section11 {
  padding-bottom: 0;
}

.section12 .contents {
  padding: 180px 0;
  background: #000;
  text-align: center;
  color: #fff;
}
.section12 .sup {
  display: block;
  font-size: 1.2em;
  color: #873DBE;
}
.section12 .title {
  display: block;
  margin-top: 20px;
  font-size: 3.6em;
  font-weight: bold;
  line-height: 1.1;
}
.section12 .desc {
  margin-top: 1em;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.2;
}
@media screen and (max-width: 1480px) {
  .section12 .contents {
    padding: 12.16vw 0;
  }
}
@media screen and (max-width: 1024px) {
  .section12 .contents {
    padding: 80px 0;
  }
}
@media screen and (max-width: 768px) {
  .section12 .contents {
    padding: 60px 0;
  }
  .section12 .sup {
    font-size: 16px;
  }
  .section12 .title {
    font-size: 40px;
  }
  .section12 .desc {
    font-size: 18px;
  }
}