.wrap { position: relative; width: 1280px; margin: 0 auto; }

/* head */
#header { position: absolute; left: 0px; top: 0px; width: 100%; height: 90px; background: #fff; z-index: 9000; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#header:after { content:""; opacity:0; visibility:hidden; position:absolute; left:50%; top:90px; z-index:1; width:100%; height:1px; background:#ececec; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:opacity 0.3s; -moz-transition:opacity 0.3s; -ms-transition:opacity 0.3s; -o-transition:opacity 0.3s; transition:opacity 0.3s; }

.head .wrap { position: relative; display: flex; flex-wrap: wrap; justify-content: center; }
.logo { position: absolute; top: 30px; left: 0; font-family: 'paybooc'; font-size: 24px; font-weight: 600; }
.logo span { color: #ff0404; font-size: 1.2em; }

#header .hd-menu .gnb-wrap { height:100%;}
#header .hd-menu .gnb-wrap .gnb { display:flex; justify-content:center; align-items:center;height:100%; text-align:center;}
#header .hd-menu .gnb-wrap .gnb > li { position:relative; display:flex; justify-content:center; align-items:center; padding:36px 30px; height:100%; -webkit-transition:all ease .3s; -moz-transition:all ease .3s; -ms-transition:all ease .3s; -o-transition:all ease .3s; transition:all ease .3s; }
#header .hd-menu .gnb-wrap .gnb > li:after { content:""; position:absolute; left:50%; bottom:0; width:0; height:3px; background:#2e58a6; -webkit-transform:translate(-50%); -moz-transform:translate(-50%); -ms-transform:translate(-50%); -o-transform:translate(-50%); transform:translate(-50%); }
#header .hd-menu .gnb-wrap .gnb > li > a { display:flex; justify-content:center; align-items:center; font-size: 18px; font-weight: 500; line-height:1; }
#header.on .hd-menu .gnb-wrap .gnb > li { padding: 36px 45px; }
#header.on .hd-menu .gnb-wrap .gnb > li.on > a{ color:#2e58a6 ;} 
#header .hd-menu .gnb-wrap .gnb > li .depth { opacity:0; visibility:hidden; position:absolute; left:0; top:100%; padding-top:2em; width:100%; }
#header .hd-menu .gnb-wrap .gnb > li .depth:before { content:""; position:absolute; left:0; top:30px; width:1px; height:110px; background:#ececec;}
#header .hd-menu .gnb-wrap .gnb > li:first-child .depth:before {display:none;}
#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a { display:block; padding:0.52em 10px; color:#666; font-size: 0.95em; letter-spacing:-0.04em; line-height: 1.4; }
#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li { position:relative;}  
#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > i { position:absolute; right:0; top:10px; font-size:2rem; color:#666; cursor:pointer;}
#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li > i:hover { color:#2e58a6;}
 
#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li > a > span {position:relative;} 
#header .hd-menu .gnb-wrap .gnb > li.open .depth { display:block;} 
#header .hd-menu .gnb-wrap .gnb > li.open > a:after { top:28px; border-left:2px solid #999; border-top:2px solid #999; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } 
#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li:hover > a{color:#666}
#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.active > a, #header .hd-menu .gnb-wrap .gnb > li .depth2 > li.on > a, #header .hd-menu .gnb-wrap .gnb > li.open .depth > ul > li.on > a{color:#2e58a6;} 
#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.on > a{color:#2e58a6;} 
#header .hd-menu .gnb-wrap .gnb > li .depth2 > li.on > a:hover{color:#2e58a6; text-decoration:none;}

#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li.active > a{ color:#2e58a6; }
#header .hd-menu .gnb-wrap .gnb > li:nth-child(1) .depth > ul > li.active .depth2{ display:block; }
#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li:hover > a{ text-decoration: underline; text-underline-position: under; }

#header .hd-menu .gnb-wrap .gnb > li .depth2 > li > a:hover{text-decoration: underline; text-underline-position: under; color:#666;} 

#header .hd-menu .gnb-wrap .gnb > li .depth > ul > li.open > a:after { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); }
#header .hd-menu .gnb-wrap .gnb > li .depth2 { display:none; padding:0.5em 0; /*background:#f1f1f1;*/}
#header .hd-menu .gnb-wrap .gnb > li .depth2 > li > a { display:block; padding:0.333em 2.333em; font-size:1.5rem; color:#666; font-weight:300;}

#header.on { overflow:hidden; height:260px; background:#fff; -webkit-box-shadow:1px 1px 25px rgb(67 67 67 / 10%); box-shadow:1px 1px 25px rgb(67 67 67 / 10%);}
#header.on:after { opacity:1; visibility:visible;}
#header.on .hd-menu .gnb-wrap .gnb > li > a, #header.scrolled .hd-menu .gnb-wrap .gnb > li > a { color:#000;}
#header.on .hd-menu .gnb > li .depth { opacity:1; visibility:visible; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; }

.member_box { position: absolute; top: 35px; right: 0; }
.head_login { display: flex; flex-wrap: wrap; }
.head_login li { position: relative; padding: 0 15px; }
.head_login li:first-child { padding-left: 0px; }
.head_login li:last-child { padding-right: 0px; }
.head_login li:after { content:''; position: absolute; right: 0px; top: 20%; width: 1px; height: 60%; background: #ccc; }
.head_login li:last-child:after { display: none; }
.head_login li a { font-size: 13px; }

.menu-toggler, .mobile_menu { display: none; }

/* footer */
.footer { padding: 50px 0; background: #0a0a0a; color: #fff; }
.footer_info { position: relative; display: flex; flex-wrap: wrap; padding-bottom: 30px; }
.footer_info_inner h4 { margin-bottom: 10px; font-size: 1.1em; letter-spacing: -1px; }
.footer_info_inner p span { position: relative; display: inline-block; padding: 0 15px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; }
.footer_info_inner p span:after { content:''; position: absolute; right: 0px; top: 25%; width: 1px; height: 50%; background: #444; }
.footer_info_inner p span.noline:after { display: none; }
.footer_info_inner p span.pl00 { padding-left: 0px; }

.footer_menu { position: absolute; right: 0px; top: 0px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.footer_menu:after { content: ""; display: block; clear: both; }
.footer_menu li { position: relative; }
.footer_menu li:first-child { margin-right: 5px; }
.footer_menu li a { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 150px; height: 50px; background: #1b1b1b; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 300; letter-spacing: -0.3px; }
.footer_menu li a:hover { background: #333; }

.footer_copyright { border-top: 1px solid #444; padding-top: 30px; color: #bbb; line-height: 1.7em; }
.footer_copyright a { color: rgba(255, 255, 255, 0.5); }

/* main */
.main_vis { display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 700px; padding-top: 90px; background: url('../image/main/main_vis01.jpg') center top no-repeat; background-size: cover; }
.main_txtbox { color: #fff; }
.main_txtbox h2 { margin-bottom: 30px; font-family: 'paybooc'; font-size: 72px; line-height: 1em; text-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); }
.main_txtbox h2 .point_color { color: #ff0404; font-size: 1.3em; }
.main_txtbox p { color: rgba(255, 255, 255, 0.8); font-family: 'paybooc'; font-size: 1.3em; font-weight: 500; line-height: 1.7; text-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); }

.main_con { padding: 80px 0; }
.main_con h3 { font-family: 'paybooc'; font-size: 30px; }
.main_con_title { position: relative; margin-bottom: 30px; }
.main_con_title h4 { font-family: 'paybooc'; font-size: 35px; }
.main_con_more { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; color: #aaa; font-size: 16px; }
.main_con_more i { margin-left: 5px; }

.main_con02 { display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 0; background: #f7f7f7; }
.main_con02_left, .main_con02_right { padding: 80px 0; width: 50%; }
.main_con02_left { display: flex; flex-wrap: wrap; justify-content: flex-end; background: #f1f1f5; }
.main_con02_right { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.main_con02_inner { max-width: 640px; width: 96%; }
.main_con02_left .main_con02_inner { padding-right: 50px; }
.main_con02_right .main_con02_inner { padding-left: 50px; }

/* sub */
.sub_vis { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; width: 100%; height: 300px; margin-top: 90px; background: #000; color: #fff; }
.sub_bg01 { background: url('../image/sub/sub_vis01.jpg') center top no-repeat; background-size: cover; }
.sub_bg02 { background: url('../image/sub/sub_vis02.jpg') center top no-repeat; background-size: cover; }
.sub_bg03 { background: url('../image/sub/sub_vis03.jpg') center top no-repeat; background-size: cover; }
.sub_bg04 { background: url('../image/sub/sub_vis04.jpg') center top no-repeat; background-size: cover; }
.sub_bg05 { background: url('../image/sub/sub_vis05.jpg') center top no-repeat; background-size: cover; }

.sub_text { text-align: center; }
.sub_text h2 { margin-bottom: 20px; font-family: 'paybooc'; font-size: 48px; text-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); }
.sub_text h2 span.point_color { color: #ff0404; font-size: 1.3em; }
.sub_text p { font-size: 1.2em; line-height: 1.6; text-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); }

.sidebar { border-bottom: 1px solid #ddd; }
.sidebar_inner { display: flex; flex-wrap: wrap; justify-content: center; }
.sidebar_inner li { position: relative; width: 33.33%; }
.sidebar_inner li:after { content:''; position: absolute; top: 30%; right: 0px; width: 1px; height: 40%; background: #ccc; }
.sidebar_inner li:last-child:after { display: none; }
.sidebar_inner li:before { content:''; position: absolute; bottom: -1px; left: 0px; width: 0; height: 2px; background: #000; transition: 0.3s; }
.sidebar_inner li.over:before { width: 100%; }
.sidebar_inner li:hover:before { width: 100%; }
.sidebar_inner li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; padding: 0 5px; width: 100%; height: 55px; color: #666; font-size: 1.1em; }
.sidebar_inner li a:hover, .sidebar_inner li.over a { color: #000; font-weight: 600; }

.sub_contents { margin: 80px auto; }

.sub_title { margin-bottom: 50px; text-align: center; }
.sub_title h2 { margin-bottom: 30px; font-family: 'paybooc'; font-size: 35px; }
.sub_title p { color: #666; }

.sub_contents h3 { margin-bottom: 30px; font-size: 1.8em; font-weight: 600; letter-spacing: -0.5px; }

.page_inr01 { margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid #ccc; }
.happyeduon_title { margin-bottom: 50px; text-align: center; font-size: 2.3em; font-weight: 400; }
.happyeduon_title strong { font-weight: 700; }
.happyeduon_title span { color: #ff0404; }
.happyeduon_imgbox { text-align: center; }
.happyeduon_imgbox img { max-width: 100%;}
.happyeduon_conts { margin-bottom: 50px; text-align: center; font-size: 1.4em; line-height: 1.6; }
.happyeduon_conts span { position: relative; padding: 0 5px; font-weight: 700; }
.happyeduon_conts span:before { content: ''; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 40%; background: #ffe001; z-index: -1; }
.happyeduon_conts02 { text-align: center; font-size: 1.7em; line-height: 1.6; }
.happyeduon_conts02 strong { color: #ff8e01; }

.happyeduon_list { display: flex; flex-wrap: wrap; margin-bottom: 50px; }
.happyeduon_list li { width: 32%; margin-left: 2%; padding-bottom: 30px; border: 1px solid #ddd; }
.happyeduon_list li:nth-child(3n+1) { margin-left: 0%; }
.happyeduon_list li .happyeduon_listimgbox { margin-bottom: 30px; }
.happyeduon_list li .happyeduon_listimgbox img { max-width: 100%; }
.happyeduon_list li h4 {  margin-bottom: 15px; text-align: center; font-size: 1.3em; }
.happyeduon_list li dl { padding: 0 30px; }
.happyeduon_list li dl dd { position: relative; padding-left: 20px; font-size: 1.1em; line-height: 1.7; }
.happyeduon_list li dl dd:after { content:''; position: absolute; left: 0px; top: 11px; width: 4px; height: 4px; border-radius: 5px; background: #aaa; }

/* board */
.view_more { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 110px; height: 40px; border: 1px solid #ccc; color: #888; font-size: 0.9em; }
.view_more:hover { background: #222; border: 1px solid #222; color: #fff; }
.view_more i { position: relative; top: 1px; margin-right:3px; }

/* page_board */
.page_board { border-top: 1px solid #000; }
.page_board .gw_form_control { width:100%; padding:16px; border-bottom:1px solid #ddd; }
.page_board .gw_form_control:after { content:""; display:block; clear:both; }
.page_board .gw_label { float:left; width:150px; padding:8px 0; font-size:1.1em; }

.page_board input.gw_input { margin:0; }
.page_board input.gw_input, .page_board select.gw_select { width: calc(100% - 150px); height:40px; padding:0 8px; border:1px solid #c5ccd7; border-radius:0; }
.page_board select.gw_select { width: calc(30% - 150px); }

.agree_checkbox { margin-top: 30px; }
.agree_txtbox { padding: 20px; margin-bottom: 20px; background: #f4f4f4; border: 1px solid #eee; color: #666; line-height: 1.6; }

.page_board .btn_confirm { margin-top: 50px; }
.btn_confirm .btn { width: 120px; }