#site-wrap.steam #top-row{width:686px; float:right;} /* Play */ #play { float: left; } /* Herobanner */ #herobanner, #viewport, .banner { width: 699px; height: 260px; /*width: 701px; height: 262px;*/ } #herobanner.steam, #viewport.steam, .banner.steam { width: 688px; height: 246px; overflow:hidden; } #herobanner { background: #171717; border: 1px solid #000; float: right; } #viewport { background: #000; position: relative; } .banner { position: absolute; display: block; } #caption { width: 153px; height: 26px; position: absolute; top: 0; right: 0; display: none; } #thumb-controls { position: absolute; bottom: 20px; right: 14px; } #thumb-controls li { width: 11px; height: 11px; margin-right: 11px; background: transparent url(https://cdn.valofe.com/at/web/us/images/banners/thumb-dots-xl.png) left top no-repeat; float: left; cursor: pointer; } #thumb-controls li.active { background-position: left bottom; } /* News module */ #more-news { font-family: 'Quattrocento', serif; font-size: 14px; color: #cacbf0; position: absolute; right: 12px; } #more-news:hover { text-decoration: underline; } .news-article {height: 42px; padding-top: 10px; padding-bottom:16px; color: #3e3e3e; border-bottom: 1px dashed #8d8d8d; overflow: hidden; } .news-article h4 { margin-bottom: 7px; float: left; } .news-article h4 a { font-family: 'Quattrocento', serif; font-weight: normal; font-size: 17px; color: #333; } .news-info { line-height: 16px; float: right; } .news-info li { width: 69px; height: 16px; text-align: center; float: left; } #body-wrap .news-info.cn li { letter-spacing: 0px; } .news-type { font-size: 10px; color: #ccc; text-transform: uppercase; background: #3f3f3f; } .news-date { color: #666666; margin-right: 12px; font-size: 11px; } .news-copy { clear: both; font-size:14px; } .news-copy img { width: 615px; height: auto; margin-bottom: 14px; background: #444; /*border: 1px solid #444;*/ display: none; } .news-copy p { font-size: 14px; line-height: 20px; display: none; } .news-copy p + p { margin-top: 20px; } .news-copy .read-more-news { font-size: 12px; color: #8859ad; border-bottom: 1px dotted #8859ad; } /* Expanded overrides */ .news-article.expanded { height: auto; padding: 25px 0 26px; color: #3e3e3e; border-bottom: 1px dashed #8d8d8d; } .news-article.expanded h4 { float: none; } .news-article.expanded h4 a { font-family: 'Quattrocento', serif; font-weight: normal; font-size: 23px; color: #000; line-height:27px } .expanded .news-info { margin-bottom: 15px; float: none; } .expanded .news-copy img, .expanded .news-copy p { display: block; } .short {max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .expanded .short {max-width: 600px} #viewport img {/*width:699px; height:260px;*/width: 100%; height: 100%;} /* 20161227_스크린샷 썸네일 추가 */ .screen_list {/*margin-left:-12px;*/ padding:23px 0 19px; *overflow:hidden;} .screen_list li.thumb_screen {display:inline-block; *float:left; *width:184px; margin-left:9px; padding-right:12px; border-right:1px dashed #8d8d8d;} /* 썸네일 리스트 이미지 고정(수정 금지) */ .screen_list li.thumb_screen p img {width:181px !important; height:181px !important; margin-bottom:4px;} .no-border {border:none !important;} /* 2017.08.30 START 동영상 팝업 */ /* popup */ .pop_wrap{position:relative; width:100%; height:100%; margin:0 auto; padding:0;top:0;left:0;} .pop_container{display:none; position:absolute; top:15rem; left:50%; margin-left:-490px;width:980px; z-index:110;} .pop_container .skip{position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; visibility:hidden;} .pop_container .today_close{display:inline-block; position:absolute; top:-40px; left:0;width:calc(100% - 80px);height:40px;line-height:30px;font-size: 16px; color:#fff;text-shadow:0px 1px #000;text-align:left;text-decoration:none;font-family:"Malgun Gothic", san-serif;} .pop_container .today_close:hover{color:#F46032;} .pop_container #close{display:inline-block;z-index:10; position:absolute; top:-50px; right:5px; width:40px; height:40px; background:url('/static/images/pop_close.png') 0 0 no-repeat; transition:transform .4s ease .1s;text-indent:-9999px;} .pop_container #close:hover{background:url('/static/images/pop_close_on.png') 0 0 no-repeat; -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); -webkit-transition:0.6s; -moz-transition:0.6s; -o-transition:0.6s; -webkit-transition:0.6s; transition:0.6s; } .pop_container .frame{position:relative; overflow:hidden; margin:0; padding:0; box-sizing:border-box; width:980px; height:554px; box-shadow:0px 5px 20px rgba(0,0,0,0.5);} .pop_container .frame a{display:block; width:980px; height:554px;} /* youtube 대체 이미지 */ .pop_container .mv-img{position:absolute; top:0; left:0;z-index:110;width:980px; height:100%; background-image: url('/static/images/mv-img1.jpg'); background-size: 100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/images/mv-img1.jpg', sizingMethod='scale'); /* 트랜지션 쇼트핸드 불가 : 사파리 */ /* transition: all .2s ease-in; */ -ms-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -ms-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -ms-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } .pop_container .frame a:hover .mv-img{background-image: url('/static/images/mv-img2.jpg');} .pop_container .mv-frame{position:absolute;top:0; left:0;z-index:130;width:980px; height:554px; background-image: url('/static/images/mv-frame.png'); background-size: 100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/images/mv-frame.png', sizingMethod='scale'); } .pop_container .bt-mv{z-index:130;position:absolute;display:inline-block;top:50%;margin-top:-48px;left:50%;margin-left:-80px;width:159px; height:99px; background:url('/static/images/bt-play.png') center center no-repeat; text-indent:-9999px;} .pop_container .frame:hover .bt-mv{background:url('/static/images/bt-play-on.png') center center no-repeat;} .pop_container .frame .bt-mv:hover {background:url('/static/images/bt-play-on.png') center center no-repeat;} /* 애니메이션 */ .shadow{display:none; width:100%; height:100%; position:fixed; padding-bottom:0px;top:0; left:0; z-index:100; background-size:cover;background: url('/static/images/shadow.png') center top repeat-y;} .animationOn{ animation-name:animationOn; animation-duration:.5s; animation-fill-mode: both; -webkit-animation-name:animationOn; -webkit-animation-duration:.5s; -webkit-animation-fill-mode: both; } .off{display:none;} .animationOff{animation-name:animationOff;animation-duration:.5s; animation-fill-mode: both; -webkit-animation-name:animationOff;-webkit-animation-duration:.5s; -webkit-animation-fill-mode: both; } .bounceInLeft {animation-name:bounceInLeft; animation-duration:1s; -webkit-animation-name:bounceInLeft; -webkit-animation-duration:1s; } /* 애니메이션 animationOn */ @-ms-keyframes animationOn { 0% {opacity:0; -ms-transform:scale(0); } 100% {opacity:1; -ms-transform:scale(1); } } @-webkit-keyframes animationOn { 0% {opacity:0; -webkit-transform:scale(0); } 100% {opacity:1; -webkit-transform:scale(1); } } @-moz-keyframes animationOn { 0% {opacity:0; -moz-transform:scale(0); } 100% {opacity:1; -moz-transform:scale(1); } } @-o-keyframes animationOn { 0% {opacity:0; -o-transform:scale(0); } 100% {opacity:1; -o-transform:scale(1); } } @keyframes animationOn { 0% {opacity:0; transform:scale(0); } 100% {opacity:1; transform:scale(1); } } /* 애니메이션 animationOff */ @-ms-keyframes animationOff { 0% {opacity:1; -ms-transform:scale(1); } 100% {opacity:0; -ms-transform:scale(0); } } @-webkit-keyframes animationOff { 0% {opacity:1; -webkit-transform:scale(1); } 100% {opacity:0; -webkit-transform:scale(0); } } @-moz-keyframes animationOff { 0% {opacity:1; -moz-transform:scale(1); } 100% {opacity:0; -moz-transform:scale(0); } } @-o-keyframes animationOff { 0% {opacity:1; -o-transform:scale(1); } 100% {opacity:0; -o-transform:scale(0); } } @keyframes animationOff { 0% {opacity:1; transform:scale(1); } 100% {opacity:0; transform:scale(0); } } /* 애니메이션 bounceInLeft */ @-ms-keyframes bounceInLeft { 0% { left:-50%; } 50% { left:30%; } 100% { left:0%; } } @-webkit-keyframes bounceInLeft { 0% { left:-50%; } 50% { left:30%; } 100% { left:0%; } } @-moz-keyframes bounceInLeft { 0% { left:-50%; } 50% { left:30%; } 100% { left:0%; } } @-o-keyframes bounceInLeft { 0% { left:-50%; } 50% { left:30%; } 100% { left:0%; } } @keyframes bounceInLeft { 0% { left:-50%; } 50% { left:30%; } 100% { left:0%; } } @media all and (max-width:768px){ .pop_container{margin-left: -16em;} } @media screen and (max-width : 414px){ .pop_container{margin-left: -17em;} } @media screen and (max-width : 375px){ .pop_container{margin-left: -16em;} } @media screen and (max-width : 360px){ .pop_container{margin-left: -15em;} } /* 2017.08.30 END 동영상 팝업 끝*/