@charset "UTF-8";

/* ==========================================================================
   Reset CSS
   ========================================================================== */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


/* ==========================================================================
   Based CSS
   ========================================================================== */
/* text size */
html {-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
/**
 * Remove default margin.
 */
body {
  margin: 0;
  line-height: 1; }

/**
 * Remove default outlines.
 */
a,
button,
:focus,
a:focus,
button:focus,
a:active,
a:hover {
  outline: 0; }

/* *
 * Remove tap highlight color
 */
a {
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent; }
  a[href]:hover {
    cursor: pointer; }

img { 
	border:0; 
	-webkit-tap-highlight-color:transparent;
	-moz-tap-highlight-color:transparent;
	tap-highlight-color:transparent 
	}

@font-face{
 font-family:'Daum';
 font-style:normal;
 font-weight:400;
 src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-Regular.woff2') format('woff2'),
     url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-Regular.woff') format('woff');
}
@font-face{
 font-family:'Daum';
 font-style:normal;
 font-weight:700;
 src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff2') format('woff2'),
     url('//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff') format('woff');
}


/* ==========================================================================
   Common
   ========================================================================== */
.hide {display: none;}
.blind, 
.caption {font-size: 0; line-height: 0; text-indent: -10000px; position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; width: 0; height: 0;}
* {
	box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 
}
body {
	font-family: 'Droid Sans', 'Apple-Gothic', "Apple SD Gothic Neo", 'Roboto', 'Tahoma', 'Malgun Gothic', dotum, sans-serif;
}
a {color: #333;}
a, button {letter-spacing: -1px;}
.bg-white {background-color: #fff;}

/* flex */
.item-input.type1,
.item-select.type1,
.item-box {
	width: 100%; 
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex;
}
.input,
.select,
.item-left {
	-webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1;
	display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; align-items: center;
	overflow: hidden; 
}
.label,
.item-right {
	-webkit-box-flex: none; -webkit-flex: none; -moz-box-flex: none; -moz-flex: none; -ms-flex: none; flex: none;
}

/* item divider */
.item-divider {padding: 15px 0 16px;}
.item-divider .item-left {
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center;
}
.item-divider .tit { font-size: 18px; font-weight: 600; color: #999; line-height: 1.4em; height: 34px; padding: 5px 0;}
.item-divider .desc { font-size: 15px; font-weight: 400; color: #999; line-height: 1.4em;}
/* 성장체크 - 성장기록 */
.item-divider .tit strong {font-weight: 600; color: #333; padding-right: 6px;}
.item-divider .tit strong .name {padding-right: 3px;}

/* item info */
.item-info {padding: 29px 15px 5px;}
.item-info .info-txt {font-size: 12px; font-weight: 400; color: #999;}

/* ==========================================================================
   Form
   ========================================================================== */
input, textarea, select {font-family: 'Droid Sans', 'Apple-Gothic', "Apple SD Gothic Neo", 'Roboto', 'Tahoma', 'Malgun Gothic', dotum, sans-serif;}
/* input */
input {
    margin: 0; padding: 0; 
    /* iOS input 설정 추가 (170601) */
    border-radius: 0; 
    -webkit-appearance: none;
}
.inp-block {width: 100%;}
.inp-inline {}
.item-textarea textarea,
.item-input input:not([type=checkbox]):not([type=radio]),
.inp-block input:not([type=checkbox]):not([type=radio]) {width: 100%;}
.item-textarea textarea {height: 90px; }

/* input (login) */
#login input:not([type=checkbox]):not([type=radio]) {height: 40px; border: 1px solid #e70014;}
#login input:not([type=checkbox]):not([type=radio]) {font-size: 17px; font-weight: 400; color: #bcc6d1; height: 40px; padding: 3px 10px 0; }
#login input::-webkit-input-placeholder {color: #bcc6d1;}
#login input::-ms-input-placeholder {color: #bcc6d1;}

/* input type1 (form-box 내) */
.form-box .item-textarea.type1,
.form-box .item-checkbox.type1,
.form-box .item-radio.type1,
.form-box .item-select.type1,
.form-box .item-input.type1 {border-bottom: 1px solid #ccc; background-color: #fff;}
.form-box .item-select:first-child,
.form-box .item-input:first-child {border-top: 1px solid #ccc;}
.form-box .item-input.type1 {position: relative;}
.form-box .item-select.type1 .label,
.form-box .item-input.type1 .label {
    padding-left: 15px;
    height: 46px; line-height: 49px; font-size: 15px; font-weight: 400; color: #b5b5b5; width: 110px; padding-right: 10px; letter-spacing: -1px;
    line-height: 1.4em; padding: 10px 0 10px 10px; padding: 13px 0 12px 10px;
    height: auto; min-height: 46px;
    }
.form-box .item-select.type1 .label.label-lg,
.form-box .item-input.type1 .label.label-lg {width: 140px;}
.form-box .item-select.type1 .label,
.form-box .item-input.type1 .input {
    background-color: #fff; height: 46px; height: auto; min-height: 46px;
    }
.form-box .item-input.type1 .input input {
    height: 46px; line-height: 46px; background-color: transparent; 
    }
.form-box .item-input.type1 input:not([type=checkbox]):not([type=radio]) {height: 46px; line-height: 46px;}
.form-box .item-input.type1 input:not([type=checkbox]):not([type=radio]) {font-size: 15px; font-weight: 400; color: #333; border: 0; 
}
.form-box .item-input.type1 .input .unit {padding-left: 15px; padding-right: 15px;}
.form-box + .btn-wrap {margin-top: 17px;}
.form-box .item-textarea.type1 .input {padding: 10px 15px;}
.form-box .item-textarea.type1 textarea {font-size: 15px; font-weight: 400; color: #333; line-height: 1.4em; border: 0; }
/* placeholder */
.form-box .item-input.type1 input::-webkit-input-placeholder {color: #333;}
.form-box .item-input.type1 input::-ms-input-placeholder {color: #333;}
.form-box .item-input.type1 input:focus::-webkit-input-placeholder {color: transparent;}
.form-box .item-input.type1 input:focus::-ms-input-placeholder {color: transparent;}
.form-box .item-textarea.type1 textarea::-webkit-input-placeholder {color: #999;}
.form-box .item-textarea.type1 textarea::-ms-input-placeholder {color: #999;}
.form-box .item-textarea.type1 textarea:focus::-webkit-input-placeholder {color: transparent;}
.form-box .item-textarea.type1 textarea:focus::-ms-input-placeholder {color: transparent;}

/* Checkbox 기본 */
input[type=checkbox] {width: 35px; height: 35px; margin: 0; border: 1px solid #e70014; background-color: #fff; -webkit-appearance: none; appearance: none; position: relative; transition: all 0.3s ease; -webkit-trasition: all 0.3s ease; border-radius: 0; vertical-align: middle; }
input[type=checkbox]:focus { outline:none; }
input[type=checkbox]:checked { background-color:#e70014; }
input[type=checkbox]:before { content: ''; position: absolute; width: 8px; height: 17px; top: 4px; left: 11px; border-width: 0 3px 3px 0; border-style: solid; border-color: #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); opacity: 0;}
input[type=checkbox]:checked:before { opacity:1; }
input[type=checkbox] + label {font-size: 17px; font-weight: 400; color: #666; padding-left: 10px;}
/* item-checkbox (서비스신청 동의절차) */
.item-checkbox {position: relative; display: block; width: 100%; height: 42px; padding: 3px 3px 3px 48px;}
.item-checkbox.checkbox-center {text-align: center; padding-left: 3px;}
.item-checkbox input[type=checkbox] {position: absolute; top: 3px; left: 3px;}
.item-checkbox input[type=checkbox] + label {padding-left: 0; text-align: center; font-size: 15px; font-weight: 400; color: #818a93; line-height: 36px;}
/* item-checkbox checkboox-right (예약화면 체크박스) */
.item-checkbox.checkbox-right {padding: 3px 48px 3px 3px;}
.item-checkbox.checkbox-right input[type=checkbox] {position: absolute; top: 3px; right: 3px; left: auto;}
.item-checkbox.checkbox-right input[type=checkbox] + label {padding-left: 12px; color: #333; line-height: 41px;}
.form-box .item-checkbox.checkbox-right {height: 47px;}
.form-box .item-checkbox.checkbox-right input[type=checkbox] {top: 5px; right: 15px;}

/* Radio */
input[type=radio] { width:35px; height: 35px; border: 1px solid #e70014; background-color: #fff; -webkit-appearance:none; appearance:none; position: relative; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; border-radius:18px; vertical-align: middle;}
input[type=radio]:focus { outline:none; }
input[type=radio]:checked { background-color:#e70014; }
input[type=radio]:before { content: ''; position: absolute; width: 8px; height: 17px; top: 4px; left: 11px; border-width: 0 3px 3px 0; border-style: solid; border-color: #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); opacity: 0;}
input[type=radio]:checked:before { opacity:1; }
input[type=radio] + label {font-size: 17px; font-weight: 400; color: #666; padding-left: 10px;}
input[type=radio] + label {padding-left: 10px; text-align: center; font-size: 17px; font-weight: 400; color: #666; line-height: 36px;}
label + input[type=radio] {margin-left: 20px;}


/* select 공통 */  
select {font-size: 15px; font-weight: 400; min-height: 46px; line-height: 1.4em; font-size: 15px; color: #333; padding: 10px 0; vertical-align: middle; white-space: normal; border-radius: 0; border: 1px solid transparent; background-color: #fff; -webkit-appearance: none; appearance: none; }
.item-select { border-bottom: 1px solid #ccc;}
.item-select .select > div {width: 100%;} /* 170531 추가 */
.item-select select {width: 100%;}

input[type=date],
input[type=datetime-local],
input[type=time], 
select {
    position: relative;
    background: #fff;
}
select {
    background: #fff;
    background: #fff url(../img/common/bu_select1.png) no-repeat 100% 50%; 
    background-size: 45px auto; 
    padding-right: 45px; 
}
input[type=date],
input[type=datetime-local],
input[type=time] {
    /* 모바일에서 문제 시 삭제 */
    margin-right: -45px;
    padding-right: 45px;
}
input[type=date]:after,
input[type=datetime-local]:after,
input[type=time]:after {
    display: block;
    content: '';
    background: #fff url(../img/common/bu_select1.png) no-repeat 100% 50%; /* 갤럭시에서 기본아이콘 가리기 위해 수정 - 170601 */
    background-size:45px auto; 
    width: 45px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}


/* ==========================================================================
   Tab
   ========================================================================== */

.tab-wrap {position: relative; margin: 0; padding: 0 15px; list-style: none; }
.tab-wrap:after {display: block; content: ''; clear: both;}
.tab-item {float: left; margin-left: 5px; height: 40px;}
.tab-item:first-child {margin-left: 0;}
.tab-item.height {background-color: #b38ff9;}
.tab-item.weight {background-color: #f762bc;}
.tab-item.bmi {background-color: #43bcf3;}
.tab-item a, /* 170531 추가 */
.tab-anchor {display: block; height: 40px; font-size: 15px; font-weight: 400; color: #fff; line-height: 1.4em; text-align: center;}
.tab-item a > h5, /* 170531 추가 */
.tab-anchor > h5 {display: table; width: 100%; height: 100%; text-align: center; padding: 15px 15px; box-sizing: border-box;}
.tab-item a > h5 > .name, /* 170531 추가 */
.tab-anchor > h5 > .name {display: table-cell; vertical-align: middle;}
.tab-content {width: 100%; position: absolute; top: 50px; left: 0; -webkit-overflow-scrolling: touch !important; overflow: auto !important;}
.tab-content {display: none; }
.tab-item.active .tab-content {display: block;}
.tab-item.active a, /* 170531 추가 */
.tab-item.active .tab-anchor {font-size: 17px; font-weight: 600;}
/* tab item full */
.tab-wrap.tab-full {
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
}
.tab-wrap.tab-full .tab-item {
    -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1;
    flex: 1;
}
.tab-wrap.tab-full a, /* 170531 추가 */
.tab-wrap.tab-full .tab-anchor {
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; 
    align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; 
    justify-content: center;
}


/* ==========================================================================
   Layout
   ========================================================================== */
body {background-color: #ededed; }
#wrap {width: 100%; height: 100%; }
#header {position: fixed; width: 100%; height: 47px; }
.contents {position: absolute; margin-top: 47px; top: 0; right: 0; bottom: 0; left: 0; padding: 0;  overflow-x: hidden; overflow-y: auto;}


/* ==========================================================================
   사이드 슬라이드 메뉴
   ========================================================================== */

/*#m-nav {position:fixed; left:-60%; top: 0; bottom: 0; width: 60%; background: #ef6f78; z-index: 1000; overflow: auto; overflow-x: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
#m-nav .head {padding: 40px 15px 10px 15px; }
#m-nav .head a {display: inline-block; width: 29px; height: 22px; background: url(../img/common/ico_gnb_home.png) no-repeat 0 0; background-size: 29px auto; }
#m-nav .head p {font-size: 12px; color: #a62c35; padding: 12px 0 18px;}
#m-nav .head p strong {color:#fff; }
#m-nav .head p a {color: #fff; display: inline; background: none; }
#m-nav .head .current select {padding: 0 20px 0 10px; font-size: 12px; color: #0574c0; height: 17px; border-radius: 17px; -webkit-appearance: none; appearance: none; border: 0; background: #64cffe url('../img/common/bu_nav_select.png') no-repeat 95% 50%; background-size: 13px auto; }
#m-nav .nav ul {border-top: 1px solid #efaaaf; }
#m-nav .nav ul li {border-bottom: 1px solid #efaaaf;}
#m-nav .nav ul li a {display: block; font-size: 15px; color: #fff; height: 44px; line-height: 18px; padding: 13px 0 13px 15px; }
#m-nav .nav ul li.active a {color: #a62c35; }
#m-nav .btn-close {position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; background: url('../img/common/ico_nav_close.png') no-repeat 50% 50%; background-size: 20px auto; }

.bg-gnb {display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 150;}

#wrap.fixed {position: fixed; left: 0; top: 0; right: 0; overflow: hidden;}
body.fixed #m-nav {left: 0; }
body.fixed .bg-gnb {display: block; }

.bg-gnb { display: none; position: absolute; left: 0; right:0; top:105px; height: 288px; background: #fff;z-index:2500; border-bottom: 1px solid #e1e1e1; }
.bg-gnb:before { content: ''; position: absolute; left: 0; right:0; bottom:-1px; height: 1px; background: #e1e1e1; z-index:6000;}
#gnb > ul > li:hover .dep2 { display: block; }
#header.active .bg-gnb { display: block; }
*/

#m-gnb {  position:fixed; left: 0; top:0; bottom:0; z-index:5000; width:260px; left:-260px; background: #fff;  height: 100%; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; }
#m-gnb .scroller { position: absolute; left: 0; top:0; bottom:0; width:100%; overflow-y:scroll; text-align: left; padding:0 0 40px;}
#m-gnb .btn-home { display: block; font-size:17px; padding-left:30px; line-height: 43px; height:44px; font-weight: 600; background: #fff; color: #000; position: relative;}
#m-gnb ul{border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
#m-gnb .btn-dep1 { background:#f6f6f6; display: block; font-size:15px; padding-left:32px; line-height: 42px; height:42px; border-bottom: 1px solid #cccccc; color: #000; position: relative;}
#m-gnb .m1 .btn-dep1:before { content: ''; position: absolute; right:20px; top:11px; width:10px; height:10px; border-left: 1px solid #c0c0c2; border-bottom: 1px solid #c0c0c2; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transition:all 0.5s ease; -webkit-transition:all 0.5s ease;}
#m-gnb .m1.active .btn-dep1:before { transform:rotate(135deg); -webkit-transform:rotate(135deg); top:17px;}
#m-gnb .welcome { height:65px;  background: #ee1c25 url(../img/common/bg_nav.png) no-repeat 60% 50%; background-size:auto 65px;  overflow: hidden; padding:27px 15px 0 27px; }
#m-gnb .welcome span { float:left; font-size:16px; font-weight: 600; color: #fff; padding-top:3px; }
#m-gnb .welcome span strong { font-weight: normal; font-size:20px; }
#m-gnb .welcome div { float:right;}
#m-gnb .welcome div a { display: inline-block; padding:0 10px; vertical-align: bottom; width:25px; height:25px; margin-left: 10px; }
#m-gnb .welcome div a.btn-w1 { background: url(../img/common/nav_ico1.png) no-repeat 50% 50%; background-size:14px auto; float:right;}
#m-gnb .welcome div a.btn-w2 { background: url(../img/common/nav_ico2.png) no-repeat 50% 100%; background-size:19px auto; float:right;}
#m-gnb .welcome div a.btn-w3 { background: url(../img/common/ico_home.png) no-repeat 50% 50%; background-size:32px auto; float:left; width:32px;}

#m-gnb .dep2 { display: none; }
#m-gnb ul > li.active .btn-dep1 { background-image:url(../img/common/ico_m_nav_minus.png);}
#m-gnb ul > li:last-child a { border-bottom: 0;}
#m-gnb .dep2 .title { display: none; }
#m-gnb .dep2 .nav a { display: block; font-size:15px; padding-left:30px; line-height: 39px; height:40px; border-bottom: 1px solid rgba(204,204,204,0.6); color: #000;}
#m-gnb .dep2 .nav p a { background:#f2f2f2 url(../img/common/ico_m_nav_plus.png) no-repeat 95% 50%; }
#m-gnb .dep2 .nav p.active a { background-image:url(../img/common/ico_m_nav_minus.png); }
#m-gnb .copy { display: none;text-align: center; font-size:11px; padding:25px 0 0; color: #999;}
.bg-m { display: none;position: fixed; left: 0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.7); z-index:4000; }

body.fixed #m-gnb { display: block;left:0; }
body.fixed { overflow: hidden;}
body.fixed .bg-m { display: block;}


/* ==========================================================================
   Icon
   ========================================================================== */
.ico {display: inline-block; vertical-align: middle;}
/* 건강검진 - 성장기록 */
.rslt-box .rslt .ico.ico-arr-up {background: url('../img/common/ico_rslt_arr_up.png') 50% 50% no-repeat; background-size: 23px auto;}
.rslt-box .rslt .ico.ico-arr-down {background: url('../img/common/ico_rslt_arr_down.png') 50% 50% no-repeat; background-size: 23px auto;}
.rslt-box .rslt .ico.ico-arr-zero {background: url('../img/common/ico_rslt_arr_zero.png') 50% 50% no-repeat; background-size: 18px auto;}


/* ==========================================================================
   Button
   ========================================================================== */
/* btn default */
.btn {display: inline-block; vertical-align: middle; border: 1px solid; font-size: 18px; padding: 0 15px; height: 60px; line-height: 56px; white-space: nowrap; text-align: center; border:1px solid #ddd; background: #fff;  -webkit-appearance: none; appearance: none;}
/* btn style */
.btn-block {padding: 0 15px; color: #fff; border:1px solid #ddd; background: #ddd;}
.btn-outline {border: 1px solid #ddd; background: #fff}
.btn-full {width: 100%; display: block; text-align: center;}
.btn-clear {border: 1px solid transparent; background-color: transparent;}
/* size */
.btn.btn-sm {height: 24px; line-height: 21px; font-size: 12px; }
.btn.btn-mm {height: 44px; line-height: 42px; font-size: 18px; }
.btn.btn-lg {height: 66px; line-height: 64px; font-size: 18px; }
/* color */
.btn-block.btn-primary {color: #fff; border: 1px solid #e70014; background-color: #e70014;}
.btn-outline.btn-primary {color: #e70014; border: 1px solid #e70014; background-color: #fff;}
.btn-full.btn-primary {color: #fff; border: 1px solid #e70014; background-color: #e70014;}

/* login */
#login .btn.btn-block {width: 64px; height: 40px; font-size: 15px; font-weight: normal; color: #fff; line-height: 40px; text-align: center; border: 1px solid #e70014; background: #e70014;}

/* main */
#header .btn-nav {position: absolute; right: 0; top: 0; width: 47px; height: 47px; background: url('../img/common/ico_gnb_nav.png') no-repeat 50% 50%; background-size: 23px auto; }
#header .btn-back {position: absolute; left: 0; top: 0; width: 47px; height: 47px; }
#header .btn-back:before {content: ''; display: block; margin: 15px auto 0; width: 12px; height: 12px; border: 2px solid #000; border-top:0; border-right: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#header .btn-user {position: absolute; left: 0; top: 0; width: 47px; height: 47px; background: url('../img/common/ico_user.png') no-repeat 50% 50%; background-size: 17px auto; }

/* floating button */
.has-btn-floating .contents {padding-bottom: 64px;}
.btn-floating {position: fixed; bottom: 15px; right: 15px;}
.btn-floating .btn-add-children,
.btn-floating .btn-add-children2,
.btn-floating .btn-list,
.btn-floating .btn-graph  {width: 95px; height: 34px; font-size: 15px; line-height: 32px;}


/* ==========================================================================
   Modal
   ========================================================================== */
/* MODAL */
.modal-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 7500; opacity: .54; filter: alpha(opacity=54);}
.modal {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 8000; overflow: auto; -webkit-overflow-scrolling: touch; outline: 0; text-align: left;}
.modal-dialog {position: relative; width: auto; margin: 0 auto; border-radius: 5px; padding: 0 15px; }
.modal-header { font-size: 18px; color: #e70014; font-weight: 600; padding-top: 10px; margin-bottom: 12px; }
.modal-content {position: relative; color: #555; background-color: #fff; outline: none; padding: 10px 10px 20px; overflow: hidden;}
.modal .close { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; background: url('../img/common/ico_modal_close.png') no-repeat 50% 50%; background-size: 20px auto; }
.modal-body {}
.modal-footer:after {content: ''; display: block; clear: both;}

/* 로그인 - 서비스 신청 동의 절차 */
#modalService .modal-body .privacy {border: 1px solid #bcc6d1;}
#modalService .modal-body .privacy h3 {font-size: 14px; font-weight: 600; padding: 15px 0; text-align: center; border-bottom: 1px solid #bcc6d1;}
#modalService .modal-body .privacy .text {font-size: 12px; font-weight: 400; color: #818a93; padding: 15px 10px; line-height: 1.4em;}
#modalService .modal-body .privacy .text strong {font-weight: 600; color: #000; display: block; margin-bottom: 23px;}
#modalService .modal-body .privacy .text ol {margin-left: 1em;}
#modalService .modal-body .agree-box {margin-top: 11px; border: 1px solid #bcc6d1;}
#modalService .modal-footer {padding-top: 19px;}


/* ==========================================================================
   Header
   ========================================================================== */
#header {border-bottom: 1px solid #ededed; background: #fff;}
#header h1 { text-align: center; font-size: 18px; line-height: 45px; color: #333; }
#header h1 { text-align: center; font-size: 18px; line-height: 24px; color: #333; padding: 11px 44px 11px 44px;}

/*  Login */
#login .main-header {height: 114px; padding-top: 54px; text-align: center; }
#login .main-header h1 img {width: 64px; height: 62px; vertical-align: top;}
#login .main-header h1 p {font-family: 'Daum'; font-size: 20px; font-weight: 400; color: #e70014; padding-top: 7px;}

/* Main */
#main .header {border-bottom: 1px solid #c60010;}
#main .header h1 {color: #e70014;}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Main */
#main .footer {
    height: 100px; padding-top: 35px; text-align: center; background-color: #fff;
    position: fixed; bottom: 0; width: 100%;
}
#main .footer {height: 60px; padding-top: 8px;}
#main .footer h2 {height: 23px;}
#main .footer h2 img {width: 185px; height: 23px; vertical-align: top;}
#main .footer .copyright {font-size: 11px; font-weight: 400; color: #38393b; padding-top: 8px;}


/* ==========================================================================
   화면 별 contents
   ========================================================================== */
#main .contents {padding-bottom: 60px;}/* 171204 수정 */
/* Main - 공통 */
#main .main-nav {
    list-style: none; overflow: hidden; /* 47 + 100 = 147 */
    height: calc(100vh - 107px); height: 100%; /* 171204 수정 */
} 
#main .main-nav-item {
    width: 50%; 
    height: calc((100vh - 107px) / 3 ); height: 33%; /* 171204 수정 */
    float: left; border-bottom: 1px solid #fff;
}
#main .main-nav-item .nav-anchor {display: block; width: 100%; height: 100%; position: relative;}
#main .main-nav-item .nav-wrap {position: relative; display: block; width: 125px; height: 128px; position: absolute; top: 50%; margin-top: -64px;}
#main .main-nav-item .ico-main-nav-more {width: 22px; height: 22px; font-size: 0; line-height: 0; text-indent: -10000px; background: url('../img/main/ico_main_more.png') 0 0 no-repeat; background-size: 22px auto; position: absolute; bottom: 0; right: 0;}
#main .main-nav-item .tit-wrap {padding-top: 13px;}
#main .main-nav-item .tit {color: #fff; letter-spacing: -1px; font-size: 20px; line-height: 24px;}
#main .main-nav-item .tit strong {font-weight: 400;}
#main .main-nav-item .desc {letter-spacing: -1px; font-size: 12px; padding-top: 5px; line-height: 16px;}
#main .main-nav-item.main-nav-item-1,
#main .main-nav-item.main-nav-item-2 {background-color: #ef6f78;}
#main .main-nav-item.main-nav-item-1 .desc,
#main .main-nav-item.main-nav-item-2 .desc {color: #ba2f3a;}
#main .main-nav-item.main-nav-item-3,
#main .main-nav-item.main-nav-item-4,
#main .main-nav-item.main-nav-item-7 {
    background-color: #f4811e;
    height: 34%; /* 171204 수정 */
}
#main .main-nav-item.main-nav-item-3 .desc,
#main .main-nav-item.main-nav-item-4 .desc,
#main .main-nav-item.main-nav-item-7 .desc {color: #f7b379;}
#main .main-nav-item.main-nav-item-5,
#main .main-nav-item.main-nav-item-6 {background-color: #425a96;}
#main .main-nav-item.main-nav-item-5 .desc,
#main .main-nav-item.main-nav-item-6 .desc {color: #b9c8e9;}
#main .main-nav-item .ico-main-nav {width: 95px; height: 50px; margin-bottom: 0; background-size: 95px auto; background-position: 0 0; background-repeat: no-repeat;}
#main .main-nav-item .ico-main-nav.ico-main-1 {background-image: url('../img/main/ico_main_01.png');}
#main .main-nav-item .ico-main-nav.ico-main-2 {background-image: url('../img/main/ico_main_02.png');}
#main .main-nav-item .ico-main-nav.ico-main-3 {background-image: url('../img/main/ico_main_03.png');}
#main .main-nav-item .ico-main-nav.ico-main-4 {background-image: url('../img/main/ico_main_04.png');}
#main .main-nav-item .ico-main-nav.ico-main-7 {background-image: url('../img/main/ico_main_07.png'); width: 48px; height: 41px; background-size: 48px auto; }
/* Main - 예외 */
#main .main-nav-item.main-nav-item-2 .nav-wrap,
#main .main-nav-item.main-nav-item-4 .nav-wrap {left: 0; margin-left: 32px;}
#main .main-nav-item.main-nav-item-6 .nav-wrap {left: 0; margin-left: 15px; width: 130px; height: 128px; margin-top: -64px; width: 140px; padding-top: 13px;}
#main .main-nav-item.main-nav-item-1 .nav-wrap,
#main .main-nav-item.main-nav-item-3 .nav-wrap,
#main .main-nav-item.main-nav-item-5 .nav-wrap {right: 0; margin-right: 15px;}
#main .main-nav-item.main-nav-item-5 .nav-wrap {padding-top: 13px;}

#main .main-nav-item .main-nav-item-5,
#main .main-nav-item .main-nav-item-6 {height: 33.34%;}
#main .main-nav-item.main-nav-item-7 {width: 100%;}
#main .main-nav-item.main-nav-item-2, 
#main .main-nav-item.main-nav-item-4, 
#main .main-nav-item.main-nav-item-6 {border-left: 1px solid #fff;}
#main .main-nav-item.main-nav-item-5 .nav-anchor {}
#main .main-nav-item.main-nav-item-5 .tit-wrap {padding-top: 0;}
#main .main-nav-item.main-nav-item-5 .tit {}
#main .main-nav-item.main-nav-item-5 .desc {}
#main .main-nav-item.main-nav-item-6 .nav-anchor {}
#main .main-nav-item.main-nav-item-6 .tit-wrap {text-align: center; padding-top: 0;}
#main .main-nav-item.main-nav-item-6 .tit .name,
#main .main-nav-item.main-nav-item-6 .tit .num {display: block;}
#main .main-nav-item.main-nav-item-6 .tit .name {font-size: 19px;}
#main .main-nav-item.main-nav-item-6 .tit .num {font-size: 30px; padding-top: 16px;}
#main .main-nav-item.main-nav-item-6 .desc {padding-top: 10px;}
#main .main-nav-item.main-nav-item-7 {background-color: #f4811e;}
#main .main-nav-item.main-nav-item-7 .nav-wrap {width: 257px; height: 99px; margin-top: -49px; left: 50%; margin-left: -128px;}
#main .main-nav-item.main-nav-item-7 .nav-anchor {}
#main .main-nav-item.main-nav-item-7 .tit-wrap {padding-top: 0;}
#main .main-nav-item.main-nav-item-7 .tit {padding-top: 7px;}
#main .main-nav-item.main-nav-item-7 .ico-main-7 {position: absolute; top: 2px; right: 32px;}
#main .main-nav-item.main-nav-item-7 .btn.btn-main-start {position: absolute; bottom: 0; right: 0; display: inline-block; width: 116px; height: 35px; line-height: 34px; font-size: 14px; font-weight: 400; color: #fff; border-radius: 18px; border: 2px solid #fff; background-color: transparent;}
#main .main-nav-item.main-nav-item-7 .btn.btn-main-start {position: absolute; bottom: 0; right: 0; display: inline-block; width: 116px; height: 35px; line-height: 1.4em; font-size: 14px; font-weight: 400; color: #fff; vertical-align: middle; border-radius: 18px; border: 2px solid #fff; background-color: transparent; padding: 6px 0;}
#main .main-nav-item.main-nav-item-7 .nav-wrap {width: 297px; margin-left: -140px;}
#main .main-nav-item.main-nav-item-1 .ico-main-nav,
#main .main-nav-item.main-nav-item-2 .ico-main-nav,
#main .main-nav-item.main-nav-item-3 .ico-main-nav,
#main .main-nav-item.main-nav-item-4 .ico-main-nav {background-position: 9px 0;}

@media screen and (orientation:portrait) and (max-height: 586px) {
    #main .main-nav-item .nav-wrap {height: 100px; margin-top: -50px;}
    #main .main-nav-item .tit-wrap {padding-top: 6px;}
    #main .main-nav-item .ico-main-nav {width: 75px; height: 42px; background-size: 75px auto;}
    #main .main-nav-item .desc {line-height: 13px;}
    #main .main-nav-item.main-nav-item-2 .nav-wrap, 
    #main .main-nav-item.main-nav-item-4 .nav-wrap {margin-left: 14%;}
    #main .main-nav-item.main-nav-item-1 .nav-wrap, 
    #main .main-nav-item.main-nav-item-3 .nav-wrap, 
    #main .main-nav-item.main-nav-item-5 .nav-wrap {margin-right: 8%;}
    #main .main-nav-item.main-nav-item-6 .nav-wrap {margin-left: 8%;}
    #main .main-nav-item.main-nav-item-5 .nav-wrap {padding-top: 4px;}
    #main .main-nav-item.main-nav-item-6 .nav-wrap {height: 90px; margin-top: -45px;}
    #main .main-nav-item.main-nav-item-6 .nav-wrap {height: 100px; margin-top: -50px; padding-top: 4px;}
    #main .main-nav-item.main-nav-item-6 .tit .num {padding-top: 10px;}
    #main .main-nav-item.main-nav-item-6 .tit .num {padding-top: 8px;}
    #main .main-nav-item.main-nav-item-6 .desc {padding-top: 7px;}
    #main .main-nav-item .tit-wrap {padding-top: 5px;}
    #main .main-nav-item .desc {padding-top: 3px;}
    #main .main-nav-item .nav-anchor {}
    #main .main-nav-item.main-nav-item-7 .nav-wrap {width: 284px; margin-left: -142px; height: 94px; margin-top: -47px;}
}

@media screen and (orientation:landscape) and (max-height: 640px) {
    #main .footer {position: relative; /* 171204 추가 */}
    #main .contents {padding-bottom: 0; /* 171204 추가 */}
    #main .main-nav {list-style: none; overflow: hidden; height: auto;}
    #main .main-nav-item {
        width: 50%; 
        height: calc((100vh - 47px) / 1.5 ); height: 150px; /* 171204 수정 */
        float: left; border-bottom: 1px solid #fff;}
    #main .main-nav-item .tit strong {font-weight: 400;}
    #main .main-nav-item.main-nav-item-1,
    #main .main-nav-item.main-nav-item-2 {background-color: #35bdb0;}
    #main .main-nav-item.main-nav-item-1 .desc,
    #main .main-nav-item.main-nav-item-2 .desc {color: #25867d;}
    #main .main-nav-item.main-nav-item-3,
    #main .main-nav-item.main-nav-item-4,
    #main .main-nav-item.main-nav-item-7 {
        background-color: #f4811e;
        height: 150px; /* 171204 수정 */
    }
    #main .main-nav-item.main-nav-item-3 .desc,
    #main .main-nav-item.main-nav-item-4 .desc,
    #main .main-nav-item.main-nav-item-7 .desc {color: #f7b379;}
    #main .main-nav-item.main-nav-item-5,
    #main .main-nav-item.main-nav-item-6 {background-color: #425a96;}
    #main .main-nav-item.main-nav-item-5 .desc,
    #main .main-nav-item.main-nav-item-6 .desc {color: #b9c8e9;}
    #main .main-nav-item .ico-main-nav.ico-main-1 {background-image: url('../img/main/ico_main_01.png');}
    #main .main-nav-item .ico-main-nav.ico-main-2 {background-image: url('../img/main/ico_main_02.png');}
    #main .main-nav-item .ico-main-nav.ico-main-3 {background-image: url('../img/main/ico_main_03.png');}
    #main .main-nav-item .ico-main-nav.ico-main-4 {background-image: url('../img/main/ico_main_04.png');}
    #main .main-nav-item.main-nav-item-7 {width: 100%;}
    #main .main-nav-item.main-nav-item-7 {background-color: #f4811e;}
}


/* Login */
#login .form-login {padding: 25px 15px 0;}
#login .login-box .item-box {padding-top: 16px;}
#login .login-box .autologin-box {margin-top: 12px; margin-bottom: 18px;}
#login .item-right.item-btn {padding-left: 10px; }
#login .wrap-info {margin-top: 14px; }
#login .wrap-info p {font-size: 12px; font-weight: 400; color: #9ba6b3; line-height: 1.4em;}
#login .wrap-btn {padding-top: 18px;} /* 자동로그인 빠지게 되어 추가 170531 */

   /* List */
.list-box {}
.list-ul {list-style: none;}
.list-li {position: relative; margin: 0; padding: 0; border-bottom: 1px solid #ccc; background-color: #fff;}
.list-li:first-child {border-top: 1px solid #ccc;}
.list-li .data-wrap {min-height: 46px; line-height: 1.4em;}
.list-li .data-wrap .data-anchor {display: block; padding: 15px 15px; letter-spacing: -0.5px;}
.list-li.has-btn .data-wrap {padding-right: 46px;}
.list-li .btn-wrap {position: absolute; width: 46px; height: 46px; top: 0; right: 0 }
.list-li .btn-wrap .btn-delete {width: 46px; height: 46px; background: url('../img/common/ico_list_delete.png') center center no-repeat; background-size: 17px auto;}
form + .list-box {margin-top: 26px;}

/* 자녀등록 리스트 */
.list-children .data-wrap dl {display: table;}
.list-children .data-wrap dt,
.list-children .data-wrap dd {display: table-cell;}
.list-children .data-wrap dt span, 
.list-children .data-wrap dd span {display: block;}
.list-children .data-wrap .name {width: 86px; padding-right: 8px;}
.list-children .data-wrap .cm,
.list-children .data-wrap .jendar {width: 70px; padding-right: 8px;}
.list-children .data-wrap .date {}

/* 성장 체크 */
.check-main {
    padding: 15px; width: 100%; height: 100%; background: url('../img/bg_main_check.png') center bottom no-repeat; background-size: cover;
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; 
    display: flex;
	-webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start;  -moz-align-items: flex-start; 
    align-items: flex-start;
    -webkit-justify-content: center; -moz-justify-content: center; 
    justify-content: center;
}
.main-msg {width: 100%; text-align: center; margin-top: 5vw; max-width: 360px;}
.main-msg h2 {font-size: 36px; font-weight: 600; color: #e70014; line-height: 1.4em;}
.main-msg .tit-desc {font-size: 15px; font-weight: 400; color: #333; padding-top: 5px; line-height: 1.4em;}
.main-msg .btn-wrap {padding-top: 20px;}

/* 성장체크 - 성장기록 */
.rslt-box {padding: 15px 0 15px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #fff;}
.rslt-box .info {font-size: 15px; font-weight: 600; color: #ccc; text-align: right; padding-right: 15px;}
.rslt-box .info .date {color: #333; padding-right: 8px;}
.rslt-box .rslt {
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
    margin-top: 10px; margin-bottom: 5px;
}
.rslt-box .rslt .height-box,
.rslt-box .rslt .weight-box {
    -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row;
    flex-direction: row; 
    -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; 
    flex: 1; 
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center;
    justify-content: center; 
    padding: 10px 5px 12px; text-align: center;
}
.rslt-box .rslt .height-box {}
.rslt-box .rslt .weight-box {}
.rslt-box .rslt .rslt-header {line-height: 1.4em}
.rslt-box .rslt .rslt-header .tit {font-size: 15px; font-weight: 400; color: #333; }
.rslt-box .rslt .rslt-header .value {font-size: 12px; font-weight: 200; color: #999; padding-left: 3px;}
.rslt-box .rslt .rslt-header .value {font-size: 15px; font-weight: 400; color: #f1837c; padding-left: 3px;}
.rslt-box .rslt .rslt-body {margin-top: 8px; line-height: 1.4em}
.rslt-box .rslt .rslt-body .num {font-size: 30px; font-weight: 600; color: #333;}
.rslt-box .rslt .rslt-body .unit {font-size: 18px; font-weight: 400; color: #ccc; padding: 0 3px;}
.rslt-box .rslt .ico {width: 23px; height: 18px; vertical-align: top; margin-right: -20px; margin-left: 5px;}
.graph-box, .tbl-box {margin-top: 20px;}
.tbl-box {}
.tbl-box table {width: 100%; border-collapse: collapse; border-spacing: 0;}
.tbl-box table th, .tbl-box table td {text-align: center;}
.tbl-box table th {height: 45px; padding: 15px 10px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #fff; font-size: 12px; font-weight: 400; color: #333; line-height: 1.4em;}
.tbl-box table td {padding: 8px 10px 7px 10px; border-bottom: 1px solid #ccc; background-color: #fff; font-size: 12px; font-weight: 400; color: #333; line-height: 1.4em; vertical-align: middle;}
.tbl-box table td .txt-wrap {display: inline-block; text-align: left;}
.tbl-box td .yyyy, .tbl-box td .mmdd,
.tbl-box td .txt-block {display: block;} /* 170531 수정 */

.remarks {text-align: center; margin-top: 10px;}
.remarks .remarks-wrap {list-style: none; display: inline-block}
.remarks .remark {float: left; margin-left: 7px; }
.remarks .remark:first-child {margin-left: 0;}
.remarks .remark.high .remark-color,
.remarks .remark.low .remark-color,
.remarks .remark.average .remark-color {display: inline-block; width: 20px; height: 2px; margin-right: 5px; vertical-align: middle; }
.remarks .remark.high .remark-color,
.remarks .remark.low .remark-color {background-color: #fe009b;}
.remarks .remark.average .remark-color {background-color: #bcd32b;}
.remarks .remark.measurement .remark-color {display: inline-block; width: 9px; height: 9px; border-radius: 5px; background-color: #fe009b; margin-right: 5px; vertical-align: middle;}
.remarks .remark .note {font-size: 10px; font-weight: 400; color: 666;}

/* 학습성향 */
.learning {height: 100%;}
.learning .box-wrap {max-width: 400px; min-width: 290px; width: 100%;}
.learning .header-wrap {
    height: 62%;
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; 
    align-items: center;
    text-align: center; background-color: #9f5feb;
    padding-top: 4vh;
	padding: 30px 10px;
}
.learning .item-box {display: block;}
.learning .item-box .item-left {display: block;}
.learning h2 {padding-top: 10px;}
.learning h2 strong {font-size: 33px; font-weight: 400; color: #fff; line-height: 1em; letter-spacing: -1px; }
.learning .quote {font-size: 12px; font-weight: 400; color: #fdd3a9; line-height: 1.2em; letter-spacing: -0.5px; padding-top: 20px;}
.learning .desc {font-size: 14px; font-weight: 400; color: #fdd3a9; line-height: 1.2em; letter-spacing: -0.5px; padding-top: 15px; }
.learning .ico-learning {width: 122px; height: 150px; margin-right: 13px; background: url('../img/ico-learning.png') 50% 50% no-repeat; background-size: 122px auto;}
.learning .foot-wrap {
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center;
    justify-content: center; 
    -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; 
    align-items: center;
    padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 20px;
}
.learning .foot-wrap .info {list-style: none; padding-top: 10px;}
.learning .foot-wrap .desc,
.learning .foot-wrap .info-li {font-size: 11px; font-weight: 400; color: #999; line-height: 1em; letter-spacing: -0.5px; padding-top: 20px; padding-left: 12px; text-indent: -12px;}
.learning .foot-wrap .info-li {padding-top: 5px;}
.learning .btn-check {height: 66px; padding: 22px 22px; font-size: 18px; font-weight: 400; color: #fff; line-height: 1.4em; border: 1px solid #9f5feb; background-color: #9f5feb;}

/* 심리 */
.psychology {height: 100%;}
.psychology .box-wrap {max-width: 400px; min-width: 290px; width: 100%;}
.psychology .header-wrap {
    xheight: 62%;
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; 
    align-items: center;
    text-align: center; background-color: #e70014;
    padding-top: 2vh;
	padding:30px 10px 35px;
}
.psychology .item-box {display: block;}
.psychology .item-box .item-left {display: block;}
.psychology h2 {padding-top: 10px;}
.psychology h2 strong {font-size: 33px; font-weight: 400; color: #fff; line-height: 1em; letter-spacing: -1px; }
.psychology .quote {font-size: 12px; font-weight: 400; color: #fed2ab; line-height: 1.2em; letter-spacing: -0.5px; padding-top: 20px;}
.psychology .desc {font-size: 13.5px; font-weight: 400; color: #fed2ab; line-height: 1.2em; letter-spacing: -1.5px; padding-top: 15px; }
.psychology .ico-psychology {width: 154px; height: 152px; margin-right: 13px; background: url('../img/ico-psychology.png') 50% 50% no-repeat; background-size: 154px auto;}
.psychology .foot-wrap {
    display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center;
    justify-content: center; 
    -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; 
    align-items: center;
    padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 20px;
}
.psychology .foot-wrap .info {list-style: none; padding-top: 10px;}
.psychology .foot-wrap .desc,
.psychology .foot-wrap .info-li {font-size: 11px; font-weight: 400; color: #999; line-height: 1em; letter-spacing: -0.5px; padding-top: 20px; padding-left: 12px; text-indent: -12px;}
.psychology .foot-wrap .info-li {padding-top: 5px;}
.psychology .btn-check {height: 66px; padding: 22px 22px; font-size: 18px; font-weight: 400; color: #fff; line-height: 1.4em; border: 1px solid #e70014; background-color: #e70014;}

@media screen and (orientation:portrait) and (max-height: 586px) {
    /* iphone5 */
    .learning .ico-learning {width: 100px; height: 124px; background-size: 100px auto;}
    .learning .ico-learning {width: 19vh; height: 24vh; background-size: 19vh auto; margin-right: 3vh;}
    .learning h2 strong {font-size: 28px;}
}
@media screen and (orientation:landscape) and (max-height:767px) {
    /* landscape 세로 모드 */
    .learning {height: auto;}
    .learning .header-wrap {padding-top: 30px; padding-bottom: 25px;}
    .learning .header-wrap {padding-top: 9vh; padding-bottom: 8vh;}
    .learning .item-box {
        width: auto;
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -moz-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .learning .item-box .item-left {
        display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; 
        display: flex;
        -webkit-box-flex: none; -webkit-flex: none; -moz-box-flex: none; -moz-flex: none; -ms-flex: none; flex: none;
    }
    .learning .item-right {
        display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1;
        -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;  -moz-align-items: center; align-items: center;
        -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start;
    }
    .ie .learning .item-right {
        -webkit-box-flex: none; -webkit-flex: none; -moz-box-flex: none; -moz-flex: none; -ms-flex: none; flex: none;
    }
    .learning .ico-learning {width: 60px; height: 74px; background-size: 60px auto;}
    .learning h2 {
        -webkit-box-flex: none; -webkit-flex: none; -moz-box-flex: none; -moz-flex: none; -ms-flex: none; flex: none;
    }
    .learning h2 strong {font-size: 24px; }
    .learning .foot-wrap {padding-bottom: 20px;}
}

/* 설정 */
.setting .setting-list {list-style: none; padding-top: 12px;}
.setting .setting-item:first-child {border-top: 1px solid #ccc;}
.setting .setting-item {border-bottom: 1px solid #ccc; background-color: #fff;}
.setting .setting-anchor {display: block; height: 46px; padding: 0 15px; line-height: 46px;}

/* 서비스센터 */
.service-center {text-align: center; padding: 40px 37px 40px;}
.service-center .center-box .ico.ico-service-center {width: 70px; height: 93px; background: url('../img//setting/ico_center.png') 0 0 no-repeat; background-size: 70px auto;}
.service-center .center-box .ico.ico-call {width: 38px; height: 50px; background: url('../img//setting/ico_call.png') 0 0 no-repeat; background-size: 38px auto; margin-left: -30px;}
.service-center .center-box .tit {font-size: 18px; font-weight: 400; color: #333; line-height: 1.4em;}
.service-center .center-box .tit .strong {color: #e70014; padding-right: 5px;}
.service-center .center-box .tit + .desc {padding-top: 15px;}
.service-center .center-box .desc {font-size: 15px; font-weight: 400; color: #333; line-height: 1.4em;}
.service-center .center-box .desc strong {font-size: 36px;}
.service-center .center-box .call-info {padding-left: 10px;}
.service-center .center-box .call-info .day {font-size: 13px; color: #666;}
.service-center .center-box .btn-call {margin-top: 33px;}
.service-center .center-box .btn-call {width: 245px; height: 62px; font-size: 18px; font-weight: 400; color: #333; line-height: 58px; border-radius: 31px; border: 2px solid #e70014;}
.service-center .center-box .center-info {position: relative; font-size: 14px; font-weight: 400; color: #333; line-height: 1.4em; text-align: left; margin-top: 18px;}
.service-center .dropout-box {padding-top: 20px; text-align: left;}
.service-center .dropout-box strong.tit {position: relative; font-size: 15px; font-weight: 600; color: #e70014; line-height: 1.4em;}
.service-center .dropout-box p.desc {font-size: 14px; font-weight: 400; color: #666; line-height: 1.4em;}
.service-center .dropout-box p.desc strong {font-weight: 400; color: #000;}
.service-center .center-box .center-info,
.service-center .dropout-box {margin-left: 15px;}
.service-center .center-box .center-info:after,
.service-center .dropout-box strong.tit:after {position: absolute; top: 6px; left: -6px; display: block; content: ''; width: 3px; height: 3px; background: url('../img/setting/bu_dropout.png') 0 0 no-repeat; }


/* 응급큐레이팅 */
.ec{}
.ec .info-txt{width:100%; background:#fff; color:#888; padding:15px 0 17px 20px; font-size:12px; border-bottom:1px solid #ededed;}
.ec ul{overflow:hidden; padding:0 10px;}
.ec ul li{float:left; width:44%; list-style:none; margin:20px 3% 0;}
.ec ul li a{display:block; width:100%; text-align:center; font-size:15px; letter-spacing:-1px;}
.ec ul li a img{width:100%; margin-bottom:5px; border:1px solid #ccc; border-radius:20px;}


/* 위험도 체크 > 성 조숙증 위험도 메인 */
.hz {padding: 15px; width: 100%; height: 100%;background-color: #f48283;}
.hz .main-msg {overflow-y:scroll;position:relative; width: 100%; height:100%; text-align: center; xmax-width: 330px; padding:15px; margin:0 auto;}
.hz .main-msg h2 {font-size: 30px; font-weight: 300; color: #fff; line-height: 1em; letter-spacing: -1px;}
.hz .main-msg h2 span{display:block; font-size:18px; font-weight: 300; letter-spacing:-1px; line-height:22px; margin-top:10px;}
.hz .main-msg .ico-hz-main {text-align:center; width: 270px; height: 230px; background: url('../img/img_hz.png') 0 0 no-repeat; background-size: 100% auto;}
.hz .main-msg .tit-desc {font-size: 15px; font-weight: 400; color: #fff; letter-spacing: -1px; padding-top: 5px; padding-bottom: 45px; line-height: 1.4em;}
.hz .main-msg .btn-wrap {padding-top: 55px;}
.hz .main-msg .box{font-size: 12px; font-weight: 400; color: #fff; padding: 15px 10px; line-height:18px; text-align:left; background:#f05e6b; color:#fff; word-break:keep-all;}
.hz .main-msg .info {font-size: 13px; font-weight: 400; color: #fff; padding-top: 20px; line-height: 16px; text-align: right; letter-spacing: -1px;}
.hz .main-msg .check-main-btn{overflow:hidden;}
.hz .main-msg .check-main-btn p{float:left; width:49%; margin-bottom:5px;}
.hz .main-msg .check-main-btn p:nth-child(odd){margin-right:2%;}
.hz .main-msg .check-main-btn p a img{max-width:100%;}
.hz .btn-start{display:block; width:100%; background:#fff; color:#000; font-size: 28px; padding:15px 0 20px; margin:30px 0 20px; border-radius:30px;}
.hz .btn-start:hover{background:#a3000e; color:#fff;}


/* 위험도 체크 > 성 조숙증 위험도 문진 */
.hz_check {padding:20px 0 80px; width: 100%; background-color: #fcdfe1;}
.hz_check.hz_check2{height:100%;}
.hz_check .interview_main{padding:50px 0 30px; overflow:hidden;}
.hz_check .interview_main .txt{text-align:center;font-size:25px;}
.hz_check .interview_main .gender{padding:40px 20px;}
.hz_check .interview_main .gender a{display:inline-block;width:49%;}
.hz_check .interview_main .gender a img{top:0;left:0;width:100%;}
.hz_check .interview_main .gender a img:last-child{display:none;}
.hz_check .interview{}
.hz_check .interview .interview_l1 .txt{position:relative; padding: 5px 10px 5px 55px; font-size:18px; line-height:20px; color:#000;}
.hz_check .interview .interview_l1 .txt.long{padding: 5px 10px 5px 65px;}
.hz_check .interview .interview_l1 .txt span{display:inline-block; position:absolute; left:20px; top:5px; font-weight:bold;}
.hz_check .interview .interview_l1 p.check{margin:8px 20px 8px 50px}
.hz_check .interview .interview_l1 p.check label{margin-right:15px;}
.hz_check .interview .interview_l1 div.check_selec p{margin:10px 30px; background:#a4dfe3; padding:10px; border-radius:20px;}
.hz_check .interview .interview_l1 div.check_selec span{display:inline-block;}
.hz_check .interview .interview_l1 div.check_selec span.glass{width:100%; text-align:right; padding-right:40px;}
.hz_check .interview .interview_l1 div.check_selec input[type=text]{font-size:16px; width:50px;text-align:center;border:0;border-bottom:1px solid #000;background:0;} 
.hz_check .interview input[type=radio] { width:35px; height: 35px; border:0; margin:0 5px;}
.hz_check .interview input[type=radio]:checked { background-color: #ff5766; }
.hz_check .interview input[type=radio]:before { border:0; }
.hz_check .interview input[type=radio]:checked:before { opacity:1; }
.hz_check .interview_bul{width:100%; text-align:center; margin-top:20px;}
.hz_check .interview_bul span{display:inline-block; width:13px; height:13px; border-radius:13px; background:#fff;}
.hz_check .interview_bul span.on{background:#e70014}
.hz_check_btn {position: fixed; width: 100%; bottom: 0; height: 50px; z-index:999; }


/* btn style */
.btn-block {padding: 0 15px; color: #fff; border:1px solid #ddd; background: #ddd;}
.btn-outline {border: 1px solid #ddd; background: #fff}
.btn-full {width: 100%; display: block; text-align: center;}
.btn-clear {border: 1px solid transparent; background-color: transparent;}
.btn-half{width:50%; display: block; text-align:center; float:left;}
.btn-half2{width:50%; display: block; text-align:center; float:right;}
/* size */
.btn.btn-lg2 {height: 50px; line-height: 48px; font-size: 18px; }
/* color */
.btn-half.btn-primary {color: #fff; border: 1px solid #e70014; background-color: #e70014;}
.btn-half.btn-default {color: #fff; border: 1px solid #ffb4bb; background-color: #ffb4bb;}
.btn-half2.btn-primary {color: #fff; border: 1px solid #e70014; background-color: #e70014;}
.btn-half2.btn-default {color: #fff; border: 1px solid #ffb4bb; background-color: #ffb4bb;}
.btn-block.btn-primary_s {color: #fff; border: 1px solid #e70014; background-color: #e70014;}
.btn-full.btn-primary_s {color: #fff; border: 1px solid #e70014; background-color: #e70014;}
/* floating button */
.btn-floating-group {position: fixed; bottom: 5px; right: 5px; }
.btn-floating-group a,
.btn-floating-group button {margin-left: 2px; }
.btn-floating-group a:first-child,
.btn-floating-group button:first-child {margin-left: 0;}
.btn-floating-group .btn-mm  {min-width: 95px; height: 34px; font-size: 15px; line-height: 32px; }


/* MODAL - 문진 팝업창 */
.hidden { overflow:hidden; }
.modal-backdrop {position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index:7500; opacity:.7; filter:alpha(opacity=70);}
.modal {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8000; overflow:auto; -webkit-overflow-scrolling:touch; outline:0; }
.modal-dialog {position:relative; width:auto;margin:0 auto;  padding:0 15px; }
.modal-content {position:relative; background-color:#fff; outline:none;  overflow:hidden; padding:3px; font-size:14px; color: #282828;}
.modal-foot { position: relative; overflow: hidden;} 
.modal-foot:before { content: ''; position: absolute; left: 50%; top:0; bottom:0; width:1px; background: #fff;}
.modal-foot .btn1 { float:left;width:50%; height: 40px; line-height: 39px; font-size:17px; color: #000; background: #ffe4e4; padding:0; border: 0; }
.modal-foot .btn2 { float:left;width:50%; height: 40px; line-height: 39px; font-size:17px; color: #000; background: #fff; padding:0; border: 0; }
.modal-foot.big .btn { height:55px; font-size:20px; }
.modal-txt { text-align: center; line-height: 1.4;}
.modal-photo { text-align: center; padding:15px; }
.modal-photo .img img { width:138px; }
.modal-photo .txt1 { font-size:20px; line-height: 1.3; color: #61bfe2; padding:20px 0; }
.modal-photo .txt2 { text-align:left; font-size:16px; color: #999; line-height: 1.3; padding-left: 10px; text-indent: -10px; margin-bottom: 10px;}
.modal-header { padding:5px 0; text-align: right; border-bottom: 1px solid #61bfe2; }
.modal-header .btn-del { font-size:12px; color: #019faa; display: inline-block; vertical-align: middle; padding:0 5px; }
.modal-header .btn-del img { width:17px; }
.modal-header .btn-close { display: inline-block; vertical-align: middle; width:30px; height: 30px; background: url(../img/common/ico_modal_close.png) no-repeat 50% 50%; background-size:18px auto;}

#modal3 .modal-header { background: #fff;}
#modal3 .modal-content { background: #fff; padding:10px 0 0 0; }
#modal3 .scan-result .inp-box .input .inp { border: 0; height:28px; }
#modal3 .scan-result .inp-box .input .btn-cal { display: none;}
#modal3 .scan-result .photo-upload { margin:0; border: 0; padding:25px; height:270px; overflow: auto; text-align: center;}
#modal3 .scan-result .photo-upload .photo {  }
#modalGuide .modal-content { background: #eaeaea; border: 3px solid #61bfe2; padding:40px 15px 30px; }
#modalGuide .modal-content .close { position: absolute; right:5px; top:5px; width:30px; height: 30px; background: url(../img/common/close_modal.png) no-repeat 50% 50%; background-size:19px auto; text-indent: -9999px;}
.modal .modal-content { }
.modal .modal-txt1{background:#ff9999;text-align:center;padding:50px 10px;}
.modal .modal-txt2{padding:30px 60px;}
.modal .modal-txt1 img{width:100%;}
.modal .btn-box:after { display:block; content:''; clear:both; }
.modal .btn-box a { float:left; width:50%; height:40px; text-align:center; font-size:13px; color:#fff; line-height:39px; }
.modal .btn-box a.btn1 { background:#ccc; }
.modal .btn-box a.btn2 { background:#61bfe1; }
.modal .btn-box.type1 a { width:100%;}
.modal.result_pop .modal-txt1{color:#fff; font-size:20px; word-break:keep-all; line-height:22px;}


/* 위험도 체크 > 성 조숙증 위험도 > 문진결과 */
.hz_result .pic{text-align:center; padding:12px; margin:15px 0; background:#fff;}
.hz_result .pic img{width:100%;}
.hz_result .hz_result_box{padding:15px 12px 22px; margin:15px 0 0; background:#fff; color:#7a000a;}
.hz_result .hz_result_box .tit{letter-spacing:-1.5px; word-break:keep-all; text-align:center; font-size:20px; font-weight:bold; margin:5px 0 20px; color:#e70014;}
.hz_result .hz_result_box .txt{line-height:18px; font-size:16px;  text-align:left;}


/* 위험도 체크 > 성 조숙증 위험도 > 문진결과 세부 */
.hz_result {padding: 15px 10px 50px; width: 100%; min-height:100%; background-color: #fcdfe1;}
.hz_result .hz_result_tit{text-align:center;margin:10px 0;color:#7a000a; letter-spacing:-1px; margin:10px 0 10px;}
.hz_result .hz_result_tit p span.big{font-size:28px;line-height:32px;margin-bottom:10px;}
.hz_result .hz_result_tit p span.big2{font-size:20px;margin-bottom:10px;}
.hz_result .hz_result_tit p span.big strong{font-weight:300;color:#e70014;}
.hz_result .hz_result_tit p span{display:block;font-size:17px;}
.hz_result_cont p{overflow:hidden;clear:both;width:68%;float:right;margin:10px 0 5px;font-size:14px;}
.hz_result_cont p span{display:inline-block;width:50%;text-align:center;font-weight:bold;}
.hz_result_cont dl{overflow:hidden;clear:both;height:96px;margin-bottom:10px;}
.hz_result_cont dl *{vertical-align:middle;}
.hz_result_cont dl dt{display:inline-block;width:30%;height:96px;line-height:96px;background:#fe747f;border-radius:20px;color:#fff;font-weight:bold;text-align:center;}
.hz_result_cont dl dd{display:inline-block;width:68%;height:96px;line-height:92px;background:#fff;border-radius:20px;text-align:center;}
.hz_result_cont dl dd img{width:35%;margin:0 6%;}


@media screen and (orientation:portrait) and (max-height: 586px) {
  .ec ul li a{min-height:145px;}
}


/* 도담플러스 정보포털 */
.ec02{}
.ec02 .info-txt{width:100%; background:#fff; color:#888; padding:15px 0 17px 20px; font-size:12px; border-bottom:1px solid #ededed;}
.ec02 ul{overflow:hidden; padding:20px 10px;}
.ec02 ul li{position:relative; float:left; padding:0 5% ; width:44%; list-style:none; margin:0 3% 10px; border-radius:15px;}
.ec02 ul li a{display:block; width:100%; text-align:center;  font-size:15px; letter-spacing:-1px;}
.ec02 ul li a img{width:100%; margin-bottom:5px; border-radius:17px; border:1px solid #ccc;}
.ec02 ul li a.info { border-radius:0 15px 0 0; display:inline-block; position:absolute;top:0;right:0;background:#f8cbd0;color:#fff;width:30px;height:30px;text-align:center;line-height:30px;}

.modal {z-index:999999;}
.modal .modal-txt3 {padding:25px 20px 40px; font-size:18px; line-height:26px;}
.modal .modal-txt3 strong {display:block; font-size:22px; color:#df717c; letter-spacing:-1px;}
.modal .modal-txt3 b {color:#df717c;}
.modal .btn3 {float:left; width:100%; height: 40px; line-height: 39px; font-size:17px; color: #fff; background: #e5a4ac; padding:0; border: 0; text-align:center;}
.modal .btn4 {position:absolute;top:0;right:0; display:inline-block; padding:6px 12px; font-size:22px; color: #fff; background: #e5a4ac; border: 0; text-align:center;}
.bg_a {background:#fff !important;}

.modal-dialog2 { padding:0 40px; }
/*
.modal-txt4 strong { display:block; margin: 15px 0 5px 7px; }
.modal-dialog2 ul {width:100%; margin:0 }
.modal-dialog2 ul li {position:relative; list-style:none; float:left; width:46%; height:105px; border:1px solid #ddd; margin:0 2%;}
.modal-dialog2 ul li img {width:100%; margin:10px 0; clear:both; }
.modal-dialog2 ul li a {position:absolute; left:0; bottom:0; display:block; float:left; width:100%; background:#e28b94; color:#fff; text-align:center; font-size:15px; padding:7px 0;}
.modal-dialog2 .btn3 { display:block; clear:both; margin-top:20px;}*/