@import url('http://fonts.googleapis.com/css?family=Open+Sans');

a   {text-decoration: none;}
.pop_FaceScan   {position:absolute; top:0; right:0; background:rgba(15,19,26, 0.95); z-index:25; width:100%; height:100%; text-align:center;}

div.FaceScan    {position:relative; margin:0 auto; margin-bottom:3em; top:1em; width:900px; padding:30px 35px; height:auto; min-height:360px;
                font-family:'open sans';
                box-shadow:0 0 0 2px #414449; border:1px solid #666666; background:#0f131a url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/facescan_bg.jpg') no-repeat left top;}

H2.FS   {display:inline-block; margin-bottom:20px; color:#b61504; font-size:60px; letter-spacing:-0.03em; line-height:64px; text-align:left;
        padding:35px 0 30px 110px; background:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/facescan_icon.jpg') no-repeat left center;}
H2.FS > span    {display:block; padding-left:3px; color:white; font-size:22px; font-weight:600; letter-spacing:-0.01em; line-height:22px;}
H3.FS   {font-size:33px; color:#b61504; line-height:35px;}

article.introduce_fs    {}
p.whatis    {margin-top:20px; text-align:left; color:#ddd; font-size:18px; line-height:1.2em; text-align:center;}
div.movie   {height:420px; margin-bottom:-40px; background:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/facescan.png') no-repeat bottom right; text-align:left;}
div.movie iframe    {margin:50px 0 40px 10px; width:560px; height:315px; border:3px solid black;}
div.FaceScan hr     {border:0px; margin:40px 0 40px; border:none; border-top:1px solid #555;}


article.howto_fs    {position:relative; margin-bottom:80px; z-index:3;}
dl.cnt_steps    {position:relative; display:inline-block; vertical-align:top; width:35%; margin-left:-35px;}
    dl.cnt_steps:nth-of-type(1) {z-index:3; margin-left:0px;}
    dl.cnt_steps:nth-of-type(2) {z-index:2;}
    dl.cnt_steps:nth-of-type(3) {z-index:1;}
    dl.cnt_steps dt {margin:15px 0 5px; color:#ddd; font-size:24px; font-weight:600;}
    dl.cnt_steps dd {color:black;}
    dl.cnt_steps dd.screenshot > img    {margin-left:-15px; margin-right:5px;}
    dl.cnt_steps dd[class^="step"]      {margin:-5px 0 0; padding:10px 35px; height:65px;
                                        color:black; font-size:16px; font-weight:600; line-height:1.25em; text-align:left;
                                        background-size:100% 80px; background-position:center top; background-repeat:no-repeat;}
    dl.cnt_steps dd.step1  {background-image:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/step1_bg.png');}
    dl.cnt_steps dd.step2  {background-image:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/step2_bg.png');}
    dl.cnt_steps dd.step3  {background-image:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/step3_bg.png');}

article.howto_fs hr {border:none;}
.pop_btn_style   {display:inline-block; box-shadow:0 0 0 3px #b61504; border:2px solid white; background:#b61504; padding:0.5em 2.5em; color:white; font-size:20px; font-weight:600;}
    .pop_btn_style:hover    {background:white; color:#b61504; font-weight:700; letter-spacing:-0.02em;}

a.btn_win_prize_fs  {position:absolute; bottom:0; right:0; display:inline-block; width:300px; height:270px; z-index:1;}
a.prize_en  {background:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/facescan_btn_en.gif') no-repeat;}
a.prize_es  {background:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/facescan_btn_es.gif') no-repeat;}
a.prize_tr  {background:url('http://images.nttgameonline.com/knight/assets/events/facescan/images/facescan/facescan_btn_tr.gif') no-repeat;}

@media screen and (max-width:999px) {
div.FaceScan    {-moz-calc(100% - 100px); width:-webkit-calc(100% - 100px); width:-o-calc(100% - 100px); width:calc(100% - 100px);}
    div.movie   {height:auto; background-size:auto 100%;}
    div.movie iframe    {margin:30px 0; width:55vw; height:33vw;}
    dl.cnt_steps    {width:50%; margin-left:-5%;}
}

@media screen and (max-width:750px) {
dl.cnt_steps    {width:50%; margin-left:-5%;}
div.movie   {height:auto; background-size:auto 100%;}
div.movie iframe    {margin:30px 0; width:55vw; height:33vw;}
}

@media screen and (max-width:750px) {
div.FaceScan    {background-size:140px;}
dl.cnt_steps    {width:315px; margin:0 auto;}
div.movie iframe    {margin:10px 0 10px 10px; width:48vw; height:30vw;}
article.howto_fs    {margin-bottom:220px;}
}

@media screen and (max-width:550px) {
H2.FS   {font-size:60px; line-height:64px; margin-top:20px; padding:110px 0 30px 0px; background-position:center top; text-align:center;}
div.movie   {margin-bottom:0px; padding:50vw 0 0 0; background-size:80%; background-position:center top;}
    div.movie iframe    {margin-left:0; width:100%; height:43vw;}
}