@charset "utf-8";

body { overflow-x: hidden; background: #ffb8a9; font-family: ScoreD; color: #3a3a3a; }
#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 { margin: 0 60px; }



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

/* content */
#content { position: relative; width: 100%; }
.dal_logo { width: 10vw; height: 10vh; padding: 11% 0 0 5%; }
.dal_logo img { width: 100%; }
.bgImg { animation: floatImg 7s infinite; position: absolute; top: -1%; right: -70px;}
.bgImg img { width: 34vw; }

.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: 3.7%; }
.name h3 { color: #e04c60; }
.name span { color: #fbf4bd; } 

@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: 13.5% 0 0 30%; color: #e04c60; 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 { animation: updownLine 1.5s infinite;
    -moz-animation: updownLine 1.5s infinite;
    -webkit-animation: updownLine 1.5s infinite;
    -o-animation: updownLine 1.5s infinite;
     content: ""; position: absolute; left: -140px; top: 0; width: 3px; height: 100%; background: #fbf4bd; }

@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: 210px; top: 12px; display: block; width: 12px; height: 12px; background: #e04c60; border-radius: 50%; }
.txt_r a:hover:before { left: 100px; top: -5px; width: 50px; height: 50px; background: url("../images/P_daldalhae/arrow.png"); border-radius: 50%; }
.txt_r span { transition: all .2s cubic-bezier(0.77, 0, 0.175, 1); display: block; position: absolute; left: 120px; top: 17px; height: 3px; width: 75px; background: #fbf4bd; }

/* chap1 */
#chap1 { margin-top: 115px; width: 100%; }
.chap_txt { float: left; width: 30%; font-size: 1rem; font-weight: 400; color: #e04c60; }
.chap_txt h4 { position: relative; letter-spacing: 5px; font-family: hanna; font-size: 7.4vw; }
.chap_txt h4:after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 9%; height: 16%; border-radius: 50%; background: #fbf4bd;}
.chap_1 p { padding: 35% 0; font-size: 0.8vw; word-break: keep-all; line-height: 43px; }


.txt_box1 { float: left; width: 20%; height: 100%; }

.txt_box2 { float: left; width: 20%; margin-left: 20%; height: 100%; }

.imgs { position: relative; }
.mock_up { margin-top: 2%; position: relative; margin-left: -60px; }

/* #gif { opacity: 1; position: absolute; left: 54%; top: 15%; transition: all 0.2s;} */
#gif { transition: opacity .2s ease; opacity: 0; position: absolute; left: 54%; top: 0%; }
#gif.fade{opacity: 1;}

.mock_up img { width: 75%; }
#gif img { width: 100%; }


/* chap2 */
#chap2 .txt_box3.on { margin-left: 0; }
#chap2 { position: relative; margin-top: 14%; }
#chap2 .chap_txt { float: none; }
#chap2 .chap_1 p { padding: 0; width: 50%; }
#chap2 .chap_1 p + p { margin-top: 1%; }
#chap2 .chap_txt h4:after { left: 80%; bottom: 22%; width: 10%; height: 33%; }
#chap2 .txt_box3 { margin-left: -800px; transition: all .5s ease; margin-top: 3%; padding-bottom: 28%; }
.bg.on { margin-right: 0; }
.bg { transition: all .8s ease; margin-right: -1200px; width: 80%; height: 80%; position: absolute; right: -205px; top: 15%; }
.bg img { width: 90%; }

/* chap3 */
#chap3 { margin-top: 2%; }
#chap3 .chap_txt { float: left; }
#chap3 .chap_txt h4:after { left: 82%; bottom: 22%; width: 10%; height: 33%; }
#chap3 .chap_1 p { padding: 0; line-height: 43px; }
#chap3 .txt_box4 { transition: all .3s ease; opacity: 0; margin: 9% 0 0 6%; float: left; width: 45%; }
#chap3 .txt_box4.on { opacity: 1; }

#chap3 .color_box { transition: all .6s ease; opacity: 0; margin-top: 40%; width: 100%; }
#chap3 .color_box.on { opacity: 1; margin-top: 4%; }
#chap3 .color_box div { float: left; width: 27%; height: 30vh; border: 1px solid #3a3a3a; box-sizing: border-box; }
#chap3 .color_box div { position: relative; margin-right: 9.5%; margin-bottom: 2%; }
#chap3 .color_box div:nth-child(1) { background: #fff; color: #bebbbb; }
#chap3 .color_box div:nth-child(2) { background: #fac4bb; color: #e69e92; }
#chap3 .color_box div:nth-child(3) { background: #fddcd6; margin-right: 0; margin-bottom: 0%; color: #dbb3ac; }
#chap3 .color_box div:nth-child(4) { background: #ffadad; margin-bottom: 0%; color: #e48787; }
#chap3 .color_box div:nth-child(5) { background: #f26c69; margin-bottom: 0%; color: #cc4f4c; }
#chap3 .color_box div:nth-child(6) { background: #373737; margin-right: 0; margin-bottom: 0%; color: #766d6d; }
#chap3 .color_box div span { position: absolute; left: 3%; bottom: 1.5%; font-family: ScoreD; font-weight: 600; font-size: 2.5vw; }

/* chap4 */
#chap4 { margin-top: 12%; }
#chap4 .chap_txt { float: none; }
#chap4 .chap_txt h4:after { left: 80%; bottom: 10%; width: 10%; height: 33%; }
.img_box { margin: 0 auto; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); margin-top: 4%; width: 61.5%; height: 20%; }
.img_box img { width: 100%; }
#chap4 .txt_box5 { margin-top: 3%; text-align: center; }
#chap4 .txt_box5 p { padding: 0; color: #3a3a3a; }
h5 { position: relative; font-size: 2vw; font-weight: 400; color: #e04c60; padding: 3% }
h5:after { content: ""; position: absolute; left: 18%; top: 50%; width: 75vw; height: 1px; background: #e04c60; }
/* footer */
#footer { margin-top: 8%; text-align: center; width: 100%; height: 410px; background: #fbf4bd; 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_daldalhae/sns_icon1.gif"); }
#footer .sns_list .sns2 a { background-image: url("../images/P_daldalhae/sns_icon2.gif"); }
#footer .sns_list .sns3 a { background-image: url("../images/P_daldalhae/sns_icon3.gif"); }
#footer .sns_list .sns4 a { background-image: url("../images/P_daldalhae/sns_icon4.gif"); }
#footer .sns_list .sns5 a { background-image: url("../images/P_daldalhae/sns_icon5.gif"); }
#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: #fbf4bd; 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: #e04c60; font-size: 1vw; }
.btn_top.view { opacity: 1; }

/* 미디어쿼리 */
@media all and (max-width: 1620px) {
    #chap4 .chap_txt h4:after { left: 86%; }
}

@media all and (max-width: 1430px) {
    .chap_txt h4:after { left: 53%; }
    #chap2 .chap_txt h4:after, #chap3 .chap_txt h4:after { left: 85%; }
}

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

@media all and (max-width: 1120px) {
    .txt { margin: 15% 0 0 10%;  }
    #chap2 .chap_txt h4:after { left: 85%; }
    #chap4 .chap_txt h4:after { left: 90%; }
}

@media all and (max-width: 948px) {
    .chap_txt h4:after { left: 55%; }
    #chap2 .chap_txt h4:after, #chap3 .chap_txt h4:after { left: 92%; }
    #chap4 .chap_txt h4:after { left: 95%; }
}

@media all and (max-width: 870px) {
    #chap2 .chap_txt h4:after, #chap3 .chap_txt h4:after { left: 97%; }
    #chap4 .chap_txt h4:after { left: 100%; }
}

@media all and (max-width: 670px) {
    .chap_txt h4:after { left: 65%; }
    #chap2 .chap_txt h4:after, #chap3 .chap_txt h4:after { left: 108%; }
    #chap4 .chap_txt h4:after { left: 110%; }
}


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