@charset "utf-8";

#main-col { display: flex; justify-content: center; margin-top: 60px; min-height: calc(100vh - 221px); }

#info-1 { width: 50%; display: flex; flex-direction: column; color: #fff; }
#info-1 > div { margin-bottom: 20px; }
#info-1 .diamond { text-align: center;  color: #FFD698; font-size: 18px; }
#info-1 .diamond img { width: 35px; }
#info-1 .photo { /*text-align: center;*/ display: flex; justify-content: center; }
#info-1 .photo img { border-radius: 10px; width: 250px; height: 250px; }
#info-1 .name { text-align: center; font-size: 20px; /*font-weight: bold;*/ color: 3f464d; }
#info-1 .gender { text-align: center; }
#info-1 .gender .age { margin-right: 2px; }
#info-1 .gender .age.female { position: relative; padding: 2px 10px 2px 22px; background: #fff; border: 1px solid #fff; border-radius: 17px; color: #101010; }
#info-1 .gender .age.female:before { position: absolute; top: 3px; left: 4px; content: ''; width: 15px; height: 15px; background-image: url(../img/common/icon-female.png); background-size: cover; }
#info-1 .gender .fans { padding: 2px 10px; border: 1px solid #fff; border-radius: 17px; color: #fff; }
#info-1 .owl-prev { margin-left: calc(25% - 50px); }
#info-1 .owl-next { margin-right: calc(25% - 50px); }
#info-1 .owl-theme .owl-nav .disabled { display: none; }

#info-2 { width: 50%; color: #fff; }
#info-2 > div:not(:first-child) { margin-bottom: 40px; }
#info-2 .icon { display: flex; align-items: center; margin-bottom: 20px; background: #171717; border-radius: 99px; width: 150px; padding: 2px; }
/*#info-2 .line { height: 5px; background-color: #81909f; border-radius: 99px; }*/
#info-2 .icon img { width: 30px; margin: 0 5px 0 10px; }
#info-2 .icon span { color: #fff; font-size: 16px; font-weight: bold; }
#info-2 .voice audio { display: block; height: 40px; margin-top: 10px; }
#info-2 .greeting {}
#info-2 .intro {}
#info-2 .hobby ul { list-style: none; padding: 0; }
#info-2 .hobby li { display: inline-block; padding: 5px 10px; border: 1px #fff solid; border-radius: 99px; margin-right: 10px; white-space: nowrap; margin-bottom: 10px; }
#info-2 span.title { color: #B3B3B3; display: inline-block; margin: 10px 0 15px; font-size: 14px; }
#info-2 p { font-size: 16px; line-height: 1.4; }



/*footer .left { margin: 0; font-size: 20px; }
footer .left a { background-color: #fff; padding: 10px 20px; color: #ff6066; border-radius: 99px; font-weight: normal; margin-left: 20px; display: inline-block; }*/
.fixed-adv { position: fixed; bottom: 0; width: 100%; height: 72px; display: flex; padding: 10px 12px; justify-content: center; align-items: center; background: linear-gradient(to right, #6928BB, #FF1474); z-index: 99; }
/*height: 108px;*/
.fixed-adv-message { color: #fff; font-size: 18px; font-weight: bold; }
.fixed-adv-btn { background-color: #fff; color: #101010; font-size: 16px; padding: 5px 20px; border-radius: 99px; font-weight: bold; margin-left: 15px; }

footer { display: none; }

@media only screen and (max-width: 768px) and (min-width: 500px)  {
    #main-col { flex-direction: column; align-items: center; }
    #info-1 { width: 80%; border-bottom: 1px #3F464E solid; padding-bottom: 10px; }
    #info-2 { width: 80%; margin-top: 30px; padding-bottom: 60px; }
    /*#info-2 .line { position: relative; height: 1px; background-color: #e9eaeb; }
    #info-2 .line:before { position: absolute; top: -2px; left: 30%; content: ''; height: 5px; width: 40%; background-color: #81909f; border-radius: 99px; }*/
}

@media only screen and (max-width: 500px) {
    #main-col { flex-direction: column; align-items: center; }
    #info-1 { width: 80%; border-bottom: 1px #3F464E solid; padding-bottom: 10px; }
    #info-1 .photo img { width: 180px; height: 180px; }

    #info-2 { width: 80%; margin-top: 30px; padding-bottom: 75px; }
    #info-2 span { font-size: 16px; padding: 6px 12px; }
    #info-2 .icon img { width: 25px; margin: 0 -5px 0 10px; }
    /*#info-2 .line { position: relative; height: 1px; background-color: #e9eaeb; }
    #info-2 .line:before { position: absolute; top: -2px; left: 30%; content: ''; height: 5px; width: 40%; background-color: #81909f; border-radius: 99px; }*/

    /*footer .left { font-size: 16px; }
    footer .left a { padding: 6px 12px; margin-left: 10px; }*/
    .fixed-adv-message { font-size: 16px; }
    .fixed-adv-btn { padding: 6px 12px; margin-left: 10px; }
}