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

body{overflow-x:hidden}
header{display:flex;align-items:center}
#section1{overflow:hidden;position:relative;display:flex;justify-content:center;flex-direction:column;align-items:center;height:100vh;/*background:url('../images/photo/main-visual.jpg') no-repeat 50% 50%;background-size:cover*/}
#section1:before{content:"";position:absolute;z-index:1;display:block;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.4)}
#section1 #mainVisual{position:absolute;right:0;bottom:0;left:0;top:0;min-width:100vw;min-height:100vh}

#section1 .intro-con{position:relative;z-index:1;max-width:53em;padding:0 1.5em;text-align:center;box-sizing:border-box}
#section1 .intro-con .txt-tit{margin-top:1em}
#section1 .intro-con .txt-sub{margin-top:2.2em}
#section1 .intro-con .txt-sub:first-child{margin-top:0}
#section1 .intro-con .btn{margin-top:3.5em}

#section2{min-height:100vh}
#section3{padding-top:6em}
#section4{min-height:100vh;padding-bottom:12em}

.box-align{display:flex;justify-content:space-between;width:100%;align-items:center}
.box-align .l-con{width:calc(100% - 42%)}
.box-align .r-con{width:42%}
.box-align .r-con.wide{width:55%}
.box-align .r-con img{border-radius:10px}

.inner-con{max-width:1300px;margin:0 auto;padding:0 1em}
.inner-con.narrow{max-width:680px}

#form-area{padding-top:2em;background:#F5F8FB}
#form-area .bottom-area{padding-bottom:10em}
.bottom-area{margin-top:3em;text-align:center}
.bottom-area .info-line{margin-bottom:2em}

.txt-top-area{display:flex;align-items:baseline;justify-content:space-between}
.txt-top-area .txt-top-left h2.txt-tit{padding-bottom:.2em}

.top-logo{display:inline-block;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s;}
.top-logo a,
.top-logo span{display:block;max-width:11.63em;width:186px;height:2.94em;background-position:0 0;background-repeat:no-repeat;background-size:contain;transition:background .3s;-webkit-transition:background .3s;-ms-transition:background .3s}

header{float:right;z-index:9000}
header .btn-companyInfo{float:left;display:block;border:1px solid #fff;border-radius:25px;padding:.8em 1.5em .8em;font-size:0.8em;text-align:center;transition:all .2s;-webkit-transition:all .2s;-ms-transition:all .2s}
header .btn-menu{float:right;/*margin:1.2em 0 0 2vw*/margin:0 0 0 2vw}

.ico-down{display:inline-block;width:19px;height:19px;background:url('../images/icon/ico-common.png') no-repeat -58px 1px;vertical-align:middle}
.btn-companyInfo .ico-down{margin-left:.3em}

.btn-menu{width:30px;height:24px;position:relative;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .2s ease-in-out;-moz-transition: .2s ease-in-out;-o-transition: .2s ease-in-out;transition: .2s ease-in-out;cursor: pointer}
.btn-menu:hover,.btn-menu:focus,.btn-menu:active{outline:none;border:none}
.btn-menu span{display:block;position:absolute;height:3px;width:100%;opacity:1;left:0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out}
.btn-menu span:nth-child(1){top:0px}
.btn-menu span:nth-child(2){top:9px;left:8px;width:22px}
.btn-menu span:nth-child(3){top:18px}
.btn-menu:not(.open):hover span:nth-child(1),
.btn-menu:not(.open):hover span:nth-child(3){left:8px;width:22px}
.btn-menu:not(.open):hover span:nth-child(2){left:0;width:100%}
.btn-menu.open span:nth-child(1){top:9px;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg)}
.btn-menu.open span:nth-child(2){opacity:0;left: -60px}
.btn-menu.open span:nth-child(3){top: 9px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg)}

