@charset "utf-8";

/*******************************************
 * 
 * Project   : 역사인물문화재단
 * File name : sub.css
 * 
********************************************/

.pc--show{ display: block;}
.pc--hidden{ display: none;}

/******************************************
 * 서브 페이지 - 페이지 타이틀
 * 
********************************************/
#sub-head{ border-bottom: 2px solid #222;}
#sub-head::after{ position: absolute; content: ''; bottom: 1px; width: 100%; height: 1px; background-color: #222;}

.row .col .sub-title__wrap{ background-color: #fff;}
.row .col .sub-title__wrap h1{ font-size: 36px; font-weight: 700; line-height: 42px; color: #222; letter-spacing: -1px;}

/******************************************
 * 서브 페이지 - 빵조각
 * 
********************************************/
.row .col .breadcumb__list{ display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 20px; margin: 0px;}
.row .col .breadcumb__list .list-item{ position: relative; padding-right: 20px; list-style: none;}
.row .col .breadcumb__list .list-item::after{ position: absolute; content: ''; top: 50%; right: 0px; width: 3px; height: 3px; background-color: #777; transform: translateY(-50%);}

.row .col .breadcumb__list .list-item:last-child{ padding-right: 0px;}
.row .col .breadcumb__list .list-item:last-child > a{ display: flex; align-items: center; gap: 10px; border-bottom: 0px solid #777; font-weight: 700; color: #222;}
.row .col .breadcumb__list .list-item:last-child > a img{ width: 10px; height: auto; margin-bottom: 0px;}
.row .col .breadcumb__list .list-item:last-child::after{ content: ''; width: 0px; height: 0px;}

.row .col .dropdown__list { overflow: hidden; display: none; position: absolute; top: 40px; right: 0; width: auto; white-space: nowrap; margin-left: 0px; border-radius: 10px; background-color: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); list-style: none; padding: 0;}
.row .col .dropdown__list li { padding: 10px 15px; border-bottom: 1px solid #ddd ; list-style: none;}
.row .col .dropdown__list a { display: block; color: #777; text-decoration: none;}
.row .col .dropdown__list a:hover { background-color: #fff; color: #222;}

/******************************************
 * 서브 페이지 - 섹션 타이틀
 * 
********************************************/
.row .col .sub-section-title__wrap{ margin-bottom: 20px;}
.row .col .sub-section-title__wrap h3{ font-size: 24px; font-weight: 500; line-height: 30px; color: #222; letter-spacing: -1px;}

/******************************************
 * 서브 페이지 - 텍스트 박스
 * 
********************************************/
.row .col .sub-text-box__wrap{ margin-top: 20px; margin-bottom: 70px;}
.row .col .sub-text-box__wrap h3{ font-family: 'HSBombaram21-Regular'; margin-bottom: 10px; font-size: 24px; font-weight: 400; line-height: 40px; color: #222;}
.row .col .sub-text-box__wrap p.desc{ font-size: 17px; font-weight: 400; line-height: 32px; color: #555;}
.row .col .sub-text-box__wrap p.start{ font-size: 18px; font-weight: 400; line-height: 30px; color: #222;}

/******************************************
 * 서브 페이지 - 테이블
 * 
********************************************/
.row .col .table-container { width: 100%; overflow-x: auto;}

.main-content .row .col .table-responsive { overflow: hidden; width: 100%; border-radius: 0px; border-collapse: collapse; min-width: 600px;}
.main-content .row .col .table-responsive thead { position: sticky; background: #f7f7f7; color: #222; z-index: 10;}
.main-content .row .col .table-responsive thead th{ background-color: #f7f7f7; font-size: 15px; font-weight: 700; color: #222; text-align: center;}

.main-content .row .col .table-responsive thead th, 
.main-content .row .col .table-responsive tbody td { position: relative; vertical-align: middle; border-bottom: 1px solid #ddd; padding: 15px; font-size: 16px; line-height: 26px; text-align: center; color: #777;}
.main-content .row .col .table-responsive tbody td:last-child{ text-align: left;}
.main-content .row .col .table-responsive thead th{ border-left-width: 0px; border-right-width: 1px; border-right-color: #ddd; border-bottom-color: #222; color: #222;}
.main-content .row .col .table-responsive thead th:first-child{ border-left-width: 1px;}

/******************************************
 * 서브 페이지 - 재단 소개 - 인사말
 * 
********************************************/
.row .col .greeting-title-box__wrap{ margin-bottom: 60px;}
.row .col .greeting-title-box__wrap h3{ font-family: 'HSBombaram21-Regular'; font-size: 24px; font-weight: 400; line-height: 30px; color: #fff;}

.row .col .greeting-sign-box__wrap{ padding-top: 20px; text-align: right;}
.row .col .greeting-sign-box__wrap p.company{ padding-bottom: 10px; font-size: 18px; font-weight: 500; line-height: 30px; color: #777;}
.row .col .greeting-sign-box__wrap p.ceo{ display: flex; flex-direction: row; justify-content: flex-end; gap: 10px; font-size: 18px; font-weight: 500; line-height: 30px;}
.row .col .greeting-sign-box__wrap p.ceo .position{ color: #777;}
.row .col .greeting-sign-box__wrap p.ceo .name{ color: #222;}

/******************************************
 * 서브 페이지 - 재단 소개 - 비전 및 목표
 * 
********************************************/
.vision-row { border-bottom:  1px solid #ddd;}
.vision-row .vision-column-left{ border-right: 0px solid #ddd;}

.row .col .vision-title-box__wrap{ padding-bottom: 10px;}
.row .col .vision-title-box__wrap h3{ font-family: 'HSBombaram21-Regular'; font-size: 32px; font-weight: 400; line-height: 36px; color: #000;}
.row .col .vision-title-box__wrap .desc{ font-size: 18px; font-weight: 500; line-height: 30px;}

.row .col .vision-text-box__wrap p{ font-size: 17px; font-weight: 400; line-height: 30px;}

.row .col .vision-core-title-box__wrap .wpb_wrapper { position: relative; padding-top: 50px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ddd;}
.row .col .vision-core-title-box__wrap .wpb_wrapper h3{ display: inline-block; padding: 5px 12px; margin-bottom: 20px; border-radius: 30px; font-size: 20px; font-weight: 700; line-height: 30px; background-color: #000; color: #fff;}
.row .col .vision-core-title-box__wrap .wpb_wrapper h4{ margin-bottom: 15px; font-family: 'HSBombaram21-Regular'; font-size: 32px; font-weight: 400; line-height: 38px; color: #000;}
.row .col .vision-core-title-box__wrap .wpb_wrapper .desc{ font-size: 18px; font-weight: 500; line-height: 30px; color: #555;}
.row .col .vision-core-title-box__wrap .wpb_wrapper .nbr{ position: absolute; display: none; align-items: center; justify-content: center; top: 0px; left: 0px; width: 30px; height: 30px; padding-bottom: 0px; background-color: #000; color: #fff;}

.row .col .vision-core-title-box__wrap.last .wpb_wrapper{ border-bottom: 0px;}

.row .col .vision-biz-box__wrap .wpb_wrapper{ position: relative; padding-top: 50px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ddd;}
.row .col .vision-biz-box__wrap .wpb_wrapper h3{ font-size: 24px; font-weight: 700; line-height: 30px; color: #000;}
.row .col .vision-biz-box__wrap .wpb_wrapper .nbr{ position: absolute; display: flex; align-items: center; justify-content: center; top: 0px; left: 0px; width: 30px; height: 30px; padding-bottom: 0px; background-color: #000; color: #fff;}
.row .col .vision-biz-box__wrap .wpb_wrapper ul{ margin-top: 15px; margin-left: 0px; margin-bottom: 20px;}
.row .col .vision-biz-box__wrap .wpb_wrapper ul li{ position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 18px; font-weight: 400; line-height: 30px; list-style: none;}
.row .col .vision-biz-box__wrap .wpb_wrapper ul li::before{ position: absolute; content: ''; top: 12px; left: 0px; width: 5px; height: 5px; background-color: #000;}

.row .col .vision-biz-box__wrap.last .wpb_wrapper{ border-bottom: 0px solid #fff;}

/******************************************
 * 서브 페이지 - 재단 소개 - 연혁
 * 
********************************************/
.row .col .history-year__wrap{ padding-bottom: 20px;}
.row .col .history-year__wrap h3{ font-size: 24px; font-weight: 500; line-height: 30px; color: #222; letter-spacing: -1px;}

.row .col .history-box__wrap{ margin-top: 20px;}
.row .col .history-box__wrap dl.list-history{ display: flex; flex-direction: column; margin-top: 10px;}
.row .col .history-box__wrap dl.list-history dt{ margin-bottom: 15px; font-size: 18px; font-weight: 500; line-height: 24px; color: #000; text-align: left;}
.row .col .history-box__wrap dl.list-history dd{ padding: 0px; transition: all 300ms ease-in-out;}
.row .col .history-box__wrap dl.list-history dd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0px 0px 30px 30px; font-size: 13px; font-weight: 400; line-height: 23px; color: #777;}
.row .col .history-box__wrap dl.list-history dd::before{ position: absolute; content: ''; top: 24px; left: 0px; width: 11px; height: 11px; background-color: #777; border-radius: 50px; z-index: 10;}
.row .col .history-box__wrap dl.list-history dd::after{ position: absolute; content: ''; top: 24px; left: 5px; width: 1px; height: 100%; background-color: #ededed;}
.row .col .history-box__wrap dl.list-history dt + dd::before{ background-color: #000;}
.row .col .history-box__wrap dl.list-history dd span.text{ display: flex; flex-direction: column; width: 100%; padding: 20px; border-radius: 0px; background-color: #f7f7f7; font-size: 16px; font-weight: 500; line-height: 26px; }
.row .col .history-box__wrap dl.list-history dd span.text .title{ color: #222;}
.row .col .history-box__wrap dl.list-history dd span.text .year{ color: #777;}

/******************************************
 * 서브 페이지 - 재단 소개 - 오시는 길
 * 
********************************************/
.location-info-box__wrap ul{ margin: 20px 0px 0px;}
.location-info-box__wrap ul li{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; font-size: 17px; line-height: 34px;}
.location-info-box__wrap ul li .title{ font-weight: 700; color: #222;}
.location-info-box__wrap ul li .desc{ font-weight: 500;}

/******************************************
 * 서브 페이지 - 한국전통인물화 - 한국전통인물화
 * 
********************************************/
.row .col .portrait-title-box__wrap{ padding-bottom: 20px;}
.row .col .portrait-title-box__wrap h3{ font-family: 'HSBombaram21-Regular'; font-size: 24px; font-weight: 400; line-height: 30px; color: #222;}

.row .col .portrait-text-box__wrap{ padding: 0px;}
.row .col .portrait-text-box__wrap p.desc{ font-size: 16px; font-weight: 400; line-height: 32px; color: #555;}

.row .col .portrait-video-box__wrap{ padding: 15px 0px;}
.row .col .portrait-video-box__wrap p.caption{ font-size: 14px; font-weight: 400; line-height: 24px; color: #555;}

/******************************************
 * 서브 페이지 - 한국전통인물화
 * 
********************************************/
.portrait-times__wrap ul{ position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%; padding-top: 10px; margin: 0;}
.portrait-times__wrap ul::before{ position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 1px; background-color: #ddd;}
.portrait-times__wrap ul li{ position: relative; flex: 1 0 auto; max-width: 33.33%; list-style: none; text-align: center;}
.portrait-times__wrap ul li::before{ position: absolute; content: ''; top: -13px; left: 50%; width: 7px; height: 7px; border-radius: 7px; background-color: #999; transform: translateX(-50%);}
.portrait-times__wrap ul li.active::before{ background-color: #222;}
.portrait-times__wrap ul li a{ display: inline-block; padding: 10px; font-size: 15px; font-weight: 500; line-height: 30px;}
.portrait-times__wrap ul li.active a{ font-weight: 700; color: #222; text-decoration: underline;}

/******************************************
 * 서브 페이지 - 한국역사인물화 갤러리
 * 
********************************************/
.row .col .gallery-info__wrap{ padding: 0px 30px;}
.row .col .gallery-info__wrap h3{ margin-bottom: 50px; font-size: 28px; font-weight: 700; line-height: 34px; color: #222;}
.row .col .gallery-info__wrap h3 .small{ display: block; padding-top: 5px; font-size: 20px;}
.row .col .gallery-info__wrap dl{ margin-bottom: 30px;}
.row .col .gallery-info__wrap dl dt{ margin-bottom: 5px; font-size: 16px; font-weight: 700; line-height: 24px; color: #222;}
.row .col .gallery-info__wrap dl dd{ padding-left: 0px; font-size: 16px; font-weight: 500; line-height: 32px; color: #777;}

.row .col .gallery-info__wrap ul{ display: flex; flex-direction: column; gap: 20px; margin: 0px 0px 30px;}
.row .col .gallery-info__wrap ul li{ display: flex; flex-direction: row; gap: 30px; list-style: none;}
.row .col .gallery-info__wrap ul li span{ font-size: 16px; font-weight: 500; line-height: 24px; }
.row .col .gallery-info__wrap ul li .info-title{ display: inline-block; min-width: 120px; font-weight: 700; color: #222;}
.row .col .gallery-info__wrap ul li .info-value{ padding-left: 0px; color: #777;}

.row .col .gallery-info__wrap .flex__wrap{ display: flex; flex-wrap: wrap; margin-bottom: 0px;}
.row .col .gallery-info__wrap .flex__wrap dl{ flex: 1 0 auto; max-width: 50%;}

.row .col .gallery-nav--top{ padding: 0px 30px; margin-bottom: 0px;}
.row .col .gallery-nav--top ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 10px 0px; margin: 0px; border-bottom: 1px solid #ddd;}
.row .col .gallery-nav--top ul li{ list-style: none;}
.row .col .gallery-nav--top ul li a img{ width: 50px; height: 50px; margin: 0px;}

/******************************************
 * 서브 페이지 - 전통인물화가
 * 
********************************************/
.row .col .artist-list__wrap ul{ margin: 0px;}
.row .col .artist-list__wrap ul li{ list-style: none;}
.row .col .artist-list__wrap ul li a{ overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 60px 15px; border-bottom: 1px solid #ddd; font-size: 48px; font-weight: 400; line-height: 54px; color: #222; text-align: center;}
.row .col .artist-list__wrap ul li a img{ position: absolute; right: 0px; bottom: -200px; opacity: 0; transition: all 300ms ease-in-out;}
.row .col .artist-list__wrap ul li a .name{ font-family: 'HSBombaram21-Regular'; transition: all 300ms ease-in-out;}
.row .col .artist-list__wrap ul li a .years{ font-size: 15px; font-weight: 500; line-height: 30px; color: #777;}
.row .col .artist-list__wrap ul li a:hover{ border-bottom: 1px solid #726659;}
.row .col .artist-list__wrap ul li a:hover img{ right: 60px; bottom: -20px; opacity: 1; transform: rotate(5deg);}
.row .col .artist-list__wrap ul li a:hover .name{ color: #726659;}
.row .col .artist-list__wrap ul li:last-child{ border-bottom: 0px;}

.row .col .artist-info__wrap{ padding: 30px;}
.row .col .artist-info__wrap h3{ margin-bottom: 50px; font-size: 28px; font-weight: 700; line-height: 34px; color: #222;}
.row .col .artist-info__wrap dl{ margin-bottom: 30px;}
.row .col .artist-info__wrap dl dt{ margin-bottom: 5px; font-size: 18px; font-weight: 500; line-height: 24px; color: #222;}
.row .col .artist-info__wrap dl dd{ padding-left: 0px; font-size: 16px; font-weight: 500; line-height: 32px; color: #777;}

.row .col .artist-info__wrap .flex__wrap{ display: flex; flex-wrap: wrap; margin-bottom: 0px;}
.row .col .artist-info__wrap .flex__wrap dl{ flex: 1 0 auto; max-width: 50%;}

/******************************************
 * 서브 페이지 - 전통인물화가
 * 
********************************************/
.row .col .biz-section-title__wrap{ margin-bottom: 30px;}
.row .col .biz-section-title__wrap h3{ position: relative; padding-left: 20px; font-size: 24px; font-weight: 500; line-height: 30px; color: #222; letter-spacing: -1px;}
.row .col .biz-section-title__wrap h3::before{ content: ''; position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; background-color: #726659;}

.row .col .biz-list__wrap{ border-top: 1px solid #222;}
.row .col .biz-list__wrap ul{ margin: 0px;}
.row .col .biz-list__wrap ul li{ display: flex; align-items: flex-start; gap: 15px; padding: 20px 0px; border-bottom: 1px solid #ddd; list-style: none;}
.row .col .biz-list__wrap ul li .number{ display: flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border: 1px solid #222; border-radius: 20px; font-size: 13px; font-weight: 500; line-height: 30px; color: #222;}
.row .col .biz-list__wrap ul li .text{ font-size: 15px; font-weight: 500; line-height: 30px; color: #555;}

/******************************************
 * 서브 페이지 - 후원
 * 
********************************************/
.row .col .boost-title-box__wrap{ padding: 20px;}
.row .col .boost-title-box__wrap h3{ font-size: 24px; font-weight: 700; line-height: 34px; color: #222;}
.row .col .boost-title-box__wrap .desc{ padding: 0px; margin-top: 30px; font-size: 17px; font-weight: 400; line-height: 27px; color: #222;}
.row .col .boost-title-box__wrap .button-underline{ margin-top: 30px;}

.row .col .boost-text-box__wrap{ padding: 0px;}
.row .col .boost-text-box__wrap p.desc{ font-size: 15px; font-weight: 400; line-height: 30px; color: #555;}

.row .boost-section{ border-top: 1px solid #222;}
.row .col .boost-section-title__wrap{ padding: 0px; margin-bottom: 0px;}
.row .col .boost-section-title__wrap h3{ font-size: 24px; font-weight: 700; line-height: 30px; color: #222; letter-spacing: -1px;}

.row .col .boost-info-box__wrap{ margin: 30px 0px;}
.row .col .boost-info-box__wrap .boost-info-box-header{ border-top: 0px solid #222;}
.row .col .boost-info-box__wrap .boost-info-box-header h3{ font-size: 16px; font-weight: 700; line-height: 32px; color: #222;}
.row .col .boost-info-box__wrap .boost-info-box-header .price{ padding: 0px; font-size: 28px; font-weight: 700; line-height: 34px; color: #222;}
.row .col .boost-info-box__wrap .boost-info-box-header .count{ margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 25px; color: #555;}

.row .col .boost-info-box__wrap .boost-info-box-contents dl dt{ font-size: 16px; font-weight: 700; line-height: 32px; color: #222; text-decoration: underline;}
.row .col .boost-info-box__wrap .boost-info-box-contents dl dd{ position: relative; padding-left: 12px; font-size: 16px; font-weight: 400; line-height: 32px; color: #555;}
.row .col .boost-info-box__wrap .boost-info-box-contents dl dd::before{ position: absolute; content: ''; top: 13px; left: 0px; width: 5px; height: 3px; background-color: #555;}