@charset "UTF-8";

@import url('reset.css');
@import url('fonts.css');
::-webkit-scrollbar {
    width: 3px;  /* 스크롤바의 너비 */
}

::-webkit-scrollbar-thumb {
    height: 20%; /* 스크롤바의 길이 */
    background: #d9d9d9; /* 스크롤바의 색상 */    
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}

.centerbox {width: 1700px; margin: 0 auto; }
body {overflow-x: hidden; background: #161821;}
header {width: 100%; height: 100vh; position: relative; }

header h1 {width: 265px; height: 110px; margin: 0 auto; margin-top: 80px; color: #fcc8ef; font-family: 'Cambria'; font-weight: normal; font-size: 30px; text-align: center;}
header h1 figure {width: 80px; height: 50px; margin: 0 auto; position: relative;}
header h1 figure .eyes {position: absolute; width: 15px; height: 8px; left: 50%; top: 27px; transform: translate(-50%,-50%); border-radius: 50%;}
header h1 figure .eyes:before,
header h1 figure .eyes:after {content: ""; position: absolute; width: 2px; height: 100%; background: #fcc8ef; top: 50%; transform: translateY(-50%); animation: cat_eye 4s infinite;}
header h1 figure .eyes:before {left: 0;}
header h1 figure .eyes:after {right: 0;}

/* header h1 figure svg rect {fill:#fcc8ef; animation: cat_eye 2s infinite; position: absolute; top: 60px;} */
@keyframes cat_eye {
    0% {height: 8px;}
    20% {height: 8px;}
    22% {height: 0px;}
    24% {height: 8px;}
    30% {height: 8px;}
    32% {height: 0px;}
    34% {height: 8px;}

    72% {height: 8px;}
    76% {height: 0px;}
    80% {height: 8px;}
    100% {height: 8px;}
}
header h1 figure svg path {stroke:#fcc8ef;}
header h1 strong {font-weight: normal;}
header h1 p {font-size: 14px;}


header .main_text {font-family: 'SBAggroB'; color: #fcc8ef; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
header .main_text em {font-size: 14px; font-weight: normal; font-family: 'Cambria'; font-style: normal; position: absolute; left: -15vw; top: 60px; }
header .main_text .text {font-size: 200px; display: flex;}
header .main_text .text span {position: relative;overflow: hidden;}
header .main_text .text span i {font-style: normal; transform-origin: bottom left; animation: mainText 5s infinite; display: block;transform: rotate(90deg);}
@keyframes mainText {
    0% {transform: rotate(90deg);}
    10% {transform: rotate(0deg);}
    90% {transform: rotate(0deg);}
    100% {transform: rotate(-90deg);}
}

header .main_text .text span:nth-child(1) i {animation-delay: 0.1s;}
header .main_text .text span:nth-child(2) i {animation-delay: 0.2s;}
header .main_text .text span:nth-child(3) i {animation-delay: 0.3s;}
header .main_text .text span:nth-child(4) i {animation-delay: 0.4s;}
header .main_text .text span:nth-child(5) i {animation-delay: 0.5s;}
header .main_text .text span:nth-child(6) i {animation-delay: 0.6s;}
header .main_text .text span:nth-child(7) i {animation-delay: 0.7s;}
header .main_text .text span:nth-child(8) i {animation-delay: 0.8s;}
header .main_text .text span:nth-child(9) i {animation-delay: 0.9s;}



header .main_text sub {font-size: 14px; font-weight: normal; font-family: 'Cambria'; font-style: normal; position: absolute; right: 20px; bottom: 20px;;}


#section1 {width: 1700px; margin: 0 70px; box-sizing: border-box; background: #f2f2f2; border-radius: 30px; padding:15px 100px; text-align: center; position: relative; margin: 0 auto 150px auto;}
#section1 .taekwondo {position: absolute; left: 60px; top: -80px;}
#section1 .models {position: absolute; right: 60px; top: -80px; }


#section2 {width: 1700px; margin: 0 70px; box-sizing: border-box; background: #f2f2f2; border-radius: 30px; padding:70px 100px 110px 100px; text-align: center; position: relative; margin: 0 auto 150px auto; }
#section2 h2 {width: 347px;height: 173px;background: url('../images/bg_title.png') no-repeat; position: absolute; left: 0; top: 50px; font-size: 30px; color: #fcc8ef; line-height: 173px; padding-left: 130px; display: flex; align-items: center; text-align: left;}
#section2 img.emoticon {position: absolute; width: 110px; right: 40px; top: -60px;}
#section2 h2 img {position: absolute; width: 110px; position: absolute; left: 20px; bottom: 0;}

#section2 .content_box { display: flex; gap: 100px; margin-top: 280px;}


#section2 .emoticon_box {width: 450px; }
#section2 .emoticon_box ul {display: flex; flex-wrap: wrap; margin-bottom: 50px;}
#section2 .emoticon_box li {width: 30%;}
#section2 .emoticon_box li img {width: 100%;}
#section2 .emoticon_box p.ex {text-align: left; font-family: 'Pretendard-Medium'; font-size: 20px;position: relative; line-height: 1.4;width: 420px;color: #585858;}
#section2 .emoticon_box p span {color: green;font-family: 'Pretendard-SemiBold';} 
/* #section2 .emoticon_box .ex:before {content: attr(data-text); position: absolute; top: 0; left: 0;;}
#section2 .emoticon_box .ex:after {content: attr(data-text); position: absolute; top: 0; left: 0;;} */

#section2 .info {flex-grow: 1; gap: 400px; }
#section2 .info ul {display: flex; flex-wrap: wrap;}
#section2 .info > ul > li:first-child {width: 100%; }
#section2 .info > ul > li:first-child p {font-size: 22px; margin: 5px 0;}



#section2 .info > ul > li {width: 50%; display: flex; gap: 20px; align-items: flex-start; margin-bottom: 90px;}
#section2 .info > ul > li h3 {background: #161821; color: 20px; color: #fcc8ef; padding: 6px 22px; border-radius: 8px; width: 140px;font-family:'Pretendard--SemiBold';font-size: 22px;}
#section2 .info > ul > li .text_box div {text-align: left; margin-bottom: 1em;}
#section2 .info > ul > li p {font-size: 18px; margin: 0.5em 0;font-family:'Pretendard-Medium';color: #505050;}
#section2 .info > ul > li p.date {font-size: 14px;}
#section2 .info > ul > li.skill {flex-direction: column;}
#section2 .info > ul > li.skill ul.ski {display: flex; gap: 20px;}
#section2 .info > ul > li.skill ul.ski li {width: 60px; height: 60px; border-radius: 50%; border: 1px solid #999; display: flex; justify-content: center; align-items: center; font-family:'Pretendard-Medium'}


#section3 {width: 1700px; margin: 0 70px; box-sizing: border-box; background: #f2f2f2; border-radius: 30px; padding:15px 100px 200px 100px; text-align: center; position: relative; margin: 0 auto }
#section3 h2 {width: 347px;height: 173px;background: url('../images/bg_title.png') no-repeat; position: absolute; left: 0; top: 50px; font-size: 30px; color: #fcc8ef; line-height: 40px; padding-left: 130px; display: flex; align-items: center; text-align: left;}
#section3 img.emoticon {position: absolute; width: 110px; right: 40px; top: -60px;}
#section3 h2 img {position: absolute; width: 110px; position: absolute; left: 20px; bottom: 0;}

#section3 .content_box {width: 1700px;  display: flex; gap: 80px; margin-top: 255px;}
#section3 .content_box .site_info {width: 350px; text-align: left;}
#section3 .content_box .site_info span.title {color: #b0b0b0; font-weight: normal; font-size: 25px;;}
#section3 .content_box .site_info h3 {font-size: 40px; margin-top: 10px;color: #3c5a6d;font-family: 'Pretendard-Bold';}
#section3 .content_box .site_info h3 span {font-size: 16px; font-weight: lighter; margin-left: 10px;font-family: 'Pretendard-Medium' ;}
#section3 .content_box .site_info .h2_p {font-weight: normal;font-family: 'Pretendard-SemiBold';color: #555555;}


#section3 .content_box .site_info h3.inn {color: #00b761;font-family: 'Pretendard-Bold';font-size: 40px;}
#section3 .content_box .site_info h3.soy {color: #b71d30;font-family: 'SBAggroB';font-size: 30px;}
#section3 .content_box .site_info h3.GT {color: #555555;font-family: 'Pretendard-ExtraBold';font-size: 35px;}

#section3 .content_box .site_info .about_box {margin-top: 5px;}
#section3 .content_box .site_info .about_box h4 {font-size: 30px; color: #6d6d6d;margin-top: 60px;font-family:'Pretendard-Bold' ;}
#section3 .content_box .site_info .about_box p {font-size: 19px;color: #a1a1a1; line-height: 2;font-family: 'Pretendard-Bold';margin-top: 30px;}

#section3 .content_box .site_info .colors {margin-top: 40px;}
#section3 .content_box .site_info .colors h4 {font-size: 30px; color: #6d6d6d;font-family:'Pretendard-Bold' ;}
#section3 .content_box .site_info .colors ul {display: flex; gap: 5px;}
#section3 .content_box .site_info .colors ul li {width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,0.1);}
#section3 .content_box .site_info .colors ul li.first {background: #3c5a6d;margin-top: 10px;}
#section3 .content_box .site_info .colors ul li.second {background: #fff;margin-top: 10px;}


#section3 .content_box .site_info .colors.inis ul li.first {background: #36bf6f;}
#section3 .content_box .site_info .colors.inis ul li.second {background: #fff;}



#section3 .content_box .site_info .colors.cafe ul li.first {background: #b51e30;}
#section3 .content_box .site_info .colors.cafe ul li.second {background: #627885;}
#section3 .content_box .site_info .colors.cafe ul li.Third {background: #eecebf;margin-top: 10px;}
#section3 .content_box .site_info .colors.cafe ul li.Fourth {background: #ffffff;margin-top: 10px;}

#section3 .content_box .site_info .period {margin-top: 50px;}
#section3 .content_box .site_info .period h4 {font-size: 25px; color: #6d6d6d;font-family:'Pretendard-Bold' ;}

#section3 .content_box .site_info .period ul li {font-size: 20px; color: #333; display: flex; gap: 20px;}
#section3 .content_box .site_info .period ul li span.tit {width: 80px;margin-top: 15px;color: #9b9b9b;font-family:'Pretendard-Bold' ;}
#section3 .content_box .site_info .period ul li span.data {color: #222;margin-top: 15px;color: #8d8d8d;font-family:'Pretendard-Medium'}





#section3 .content_box .site_thumb {flex-grow: 1; display: flex; gap: 50px; align-items: flex-end;}

#section3 .content_box .site_thumb .pc {width: 750px; height: 500px;  border-radius: 40px; box-shadow: 10px 10px 30px rgba(0,0,0,0.1); position: relative; overflow: hidden;}
#section3 .content_box .site_thumb .pc img {width: 100%; position: absolute; left: 0; top: 0; transition: 5s;}
#section3 .content_box .site_thumb .mobile {width: 200px; height: 380px; border-radius: 20px; box-shadow: 10px 10px 30px rgba(0,0,0,0.1); position: relative; overflow: hidden; }
#section3 .content_box .site_thumb .mobile img  {width: 100%; position: absolute; left: 0; top: 0; transition: 5s;}

#section3 .content_box .site_thumb .screen a:before {content: "CLICK"; position: absolute; z-index: 2; background: #000; color: #fff; font-weight: normal; padding: 10px; border-radius: 30px;; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.2s; opacity: 0;}
#section3 .content_box .site_thumb .screen:hover a:before {opacity: 1;}




/* main works */
#section4 {width: 1700px; margin: 0 auto; position: relative; z-index: 8;}
#section4 h2 {height: 300px; width: 100%; position: absolute; top: 0;}
#section4 h2 img {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

#section4 article {height: 100%; margin-top: 130px;}    
#section4 article figure.wave {width: 100%; height: 152px; background: url('../images/bg_design.png') 0 0; position: absolute; top: 152px; background-position: 0 0; animation: wave 10s linear infinite; }
@keyframes wave {
    0% {background-position: 0 0;}
    100% {background-position: 1920px 0;}
    
}

#section4 article .content {width: 100%; }
#section4 article .content h3 {color: #fcc8ef; font-size:200px; text-align: center; margin-left: -600px;margin-bottom: 80px;}
#section4 article .content h3 span {display: block; margin-left: 1000px;}


#section4 article .content ul {width: auto; display: flex; flex-wrap: wrap; gap: 30px; max-height: 1800px;align-content: start; flex-direction: column; }
#section4 article .content li {width: 49%; display: flex; justify-content: center; align-items: center; border-radius: 30px; background: #f2f2f2; padding: 80px 0; position: relative; }
#section4 article .content li:nth-child(1) {height: 600px; }
#section4 article .content li:nth-child(2) {height: 650px; }
#section4 article .content li:nth-child(3) {height: 771px; }
#section4 article .content li:nth-child(4) {height: 478px; }


#section4 article .content li figure { flex-grow: 0; width: 100%; text-align: center;}
#section4 article .content li figure img {max-width: 100%;}
#section4 article .content li h4 {position: absolute; font-size: 30px;flex-grow: 0; bottom: 30px; left: 30px; font-weight: normal; color: #333;font-family: 'Pretendard';}
#section4 article .content li a.view_proj {position: absolute;bottom: 0; border-radius: 30px; background: rgba(0,0,0,.2); color: #fff; padding: 5px 30px; font-size: 20px; right: 30px; bottom: 30px; transition: .1s; }

#section4 article .content li:nth-child(1) a.view_proj {background: #f51416;}
#section4 article .content li:nth-child(2) a.view_proj {background: #ffae01;}
#section4 article .content li:nth-child(3) a.view_proj {background: #afadc2;}
#section4 article .content li:nth-child(4) a.view_proj {background: #f19d8c;}
#section4 .banner_box li a.view_proj {background: #60bd4b;}






.banner_box {width: 1700px; margin: 0 auto;}
.banner_box li {width: 100%; height: 350px; background: #f2f2f2;margin: 30px auto;border-radius: 30px;position: relative;} 
.banner_box li figure { flex-grow: 0; width: 50%; text-align: center;}
.banner_box li figure img {position: absolute;margin: 100px auto;}
.banner_box li h4 {position: absolute; font-size: 30px;flex-grow: 0; bottom: 30px; left: 30px; font-weight: normal; color: #333;font-family: 'Pretendard';}
.banner_box li a.view_proj {position: absolute;bottom: 0; border-radius: 30px; background: rgba(0,0,0,.2); color: #fff; padding: 5px 30px; font-size: 20px; right: 30px; bottom: 30px; transition: .1s;}


footer .text_box1 {height: 40%;position: absolute;width:  30%;bottom: 0px;left: 670px; text-align: center;}
footer .text_box1 span {color: #fcc8ef;font-family: 'Pretendard';font-size: 32px;font-weight: bold;left: 50px;  }
footer .text_box1 p {color: #fcc8ef;font-family: 'Pretendard';font-size: 32px;font-weight: bold;}
footer .text_box1 em {color: #fcc8ef;font-style: normal;font-family: 'Pretendard';font-size: 32px;font-weight: bold;}


footer {width: 100%; height: 500px;position: relative;}
footer h1 {color: #fcc8ef; font-weight: normal; text-align: center;position: absolute;width: 100%;margin-top: 140px;}
footer h1 span {display: block; font-size: 22px;}
footer h1 div {display: block; font-size: 70px; margin-top: 30px;}

footer .link {display: block; font-size: 32px; margin-top: 60px; }
footer .link a {color: #fcc8ef; padding: 0 32px; font-family: 'APOLLO', sans-serif; }
footer .link a img {vertical-align: middle;}








/* 보기페이지 */
.container {display: flex;background: #292826;}
.list {background: #202020; float: left; height: 100vh; border-radius: 1px solid #606060; width: 20%; overflow: auto; padding: 100px 60px; box-sizing: border-box;}
.list > a {color: #fff;  font-weight: normal; font-size: 28px;font-family: 'Pretendard-SemiBold';  
position: relative; display:block; margin-bottom: 30px;}
.list > a:hover {color: #fcc8ef;}

.list ul.app {width: 100%; height: 500px; flex-direction:inherit;}

.list ul.detail {width: 100%; height: 100vh; flex-direction: inherit;}

.list ul li.ban {width: 100%; /* height: 100% */;}


.list ul {display: flex; flex-direction: column; flex-wrap: wrap; max-height: 100vh; align-items: center; justify-content: space-around; gap: 15px; font-size: 0;}
.list ul.app li:nth-child(1) {width: 100%;}
.list ul.app li:nth-child(2) {width: 100%;}
.list ul.app li:nth-child(3) {width: 100%;}
.list ul.app li:nth-child(4) {width: 100%;}
.list ul.app li:nth-child(5) {width: 100%;}
.list ul.app li:nth-child(6) {width: 100%;}
.list ul.app li:nth-child(7) {width: 100%;}



.list ul.detail li:nth-child(1) {width: 100%;}
.list ul.detail li:nth-child(2) {width: 100%;}
.list ul.detail li:nth-child(3) {width: 100%;}


.list ul li {width: 50%; max-height: 400px; border-radius: 10px; overflow: hidden; opacity: 0.5; transition: .2s; overflow: hidden; font-size: 0;}
.list ul li a {font-size: 0;}
.list ul li:hover,
.list ul li.on {opacity: 1;}
.list ul li img {width: 100%;}




.view {background: #292826; float: left; height:calc(100vh - 100px); width: calc(80% - 55px); padding:0 60px 100px 60px; overflow: auto; box-sizing: border-box; display: flex; justify-content: center; gap: 80px ; margin-top: 100px;}

.view .web {max-width: 70%;}

.view .web1 {max-width: 30%;}

.view .mobile {}
.view img {width: 100%;}

.view .menu {width: 30px;height: 30px; border: 2px solid #fff; border-radius: 50%; position: absolute; right: 40px; top: 30px; cursor: pointer; /* overflow: hidden; */
/*     background: url('../images/menu_wave.png') 0 15px repeat-x,
                url('../images/menu_wave.png') 0 20px repeat-x,
                url('../images/menu_wave.png') 0 25px repeat-x; animation: menuWave 4s infinite linear; transition: .3s;transform: scale(1);  */}
/* @keyframes menuWave {
    0% {background: url('../images/menu_wave.png') 0 15px repeat-x,
        url('../images/menu_wave.png') 0 20px repeat-x,
        url('../images/menu_wave.png') 0 25px repeat-x;}
    100% {background: url('../images/menu_wave.png') -68px 15px repeat-x,
        url('../images/menu_wave.png') -68px 20px repeat-x,
        url('../images/menu_wave.png') -68px 25px repeat-x;}
} */
/* .view .menu:before {content: "x"; position: absolute; left: 10px;top: 0px; color: #fff; font-weight: bold; font-size: 24px; z-index: 2; display: none;}
.view .menu:after {content: "x"; position: absolute; left: 0;top: 0; background: rgba(0,0,0,.4); width: 100%; height: 100%; z-index: 1; display: none;} */
/* .view .menu:hover {animation-duration: 2s;} */

.view .menu .fa-solid {color: #fff; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 100%;}
.view .menu:before {content: "닫기"; position: absolute; left: 10px;top: 0px; color: #000; font-weight: bold; font-size: 24px; z-index: 2; background: #fcc8ef; width: 50px; height: 24px; left: -50px; top: 0px; font-size: 14px; font-family: 'Gmarket'; display: flex; justify-content: center; align-items: center; border-radius: 5px; opacity: 0; visibility: hidden; transition: 0.4s;}
.view .menu:hover:before {opacity: 1; visibility: visible; top: -20px;}