@charset "utf-8";
@import url('plugin.css');

:root {
    --point-color01: #ed3f27;
    --point-color02: #ffcc00;
    --point-color0201: #ffe400;
    --point-color0202: #fed000;
    --point-color03: #28fff5;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
#wrap{position:relative; width:100%; height:100%; min-width:1260px}
#header{position:relative; width:100%; z-index:200}
#container{position:relative}
#footer{position:relative; border-top:1px solid #f4f4f4}
#contents{position:relative}
.site_grid{position:relative; width:1260px; margin:0 auto}
.grid1{position:relative; padding:0 30px}

/*HEADER*/
#header .inner_header{position:fixed; width:100%; background-color:rgba(255,255,255,0)}
#header .row_header{position:relative; height:106px; min-width:1260px}
#header h1{position:absolute; top: 31px; left: 80px; z-index:200}
#header .btn_link{position:absolute; top: 36px; right: 80px; z-index:200}
#header .btn_link > a{display: flex; justify-content: center; align-items: center; width: 110px; height: 43px; font-size: 15px; font-weight: bold; color: var(--point-color01); background-color: #fff; border-radius: 22px;}
#header .btn_link > a:hover{color: #fff; background-color: var(--point-color01);}
#header .img_fill{display:none}
#gnb{position:absolute; top: 36px; width:100%; text-align:center; z-index:150}
#gnb > ul > li{display:inline-block; margin:0 27px 0 23px; vertical-align:top}
#gnb > ul > li:first-child{margin-left:0; background:none}
#gnb > ul > li > a{display:inline-block; padding:12px 0 22px; font-size:18px; font-weight: bold; color:#fff; letter-spacing:-0.4px}
#gnb > ul > li > span{display:none}
#gnb > ul > li:hover > a,
#gnb > ul > li.selected > a{color:var(--point-color01)}
#gnb li .sub_menu{display:block; position:absolute; top:49px; height:0; overflow:hidden; transition:height .2s;}
#gnb li .sub_menu.smenu1{margin-left:-35px}
#gnb li .sub_menu.smenu2{margin-left:-34px}
#gnb li .sub_menu.smenu3{margin-left:-34px}
#gnb li .sub_menu.smenu4{margin-left:-50px}
#gnb li .sub_menu ul{border:1px solid rgba(0,0,0,.1); border-top:1px solid #222}
#gnb li:hover .sub_menu.smenu1{height:139px;} /*메뉴추가시 46 추가*/
#gnb li:hover .sub_menu.smenu2{height: 185px;}
#gnb li:hover .sub_menu.smenu3{height: 93px;}
#gnb li:hover .sub_menu.smenu4{height: 185px;}

#gnb li .sub_menu li{width:164px; border-bottom:1px solid #f0eded; background-color:rgba(255,255,255,1)}
#gnb li .sub_menu li:last-child{border-bottom:none}
#gnb li .sub_menu li a{display:block; font-size:14px; color:#777; line-height:45px}
#gnb li .sub_menu li:hover,
#gnb li .sub_menu li.selected{background-color:var(--point-color01)}
#gnb li .sub_menu li:hover a,
#gnb li .sub_menu li.selected a{font-weight:bold; color:#fff}

/*HEADER 변화*/
#header .inner_header.fill{border-bottom:1px solid #e5e5e5; background-color:#fff}
#header .inner_header.fill .row_header{height:70px}
#header .inner_header.fill h1{top:16px}
#header .inner_header.fill .btn_link{top: 14px}
#header .inner_header.fill .btn_link > a{color: #fff; background-color: var(--point-color01);}
#header .inner_header.fill .img_df{display:none}
#header .inner_header.fill .img_fill{display:inline}
#header .inner_header.fill #gnb{top:15px}
#header .inner_header.fill #gnb > ul > li > a{padding:12px 0 22px; font-weight: 600; color:#222; letter-spacing:-0.4px}
#header .inner_header.fill #gnb > ul > li:hover > a,
#header .inner_header.fill #gnb > ul > li.selected > a{color: var(--point-color01)}
#header .inner_header.fill #gnb li .sub_menu{top:48px}

/*FOOTER*/
.main #footer{border-top:none}
#footer .inner{padding:45px 0 80px}
#footer .left{padding-top:5px}
#footer .right{width:1125px}
#footer .menu_footer{padding-top:11px}
#footer .menu_footer li{display:inline-block; margin-left:-4px; padding:0 16px; line-height:18px; background:url('../images/common/sep1.png') no-repeat 0 4px; vertical-align:top}
#footer .menu_footer li a{font-size:14px; color:#333; letter-spacing:-0.25px}
#footer .menu_footer li:first-child{margin-left:0; padding-left:0; background:none}
#footer .menu_footer li a:hover{opacity:0.8}
#footer .row_footer{display: flex; align-items: center; margin-top:26px}
#footer .row_footer .logo{margin-right: 33px;}
#footer .row_footer address{font-size: 13px; font-weight: 300; color:#888; letter-spacing:-0.3px}
#footer .row_footer address strong{font-weight:normal; color:#231f20}
#footer .row_footer address .space{display:inline-block; width:14px}
#footer .row_footer p{margin-top:14px; font-size:12px; font-weight: 300; color:#888; text-transform:uppercase}
#footer .familysite select{width:183px; }

/*SUB VISUAL*/
#sub_visual{height:430px; text-align:center; background-repeat:no-repeat; background-position:center 0; background-size: cover;}
#sub_visual.bg1{background-image:url('../images/common/svis1.jpg?230519')}
#sub_visual.bg2{background-image:url('../images/common/svis2.jpg?230519')}
#sub_visual.bg3{background-image:url('../images/common/svis3.jpg?230519')}
#sub_visual.bg4{background-image:url('../images/common/svis4.jpg?230519')}
/*piano
#sub_visual.bg5{background-color:#30a557; background-image:url('../images/common/svis6.jpg')}
#sub_visual.bg6{background-color:#6eb803; background-image:url('../images/common/svis5.jpg')}
#sub_visual.bg7{background-color:#02a7d4; background-image:url('../images/common/svis7.jpg')}*/
#sub_visual .tit_svis{display:inline-block; padding-top:217px}
#sub_visual .title{padding:0 7px 15px 7px; border-bottom:1px solid rgba(255,255,255,.43)}
#sub_visual .title span{font-size:40px; font-weight:bold; color:#fff; }
#sub_visual .tit_eng{display:inline-block; margin-top:15px; font-size:12px; font-weight:bold; color:#fff; letter-spacing:1px; opacity:.8; text-transform: uppercase;}

/*PAGE TOP*/
.page_top{padding: 65px 0 0}
.page_top h2.pg_title{text-align:center}
.page_top h2.pg_title .txt_en{font-family: 'Roboto Condensed', sans-serif; font-size: 12px; font-weight: bold; color: var(--point-color01); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;}
.page_top h2.pg_title .title{font-size:35px; font-weight:bold; color:#222}

#sub_nav_dp2{position: relative;}
#sub_nav_dp2 > ul{display: flex; }
#sub_nav_dp2 > ul > li{flex: 1; text-align: center; background-color: var(--point-color01);}
#sub_nav_dp2 > ul > li > a{display: flex; justify-content: center; align-items: center; height: 60px; font-size: 16px; font-weight: bold; color: #fff; line-height: 22px; word-break: keep-all; transition: .3s;}
#sub_nav_dp2 > ul > li.selected > a{color: #000; background-color: #fff;}

#sub_nav_dp3{position: relative; margin-top: 36px}
#sub_nav_dp3 > ul{display: flex; flex-wrap: wrap;}
#sub_nav_dp3 > ul > li{width: calc(20% - 12px); margin-right: 12px; margin-bottom: 12px; text-align: center; border: 1px solid #dfdfdf; background-color: #fff;}
#sub_nav_dp3 > ul > li:nth-child(5n){margin-right: 0;}
#sub_nav_dp3 > ul > li > a{display: flex; justify-content: center; align-items: center; height: 60px; font-size: 16px; font-weight: bold; color: #333; line-height: 22px; word-break: keep-all; transition: .3s;}
#sub_nav_dp3 > ul > li.selected{border-color: var(--point-color01);}
#sub_nav_dp3 > ul > li:hover > a,
#sub_nav_dp3 > ul > li.selected > a{color: var(--point-color01);}

/*이용약관*/
.pg_terms{padding-top: 70px; padding-bottom: 70px;}
.terms_text{font-size: 15px; line-height: 24px;}
/* ==========================================================================
   Media Queries
   ========================================================================== */