/* 폰트 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css); 
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/*서브페이지 공통 css*/
.sub-bnr { display:flex; width: 100%; flex-wrap: wrap; }
.sub-bnr>li { height:360px; flex-grow: 1;position: relative; z-index:10;}
.sub-bnr>li div { padding:20px; }
.sub-bnr>li ,.sub-bnr li a  { display: flex; justify-content: center; align-items: center; }
.sub-bnr span , .sub-bnr li i {color: #fff; text-shadow: 3px 3px 5px rgba(0,0,0,0.6); }
.sub-bnr span { display: block; font-size: 2rem;}
.sub-bnr li i { font-size:4rem; }
.sub-bnr li.sub-center h2 span { font-size:2.7rem; }
.sub-bnr ul.sub-menu { display: flex; width: 100%; position: absolute; left: 0;bottom:0; z-index: 5; }
.sub-bnr ul.sub-menu li { flex-grow:1; border-right: 1px dashed #e1e1e1; box-sizing: border-box;}
.sub-bnr ul.sub-menu li:last-child,.sub-bnr ul.sub-menu li:last-child button {border-right: none!important;}
.sub-bnr ul.sub-menu li button {width: 100%; text-align: center; height: 80px; line-height: 120%; background: rgba(255,255,255,.9); font-weight: 600; border:none; cursor: pointer; font-size: 1rem;}
.sub-bnr ul.sub-menu li button.active ,.sub-bnr ul.sub-menu li:hover button { color:#fff; border: none; }
.sub-bnr li a { position:relative; z-index:1; }
.sub-bnr li.sub-side h2 { display:inline-block!important; }
.sub-bnr li.sub-center h2 { text-align:center; }
.sub-bnr li.sub-center::after ,.sub-bnr li.sub-side a::after  {content:''; position:absolute; left:0; top:0;  z-index:-1; width:100%; height:100%; }
.sub-bnr li.sub-side a::after { background:url('../../images/hangang/sub_wave.png') 50% 0 no-repeat; opacity: .3;}
.sub-bnr li.sub-center::after { background:url('../../images/hangang/sub_wave_center.png') 50% 0 no-repeat; opacity: .3; }
.tab-page { display:none; }
.tab-page.active { display:block; }

.sub-box.tab-pages { margin-top:100px; }
.tab-pages .inner { width:100%; max-width:1100px; margin: 0 auto; position: relative; padding: 0 15px; box-sizing: border-box;}
.tab-pages h2 { margin-bottom:80px; font-size:3.3rem; font-weight: 900; }

a.current-img {position: relative; width: 100%; height: 100%; }
a.current-img span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 330px; background:rgba(0,0,0,.2); transition: .3s; opacity: 0; display: flex;  align-items: center; justify-content: center; }
a.current-img:hover span {opacity:1;}
a.current-img span i {font-size: 4rem;}