@charset "utf-8";

@font-face{
    font-family:'NEXONLv1Gothic';
    font-style:normal;
    font-weight:normal;
    src: url('https://tales.nexon.com/fonts/NEXONLv1Gothic.eot');
    src: local("☺"),
         url('https://tales.nexon.com/fonts/NEXONLv1Gothic.eot?#iefix') format('embedded-opentype'),
         url('https://tales.nexon.com/fonts/NEXONLv1Gothic.woff') format('woff'),
         url('https://tales.nexon.com/fonts/NEXONLv1Gothic.ttf') format('truetype');
}
@font-face{
    font-family:'NEXONLv1Gothic';
    font-style:normal;
    font-weight:100;
    src: url('https://tales.nexon.com/fonts/NEXONLv1GothicLight.eot');
    src: local("☺"),
         url('https://tales.nexon.com/fonts/NEXONLv1GothicLight.eot?#iefix') format('embedded-opentype'),
         url('https://tales.nexon.com/fonts/NEXONLv1GothicLight.woff') format('woff'),
         url('https://tales.nexon.com/fonts/NEXONLv1GothicLight.ttf') format('truetype');
}
@font-face{
    font-family:'NEXONLv1Gothic';
    font-style:normal;
    font-weight:700;
    src: url('https://tales.nexon.com/fonts/NEXONLv1GothicBold.eot');
    src: local("☺"),
         url('https://tales.nexon.com/fonts/NEXONLv1GothicBold.eot?#iefix') format('embedded-opentype'),
         url('https://tales.nexon.com/fonts/NEXONLv1GothicBold.woff') format('woff'),
         url('https://tales.nexon.com/fonts/NEXONLv1GothicBold.ttf') format('truetype');
}

@font-face {
    font-family:'UniversLTStd';
    font-style:normal;
    font-weight:normal;
    src: url('https://tales.nexon.com/fonts/UniversLTStd-Cn.eot');
    src: local("☺"),
     url('https://tales.nexon.com/fonts/UniversLTStd-Cn.woff') format('woff'),
     url('https://tales.nexon.com/fonts/UniversLTStd-Cn.ttf') format('truetype');
}
@font-face {
    font-family:'UniversLTStd';
    font-style:normal;
    font-weight:100;
    src: url('https://tales.nexon.com/fonts/UniversLTStd-LightCn.eot');
    src: local("☺"),
     url('https://tales.nexon.com/fonts/UniversLTStd-LightCn.woff') format('woff'),
     url('https://tales.nexon.com/fonts/UniversLTStd-LightCn.ttf') format('truetype');
}
@font-face {
    font-family:'UniversLTStd';
    font-style:normal;
    font-weight:700;
    src: url('https://tales.nexon.com/fonts/UniversLTStd-BoldCn.eot');
    src: local("☺"),
     url('https://tales.nexon.com/fonts/UniversLTStd-BoldCn.woff') format('woff'),
     url('https://tales.nexon.com/fonts/UniversLTStd-BoldCn.ttf') format('truetype');
}

