/*popup*/
#setph {text-align:left; background:url(../img/bgw.jpg);
box-shadow:8px 8px rgba(153,137,41,0.2);}
#setph #mainbox {width:100%; height:auto; margin:0 auto; padding:1em 0 0;}

#setph #mainbox .set1 {background-image: url(../img/set/set1.jpg);}
#setph #mainbox .set2 {background-image: url(../img/set/set2.jpg);}
#setph #mainbox .set3 {background-image: url(../img/set/set3.jpg);}
#setph #mainbox .set4 {background-image: url(../img/set/set4.jpg);}
#setph #mainbox .set5 {background-image: url(../img/set/set5.jpg);}
#setph #mainbox .set6 {background-image: url(../img/set/set6.jpg);}
#setph #mainbox .set6_2 {background-image: url(../img/set/set6_2.jpg);}
#setph #mainbox .set7 {background-image: url(../img/set/set7.jpg);}
#setph #mainbox .set7_2 {background-image: url(../img/set/set7_2.jpg);}
#setph #mainbox .set8 {background-image: url(../img/set/set8.jpg);}
#setph #mainbox .set9 {background-image: url(../img/set/set9.jpg);}
#setph #mainbox .set10 {background-image: url(../img/set/set10.jpg);}
#setph #mainbox .set11 {background-image: url(../img/set/set11.jpg);}
#setph #mainbox .set12 {background-image: url(../img/set/set12.jpg);}
#setph #mainbox .set13 {background-image: url(../img/set/set13.jpg);}
#setph #mainbox .set14 {background-image: url(../img/set/set14.jpg);}

#setph {position:absolute;left:50%; z-index:5800 !important;}

#setph #mainbox p{background-color:rgba(255,255,255,0.7); padding:.6em 1em; line-height:140%;}
#setph .btn-w-close a{display:block; width:110px; height:35px; background:url(../img/chart/close.png) no-repeat; margin:.5em 0 0 auto; background-size: contain;}
#setph .btn-w-close a{cursor:pointer;}


#setph nav ul#arrow li{display:inline-block;}
#setph nav ul#arrow li a{width:70px; height:70px; display:block; text-indent: 100%; white-space: nowrap; text-decoration:none; overflow: hidden;}
#setph nav ul#arrow li.back{position:absolute; left:0; background:url(../img/set/back.svg) no-repeat; background-size:100%;}
#setph nav ul#arrow li.fwd{position:absolute; right:0; background:url(../img/set/forward.svg) no-repeat; background-size:100%;}


@media all and (min-width: 768px) {
#setph {width:750px; height:520px; margin-left:-350px;}
#setph .ph_cut{box-shadow:8px 8px rgba(50,50,50,0.1);}
#setph #mainbox {margin:0 auto;}
#setph #mainbox p{position:absolute; left:0; bottom:5%; width:65%;}
#setph .btn-w-close{position:absolute;right:3%; bottom:4%;}
#setph nav ul#arrow{position:absolute; top:50%; width:100%;
top: calc(50% - 35px);}
}

@media all and (max-width: 767px) {
#setph {width:100%; margin-left:-50%;}
#setph .ph_cut{width:90%; height:0; padding:60% 0 0; box-shadow:6px 6px rgba(50,50,50,0.1); border:3px solid #fff;}
#setph #mainbox {margin:0 auto; padding:.5em 0 1em;}
#setph #mainbox p{background-color:rgba(255,255,255,0.5); width:90%; margin:1em auto; padding:.7em; font-size:3.2vw;}
#setph .btn-w-close a{margin:1.5em auto 0; width:100px; height:30px;}
#setph nav ul#arrow{position:absolute; width:96%; left:0; right:0; margin:auto; bottom:50px !important;}
#setph nav ul#arrow li a{width:45px; height:45px;}
}