@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:450px !important;}
.root_daum_roughmap .wrap_map {height:450px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"대한십팔기협회"; font-size:12px; line-height:15px;}


.doc-tit {position:relative; width: fit-content; margin: 0 auto var(--margin-50); font-weight:700; font-size: var(--font-size-40); letter-spacing: -0.02em; color: #242424; text-align:center;} 
.doc-tit::after {content: ""; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background-color: rgba(237, 28, 36, 0.8);} 

.doc-cnt {padding:var(--padding-80) 0;} 
.doc-cnt:last-child {padding-bottom:0;} 
.doc-cnt.bg-grey {background-color: #f4f4f4;} 

.bullet-item .bullet-list {position:relative; padding-left:18px; margin-top:10px; line-height:1.7;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:13px; width:5px; height:2px; background:#454545;}

/* sub-nav */
.nav-container {display:flex; flex-wrap:wrap; position:relative;}
#lnb { margin-top:-170px; flex:1 0 260px; max-width:260px; position:relative; z-index:50; }
.lnb-wrap {border:1px solid #ddd; border-top-left-radius:30px; border-bottom-right-radius:30px; border-bottom-left-radius:30px;}
.btn-open-category {display:none;}
.lnb-cate .m-box {position:relative;}
.lnb-cate .nav-title {display:flex; align-items:center; justify-content:center; font-size:clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px); font-family:var(--font2); color:#fff; height:clamp(100px, calc( 200 / var(--inner) * 100vw ), 200px); background:url(../images/sub/nav-bg.png) no-repeat; background-size:cover; border-top-left-radius:30px; border-bottom-right-radius:30px;}
.lnb-cate .nav-item {padding:clamp(15px, calc( 23 / var(--inner) * 100vw ), 23px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); padding-bottom:clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px);}
.lnb-cate .nav-list { border-top:1px solid #ddd;}
.lnb-cate .nav-list a {display:flex; align-items:center; justify-content:space-between;  padding:clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px) 0; color:#898989; font-weight:600;}
.lnb-cate .nav-list:first-child a {padding-top:0; }
.lnb-cate .nav-list:first-child {border-top:0;}
.lnb-cate .svg {display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:5px; background:#eff3f4;}
.lnb-cate .svg svg {width:12px;}
.lnb-cate .nav-list.active a {color:var(--color-1);}
.lnb-cate .nav-list.active .svg {background:var(--color-1);}
.lnb-cate .nav-list.active .svg svg {color:#fff;}
#contents {flex:1 0 auto; width:1%; padding-left:clamp(10px, calc( 100 / var(--inner) * 100vw ), 100px); padding-right:clamp(10px, calc( 160 / var(--inner) * 100vw ), 160px); padding-top:clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px); overflow:hidden;}
#nav-contents {flex:1 0 auto; width:1%; padding-left:clamp(10px, calc( 100 / var(--inner) * 100vw ), 100px); padding-right:clamp(10px, calc( 160 / var(--inner) * 100vw ), 160px); padding-top:clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px); overflow:hidden;}

/* 공통 */
.markbx .title {display:inline-block; position:relative; font-size:clamp(18px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight:600; line-height:1.1; }
.markbx .title::after {position:absolute; content:''; bottom:2px; right:-25px; width:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); height:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); border-radius:50%; background:var(--color-1);}
.txtbg {margin-bottom:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.txtbg .flxWrap {align-items:center;}
.txtbg .main-tit {padding-left:clamp(22px, calc( 33 / var(--inner) * 100vw ), 33px); background:url(../images/sub/text-bg.png) no-repeat left 50%; font-size:clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:600; background-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px) auto;}
.txtbg .sub-tit {display:inline-block; padding-left:10px; margin-left:clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px); position:relative; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; color:#ababab; line-height:1;}
.txtbg .sub-tit::after {position:absolute; content:''; left:0; bottom:0; width:1px; height:clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px); background:#ddd;}

/* 협회소개 */
.sub01-01area .sub-bx {padding-left:clamp(10px, calc( 35 / var(--inner) * 100vw ), 35px);}
.sub01-01area .box1 .flxWrap {justify-content:space-between;}
.sub01-01area .box1 .imgbx {flex:1 0 426px; max-width:426px; margin-top:-20px; }
.sub01-01area .box1 .textbx {flex:1 0 auto; width:1%; padding-top:clamp(10px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub01-01area .descbx {padding-top:clamp(15px, calc( 47 / var(--inner) * 100vw ), 47px);}
.sub01-01area .dec {padding-top:clamp(6px, calc( 14 / var(--inner) * 100vw ), 14px);}
.sub01-01area .dec:first-child {padding-top:0;}
.sub01-01area .box2 {padding-top:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); margin-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); border-top:1px solid #ddd; background:url(../images/sub/sub_01-img3.png) no-repeat bottom right;}
.sub01-01area .box2 .img {padding-top:clamp(15px, calc( 34 / var(--inner) * 100vw ), 34px);}

.sub01-02area .box-text {padding: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px)  clamp(15px, calc( 100 / var(--inner) * 100vw ), 100px); background:#fafafa; position:relative; z-index:-1; border-top-left-radius:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); border-bottom-right-radius:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.histitle {font-family:var(--font2); font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:bold;}
.historycontain {margin-top:clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); padding:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); background:#fff; border-radius:30px;}
.history-list { position:relative; }
.history-detail__item {padding-bottom:clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); }
.history-detail__item:last-child { padding-bottom: 0;}
.history-detail__item .cont-wrap {padding-left:18px; position:relative;}
.history-detail__item .dot {position:absolute; left:-6px; top:4px; width:12px; height:12px; background:#Fff; border:3px solid var(--color-1); border-radius:50%; z-index:10;}
.history-detail__item .stepname { font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 700; font-family:var(--font2); color:var(--color-1); }
.history-detail__item .cont {margin-top:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); font-size:clamp(16px, calc( 18 / var(--inner) * 100vw ), 18px); color:#454545;}
.history-detail__item .cont .list {display:block;}
.history-detail__item .border {font-weight:500; color:#242424; text-decoration:underline;}
.history-line { position: absolute; left:0; width: 1px; top:10px; bottom: 0; background: #ddd;text-align: center;}
.history-line .line { width: 1px;height: 0; background:var(--color-1); transition: height 0.3s ease-out;}
.hisimgitem {display:flex;flex-wrap:wrap;margin:-4px;padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.hisimglist {flex:1 0 25%; max-width:25%; padding:4px;}
.history-detail__item .imgtext {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color:#898989;}

.sub01-03area {position:relative; background:url(../images/sub/sub_01_02-img.png) no-repeat right clamp(5px, calc( 100 / var(--inner) * 100vw ), 100px) top; background-size:clamp(100px, calc( 316 / var(--inner) * 100vw ), 316px) auto;}
.sub01-03area .markbx .title {font-weight:500; line-height:1.35;}
.sub01-03area .markbx .title::after {right:-18px; bottom:clamp(1px, calc( 9 / var(--inner) * 100vw ), 9px);}
.sub01-03area .top-text {padding-left: clamp(10px, calc( 95 / var(--inner) * 100vw ), 95px); padding-top: clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px);}
.sub01-03area .box-text {margin-top: clamp(30px, calc( 51 / var(--inner) * 100vw ), 51px); padding: clamp(20px, calc( 37 / var(--inner) * 100vw ), 37px)  clamp(15px, calc( 100 / var(--inner) * 100vw ), 100px); background:#fafafa; position:relative; z-index:-1; border-top-left-radius:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); border-bottom-right-radius:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.sub01-03area .tit {font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-family:var(--font2); font-weight:600;}
.sub01-03area .tit .font1 {font-family:'Pretendard';}
.sub01-03area .decbx {padding-top: clamp(14px, calc( 28 / var(--inner) * 100vw ), 28px);}
.sub01-03area .dec {padding-top: clamp(10px, calc( 27 / var(--inner) * 100vw ), 27px); color:#454545;}
.sub01-03area .dec:first-child {padding-top:0;}

.history-detail-item {display: flex; padding-bottom:clamp(30px, calc( 125 / var(--inner) * 100vw ), 125px);}
.history-detail-item:last-child {padding-bottom:0;}
.history-detail-item .year {padding-top:5px; position:relative; font-size:clamp(24px, calc( 60 / var(--inner) * 100vw ), 60px); font-weight: bold; flex: 1 0 276px; max-width:276px; line-height:1; font-family:var(--font2);}
.history-detail-item .year::after {position: absolute; content: ""; top:5px; right:-9.5px; width:18px; height:18px; border-radius: 50%; background:var(--color-1); border:4px solid #fff; z-index: 2;}
.history-detail-item .cont-wrap {display:flex; flex:1 0 auto; width:1%;  padding-left:clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px);}
.history-detail-item .cont {display: flex; flex-direction:column; flex:1 0 auto; width:1%; margin-top:5px;}
.history-detail-item .text {margin-bottom:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.history-detail-item .text:last-child {margin-bottom:0;}
.history-detail-item .txt {margin-bottom:11px; font-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-family:var(--font2); color:var(--color-1);}
.progress-container {position:absolute; left:276px; top:7px; height:100%; width: 1px; background:#ddd;}
.progress-container .progress-bar { width:1px; background:var(--color-1);}

.bg-textbox {padding-top:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); position:relative;}
.bg-textbox:first-child {padding-top:0;}
.bg-textbox .bg-text {margin-bottom:8px; padding:clamp(15px, calc( 56 / var(--inner) * 100vw ), 56px) clamp(15px, calc( 58 / var(--inner) * 100vw ), 58px); position:relative; background:url(../images/sub/sub_01_05-bg.png) no-repeat right clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px) top clamp(5px, calc( 40 / var(--inner) * 100vw ), 40px); background-size:clamp(80px, calc( 197 / var(--inner) * 100vw ), 197px);  border-radius:20px; box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 8px; z-index:1;}
.bg-textbox .bg-text::after {position:absolute; content:''; top:0; left:0; width:100%; height:100%; background:url(../images/sub/textbg.png) no-repeat; border-radius:20px; z-index: -1;}
.bg-textbox .box {padding-top:clamp(25px, calc( 48 / var(--inner) * 100vw ), 48px);}
.bg-textbox .box:first-child {padding-top:0;}
.bg-textbox .box-tit {margin-bottom:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); font-size:clamp(16px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:500; color:var(--color-1);}
.bg-textbox .dec {padding-top:clamp(10px, calc( 27 / var(--inner) * 100vw ), 27px);}
.bg-textbox .dec:first-child {padding-top:0;}
.box-imgbx {display:flex; position:absolute; right:clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px); bottom:clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px);}
.box-imgbx .img {padding-left:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.box-imgbx .img:first-child {padding-left:0;}
.box-imglist {display:flex; align-items:center; flex-wrap:wrap; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-top:1px dashed #ddd;}
.box-imglist:first-child {padding-top:0; border-top:0;}
.box-imglist .image {flex:1 0 258px; max-width:258px; margin-right:clamp(15px, calc( 29 / var(--inner) * 100vw ), 29px);}
.box-imglist .text {flex:1 0 auto; width:1%;}
.box-imglist .main-tit {margin-bottom:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px); font-size:clamp(16px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:500; color:var(--color-1);}
.bg-textbox .quotation {font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:500; color:var(--color-1); text-align:right;}
.descbx + .quotation {margin-top:clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px);}
.bg-textbox .flxtxt {display:flex;}
.bg-textbox .imgin {flex:1 0 180px; max-width:180px; margin-right:clamp(10px, calc( 38 / var(--inner) * 100vw ), 38px);}
.bg-textbox .imgin.type2 {flex:1 0 266px; max-width:266px;}
.bg-textbox .boxin {flex:1 0 auto; width:1%;}
.bg-textbox .tblbox {padding-top:clamp(10px, calc( 27 / var(--inner) * 100vw ), 27px);}
.tblbox th,
.tblbox td {padding:clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px) 0; border-bottom:1px solid #ddd; border-right:1px solid #ddd; text-align:center;}
.tblbox th:last-child,
.tblbox td:last-child {border-right: 0;}
.tblbox th {font-weight:500; background:#fafafa; border-top:1px solid #ddd;}
.tblbox td {color:#454545; background:#fff; }
.bg-textbox .boxintext {margin-top:clamp(10px, calc( 27 / var(--inner) * 100vw ), 27px); padding:clamp(10px, calc( 22 / var(--inner) * 100vw ), 22px) clamp(10px, calc( 10 / var(--inner) * 100vw ), 10px); background:#f8fafa; border-radius:20px;}
.boxintext .intext {font-weight:600; color:var(--color-1); text-align:center;}
.box-imgbx2 {display:flex; padding-top:clamp(10px, calc( 27 / var(--inner) * 100vw ), 27px);}
.box-imgbx2 .img {padding-left:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.box-imgbx2 .img:first-child {padding-left:0;}

.tab-item {display:flex; padding-bottom:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tab-list {flex:1; background:#fafafa; border-top:1px solid #e1e1e1; border-bottom:1px solid var(--color-1);}
.tab-list .link {display:flex; align-items:center; justify-content:center; position:relative; height:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);  font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color:#898989; font-weight:600;}
.tab-list .link::after {position:absolute; content:''; right:0; top:50%; transform: translateY(-50%); width:1px; height:30px; background:#e1e1e1;}
.tab-list:first-child {border-left:1px solid #e1e1e1;  border-top-left-radius:20px;}
.tab-list:last-child {border-right:1px solid #e1e1e1;  border-top-right-radius:20px;}
.tab-list:last-child .link::after {display:none;}
.tab-list.active {border-bottom: 0;}
.tab-list.active .link {background:#fff; color:var(--color-1); border-top-left-radius:20px;  border-top-right-radius:20px; border:1px solid var(--color-1); border-bottom:0; overflow:hidden;}
.tab-list.active .link:after {display:none;}

.galy-item {display:flex; flex-wrap:wrap; margin:-10px;}
.galy-list {flex:1 0 25%; max-width:25%; padding:10px;}
.galy-list .inner {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(20px, calc( 46 / var(--inner) * 100vw ), 46px); border:1px solid #ddd; border-radius:20px; text-align:center; height:100%;}
.galy-list .image {position:relative; padding-bottom:121.05%; overflow:hidden;}
.galy-list .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.galy-list .textbx {padding-top:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px);}
.galy-list .textbx span {display:block;}
.galy-list .textbx .sub-name {font-weight:600; color:var(--color-1);}
.galy-list .textbx .name {padding-top:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:600;} 
.galy-list .textbx .period {padding-top:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); color:#898989;}
.galy-list .textbx .works {padding-top:clamp(2px, calc( 5 / var(--inner) * 100vw ), 5px); color:#898989;}

.org-img {padding-left:clamp(5px, calc( 35 / var(--inner) * 100vw ), 35px);}


.directions-tab {padding-bottom:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tabs {display:flex; overflow-x:auto; }
.tab {flex:1; background:#fafafa; border-top:1px solid #e1e1e1; border-bottom:1px solid var(--color-1);}
.tab .link {display:flex; align-items:center; justify-content:center; position:relative; height:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);  font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color:#898989; font-weight:600;}
.tab .link::after {position:absolute; content:''; right:0; top:50%; transform: translateY(-50%); width:1px; height:30px; background:#e1e1e1;}
.tab:first-child {border-left:1px solid #e1e1e1;  border-top-left-radius:20px;}
.tab:last-child {border-right:1px solid #e1e1e1;  border-top-right-radius:20px;}
.tab:last-child .link::after {display:none;}
.tab.active {border-bottom: 0;}
.tab.active .link {background:#fff; color:var(--color-1); border-top-left-radius:20px;  border-top-right-radius:20px; border:1px solid var(--color-1); border-bottom:0; overflow:hidden;}
.tab.active .link:after {display:none;}
.local-wrap {position:relative;}
.local-wrap .local-content {position:absolute; z-index: -1; left: 0; top: 0; width: 100%;height: 100%; opacity: 0;}
.local-wrap .local-content.on {opacity: 1; z-index: 1; position: relative; transition: 1s all ease;}


.map-wrap {border-radius:20px; overflow:hidden;}
.root_daum_roughmap {width:100% !important;}
.directions {margin-top:clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px);}
.directions .address-info {margin-bottom:clamp(12px, calc( 21 / var(--inner) * 100vw ), 21px);}
.directions .address-info .comp {color:var(--color-1); font-weight:600; font-weight:600;}
.directions .address-info .addr {font-size:clamp(16px, calc( 23 / var(--inner) * 100vw ), 23px); font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px);}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .address-info .pd-rl {display:inline-block; padding:0 clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px) 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:clamp(100px, calc( 180 / var(--inner) * 100vw ), 180px); padding-left:clamp(5px, calc( 30 / var(--inner) * 100vw ), 30px); color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px) 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}