/* 
 * GitHub Repository Phishing Alert Appeal & Project Verification
 이 페이지는 깃허브에서 발생한 피싱 경고 오탐지(False Positive)를 해명하고, 해당 코드가 순수한 학습 및 포트폴리오용임을 증명하기 위해 작성되었습니다.
  This CSS is part of a student project. 
  Any resemblance to real-world commercial sites is purely for design practice.
  
*/
@font-face{
  font-family: 'DejaVuSansMono';
  src:url('../fonts/DejaVuSansMono.ttf')
}
@font-face{
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
}
/* 스크롤 */
html {scroll-behavior: smooth;} /* 스크롤 애니메이션 효과 */
/* Firefox */
html {scrollbar-width: 10px; scrollbar-color: #eee #333;}
/* Opera */
html::-o-scrollbar {width: 10px;}
html::-o-scrollbar-thumb {background-color: #eee;border-radius: 5px;}
/* Chrome, Safari, Edge 등 웹킷 기반 브라우저 */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(255, 255, 255, 1);}
::-webkit-scrollbar-thumb {background-color: #eee; border-radius: 5px;}
body {background-color: #fff;}

/* -------------------------------------------------------------------------------------------------- 1. first page */

body > * {min-width: 1680px;}
header {
  position: fixed; width: 100vw; height: 80px;
  border-bottom: 1px solid #222; background:#fff;
  z-index: 900;
}
header #gnb {
  display: flex; justify-content: end; align-items: end; 
}
header #gnb li {
  position: relative; bottom: -19px; right: 80px;
  margin-left: -50px;
  width: 230px; height: 60px;
}

header #gnb li::before, header #gnb li::after {
  width: 65px; height: 100%;
  content: ''; 
  position: absolute; top: 0;
}
header #gnb li::before {left: 0; background-image: url(../images/gnb.svg);}
header #gnb li::after {right: 0; background-image: url(../images/gnb.svg); transform: scaleX(-1);}
header #gnb li a {
  display: block; width: 100px; height: 100%; margin: 0 65px;
  text-align: center; line-height: 60px;
  font-family: 'DejaVuSansMono';
  color: #aaa; border-top: 1px solid #aaa;
  background: #fff;
}
/* gnb 보이는 순서 설정 */
header #gnb li:nth-child(1) {z-index: 3;}
header #gnb li:nth-child(2) {z-index: 2;}
header #gnb li:nth-child(3) {z-index: 1;}
/* gnb 탭이 active 됐을 때 */
header #gnb li.active {bottom: -20px; z-index: 999;}
header #gnb li.active::before {left: 0; background-image: url(../images/gnb_active.svg);}
header #gnb li.active::after {right: 0; background-image: url(../images/gnb_active.svg); transform: scaleX(-1);}
header #gnb li.active a {border-top: 1px solid #222; color: #222;}
/* 호버시에 GNB 글자에 컬러변경 */
header #gnb li:hover a {color: #222;}
/* ----------------------------------------------------------------------------------------------------- 2. intro& outro  */
.container, 
.project {
  width: 100vw; height: 90vh;
  border-bottom: 1px solid #eee;
}
.in_out {}
.in_out .intro_outro {text-align: center; padding: 35vh;}
.in_out .intro_outro h1 {font-size: 7.50rem; font-family: 'Paperlogy'; font-weight: 700; margin-bottom: 40px; color: #333;}
.in_out .intro_outro .me {display: flex; justify-content: center; align-items: center; gap: 8px;}
.in_out .intro_outro .me p {font-family: 'DejaVuSansMono'; font-size: 1.13rem; color: #555;}
.in_out .intro_outro .me span {width: 70px; height: 1px; background: #ddd;}
/* --------------------------------------------------------------------------------------------------- 3. profile */
#profile {
  display: flex;  justify-content: space-between;
  width: 1440px; height: 100%;  margin:  0 auto; 
  padding-top: 120px;
}
#profile .introduction {
  display: flex; flex-flow: column nowrap; justify-content: space-between;
}
#profile .introduction .text {}
#profile .introduction .text > * {margin-bottom: 40px;}
#profile .introduction .text p {font-family: 'DejaVuSansMono'; font-size: 1.13rem; color: #555;}
#profile .introduction .text h1 {font-size: 1.50rem; color: #191919; line-height: 1.7; }
#profile .introduction .text h1+p {font-size: 0.88rem; color: #aaa; line-height: 1.7;}
#profile .introduction .photo {
  width: 300px; height: 300px;
}
#profile .introduction .photo img {width: 100%;}

