.cd-img-replace {display:inline-block; overflow:hidden; text-indent:100%; white-space:nowrap; }
.overflow-hidden {overflow:hidden; }

/* scroll animation */
.ani {
  opacity: 0 ;
  transition: all 0.6s ease;
}

/* 위로 */
.fade-up {
  transform: translateY(30px);
}

/* 왼쪽 */
.fade-left {
  transform: translateX(-30px);
}

/* 확대 */
.zoom-in {
  transform: scale(0.95);
}

.ani.show {
  opacity: 1 ;
  transform: none;
}

.delay-1 { transition-delay: 0s; }
.delay-2 { transition-delay: .1s; }
.delay-2_ { transition-delay: .15s; }
.delay-3 { transition-delay: .2s; }
.delay-4 { transition-delay: .3s; }
.delay-5 { transition-delay: .4s; }

/* -------------------------------- 

Main components 

-------------------------------- */
.cd-main-content {
  min-height:100%; position:relative; background-color:#f5f4e9; z-index:2; padding-top:60px; /* Force Hardware Acceleration in WebKit */
  -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; transition-property:transform; -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; transition-duration:0.4s; }
.cd-main-content.lateral-menu-is-open { -webkit-transform:translateX(-200px); -moz-transform:translateX(-200px); -ms-transform:translateX(-200px); -o-transform:translateX(-200px); transform:translateX(-200px); }
  

header {position:fixed; top:0; left:0; height:50px; width:100%; background:rgba(0, 0, 0, .8) ; z-index:1000; /* Force Hardware Acceleration in WebKit */
  -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; transition-property:transform; -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; transition-duration:0.4s; }
header.lateral-menu-is-open {/* translate to show the lateral menu */
  -webkit-transform:translateX(-200px); -moz-transform:translateX(-200px); -ms-transform:translateX(-200px); -o-transform:translateX(-200px); transform:translateX(-200px); }
header.is-fixed {position:fixed; }


#cd-logo {position:fixed; display:block; top:0px; left:0px; float:left; margin:12px 0 0 10px; }
#cd-logo img {display:block; }


#cd-top-nav {position:absolute; top:0; right:120px; height:100%; display:none; }
#cd-top-nav ul {height:100%; padding-top:18px; }
#cd-top-nav li {display:inline-block; margin-right:1em; }
#cd-top-nav a {display:inline-block; padding:.5em; color:#FFF; text-transform:uppercase; font-weight:600; }
#cd-top-nav a.current {background-color:#242e30; }
.no-touch #cd-top-nav a:hover {color:rgba(255, 255, 255, 0.7); }


#cd-menu-trigger {position:absolute; right:0; top:0; height:100%; width:50px; background-color:rgba(255, 255, 255, 0.2); }
#cd-menu-trigger .cd-menu-text {height:100%; text-transform:uppercase; color:#FFF; font-weight:600; display:none; }
#cd-menu-trigger .cd-menu-icon {/* this span is the central line in the menu menu */
  display:inline-block; position:absolute; left:50%; top:50%; bottom:auto; right:auto; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); width:18px; height:2px; background-color:#FFF; /* these are the upper and lower lines in the menu menu */
}
#cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after {content:''; width:100%; height:100%; position:absolute; background-color:inherit; left:0; }
#cd-menu-trigger .cd-menu-icon::before {bottom:5px; }
#cd-menu-trigger .cd-menu-icon::after {top:5px; }
#cd-menu-trigger.is-clicked .cd-menu-icon {background-color:rgba(255, 255, 255, 0); }
#cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after {background-color:white; }
#cd-menu-trigger.is-clicked .cd-menu-icon::before {bottom:0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
#cd-menu-trigger.is-clicked .cd-menu-icon::after {top:0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }
.uppercase{text-transform:uppercase!important;font-weight:600;font-size:16px}

#cd-lateral-nav {position:fixed; height:100%; right:0; top:0; visibility:hidden;  z-index:900; width:200px; background-color:#000; overflow-y:auto;  -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden; -webkit-transition:-webkit-transform .4s 0s, visibility 0s .4s; -moz-transition:-moz-transform .4s 0s, visibility 0s .4s; transition:transform .4s 0s, visibility 0s .4s; 
  -webkit-transform:translateX(80px); -moz-transform:translateX(80px); -ms-transform:translateX(80px); -o-transform:translateX(80px); transform:translateX(80px); }
