@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean');

/************
// reset //
************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0;}
html, body {width: 100%; height:100%; background:#EAEAF5; font-family: 'Nanum Gothic', sans-serif; font-size:13px; letter-spacing:-1px;}
h1, h2, h3, h4, h5, h6 {font-weight: 400; font-size: inherit}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img, fieldset, a {border: 0;}
img {vertical-align: middle;}
table, thead, tbody, tfoot {border-collapse: collapse; border-spacing: 0; border: 0 none; word-break: keep-all}
table th, table td {word-break: keep-all}
ul {list-style: none; word-break: keep-all}
address, em {font-style: normal}
input, select, textarea, button, form img {vertical-align: middle; letter-spacing:-0.5px;}
button, input[type="submit"] {cursor: pointer}
button::-moz-focus-inner {border:0 none; padding:0}
button {border: 0; border-radius: 0}
a img {width:100%;}
a {text-decoration: none; color:#000;}
strong {font-weight:700 !important;}

/* color 정의 */
.color-primary {color:#191943;} /* 주요색 */
.color-second {color:#1E1E61;} /* 보조색 */
.color-point {color:#FF3A89;} /* 강조색 */
.color-bg {color:#EAEAF5;} /* 바탕색 */

/* 레이아웃 공통 */
#wrap {position: relative; width:100%; height:auto; padding-top:60px; padding-bottom:70px;}
#wrap.schopen {padding-top:110px;}

header {position:fixed; top:0px; left:0px; width:100%; height:auto; background:#191943; z-index: 1000;}
.header-btn-left {position:absolute; top:15px; left:18px; width:30px; height:30px; z-index: 1; text-indent:-9999px; }
.header-btn-right {position:absolute; top:15px; right:18px; width:auto; height:30px; z-index: 1;}
.header-btn-right a {float:right; display:block; width:30px; height: 30px; text-indent:-9999px;}
.btn-back {background: url("../images/btn_back.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
.btn-sch {background: url("../images/btn_sch.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
.btn-home {background: url("../images/btn_home.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
.btn-home + .btn-sch {margin-right:5px;}
header h1.title {position:relative; width:100%; height:60px; line-height:60px; font-size:20px; text-align:center; color:#fff; font-weight:700; z-index:0;}

.scharea {position:relative; width:100%; height:50px; padding:0px 25px; line-height:50px; background:#fff; border-bottom:1px solid #191943; box-sizing: border-box;}
.scharea .input-sch {position:relative; width:100%; height:34px; line-height:34px; font-size:18px; padding:0; border:0px; color:#272727;}
.scharea .input-sch:placeholder-shown {color:#767676;}
.scharea .btn-sml {position:absolute; top:50%; right:25px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}

.orderarea {position:relative; width:100%; height:50px; padding:0px 25px; line-height:50px; border-bottom:1px solid #fff; text-align:center; box-sizing: border-box;}
.orderarea a.order-item {display:inline-block; height:34px; padding:0px 5px; border-radius: 17px; font-size:14px; font-weight:700; color:#191943; line-height:34px; text-align:center; box-sizing:border-box;}
.orderarea a.select {background:#fff;}
.orderarea a.order-item + a.sort-item {margin-left:2px;}
.orderarea a.order-item i {display:inline-block; width:15px; height:15px; margin-left:3px; background:url("../images/ico_arr.png") no-repeat; background-size:cover; -webkit-background-size:cover; vertical-align:middle;}
.orderarea a.order-item.descending i {transform:rotate(180deg)}

section {position:relative; width:100%; height:100%; padding:10px 20px 0px 20px; box-sizing:border-box;}
h2.section-title {position:relative; width:100%; height:20px; margin:5px 0px 15px; line-height:20px; font-size:17px; text-align:center; color:#191943;} 
.container {position:relative; width:100%; height:auto; box-sizing:border-box;}
.container.calc {padding-top:100px;}
.cont-inner {position:relative; width:100%; height:auto; padding:27px 20px; background:#fff; box-shadow: 0px 2px 2px #1E1E6130; box-sizing:border-box;}
.inner-box {position:relative; width:100%; height:auto;}

/* 버튼 */
.btn-group {position:relative; width:100%; height:auto; padding:10px 0px;}
.btn {display:inline-block; height:58px; border-radius: 32px; line-height:58px; font-size:16px; font-weight:700; text-align:center; box-sizing:border-box;}
.btn-sml {display:inline-block; height:34px; padding:0px 10px; border-radius: 17px; line-height:34px; font-size:14px; font-weight:700; text-align:center; box-sizing:border-box;}
.btn + .btn {margin-top:10px;}
.btn-color-01 {background:#FF3A89; color:#fff;}
.btn-color-02 {border:1px solid #fff; color:#fff;}
.btn-color-03 {background:#fff; color:#191943;}
.btn-color-04 {background:#1E1E61; color:#fff;}
.btn-color-05 {background:#191943; color:#fff;}
.btn-color-06 {border:1px solid #191943; color:#191943;}
.btn-both {width:100%;}
.btn-col2 {width:48%;}
.btn-col2 + .btn-col2 {margin-left:2%;}
.btn-col3 {width:32%;}
.btn-col3 + .btn-col3 {margin-left:1%;}

/* MAIN PAGE */
#wrap.mainpage {height:100%; padding-top:0px; background:#191943; box-sizing: border-box;}

.main-logo {position:absolute; top:7%; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); width:200px; height:auto; text-align:center; }
.main-logo h1.main-logo-img {position:relative; display:block; width:123px; height:100px; margin:0 auto; background:url("../images/logo.png") center no-repeat; background-size:cover; -webkit-background-size:cover; text-indent:-9999px;}
.main-logo p.main-logo-text {position:relative; width:100%; height:40px; margin-top:5px; line-height:40px; color:#fff; font-weight:700;}
.main-btn-group {position:absolute; top:36%; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); width:238px; height:282px; }
.innergroup {margin-top:20px;}

/* 계산기 */
.calc .image-male {display:block; position:absolute; top:0px; left:30px; z-index:1; width:100px; height:134px; background:url("../images/img_m.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
.calc .image-female {display:block; position:absolute; top:0px; right:30px; z-index:1; width:100px; height:134px; background:url("../images/img_f.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
.calc .image-heart {display:block; position:absolute; top:40px; left:50%; z-index:1; width:50px; height:50px; margin-left:-25px; background:url("../images/img_heart.png") no-repeat; background-size:cover; -webkit-background-size:cover; animation: aniheart 1.0s infinite; -webkit-animation: aniheart 1.0s infinite;}

/*.inner-box .item {display:inline-block; position:relative; width:48%; height:auto; margin:27px 0px;}*/
.inner-box .item {display:inline-block; position:relative; width:49%; height:auto; margin:27px 0px;}
.item label.nameinput_label {display:inline-block; width:100%; height:20px; margin-bottom:10px; line-height:20px; font-size:17px; font-weight:700; text-align:center; color:#191943;}
.item span.nameinput {display:block; width:100%; height:40px; padding:0px 10px; background:#eaeaf5; border-radius: 20px; box-sizing:border-box;}
.item span.nameinput input[type=text] {width:100%; height:40px; padding:0px; border:0px; outline:none; background-color:transparent; line-height:40px; font-size:16px; font-weight:700; color:#272727; text-align: center;}
.item span.nameinput input[type=text]:placeholder-shown {color:#767676;}
.inner-cont .item + .item {margin-left:3%;}

/* 계산기 - 계산결과 */
.image-male {display:block; position:absolute; top:auto; bottom:82px; left:0px; z-index:1; width:100px; height:134px; background:url("../images/img_m.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
.image-female {display:block; position:absolute; top:auto; bottom:82px; right:0px; z-index:1; width:100px; height:134px; background:url("../images/img_f.png") no-repeat; background-size:cover; -webkit-background-size:cover;}

.calc-result {position:relative; width:100%; height:auto; font-size:20px; text-align:center;}
.result-line {width:auto; height:20px; line-height:20px; margin:0 auto 20px;}
.result-line::after {display: block; clear: both; content: '';}
.result-line .line-child {display:inline-block; color:#8f8fab; margin:0px -2px;}
.result-line.result .line-child {color:#191943; font-weight:700; font-size:22px;}
.result-line .male-name {color:#00c0c6;}
.result-line .female-name {color:#ff3a89;}

.result-line.nameline .line-child {width:12%; font-weight:700; font-size:22px;}
.result-line.line01 .line-child {width:12%; font-weight:700; font-size:22px; color:#191943;}
.result-line.line02 .line-child {width:8%;}
.result-line.line02 .line-child + .line-child {margin-left:3%;}
.result-line.line03 .line-child {width:12%;}
.result-line.line04 .line-child {width:8%;}
.result-line.line04 .line-child + .line-child {margin-left:3%;}
.result-line.line05 .line-child {width:12%;}
.result-line.line06 .line-child {width:8%;}
.result-line.line06 .line-child + .line-child {margin-left:3%;}
.result-line.line07 .line-child {width:12%;}

.calc-result-text {width:100%; height:55px; padding:0px 12px; background:#eaeaf5; line-height:55px; text-align: center; font-size:18px; font-weight:700; box-sizing: border-box;}

/* 리스트 */
.container.list li.inner-item {display:flex; flex-direction: row; justify-content: space-between; align-items: center; position:relative; width:100%; height:auto; padding:12px; background:#fff; box-shadow: 0px 2px 2px #1E1E6130; box-sizing:border-box;}
.container.list li.inner-item a.btn_del {display:block; position:absolute; top:0px; right:0px; width:26px; height:26px; background:url("../images/btn_del.png") no-repeat; background-size:cover; -webkit-background-size:cover; text-indent: -9999px;}
.container.list li.inner-item + li.inner-item {margin-top:10px;}
.container.list li.inner-item .best {flex-shrink: 0; min-width:52px; height:49px; margin-right:10px; line-height:49px; text-align: center; font-size:20px; font-weight:700; color:#8f8fab;}
.container.list li.inner-item .best.crown01 {background:url("../images/award01.png") no-repeat; background-size:cover; -webkit-background-size:cover; font-size:16px; line-height:64px; color:#fff;}
.container.list li.inner-item .best.crown02 {background:url("../images/award02.png") no-repeat; background-size:cover; -webkit-background-size:cover; font-size:16px; line-height:64px; color:#fff;}
.container.list li.inner-item .best.crown03 {background:url("../images/award03.png") no-repeat; background-size:cover; -webkit-background-size:cover; font-size:16px; line-height:64px; color:#fff;}
.container.list li.inner-item p.name {width:100%; font-size:18px; font-weight:700; color:#191943; letter-spacing: normal; padding-bottom:4px;}
.container.list li.inner-item p.text {width:100%; height:20px; font-size:16px; color:#191943;}
.container.list li.inner-item p.date {width:100%; height:20px; font-size:16px; color:#8f8fab; letter-spacing: normal;}
.container.list li.inner-item p + p {margin-top:4px;}

/* 하트비주얼 */
.heart-visual {display:block; position:relative; width:82px; height:74px; margin:0 auto; overflow: hidden;}
.list .heart-visual {flex-shrink: 0; width:64px; height:58px; margin:0;}

.heart-visual .result-number {position:relative; width:100%; height:100%; line-height:65px; font-size:20px; color:#272727; font-weight:700; text-align:center; z-index:2;}
.heart-visual .result-number strong {font-size:28px;}
.list .heart-visual .result-number {line-height:52px; font-size:20px;}
.list .heart-visual .result-number strong {font-size:20px;}
.heart-visual .visual-heart {position:absolute; top:0px; left:0px; width:100%; height:100%; background: url("../images/visual_calc.png") no-repeat; background-size:cover; -webkit-background-size:cover; z-index:1;}
.heart-visual .visual-gauge {position:absolute; bottom:0px; left:0px; width:100%; background:#ff3a89; background-size:cover; -webkit-background-size:cover; z-index:0; animation: anigauge 1.2s forwards; -webkit-animation: anigauge 1.2s forwards;}

.visual-gauge.per010 {height:10%;}
.visual-gauge.per020 {height:20%;}
.visual-gauge.per030 {height:30%;}
.visual-gauge.per040 {height:40%;}
.visual-gauge.per050 {height:50%;}
.visual-gauge.per060 {height:60%;}
.visual-gauge.per070 {height:70%;}
.visual-gauge.per080 {height:80%;}
.visual-gauge.per090 {height:90%;}
.visual-gauge.per0100 {height:100%;}

/* 정보 */
.logodark {width:123px; height:100px; margin:0 auto 30px; background:url("../images/logodark.png") no-repeat; background-size:cover; -webkit-background-size:cover;}
dl {padding-top:20px; border-top:1px solid #191943;}
dd + dt {margin-top:5px;}
dt {width:100%; height:30px; line-height:30px; font-size:14px; font-weight:700; color:#191943;}
dd {width:100%; height:auto; padding:10px 0px; line-height:140%; font-size:14px; color:#767676; box-sizing: border-box;}

/*ANIMATION*/
@keyframes aniheart {
	from{-webkit-transform:translate(0, 0px);transform:translate(0, 0px);}
	50%{-webkit-transform:translate(0, 8px);transform:translate(0, 8px);}
	to{-webkit-transform:translate(0, 0px);transform:translate(0, 0px);}
}
@-webkit-keyframes aniheart {
	from{-webkit-transform:translate(0, 0px);transform:translate(0, 0px);}
	50%{-webkit-transform:translate(0, 8px);transform:translate(0, 8px);}
	to{-webkit-transform:translate(0, 0px);transform:translate(0, 0px);}
}
@keyframes anigauge {
	from{-webkit-transform:translate(0, 0px);transform:translate(0, 20px);}
	to{-webkit-transform:translate(0, 0px);transform:translate(0, 0px);}
}
@-webkit-keyframes anigauge {
	from{-webkit-transform:translate(0, 0px);transform:translate(0, 20px);}
	to{-webkit-transform:translate(0, 0px);transform:translate(0, 0px);}
}
//추후에 다시 보여줄 것
.kakao_ad_area {
    display: none;
}