.topHead.lightOff { background-color: black; }
.topHead.lightOff .textarea{color:#fdc603 !important;}
.topHead.lightOff + .topHeadBnrArea,.topHead.lightOff + .topHeadBnrArea * { color: #fdc603 !important; }
.topHead:before{display:none !important;}
.topHead .textarea{opacity:0;}
.topHead .mainvisual{position:absolute;top:0;left:50%;height:100%;width:50%;box-sizing:border-box;overflow:hidden;}
.topHead .mainvisual #animation_container{width:100%;height:768px}
.topHead .mainvisual #animation_container canvas{position:absolute;display:block;background-color:transparent;left:0;}
.topHead .mainvisual #dom_overlay_container{pointer-events:none;overflow:hidden;width:100%;height:768px;position:absolute;left:0px;top:0px;display:block;}
.topHead .loading{position:absolute;width:80px;height:20px;margin:auto;top:360px;left:0;right:0;z-index:10;}
.topHead .loading span{position:relative;display:inline-block;width:16px;height:16px;background:black;bottom:0;margin:0 2px;will-change:transform;transform:scaleY(0);animation:loading-animation 1s infinite;}
.topHead .loading span:nth-of-type(1){animation-delay:0.2s;}
.topHead .loading span:nth-of-type(2){animation-delay:0.3s;}
.topHead .loading span:nth-of-type(3){animation-delay:0.4s;}
.topHead .loading span:nth-of-type(4){animation-delay:0.5s;}
@keyframes loading-animation{0%{transform:scaleY(0);}
20%{transform:scaleY(1);}
50%{transform:scaleY(1);}
70%{transform:scaleY(0);}
100%{transform:scaleY(0);}
}
@media screen and (max-width: 1024px) and (min-width: 768px){
.topHead .mainvisual { left:27%; width:75%; }
.topHead .contentIn {display: block;padding-top: 110px;}
.topHeadBnrArea {bottom: 170px;}
.topHeadBnrArea .slide .textBox_txt {display: none !important;}
}
@media screen and (max-width:767px){.topHead .mainvisual{left:0;width:100%;}
.topHead .mainvisual #animation_container{position:absolute;bottom:0;height:440px;}
.topHead .mainvisual #animation_container canvas{height:440px;}
.topHead .mainvisual #dom_overlay_container{height:440px;}
}