#profile .my_info {
  display: grid;
    grid-template-areas: 
    'information education' 
    'career experience'
    'certificate certificate'
    'skills skills';
  grid-template-columns: 0.5fr 1fr;
  grid-gap: 20px 40px;
}
#profile .my_info .info {}
#profile .my_info .info > * {font-size: 0.88rem; line-height: 2;}
#profile .my_info .info h1 {font-family: 'DejaVuSansMono'; color: #aaa;}
#profile .my_info .info p span {font-size: 0.75rem;}
#profile .my_info .info p {color: #555;}
#profile .my_info .info a {color: #555;}
#profile .my_info .info .github span {color: #555; padding-bottom: 2px; border-bottom: 1px solid #aaa;}
/* information */
#profile .my_info .information {grid-area: information;}
#profile .my_info .information h1 {}
#profile .my_info .information p {}
#profile .my_info .information a {}
/* career */
#profile .my_info .career {grid-area: career;}
#profile .my_info .career h1 {}
#profile .my_info .career p {}
/* certificate */
#profile .my_info .certificate {grid-area: certificate;}
#profile .my_info .certificate h1 {}
#profile .my_info .certificate p {}
/* experience */
#profile .my_info .education {grid-area: education;}
#profile .my_info .education h1 {}
#profile .my_info .education p {}
/* experience */
#profile .my_info .experience {grid-area: experience;}
#profile .my_info .experience h1 {}
#profile .my_info .experience p {}
/* skills */
#profile .my_info .my_skills {grid-area: skills;  width: 830px;}
#profile .my_info .my_skills h1 {}
#profile .my_info .my_skills .skill_img {display: flex; flex-flow: row wrap; gap: 10px; padding: 10px 0 80px;}
#profile .my_info .my_skills .skill_img img {width: 120px; border-radius: 10px;}

