@charset "UTF-8";
/*-------------------------------------------------
title       : 콘텐츠
Author      : ㅈㅁㅈ
Create date : 2019-12-04
-------------------------------------------------*/
@import url("/_templet6/css/sub.css");
.member .group1 { width: 100%; }

.stripe_box .tel { font-size: 0.9065rem; display: inline-block; margin-right: 2.25rem; font-weight: 400; text-indent: 1rem; }

.stripe_box .tel::before { margin-right: 0.5rem; font-family: "xeicon"; content: ''; }

.box4 { position: relative; }

.box4 .desc { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 3.25rem; width: 22.5rem; padding: 1.8rem; background-color: #fff; }

.box4 .desc::before { position: absolute; top: 1.35rem; left: -2.25rem; width: 3.8rem; height: 1px; background-color: #000; content: ''; }

.box4 .title { font-size: 1.3rem; display: block; margin-bottom: 1.5rem; font-weight: 500; color: #2c2c2c; }

.box4 .txt { display: block; }

.box4 a.lt1 { margin-top: 0.5rem; border-color: #9b8873; background-color: #9b8873; }

.box4 a.lt1:hover, .box4 a.lt1:focus { background-color: #fff; color: #9b8873; }

.box4 a.lt1:hover::before, .box4 a.lt1:focus::before { color: #9b8873; }

.box5 { position: relative; min-height: 18rem; margin: 5rem 0; padding-right: calc(50% + 6rem); word-break: keep-all; }

.box5 .img { position: absolute; right: 0; top: 0; z-index: 0; width: calc(50% + 1.25rem); }

.box5 .img::before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: -4rem; z-index: -1; width: 17.5rem; height: calc(100% + 5rem); border: 0.9rem solid #f7f7f7; content: ''; }

.box5 .img img { -webkit-box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2); box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.box5 .title { font-size: 2.5rem; line-height: 1.2; margin-bottom: 0.5rem; color: #2c2c2c; letter-spacing: -0.25rem; }

.box5 .title::before { display: block; width: 2.75rem; height: 1px; margin-bottom: 1rem; background-color: #000; content: ''; }

.box5 .desc span { font-size: 0.9rem; display: block; width: 21rem; max-width: 100%; margin-top: 1.5rem; }

.list2 { text-align: center; }

.list2 li { display: inline-block; vertical-align: top; }

.list2 li:nth-child(2) .label { border: 0 none; background-color: rgba(130, 111, 90, 0.7); color: #fff; }

.list2 .label { font-size: 1rem; display: table; width: 9.5rem; height: 9.5rem; margin: 0 -0.75rem; border-radius: 100%; border: 1px solid #86745f; color: #222; text-align: center; vertical-align: top; }

.list2 .label span { display: table-cell; vertical-align: middle; }

.list3.type3.wide { width: 100%; }

.list3.type3.wide > * { float: none !important; width: 100% !important; height: auto !important; margin-right: 0; }

.list3.type3.wide > * + * { margin-top: 0.5rem; }

.list4 { display: table; width: 100%; margin-top: 5rem; text-align: center; table-layout: fixed; }

.list4 li { font-size: 0.9rem; display: table-cell; padding: 0 1rem; color: #858585; vertical-align: middle; word-break: keep-all; }

.list4 li + li { border-left: 1px solid #cfcfcf; }

.list4 .title { font-size: 1.1rem; color: #2c2c2c; }

.list4 p { font-size: 1.25rem; margin-top: 0.75rem; font-family: 'Titillium Web'; font-weight: 700; color: #333; }

.list5 { display: inline-block; width: calc(100% + 1.5rem) !important; margin-top: 2rem; counter-reset: list5; }

.list5 > * { float: left !important; width: calc(33.33333% - 1.5rem) !important; margin-right: 1.5rem; }

.list5 > *:nth-child(n + 4) { margin-top: 1.25rem; }

.list5 > * { height: 10rem; padding: 1.25rem 1rem 1.75rem 1.5rem; border: 1px solid #ddd; border-top: 2px solid #545b6c; letter-spacing: -0.05rem; word-break: keep-all; }

.list5 > *::before { font-size: 1.75rem; display: block; margin-bottom: 1rem; font-family: 'Titillium Web'; font-weight: 700; color: #3e4a66; counter-increment: list5; content: "0" counter(list5); line-height: 1; }

.list5 > *:nth-child(3n + 1) { clear: both; }

.list5 .title { font-size: 1.05rem; display: block; font-weight: 500; color: #3f3f3f; }

.list6 { display: table; overflow: hidden; position: relative; z-index: 0; width: 100%; margin: 3rem 0; table-layout: fixed; counter-reset: list6; word-break: keep-all; }

.list6 > * { display: table-cell; position: relative; height: 10.8rem; vertical-align: top; }

.list6 > * + *::before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 50%; z-index: -1; width: 100%; height: 2px; background-color: #ddd; content: ''; }

.list6 > * + *::after { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1rem; position: absolute; left: 50%; z-index: -1; margin: 1px 0 0 -6.15rem; font-family: "xeicon"; color: #ddd; content: ''; }

.list6 .label { font-size: 1rem; display: table; width: 10.8rem; height: 10.8rem; margin: 0 auto; padding: 0 1rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff; font-weight: 400; color: #353541; text-align: center; table-layout: fixed; }

.list6 .label span { display: table-cell; vertical-align: top; }

.list6 .label span::before { font-size: 1.5rem; display: block; padding: 2.5rem 0 0.5rem; font-family: 'Titillium Web'; font-weight: 700; color: #3e4a66; counter-increment: list6; content: "0" counter(list6); }

.list6 .label.type1 { border-color: #707b94; background-color: #707b94; color: #fff; }

.list6 .label.type1 span::before { color: #fff; }

.list6 .label.type2 { border-color: #3e4a66; background-color: #3e4a66; color: #fff; }

.list6 .label.type2 span::before { padding-bottom: 0; color: #fff; }

.list7 { display: inline-block; width: calc(100% + 1rem) !important; font-size: 0.85rem; margin: 3.25rem 0; counter-reset: list7; }

.list7 > * { float: left !important; width: calc(50% - 1rem) !important; margin-right: 1rem; }

.list7 > *:nth-child(n + 3) { margin-top: 1.8em; }

.list7 > * { position: relative; padding-left: 3.5rem; }

.list7 > *::before { font-size: 1.25rem; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 100%; background-color: #3e4a66; font-family: 'Titillium Web'; font-weight: 700; color: #fff; text-align: center; content: "0" counter(list7); counter-increment: list7; line-height: 2.5rem; }

.list7 > *:nth-child(2n + 1) { clear: both; }

.list7 .title { font-size: 1rem; display: block; font-weight: 500; color: #353541; }

.list7 .title.type1 { display: inline-block; vertical-align: bottom; }

.list7 .txt { display: inline-block; max-width: 100%; }

.list7 .point { padding-left: 1rem; font-weight: 400; color: #3e4a66; text-indent: -1rem; }

.list8 { display: inline-block; width: calc(100% + 1rem) !important; margin-top: 1.5rem; }

.list8 > * { float: left !important; width: calc(25% - 1rem) !important; margin-right: 1rem; }

.list8 > *:nth-child(n + 5) { margin-top: 1rem; }

.list8 a { height: 3.35rem; border: 1px solid #ddd; line-height: 3.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; display: inline-block; min-width: 100% !important; padding: 0 2rem !important; background-color: #fff; color: #353541 !important; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative; font-weight: 400; text-align: left; }

.list8 a:hover, .list8 a:focus { background-color: #fff; color: #ddd; }

.list8 a::after { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 1.5rem; font-family: "xeicon"; content: ''; }

.list8 a:hover, .list8 a:focus { border-color: #3e4a66 !important; background-color: #3e4a66; color: #fff !important; }

.list9 { display: inline-block; width: calc(100% + 1.25rem) !important; }

.list9 > * { float: left !important; width: calc(50% - 1.25rem) !important; margin-right: 1.25rem; }

.list9 > *:nth-child(n + 3) { margin-top: 1rem; }

.list9 > * { padding: 1.5rem 1rem 1.5rem 1.5rem; border: 1px solid #ddd; border-top: 2px solid #545b6c; }

.list9 .title { font-size: 1.25rem; display: block; margin-bottom: 1.5rem; color: #3e4a66; }

.list10 { display: table; overflow: hidden; position: relative; z-index: 0; width: 100%; margin: 3rem 0; table-layout: fixed; counter-reset: list6; word-break: keep-all; }

.list10 > * { display: table-cell; position: relative; height: 10.8rem; vertical-align: top; }

.list10 > * + *::before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 50%; z-index: -1; width: 100%; height: 2px; background-color: #ddd; content: ''; }

.list10 > * + *::after { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1rem; position: absolute; left: .75rem; z-index: -1; margin: 0; font-family: "xeicon"; color: #ddd; content: ''; }

.list10 .label { font-size: 1rem; display: table; width: calc(100% - 3rem); height: 10.8rem; margin: 0 auto; padding: 0 2rem; border-radius: 1.5rem; border: 1px solid #ddd; background-color: #fff; font-weight: 400; color: #353541; table-layout: fixed; }

.list10 .label span { display: table-cell; vertical-align: top; }

.list10 .label span::before { font-size: 1.5rem; display: block; padding: 2.5rem 0 0.5rem; font-family: 'Titillium Web'; font-weight: 700; color: #3e4a66; counter-increment: list6; content: "0" counter(list6); }

.list10 .label.type1 { border-color: #707b94; background-color: #707b94; color: #fff; }

.list10 .label.type1 span::before { color: #fff; }

.list10 .label.type2 { border-color: #3e4a66; background-color: #3e4a66; color: #fff; }

.list10 .label.type2 span::before { padding-bottom: 0; color: #fff; }

.org { display: table; width: 100%; padding: 1.5rem 0; border: 1px solid #ddd; table-layout: fixed; }

.org .group { display: table-cell; padding: 1rem 2rem; vertical-align: top; }

.org .group.group1 { width: 15.5rem; }

.org .group.group1 .list::before { display: block; width: 1px; height: 9rem; margin: 0 auto; background-color: #dfdfdf; content: ''; }

.org .group.group1 .list > li + li::before { display: block; width: 1px; height: 2.75rem; margin: 0 auto; background-color: #dfdfdf; content: ''; }

.org .group.group1:last-child .list > li + li::before { height: 1.75rem; }

.org .group.group2 { position: relative; border: 1px solid #e8e8e8; }

.org .group.group2::before { position: absolute; left: -9rem; top: 15.5rem; z-index: -1; width: 10rem; height: 10rem; background: linear-gradient(45deg, rgba(255, 255, 255, 0) 80%, #e3e3e3); content: ''; -webkit-transform: scaleX(0.5) rotate(45deg); transform: scaleX(0.5) rotate(45deg); }

.org .group.group2::after { position: absolute; right: -3.25rem; top: 15.5rem; z-index: -1; width: 10rem; height: 10rem; background: linear-gradient(45deg, rgba(255, 255, 255, 0) 80%, #e3e3e3); content: ''; -webkit-transform: scaleX(0.5) rotate(45deg); transform: scaleX(0.5) rotate(45deg); }

.org .depth1 { font-size: 0.9rem; display: block; padding: 0.5rem; background-color: #9b8873; font-weight: 400; color: #fff; text-align: center; }

.org .depth1.type1 { margin-top: 0.5rem; background-color: #84725f; }

.org .depth2 { font-size: 1rem; display: table; width: 7.2rem; height: 7.2rem; margin: 2rem auto 0; border-radius: 100%; background-color: #931522; font-weight: 400; color: #fff; table-layout: fixed; }

.org .depth2 span { display: table-cell; text-align: center; vertical-align: middle; }

.org .depth3 { overflow: hidden; position: relative; padding-bottom: 2rem; }

.org .depth3::before { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background-color: #dfdfdf; content: ''; }

.org .depth3 .label.type1 { position: relative; width: 100%; }

.org .depth3 .label.type1::after { position: absolute; right: -1rem; top: 50%; width: 1rem; height: 1px; background-color: #dfdfdf; content: ''; }

.org .depth3 .label.type1 + .label { margin-top: 0.5rem; }

.org .depth3 .label.type1 + .label::before { position: absolute; bottom: 50%; right: -1rem; width: 1px; height: calc(100% + 0.5rem); background-color: #dfdfdf; content: ''; }

.org .depth3 li { float: left; position: relative; width: calc(50% - 3rem); }

.org .depth3 li::before { position: absolute; left: calc(100% + 1rem); top: 50%; width: 2rem; height: 1px; background-color: #dfdfdf; content: ''; }

.org .depth3 li + li { float: right; }

.org .depth3 li + li::before { right: calc(100% + 1rem); left: auto; }

.org .depth3 li + li .label::before, .org .depth3 li + li .label::after { right: auto; left: -1rem; }

.org .depth4 { display: table; width: 100%; padding-bottom: 1rem; table-layout: fixed; }

.org .depth4 > li { display: table-cell; position: relative; padding: 0 0.5rem; vertical-align: top; }

.org .depth4 > li::before { display: block; width: 1px; height: 2.25rem; margin: 0 auto; background-color: #dfdfdf; content: ''; }

.org .depth4 > li:nth-child(1)::after { position: absolute; left: 50%; top: 0; width: 200%; height: 1px; background-color: #dfdfdf; content: ''; }

.org .label.type1 { font-size: 0.9rem; line-height: 2.77778; display: block; width: 9rem; max-width: 100%; margin: auto; height: 2.5rem; border-radius: 2.5rem; background-color: #3c4165; font-weight: 400; color: #fff; text-align: center; white-space: nowrap; }

.org .item { padding: 0 0.5rem 1rem; border-radius: 0.5rem; background-color: #f5f5f5; text-align: center; word-break: keep-all; }

.org .item li { margin-top: 0.75rem; }

.org .title { font-size: 0.9rem; display: block; margin: 0 1rem 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #ddd; font-weight: 400; color: #333; text-align: center; }

@media (max-width: 1280px) { .list6 { margin: 1rem 0; }
  .list6 > * { height: 8rem; }
  .list6 > *::after { margin-left: -4.75rem; }
  .list6 .label { font-size: 0.8rem; width: 8rem; height: 8rem; }
  .list6 .label span { vertical-align: middle; word-break: keep-all; }
  .list6 .label span br { display: none; }
  .list6 .label span::before { padding: 0; }
  .list8 a { height: 2.5rem; border: 1px solid #ddd; line-height: 2.4rem; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0 2rem 0 1rem !important; }
  .list8 a::after { right: 1rem; }
  .list10 > * { display: block; height: auto; }
  .list10 > * + *::before { right: 50%; width: 2px; height: 100%; top: 0; }
  .list10 > * + *::after { -webkit-transform: translatex(-50%); transform: translatex(-50%); left: 50%; top: -1rem; content: ''; }
  .list10 .label { display: block; width: 100%; margin-bottom: 2rem; padding: 0 2rem 1rem; height: auto; }
  .list10 .label span:before { padding: .5rem 0 0rem; }
  .org .label.type1 { font-size: 0.8rem; height: auto; padding: 0.5rem; line-height: 1.2; }
  .org .item { padding-bottom: 1rem; }
  .org .depth3 { padding-bottom: 0; }
  .org .depth3 li { float: none; width: 100%; margin-top: 1rem; padding: 0.5rem; border: 1px solid #dfdfdf; background-color: #fff; }
  .org .depth3 li::before { display: none; }
  .org .depth3 .label.type1::before, .org .depth3 .label.type1::after { display: none; }
  .org .depth4 > li { display: block; padding: 0; }
  .org .depth4 > li::before { height: 1rem; }
  .org .depth4 > li:nth-child(1)::after { display: none; } }

@media (max-width: 1024px) { .box5 { min-height: 0; margin: 3rem 0; padding-right: calc(100% - 25rem); }
  .box5 .img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - 26rem); }
  .list5 { margin-top: 0; }
  .list5 > * { padding: 1rem; }
  .list5 > *::before { margin-bottom: 0.5rem; }
  .list6 > * { height: 7rem; }
  .list6 > *::after { margin-left: -4.15rem; }
  .list6 .label { width: 7rem; height: 7rem; }
  .list7 { font-size: 0.8rem; margin: 0 0 1rem; }
  .org { padding: 0.5rem 0; }
  .org .item li { margin-top: 0.15rem; }
  .org .group.group1 { width: 14rem; }
  .org .group.group1:first-child { padding-left: 1rem; }
  .org .group.group1:last-child { padding-right: 1rem; }
  .org .group.group2 { padding: 1rem; } }

@media (max-width: 768px) { .box4 .desc { position: static; width: 100%; padding: 1rem 0; border-bottom: 1px solid #000; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  .box4 .desc::before { display: none; }
  .box4 .desc .title { margin-bottom: 0.5rem; }
  .box5 { position: relative; padding-right: 0; }
  .box5 .img { position: relative; top: auto; z-index: -1; width: 100%; margin: 1rem 0 2rem; padding-right: 3rem; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  .box5 .img::before { left: auto; right: 0; }
  .box5 .desc span { width: 100%; }
  .list2 { padding: 1rem 0.5rem; }
  .list2 .label { font-size: 0.8rem; width: 6rem; height: 6rem; margin: -1rem -0.5rem; }
  .list4 { margin-top: 2rem; }
  .list5 { display: inline-block; width: calc(100% + 0.5rem) !important; }
  .list5 > * { float: left !important; width: calc(50% - 0.5rem) !important; margin-right: 0.5rem; }
  .list5 > *:nth-child(n + 3) { margin-top: 0.5rem; }
  .list5 > *:nth-child(3n + 1) { clear: none; }
  .list5 > *:nth-child(2n + 1) { clear: both; }
  .list6 { width: 22rem; max-width: 100%; margin: 0 auto; text-align: center; }
  .list6 > * { display: inline-block; max-width: 32%; height: auto; }
  .list6 > *::before, .list6 > *::after { display: none; }
  .list6 .label { width: 6.5rem; height: 6.5rem; }
  .list6 .label span::before { font-size: 1rem; }
  .list7 { width: 100% !important; }
  .list7 > * { float: none !important; width: 100% !important; margin: 1rem 0 0 !important; }
  .list8 { display: inline-block; width: calc(100% + 0.5rem) !important; }
  .list8 > * { float: left !important; width: calc(33.33333% - 0.5rem) !important; margin-right: 0.5rem; }
  .list8 > *:nth-child(n + 4) { margin-top: 0.5rem; }
  .org { padding: 1rem; }
  .org .group { display: block; width: 15rem !important; max-width: 100%; margin: 0 auto; padding: 0; }
  .org .group.group1 .list::before, .org .group.group1 .list > li + li::before { height: 1rem; }
  .org .group.group2 { margin: 2rem auto; }
  .org .group.group2::before { left: 50%; top: -9rem; -webkit-transform: translateX(-50%) scaleY(0.5) rotate(135deg); transform: translateX(-50%) scaleY(0.5) rotate(135deg); }
  .org .group.group2::after { right: auto; left: 50%; top: auto; bottom: -3rem; -webkit-transform: translateX(-50%) scaleY(0.5) rotate(135deg); transform: translateX(-50%) scaleY(0.5) rotate(135deg); } }

@media (max-width: 530px) { .stripe_box .tel { font-size: 0.8rem; margin-right: 0; text-indent: 0; }
  .stripe_box .tel::before { margin-right: 0.15rem; }
  .box5 { margin: 2rem 0; }
  .list4 { margin-top: 0; }
  .list4 li { display: block; padding: 1rem 0; border-bottom: 1px solid #ddd; }
  .list4 li + li { border-left: 0 none; }
  .list4 p { margin-top: 0; }
  .list5 { width: 100% !important; }
  .list5 > * { float: none !important; width: 100% !important; height: auto; margin: 0.5rem 0 0 !important; }
  .list6 .label { width: 5.5rem; height: 5.5rem; padding: 0 0.25rem; }
  .list8 { display: inline-block; width: calc(100% + 0.5rem) !important; }
  .list8 > * { float: left !important; width: calc(50% - 0.5rem) !important; margin-right: 0.5rem; }
  .list8 > *:nth-child(n + 3) { margin-top: 0.5rem; }
  .list9 { width: 100% !important; margin-top: -1rem; }
  .list9 > * { float: none !important; width: 100% !important; margin: 1rem 0 0 !important; padding: 1rem; }
  .list9 .title { font-size: 1rem; margin-bottom: 0.5rem; } }

/*-------------------------------------------------
title       : 서브
Author      : ㅈㅁㅈ
Create date : 2019-12-05
-------------------------------------------------*/
#snb { background: url("/jbfamily/img/sub/visual.jpg") no-repeat center 0; }