@charset "utf-8";

#pageBg { background: #25cbff; }
#pageBg img { width: 100%; vertical-align:top; }

/*intro*/
#pageBg #introSec { text-align: center; padding: 3% 0 6%; margin: 0 auto; background: url("../_images/topics_bg.png") repeat-x center bottom 3% / 100%; }

#pageBg #introSec #topicsArea { margin: 5% auto 0; }
#pageBg #introSec #topicsArea h2 { width: 35%; margin: 0 auto; }
#pageBg #introSec #topicsArea ul { width: 86%; margin: 0 auto; }
#pageBg #introSec #topicsArea ul li { margin-top: 4.5%; }
#pageBg #introSec #topicsArea ul li:first-child { margin-top: 3%; }
#pageBg #introSec #topicsArea #topicsImg { margin-top: 6%; }

/*topics*/
#topics1Sec { background: #b7e8ff; border-top: 4px solid #0068cc; }
#topics2Sec { background: #fff0a0; border-top: 4px solid #ffa700; }
#topics3Sec { background: #dff0ad; border-top: 4px solid #60c560; }

#pageBg .topicsSec .innerW { width: 90%; margin: 5% auto 0; padding-bottom: 6%; border-radius: 36px; }

#pageBg .topicsSec ul { background: #fff; border-radius: 0 0 12px 12px; }
#pageBg .topicsSec ul li { width: 86%; margin: 0 auto; padding-top: 12%; text-align: center; }
#pageBg .topicsSec ul li:nth-child(1) { padding-top: 8%; }
#pageBg .topicsSec ul li:last-child { padding-bottom: 12%; }
#pageBg .topicsSec ul li a { display: block; }
#pageBg .topicsSec ul li a:hover { text-decoration: none; }

#pageBg .topicsSec .placeBtn { color: #fff; border-radius: 50px; font-size: min(3.8vw, 1.5rem); padding: 2% 4%; margin-top: 4%; display: inline-block; }
#pageBg #topics1Sec.topicsSec .placeBtn { background: #4490da; }
#pageBg #topics2Sec.topicsSec .placeBtn { background: #ffa700; }
#pageBg #topics3Sec.topicsSec .placeBtn { background: #60c560; }

#pageBg .topicsSec .priceBox { margin-top: 4%; }
#pageBg .topicsSec .priceBox a { display: flex; align-items: center; }
#pageBg .topicsSec .priceBox a img { width: 60%; }

@media only screen and (min-width:768px) {
    
    /*intro*/
    #pageBg #introSec { background: url("../_images/topics_bg.png") repeat-x center bottom 3% / 700px; }

    /*innerW*/
    #pageBg .innerW { max-width: 600px; margin: 0 auto; }
}