.popup{ position:fixed; right:0; top:50%; z-index:1100; width:88px; height:122px; margin-top:-60px;}
.popup ul li{ float:right; width:78px; height:60px; font-size:12px; color:#fff; line-height:20px; text-align:center; background-color:#f14702; cursor:pointer; margin-bottom:1px; -webkit-border-top-left-radius:3px; border-bottom-left-radius:3px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.popup ul li:hover{ width:88px;}
.popup ul li dl{ width:22px; height:22px; background-repeat:no-repeat; background-position:center; background-size:22px 22px; margin:10px auto 3px;}
.popup ul li a{ display:block; width:100%; height:100%; color:#fff;}

.modal-open{ overflow:hidden;}
.modal{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:1050; display:none; overflow:hidden; -webkit-overflow-scrolling:touch; outline:0; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
.modal.fade .modal-dialog{ -webkit-transform:translate(0, -25%); transform:translate(0, -25%); -webkit-transition:-webkit-transform .3s ease-out; transition:transform .3s ease-out;}
.modal.in .modal-dialog{ -webkit-transform:translate(0, 0); transform:translate(0, 0);}
.modal-open .modal{ overflow-x:hidden; overflow-y:auto;}
.modal-dialog{ width:580px; position:relative;}
.modal-content{ position:relative; -webkit-background-clip:padding-box; background-clip:padding-box; outline:0;}
.modal-content img{ width:100%;}
.modal-content .modal-text{ position:absolute; left:0; top:0; width:100%; height:100%; padding:15px;}
.modal-content .modal-text dl{ width:100%; height:100%; border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; justify-content:center; flex-direction:column; text-align:center;}
.modal-content .modal-text dl h2{ font-size:24px;}
.modal-content .modal-text dl h1{ font-size:45px; margin:18px 0 15px;}
.modal-content .modal-text dl p{ line-height:24px; margin:0 95px;}
.modal-content .modal-text dl a{ display:block; width:180px; height:40px; line-height:40px; font-size:22px; font-weight:bold; color:#fff; background-color:#f98f1d; margin:25px auto 0; -webkit-border-radius:20px; border-radius:20px; box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.modal-content .modal-text dl a:hover{ background-color:#f9ae1d;}
.close{ position:absolute; top:20px; right:25px; z-index:1080; font-size:20px; font-weight:bold; color:#fff; cursor:pointer; border:0; background:transparent; -webkit-appearance:none;}
.close:hover,.close:focus{ color:#f98f1d;}
.modal-backdrop{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:1040; background-color:#000;}
.modal-backdrop.fade{ filter:alpha(opacity=0); opacity:0;}
.modal-backdrop.in{ filter:alpha(opacity=0); opacity:0;}

@media screen and (max-width:800px){ 
.popup{ display:none;}
.modal-dialog{ width:93%;}
}
@media screen and (max-width:640px){ 
.modal-content .modal-text{ padding:10px;}
.modal-content .modal-text dl h2{ font-size:18px;}
.modal-content .modal-text dl h1{ font-size:30px; margin:8px 0 10px;}
.modal-content .modal-text dl a{ width:120px; height:30px; line-height:30px; font-size:18px; margin-top:20px;}
.close{ top:15px; right:20px;}
}
@media screen and (max-width:480px){ 
.modal-content .modal-text dl h1{ font-size:24px; margin:4px 0 5px;}
.modal-content .modal-text dl p{ margin:0 25px;}
.modal-content .modal-text dl a{ margin-top:15px;}
}