@charset "utf-8";

/* ================================================
  common
==================================================*/
.row-card:after {content: ''; display:  block; clear: both; visibility: hidden;}
.row-card + .row-card {margin-top: 20px; }
.row-card li {float: left; width: calc(50% - 5px); margin-top: 30px; margin-left: 10px; }
.row-card li:nth-child(odd) {margin-left: 0; }
.row-card li:first-child,
.row-card li:nth-child(2) {margin-top: 0;}
.row-card .card-thumbs {width: 100%; padding-top: 75%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.row-card .card-info {padding: 5px 5px; }
.row-card .card-info .tit {height: auto; font-size: 16px; color: #333333; font-weight: 500; }
.row-card .card-info .txt {margin-top: 5px; color: #333333; font-size: 14px; }
.row-card .card-info .manger-name {margin-top: 10px; color: #979797; font-size: 12px; text-align: right; }

/* view */
.marriage-view .board-content {margin: 0 auto 60px; max-width: 700px; }
.section-photo {position: relative; width: 100%; padding-top: 75%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.section-photo .absobox {position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 20px; box-sizing: border-box; background: #00000; background: linear-gradient(to bottom, #00000033 0%, #000000a1 50%, #000000 100%); }
.section-photo .absobox .tit {font-size: 20px; color: #fff; font-weight: 500;}
.section-photo .absobox .manger-name {margin-top: 5px; font-size: 13px; color: #fff; font-weight: 300;}

/* 2022년 개편을 위한 성혼스토리 VIEW
------------------------------------------------------- */
/* #editer_wed 작업 전 ver */
.section-review {margin-top: 30px; }
.section-review .preview-edit br {display: none; }
.section-review .preview-edit .revew-q {display: block; position: relative; margin: 30px auto 5px; padding-left: 38px; font-size: 16px; color: #E5006E; font-weight: 500; }
.section-review .preview-edit .revew-q:after {content: 'Q'; position: absolute; top: 0; left: 0; width: 26px; height: 26px; box-sizing: border-box; border-radius: 100%; background-color: #E5006E; color: #fff; font-size: 16px; text-align: center; vertical-align: middle; line-height: 22px;}
.section-review .preview-edit .revew-a {width: 100%; padding-left: 38px; box-sizing: border-box; color: #000000; font-size: 14px; font-weight: 400; line-height: 1.5; font-family: 'NotoSansKR';}
.section-review .preview-edit .revew-a br.block {display: block; }

.section-review .preview-edit .revew-a .men > b {color: #0074ff; font-weight: 400;}
.section-review .preview-edit .revew-a .woman {margin-top: 10px; }
.section-review .preview-edit .revew-a .woman > b {color: #f5208a; font-weight: 400; }

/* 이미지 대신 코딩으로 진행 ::pc와 동알한 디자인   */
#editer_wed br {display: none; }
#editer_wed .question_list li {position: relative; padding-left: 36px; margin-top: 30px; font-size: 1rem; color: #232323; }
#editer_wed .question_list li .question_tit {display: block; margin-bottom: 10px; color: #E5006E; font-weight: 500; font-size: 1.142rem;}
#editer_wed .question_list li:after {content: 'Q'; position: absolute; top: 0; left: 0; widtH: 26px; height: 26px; border-radius: 100%; background-color: #E5006E; color: #fff; font-size: 14px; text-align: center; line-height: 22px; font-weight: 500;}



/* ================================================
  marriage
==================================================*/
.marriage .video-story { max-width: 720px; margin: 0 auto; display: block; }
.marriage .video-story li {position: relative; padding-top: 56.25%; }
.marriage .video-story li iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.marriage .video-story li + li {margin-top: 10px; }
.marriage .video-story .ytp-impression-link {display: none; }




/* ================================================
  meeting
==================================================*/
.meeting .meeting-banner {margin-bottom: 50px; }
.meeting .meeting-banner img {display: block; width: 100%; margin: 0 auto; }


.meeting .meeting-section {margin-top: 80px; padding: 0 10px; border-bottom: 1px dashed #ccc; }
.meeting .meeting-section .tit {position: relative; margin-bottom: 15px; font-size: 20px; color: #232323; font-weight: 700; }
.meeting .meeting-section .tit:before {content: ''; display: block; position: absolute; top: -10px; left: 0; width: 30px; height: 3px; background-color: #d51168; }
.meeting .meeting-section .txt {font-size: 16px; color: #797979; line-height: 1.5; font-weight: 300; }
.meeting .meeting-section img {display: block; max-width: 100%; margin: 0 auto; }





/* ================================================
  membership
==================================================*/
.membership ul {max-width: 700px; margin: 0 auto;}
.membership li {background-color: #fff; }
.membership li.bg-gray {background-color: #f8f8f8; }
.membership img {display: block; width: 100%; margin: 0 auto;  image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; transform: translateZ(0);}

/* 연령별, 연봉별 지표 */
.age-indicator { container-type: inline-size; --u: calc(100cqw / 768); position: relative; width: 100%; max-width: 768px; margin: 0 auto; padding: calc(50 * var(--u)) calc(40 * var(--u)); overflow: hidden; box-sizing: border-box; }
.age-header { position: relative; margin-bottom: calc(52 * var(--u)); text-align: center; }
.main-title { position: relative; z-index: 1; display: block; margin: 0; padding: 0 calc(18 * var(--u)) calc(5 * var(--u)); font-size: calc(38 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; border-bottom: 1px solid #000; }
.sub-title { position: relative; z-index: 1; display: block; margin: calc(8 * var(--u)) 0 0; padding: 0 calc(18 * var(--u)); color: #b5b5b5; font-size: calc(21 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.age-section + .age-section { margin-top: calc(126 * var(--u)); }
.section-title { margin: 0 0 calc(36 * var(--u)); padding-left: calc(20 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; position: relative; }
.section-title::before { content: ""; position: absolute; top: calc(12 * var(--u)); left: 0; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #2c2c2c; }
.chart-row { display: grid; grid-template-columns: calc(78 * var(--u)) 1fr calc(78 * var(--u)); align-items: center; column-gap: calc(12 * var(--u)); margin-top: calc(18 * var(--u)); }
.chart-label, .chart-value { font-size: calc(23 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.chart-bar { width: 98%; margin-left: 2%; height: calc(16 * var(--u)); background: #9fa0a3; border-radius: 999px; overflow: hidden; }
.chart-fill { display: block; width: max(calc(var(--value) * 1%), var(--min, 0px)); height: 100%; border-radius: 999px; }
.male .chart-fill { background: #03439f; }
.female .chart-fill { background: #d80f6d; }
.age-deco { position: absolute; right: calc(-66 * var(--u)); bottom: calc(-66 * var(--u)); width: calc(165 * var(--u)); height: calc(165 * var(--u)); border: calc(34 * var(--u)) solid #d80f6d; border-radius: 50%; display: none; }
.salary-indicator { --plot-height: calc(360 * var(--u)); --bar-unit: calc(8 * var(--u)); }
.salary-legend { display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); margin-bottom: calc(42 * var(--u)); }
.legend-item { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.legend-dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #2b2b2b; flex: 0 0 auto; }
.legend-text { white-space: nowrap; }
.legend-bar { width: calc(64 * var(--u)); height: calc(28 * var(--u)); display: inline-block; flex: 0 0 auto; }
.legend-item.male .legend-bar { background: #03439f; }
.legend-item.female .legend-bar { background: #d80f6d; }
.salary-chart-area { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
.salary-y-axis { width: calc(34 * var(--u)); height: var(--plot-height); display: flex; flex-direction: column; justify-content: space-between; }
.salary-y-axis span { font-size: calc(14 * var(--u)); font-weight: 700; line-height: 1; color: #9d9d9d; letter-spacing: -0.02em; }
.salary-plot-area { position: relative; flex: 1; height: var(--plot-height); }
.salary-grid-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; z-index: 5; }
.salary-grid-lines span { display: block; width: 100%; border-top: 1px dashed #d7d7d7; }
.salary-grid-lines span:last-child { border-top: 0; }
.salary-bars-wrap { position: relative; z-index: 1; height: 100%; display: flex; justify-content: space-evenly; align-items: flex-end; padding: 0 calc(12 * var(--u)); }
.salary-group { position: relative; width: calc(132 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.salary-group::before { content: ""; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; background: #d7d7d7; }
.salary-bars { width: 100%; height: var(--plot-height); display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.salary-bar { position: relative; width: calc(46 * var(--u)); min-height: calc(8 * var(--u)); height: calc(var(--value) * var(--bar-unit)); }
.salary-bar.male { background: #03439f; }
.salary-bar.female { background: #d80f6d; }
.salary-value { position: absolute; left: 50%; bottom: calc(100% + calc(6 * var(--u))); transform: translateX(-50%); font-size: calc(18 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.salary-bar.male .salary-value { color: #03439f; transform: translateX(-72%); }
.salary-bar.female .salary-value { color: #d80f6d; transform: translateX(-20%); }
.salary-label { margin: calc(14 * var(--u)) 0 0; font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; text-align: center; white-space: nowrap; }