/* reset */
html, body, div, p, img, span, a, em, strong, pre, h1, h2, h3, h4, h4, h5, h6, ul, ol, li, dl, dt, dd, table, tbody, thead, tfoot, tr, th, td, form, fieldset, legend, caption, input, textarea, button, select, object, video, iframe{margin:0;padding:0}
header, article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section{display:block;margin:0;padding:0;vertical-align:baseline}
html{overflow-y:scroll}
body{position:relative;width:100%;font-family:'NEXONLv1Gothic', '맑은 고딕','Malgun Gothic', 'sans-serif';color:#333;line-height:1}
body, h1, h2, h3, h4, h5, h6{font-size:14px}
input, textarea, button, select{font-family:'NEXONLv1Gothic', '맑은 고딕','Malgun Gothic', 'sans-serif';font-size:14px}
textarea{overflow-y:auto;resize:none}
img, fieldset, button{border:0}
button{border:0;outline:0;background:none;cursor:pointer;*line-height:1 !important}
table{border-collapse:collapse;border-spacing:0}
ul, ol{list-style:none}
address{font-style:normal}
a{text-decoration:none;color:#333;background-color:transparent}
a, a:link{text-decoration:none}
a, img{vertical-align:top}
input[type=text]::-ms-clear, hr{display:none}
input:focus, textarea:focus{outline:0}
caption, legend{text-indent:-9999em;font-size:0;line-height:0;width:0;height:0}
.ir{display:block;text-indent:-99999px;overflow:hidden}
.blind{overflow:hidden;visibility:hidden;position:absolute;top:-9999em;left:0;width:0;height:0}

/* skip */
#skip a{position:absolute;display:block;width:100%;left:0;top:-9999px;text-align:center;z-index:99999999;font-size:12px}
#skip a:active, #skip a:focus{position:absolute;top:0;font-weight:bold;color:#fff;background:#000;padding: 15px 0}

/* layout */
#wrap{position:relative;min-width:1280px;overflow:hidden;padding-top:150px}
#wrap.w1600{padding-top:140px}
#wrap .bg_wrap{position:absolute;top:0;right:0;left:0;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/bg_wrap.jpg") 50% 0 no-repeat;min-width:1280px}
.section{position:relative;padding:0 62px}
.section .container{position:relative;max-width:1505px;min-width:1155px;margin:0 auto}

/* common */
.btn{display:inline-block;*zoom:1;transition:background-color 150ms linear}
a.btn{text-align:center}
.btn35{background:#222241;color:#fff;font-size:14px;height:35px;line-height:36px}
.btn100{position:relative;display:block;width:100px;height:100px;border-radius:100%;background:#000;background-color:rgba(0,0,0,0.8)}
.btn100 .arrow{position:absolute;top:50%;left:50%;width:29px;height:53px;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/spr_btn100_arrow.png") no-repeat;text-indent:-9999px;overflow:hidden;margin:-27px 0 0 -15px}
.btn100.next .arrow{background-position:-71px 0}
.btn100:before{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;border-radius:100%;opacity:0;background:rgba(95,136,255,0.8);transform:scale(0.8);transition:transform 200ms ease}
.btn100:hover{background:#5f88ff}
:root .btn100:hover{background:none}
.btn100:hover:before{opacity:1;transform:scale(1)}
.align{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;height:100%}
.number{font-family:'UniversLTStd', 'NEXONLv1Gothic', '맑은 고딕','Malgun Gothic', '돋움', 'dotum', 'sans-serif'}
.select{position:relative;z-index:1}
.select a{display:block}
.select .option{display:none;position:absolute}
.select.active .option{display:block}
textarea, input.text{border:0 none;background:none;background-color:rgba(255,255,255,0)}
.category{border-style:solid;text-align:center}
.char_img{width:133px;height:133px}

/* banner rolling */
.content .banner_rolling li{position:absolute;top:0;left:0}
.content .banner_rolling .banner_nav{position:absolute;background:#191930;background-color:rgba(25,25,48,0.9);font-size:0;text-align:center}
.content .banner_rolling .banner_nav .slash{display:inline-block;*zoom:1}
.content .banner_rolling .banner_nav .number{color:#fff}
.content .banner_rolling .banner_nav .leng{color:#ffdc51}
.content .banner_rolling .banner_nav a{position:absolute;top:0;height:100%}
.content .banner_rolling .banner_nav .prev{left:0}
.content .banner_rolling .banner_nav .next{right:0}

/* news list */
.news_list li a{position:relative;display:block;white-space:nowrap;word-wrap:break-word;text-overflow:ellipsis;overflow:hidden}
.news_list li .category{position:absolute;top:0;left:0}

/* header */
.section#header{position:absolute;top:0;left:0;right:0;z-index:1000;overflow:hidden;transition:padding-bottom 150ms linear, background-color 150ms linear;padding-top:70px}
.section#header .icon{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/spr_header.png") no-repeat}
.section#header .container{background:#191930}
.section#header .bg_header{position:absolute;top:100%;left:0;right:0;width:100%;height:254px;background:#364393}
.section#header h1{position:absolute;top:11px;left:20px}
.section#header h1 a{display:block;width:138px}
.section#header h1 a img{width:100%}
.section#header .nav{border:1px solid #030D1A;padding-left:167px}
.section#header .nav .nav_wrap{position:relative;height:78px}
.section#header .nav .bg_nav{position:absolute;top:100%;left:0;width:0;height:254px;background:#2A3381;margin-top:1px}
.section#header .nav ul{position:relative;height:100%;zoom:1}
.section#header .nav ul:after{content:"";display:block;clear:both}
.section#header .nav li{float:left;position:relative;height:100%}
.section#header .nav li a{position:relative;display:block;text-align:center}
.section#header .nav li .new:before{content:"";display:inline-block;vertical-align:top;width:4px;height:4px;border-radius:100%;border:1px solid #F6569E;background:#F6569E;margin:0 5px 0 -10px} 
.section#header .nav li .depth1.new:before{margin-top:26px}
.section#header .nav li .depth1{height:100%;line-height:80px;font-size:22px;color:#99a4c6;letter-spacing:-1px;transition:color 200ms linear}
.section#header .nav .on .depth1, .section#header .nav .depth1:hover{color:#ffd02c}
.section#header .nav1{width:9.29%;max-width:124px;min-width:94px}
.section#header .nav2{width:11.01%;max-width:144px;min-width:114px}
.section#header .nav3{width:10.63%;max-width:142px;min-width:113px}
.section#header .nav4{width:9.36%;max-width:125px;min-width:96px}
.section#header .nav5{width:10.71%;max-width:143px;min-width:119px}
.section#header .nav li div{position:absolute;top:100%;left:0;width:100%;padding-top:1px}
.section#header .nav li ul{height:200px;border-right:1px solid #303B8A;padding-top:19px}
.section#header .nav .nav5 ul{border-right:0 none}
.section#header .nav li li{float:none;height:auto}
.section#header .nav li li a{height:35px;line-height:35px;color:#94abf1}
.section#header .nav li li a:hover{color:#b579ff}
.section#header .nav li li a.new:before{margin-top:7px}
.section#header .nav li li a .window{display:inline-block;*zoom:1;vertical-align:middle;width:10px;height:10px;background-position:-490px -23px;margin:0 0 2px 3px}
.section#header .nav li li a:hover .window{background-position:-490px 0}
.section#header .login{position:absolute;top:0;right:0;width:14.62%;max-width:220px;min-width:204px;height:100%;padding-right:350px}
.section#header .login .login_box{position:relative;height:100%;background:#000034}
.section#header .login .login_box.case_logout{background:none}
.section#header .login .case_logout .logout_btn{position:absolute;top:50%;left:0;width:100%; height:55px;text-align:center;margin-top:-27px;}
.section#header .login .case_logout a{display:inline-block;*zoom:1;transition:all 200ms ease}
.section#header .login .case_logout .link_login{height:23px;line-height:25px;font-size:18px;color:#b579ff;margin-bottom:7px}
.section#header .login .case_logout .link_login:hover{color:#7fa0ff}
.section#header .login .case_logout .link_login .icon{display:inline-block;*zoom:1;vertical-align:top;width:24px;height:23px;background-position:-262px 0;margin-right:6px}
.section#header .login .case_logout .link_login:hover .icon{background-position:-262px -35px}
.section#header .login .case_logout .link_find{color:#6555c0;font-size:12px;width:142px; height:23px; line-height: 23px; border:1px solid #6555c0;}
.section#header .login .case_logout .link_find:hover{color:#fff; background-color: #7d9efd; border:1px solid #7d9efd;}
.section#header .login .login_box .char_btn{font-size:0}
.section#header .login .login_box .btn20{height:20px;line-height:21px;background:#2A3281;color:#94abf1;font-size:11px}
.section#header .login .login_box .btn20:hover, .section#header .login .login_box .btn20:focus{background:#364393}
.section#header .login .login_box .btn20.btn_logout{width:52px}
.section#header .login .login_box .btn20.btn_char{width:94px}
.section#header .login .char_none{position:absolute;top:50%;left:0;width:100%;text-align:center;margin-top:-20px}
.section#header .login .char_none p{font-size:12px;color:#a6a6a6;margin-bottom:8px}
.section#header .login .char_none .char_btn .btn20{margin:0 2px}
.section#header .login .case_default{position:static}
.section#header .login .case_default .char_default{height:100%;text-align:center;font-size:0}
.section#header .login .case_default .nickname, .section#header .login .case_default .btn_logout{vertical-align:middle}
.section#header .login .case_default .char_default .nickname{display:inline-block;*zoom:1;max-width:93px;word-wrap:break-word;line-height:17px;font-size:14px;color:#b579ff;padding-right:8px}
.section#header .login .char_detail{position:absolute;top:100%;left:0;right:0;height:223px;background:#2A3281;padding:31px 0 0 220px}
.section#header .login .char_detail .char_visual{position:absolute;left:44px;top:29px;width:148px;height:145px}
.section#header .login .char_detail .char_graph{width:100%;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/bg_graph_my.png") 3px 4px no-repeat}
.section#header .login .char_detail .char_graph svg{-ms-transform:rotate(40deg);transform:rotate(40deg)}
.section#header .login .char_detail .char_img{position:absolute;left:-10px;top:-35px}
/* 2022-02-18 : GNB > 대표캐릭터 초상화 좌표 이상한 듯 하여 테스트
.section#header .login .char_detail .char_img{position:absolute;left:0;right:0;top:calc(50% - 133px/2);width:100%;text-align:center;} 
*/
.section#header .login .char_detail .number{position:absolute;bottom:-15px;left:0;width:100%;font-size:30px;color:#b579ff;text-align:center}
.section#header .login .char_detail .char_desc{padding:0 30px 8px 0}
.section#header .login .char_detail dl{position:relative;overflow:hidden;margin-bottom:23px}
.section#header .login .char_detail dt, .section#header .login .char_detail dd{line-height:17px}
.section#header .login .char_detail dt{position:absolute;top:0;left:0;width:64px;font-size:12px;color:#94abf1;margin-right:8px}
.section#header .login .char_detail dt .text{position:relative;display:inline-block;*zoom:1;background:#2A3281;padding-right:8px}
.section#header .login .char_detail dt .line{position:absolute;left:0;top:7px;width:100%;height:1px;background:#40478E}
.section#header .login .char_detail dd{color:#dabdff;word-wrap:break-word;padding-left:72px}
.section#header .login .char_detail .char_btn .btn{width:108px;height:23px;border:1px solid #6356C0;font-size:14px;line-height:24px;color:#9c79ff;margin-right:5px}
.section#header .login .char_detail .char_btn .btn:hover, .section#header .login .char_detail .char_btn .btn:focus{color:#2a3281;background:#9C79FF;border-color:#9C79FF}
.section#header .game_btn{position:absolute;top:0;right:0;bottom:0;width:350px;height:100%}
.section#header .game_btn button{display:block}
.section#header .game_btn .btn_start{width:100%;height:100%;padding-left:50px}
.section#header .game_btn .btn_start, .section#header .game_btn .btn_start .bg_start{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/spr_bg_game-start.jpg") 50% 0 no-repeat}
.section#header .game_btn .btn_start .bg_start{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% -80px;filter:alpha(opacity=0);opacity:0;transition:all 300ms linear}
.section#header .game_btn .btn_start .ir{position:relative;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/btn_game-start_off.png") 50% 50% no-repeat;transition:background-image 300ms linear}
.section#header .game_btn .btn_start .border{position:absolute;top:0;left:0;right:0;bottom:0;border-top:1px solid #4000F2;border-bottom:1px solid #2600AB;border-right:1px solid #2600AB}
.section#header .game_btn .btn_start:hover .bg_start, .section#header .game_btn .btn_start:focus .bg_start{filter:alpha(opacity=100);opacity:1}
.section#header .game_btn .btn_start:hover .ir, .section#header .game_btn .btn_start:focus .ir{background-image:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/btn_game-start_on.png")}
.section#header .game_btn .btn_start :hover.border, .section#header .game_btn .btn_start:focus .border{border-top-color:#7500F2;border-right-color:#5500D6;border-bottom-color:#3E00C0}
.section#header .game_btn .hover .btn_start span{background-position:50% -240px}
.section#header .game_btn .btn_install{position:absolute;top:0;left:0;width:50px;height:100%;font-size:12px;color:#c1a8ff}
.section#header .game_btn .btn_install .bg_install{position:absolute;top:0;left:0;width:100%;height:100%;background:#00014A;filter:alpha(opacity=40);opacity:0.4}
.section#header .game_btn .btn_install .text{position:absolute;top:50%;left:0;width:100%;height:49px;line-height:14px;margin-top:-24px}
.section#header .game_btn .btn_install .icon{display:block;width:20px;height:16px;background-position:-303px 0;margin:0 auto 5px}
.section#header .game_btn .btn_install:hover, .section#header .game_btn .btn_install:focus{color:#dda8ff}
.section#header .game_btn .btn_install:hover .icon, .section#header .game_btn .btn_install:focus .icon{background-position:-335px 0}
.section#header .quick{position:absolute;top:-45px;left:9px}
.section#header .quick ul{overflow:hidden}
.section#header .quick li{float:left;margin-right:10px}
.section#header .quick li a{display:block;line-height:31px}
.section#header .quick li a .icon{display:inline-block;*zoom:1;width:29px;height:29px;vertical-align:top}
.section#header .quick .fb a:hover .icon, .section#header .quick .fb a:focus .icon{background-position:0 -50px}
.section#header .quick .tw .icon{background-position:-39px 0}
.section#header .quick .tw a:hover .icon, .section#header .quick .tw a:focus .icon{background-position:-39px -50px}
.section#header .quick .yt .icon{background-position:-78px 0}
.section#header .quick .yt a:hover .icon, .section#header .quick .yt a:focus .icon{background-position:-78px -50px}
.section#header .quick .cf a{color:#ffe3b2}
.section#header .quick .cf .icon{background-position:-117px 0;margin-right:8px}
.section#header .quick .cf a:hover, .section#header .quick .cf a:focus{color:#fff}
.section#header .quick .cf a:hover .icon, .section#header .quick .cf a:focus .icon{background-position:-117px -50px}
.section#header .util{position:absolute;top:-33px;right:-7px}
.section#header .util ul{overflow:hidden}
.section#header .util li{float:left;position:relative;line-height:19px;padding:0 16px 0 15px}
.section#header .util li, .section#header .util li a{color:#d7e4f3}
.section#header .util li a:hover, .section#header .util li a:focus{color:#fff}
.section#header .util li a, .section#header .util li span{display:inline-block;*zoom:1}
.section#header .util .icon{height:17px;vertical-align:top;margin-right:6px}
.section#header .util .pcbang .icon{width:35px;background-position:0 -137px}
.section#header .util .pcbang .on{background-position:0 -111px}
.section#header .util .pcbang a:hover .icon, .section#header .util .pcbang a:focus .icon{background-position:0 -188px}
.section#header .util .pcbang a:hover .on, .section#header .util .pcbang a:focus .on{background-position:0 -161px}
.section#header .util .faq .icon{width:22px;background-position:-133px -111px}
.section#header .util .faq a:hover .icon, .section#header .util .faq a:focus .icon{background-position:-133px -161px}
.section#header .util .bug .icon{width:14px;background-position:-247px -111px}
.section#header .util .bug a:hover .icon, .section#header .util .bug a:focus .icon{background-position:-247px -161px}
.section#header .util li:before{position:absolute;top:50%;right:0;content:"";width:1px;height:11px;background:#9EA5CE;filter:alpha(opacity=30);opacity:0.3;vertical-align:middle;margin-top:-6px}
.section#header .util li:last-child:before{display:none}

.fixed .section#header{position:fixed;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/bg_header.jpg") 0 0 repeat-x;padding-top:0}
.fixed .section#header h1 a, .w1600 .section#header h1 a{width:111px}
.fixed .section#header .nav_wrap, .w1600 .section#header .nav_wrap{height:68px}
.fixed .section#header li .depth1, .w1600 .section#header li .depth1{line-height:70px}
.w1600 .section#header .nav li .depth1{font-size:18px}
.section#header.w1600 .game_btn .btn_start .ir{background-size:313px auto}
.section#header.open{background-color:#3C4B9D;padding-bottom:254px}

/* footer */
.section#footer .container{height:177px;border-top:4px solid #F2F2F2;font-weight:lighter;padding-top:40px}
.section#footer .footer_nav{*zoom:1;margin-bottom:11px}
.section#footer .footer_nav:after{content:"";display:block;clear:both}
.section#footer .footer_nav li{position:relative;float:left;position:relative;margin-right:10px}
.section#footer .footer_nav li a{display:block;color:#666;font-size:12px;margin-right:11px}
.section#footer .footer_nav li a:hover{text-decoration:underline}
.section#footer .footer_nav li .strong{color:#000}
.section#footer .footer_nav li:before{content:"";position:absolute;top:50%;right:0;width:1px;height:11px;background:#D1D1D1;margin-top:-6px}
.section#footer .footer_nav li:last-child:before{display:none}
.section#footer address, .section#footer .copyright{font-size:11px;line-height:16px}
.section#footer address, .section#footer address a,  .section#footer .copyright{color:#999}
.section#footer address span, .section#footer address a{display:inline-block;*zoom:1;margin-right:12px}
.section#footer address .link_license{display:inline-block;*zoom:1;border-bottom:1px solid #E8E8E8;vertical-align:middle;line-height:11px}
.section#footer .footer_logo{font-size:0;margin-top:8px}
.section#footer .footer_logo span, .section#footer .footer_logo a{display:inline-block;*zoom:1;vertical-align:middle}
.section#footer .footer_logo .nexon, .section#footer .footer_logo .kidea{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/spr_logo.png") no-repeat}
.section#footer .footer_logo .nexon{position:relative;width:70px;height:22px;padding-right:17px;margin-right:16px}
.section#footer .footer_logo .nexon:before{position:absolute;top:2px;right:0;content:"";width:1px;height:20px;background:#DFE0E0}
.section#footer .footer_logo .kidea{width:38px;height:38px;background-position:0 -82px}

/* layerpop */
.layerpop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999999;overflow:hidden;overflow-y:auto}
.layerpop.show{display:block}
.layerpop .bg{position:absolute;top:0;left:0;right:0;width:100%;min-height:100%;background:#000;filter:alpha(opacity=80);opacity:0.8}
.layerpop .pop_content{position:absolute;top:50%;left:50%;background:#fff}
.layerpop .btn_close{position:absolute;right:0;top:-84px;width:54px;height:54px;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/common/spr_btn_layerpop.png") no-repeat;text-indent:-99999px;overflow:hidden}
.layerpop .fixed_btn .btn_close{position:fixed;right:50px;top:50px}
.layerpop .btn_close:hover{background-position:-127px 0}
.layerpop.scrollpop .pop_content{top:103px;margin-top:0;margin-bottom:20px}
.layerpop.scrollpop .pop_content.fixed_btn{top:20px}
.layerpop.scrollpop .bg{padding-bottom:40px}

/* alert */
.pop_alert .pop_content{width:465px;height:320px;font-weight:lighter;text-align:center;margin:-160px 0 0 -232px}
.pop_alert .msg1{padding-top:40px}
.pop_alert .msg1 .gif{display:block;width:94px;height:94px;line-height:94px;border-radius:100%;background:#FBF8FF;margin:0 auto 16px}
.pop_alert .msg1 .gif img{vertical-align:middle}
.pop_alert .msg1 .strong{font-size:24px;margin-bottom:12px}
.pop_alert .msg1 .strong span{color:#7489f6}
.pop_alert .msg1 .small{color:#666;line-height:17px}
.pop_alert .pop_btn{position:absolute;left:0;bottom:54px;width:100%;font-size:0}
.pop_alert .pop_btn .btn35{width:115px}

/* simpleModal */

#simpleModal{display: none; position: absolute; top:0; left:0; right:0; bottom:0;}
.dimmded{position: relative;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7); }
#modal_content{position: absolute; cursor: pointer; }
#modal_content img{width:100%;}