#cd-lateral-nav .cd-navigation {margin:0px 0 16px; }
#cd-lateral-nav .sub-menu {padding:0; display:none; font-size:13px}
#cd-lateral-nav a {display:block; line-height:2.4em; padding:0 16px 0 32px; color:#FFF; border-top:solid 1px #333;}
#cd-lateral-nav a.current {background-color:#ed1c24; color:#FFF;  }
.no-touch #cd-lateral-nav a:hover {color:#FFF; background:#ed1c24 }

#cd-lateral-nav  ul.sub-menu{padding-bottom:10px}

#cd-lateral-nav .sub-menu a{display:block; border-top:none; line-height:1.8em; padding:0 16px 0 37px;}


#cd-lateral-nav.lateral-menu-is-open {-webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); visibility:visible; -webkit-transition:-webkit-transform .4s 0s, visibility 0s 0s; -moz-transition:-moz-transform .4s 0s, visibility 0s 0s; transition:transform .4s 0s, visibility 0s 0s; /* smooth the scrolling on touch devices - webkit browsers */
  -webkit-overflow-scrolling:touch; }

/* style menu items which have a submenu  */
#cd-lateral-nav .item-has-children > a {position:relative; text-transform:uppercase; font-size:16px; font-weight:600; }
#cd-lateral-nav .item-has-children > a::after {content:''; display:block; height:11px; width:8px; position:absolute; top:50%; bottom:auto; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); right:1em; background:url("../img/cd-arrow.svg") no-repeat center center; background-size:8px 11px; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; transition-property:transform; -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; transition-duration:0.2s; }
#cd-lateral-nav .item-has-children > a.submenu-open::after {-webkit-transform:translateY(-50%) rotate(90deg); -moz-transform:translateY(-50%) rotate(90deg); -ms-transform:translateY(-50%) rotate(90deg); -o-transform:translateY(-50%) rotate(90deg); transform:translateY(-50%) rotate(90deg); }

/*#cd-lateral-nav .socials {padding:0 32px; }
#cd-lateral-nav .socials:after {content:""; display:table; clear:both; }
#cd-lateral-nav .socials a {height:32px; width:32px; float:left; padding:0; background-image:url("../img/cd-socials.svg"); background-repeat:no-repeat; background-size:128px 64px; background-color:#FFF; margin-right:.5em; border-radius:0.25em; }
#cd-lateral-nav .socials a.cd-twitter {background-position:0 0; }
#cd-lateral-nav .socials a.cd-github {background-position:-32px 0; }
#cd-lateral-nav .socials a.cd-facebook {background-position:-64px 0; }
#cd-lateral-nav .socials a.cd-google {background-position:-96px 0; }*/
/*.no-touch #cd-lateral-nav .socials a:hover {background-color:#4e6361; }
.no-touch #cd-lateral-nav .socials a:hover.cd-twitter {background-position:0 -32px; }
.no-touch #cd-lateral-nav .socials a:hover.cd-github {background-position:-32px -32px; }
.no-touch #cd-lateral-nav .socials a:hover.cd-facebook {background-position:-64px -32px; }
.no-touch #cd-lateral-nav .socials a:hover.cd-google {background-position:-96px -32px;}*/


@media only screen and (min-width:768px) {
	.cd-main-content {padding-top:60px; display:none }
	.cd-main-content.lateral-menu-is-open { display:none}
	#cd-lateral-nav{display:none} 
	header {height:60px; display:none}
	#cd-logo {margin:12px 0 0 10px; }
	#cd-top-nav {display:block; }
	#cd-menu-trigger {width:110px; padding-left:1.25em; }
    #cd-menu-trigger .cd-menu-text {display:inline-block; line-height:60px; }
    #cd-menu-trigger .cd-menu-icon {left:auto; right:1.25em; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); }
	#cd-lateral-nav .cd-navigation {margin:20px 0; }
}