/* ------------------------------------------ 프로필 & 그래픽디자인 & 영상디자인 페이지 공통 */
.container {}
.container .title { text-align: center;  margin: 80px 0 40px;}
.container .title > p {font-family: 'DejaVuSansMono';font-size: 0.88rem; color: #aaa; margin-bottom: 10px;}
.container .view {display: flex; align-items: center; justify-content: center;}
.container .view p {font-size: 0.88rem; color: #555;}
.container .view img {width: 32px;}
/* --------------------------------------------------------------------------------------------------------- 3.project index */
.project_wrap {}
.project_wrap .view {}
.project_wrap .view p {}
.project_wrap .view img {}
.project_wrap .swiper {}
.project_wrap .swiper .swiper-wrapper {}
.project_wrap .swiper .swiper-wrapper .swiper-slide { }
.project_wrap .swiper .swiper-wrapper .swiper-slide a {}
.project_wrap .swiper .swiper-wrapper .swiper-slide a h1 {}
.project_wrap .swiper .swiper-wrapper .swiper-slide a p {}
.project_wrap .swiper .swiper-wrapper .swiper-slide a p span {}
.project_wrap .project_swiper {margin: 0 120px; border-radius: 20px;}
.project_wrap .project_swiper .swiper-wrapper  {}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide {height: 600px; text-align: center;}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a {
  display: block; width: 100%; height: 100%; 
  background-size: cover; background-repeat: no-repeat;
}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide {}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a {padding-top: 60px; border-radius: 20px; transition: background-image 0.5s;}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a h1 {font-family: 'Paperlogy'; font-weight: 500; font-size: 1.25rem; letter-spacing: 0; color: #fff; margin-bottom: 10px;}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a p,
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a p span {font-size: 0.75rem; font-weight: 300; color: #fff;}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a p {}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a p span {}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide:nth-child(1) a p span::before,
.project_wrap .project_swiper .swiper-wrapper .swiper-slide:nth-child(2) a p span::before,
.project_wrap .project_swiper .swiper-wrapper .swiper-slide:nth-child(3) a p span::before {display: none;}
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a p span::before,
.project_wrap .project_swiper .swiper-wrapper .swiper-slide a p span::after {
  content: ''; display: inline-block; 
  width: 1px; height: 8px; margin: 0 8px;
  
  background: #fff;
}
/* 마우스 호버시에 이미지 변경 */
.project_wrap .project_swiper .swiper-wrapper .slide0 a {background-image: url(../images/project_000.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide1 a {background-image: url(../images/project_001.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide2 a {background-image: url(../images/project_002.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide3 a {background-image: url(../images/project_003.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide4 a {background-image: url(../images/project_004.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide5 a {background-image: url(../images/project_005.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide0:hover a {background-image: url(../images/project_hover_000.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide1:hover a {background-image: url(../images/project_hover_001.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide2:hover a {background-image: url(../images/project_hover_002.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide3:hover a {background-image: url(../images/project_hover_003.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide4:hover a {background-image: url(../images/project_hover_004.jpg);}
.project_wrap .project_swiper .swiper-wrapper .slide5:hover a {background-image: url(../images/project_hover_005.jpg);}
/* 스와이퍼 스크롤 */
.project_wrap .scroll {position: relative; width: 1300px; height: 2px; left: 50%; transform: translateX(-50%); bottom: -40px; background: #ddd;}
.project_wrap .scroll .swiper-scrollbar-drag {background:#aaa;}


/* -------------------------------------------------------------------------------------------------------------------- 공통 프로젝트 디자인*/
.project {display: flex; align-items: end; justify-content: end ; gap: 100px;}
.project .project_intro {width: 500px; height: 100%; padding-top: 120px;}
.project .project_intro .title {margin-bottom: 40px;}
.project .project_intro .title > * {margin-bottom: 10px;}
.project .project_intro .title .type {font-family: 'DejaVuSansMono'; font-size: 0.88rem; color: #aaa; margin-bottom: 40px;}
.project .project_intro .title .main_title {display: flex; gap: 8px;}
.project .project_intro .title .main_title .brand {font-family: 'Paperlogy'; font-size: 2rem; font-weight: 600;}
.project .project_intro .title .main_title .desktop {width: 20px;}
.project .project_intro .title .main_title .movile {width: 20px;}
.project .project_intro .title .ko_title {color: #191919;}
.project .project_intro .title .en_title {font-size: 0.63rem; color: #aaa;}
.project .project_intro .title .responsive {font-size: 0.63rem; color: #aaa; background: #eee; padding: 4px 6px; width: max-content; border-radius: 4px;}
.project .project_intro dl {}
.project .project_intro dl dt,
.project .project_intro .tools h1 {font-family: 'DejaVuSansMono'; font-size: 0.88rem; color: #aaa; margin-bottom: 8px;}
.project .project_intro dl dd {font-size: 0.88rem; line-height: 1.7; color: #555; margin-bottom: 30px; }
.project .project_intro .tools {}
.project .project_intro .tools h1 {margin-bottom: 10px;}
.project .project_intro .tools .tools_badge {display: flex; flex-flow: row wrap; gap: 8px;}
.project .project_intro .tools .tools_badge img {width: 110px; border-radius: 8px;}
.project .project_thumbnail {position: relative; width: 1200px; height: 700px; background-size: cover; border-radius: 80px 0 0 0 ;}
.project .project_thumbnail .link {
  position: absolute; left: 80px; top:80px;
  display: flex; flex-flow: column nowrap; gap: 10px;
}
.project .project_thumbnail .link p {
  font-size: 0.75rem; text-align: center;
  letter-spacing: 0;
  color: #fff;
}
.project .project_thumbnail .link a  {
  display: flex; flex-flow: column nowrap; 
  align-items: center; justify-content: center;
  width:100px; height: 60px; 
  border-radius: 10px; 
  background: rgba(255,255,255,0.8);
}
.project .project_thumbnail .link a span { font-size: 0.75rem; color: #555; }
/* 링크버튼에 호버했을 때 */
.project .project_thumbnail .link a:hover {background: rgba(85,85,85,0.8); }
.project .project_thumbnail .link a:hover span {color: #fff;}
/* project0 - swimlove */
.project0 .project_intro .title {}
.project0 .project_intro .title .type {}
.project0 .project_intro .titl  .main_title {}
.project0 .project_intro .title .main_title .brand {}
.project0 .project_intro .title .main_title .desktop {}
.project0 .project_intro .title .main_title .movile {}
.project0 .project_intro .title .ko_title {}
.project0 .project_intro .title .en_title {}
.project0 .project_intro .title .en_title {}
.project0 .project_intro .title .responsive {}
.project0 .project_intro dl {}
.project0 .project_intro dl dt {}
.project0 .project_intro dl dd {}
.project0 .project_intro .tools {}
.project0 .project_intro .tools h1 {}
.project0 .project_intro .tools .tools_badge img {}
.project0 .project_thumbnail {background-image: url(../images/thumbnail_000.jpg);}
.project0 .project_thumbnail .link {}
.project0 .project_thumbnail .link a {}
/* project1 - toun28 */
.project1 .project_intro .title {}
.project1 .project_intro .title .type {}
.project1 .project_intro .titl  .main_title {}
.project1 .project_intro .title .main_title .brand {}
.project1 .project_intro .title .main_title .desktop {}
.project1 .project_intro .title .main_title .movile {}
.project1 .project_intro .title .ko_title {}
.project1 .project_intro .title .en_title {}
.project1 .project_intro .title .en_title {}
.project1 .project_intro .title .responsive {}
.project1 .project_intro dl {}
.project1 .project_intro dl dt {}
.project1 .project_intro dl dd {}
.project1 .project_intro .tools {}
.project1 .project_intro .tools h1 {}
.project1 .project_intro .tools .tools_badge img {}
.project1 .project_thumbnail {background-image: url(../images/thumbnail_001.jpg);}
.project1 .project_thumbnail .link {}
.project1 .project_thumbnail .link a {}
/* project2 - cubee */
.project2 .project_intro .title {}
.project2 .project_intro .title .type {}
.project2 .project_intro .title .main_title {}
.project2 .project_intro .title .main_title .brand {}
.project2 .project_intro .title .main_title .desktop {}
.project2 .project_intro .title .main_title .movile {}
.project2 .project_intro .title .ko_title {}
.project2 .project_intro .title .en_title {}
.project2 .project_intro .title .en_title {}
.project2 .project_intro .title .responsive {}
.project2 .project_intro dl {}
.project2 .project_intro dl dt {}
.project2 .project_intro dl dd {}
.project2 .project_intro .tools {}
.project2 .project_intro .tools h1 {}
.project2 .project_intro .tools .tools_badge img {}
.project2 .project_thumbnail {background-image: url(../images/thumbnail_002.jpg);}
.project2 .project_thumbnail .link {}
.project2 .project_thumbnail .link a {}
/* graphic design */
.project3 {position: relative;}
.project3 .title {}
.project3 .title p {}
.project3 .title img {}
.project3 .swiper {}
.project3 .swiper .swiper-wrapper {}
.project3 .swiper .swiper-wrapper .swiper-slide {}
.project3 .swiper .swiper-wrapper .swiper-slide .thumbnail {}
.project3 .swiper .swiper-wrapper .swiper-slide .thumbnail img {width: 100%; filter:grayscale(100%)}
.project3 .graphic_siwper {margin: 0 120px; border-radius: 20px;}
.project3 .graphic_siwper .swiper-wrapper {}
.project3 .graphic_siwper .swiper-wrapper .swiper-slide {width: 100%; height: 600px; overflow: hidden; border-radius: 20px;}
.project3 .graphic_siwper .swiper-wrapper .slide1 {}
.project3 .graphic_siwper .swiper-wrapper .slide2 {}
.project3 .graphic_siwper .swiper-wrapper .slide3 {}
.project3 .graphic_siwper .swiper-wrapper .slide4 {}
.project3 .graphic_siwper .swiper-wrapper .slide4 .thumbnail img {width: auto; height: 100%; transform: translateX(-20%);}
.project3 .graphic_siwper .swiper-wrapper .slide5 {border: 1px solid #eee;}
.project3 .graphic_siwper .swiper-wrapper .slide6 .thumbnail img {transform: translateY(-42%);}
.project3 .graphic_siwper .swiper-wrapper .slide6 {}
.project3 .graphic_siwper .swiper-wrapper .slide7 {}
.project3 .graphic_siwper .swiper-wrapper .slide7 .thumbnail img {width: auto; height: 100%; transform: translateX(-20%);}
/* 호버 시에 이미지 변경 */
.project3 .swiper .swiper-wrapper .swiper-slide .thumbnail:hover img {filter:grayscale(0%); transition: filter 0.5s;}
/* 스와이퍼 스크롤 */
.project3 .scroll {position: relative; width: 1300px; height: 2px; left: 50%; transform: translateX(-50%); bottom: -40px; background: #ddd;}
.project3 .scroll .project_wrap .scroll .swiper-scrollbar-drag {background:#aaa;}
/* project3 Graphic Design */
.project3 .graphic_popup_bg {
  width: 100vw;  height: 100vh; background: rgba(0,0,0,0.8);
  position: fixed; top:0; left: 0; z-index: 50;
  display: none;
  }
.project3 .graphic_popup_bg .graphic_contents {height: 100%; display: flex; align-items: center; justify-content: center; gap: 40px;}
.project3 .graphic_popup_bg .graphic_contents .popup_img {width: 400px; height: 700px; overflow: auto; }
.project3 .graphic_popup_bg .graphic_contents .popup_img img {width: 100%; background-size: cover; background-repeat: no-repeat;}
.project3 .graphic_popup_bg .graphic_contents .popup_info {}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title {margin-bottom: 10px;}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title > *, 
.project3 .graphic_popup_bg .graphic_contents .popup_info .plan {color: #fff;}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title h1 {
  font-family: 'DejaVuSansMono'; font-size: 0.88rem; color: #aaa; margin-bottom: 10px;
}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title .info {}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title span {
  display: inline-block; background: #555; padding: 4px ; border-radius: 4px;
  font-size: 0.75rem; letter-spacing: 0; margin-right: 4px;
}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title .period {}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title .photoshop {}
.project3 .graphic_popup_bg .graphic_contents .popup_info .popup_title .illustration {}
.project3 .graphic_popup_bg .graphic_contents .popup_info .plan {width: 300px; font-size: 0.88rem; line-height: 1.7;}

/* UXUI app 1 */
.project4 {}
.project4 .project_intro {}
.project4 .project_intro .title {}
.project4 .project_intro .title {}
.project4 .project_intro .title .type {}
.project4 .project_intro .title  .main_title {}
.project4 .project_intro .title  .main_title .brand {}
.project4 .project_intro .title  .main_title .movile {}
.project4 .project_intro .title .ko_title {}
.project4 .project_intro .title .en_title {}
.project4 .project_intro .title .responsive {}
.project4 .project_intro dl {}
.project4 .project_intro dl dt {}
.project4 .project_intro .tools {}
.project4 .project_intro .tools h1 {}
.project4 .project_intro .tools .tools_badge {}
.project4 .project_intro .tools .tools_badge img {}
.project4 .project_thumbnail {background-image: url(../images/thumbnail_004.jpg);}
.project4 .project_thumbnail .link {}
.project4 .project_thumbnail .link p {color: #888;}
.project4 .project_thumbnail .link a {}
/* UXUI app 2 */
.project5 {}
.project5 .project_intro {}
.project5 .project_intro .title {}
.project5 .project_intro .title .type {}
.project5 .project_intro .title .main_title {}
.project5 .project_intro .title .main_title .brand {}
.project5 .project_intro .title .main_title .movile {}
.project5 .project_intro .title .ko_title {}
.project5 .project_intro .title .en_title {}
.project5 .project_intro .title .responsive {}
.project5 .project_intro dl {}
.project5 .project_intro dl dt {}
.project5 .project_intro dl dd {}
.project5 .project_intro .tools {}
.project5 .project_intro .tools h1 {}
.project5 .project_intro .tools .tools_badge {}
.project5 .project_intro .tools .tools_badge img {}
.project5 .project_thumbnail {background-image: url(../images/thumbnail_005.jpg);}
.project5 .project_thumbnail .link {}
.project5 .project_thumbnail .link p {color: #888;}
.project5 .project_thumbnail .link a {}
/* UXUI app 3 */
.project6 {}
.project6 .project_intro {}
.project6 .project_intro .title {}
.project6 .project_intro .title .type {}
.project6 .project_intro .title .main_title {}
.project6 .project_intro .title .main_title .brand {}
.project6 .project_intro .title .main_title .movile {}
.project6 .project_intro .ko_title {}
.project6 .project_intro .en_title {}
.project6 .project_intro .responsive {}
.project6 .project_intro dl {}
.project6 .project_intro dl dt {}
.project6 .project_intro dl dd {}
.project6 .project_intro .tools {}
.project6 .project_intro .tools h1 {}
.project6 .project_intro .tools_badge {}
.project6 .project_intro .tools_badge img {}
.project6 .project_thumbnail {background-image: url(../images/thumbnail_006.jpg);}
.project6 .project_thumbnail .link {}
.project6 .project_thumbnail .link a {}
/* video */
.project7 {position: relative;}
.project7 .title {margin: 0; padding: 80px 0 40px;}
.project7 .title > p {font-family: 'DejaVuSansMono'; font-size: 0.88rem; color: #222;}
.project7 .title .veiw {}
.project7 .title .veiw p {}
.project7 .title .veiw img {}
.project7 .swiper {}
.project7 .swiper .swiper-wrapper {}
.project7 .swiper .swiper-wrapper .swiper-slide {}
.project7 .swiper .swiper-wrapper .swiper-slide a {}
.project7 .swiper .swiper-wrapper .swiper-slide .thumbnail {margin-bottom: 20px;}
.project7 .swiper .swiper-wrapper .swiper-slide .thumbnail img {width: 100%; filter:grayscale(100%); border-radius: 20px;}
.project7 .swiper .swiper-wrapper .swiper-slide .txt {}
.project7 .swiper .swiper-wrapper .swiper-slide .txt > * {margin-bottom: 10px; }
.project7 .swiper .swiper-wrapper .swiper-slide .txt h1 {font-family: 'DejaVuSansMono'; font-size: 0.88rem; color: #222; }
.project7 .swiper .swiper-wrapper .swiper-slide .txt .tools {}
.project7 .swiper .swiper-wrapper .swiper-slide .txt .tools span {font-size: 0.63rem; color: #aaa; background: #eee; padding: 4px 6px; width: max-content; border-radius: 4px;}
.project7 .swiper .swiper-wrapper .swiper-slide .txt .tools .period {}
.project7 .swiper .swiper-wrapper .swiper-slide .txt .tools .prize {}
.project7 .swiper .swiper-wrapper .swiper-slide .txt .tools .premier {}
.project7 .swiper .swiper-wrapper .swiper-slide .txt .tools .effect {margin: 0;}
.project7 .swiper .swiper-wrapper .swiper-slide .plan {font-size: 0.88rem; line-height: 1.7; color: #aaa;}
.project7 .video_swiper {margin: 0 120px; border-radius: 20px;}
.project7 .video_swiper .swiper-wrapper {}
.project7 .video_swiper .swiper-wrapper .swiper-slide {width: 100%; border-radius: 20px;}
.project7 .video_swiper .swiper-wrapper .swiper-slide a {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .thumbnail {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .thumbnail img {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .thumbnail:hover img {filter:grayscale(0%); transition: filter 0.5s;}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt h1 {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt .tools {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt .tools span {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt .tools .period {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt .tools .prize {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt .tools .premier {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .txt .tools .effect {}
.project7 .video_swiper .swiper-wrapper .swiper-slide .plan {}
.project7 .video_swiper .swiper-wrapper .slide1 {}
.project7 .video_swiper .swiper-wrapper .slide2 {}
.project7 .video_swiper .swiper-wrapper .slide3 {}
.project7 .video_swiper .swiper-wrapper .slide4 {}
/* 스와이퍼 스크롤 */
.project7 .scroll {position: relative; width: 1300px; height: 2px; left: 50%; transform: translateX(-50%); bottom: -40px; background: #ddd;}
.project7 .scroll .project_wrap .scroll .swiper-scrollbar-drag {background:#aaa;}
/* 팝업되는 이미지 */
.project7 .video_popup_bg {
  width: 100vw;  height: 100vh; background: rgba(0,0,0,0.8);
  position: fixed; top:0; left: 0; z-index: 50;
  display: none;
}
.project7 .video_popup_bg .video_contents {}
.project7 .video_popup_bg .video_contents .popup_video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.project7 .video_popup_bg .video_contents .popup_video iframe {width:960px; height:540px;}
.project7 .video_popup_bg .youtube_btn {
  display: block; position: absolute; 
  background: rgba(255,255,255,0.4); color: #fff; 
  top: 82%; left: 50%; transform: translateX(-50%); 
  padding: 20px; border-radius: 10px;
  font-family: 'Paperlogy'; font-size: 0.88rem; letter-spacing: 0;
} 
.project7 .video_popup_bg .youtube_btn:hover {background: #555;}