/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
body {max-width: 425px; margin: 0 auto; text-align:center;height: auto;}
section {position: relative;margin-top: 5rem;}
body, h1, h2, h3, h4, h5, h6, input, select, button, textarea { font-family: Helvetica, Arial, "Microsoft MingLiU", 新細明體, sans-serif;}
select {height: 40px;padding: 0 10px;font-size: 120%;border-color: rgb(102, 102, 102);border-radius: 5px;border-width: 1px;}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# SideBar
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Popup
--------------------------------------------------------------*/
.popup_content {margin: 10px;padding: 0 10px;max-width: 60%;border: 2px solid #444;background: white;}
.popup-container {background-color: #fff;border: 1px solid #666;border-radius: 5px;padding: 0 10px 10px;box-shadow: 0 4px 8px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);}
.popup-container .popup_close {position: absolute;top: 4px;right: 0px;border-radius: 2px;background: none;border: 0;font-size: 1.8rem;padding: 0 10px;font-weight: 900;}
.popup-container>.popup-head {}
.popup-container .popup-head>h2 {color: #000;font-size: 20px;font-weight: 600;padding: 10px;}	
.popup-container>.popup-body {text-align: center;}
.popup-container>.popup-footer {margin-top:30px}
.popup_background {background: transparent !important;opacity: 0 !important;}

#popup-introduce-step1, #popup-introduce-step2 {width: 350px;max-width: 95%;}
#popup-consulting {width: 95%;max-width: 95%;}
/*#popup-consulting .popup-body button {width:100%; margin:5px 0}*/

/*--------------------------------------------------------------
# Input
--------------------------------------------------------------*/
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], textarea {border-color: rgb(102, 102, 102);border-radius: 5px;border-width: 1px;height: 40px;padding: 5px; width:100%; font-size: 120%;}
.input {width: 100%;}
.input-red-bg {border: 2px solid #f13a30 !important;background: #ffe5e5;}

/*--------------------------------------------------------------
# Sweet Alert
--------------------------------------------------------------*/
.sweet-overlay{z-index: 1000000;}
.sweet-alert {z-index: 1000001;}
.sweet-alert p {color: #000;}
.sweet-alert button {font-size: 1rem;padding: 10px 30px;}
/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/
.btn {font-size: 1rem;border: 1px solid #000;border-radius: 5px;padding: 10px 40px;background: #fff;display:inline-block;}
.btn-blue {background: #39779d;border: 1px solid #39779d;color: #fff;}


/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
.logo {width: 20%;text-align: center;margin: 0 auto;}
.logo-title {text-align:center;margin-top: 0.5rem;margin-bottom: 2rem;}

.btn-consulting {
    background-image: url(../img/icon-good-after.png);
    background-size: cover;
    background-position: center;
    background-color: transparent;
    width: 5rem;
    height: 5rem;
    margin: 0 1rem 0 0;
    position:relative;
}
.btn-consulting::after {
    content:'Good after center';	/* 굿애프터센터 */
    position : absolute;
    left:0;
    right:0;
    top: 85px;
}
.btn-introduce {
    background-image: url(../img/icon-introduce.png);
    background-size: cover;
    background-position: center;
    background-color: transparent;
    width: 5rem;
    height: 5rem;
    margin: 0 1rem 0 0;
    position:relative;
}
.btn-introduce::after {
    content:'Acquaintance referrals';	/* 지인소개 */
    position : absolute;
    left:0;
    right:0;
    top: 85px;
}
.btn-point {
    background-image: url(../img/icon-point.png);
    background-size: cover;
    background-position: center;
    background-color: transparent;
    width: 5rem;
    height: 5rem;
    margin: 0 1rem 0 0;
    position:relative;
}
.btn-point::after {
    content:'Points inquiry';	/* 포인트조회 */
    position : absolute;
    left:0;
    right:0;
    top: 85px;
}
.btn-surgery_part {
    background-image: url(../img/icon_plastic_surgery.png);
    background-size: contain;
    background-position: center;
    background-color: transparent;
    background-repeat: no-repeat;
    width: 70px;
    height: 92px;
    position:relative;
    display: inline-block;
    margin: 0 20px;
}
.btn-surgery_part::after {
    content: '咨询整形项目';
    position: absolute;
    left: -12px;
    right: -12px;
    bottom: -22px;
    font-size: 13px;
}

.btn-dermatology {
    background-image: url(../img/icon_surgery_part.png);
    background-size: contain;
    background-position: center;
    background-color: transparent;
    background-repeat: no-repeat;
    width: 70px;
    height: 92px;
    position:relative;
    display: inline-block;
    margin: 0 20px;    
}
.btn-dermatology::after {
	content: '咨询皮肤科项目';
    position: absolute;
    left: -12px;
    right: -12px;
    bottom: -22px;
    font-size: 13px;
}


ul.tab{    display: flex;}
ul.tab li{
    display: inline-block;
    flex: 1 1 auto;
    float: left;
    border-bottom-width: 2px;
    border-bottom-color: #000;
    font-weight: 700;
    height: 35px;
    line-height: 35px;
    font-size: 13px;
    border-width: 0;
    background-color: #eee;
    color: #666;
}
ul.tab li.active{
	background-color: #f074af;
    border-bottom-width: 2px;
    border-bottom-color: #000;
    color: #fff;
    font-weight: 700;
}
ul.tab li:first-child{
	border-top-left-radius: 5px;
}
ul.tab li:last-child{
	border-top-left-radius: 0px;
	border-top-right-radius: 5px;
}

.btn_new {
	border: 1px solid #666;
    border-radius: 5px;
    height: 40px;
    padding: 5px;
    -webkit-appearance: none;
    background-color: #eee;
	width: 100%;
}

.nice-select {
	border-color: rgb(102, 102, 102);
    border-radius: 5px;
    border-width: 1px;
}