@charset "utf-8";

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

#wrap { height: 100%; }
#fixed .logo a { display: block; width: 107px; height: 101px; background-image: url("../images/main/logo2.png"); background-size: 107px 101px; }

.project { position: absolute; z-index: 1; top: 12%; left: 50%; transform: translate(-50%, 0%); }
h2 { transition: all .3s ease; font-size: 1.875vw; animation: float 5s ease-in-out infinite; }
h2.boder { text-shadow: 2px  2px 0 #fff, -1.5px -2px 0 #fff, 2px -2px 0 #fff, -1.5px 2px 0 #fff, 2px  2px 0 #fff; }
h2:hover { color: #ffb8a9; text-shadow: 2px  2px 0  #1d0242, -1.5px -2px 0 #1d0242, 2px -2px 0 #1d0242, -1.5px 2px 0 #1d0242, 2px  2px 0 #1d0242; }

@keyframes float {
    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);
	}
}

ul.project_list { padding-bottom: 150px; padding-top: 300px; text-align: center; font-size: 9.375vw; }
ul.project_list li { transition: all .2s ease-in-out; position: relative; z-index: 1; }
ul.project_list li + li { margin-top: 11%; }
ul.project_list li a.one { color: #fff; text-shadow: 2px  2px 0  #1d0242, -1.5px -2px 0 #1d0242, 2px -2px 0 #1d0242, -1.5px 2px 0 #1d0242, 2px  2px 0 #1d0242; }
ul.project_list li a { transition: all .2s ease-in-out; }

ul.project_list li a .arrow { transition: all .3s ease-in-out; opacity: 0; }
ul.project_list li a.one .arrow { opacity: 1; z-index: 2; position: absolute; top: 26%; left: 75%; content: ""; padding:none; border-left:none;  border-bottom:none; border-top:solid 1vw #fff; border-right:solid 1vw #fff; width:2vw; height: 2vw; color:transparent; background:none; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); border-radius:0 3px 0 0; }

ul.project_list li:first-child a .arrow { left: 81%; }
 
.bg { opacity: 0; transition: all .3s ease; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background-attachment: fixed; background-position: center top; }

ul.project_list .list1 { animation: float1 7s ease-in-out infinite; }
ul.project_list .list2 { animation: float1 5s ease-in-out infinite; }
ul.project_list .list3 { margin-bottom: 3.8%; animation: float1 9s ease-in-out infinite; }


@keyframes float1 {
    0% {
      transform: translate(0, 8px);
    }
    65% {
      transform: translate(8px, -10px);
    }
    100% {
      transform: translate(0, 8px);
    }
}

.project_list_1.onMouse { background-image: url("../images/project/project1.jpg"); }
.project_list_2.onMouse1 { background-image: url("../images/project/project2.jpg"); }
.project_list_3.onMouse2 { background-image: url("../images/project/project3.jpg"); }
/* .project_list_4.onMouse { background-image: url("../images/project/project1.jpg"); } */


/* footer */
#footer { position: relative; z-index: 2; width: 100%; height: 350px; background: #1d0242; font-family: ScoreD; color: #ffb8a9; font-size: 0.875vw; text-align: center; }
#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/project/sns1.png"); }
#footer .sns_list .sns2 a { background-image: url("../images/project/sns2.png"); }
#footer .sns_list .sns3 a { background-image: url("../images/project/sns3.png"); }
#footer .sns_list .sns4 a { background-image: url("../images/project/sns4.png"); }
#footer .sns_list .sns5 a { background-image: url("../images/project/sns5.png"); }
#footer address { padding-top: 60px; font-weight: 400; }
#footer p { padding-top: 20px; font-weight: 600; }


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