.btn-menu span{background:#fff}
.top-logo a,
.top-logo span{background-image:url('../images/layout/logo-avivevent.png');transition:background .3s;-webkit-transition:background .3s;-ms-transition:background .3s}
.top-logo span{width:11.56em;height:3.13em}
.top-logo.black a{background-image:url('../images/layout/logo-avivevent-black.png');}
.gnb-chk.color-white .top-logo.black a{background-image:url('../images/layout/logo-avivevent.png');}

.gnb-chk[data-value='black-version'] .btn-menu span{background:#000}
.gnb-chk.color-white[data-value='black-version'] .btn-menu span{background:#fff}

.gnb-chk{position:fixed;left:0;right:0;z-index:9998;display:flex;justify-content:space-between;margin-top:0;padding:4em 4em 0 4em;box-sizing:border-box;transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s}
.gnb-chk.on{background:#000;padding:1.5em 4em;transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s}
.gnb-chk.on .btn-menu span{background:#fff}
.gnb-chk.on header .btn-companyInfo{color:#000}
.gnb-chk.on .btn-companyInfo .ico-down{background:url('../images/icon/ico-arrowSm-black.png') no-repeat 3px 2px}
.gnb-chk.on .btn-companyInfo{border-color:#333}

.gnb-chk.color-white{padding:4em 4em 0}

.gnb-chk.hide{margin-top:-7em;transition:all 1s;-webkit-transition:all 1s;-ms-transition:all 1s}

[data-aos^=fade].aos-animate.aosDelay1{transition-delay:.2s}
[data-aos^=fade].aos-animate.aosDelay2{transition-delay:.4s}
[data-aos^=fade].aos-animate.aosDelay3{transition-delay:.6s}
[data-aos^=fade].aos-animate.aosDelay4{transition-delay:.8s}
[data-aos^=fade].aos-animate.aosDelay5{transition-delay:1s}
[data-aos^=fade].aos-animate.aosDelay6{transition-delay:1.2s}
[data-aos^=fade].aos-animate.aosDelay7{transition-delay:1.4s}

#gnb{display:none;position:fixed;top:0;right:0;left:0;bottom:0;z-index:8000;height:100vh;background:url('../images/layout/bg-gnb.jpg');background-repeat:no-repeat;background-size:cover}
#gnb .menu-con{position:absolute;top:50%;left:50%;z-index:2;width:80%;text-align:center;transform:translate3d(-50%, -40%, 0);-webkit-transform:translate3d(-50%, -40%, 0);-ms-transform:translate3d(-50%, -40%, 0)}
#gnb ul li{line-height:1.8}
#gnb ul a{animation-name:m-eft;animation-duration:1s;position:relative;display:inline-block;color:#fff;font-size:3.750em;font-weight:100;letter-spacing:.05em;animation-fill-mode:both}
#gnb ul a:hover{transition:all .2s;font-weight:900}

#gnb.show ul li a{opacity:0;}
#gnb.show ul li:nth-child(2) a{animation-delay:.2s}
#gnb.show ul li:nth-child(3) a{animation-delay:.4s}
#gnb.show ul li:nth-child(4) a{animation-delay:.6s}
#gnb.show ul li:nth-child(5) a{animation-delay:.8s}

#gnb.hide ul li a{animation-name:m-eftClose;animation-duration:.5s}
#gnb.hide ul li:nth-child(2) a{animation-delay:.1s}
#gnb.hide ul li:nth-child(3) a{animation-delay:.2s}
#gnb.hide ul li:nth-child(4) a{animation-delay:.3s}
#gnb.hide ul li:nth-child(5) a{animation-delay:.4s}

.menu-con .menu-util{display:flex;align-items:center;justify-content:space-between;max-width:42em;margin:9em auto 0}
.menu-con .menu-util-item{font-size:1.56em;font-weight:300;color:#fff}
.menu-con .menu-util-item span{font-weight:500}

@keyframes m-eft{0%{opacity:0;top:-1em}100%{opacity:1;top:0}}
@keyframes m-eftClose{0%{opacity:1;top:0}100%{opacity:0;top:-1em}}

.btn-top{position:absolute;top:-13em;right:1.3em;display:inline-block;width:5em;height:5em;background:#1A88FF;border-radius:50%}
.btn-top .ico-arrowUp{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:2.50em;height:1.56em;background:url('../images/icon/ico-sm.png') no-repeat -6.2em -.25em;background-size:8.9375em}

#bg-eft{position:absolute;z-index:1;top:0;right:0;bottom:0;right:0;width:100%;height:100%}

#sub-container .top-visual{height:60em;background-size:cover;background-repeat:no-repeat;background-position:100% 100%}
#sub-container .top-visual .inner-con{display:flex;align-items:center;max-width:1450px;height:100%}
#sub-container .top-visual#sub-section1{background-image:url('../images/layout/bg-services-webApp.jpg')}
#sub-container .top-visual#sub-section2{background-image:url('../images/layout/bg-services-design.jpg')}
#sub-container .top-visual#sub-section3{background-image:url('../images/layout/bg-services-eventGame.jpg')}
#sub-container .top-visual#sub-section4{background-image:url('../images/layout/bg-services-marketing.jpg')}
#sub-container .top-visual#sub-section5{background-image:url('../images/layout/bg-services-video.jpg')}
#sub-container .top-visual#sub-section6{background-image:url('../images/layout/bg-services-onairSystem.jpg')}
#sub-container .top-visual#sub-section7{background-image:url('../images/layout/bg-services-mgSystem.jpg')}

.slide-area{padding:9em 0 15em;background:url('../images/layout/bg-slideArea.png') no-repeat 50% 100%;background-size:cover;box-sizing:border-box}

.txt-banner-wrap{padding:1em 0 7em;text-align:center}
.txt-banner-wrap .txt-banner-inner{max-width:1070px;margin:0 auto;padding:0 1.5em}
.txt-banner-wrap .txt-strong{font-size:2.188em;font-weight:700;color:#000;word-break:keep-all}
.txt-banner-wrap .point em{color:#fff}
.txt-banner-wrap .txt-strong-sub{margin-top:1.8em;font-size:1.563em;font-weight:400;color:#000;word-break:keep-all}


#footer{padding:3em 0;background:#333}
#footer .inner-con{position:relative}
.copy-info{margin-top:1.5em;font-size:14px;color:#c1c1c1;letter-spacing:-.1px}
.copy-info .line{margin-top:.2em}
.copy-info .line:nth-child{margin-top:0}
.copy-info .line span{position:relative;display:inline-block;padding-left:1em}
.copy-info .line span:before{content:'';position:absolute;left:.5em;top:50%;width:1px;height:15px;background:#c1c1c1;transform:translateY(-50%)}
.copy-info .line span:first-child{padding-left:0}
.copy-info .line span:first-child:before{display:none}
.copy-info a{display:inline-block;margin:1.8em 0 1.3em;font-size:1.14em;color:#c1c1c1}



.loading {opacity: 0;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 9999;display: flex;justify-content: center;align-items: center;background: #000;transition: opacity 1s;}
.loading object{width:20em}
.on .loading {opacity: 1;transition: opacity 1s}
.on .gnb-chk{opacity:0; transition:opacity 1s}