@charset "utf-8";

/* ================================================
  reset
==================================================*/
h1,h2,h3,h4,h5 {margin: 0; padding: 0; }
ul,ol,li {margin: 0; padding: 0; list-style: none; }
dl,dd,dt,p {margin: 0; padding: 0; }
fieldset {margin: 0; padding: 0; border: none; outline: none; }
i,em {font-style: normal; }
a {text-decoration: none; color: inherit; outline: none; cursor: pointer; }
button {display: inline-block; margin: 0; padding: 0; box-sizing: border-box; border: none; background-color: transparent; box-shadow: none; cursor: pointer; outline: none; line-height: normal; }
a:focus, 
button:focus {border: none; outline: none;}


input {display: inline-block; height: 45px; padding: 0 10px; box-sizing: border-box; border: 1px solid #d3d3d5; background-color: #fff; line-height: 43px; color: #4a4a4a; font-size: 16px; font-weight: 300; -webkit-border-radius:0; -webkit-appearance:none; -moz-appearance: none; appearance: none;}
input:focus{outline:none; -webkit-tap-highlight-color : transparent; }
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none;    -moz-appearance: none; appearance: none;}

input::placeholder {color: #b5b5b5; opacity: 1;}
input::-webkit-input-placeholder {color: #b5b5b5;}
input:-ms-input-placeholder {color: #b5b5b5;}
input:-mos-input-placeholder {color: #b5b5b5;}
input::-ms-clear {display: none; width : 0; height: 0;}
input::-ms-reveal {display: none; width : 0; height: 0;}

input:read-only {background-color: #f8f7f8; color: #888; outline: none;}
input.readonly {background-color: #f8f7f8; color: #888; outline: none;}
input:disabled {background-color: #f8f7f8; color: #888; outline: none;}
input.disabled {background-color: #f8f7f8; color: #888; outline: none;}

/* select */
select {height: 45px; padding: 0 10px; box-sizing: border-box; border: 1px solid #d3d3d5; border-radius: 0; background: #fff url('/img/common/sel_arrow_grey2.png') no-repeat right 10px center; background-size: 8px; line-height: 43px; color: #333; font-size: 16px; font-weight: 300; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* IE 에서 Select box 화살표 제거 */ 
select::-ms-expand { display: none; }

/*  textarea  */
textarea {
  display: block;
  -webkit-appearance: none;
  width: 100%; height: 180px;
  margin: 0;
  padding: 10px 10px;
  border: 1px solid #d3d3d5;
  box-shadow: none;
  border-radius: 0;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: #4a4a4a;
  vertical-align: top;
  text-align: left;
  outline: none;
  resize: none;
  overflow-x: none;
  overflow-y: auto;
}


/* ================================================
  common
==================================================*/
.visuallyhidden, .hide {position: absolute !important; width: 1px !important; height: 1px !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; overflow: hidden;}


/* text-ellipsis */
.text-ellipsis01 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis02 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; height: 3em;}
.text-ellipsis03 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; height: 4.5em; }


/* align */
.align-lt {text-align: left !important; }
.align-ctr {text-align: center !important; }
.align-rt {text-align: right !important; }


.left {float: left;}
.right {float: right;}
.clearfix:after {content: ''; display:  block; clear: both; visibility: hidden;}


.distable {display: table; width: 100%;}
.discell {display: table-cell; }
.disrow {display: table-row; }



/* list-style 
------------------------------------------ */

/* style : ■ */
.list-square li {position: relative; padding-left: 10px; }
.list-square li:after {content: ''; display: block; position: absolute; background-color: #a1a1a1; vertical-align: middle; }

/* style : ． */
.list-dot li {position: relative; padding-left: 10px; }
.list-dot li:before {content: ''; position: absolute; top:0; left: 0; width: 4px; height: 4px;  border-radius: 100%; background-color: #a1a1a1; vertical-align: middle; }

/* style : - */
.list-dash li {position: relative; padding-left: 10px; }
.list-dash li:before {content: '-'; position: absolute; top:0; left: 0; font-size: 13px; color: #a1a1a1; }

/* style : + */
.list-plus li {position: relative; padding-left: 10px; }
.list-plus li:before {content: '+'; position: absolute; top:0; left: 0; font-size: 13px; color: #a1a1a1; }


/* style : 1.  */
.list-number {counter-reset: period; }
.list-number > li {counter-increment: period; }
.list-number > li:before {content: counter(period)"."; margin-right: 5px; }



/* bg Color */
.bg-gray {background-color: #f8f7f8 !important; }



/* =======================================
	form write
=========================================*/ 

/* input  
-----------------------------------------*/

/*  size */
.form-input.small {width: 90px;}
.form-input.middle {width: 120px ;}
.form-input.middle02 {width: 270px; }
.form-input.half {width: 50%; }
.form-input.full {widtH: 100%; }


/* dl-list */
.dl-list {display: table; width: 100%; }
.dl-list + .dl-list {margin-top: 25px; }
.dl-list dt {display: table-cell; width: 100px; text-align: left; vertical-align: top; font-size: 16px; color: #4A4A4A; font-weight: 400; }
.dl-list dd {display: table-cell; width: calc(100% - 100px); padding-left: 5px; font-size: 16px; font-weight: 500; color: #333333; vertical-align: top; }
.dl-list dd .assistant {font-size: 15px; color: #777777; font-weight: 400; line-height: 1.4;}
.dl-list .list-dash {}
.dl-list .list-dash li:first-child {margin-top: 0; }
.dl-list .list-dash li {margin-top: 15px; font-size: 14px; color: #333333; font-weight: 400; line-height: 1.4;}

/* dl-list02 */
.dl-list02:after {content: ''; display:  block; clear: both; visibility: hidden;}
.dl-list02 + .dl-list02 {margin-top: 25px; }
.dl-list02 dt {float: left; width: 100px; text-align: center; vertical-align: top; font-size: 16px; color: #4A4A4A; font-weight: 400; }
.dl-list02 dd {float: left; width: calc(100% - 100px); padding-left: 5px; font-size: 16px; font-weight: 500; color: #333333; vertical-align: top; }


/* select  
-----------------------------------------------*/
/* size */
.form-select.small {width: 90px;}
.form-select.middle {width: 120px ;}
.form-select.middle02 {width: 270px; }
.form-select.half {width: 50%; }
.form-select.full {widtH: 100%; }





/* =======================================
	form list 
=========================================*/ 

/*  form-dl 
-----------------------------------------*/
.form-dl:after {content: ''; display:  block; clear: both; visibility: hidden;}
.form-dl {display: table; width: 100%;}
.form-dl + .form-dl {margin-top: 15px; }
.form-dl dt {display: table-cell; width: 100px; text-align: left; vertical-align: middle; font-size: 16px; color: #4A4A4A; font-weight: 400; }
.form-dl dd {display: table-cell; width: calc(100% - 100px); font-size: 16px; font-weight: 300; color: #4A4A4A; vertical-align: middle; }
.form-dl .form-guide {display: block; float: none;  padding-top: 5px; clear: both; font-size: 12px; color: #4a4a4a; font-weight: 300; }

/* birth */
.form-dl.birth > span {display: inline-block; margin: 0 3px; font-size: 16px; color: #4A4A4A; font-weight: 300; vertical-align: middle; line-height: 30px; }
.form-dl.birth .form-input {width: 90px; vertical-align: middle; }

/* call */
.form-dl.call .form-select {float: left; width: 32%;} 
.form-dl.call .form-input {float: left;  width: 32%; margin-left: 2%;}

/* email */
.form-dl.email .form-input.full {width: calc(100% - 19px); }
.form-dl.email > span {display: inline-block; margin: 0 3px; font-size: 16px; color: #4A4A4A; font-weight: 300; vertical-align: middle; line-height: 30px; }
.form-dl.email .box {margin-top: 5px; }



/* form-li ::label이 없는 디자인 
-----------------------------------------*/
.form-ul {
display: -webkit-box; 
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row; 
-webkit-box-lines: single; 
-webkit-flex-wrap: wrap; 
flex-wrap: wrap; 
-webkit-box-pack: justify; 
justify-content: space-between;
-webkit-box-align: stretch;
align-items: stretch;
/*gap: 10px 5px; */
}
.form-ul:after {content: ''; display:  block; clear: both; visibility: hidden;}
.form-li {width: calc(50% - 5px); margin-bottom: 10px;}
.form-li:after {content: ''; display:  block; clear: both; visibility: hidden;}
.form-li.full {widtH: 100%; margin-left: 0; }

/* birth */
.form-li.birth > span {display: inline-block; margin: 0 3px; font-size: 16px; color: #4A4A4A; font-weight: 300; vertical-align: middle; line-height: 30px; }
.form-li.birth .form-input {width: 90px; vertical-align: middle; }

/* 거주지역 */
.form-li.userarea .form-select {float: left; width: 49%; }
.form-li.userarea .form-select + .form-select {margin-left: 2%; }


/* call */
.form-li.call .form-select {float: left; width: 32%;} 
.form-li.call .form-input {float: left;  width: 32%; margin-left: 2%;}





/* =======================================
	table list 
=========================================*/ 
table {width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }

.table-header {margin: 30px auto 10px; padding: 0 10px; }
.table-header .table-formgroup .form-select {height: 30px; line-height: 28px;}
.table-header .table-formgroup .form-select.year {width: 90px; }
.table-header .table-formgroup .form-select.month {width: 60px; }
.table-header .table-formgroup .btn-search {width: 50px; height: 30px; margin-left: 5px; line-height: 28px; background-color: #E5006E; color: #fff; }

.table-list {margin: 20px auto; }
.table-list table th,
.table-list table td {position: relative; padding: 8px 0; box-sizing: border-box; vertical-align: middle; text-align: center; }

.table-list table thead th {background-color: #f8f8f8; border-top: 1px solid #cdcdcd; color: #555; font-size: 15px; font-weight: 500; }
.table-list table tbody td {border-bottom: 1px solid #ebebeb; font-size: 16px; color: #232323; }
.table-list table tbody tr:hover {background-color: #f8f7f8; }

.table-list table tbody .count {color: #555; font-size: 15px; }
.table-list table tbody .title {position: relative; max-width: calc(100% - 30px); height: 100%; font-size: 16px; color: #232323; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.table-list table tbody .date {color: #7a7a7a; font-size: 15px; }



/* =======================================
	checkbox
=========================================*/ 
.checkbox {position: relative; margin-top: 15px; padding-bottom: 5px; }
.checkbox.all-agree.line {margin-bottom: 25px; padding-bottom: 10px; box-sizing: border-box; border-bottom: 1px solid #ddd;}

.checkbox input[type="checkbox"] {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: hidden; clip: rect(0, 0, 0, 0); -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance: none; outline: none; }

.checkbox input[type="checkbox"] + label {position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; line-height: 20px; vertical-align: middle; color: #959595; font-size: 0.892rem; font-weight: 300; ;}

.checkbox input[type="checkbox"] + label.actOn:before,
.checkbox input[type="checkbox"] + label:before,
.checkbox input[type="checkbox"] + label::before {content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 4px; box-sizing: border-box; border: none !important; border-radius: 0; background-color: transparent !important; background-image: url("/img/common/chk_yellow_circle.png"); background-repeat: no-repeat; background-position: top center; background-size: 24px; vertical-align: middle; -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance:none;}

.checkbox input[type="checkbox"]:checked + label:before {content: ""; background: url("/img/common/chk_yellow_circle.png") no-repeat bottom center; background-size: 24px; border: none !important; box-shadow: none; -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance:none; }

/* 전체동의 checkbox 사이즈 다르게  */
.agree-all .checkbox input[type="checkbox"] + label.actOn:before,
.agree-all .checkbox input[type="checkbox"] + label:before,
.agree-all .checkbox input[type="checkbox"] + label::before {content: ""; display: inline-block; width: 30px; height: 30px; margin-right: 4px; box-sizing: border-box; border: none !important; border-radius: 0; background-color: transparent !important; background-image: url("/img/common/chk_yellow_circle.png"); background-repeat: no-repeat; background-position: top center; background-size: 30px; vertical-align: middle; -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance:none;}

.agree-all .checkbox input[type="checkbox"]:checked + label:before {content: ""; background: url("/img/common/chk_yellow_circle.png") no-repeat bottom center; background-size: 30px; border: none !important; box-shadow: none; -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance:none; }

/* readonly & disabled */
.checkbox input[type="checkbox"]:disabled + label:before,
.checkbox input[type="checkbox"].disabled + label:before{content: ""; border-color: #dedede;background-color: #dedede; }
.checkbox input[type="checkbox"]:read-only + label:before,
.checkbox input[type="checkbox"].readonly + label:before {content: ""; border-color: #dedede; background-color: #eee; }

/* radiobox */
.radiobox {position: relative; }
.radiobox.dis-inline {display: inline-block; margin-left: 10px; }
.radiobox input[type="radio"] {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: hidden; clip: rect(0, 0, 0, 0); -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance: none; outline: none; }
.radiobox input[type="radio"] + label {position: relative; display: inline-block; margin-right: 15px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; line-height: 30px; color: #6a747c; font-size: 13px; font-weight: 400;}
.radiobox input[type="radio"] + label:last-of-type {margin-right: 0; }

.radiobox input[type="radio"] + label.actOn:before,
.radiobox input[type="radio"] + label:before,
.radiobox input[type="radio"] + label::before {content: ""; display: inline-block; width: 30px; height: 30px; margin-right: 4px; box-sizing: border-box; border: none !important; border-radius: 0; background-color: transparent !important; background-image: url("/img/common/chk_yellow_circle.png"); background-repeat: no-repeat; background-position: top center; background-size: 30px; vertical-align: middle; -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance:none;}

.radiobox input[type="radio"]:checked + label:before {content: ""; background: #6a747c url("/img/common/chk_yellow_circle.png") no-repeat bottom center; background-size: 30px; border: none !important; box-shadow: none; -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance:none; vertical-align: middle;}

/* 작은사이즈 */
.radiobox.small input[type="radio"] + label.actOn:before, 
.radiobox.small input[type="radio"] + label:before, 
.radiobox.small input[type="radio"] + label::before {width: 24px; height: 24px; background-size: 24px; }
.radiobox.small input[type="radio"]:checked + label:before {background-size: 24px; }

/* radiobox02 */
.radiobox-box {position: relative; }
.radiobox-box:after {content: ''; display:  block; clear: both; visibility: hidden;}
.radiobox-box .radiobox02 {float: left; width: calc(50% - 5px);}
.radiobox02 + .radiobox02 {margin-left: 10px; }

.radiobox02 input[type="radio"] {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: hidden; clip: rect(0, 0, 0, 0); -webkit-appearance:none; -webkit-border-radius:0; -moz-appearance: none; -o-appearance: none; appearance: none; outline: none; }
.radiobox02 input[type="radio"] + label {position: relative; display: block; width: 100%; height: 45px; box-sizing: border-box; border: 1px solid #d3d3d5; background-color: #fff; font-size: 16px; line-height: 43px; text-align: center; font-weight: 300; color: #999999; cursor: pointer; }
.radiobox02 input[type="radio"] + label.actOn,
.radiobox02 input[type="radio"]:checked + label {background-color: #d51168; color: #fff; }





/* =======================================
	button 
=========================================*/ 
.btn {display: block; height: 60px; box-sizing: border-box;  border: 1px solid #d3d3d5; line-height: 58px; text-align: center; font-size: 18px; }



/* design */
.btn-line {border: 1px solid #979797; border-radius: 0px; background-color: #fff; color: #333; }
.btn-line:focus {border: 1px solid #979797; }

.btn-sumbmit {border-color: #E5006E; background-color: #E5006E; color: #fff; font-size: 20px; }
.btn-gray {border-color: #9a9a9a; background-color: #9a9a9a; color: #fff; font-size: 20px; }

.btn-more {border-radius: 5px; background-color: #fff; font-size: 18px; }
.btn-more .icon-plus {display: inline-block; width: 12px; height: 12px; margin-right: 2px; background-image: url('/img/common/bg_select_plus.png'); background-size: contain; background-position: center center; }

/* size */
.btn.full {width: 100%; }



/* 버튼 그룹 정렬 */
.btn-bottom {}
.btn-bottom.btn-inner {margin: 20px auto 40px; padding: 0 10px; box-sizing: border-box; }

.btn-bottom-group {position: relative; width: 100%; margin: 3.571rem auto 0; text-align: center; }
.btn-bottom-group.btn-inner {margin: 20px auto 40px; padding: 0 10px; box-sizing: border-box; }
.btn-bottom-group + .btn-bottom-group {margin-top: 1.785rem; }

.btn-bottom-group .btn {width: 100%; }
.btn-bottom-group .btn + .btn {margin-top: 10px; border-left: 0; }

.btn-bottom-group.horizontal {} 
.btn-bottom-group.horizontal:after {content: ''; display:  block; clear: both; visibility: hidden;}
.btn-bottom-group.horizontal .btn {float: left; width: 50%; margin-top: 0; font-weight: 400; font-size: 18px; color: #97989a; }

.btn-bottom-group.horizontal .btn-pink {background-color: #d51168; color: #fff; }
.btn-bottom-group.horizontal .btn-white {background-color: #fff; }
.btn-bottom-group.horizontal .btn-dark {background-color: #555; color: #fff; }
.btn-bottom-group.horizontal .btn-lightgray {background-color: #888; color: #fff; }

/* pagination */
.pagination-group {margin: 40px auto; text-align: center; }

.pagination-group .page-num {display: inline-block; }
.pagination-group .page-num:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.pagination-group .page-num li {float: left; width: 30px; height: 30px;  margin-left: 10px; line-height: 28px;}
.pagination-group .page-num li:first-child {margin-left: 0; }
.pagination-group .page-num a {display: block; width: 100%; height: 100%; font-size: 16px; color: #232323; font-weight: 400;  }
.pagination-group .page-num a:hover {color: #d51168; }
.pagination-group .page-num .current a {color: #d51168; font-weight: 700; }

.pagination-group .btn-pager {display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid #ebebeb; background-position: center; background-size: 10px; background-repeat: no-repeat; }
.pagination-group .btn-pager.prev {margin-right: 10px; background-image: url("/images/common/paination_prev.png"); }
.pagination-group .btn-pager.next {margin-left: 10px; background-image: url("/images/common/paination_next.png"); }


/* =======================================
	아코디언  
=========================================*/ 

/* accordion-content */
.accordion-content {position: relative;}
.accordion-box {display: none; width: 100%; height: 180px; margin-top: 10px; padding: 10px 10px 20px; box-sizing: border-box; border: 1px solid #ddd; background-color: #F1F3F4; overflow-y: auto; overflow-x: hidden; }
.accordion-box.active {display: block; }

.accordion-content .agree-more {position: absolute; top: 3px; right: 5px; font-size: 0.785rem; color: #656565; text-decoration: underline; }



/* =======================================
	icon  images
=========================================*/ 
.icon {display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; }

/*  성별 : 서비스 절차 */
.icon-male {background-image: url("/images/common/male.png"); background-repeat: no-repeat; background-position: center; background-size: 25px 25px; }
.icon-female {background-image: url("/images/common/female.png"); background-repeat: no-repeat; background-position: center; background-size: 25px 25px; }

/* 성별 : 러브테스트  */
.genderMale {background-image: url("/landing/images/common/gender_male.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }
.genderFemale {background-image: url("/landing/images/common/gender_female.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }

/* sns : footer */
.icon-blog {background-image: url("/img/main/2019/m_icon_blog.png"); }
.icon-facebook {background-image: url("/img/main/2019/m_icon_face.png"); }
.icon-insta {background-image: url("/img/main/2019/m_icon_insta.png"); }
.icon-youtube {background-image: url("/img/main/2019/m_icon_youtube.png"); }
.icon-kakao {background-image: url("/img/main/2019/m_icon_kakao.png"); }

/* 노란배경 아이콘 : 사옥안내  */
.yellow-call {background-image: url("/images/common/icon_call.png"); }
.yellow-location {background-image: url("/images/common/icon_location.png"); }
.yellow-subway {background-image: url("/images/common/icon_subway.png"); }


/*  더보기+  바로가기>  처럼 버튼 옆에 사용하는 icon */
.i-plus {position: relative; display: inline-block; margin-left: 5px; vertical-align: super; }
.i-plus:after {content: ''; display: inline-block; position: absolute;  width: 10px; height: 2px; background-color: #333; }
.i-plus:before {content: ''; display: inline-block; position: absolute;  width: 10px; height: 2px; background-color: #333; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.i-arrow {position: relative; vertical-align: middle; }
.i-arrow:after {content: ''; display: inline-block; position: absolute; top: 7px; left: 2px; width: 8px; height: 8px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); }