@charset "utf-8";
@import url("gnb.css");


/*layout*/
.wow { 	visibility: hidden;}





/*header*/

#header {position: fixed; width: 100%; height: 120px; top: 0; left: 0; transition: all .3s ease-in-out;}

#header .logo { width: 195px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);transition: all .3s ease-in-out;}
#header .logo img {width: 100%;}

#header .logo {animation-name: speedRight; animation-delay: .3s; animation-duration: 1s;}

/*hambtn*/
.header .ham_btn {animation-name: speedLeft; animation-delay: .3s; animation-duration: 1s;}
.header .ham_btn, .header .ham_btn span {display: inline-block; z-index: 100; transition: all .3s ease-in-out; box-sizing: border-box;}
.header .ham_btn {position: absolute; width: 60px; height: 60px; top: 50%; right: 0; cursor: pointer; transform: translateY(-50%); border: 1px solid #fff;}
.header .ham_btn p {position: absolute; width: 30px; height: 22px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.header .ham_btn span {position: absolute; right: 0; width: 100%; height: 2px; background-color: #fff; display: block; transition: all .3s ease-in-out;}
.header .ham_btn span:nth-of-type(1) {top: 0;}
.header .ham_btn span:nth-of-type(2) {top: 10px;}
.header .ham_btn span:nth-of-type(3) {bottom: 0;}

.header .ham_btn:hover span:nth-of-type(2){width: 60%;}


#header.scroll {z-index: 9999; background-color: #fff; height: 80px; border-bottom: 1px solid #ddd;}
#header.scroll .logo {width: 120px;}

#header.scroll .ham_btn {border: 1px solid #111; width: 50px; height: 50px;}
#header.scroll .ham_btn span {background-color: #111;}
#header.scroll .ham_btn p {width: 23px; height: 18px;}
#header.scroll .ham_btn span:nth-of-type(2) {top: 8px;}

#header.scroll .ham_btn.active {border: 1px solid #fff;}
#header.scroll .ham_btn.active span {background-color: #fff;}

#header.scroll .ham_btn.active span:nth-of-type(1) {-webkit-transform : translateY(9px) rotate(-45deg);
	transform : translateY(9px) rotate(-45deg);}
#header.scroll .ham_btn.active span:nth-of-type(3) {-webkit-transform : translateY(-7px) rotate(45deg);
	transform : translateY(-7px) rotate(45deg);}


.header .gnb li a span {transition: all .3s ease-in-out;}
.header .gnb li a:hover span {color: #fa8282;}
.header .gnb li:nth-of-type(2) a:hover span {color: #80aff6;}
.header .gnb li:nth-of-type(3) a:hover span {color: #89baa4;}
.header .gnb li:nth-of-type(4) a:hover span {color: #f6ab86;}
.header .gnb li:nth-of-type(5) a:hover span {color: #f6b401;}
.header .gnb li:nth-of-type(6) a:hover span {color: #b6b6ee;}
.header .gnb li:nth-of-type(7) a:hover span {color: #f2e29b;}



.header .ham_btn.active {}
.header .ham_btn.active span:nth-of-type(1) {-webkit-transform : translateY(11px) rotate(-45deg);
	transform : translateY(11px) rotate(-45deg);}
.header .ham_btn.active span:nth-of-type(2) {opacity: 0;}
.header .ham_btn.active span:nth-of-type(3) {-webkit-transform : translateY(-9px) rotate(45deg);
	transform : translateY(-9px) rotate(45deg);}

.ham_menu {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #111; display: none;}


.ham_menu .ham_logo {width: 50%; float: left;}
.ham_menu .ham_logo img {width: 100%;}
.ham_menu .gnb {float: left; margin-left: 6%;}
.ham_menu .gnb ul li a {font-size: 60px; color: #fff; font-weight: 600;position: relative;}
.ham_menu .gnb ul li {margin-bottom: 5%;}
.ham_menu .gnb ul li:last-child {margin-bottom: 0;}

.ham_menu .gnb ul li a:before {position: absolute; width: 0; height: 1px; background-color: #fff; content: ""; transition: all .3s ease-in-out; top: 52%; left: 0;}
.ham_menu .gnb ul li a:hover:before {width: 100%;}
.header .gnb li:nth-of-type(1) a:hover:before {background-color: #fa8282;}
.header .gnb li:nth-of-type(2) a:hover:before {background-color: #80aff6;}
.header .gnb li:nth-of-type(3) a:hover:before {background-color: #89baa4;}
.header .gnb li:nth-of-type(4) a:hover:before {background-color: #f6ab86;}
.header .gnb li:nth-of-type(5) a:hover:before {background-color: #f6b401;}
.header .gnb li:nth-of-type(6) a:hover:before {background-color: #b6b6ee;}
.header .gnb li:nth-of-type(7) a:hover:before {background-color: #f2e29b;}

.ham_menu .ham_wrap {position: absolute; top: 50%; width: 100%; left: 0; transform: translateY(-50%);}

.ham_menu .sns_box {position: absolute; right: 80px; bottom: 60px;}
.ham_menu .sns_box .sns {width: 80px; height: 80px; display: inline-block;margin-right: 10px; transition: all .3s ease-in-out;}
.ham_menu .sns_box .sns:hover {transform: translateY(-20px);}
.ham_menu .sns_box .sns:last-child {margin-right: 0;}
.ham_menu .sns_box .sns a {}
.ham_menu .sns_box .sns img {width: 100%;}

.side_quick {position: fixed; top: 50%; transform: translateY(-50%); left: 30px; z-index: 100;}
.side_quick .side_logo {width: 18px; height: 74px; background: url("/resources/img/main/side_logo.png")no-repeat center; display: inline-block; vertical-align: middle; text-indent: -9999px;}
.side_quick .side_sns {display: inline-block;vertical-align: middle; margin-left: 5px; }

.side_quick .side_sns .sns {width: 35px; margin-bottom: 5px;transition: all .3s ease-in-out; position: relative;}
.side_quick .side_sns .sns img {position: relative; top: 0; z-index: 1;}
.side_quick .side_sns .sns span {position: absolute; height: 35px; width: 0; background-color: #111; border-radius: 0px 35px 35px 0px; color: #fff; text-align: center; top: 0; left: 0; transition: all .3s ease-in-out; display: inline-block; line-height: 35px; font-size: 0px; margin-left: 17px; }
.side_quick .side_sns .sns:hover span {width: 120px; font-size: 14px;}
/*.side_quick .side_sns .sns:after {height: 35px; width: 100px; content: "김태균 인스타"; background-color: #111; color: #fff; display: inline-block; position: absolute; top: 0; left: 0; text-align: right; border-radius: 35px;}*/
.side_quick .side_sns .sns:last-child {margin-bottom: 0;}
.side_quick img {width: 100%;}



/*footer*/

#footer {background-color: #111; padding: 50px 0; box-sizing: border-box;  position: relative;}

#footer .f_inform {color: #ddd; font-size: 14px;font-family: 'SCDREAM', sans-serif;}
#footer .f_inform, #footer .f_logo {float: left;}
#footer .f_inform {margin-left: 6%;}
#footer .f_inform p {float: left; margin-right: 38px; position: relative;}
#footer .f_inform p span {display: inline-block;}
#footer .f_inform p:after {height: 16px; width: 1px; background-color: #ddd; position: absolute; content: ""; right: -19px; clear: both; display: inline-block;}
#footer .f_inform p span.bold {margin-right: 15px;}
#footer .f_inform p.email:after {display: none;}

#footer .f_inform .copy {margin-top: 15px;}


.top_btn {width: 60px; height: 60px; background-color: #111; color: #fff; text-align: center; position: absolute; right: 30px; top: -60px;}
.top_btn .arrow {display: block; width: 15px; height: 9px; background: url("/resources/img/main/arrow.png")no-repeat left 0px bottom 0px; margin: 18px auto 5px;}

.top_btn a {color: #fff; font-weight: 600;}



@media screen and (max-width: 1600px){
    
    .ham_menu .ham_logo {width: 42%;}
}


@media screen and (max-width: 1300px){
    .ham_menu .ham_logo {display: none;}
    .ham_menu .ham_wrap {transform: translateY(-55%);}
}


@media screen and (max-width:1024px){
        /*footer*/
    #footer .f_inform {margin-left: 0; margin-top: 20px; float: none; width: 100%;}
    #footer .f_inform, #footer .f_logo {float: none;}
    #footer .f_inform p {margin-right: 4%; line-height: 180%;}
    #footer .f_inform p:after {display: none;}
}

@media screen and (max-width:768px){
     /*header*/
    #header .logo {width: 150px;}

#header .ham_btn { width: 50px; height: 50px;}
#header .ham_btn p {width: 23px; height: 18px;}
#header .ham_btn span:nth-of-type(2) {top: 8px;}


#header .ham_btn.active span:nth-of-type(1) {-webkit-transform : translateY(9px) rotate(-45deg);
	transform : translateY(9px) rotate(-45deg);}
#header .ham_btn.active span:nth-of-type(3) {-webkit-transform : translateY(-7px) rotate(45deg);
	transform : translateY(-7px) rotate(45deg);}
    
    .ham_menu .gnb ul li a {font-size: 40px;}
    .ham_menu .gnb ul li {margin-bottom: 10%;}
    .ham_menu .sns_box {right: 10px;}
}

@media screen and (max-width:500px){
      
    /*header*/
    .ham_menu .gnb ul li a {font-size: 28px;}
    .ham_menu .sns_box .sns {width: 60px; height: 60px; margin-right: 5px;}
    
    #header {height: 100px;}
    #header .logo {width: 120px;}
}