/**
* Template Name: Personal - v4.7.0
* Template URL: https://bootstrapmade.com/personal-free-resume-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/xpressengine/XEIcon@2.3.3/xeicon.min.css');

body { font-family: 'Montserrat', 'Noto Sans KR', sans-serif; background: #131415; color: #fff; position: relative; background: transparent; }
body::before { content: ""; position: fixed; background: #131415; background-size: cover; left: 0; right: 0; top: 0; height: 100vh; z-index: -1; }
@media (min-width: 1024px) { body::before { background-attachment: fixed; } }
a { color: #fff; text-decoration: none; }
a:hover { color: #64B2D1; text-decoration: none; }
html { scroll-behavior: smooth; }
body::-webkit-scrollbar { width: 8px; } /*스크롤바의 너비*/
body::-webkit-scrollbar-thumb { background-color: #131415; border-radius: 5px; border: 1px solid #555; }/*스크롤바의 색상*/
body::-webkit-scrollbar-track { background-color: #131415; } /*스크롤바 트랙 색상*/
#lottie { height: 100vh; z-index: 0; position: absolute; top: 0px; }
#Mlottie { display: none; }


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header { transition: ease-in-out 0.3s; position: relative; height: 100vh; display: flex; align-items: center; overflow-y: auto; z-index: 99; }
#header * { transition: ease-in-out 0.3s; }
#header .container { margin-top: 40px; z-index: 999;; }
#header h1 { font-size: 4rem; margin: 0; padding: 0; line-height: 1; font-weight: 700; }
#header h1 a, #header h1 a:hover { color: #fff; line-height: 1; display: inline-block; }
#header h2 { font-size: 1.4rem; margin-top: 15px; color: #555; }
#header h2 span { color: #555; border-bottom: 2px solid #64B2D1; padding-bottom: 6px; }
#header img { padding: 0; margin: 0; }
#header .social-links { margin-top: 40px; display: flex; }
#header .social-links a { font-size: 16px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.1); color: #fff; line-height: 1; margin-right: 8px; border-radius: 50%; width: 40px; height: 40px; }
#header .social-links a:hover { background: #64B2D1; }
@media (max-width: 992px) {
  #lottie { display: none; }
  #Mlottie { display: inline-block; height: 100vh; z-index: 0; position: absolute; top: 0px;  }
  #header h1 { font-size: 2.2rem; }
  #header h2 { font-size: 1.3rem; line-height: 1; }
  #header .social-links { margin-top: 15px; }
  #header .container { display: flex; flex-direction: column; align-items: center; z-index: 99; margin-bottom: 30%; margin-top: 0; }
}
@media (max-width: 768px) {
  #header .container { margin-bottom: 60%; }
}

/* Header Top */
#header.header-top { height: 80px; position: fixed; left: 0; top: 0; right: 0; background: rgba(0, 0, 0, 0.3); }
#header.header-top #lottie { display: none; }
#header.header-top #Mlottie { display: none; }
#header.header-top .social-links, #header.header-top h2 { display: none; }
#header.header-top h1 { margin-right: auto; font-size: 36px; }
#header.header-top .container { display: flex; align-items: center; margin-top: 0; margin-bottom: 0; }
#header.header-top .navbar { margin: 0; }
@media (max-width: 768px) {
  #header.header-top { height: 60px; }
  #header.header-top h1 { font-size: 26px; }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/*** Desktop Navigation ***/
.navbar { padding: 0; margin-top: 35px; }
.navbar ul { margin: 0;padding: 0;display: flex;list-style: none;align-items: center; }
.navbar li { position: relative; }
.navbar li + li { margin-left: 30px; }
.navbar a, .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 0; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.7); white-space: nowrap; transition: 0.3s; }
.navbar a i, .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; }
.navbar a:before { content: ""; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: #64B2D1; visibility: hidden; width: 0px; transition: all 0.3s ease-in-out 0s; }
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before { visibility: visible; width: 25px; }
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a { color: #fff; }

/*** Mobile Navigation ***/
.mobile-nav-toggle { color: #fff; font-size: 28px; cursor: pointer; display: none; line-height: 0; transition: 0.5s; position: fixed; right: 15px; top: 15px; }
@media (max-width: 991px) {
  .mobile-nav-toggle { display: block; }
  .navbar ul { display: none; }
}
.navbar-mobile { z-index:999; position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); transition: 0.3s; margin-top: 0; }
.navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; }
.navbar-mobile ul { display: block; position: absolute; top: 55px; right: 15px; bottom: 45px; left: 15px; padding: 10px 0; overflow-y: auto; transition: 0.3s; border: 2px solid rgba(255, 255, 255, 0.2); }
.navbar-mobile li { padding: 12px 20px; }
.navbar-mobile li + li { margin: 0; }
.navbar-mobile a, .navbar-mobile a:focus { font-size: 16px; position: relative; }

/*--------------------------------------------------------------
# portfolio box
--------------------------------------------------------------*/
.portfolioview { margin-top: 1%; }
.portfolioview .check { margin: 0; line-height: 1; }
.check a { font-size: 1rem; font-weight: normal; border: 1px solid #64B2D1; padding: 7px 10px; color: #64B2D1; }
.check a:hover { background: #64B2D1; color: #fff; transition: all 0.5s ease 0s; }
#header.header-top .check { display: none; }
@media (max-width: 992px) {
  .portfolioview { margin-top: 0%; }
  .check a { padding: 10px 10px; }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section { overflow: hidden; position: absolute; width: 100%; top: 140px; bottom: 100%; opacity: 0; transition: ease-in-out 0.4s; }
section.section-show { top: 100px; bottom: auto; opacity: 1; padding-bottom: 45px; }
section .container { background: rgba(0, 0, 0, 0.5); padding: 30px; }
@media (max-width: 768px) {
  section { top: 120px; }
  section.section-show { top: 80px; }
}



.section-title h2 { font-size: 14px; font-weight: 500; padding: 0; line-height: 1px; margin: 0 0 20px 0; letter-spacing: 2px; text-transform: uppercase; color: #aaaaaa }
.section-title h2::after { content: ""; width: 120px; height: 1px; display: inline-block; background: #64B2D1; margin: 4px 10px; }
.section-title p { margin: 0; margin: -15px 0 15px 0; font-size: 36px; font-weight: 700; text-transform: uppercase; color: #fff; }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-me .photo { position: relative; width: 15rem; height: 15rem; margin: 1.5rem auto 0rem auto; border-radius: 50%; }
.about-me .photo img { width: 100%; border-radius: 50%; }
.about-me .content h3 { font-weight: 700; font-size: 26px; color: #64B2D1; }
.about-me .content ul { list-style: none; padding: 0; }
.about-me .content ul li { margin-bottom: 20px; display: flex; align-items: center; }
.about-me .content ul strong { margin-right: 10px; }
.about-me .content ul i { font-size: 16px; margin-right: 5px; color: #64B2D1; line-height: 0; }
.about-me .content p:last-child { margin-bottom: 0; }

/*--------------------------------------------------------------
# Education/Experience
--------------------------------------------------------------*/
.ed-ex { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.ed-ex .edex { width: 50%; }
.ed-ex .content ul { list-style: none; padding: 0; }
.ed-ex .content ul li { width: 100%; margin-bottom: 20px; display: flex; align-items: baseline; }
.ed-ex .content ul li small { margin: 0 15px; color: #aaa; }
.ed-ex .content ul i { font-size: 16px; margin-right: 5px; color: #64B2D1; line-height: 0; }
@media (max-width: 992px) {
  .ed-ex .edex { width: 100%; }
}
@media (max-width: 768px) {
  .ed-ex .content ul li { flex-wrap: nowrap; }
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .progress { height: 60px; display: block; background: none; border-radius: 0; }
.skills .progress .skill { padding: 10px 0; margin: 0; text-transform: uppercase; display: block; font-weight: 600; color: #fff; }
.skills .progress .skill .val { float: right; font-style: normal; }
.skills .progress-bar-wrap { background: rgba(255, 255, 255, 0.2); }
.skills .progress-bar { width: 1px; height: 10px; transition: 0.9s; background-color: #64B2D1; }

/*--------------------------------------------------------------
# Web
--------------------------------------------------------------*/
.services .web-item { margin-bottom: 30px; }
.services .portfolio-wrap { transition: 0.3s; position: relative; overflow: hidden; z-index: 1; background: rgba(0, 0, 0, 0.6); }
.services .portfolio-wrap::before { content: ""; background: rgba(0, 0, 0, 0.6); position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0; }
.services .portfolio-wrap .portfolio-info {opacity: 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;text-align: center;z-index: 3;transition: all ease-in-out 0.3s;display: flex;flex-direction: column;justify-content: center;align-items: center; }
.services .portfolio-wrap .portfolio-info::before { display: block; content: ""; width: 48px; height: 48px; position: absolute; top: 35px; left: 35px; border-top: 3px solid #fff; border-left: 3px solid #fff; transition: all 0.5s ease 0s; z-index: 9994; }
.services .portfolio-wrap .portfolio-info::after { display: block; content: ""; width: 48px; height: 48px; position: absolute; bottom: 35px; right: 35px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; transition: all 0.5s ease 0s; z-index: 9994; }
.services .portfolio-wrap .portfolio-info h4 { font-size: 20px; color: #fff; font-weight: 600; }
.services .portfolio-wrap .portfolio-info p { color: #ffffff; font-size: 14px; /*text-transform: uppercase;*/ padding: 0; margin: 0; }
.services .portfolio-wrap .portfolio-links { text-align: center; z-index: 4; }
.services .portfolio-wrap .portfolio-links a { color: #fff; margin: 0 2px; font-size: 28px; display: inline-block; transition: 0.3s; }
.services .portfolio-wrap .portfolio-links a:hover { color: #64B2D1; }
.services .portfolio-wrap:hover::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; }
.services .portfolio-wrap:hover .portfolio-info { opacity: 1; }
.services .portfolio-wrap:hover .portfolio-info::before { top: 15px; left: 15px; }
.services .portfolio-wrap:hover .portfolio-info::after { bottom: 15px; right: 15px; }

/*--------------------------------------------------------------
# Web Details
--------------------------------------------------------------*/
.web-details { padding-top: 10%; background: rgba(0, 0, 0, 0.8); position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; }
.web-details .container { padding-top: 20px; padding-bottom: 40px; }
.web-details .portfolio-info { padding-left: 5%; }
.web-details .portfolio-info h3 { font-size: 2rem; font-weight: bold; margin-bottom: 20px; }
.web-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; }
.web-details .portfolio-info ul li + li { margin-top: 10px; }
.web-details .portfolio-info span { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; vertical-align: middle; margin-right: 0.5rem; }
.web-details .portfolio-info span:last-child { margin-right: 0; }

.web-details .web_info1 span:nth-of-type(1) { background: #a0b58d; }
.web-details .web_info2 span:nth-of-type(1) { background: #244c70; }
.web-details .web_info3 span:nth-of-type(1) { background: #c20f2f; }
.web-details .web_info4 span:nth-of-type(1) { background: #3963c5; }
.web-details .portfolio-info p { font-size: 15px; padding: 15px 0 0 0; }
@media (max-width: 992px) {
  .web-details .portfolio-info { padding-top: 20px; }
  .redesign .redesign_list { width: 100%; }
}

/* /////----- mockup -----///// */
figure{ margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
.web_img { position: relative; display: flex; gap: 0rem; align-items: center; width: 100%; margin: 0 auto; z-index: 9; }
.web_img .mockup { flex: 2; }
.web_img .description { flex: 1; }
/* mockup */
.web_img .mockup { position: relative; height: 30rem; background-image: url(/assets/img/mockup01.png); background-size: calc(100% - 5rem) auto; background-repeat: no-repeat; -webkit-box-reflect: below -10px linear-gradient(transparent 80%, #0004); }
.web_img .mockup .desktop { position: absolute; top: 0.8rem; width: 38rem; height: 21.5rem; border-radius: 0.5rem; overflow: hidden; }
.web_img:nth-child(even) .mockup .desktop { left: 5.5rem; }
.web_img:nth-child(odd) .mockup .desktop { right: 5.8rem; }
.web_img .mockup .desktop img:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; }
.web_img .mockup .desktop:hover img { transform: translateY(-100%); top: 100%; }
/* .web_img:nth-child(odd) .mockup { order: 1; } */
/* mobile mockup */
.web_img .mo_mockup { position: absolute; bottom: 0.5rem; background: url(/assets/img/mockup02.png) no-repeat center center/contain; width: 10rem; height: 20rem; }
.web_img:nth-child(even) .mo_mockup { left: 0; }
.web_img:nth-child(odd) .mo_mockup { right: 0; }
.web_img .mo_mockup .mobile { position: absolute; top: 0.4rem; left: 0.4rem; width: 9.2rem; height: 19.2rem; border-radius: 1.2rem; overflow: hidden; }
.web_img .mo_mockup .mobile img { position: absolute; top: 0; left: 0; width: 100%; }
.web_img .mo_mockup .mobile:hover img { transform: translateY(-100%); top: 100%; }

.webtitle .mockup .desktop:hover img:nth-child(1) { transition: 3s linear; }
.webtitle .mo_mockup .mobile:hover img { transition: 2s linear; }

.webtitle .mockup .desk01:hover img:nth-child(1) { transition: 4s linear; }
.webtitle .mo_mockup .mo01:hover img { transition: 5s linear; }

.webtitle .mo_mockup .mo02:hover img { transition: 5s linear; }

/* ----- re-design ----- */
.redesign .redesign_list { width: 60%; }
.redesign .redesign_list ul { list-style: none; padding: 0; }
.redesign .redesign_list ul li img { width: 100%; }

  @media (max-width:768px) {

    .web-details .container { max-width: 100%; }
    
    /* mockup */
    .web_img { position: relative; display: flex; flex-wrap: wrap; gap: 6rem; align-items: center; width: auto; margin: 0 auto; padding: 3rem; z-index: 9; }
    .webtitle .mockup { position: relative; height: 50vh; border-radius: 0.5rem; background-image: none; background-size: calc(100% - 5rem) auto; background-repeat: no-repeat; -webkit-box-reflect: initial; box-shadow: 0 0 1rem rgba(0,0,0,0.2); }
    .web_img .mockup { flex: 2 100%; margin: 0 0.1rem; }
    .web_img:nth-child(even) .mockup { background-position: right center; }
    .web_img:nth-child(odd) .mockup { background-position: left center; }

    .web_img .mockup .desktop { position: absolute; top: 0; width: 100%; height: 50vh; border-radius: 0.5rem; overflow: hidden; }
    .web_img:nth-child(even) .mockup .desktop { left: 0; }
    .web_img:nth-child(odd) .mockup .desktop { right: 0; }
    .web_img .mockup .desktop img:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; }
    .web_img .mockup .desktop:hover img { transform: translateY(0); top: 0; }
    .web_img:nth-child(odd) .mockup { order: 0; }  

    /* mobile mockup */
    .web_img .mo_mockup { display: none; position: absolute; bottom: 0.5rem; background: url(/assets/img/mockup02.png) no-repeat center center/contain; width: 10rem; height: 20rem; }
    .web_img:nth-child(even) .mo_mockup { left: 0; }
    .web_img:nth-child(odd) .mo_mockup { right: 0; }
    .web_img .mo_mockup .mobile { position: absolute; top: 0.4rem; left: 0.4rem; width: 9.2rem; height: 19.2rem; border-radius: 1.2rem; overflow: hidden; }
    .web_img .mo_mockup .mobile img { position: absolute; top: 0; left: 0; width: 100%; }
    .web_img .mo_mockup .mobile:hover img { transform: translateY(-100%); top: 100%; }

    /* ----- re-design ----- */
    .redesign .redesign_list { width: 100%; }
      
    /* portfolio 01 */
    .webtitle { text-align: left; position: relative; overflow: hidden; z-index: 9; }
  }

  @media (max-width:620px) {
    .web_img { gap: 2rem; padding: 1rem; }
  }

  @media (max-width:400px) {
    .web_img .mockup { height: 40vh; }
    .web_img .mockup .desktop { height: 40vh; }
  }
  


/*--------------------------------------------------------------
# design
--------------------------------------------------------------*/
.portfolio .portfolio-item { margin-bottom: 30px; }
.portfolio #portfolio-flters { padding: 0; margin: 0 auto 15px auto; list-style: none; text-align: center; border-radius: 50px; padding: 2px 15px; }
.portfolio #portfolio-flters li { cursor: pointer; display: inline-block; padding: 8px 16px 10px 16px; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.1); margin: 0 3px 10px 3px; transition: all 0.3s ease-in-out; border-radius: 4px; }
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { background: #64B2D1; }
.portfolio #portfolio-flters li:last-child { margin-right: 0; }
.portfolio .portfolio-wrap { transition: 0.3s; position: relative; overflow: hidden; z-index: 1; background: rgba(0, 0, 0, 0.6); }
.portfolio .portfolio-wrap::before { content: ""; background: rgba(0, 0, 0, 0.6); position: absolute; left: 30px; right: 30px; top: 30px; bottom: 30px; transition: all ease-in-out 0.3s; z-index: 2; opacity: 0; }
.portfolio .portfolio-wrap .portfolio-info {opacity: 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;text-align: center;z-index: 3;transition: all ease-in-out 0.3s;display: flex;flex-direction: column;justify-content: center;align-items: center; }
.portfolio .portfolio-wrap .portfolio-info::before { display: block; content: ""; width: 48px; height: 48px; position: absolute; top: 35px; left: 35px; border-top: 3px solid #fff; border-left: 3px solid #fff; transition: all 0.5s ease 0s; z-index: 9994; }
.portfolio .portfolio-wrap .portfolio-info::after { display: block; content: ""; width: 48px; height: 48px; position: absolute; bottom: 35px; right: 35px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; transition: all 0.5s ease 0s; z-index: 9994; }
.portfolio .portfolio-wrap .portfolio-info h4 { font-size: 20px; color: #fff; font-weight: 600; }
.portfolio .portfolio-wrap .portfolio-info p { color: #ffffff; font-size: 14px; /*text-transform: uppercase;*/ padding: 0; margin: 0; }
.portfolio .portfolio-wrap .portfolio-links { text-align: center; z-index: 4; }
.portfolio .portfolio-wrap .portfolio-links a { color: #fff; margin: 0 2px; font-size: 28px; display: inline-block; transition: 0.3s; }
.portfolio .portfolio-wrap .portfolio-links a:hover { color: #64B2D1; }
.portfolio .portfolio-wrap:hover::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; }
.portfolio .portfolio-wrap:hover .portfolio-info { opacity: 1; }
.portfolio .portfolio-wrap:hover .portfolio-info::before { top: 15px; left: 15px; }
.portfolio .portfolio-wrap:hover .portfolio-info::after { bottom: 15px; right: 15px; }

/*--------------------------------------------------------------
# design Details
--------------------------------------------------------------*/
.portfolio-details { padding-top: 60px; background: rgba(0, 0, 0, 0.8); position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; }
.portfolio-details .container { text-align: center; padding-top: 20px; padding-bottom: 40px; }
.portfolio-details .container img { width: 100%; }
.portfolio-details .portfolio-title { font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.portfolio-details .portfolio-info { padding-top: 45px; }
.portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 400; margin-bottom: 20px; }
.portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; }
.portfolio-details .portfolio-info ul li + li { margin-top: 10px; }
.portfolio-details .portfolio-info p { font-size: 15px; padding: 15px 0 0 0; }
@media (max-width: 992px) {
  .portfolio-details .portfolio-info { padding-top: 20px; }
}
.portfolio-details .swiper-pagination { margin-top: 30px; position: relative; }
.portfolio-details .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; background-color: rgba(255, 255, 255, 0.3); }
.portfolio-details .swiper-pagination .swiper-pagination-bullet-active { background-color: #64B2D1; }

/* ----- detailed page ----- */
.detailedpage ul { list-style: none; padding: 0; }

/* ----- banner ----- */
.portfolio-details .banner_list ul { list-style: none; padding: 0; }
.portfolio-details .banner_list ul li { margin-bottom: 20px; }
.portfolio-details .banner_list ul li:last-child { margin-bottom: 0; }

.portfolio-details .mpop_banner_list ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
.portfolio-details .mpop_banner_list ul li { flex: 0 0 auto; width: 32%; margin: 0 20px 20px 0; }
.portfolio-details .mpop_banner_list ul li:last-child { margin-bottom: 0; }
.portfolio-details .mpop_banner_list ul .mimg { width: 100%; }