@charset "utf-8"; #divVisual {position:relative; width:100%; text-align:center; overflow:hidden; margin:-150px auto 0; height:100vh; background:#000;} /*1920 1200 */ #divVisual .divVisual { width:100%; min-width:1400px;z-index:-50;margin:0 auto;} #divVisual .divVisual .rowgroup {position:relative; z-index:1;height:1200px;} #divVisual .divVisual .rowgroup .visual {position:relative;width:1920px;height:1200px;} #divVisual .divVisual .rowgroup .visual .visual_control {position:absolute; bottom:10px; left:0; z-index:20; width:100%;} #divVisual .divVisual .rowgroup .visual .visual_control .wrap {/*text-align:right; margin-right:50px;*/} #divVisual .divVisual .rowgroup .visual .visual_control .circle_btn {display:inline-block; width:27px; height:27px; margin-right:5px; background:url('../images/main/visual_control_off.png') no-repeat left top; text-indent:-9999px; vertical-align:middle;} #divVisual .divVisual .rowgroup .visual .visual_control .circle_btn.active {width:99px; height:27px;background-image:url('../images/main/visual_control_on.png');} #divVisual .divVisual .rowgroup .visual .visual_control .visual_stop {display:inline-block; width:27px; height:27px; margin-right:10px; background:url('../images/main/visual_control_stop.png') no-repeat left top; text-indent:-9999px; vertical-align:middle;} #divVisual .divVisual .rowgroup .visual .visual_control .visual_stop {font-size:0; text-indent:0;} #divVisual .divVisual .rowgroup .visual .visual_control .visual_play {display:inline-block; width:27px; height:27px; margin-right:10px; background:url('../images/main/visual_control_play.png') no-repeat left top; text-indent:-9999px; vertical-align:middle;} #divVisual .divVisual .rowgroup .visual .visual_list {overflow:hidden; position:relative; z-index:10; width:100%; height:100%;} #divVisual .divVisual .rowgroup .visual .visual_list ul {position:relative; height:100%;} #divVisual .divVisual .rowgroup .visual .visual_list ul li {display:none; position:absolute; top:0; left:0; } #divVisual .divVisual .rowgroup .visual .visual_list ul li:first-child {display:block;} #divVisual .divVisual .rowgroup .visual .visual_list ul li.active {z-index:10;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap {position:relative; line-height:0;height:1200px;width:1920px;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_img {position:relative; overflow:hidden;width:1920px; max-height:1200px; text-align:center;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_img img {width:1920px;height:1200px; animation: mainbgZoomin 1.4s ;animation-delay: 100ms ;animation-fill-mode: forwards;} /* txt -> visual_cont */ #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont {top:30%; position:absolute; border:0px solid #ff0000; color:#fff; z-index:200; width:1400px; left: calc(50% - 700px); text-align:left;line-height:6em;} /*#divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont .wrap {width:auto; margin:0;}*/ /*#divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont p{ width:100%; max-width:1400px; position:absolute; z-index:-50; left:400px; margin-left:-550px; text-align:center; margin:0 auto; top:85px;}*/ /*#divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont img{border:0px solid #fff;max-width:100%;}*/ #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txts{font-size:72px; font-weight:800;opacity:0;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtm{font-size:80px; font-weight:600;opacity:0;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtl{font-size:100px; font-weight:800;opacity:0;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txts1{font-size:72px; color:#003399;font-weight:800;opacity:0;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtm1{font-size:80px; color:#003399;font-weight:600;opacity:0;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtl1{font-size:100px; color:#003399;font-weight:800;opacity:0;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txts2{font-size:72px; color:#000;font-weight:800;opacity:0;text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtm2{font-size:80px; color:#000;font-weight:600;opacity:0;text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtl2{font-size:100px; color:#000;font-weight:800;opacity:0;text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txts3{font-size:72px; color:#003399;font-weight:800;opacity:0;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtm3{font-size:80px; color:#003399;font-weight:600;opacity:0;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont span.txtl3 {font-size:100px; color:#003399;font-weight:800;opacity:0;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont .v_btn{border:1px solid rgba(255,255,255,0.3); padding:20px 30px; line-height:50px; height:50px; color:#fff; opacity:0;} #divVisual .divVisual .rowgroup .visual .visual_list ul li .visual_wrap .visual_cont .v_btn .arr{padding-left:80px;opacity:0;} #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtm, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtm1, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtm2, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtm3 {font-size:80px; font-weight:600;animation: mainbgTxtDsp 1.4s ;animation-delay: 500ms ;animation-fill-mode: forwards;} #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txts, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txts1, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txts2, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txts3 {font-size:72px; font-weight:800;animation: mainbgTxtDsp 1.4s ;animation-delay: 800ms ;animation-fill-mode: forwards;} #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtl, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtl1, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtl2, #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont span.txtl3 {font-size:100px; font-weight:800;animation: mainbgTxtDsp 2s ;animation-delay: 1100ms ;animation-fill-mode: forwards;} #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont .v_btn{border:1px solid rgba(255,255,255,0.3); padding:20px 30px; line-height:50px; height:50px; color:#fff; animation: mainbgTxtDsp 1s ;animation-delay: 1800ms ;animation-fill-mode: forwards;} #divVisual .divVisual .rowgroup .visual .visual_list ul li.active .visual_wrap .visual_cont .v_btn .arr{padding-left:80px;animation: mainbgTxtDsp 1.4s ;animation-delay: 2000ms ;animation-fill-mode: forwards;} @keyframes mainbgZoomin { 0% {transform: scale(1.2);} 100% {transform: scale(1);}} @keyframes mainbgTxtDsp { 0% {opacity:0;} 100% {opacity:1}}