@charset "utf-8";

body { overflow-x: hidden; background: #ffb8a9; font-family: ScoreD; color: #1d0242; }

#fixed .logo a { transition: all .2s ease-in-out; display: block; width: 107px; height: 101px; background-image: url("../images/main/logo2.png"); background-size: 107px 101px; }
#fixed .logo a.on { opacity: 0; }

#wrap {  }

/* header */
.project { margin-top: 6.5%; text-align: center; font-family: hanna; font-size: 1.25vw; letter-spacing: 1px; }
.project a { position: relative; transition: all .2s ease; }
.project a:after { transition: all .2s ease; content:""; display: block; width: 0.8vw; height: 0.8vw; border-bottom: 6px solid #1d0242; border-left: 6px solid #1d0242; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 8px; left: -6vw; margin-top:-7px; }
.project a.mHover:after { border-bottom: 6px solid #29a3a4; border-left: 6px solid #29a3a4; }
.project a:hover { text-shadow: 1px  1px 0 #29a3a4, -1.5px -1px 0 #29a3a4, 1px -1px 0 #29a3a4, -1.5px 1px 0 #29a3a4,1px 1px 0 #29a3a4; }

/* content */
#content { position: relative; width: 100%; }
.mega_side { width: 17vw; height: 17vh; padding: 5% 0 0 2%; }
.mega_side img { width: 100%; }

.name { position: absolute;  animation: floatTxt 5s infinite; -moz-animation: floatTxt 5s infinite; -webkit-animation: floatTxt 5s infinite; -o-animation: floatTxt 5s infinite; -webkit-animation-direction: alternate; animation-direction: alternate; font-family: hanna; font-size: 18.88vw; width: 100%; left: 21.5%; top: 7.5%; }

@keyframes floatTxt {
    0% {
        transform: translate(0%, -50%) scale(1, 1);
        -moz-transform: translate(0%, -50%) scale(1, 1);
        -webkit-transform: translate(0%, -50%) scale(1, 1);
        -o-transform: translate(0%, -50%) scale(1, 1);
        -ms-transform: translate(0%, -50%) scale(1, 1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    100% {
        transform: translate(0%, -43%) scale(0.95, 1.05);
        -moz-transform: translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform: translate(0%, -43%) scale(0.95, 1.05);
        -o-transform: translate(0%, -43%) scale(0.95, 1.05);
        -ms-transform: translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}

@keyframes floatImg {
    0% {
	    -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
	    -moz-transform: rotate(0deg) translate(-10px) rotate(0deg);
	    -ms-transform: rotate(0deg) translate(-10px) rotate(0deg);
	    -o-transform: rotate(0deg) translate(-10px) rotate(0deg);
	    transform: rotate(0deg) translate(-10px) rotate(0deg);
	}
	100% {
	    -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
	    -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
	    -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
	    -o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
	    transform: rotate(360deg) translate(-10px) rotate(-360deg);
	}
}

.txt { margin: 16% 0 0 30%; font-size: 1.3vw; }
.txt strong { font-size: 1.6vw; font-weight: 500; }
.txt p, .txt a { font-weight: 300; }

.txt_l { position: relative; float: left; }
.txt_l:before { content: ""; position: absolute; left: -140px; top: 0; width: 3px; height: 100%; background: #29a3a4; animation: updownLine 1.5s infinite; -moz-animation: updownLine 1.5s infinite; -webkit-animation: updownLine 1.5s infinite; -o-animation: updownLine 1.5s infinite; }

@keyframes updownLine {
    0% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    40% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    80% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    80.1% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    100% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}
.txt_l p { margin-top: 5px; }

.txt_r { float: right; padding-right: 16%; }
.txt_r a { position: relative; display: block; margin-top: 20px; padding-right: 120px; }
.txt_r a:before { transition: all .35s cubic-bezier(0.77, 0, 0.175, 1); content: ""; position: absolute; left: 230px; top: 16px; display: block; width: 12px; height: 12px; background: #29a3a4; border-radius: 50%; }
.txt_r a:hover:before { left: 130px; top: -2px; width: 50px; height: 50px; background: url("../images/P_mega/arrow.png"); border-radius: 50%; }
.txt_r span { transition: all .2s cubic-bezier(0.77, 0, 0.175, 1); display: block; position: absolute; left: 145px; top: 20px; height: 3px; width: 75px; background: #29a3a4; }


/* moveImg */
#mega_moveImg { margin-top: 7%; width: 100%; height: 850px; background: #000; overflow: hidden; }
.moveImg { width: 100%; height: 1800px; background-image: url("../images/P_mega/mega_movImg.png"); background-size: cover; background-position: top center; }


/* chap1 */
#chap1 { position: relative; margin-top: 12%; padding-bottom: 20%; width: 100%; }
.chap_txt { transition: all .5s ease-in-out; margin-left: -700px; width: 100%; font-size: 1rem; font-weight: 400; }
.chap_txt.on { margin-left: 0; }
.chap_txt h4 { position: relative; letter-spacing: 5px; font-family: hanna; font-size: 7.4vw; }
.chap_txt h4:after { content: ""; position: absolute; left: 17%; bottom: 10%; width: 2.8%; height: 16.3%; border-radius: 50%; background: #29a3a4; }
.chap_1 p { padding: 10% 0; font-size: 1.1vw; word-break: keep-all; line-height: 43px; }


.txt_box1 { transition: all .3s ease-in-out; opacity: 0; margin: 4% 0 0 10%; width: 50%; }
.txt_box1.on { opacity: 1; }

/* 모바일스크롤 */
.hoverMe { font-family: hanna; position: absolute; top: 30%; left: -32%; font-size: 1.7vw; -ms-transform: rotate(270deg); transform: rotate(270deg); transform-origin: center top;}
.hoverMe:before { content: ""; position: absolute; left: 100%; top: 20%; width: 3vw; height: 3vw; background-image: url("../images/P_mega/hover_arrow.png"); background-position: center center; background-size: contain; }
.hoverMe p:before { content: ""; position: absolute; right: 0; top: -14%; width: 100%; height: 2px; background: #29a3a4; animation: updownLine2 2s infinite; -moz-animation: updownLine2 2s infinite; -webkit-animation: updownLine2 2s infinite; -o-animation: updownLine2 2s infinite; }
.hoverMe p:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #29a3a4; animation: updownLine 2s infinite; -moz-animation: updownLine 2s infinite; -webkit-animation: updownLine 2s infinite; -o-animation: updownLine 2s infinite; }
@keyframes updownLine2 {
    0% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    40% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    80% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    80.1% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    100% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
}

.mobile { transition: all .5s ease-in-out; position: absolute; left: 163%; top: 5%; width: 25vw; }
.mobile.on { left: 63%; }

.mobile img { width: 100%; }
.phone { position: absolute; left: 0%; top: 0; width: 100%; height: 100%; }
.image { position: absolute; left: 6.5%; top: 13.4%;
    background-image: url("../images/P_mega/m_img1.png");
    width: 86.8%; height: 73.24%;
    transition: 10s ease-in; background-size:cover;
    background-position:top; }
.image:hover {background-position:bottom;}
/* .mobile img { width: 100%; } */
.image img { width: 100%; }

/* chap2 */
#chap2 { transition: all .5s ease-in-out; opacity: 0; }
#chap2.on { opacity: 1; }
.chap_txt2 { margin-top: 7%;}
.chap_txt2 h4 { position: relative; letter-spacing: 5px; font-family: hanna; font-size: 7.4vw; }
.chap_txt2 h4:after { content: ""; position: absolute; left: 25%; bottom: 10%; width: 2.6%; height: 30%; border-radius: 50%; background: #29a3a4; }
h5 { position: relative; font-size: 2vw; font-weight: 400; color: #1d0242; padding: 3% 3% 3% 0; }
h5:after { content: ""; position: absolute; left: 15%; top: 50%; width: 78.5vw; height: 1px; background: #29a3a4; }
pre { height: 50vh; }



/* footer */
#footer { margin-top: 8%; text-align: center; width: 100%; height: 410px; background: #29a3a4; font-family: ScoreD; color: #3a3a3a; font-size: 0.875vw; }
#footer ul { padding-top: 100px; width: 65%; margin: 0 21.5% auto; }
#footer .sns_list li { float: left; }
#footer .sns_list li + li { margin-left: 16%; }
#footer .sns_list li a { display: block; width: 60px; height: 60px; background: #000 cover; border-radius: 50%; }
#footer .sns_list .sns1 a { background-image: url("../images/P_mega/sns_icon1.png"); }
#footer .sns_list .sns2 a { background-image: url("../images/P_mega/sns_icon2.png"); }
#footer .sns_list .sns3 a { background-image: url("../images/P_mega/sns_icon3.png"); }
#footer .sns_list .sns4 a { background-image: url("../images/P_mega/sns_icon4.png"); }
#footer .sns_list .sns5 a { background-image: url("../images/P_mega/sns_icon5.png"); }
#footer address { padding-top: 80px; font-weight: 400; }
#footer p { padding-top: 20px; font-weight: 600; }

/* TOP 버튼 */
a.btn_top { transition: .2s ease; opacity: 0; position: fixed; right: 2%; bottom: 3%; display: block; width: 5vw; height: 5vw; background: #1d0242; border-radius: 50%; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); line-height: 5vw; text-align: center; font-family: ScoreD; font-weight: 500; color: #29a3a4; font-size: 1vw; }
.btn_top.view { opacity: 1; }

/* 미디어쿼리 */
@media all and (max-width: 1430px) {
}

@media all and (max-width: 1201px) {
    .txt { margin: 170px 0 0 50px; }
    .txt_l:before {  left: -50px; }
}



/* footer */
@media all and (max-width: 1212px) {
    #footer .sns_list li + li { margin-left: 12%; }
}