@charset "utf-8";

@import url('base.css');

/*g마켓산스체*/
@font-face{
	font-family:'Gmarket Sans'; 
	font-style: normal;
	font-weight:500;
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff2') format('woff2'),
		 url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
}
@font-face {
    font-family: 'Gmarket Sans';
	font-weight:100;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/************************************************
	skipLink
************************************************/
#skipLink{ width:100%; overflow:hidden; position:relative; z-index:1000;}
#skipLink a{ margin:0px -1px -1px 0px; width:1px; height:1px; text-align:center; line-height:0; overflow:hidden; font-size:0px; display:block;}
#skipLink a:focus{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}
#skipLink a:hover{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}
#skipLink a:active{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}

*[tabindex] {
  outline:none;
}

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
body{ background-color: #fafafa;}
.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; z-index:6;}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}

#wrap{ position:relative; width:100%; margin:0 auto; overflow:hidden;;}

#header{ position: absolute; width:100%; z-index:5; 
-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
#header .inner{ position: relative; max-width: calc(100% - 100px); margin: 0 auto; padding-right: 180px; z-index: 2;}
#header .inner::after{ content: ''; display: block; clear: both;}
/* 수정 */
#header .inner h1.logo{ position: absolute; top: 50%; left: 0; width: 270px; margin-top: -32px; z-index: 2;}
#header .inner h1.logo a{ display: block; height: 55px; text-indent: -9999px; background: url(../images/logo.png) 50% 50% no-repeat;}
#header .inner .bt-sch{ position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; right: 60px; text-indent: -99999px; text-align: left; background: url(../images/ic_search.png) 50% 50% no-repeat;}
#header .inner .bt-sch.active{ background: url(../images/ic_x.png) 50% 50% no-repeat;}
#header .subBg{ position: absolute; top: 90px; left: 0; width: 1000%; background-color: #fff; border-top: #d0cfd0 1px solid; border-bottom: #d0cfd0 1px solid; height: 70px; display: none;}
.fixed #header{ position: fixed; background-color: #fff; border-bottom: #000 1px solid;}
#header:hover{background-color: #fff;}

	
#gnb-wrap{position: relative;}
#gnb{ text-align: center; padding-left: 100px;}
#gnb > li{ position: relative; display: inline-block;}
#gnb > li + li{ margin-left: 70px;}
#gnb > li > a{ display: block; line-height: 90px; color: #fff; font-size: 18px; letter-spacing: -.05em; font-family:'Gmarket Sans'; font-weight: 500;}
#gnb > li:hover > a,
#gnb > li.active > a{ color: #90c31f;}
#gnb > li > .subDepth{ display: none; position:absolute; top: 90px; left: 0; white-space: nowrap;}
#gnb > li.gnb1 > .subDepth{ left: -250px;}
#gnb > li.gnb2 > .subDepth{ left: -150px;}
#gnb > li.gnb3 > .subDepth{ left: -200px;}
#gnb > li.gnb4 > .subDepth{ left: -140px;}
#gnb > li.gnb5 > .subDepth{ left: -300px;}
#gnb > li.gnb6 > .subDepth{ left: -300px;}
#gnb > li.gnb7 > .subDepth{ left: -350px;}
#gnb > li > .subDepth > li{ display: inline-block; position: relative}
#gnb > li > .subDepth > li > a{ color: #5e5e5e; font-size: 18px; line-height: 70px; padding: 0 14px;}
#gnb > li > .subDepth > li.bold > a{font-weight: 900;}
#gnb > li > .subDepth > li > a:hover{ color: #90c31f;}
#gnb > li > .subDepth > li + li:before { content: ''; display: block; width: 1px; height: 12px; background: #ccc; position: absolute; top: calc(50% - 6px);}

#header .lang{ position: absolute; top: calc(50% - 15px); right: 30px; width: 80px; font-size: 13px;}
#header .lang .bt{ position: relative; display: block; border: #ccc 1px solid; border-radius: 15px; height: 30px; line-height: 30px; color: #ccc; text-align: center;}
#header .lang .bt::after{ content: ''; display: inline-block; border-top: #999 4px solid; border-left: transparent 4px solid; border-right: transparent 4px solid; margin-left: 10px; 
vertical-align: 2px;}
#header .lang .bt.on::after{ transform: rotate(180deg);}
#header .lang > div{ position: absolute; top: 30px; left: 0; width: 100%; padding-top: 2px; display: none;}
#header .lang > div ul{position: relative; border: #626161 1px solid; border-radius: 10px; text-align: center; padding: 10px; background-color: #fff; overflow: hidden;}
#header .lang > div ul::before{ content: ''; display: block; position: absolute; bottom: 0; left: 0; background-color: #90c31f; height: 3px; width: 100%; }
#header .lang > div ul > li{ text-align: center;}
#header .lang > div ul > li + li{ margin-top: 5px;}
#header .lang > div ul > li > a{ display: block; text-align: center; color: #2d2e30;}
#header .lang > div ul > li > a:hover{ color: #90c31f;}

#header .header_menu{position:absolute; top:50%; right:0px; transform:translateY(-50%);}
#header .header_menu ul{display:flex; }
#header .header_menu ul li a{border-radius:50%;}
#header .header_menu ul li{margin-right:15px; height:45px;}
#header .header_menu ul li:last-child{margin-left:15px; margin-right:0;}

#header .header_menu ul li.sch{width:230px; display:flex; }
#header .header_menu ul li.sch input.h_sch{flex:none; width:190px; height: 45px; border-radius:23px 0 0 23px;; background-color:#eee; border:none; padding-left:20px; font-size:14px; font-weight:500;}
#header .header_menu ul li.sch input.h_sch:focus{outline:none;}
#header .header_menu ul li.sch a.sch_btn{width:40px; height:100%; flex:none; background:#eee url(../images/h_sch_ico.png) center no-repeat; text-indent:-9999px; border-radius: 0 23px 23px 0;}

#header .header_menu ul li.bt-menu1,
#header .header_menu ul li.bt-menu2,
#header .header_menu ul li.bt-mn{width:45px;}
#header .header_menu ul li.bt-menu1 a,
#header .header_menu ul li.bt-menu2 a,
#header .header_menu ul li.bt-mn a{ display: block; width:100%; height:100%; border-radius:50%; background-position:center; background-repeat:no-repeat; text-indent:-9999px; transition:all 0.3s;}
#header .header_menu ul li.bt-menu1 a{background-image:url(../images/h_ico1.png); background-color:#90c31f;}
#header .header_menu ul li.bt-menu1 a:hover{background-color:#648b0e;}
#header .header_menu ul li.bt-menu2 a{background-image:url(../images/h_ico2.png); background-color:#eee;}
#header .header_menu ul li.bt-menu2 a:hover{background-color:#d9d5d0;}
#header .header_menu ul li.bt-mn a{background-image:url(../images/h_all_ico.png);}

.fixed #header #gnb > li > a, #header:hover  #gnb > li > a {color: #333;}
.fixed #header .inner h1.logo a,
 #header:hover .inner h1.logo a { background: url(../images/logo_hover.png) 50% 50% no-repeat; }
.fixed #header .header_menu ul li.bt-mn a,
#header:hover .header_menu ul li.bt-mn a{background-image: url(../images/h_all_ico_hover.png);}
.fixed #header  .lang .bt,
#header:hover .lang .bt { border: #999 1px solid; color: #666;}

#container{ position: relative;}
#indexwrap{ position: relative; z-index: 1; padding-top: 128px;}

#footer{ background-color: #4a4a4a; padding: 40px 0; color: #e5e5e5; font-size: 14px;}
#footer .footer-wrap{ max-width: 1400px; margin: 0 auto; position: relative; padding: 0 0 0 350px;}
#footer .footer-wrap .logo{ position: absolute; top:0; left: 10px;}
#footer .footer-wrap address p + p{ margin-top: 5px;}
#footer .footer-wrap address span{ position: relative; display: inline-block;}
#footer .footer-wrap address span + span{ margin-left: 10px; padding-left: 10px;}
#footer .footer-wrap address span + span::before{ content: ''; display: block; width: 1px; height: 10px; background-color: #fff; position: absolute; top: 50%; left: 0; margin-top: -5px;}
#footer .footer-wrap .footer-link{ margin-top: 20px; }
#footer .footer-wrap .footer-link > li{ position: relative; display: inline-block;}
#footer .footer-wrap .footer-link > li + li{ margin-left: 10px; padding-left: 10px;}
#footer .footer-wrap .footer-link > li + li::before{ content: ''; display: block; width: 1px; height: 10px; background-color: #ffffff; position: absolute; top: 50%; left: 0; margin-top: -5px;}
#footer .footer-wrap .footer-link > li a{ color: #fff;}

#siteFunctions{ position: fixed; top: 0; right: -100%; width: 100%; padding-left: 110px; z-index: 9;}
#siteFunctions .inner{ background-color: #fff; height: 100vh; width: 100%; overflow-y: auto; padding: 0 4.5vw;}
#siteFunctions .inner .hd{ position: relative; padding: 1.5rem 0 0 0; border-bottom: #333 2px solid; height: 5rem;}
#siteFunctions .inner .hd .utill a{ position: relative; display: inline-block; text-transform: uppercase;}
#siteFunctions .inner .hd .utill a + a{ margin-left: .6rem; padding-left: 1rem;}
#siteFunctions .inner .hd .utill a + a::before{ content: ''; display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; margin-top: -5px; background-color: #ddd;}
#siteFunctions .inner .hd .utill a.login{ color: #90c31f;}
#siteFunctions .inner .hd .bt-close{ width: 4rem; height: 4rem; display: block; position: absolute; top: 50%; right: 1.5vw; margin-top: -2rem; overflow: hidden;}
#siteFunctions .inner .hd .bt-close span{ position: absolute; top: -9999px; left: -9999px;}
#siteFunctions .inner .hd .bt-close::before{ content: ''; display: block; width: 2rem; height: 2px; background-color: #333; position: absolute; top: 50%; left: 50%; margin: 0 0 0 -1rem; transform: rotate(45deg);}
#siteFunctions .inner .hd .bt-close::after{ content: ''; display: block; width: 2rem; height: 2px; background-color: #333; position: absolute; top: 50%; left: 50%; margin: 0 0 0 -1rem; transform: rotate(-45deg);}
.mobMenu{ padding: 2rem 0 0 0;}
.mobMenu > li > a{ position: relative; display: block; font-size: 1.6rem; padding: .8rem 0 .6rem; border-bottom: #e1e1e1 1px solid; font-weight: 500; }
.mobMenu > li > a::after{ content: ''; display: block; width: .8rem; height: .8rem; border-top: #7f7f7f 2px solid; border-right: #7f7f7f 2px solid; position: absolute; top: 50%; right: 4.5vw; margin-top: -.4rem; transform: rotate(135deg); -webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out; transition:all 0.1s ease-in-out;}
.mobMenu > li.active > a{ color: #90c31f;}
.mobMenu > li.active > a::after{ transform: rotate(-45deg);}
.mobMenu > li > ul{ padding: 1rem 0 2rem;}
.mobMenu > li > ul > li > a{ position: relative; display: block; font-size: 1.4rem; padding: .3rem 1.5rem;}
.mobMenu > li > ul > li.bold > a{font-weight: 900;}
.mobMenu > li > ul > li > a::before{ content: ''; display: block; position: absolute; top: 50%; left: .5rem; width: .6rem; height: 1px; background-color: #666;}


.locationBar{ position: relative; width: 100%; z-index: 1; border-top: #000 1px solid; background-color: #fff;  -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
.fixed .locationBar{ position: fixed; top:128px; left: 0;}
.locationBar .inner{ max-width: 1490px; margin: 0 auto; }
.locationBar::before{ content: ''; position: absolute; background-color: #e0e0e0; height: 1px; left: 0; bottom: 0; width: 100%; display: block; z-index: -1;}
.locationBar::after{ content: ''; display: block; clear: both;}
.locationBar .loc-h{ float: left; }
.locationBar .loc-h a{ display: block; font-weight: 600; height: 57px; width: 60px; background:#000 url(../images/ic_home.png) 50% 50% no-repeat; text-indent: -9999px;}
.locationBar .location{ position: relative; float: left; width: 310px; border-right: #e0e0e0 1px solid;}
.locationBar .location .bt{ position: relative; display: block; padding: 0 66px; white-space: nowrap; color: #000; font-weight: 500;  font-size: 17px; width: 100%; height: 57px; line-height: 57px; white-space: nowrap;}
.locationBar .location .bt::after{ content: ''; position: absolute; top: 50%; right: 27px; margin-top: -13px; display: block; width: 27px; height: 27px; background: url(../images/ic_aw.png);  -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
.locationBar .location.active .bt::after{ transform: rotate(180deg);} 
.locationBar .location ul{ position: absolute; top: 56px; left: -1px; width: calc(100% + 2px); padding: 10px 0 20px; font-weight: 500; background-color: #fff; border: #bec2c4 1px solid; border-top: none; display: none;}
.locationBar .location ul li a{ display: block; padding: 5px 0 5px 66px; color: #8d8d8d; }
.locationBar .location ul li a:hover{ color: #106fd2; }


.sub-vis{ height: 300px; position: relative; background-repeat: no-repeat; background-color: #000; background-position: 50% 50%; background-size: cover;}
.sub-vis .tit{ line-height: 300px; color: #fff; text-align: center; font-weight: 600; font-size: 44px;}
.sub0101 .sub-vis{ background-image: url(../images/bg_sub0101.jpg);}
.sub0102 .sub-vis{ background-image: url(../images/bg_sub0102.jpg);}
.sub0103 .sub-vis{ background-image: url(../images/bg_sub0103.jpg);}
.sub0104 .sub-vis{ background-image: url(../images/bg_sub0104.jpg);}
.sub02 .sub-vis{ background-image: url(../images/bg_sub0201.jpg);}
.sub06 .sub-vis{ background-image: url(../images/bg_sub06.jpg);}

.contents{ padding: 100px 0 120px;}
body.sub03 .contents,
body.sub04 .contents,
body.sub05 .contents,
body.sub06 .contents{ max-width: 1280px; margin: 0 auto;}

.tit-area{ margin-bottom: 130px;}
.h3-tit{ text-align: center; font-weight: 600; color: #3da8e3; font-size: 50px; position: relative; padding-bottom: 15px;}
.h3-tit::after{ content: ''; display: block; height: 2px; width: 50px; position: absolute; bottom: 0; left: 50%; margin-left: -25px; background-color: #3190c5;}
.tit-sub{ font-size: 25px; color: #333; text-align: center; margin-top: 20px; font-weight: 600;}
.h4-tit{ position: relative; font-size: 25px; color: #333; margin-bottom: 30px;}
.h4-tit.dot{ color: #000; font-size: 22px; padding-left: 28px;}
.h4-tit.dot::before{ content: ''; display: block; position: absolute; top: 50%; left: 0; width: 1rem; height: 2px; background-color: #3190c5;}

body.sub03 .tit-area,
body.sub04 .tit-area,
body.sub05 .tit-area{ margin-bottom: 100px;}
body.sub03 .h3-tit,
body.sub04 .h3-tit,
body.sub05 .h3-tit{ color: #000; padding-bottom: 0;}
body.sub03 .h3-tit::after,
body.sub04 .h3-tit::after,
body.sub05 .h3-tit::after{ display: none;}

table.data{ table-layout: fixed; border-top: #000 2px solid;}
table.data thead th{ padding: 14px 20px; color: #000; font-weight: 500; background-color: #f0f0f0; border-bottom: #a0a0a0 1px solid; border-left: #a0a0a0 1px solid; text-align: center;}
table.data tbody th{ padding: 14px 20px; color: #000; font-weight: 500; background-color: #f0f0f0; border-bottom: #a0a0a0 1px solid; border-left: #a0a0a0 1px solid; text-align: center;}
table.data tbody td{ padding: 14px 20px; color: #666; font-weight: 400; border-bottom: #a0a0a0 1px solid; border-left: #a0a0a0 1px solid; text-align: center;}
table.data .brdLn{ border-left: none;}
table.data.left tbody th,
table.data.left tbody td{ text-align: left;}
table.data .eduSel{ width: 200px;}        
table.data .myp0101{ width: 120px;}
table.data .myp0102{ width: 180px;}
table.data .tx-pw i{ display: inline-block; vertical-align: -.4rem;}

table.list{ table-layout: fixed; width: 100%; border-top: #000 2px solid; }
table.list thead th{ background-color: #f0f0f0; padding: 20px 0; text-align: center; color: #333; font-weight: 400; border-bottom: #ccc 1px solid;}
table.list tbody td{ text-align: center; padding: 18px 10px; border-bottom: #ccc 1px solid;}
table.list .noti1{ width: 100px;}
table.list .noti3{ width: 130px;}
table.list .noti4{ width:130px;}
table.list .subject{ text-align: left;}
table.list .subject i{ display: inline-block; vertical-align: -.4rem; margin-right: .5rem;}
table.list tbody tr:hover{ background-color:#f7f7f7;}
table.list.tbl-noti .reserve1{ width: 8%;}  
table.list.tbl-noti .reserve3{ width: 10%;}  
table.list.tbl-noti .reserve4{ width: 10%;}  
table.list.tbl-noti .reserve5{ width: 10%;}  
table.list.tbl-noti .reserve6{ width: 10%;}  
table.list .eduTbl1{ width: 140px;}
table.list .eduTbl3,
table.list .eduTbl6,
table.list .eduTbl7{ width: 110px;}
table.list .eduTbl4{ width: 120px;}
table.list .eduTbl5{ width: 130px;}

.tbl-search{ text-align: center; margin-bottom: 60px;}
.tbl-search .select{ min-width: 150px; height: 50px; line-height: 50px;}
.tbl-search .inp{ width: 500px; margin: 0 8px; height: 50px; line-height: 50px;}
.tbl-search .sch{ display: inline-block; text-indent: -9999px; width: 50px; height: 50px; text-align: left; vertical-align: middle; background:#314770 url(../images/ic_sch.png) 50% 50% no-repeat;}

div.paging{ text-align:center; padding:0; margin:60px 0 0 0; position:relative; clear:both;}
div.paging a,
div.paging strong{ position: relative; display:inline-block; height:30px; line-height:30px; font-size: 18px; color:#999; text-align:center; vertical-align:middle; background-color: transparent; overflow: hidden; padding: 0 12px;}
div.paging .on{ font-weight:600; color: #000; }
div.paging .direction{ position:relative; width: 30px; margin: 0 2px; background-color: #f6f6f7; border: #ccc 1px solid;}
div.paging .direction:hover{ background-color: #f0f0f0;}
div.paging .direction > span{ position:absolute; top:-9999px; left:-9999px;}
div.paging .direction.prev{ margin-right: 20px;}
div.paging .direction.next{ margin-left: 20px;}
div.paging .direction.first:before{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 0px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg); }
div.paging .direction.first:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg); }
div.paging .direction.prev:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg); }
div.paging .direction.next:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
div.paging .direction.last:before{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -8px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
div.paging .direction.last:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(-135deg);transform:rotate(-135deg); }

.tbl-view{ border-top: #000 2px solid; border-bottom: #a0a0a0 1px solid;}
.tbl-view .hd{ padding: 20px 0; }
.tbl-view .hd .blt-bx{ margin-bottom: 1rem; text-align: center;}
.tbl-view .hd .tit{ display: block; color: #000; font-size: 22px; font-weight: 600; line-height: 1.2; text-align: center; padding: 0 25px;}
.tbl-view .hd .tit i{ display: inline-block; margin-right: .4rem; vertical-align: -.4rem;}
.tbl-view .hd .click{ margin-top: 20px; text-align: right; padding: 0 25px;}
.tbl-view .hd .loc{ margin-top: 20px;}
.tbl-view .hd > table{ width: 100%; table-layout: fixed; border-top: #a0a0a0 1px solid; margin-top: 10px;}
.tbl-view .hd > table tr{ border-bottom: #a0a0a0 1px solid;}
.tbl-view .hd > table th{ padding: 15px 25px; text-align: left; font-weight: 500; color: #333; border-left: #a0a0a0 1px solid; background-color: #f0f0f0; white-space: nowrap;}
.tbl-view .hd > table td{ padding: 15px 25px; text-align: left; border-left: #a0a0a0 1px solid;}
.tbl-view .hd > table .brdLn{ border-left: none;}
.tbl-view .bd{ padding: 50px; border-bottom: #ccc 1px solid;}
.tbl-view .a-hd{ text-align: center; border-top: #000 2px solid; padding: 15px 0; text-align: center; color: #000; font-weight: 500; background-color: #f0f0f0; border-bottom: #ccc 1px solid;}

.viewBottomList{ margin-top: -1px; background-color: #fafafa;}
.viewBottomList ul{ display:block; width:100%; border-bottom: #ccc 1px solid;}
.viewBottomList ul li:hover{ background-color: #f5f5f5;}
.viewBottomList .viewBottomPrev{display:block; padding:0 10px 0 160px; height:56px; line-height:60px; position:relative; border-bottom:#ccc 1px solid;}
.viewBottomList .viewBottomNext{display:block; padding:0 10px 0 160px; height:56px; line-height:60px; position:relative; }
.viewBottomList .orderPrev{ vertical-align:middle; position:absolute; top:0; left:0; width:120px; line-height:56px; padding-left: 55px; color:#333; font-weight: 600; }
.viewBottomList .orderNext{ vertical-align:middle; position:absolute; top:0; left:0; width:120px; line-height:56px; padding-left: 55px; color:#333; font-weight: 600; }
.viewBottomList .orderPrev::before{ content: ''; position: absolute; top: 50%; left: 22px; display: block; width: 8px; height: 8px; border-top:#787878 1px solid; border-left: #787878 1px solid; transform: rotate(45deg);}
.viewBottomList .orderNext::before{ content: ''; position: absolute; top: 50%; left: 22px; display: block; width: 8px; height: 8px; border-top:#787878 1px solid; border-left: #787878 1px solid; transform: rotate(-135deg); margin-top: -4px;}
.viewBottomList a{ color:#666; text-overflow:ellipsis; overflow:hidden; display:block; white-space:nowrap; height:60px; line-height:60px;}
.viewBottomList .viewBottomPrev:hover a,
.viewBottomList .viewBottomNext:hover a{ text-decoration:underline;}

.faq-wr{ border-top: #000 2px solid;}
.faq-wr dt{ position: relative; padding: 30px 120px 30px 90px; font-size: 18px; border-bottom: #ccc 1px solid;}
.faq-wr dt::after{ content: ''; display: block; width: 20px; height: 20px; border-top:#666 1px solid; border-right:#666 1px solid; position: absolute; top: 50%; right: 30px; margin-top: -10px; transform: rotate(135deg); -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
.faq-wr dt.active{ border-bottom: none;}
.faq-wr dt.active::after{ transform: rotate(-45deg); margin-top: -6px;}
.faq-wr dt a{ color: #333;}
.faq-wr dt i{ position: absolute; display: inline-block; color: #3190c5; font-weight: 600; position: absolute; top: 30px; left: 30px;}
.faq-wr dd{ position: relative; padding: 30px 120px 30px 90px; background-color: #f0f0f0; border-bottom: #ccc 1px solid;}
.faq-wr dd i{ position: absolute; display: inline-block; color: #cc0000; font-weight: 600; position: absolute; left: 30px; /*top: 50%; margin-top: -.5em;*/ font-size:18px;}

.div-tab{ border-top: #000 2px solid; margin-bottom: 60px;}
.div-tab ul{ display: table; width: 100%; table-layout: fixed;}
.div-tab ul li{ display: table-cell;}
.div-tab ul li a{ display: block; text-align: center; background-color: #f0f0f0; height: 60px; line-height: 60px; color: #666; border-bottom: #a0a0a0 1px solid; border-right: #a0a0a0 1px solid;}
.div-tab ul li:first-child a{ border-left: #a0a0a0 1px solid;}
.div-tab ul li a:hover{ background-color: transparent;}
.div-tab ul li.active a{ background-color: transparent; color: #000; border-bottom-color:#fafafa;}

.ul-list01 > li{ text-indent: -1rem; padding-left: 1rem;}
.ul-list01 > li + li{ margin-top: .4rem;}
.ul-list01 > li::before{ content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #999; margin-right: .5rem; vertical-align: .2rem;}

.ui-widget-header{ background-color: transparent; border: none;}
.ui-datepicker th{ color: #8d8d8d;}
.ui-datepicker .ui-datepicker-prev::after{ content:''; position: absolute; top: 50%; left: 50%; margin: -.4rem 0 0 -.4rem; display: block; width: .8rem; height: .8rem; border-top: #000 2px solid; border-right: #000 2px solid; transform: rotate(-135deg);}
.ui-datepicker .ui-datepicker-next::after{ content:''; position: absolute; top: 50%; left: 50%; margin: -.4rem 0 0 -.4rem; display: block; width: .8rem; height: .8rem; border-top: #000 2px solid; border-right: #000 2px solid; transform: rotate(45deg);}

.down::after{ content: ''; background: url(../images/ic_down.png) 50% 50% no-repeat; width: 18px; height: 18px; display: inline-block; margin: 0 10px;}

.filebox{ position:relative; padding:0 64px 0 0; width: auto; display:inline-block; vertical-align:middle;}
.filebox input[type="file"]{ position: absolute; width:1px; height: 1px; padding: 0; margin:-1px; overflow: hidden; clip:rect(0,0,0,0); border:0;}
.filebox label{ position:absolute; top:0; right:0; width:64px; height:40px; line-height:40px; margin:0; display:block; background: url(../images/ic_folder.png) 50% 50% no-repeat; text-indent: -9999px; cursor: pointer;}
.filebox .upload-name{height:40px; line-height:40px; padding:0 10px; width:420px; font-size: 16px; margin:0; vertical-align:middle; background:#fff; border-radius:0; border:#ccc 1px solid; box-shadow:none; -webkit-border-radius:0;  ime-mode:inactive; outline:none; -webkit-appearance: none;  -moz-appearance: none;  appearance: none;}

.sch-bx{ position: relative; padding: 0 65px 0 0; }
.sch-bx .inp{ display: block; width: 100%;}
.sch-bx .sch{ position: absolute; top: 0; right: 0; display: block; width: 60px; height: 40px; background:#314770 url(../images/ic_sch.png) 50% 50% no-repeat;}

.dv-ready{ max-width: 640px; margin: 0 auto; text-align: center;}
.dv-ready .desc{ margin: 50px 0 0 0;}
.dv-ready .desc p{ font-size: 60px; color: #000;}
.dv-ready .desc p b{ color: #0e6ca7;}
.dv-ready .desc span{ display: block; margin-top: 20px;}

.tbl-scroll{ position: relative;}

@media screen and (max-width:1700px){
	#header .inner {max-width: calc(100% - 60px);}
	#gnb > li + li {margin-left: 50px;}
}

@media screen and (max-width:1600px){
	#header .inner h1.logo {width: 220px; margin-top: -25px;}
	#header .inner h1.logo a {height: 40px; background-size: cover !important;}
	#header .header_menu ul li {height: 40px;}
	#header .header_menu ul li.bt-menu1, #header .header_menu ul li.bt-menu2, #header .header_menu ul li.bt-mn {width: 40px;}
	#header .header_menu ul li:last-child {margin-left: 5px;}
	#header .lang { right: 0; width: 70px;}
}

@media screen and (max-width:1500px){
	#header .inner {padding-right: 160px;}
	#header .lang{display:none;}
	#gnb {padding-left: 200px;}
}

@media screen and (max-width:1350px){
	#header .inner { height: 80px;}
	#gnb {display:none;}
}


@media screen and (max-width:1200px){
		#footer .footer-wrap {padding: 0 0 0 300px;}
}
@media screen and (min-width:1024px){
    #siteFunctions{ width: 100%; right: 0; top: -700px; padding: 0;}
    #siteFunctions .inner{ height: auto;}
    #siteFunctions .mobMenu{ width: 100%; padding: 0 0 0; }
    #siteFunctions .mobMenu::after{ content: ''; display: block; clear: both;}
    #siteFunctions .mobMenu > li{ display: block; float: left; width: calc(100%/7); padding: 0 10px;}
    .mobMenu > li > a{ font-size: 18px;}
    .mobMenu > li > a::after{ display: none;}
    .mobMenu > li > ul > li > a{ font-size: 16px;}
    .mobMenu > li > ul{ display: block;}
}

@media screen and (min-width:1025px) and (max-width:1500px){
    #header .header-top{ padding: 0 20px;}
    #header .inner h1.logo{ left: 0px;}
    #header .inner .bt-mn{ right: 20px;}
    #header .inner .bt-sch{ right: 80px;}
}

@media screen and (min-width:1025px) and (max-width:1250px){
    #gnb > li + li{ margin-left: 4vw; }
}

@media screen and (min-width:641px) and (max-width:1024px){ 
    #header .header-top,
    #gnb-wrap{ display: none;}
    #header .inner{ height: 5rem;}
    #header .inner h1.logo a{ background-size: cover;}
    #header .inner .bt-mn > i{ height: .2rem;}
    #header .inner .bt-mn > i:nth-child(1){ margin-top: -.8rem;}
    #header .inner .bt-mn > i:nth-child(3){ margin-top: .6rem;}
    #header .inner .bt-sch{ width: 2rem; height: 2rem; right: 5rem; background-size: cover; margin-top: -1rem;}
    
    .locationBar .loc-h a{ width: 4rem;}
    .locationBar .location{ width: calc(50% - 2rem);}
    .locationBar .location .bt{ padding: 0 1rem;}
    .locationBar .location .bt::after{ width: 1rem; height: 1rem; background-size: 1rem; margin-top: -.5rem; right: 1rem;}
    .locationBar .location ul li a{ padding: .5rem 1rem;}
    .fixed .locationBar{ top: 5rem;}
    
    .tit-area,
    body.sub03 .tit-area,
    body.sub04 .tit-area,
    body.sub05 .tit-area{ margin-bottom: 50px;}
    
    .contents{ padding: 5rem 2rem;}
    
    #footer{ padding: 2rem 2rem; text-align: center;}
    #footer .footer-wrap{ padding: 0;}
    #footer .footer-wrap .logo{ display: none;}
    #footer .footer-wrap .copy{ position: relative; bottom: auto; left: auto; width: 100%; margin-top: 0.5rem;}
    #footer .footer-wrap .footer-link{ margin-top: 0.5rem;}
    #footer .footer-wrap .copy em{ font-size:1rem;}   
    
    .tbl-search .inp{ width: 350px;}
    
    table.list.tbl-edu colgroup{ display: none;}
    table.list.tbl-edu thead{ display: none;}
    table.list.tbl-edu tbody tr{ border-bottom: #ccc 1px solid; padding: 1rem 0; display: block;}
    table.list.tbl-edu tbody tr:nth-child(even){background-color: #f7f7f7;}
    table.list.tbl-edu tbody td{ display: inline-block; border-bottom: none; text-align: left; padding: .2rem 0; width: 30%;}
    table.list.tbl-edu tbody td.eduTbl1{ width: 100%;}
    table.list.tbl-edu tbody td.subject{ width: 100%; font-weight: 600; color: #222;}
    table.list.tbl-edu tbody td.eduTbl4{ width: 60%;}    

    .tbl-scroll{ width: 100%; overflow-x: auto;}
    
	.responsive-dim{position: absolute; top: 0; left:0; width:100%; bottom:0;}
	.responsive-dim::after{ content:""; position: absolute; top:50%; left:50%; width:10rem; height:10rem; margin:-5rem 0 0 -5rem; border-radius: 50px; background:rgba(0,0,0,.3) url(../images/tx_scroll.png) 50% 50% no-repeat;  }
}

@media screen and (max-width:640px){
    #header .inner{max-width: calc(100% - 30px);}
    #header .header-top,
    #gnb-wrap{ display: none;}
    #header .inner{ height: 5rem;}
    #header .inner h1.logo{ width: 155px; height: 28px; margin: -14px 0 0 0; left: 0;}
    #header .inner h1.logo a{ height: 28px; background-size: cover;}
    #header .inner .bt-sch{ width: 2rem; height: 2rem; right: 5rem; background-size: cover; margin-top: -1rem;}

	#header .header_menu ul li { margin-right: 10px; height: 35px;}
	#header .header_menu ul li.bt-menu1, #header .header_menu ul li.bt-menu2, #header .header_menu ul li.bt-mn {width: 35px;}
	#header .header_menu ul li:last-child {margin-left: 10px; }
	#header .header_menu ul li.bt-mn a {border-radius: 0%; background-size: 25px; }
    
    .locationBar .loc-h a{ height: 4rem; width: 4rem;}
    .locationBar .location{ width: calc(50% - 2rem);}
    .locationBar .location .bt{ line-height: 4rem; height: 4rem; font-size: 1.4rem; padding: 0 1rem;}
    .locationBar .location .bt::after{ width: 1rem; height: 1rem; background-size: 1rem; margin-top: -.5rem; right: 1rem;}
    .locationBar .location ul{ top: 4rem;}
    .locationBar .location ul li a{ padding: .5rem 1rem;}
    .fixed .locationBar{ top: 5rem;}
    
    .sub-vis{ height: 16rem;}
    .sub-vis .tit{ line-height: 16rem; font-size: 3rem;}
    
    .contents{ padding: 5rem 2rem;}
    
    .tit-area,
    body.sub03 .tit-area,
    body.sub04 .tit-area,
    body.sub05 .tit-area{ margin-bottom: 5rem;}
    .h3-tit{ font-size: 2.5rem;}
    .tit-sub{ margin-top: 1rem; font-size: 1.5rem; line-height: 1.2;}
    .h4-tit{ font-size: 2rem; margin-bottom: 2rem;}
    
    #footer{ padding: 2rem 2rem; font-size: 1rem; text-align: center;}
    #footer .footer-wrap{ padding: 0;}
    #footer .footer-wrap .logo{ display: none;}
    #footer .footer-wrap .copy{ position: relative; bottom: auto; left: auto; width: 100%; margin-top: 1.5rem;}
    #footer .footer-wrap .footer-link{ margin-top: 1.5rem;}
    #footer .footer-wrap .copy em{ font-size:1rem;}
    
    table.data thead th{ padding: 1rem .5rem;}
    table.data tbody th,
    table.data tbody td{ padding: 1rem .5rem;}
    table.data.reserveData colgroup,
    table.data.reserveData2 colgroup,
    table.data.reserveData3 colgroup,
    table.data.qna colgroup{ display: none;}
    table.data.reserveData tbody tr th:first-child,
    table.data.reserveData2 tbody tr th:first-child,
    table.data.reserveData3 tbody tr th:first-child{ width: 8rem; }
    table.data.reserveData3 tbody tr > *:nth-child(3){ width: 8rem; }
    table.data.qna tbody tr > *:nth-child(1){ width: 8rem; }
    table.data .mBlock{ width: 100%;}
    table.data .eduSel{ width: 100%;}
    table.data .myp0101{ width: 20%;}
    table.data .myp0102{ width: 40%;}
    table.data .tx-pw i{ vertical-align: -.2rem;}
    
    table.list.tbl-noti colgroup{ display: none;}
    table.list.tbl-noti thead{ display:none;}
    table.list.tbl-noti tbody{ display: block;}
    table.list.tbl-noti tbody tr{ display: block; border-bottom: #ccc 1px solid; width: 100%; padding: .5rem 1rem; }
    table.list.tbl-noti tbody tr:nth-child(even){ background-color: #f7f7f7;}
    table.list.tbl-noti tbody td{ border-bottom: none; display: inline-block; padding: .5rem 0; text-align: left;}
    table.list.tbl-noti .noti1{ display: none;}
    table.list.tbl-noti .subject{ display: block; width: 100%;}
    table.list.tbl-noti .noti3{ width: 30%;}
    table.list.tbl-noti .noti4{ width: 30%;} 
    table.list.tbl-noti .reserve1{ display: none;}
    table.list.tbl-noti .reserve3,
    table.list.tbl-noti .reserve4,
    table.list.tbl-noti .reserve5,
    table.list.tbl-noti .reserve6{ width: 22%;}
    table.list.tbl-noti .eduTbl3,
    table.list.tbl-noti .eduTbl5,
    table.list.tbl-noti .eduTbl6{ width: 30%;}
    table.list.tbl-noti .eduTbl4{ width: 65%;}
    
    div.paging{ margin-top: 3rem;}
    div.paging a, div.paging strong{ margin: 0;}
    div.paging .direction.prev{ margin-right: 0rem;}
    div.paging .direction.next{ margin-left: 0rem;}
    
    .tbl-search{ margin-bottom: 2rem;}
    .tbl-search::after{ content: ''; display: block; clear: both;}
    .tbl-search .select{ width: 100%; margin-bottom: 5px; height: 34px; line-height: 34px;}
    .tbl-search .inp{ width: calc(100% - 40px); float: left; margin: 0; height: 34px; line-height: 34px;}
    .tbl-search .sch{ float: right; width: 3.4rem; height: 3.4rem;}
    
    .tbl-view .hd .tit{ font-size: 2rem;}
    .tbl-view .hd{ padding: 1rem 0;}
    .tbl-view .hd .click{ margin-top: .5rem;}
    .tbl-view .hd > table colgroup{ display: none;}
    .tbl-view .hd > table th{ padding: .5rem;}
    .tbl-view .hd > table td{ padding: .5rem;}
    .tbl-view .bd{ padding: 1rem;}
    .tbl-view .a-hd{ padding: .5rem;}
    
    .viewBottomList .orderNext,
    .viewBottomList .orderPrev{ height: 4rem; line-height: 4rem; padding-left: 3rem; width: 8rem;}
    .viewBottomList .orderPrev::before,
    .viewBottomList .orderNext::before{ left: 1rem;}
    .viewBottomList a{ height: 4rem; line-height: 4rem;}
    .viewBottomList .viewBottomNext,
    .viewBottomList .viewBottomPrev{ height: 4rem; line-height: 4rem; padding-left: 9rem;}    
    
    .faq-wr dt{ padding: 1rem 4rem 1rem 3rem; font-size: 1.3rem;}
    .faq-wr dt i{ position: absolute; top: 1rem; left: 1rem;}
    .faq-wr dt::after{ width: 1rem; height: 1rem; margin-top: -.5rem; right: 1rem;}
    .faq-wr dt.active::after{ margin-top: -.2rem;}
    .faq-wr dd{ padding: 1rem 4rem 1rem 3rem;}
    .faq-wr dd i{ position: absolute; top:1.8rem; left: 1rem; font-size:1.3rem;}    
    
    .div-tab{ /*margin-bottom: 2rem;*/}
    .div-tab ul{ display: block;}
    .div-tab ul::after{ content: ''; display: block; clear: both;}
    .div-tab ul li{ display: block; float: left; width: 33.3%;}
    .div-tab ul li a{ height: 4rem; line-height: 4rem; border-left: #a0a0a0 1px solid; margin: 0 -1px;}
    .div-tab ul li.active a{ border-bottom: #a0a0a0 1px solid;}
    
    .filebox{ display: block; width: 100%; padding-right: 40px;}
    .filebox .upload-name{ width: 100%; height: 34px; line-height: 34px; font-size: 1rem;}
    .filebox label{ top: 0; right: 0; position: absolute; width: 40px; height: 34px;}
    
    .sch-bx{ padding-right: 4rem;}
    .sch-bx .sch{ width: 4rem; height: 3.4rem;}
    
    .dv-ready .desc p{ font-size: 2rem; margin-top: 2rem;}
    .dv-ready .desc span{ margin-top: 1rem;}   

    .tbl-scroll{ width: 100%; overflow-x: auto;}
    
	.responsive-dim{position: absolute; top: 0; left:0; width:100%; bottom:0;}
	.responsive-dim::after{ content:""; position: absolute; top:50%; left:50%; width:10rem; height:10rem; margin:-5rem 0 0 -5rem; border-radius: 50px; background:rgba(0,0,0,.3) url(../images/tx_scroll.png) 50% 50% no-repeat;  }
}

@media screen and (max-width:360px){
    #header .inner h1.logo{margin-top: -10px; width: 128px; height: 28px;}
    #header .inner h1.logo a{height: 22px;}

}

.about01-wr{ position: relative; margin: 0 auto; padding-bottom: 200px;}
.about01-wr::before{ content: ''; position: absolute; bottom: 0; left: 0; right: calc( 50% + 210px); height: 500px; display: block; background: url(../images/bg_patten.png);}
.about01-wr .bx01{ position: relative; max-width: 1280px; margin: 0 auto; padding: 0 0 0 500px;}
.about01-wr .bx01 .thumb{ position: absolute; top: 0; left: 0;}
.about01-wr .bx01 .desc{ line-height: 1.8;}
.about01-wr .bx01 .desc p{ margin-top: 50px; font-size: 20px;}
.about01-wr .bx01 .desc p b{ color: #333;}

body.sub0102{ background-color: #fff;}
.about02-wr{ margin-bottom: -120px; padding-bottom: 300px; background: url(../images/purpoes_bg.jpg) 50% 100% no-repeat; }
.purpose-bx{ text-align: center; max-width: 1310px; margin:0 auto;}
.purpose-bx > li{ display: inline-block; width: 400px; height: 402px; border: #7e7e7e 1px solid; border-radius: 18px; background-color: #fff; margin: 0 17px 80px; overflow: hidden;}
.purpose-bx > li i{ display: block; height: 240px; background: url(../images/bg_patten2.png); padding-top: 50px;}
.purpose-bx > li .desc{ padding: 20px 40px; text-align: left;}
.purpose-bx > li .desc p{ color: #39a0d4; font-size: 50px; font-family: 'Montserrat'; font-weight: 200; line-height: 1;}
.purpose-bx > li .desc div{ font-size: 18px; color: #333; margin-top: 5px;}

.org-img{ text-align: center;}

.about04-wr{ max-width: 1280px; margin: 0 auto;}
.map-bx{ border: #858585 1px solid; margin-top: 60px;}
.map-bx .map{ display: block; width: 100%; height: 550px;}

.tbl-reserve{ width: 100%; table-layout: fixed; border-top: #000 2px solid;}
.tbl-reserve tr{ border-bottom: #a0a0a0 1px solid;}
.tbl-reserve tbody th{ padding: 10px 25px; text-align: left; border-left: #a0a0a0 1px solid; color: #333 ;font-weight: 500; background-color: #f0f0f0;}
.tbl-reserve tbody td{ padding: 10px 25px; text-align: left; border-left: #a0a0a0 1px solid;}
.tbl-reserve .brdLn{ border-left: none;}
.tbl-reserve .select,
.tbl-reserve .inp{ height: 40px; line-height: 40px;}
.tbl-reserve .sel01{ min-width: 250px;}
.tbl-reserve .sel02{ min-width: 150px;}
.tbl-reserve .data-sch{ display: flex;}
.tbl-reserve .data-sch .inp{ width: calc(100% - 190px); margin: 0 10px;}
.tbl-reserve .data-sch .sch{ width: 40px; height: 40px; display: inline-block; width: 60px; background: #31476f url(../images/ic_sch.png) 50% 50% no-repeat; text-indent: -9999px;}
.tbl-reserve .reserve-w1{ width: 20%;}

.reserve-desc{ margin: 50px 0 80px; font-size: 15px;}
.reserve-desc .tx01{ color: #333; font-weight: 600;}

.thumb-list{ margin-left: -40px; margin-top: -60px;}
.thumb-list::after{ content: ''; display: block; clear: both;}
.thumb-list .item{ position: relative; width: 400px; float: left; border: #ddd 1px solid; margin-left: 40px; margin-top: 60px; min-height: 250px; border-radius: 10px; overflow: hidden; }
.thumb-list .item::before{ content: ''; border: #333 3px solid; position: absolute; width: calc(100% + 2px); left: -1px; top: -1px; bottom: -1px; display: block; border-radius: 10px; z-index:1;
opacity: 0; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
.thumb-list .item:hover::before{ opacity: 1;}
.thumb-list .item .thumb{ position: relative; margin: 20px; background: #fff;}
.thumb-list .item .thumb img{ display: block; object-fit: cover; object-position: center; /*width: 100%;*/ height: 215px; margin: 0 auto;}
.thumb-list .item .desc{  position: relative; display: block; height: 300px; overflow: hidden;}
.thumb-list .item .desc img{width: 100%; height: 100%; object-fit: cover;}
.thumb-list .item .desc .subject{text-align: center; color: #000; font-size: 25px; font-weight: 600; line-height: 1.2; height: 80px; background: #f0f0f0; padding: 24px 40px; /*overflow: hidden; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;*/}
.thumb-list .item .desc .name{ font-size: 18px; color: #000; margin-top: 20px; padding: 0 30px; font-weight: 500;}

.thumb-list .item .desc .text {padding: 0 0 0 45px;}
.thumb-list .item .desc .text a {display: block;}
.thumb-list .item .desc .text a::before{content: ''; display: block; width: 5px; height: 5px; background-color: #818284; position: absolute; left: 30px; margin-top: .9rem; border-radius: 50%;}

.thumb-list .item .desc .text_warp {min-height: 90px; margin: 10px 0 20px;}

.thumb-list .item .desc .text_l {padding: 0 0 0 45px; width: 190px; float: left;}
.thumb-list .item .desc .text_l a {display: block;}
.thumb-list .item .desc .text_l a::before{content: ''; display: block; width: 5px; height: 5px; background-color: #818284; position: absolute; left: 30px; margin-top: .9rem; border-radius: 50%;}

.thumb-list .item .desc .text_r {padding: 0 0 0 30px; width: 190px; float: right;}
.thumb-list .item .desc .text_r a {display: block;}
.thumb-list .item .desc .text_r a::before{content: ''; display: block; width: 5px; height: 5px; background-color: #818284; position: absolute; left:225px; margin-top: .9rem; border-radius: 50%;}

.thumb-list .item .bottom{position: relative;  padding:20px 25px; border-top: #ddd 1px solid; text-align: left;}
.thumb-list .item .bottom::after{ content: ''; display: block; clear: both;}
.thumb-list .item .bottom .tit {font-family: 'Gmarket Sans'; font-weight: 500; color: #333; font-size: 18px; line-height: 1.3; overflow: hidden; white-space: normal; word-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 45px;}
.thumb-list .item .bottom .date{font-size:16px; color:#999; margin-top: 5px;}
.thumb-list .item .bottom .bt {background: #999; display: inline-block; height: 32px; line-height: 32px; padding: 0 20px; color: #fff; text-transform: uppercase; font-size: 13px; border-radius: 23px;}

.reserve-view .hd{ position: relative; border-top: #000 2px solid; border-bottom: #b8b8b8 1px solid; padding: 30px 180px 30px 140px;}
.reserve-view .hd .blt2{ position: absolute; top: 50%; left: 35px; border: #999 1px solid; height: 30px; width: 90px; display: block;line-height: 28px; border-radius: 15px; margin-top: -15px; text-align: center; font-size: 14px;}
.reserve-view .blt2 i{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;}
.reserve-view .blt2.blue i{ background-color: #00ade6;}
.reserve-view .blt2.red i{ background-color: #f1840e;}
.reserve-view .blt2.orange i{ background-color: #ed1c24;}
.reserve-view .hd .subject{ font-size: 25px; color: #000; font-weight: 600;}
.reserve-view .hd .right{ position: absolute; top: 50%; right: 35px; margin-top: -15px;}
.reserve-view .hd .right a{ position: relative; display: inline-block; width: 34px; height: 30px; }
.reserve-view .hd .right a + a{ margin-left: 40px;}
.reserve-view .hd .right .btShare{ background: url(../images/ic_share.png) 50% 50% no-repeat;}
.reserve-view .hd .right .btList i{ display: block; position: absolute; top: 50%; left: 0; width: 100%; background-color: #999; height: 2px;}
.reserve-view .hd .right .btList i:nth-child(1){ margin-top: -10px;}
.reserve-view .hd .right .btList i:nth-child(3){ margin-top: 10px;}
.reserve-view .bd{ border:#a0a0a0 1px solid; padding: 40px 50px; background-color: #fff; margin: 30px 0 0 0;}
.reserve-view .bd::after{ content: ''; display: block; clear: both;}
.reserve-view .bd .dv-l{ float: left; width: 450px; text-align: center;}
.reserve-view .bd .dv-l .blt{ text-align: center; display: block; margin-top: 10px; font-size: 14px;}
.reserve-view .bd .dv-r{ float: left; width: calc(100% - 450px); padding: 0 0 0 50px;}
.reserve-view .bd .dv-r ul{ border-bottom: #e5e5e5 1px solid;}
.reserve-view .bd .dv-r ul + ul{ margin-top: 20px;}
.reserve-view .bd .dv-r ul > li{ display: table; width: 100%; table-layout: fixed; padding: 8px 20px;}
.reserve-view .bd .dv-r ul > li > *{ display: table-cell;}
.reserve-view .bd .dv-r ul > li .t-tx{ width: 110px; color: #000; font-weight: 500;}
.reserve-view .bd .dv-r .reserve-desc{ margin: 35px 0 0 0;}
.reserve-view .bd .dv-r .btn-box .btn{ width: 170px;}

.reserve-con{ margin: 75px 0 0 0;}
.reserve-con .tc .tit{ color: #000; font-size: 25px; font-weight: 600; margin: 45px 0 25px 0;}
.reserve-con .tc b{ color: #333;}

.calendar-wr .cal-head{ text-align: center;}
.calendar-wr .cal-head > a{ position: relative; display: inline-block; width: 30px; height: 30px; vertical-align: middle;}
.calendar-wr .cal-head > a::after{ content: ''; display: block; width: .6rem; height: .6rem; border-top: #000 2px solid; border-right: #000 2px solid; transform: rotate(45deg); position: absolute; top: 50%; left: 50%; margin: -.3rem 0 0 -.3rem;}
.calendar-wr .cal-head > a.prev::after{ transform: rotate(-135deg);}
.calendar-wr .cal-head .cal-tit{ color: #000; font-weight: 600; font-size: 30px; display: inline-block; line-height: 1; vertical-align: middle; margin: 0 4rem;}
.calendar-wr .cal-con{ margin: 4rem 0 0 0;}
.calendar-wr .cal-con table th{ padding: 10px 0; text-align: center; background-color: #406897; color: #fff; font-weight: 600; border-top: #365e8e 1px solid; border-bottom: #365e8e 1px solid; border-right: #365e8e 1px solid;}
.calendar-wr .cal-con table th:first-child{ border-left: #365e8e 1px solid;}
.calendar-wr .cal-con table td{ border-bottom: #ccc 1px solid; border-right: #ccc 1px solid; vertical-align: top;}
.calendar-wr .cal-con table td:first-child{ border-left: #ccc 1px solid; }
.calendar-wr .cal-con table td > div{ padding: 15px; min-height: 110px;}
.calendar-wr .cal-con table td.defalt{ background-color: #f0f0f0;}
.calendar-wr .cal-con table td > div .n{ line-height: 1;}
.calendar-wr .cal-con table td.sun > div .n{ color: #de7878;}
.calendar-wr .cal-con table td.sat > div .n{ color: #7878c5;}
.calendar-wr .cal-con table td > div p{ font-size: 14px; line-height: 1;}
.calendar-wr .cal-con table td.defalt > div .n{ opacity: .5;}
.calendar-wr .cal-con table td.defalt > div p{ }
.calendar-wr .cal-con table td > div p .itm{ display: block;}
.calendar-wr .cal-con table td > div p .itm i{ width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: .2rem;}
.calendar-wr .cal-con table td > div p .blue i{ background-color: #3190c5; }
.calendar-wr .cal-con table td > div p .orange i{ background-color: #f1840e; }
.calendar-wr .cal-con table td > div p .red i{ background-color: #ed1c24; }

.reserve-sel::after{ content:''; display: block; clear: both; }
.reserve-sel + .reserve-sel{ margin-top: 10px;}
.reserve-sel span{ float: left;}
.reserve-sel .select{ float: right; width: 140px;}
.reserve-sel b{ float: right; width: 140px; text-align: right;}

.privacy-bx{ border: #a0a0a0 1px solid; padding: 20px 30px; margin-top: 20px;}
.privacy-bx .tit-tx{ font-size: 18px; color: #cc0000; margin-bottom: 15px;}
.privacy-bx .tit-tx.gray{ color: #222;}

.pass-bx{ border-top:#000 2px solid; border-bottom: #e7e7e7 1px solid; padding: 40px; background: url(../images/bg_patten2.png);}
.pass-bx .tx01{ text-align: center; color: #333; font-weight: 500;}
.pass-bx .inp-bx{ max-width: 740px; margin: 30px auto 0; position: relative; padding: 0 0 0 90px; }
.pass-bx .inp-bx span{ position: absolute; top: 0; left: 0; display: inline-block; line-height: 50px; left: 0; color: #333;}
.pass-bx .inp-bx .inp{ height: 50px; line-height: 50px;}
.pass-bx .inp-bx .pass{ position: absolute; top: 0; width: 50px; height: 50px; right: 0; display: block; background: url(../images/ic_pass.png) 50% 50% no-repeat;}

@media screen and (min-width:641px) and (max-width:1024px){ 
    .about01-wr .bx01{ padding: 0 0 0 34%;}
    .about01-wr .bx01 .thumb{ width: 30%;}    
    .about01-wr::before{ display: none;}
    
    .about02-wr{ margin: 0 -2rem -5rem; padding: 0 2rem 10rem; background-size: 100% auto;}
    .purpose-bx > li{ width: 310px;}
    .purpose-bx > li i{ height: 200px; padding-top: 30px;}
    .purpose-bx > li .desc div .br{ display: none;}
    
    .thumb-list{ margin-left: -2%;}
    .thumb-list .item{ width: 48%; margin-left: 2%;}
    
    .reserve-view .hd{ padding: 1rem 0;}
    .reserve-view .hd .blt{ position: relative; margin: 0; top: auto; left: auto; }
    .reserve-view .hd .subject{ font-size: 1.8rem; margin: .5rem 0;}
    .reserve-view .hd .right{ top: 1rem; right: 0; margin: 0;}
    .reserve-view .hd .right a{ width: 3rem; height: 3rem; background-size: 100% auto;}
    .reserve-view .hd .right a + a{ margin-left: 1rem;}
    .reserve-view .bd{ margin-top: 2rem; padding: 1rem;}
    .reserve-view .bd .dv-l{ float: none; width: 100%;}
    .reserve-view .bd .dv-r{ margin: 2rem 0 0 0; padding: 0; float: none; width: 100%;}
    .reserve-view .bd .dv-r ul > li{ padding: .5rem 1rem;}
    .reserve-view .bd .dv-r ul > li .t-tx{ width: 6rem;}
    .reserve-view .bd .dv-r .reserve-desc{ margin-top: 2rem;}
    .reserve-view .bd .dv-r .btn-box.r{ text-align: center !important; margin-top: 2rem; display: flex;}
    .reserve-view .bd .dv-r .btn-box .btn{ flex: 1; padding: 0;}
    
}

@media screen and (max-width:640px){
    .about01-wr{ padding: 0;}
    .about01-wr .bx01{ padding: 0;}
    .about01-wr .bx01 .thumb{ position: relative; width: 100%; top: auto; left: auto;}
    .about01-wr .bx01 .desc{ margin-top: 2rem;}
    .about01-wr .bx01 .desc .br{ display: none;}   
    .about01-wr::before{ display: none;}
    
    .about02-wr{ margin: 0 -2rem -5rem; padding: 0 2rem 10rem; background-size: 100% auto;}
    .purpose-bx > li{ display: block; width: 100%; margin: 0; height: auto;}
    .purpose-bx > li + li{ margin-top: 2rem;}
    .purpose-bx > li i{ padding: 3rem 0; height: auto;}
    .purpose-bx > li i img{ width: 8rem;}
    .purpose-bx > li .desc{ padding: 1rem 2rem;}
    .purpose-bx > li .desc p{ font-size: 2rem;}
    .purpose-bx > li .desc div{ font-size: 1.3rem;}
    
    .map-bx{ margin-top: 3rem;}
    .map-bx .map{ height: 30rem;}
    
    .tbl-reserve tbody th{ padding: 1rem .4rem;}
    .tbl-reserve tbody td{ padding: 1rem;}
    .tbl-reserve .select, 
    .tbl-reserve .inp{ height: 3.4rem; line-height: 3.4rem;}
    .tbl-reserve .sel01{ min-width: 100%;}
    .tbl-reserve .sel02{ min-width: 100%;}
    .tbl-reserve .sel01 + .sel01{ margin-top: .4rem;}
    .tbl-reserve .reserve-w1{ width: 10rem;}
    .tbl-reserve .data-sch{ display: block;}
    .tbl-reserve .data-sch .select{ float: left; margin-bottom: .4rem;}
    .tbl-reserve .data-sch .inp{ float: left; width: calc(100% - 4rem); margin: 0;}
    .tbl-reserve .data-sch .sch{ height: 3.4rem; width: 4rem; float: right;}
    
    .reserve-desc{ margin: 2rem 0 3rem; font-size: 1.3rem;}
    
    .thumb-list{ margin: -2rem 0 0 0;}
    .thumb-list .item{ width: 100%; margin: 2rem 0 0 0; min-height: 225px;}
    .thumb-list .item .thumb{ padding: 1rem;}
    .thumb-list .item .desc{ /*margin: 1rem 0 0 0; padding: 0 1em;*/ height: 13.5rem;}
    .thumb-list .item .desc .subject{ font-size: 1.6rem; height: 4rem; padding: 1.2rem 2rem;}
    .thumb-list .item .desc .name{ margin-top: 1.5rem; font-size: 1.3rem; padding: 0 2rem;}
    .thumb-list .item .desc .text {margin-top: 1rem; padding: 0 4rem;}
	.thumb-list .item .desc .text a::before{content: ''; display: block; width: 5px; height: 5px; background-color: #818284; position: absolute; left: 20px; margin-top: .9rem; border-radius: 50%;}

	.thumb-list .item .desc .text_warp {min-height: 110px;}

	.thumb-list .item .desc .text_l {padding: 0 0 0 4rem; width: 100%; float: none;}
	.thumb-list .item .desc .text_l a {display: block;}
	.thumb-list .item .desc .text_l a::before{content: ''; display: block; width: 5px; height: 5px; background-color: #818284; position: absolute; left: 20px; margin-top: .9rem; border-radius: 50%;}

	.thumb-list .item .desc .text_r {padding: 0 0 0 4rem; width: 100%; float: right;}
	.thumb-list .item .desc .text_r a {display: block;}
	.thumb-list .item .desc .text_r a::before{content: ''; display: block; width: 5px; height: 5px; background-color: #818284; position: absolute; left:20px; margin-top: .9rem; border-radius: 50%;}

	.thumb-list .item .bottom .bt {height: 2.5rem; line-height: 2.4rem; font-size: 1.1rem; width: auto; padding: 0 2rem;}

    .reserve-view .hd{ padding: 1rem 0;}
    .reserve-view .hd .blt{ position: relative; margin: 0; top: auto; left: auto; }
    .reserve-view .hd .subject{ font-size: 1.8rem; margin: .5rem 0;}
    .reserve-view .hd .right{ top: 1rem; right: 0; margin: 0;}
    .reserve-view .hd .right a{ width: 3rem; height: 3rem; background-size: 100% auto;}
    .reserve-view .hd .right a + a{ margin-left: 1rem;}
    .reserve-view .bd{ margin-top: 2rem; padding: 1rem;}
    .reserve-view .bd .dv-l{ float: none; width: 100%;}
    .reserve-view .bd .dv-r{ margin: 2rem 0 0 0; padding: 0; float: none; width: 100%;}
    .reserve-view .bd .dv-r ul > li{ padding: .5rem 1rem;}
    .reserve-view .bd .dv-r ul > li .t-tx{ width: 6rem;}
    .reserve-view .bd .dv-r .reserve-desc{ margin-top: 2rem;}
    .reserve-view .bd .dv-r .btn-box.r{ text-align: center !important; margin-top: 2rem; display: flex;}
    .reserve-view .bd .dv-r .btn-box .btn{ flex: 1; padding: 0;}
    
    .reserve-con{ margin-top: 3rem;}
    .reserve-con .tc .tit{ font-size: 2rem; margin: 3rem 0 1rem;}
    
	.calendar-wr {margin-top:45px;}
    .calendar-wr .cal-head .cal-tit{ font-size: 2rem;}
    .calendar-wr .cal-con{ margin-top: 2rem;}
    .calendar-wr .cal-con table td > div{ padding: .4rem; min-height: auto;}
    .calendar-wr .cal-con table td > div p{ font-size: 1.2rem;}
    
    .reserve-sel .select{ width: 100%;}
    
    .privacy-bx{ padding: 1rem;}
    .privacy-bx .tit-tx{ font-size: 1.6rem; margin-bottom: 1rem;}
    
    .pass-bx{ padding: 1rem 0;}
    .pass-bx .inp-bx{ width: 100%; padding: 0 0 0 5rem; margin-top: 1rem;}
    .pass-bx .inp-bx span,
    .pass-bx .inp-bx .inp,
    .pass-bx .inp-bx .pass{ height: 3.4rem; line-height: 3.4rem; background-size: 2rem;}
    
    
}

/* main */
#indexWrap .section{ position: relative;}
#indexWrap .section .inner{ max-width: 1400px; margin: 0 auto; padding: 120px 0 120px;}
.section .m-tit{ margin-top: 120px;}
.section .m-tit .tit{ font-size: 40px; font-family: 'Gmarket Sans'; font-weight: 500; color: #222; line-height: 1; }
.section .m-tit .sTit{ font-size: 18px; color: #222; margin-top: 10px;}


.main-visual .swiper-slide{ position: relative;}
.main-visual .desc{  height: 940px; max-width: 1600px; margin: 0 auto; padding: 30vh 0 0 0; color: #fff;}
.main-visual .desc .tx01{ font-size: 55px; font-family:'Gmarket Sans'; font-weight: 500;}
.main-visual .desc .tx02{ font-size: 24px; font-family:'Gmarket Sans';}
.main-visual .desc .bt{ margin-top: 40px; background-color: rgba(255,255,255,.2); border: rgba(255,255,255,.5) 1px solid; display: inline-block; height: 46px; line-height: 46px; padding: 0 45px; color: #fff; text-transform: uppercase; font-size: 15px; border-radius: 23px;}
.main-visual .thumb{ height: 940px; position: absolute; top: 0; left: 0%; right: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; z-index:-1;} 
.main-visual .cotr{ position: absolute; bottom:24vh; left: calc(50% - 700px); width: 1400px; z-index: 3;}
.main-visual .cotr .pag{ position: relative; width: auto; bottom: auto; left: auto; display: inline-block; vertical-align: middle; line-height: 36px; font-size: 17px; font-weight: 600; color: #ffffff8a;}
.main-visual .cotr .pag .swiper-pagination-current{ color: #fff;}
.main-visual .cotr a{ position: relative; display: inline-block; width: 36px; height: 36px; vertical-align: middle;}
.main-visual .cotr .prev::after{ content: ''; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; display: inline-block; width: 14px; height: 14px; transform: rotate(-135deg); border-top: rgba(255,255,255,.4) 1px solid; border-right: rgba(255,255,255,.4) 1px solid;}
.main-visual .cotr .next::after{ content: ''; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; display: inline-block; width: 14px; height: 14px; transform: rotate(45deg); border-top: rgba(255,255,255,.4) 1px solid; border-right: rgba(255,255,255,.4) 1px solid;}
.main-visual .cotr .play{ background-color: rgba(255,255,255,.2); border-radius: 50%; background-repeat: no-repeat; background-position: 50% 50%; background-image: url(../images/ic_play.png); display:none;}
.main-visual .cotr .stop{ background-color: rgba(255,255,255,.2); border-radius: 50%; background-repeat: no-repeat; background-position: 50% 50%; background-image: url(../images/ic_stop.png); display:none;}
.main-visual .cotr .play.on,
.main-visual .cotr .stop.on{ display: inline-block;}

.main-s01bx{ max-width: 1600px; width: 100%; position: absolute; left: calc(50% - 800px); bottom: 60px; z-index: 2; margin:0 auto;}
.main-s01bx::after{ content: ''; display: block; clear: both;}
.main-s01bx .itm{position: relative; float: left; padding: 25px 0 0; border-top: 2px rgba(255, 255, 255, 0.3) solid; width: calc((100% - 150px) / 6); height: auto; transition: all 0.2s ease-in-out;}
.main-s01bx .itm::after{ content: ''; width: 0px; height: 2px; background: #fff; position: absolute; top: -2px; left: 0px;  transition: all 0.5s ease-in-out;}
.main-s01bx .itm + .itm {margin-left:30px;}
.main-s01bx .itm:hover::after{ width: 100%;}


/*
.main-s01bx .itm1::after{content: ''; width: 200px; height: 200px; background: url(../images/ic_m0101.png) 50% 50% no-repeat; position: absolute; top: calc(50% - 100px); right: 0px; 
background-size: cover;transition: all 0.2s ease-in-out; opacity:0%;}
.main-s01bx .itm2::after{ content: ''; width: 50px; height: 50px; background: url(../images/ic_m0102.png) 50% 50% no-repeat; position: absolute; top: calc(50% - 100px); right: 0px; background-size: cover;}
.main-s01bx .itm3::after{ content: ''; width: 50px; height: 50px; background: url(../images/ic_m0103.png) 50% 50% no-repeat; position: absolute; top: calc(50% - 100px); right: 0px; background-size: cover;}
.main-s01bx .itm4::after{ content: ''; width: 50px; height: 50px; background: url(../images/ic_m0104.png) 50% 50% no-repeat; position: absolute; top: calc(50% - 100px); right: 0px; background-size: cover;}

.main-s01bx .itm:hover::after{opacity:100%;}
*/

.main-s01bx .tit{ color: #ddd; font-size: 20px; font-family:'Gmarket Sans'; font-weight: 500; line-height: 1;}
.main-s01bx .bt{ color: rgba(255, 255, 255, 0.5); font-size: 14px; display: block; margin: 5px 0 0 0; width: 70px; letter-spacing: -.02em;}
.main-s01bx .sch-bx{ height: 56px; line-height: 56px; border-bottom: #000 2px solid; padding: 0 56px 0 0; margin: 15px 0 0 0;}
.main-s01bx .sch-bx .inp{ height: 54px; line-height: 54px; vertical-align: middle; border: none;  background-color: transparent; font-size: 22px; padding: 0;}
.main-s01bx .sch-bx .sch{ width: 56px; height: 56px; background-image: url(../images/ic_search.png); background-position: 50%; background-color: transparent;}

.main-s02bx{ position: relative;}
.main-s02bx .prev{ position: absolute; display: block; width: 40px; height: 40px; top: 50%; left: -40px; margin-top: -20px;}
.main-s02bx .next{ position: absolute; display: block; width: 40px; height: 40px; top: 50%; right: -40px; margin-top: -20px;}
.main-s02bx .prev.swiper-button-disabled,
.main-s02bx .next.swiper-button-disabled{ opacity: .3;}
.main-s02bx .prev::after{ content: ''; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; display: inline-block; width: 20px; height: 20px; transform: rotate(-135deg); border-top: #666 2px solid; border-right: #666 2px solid;}
.main-s02bx .next::after{ content: ''; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; display: inline-block; width: 20px; height: 20px; transform: rotate(45deg); border-top: #666 2px solid; border-right: #666 2px solid;}
.main-s02bx .thumb-list{ margin: 40px 0 0 0; overflow: hidden;}
.main-s02bx .item{ float: none; margin: 0;}

.main-s0202bx{ margin: 90px 0 0 0;}
.main-s0202bx::after{ content: ''; display: block; clear: both;}

.main-s0202bx .main-sec02-q{ float: left; width: calc(70% - 40px); height: 350px; display: flex; flex-direction: row;}
.main-s0202bx .main-sec02-q > li{position: relative; background-color: #f0f0f0; width: calc((100% - 40px)/3); height: 100%; border-radius: 30px 10px; display: flex;}
.main-s0202bx .main-sec02-q > li + li{ margin-left: 20px;}
.main-s0202bx .main-sec02-q > li a {padding: 50px 30px; width: 100%;}
.main-s0202bx .main-sec02-q > li i {display: block; width: 150px; height: 100px; margin: 40px auto 0; background-image: url(../images/quick_01.png);}
.main-s0202bx .main-sec02-q > li.two i {background-image: url(../images/quick_02.png);}
.main-s0202bx .main-sec02-q > li.three i {background-image: url(../images/quick_03.png);}

.main-s0202bx .main-sec02-q > li .tit{ color: #222; font-size: 24px; font-weight: 500; font-family: 'Gmarket Sans'; line-height: 1.3;}
.main-s0202bx .main-sec02-q > li .sTit{ color: #364751; margin-top: 5px;}
.main-s0202bx .main-sec02-q > li .bt{ border: rgba(0,0,0,.5) 1px solid; display: inline-block; height: 35px;  line-height: 35px; padding: 0 25px; color: #000; text-transform: uppercase; 
font-size: 13px; border-radius: 23px; position: absolute; right: calc(50% - 57px); bottom: 50px; transition: all 0.2s ease-in-out;}
.main-s0202bx .main-sec02-q > li a:hover .bt {border: #90c31f 1px solid; background-color: #90c31f; color: #fff;}

.main-faq{ float: right; width: 30%; height: 350px;}
.main-faq .left{width: 100%; height: calc(50% - 10px); background: #ccc;}
.main-faq .right{width: 100%; height: calc(50% - 10px); background: #ccc; margin-top:20px;}

#indexWrap .section.sect03 .inner {padding: 30px 0 120px;}
.section.sect03 .inner::after{ content: ''; display: block; clear: both;}
.section.sect03 .inner .m-tit{ margin-top: 0; margin-bottom: 35px;}

.section.sect03 .main-bbs{ position: relative; float: left; width:calc(50% - 40px); margin-right:80px;}
.section.sect03 .main-bbs .bbsBx{border-top: 2px #000 solid; border-bottom: 1px #e6e6e6 solid;}
.section.sect03 .main-bbs .tc .itm{height: 100px; padding: 15px 0; border-top: #e6e6e6 1px solid; margin-top: 0 !important;}
.section.sect03 .main-bbs .tc .itm:nth-child(4n+1){ border-top:none;}
.section.sect03 .main-bbs .tc .itm a{ display: block; position: relative; padding-right: 80px;}
.section.sect03 .main-bbs .tc .itm a strong{ display: block; color: #030303; font-weight: 500; font-size: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.section.sect03 .main-bbs .tc .itm a .date{ display: inline-block; position: absolute; top: calc(50% - 13.5px); right: 0;font-size: 15px; color: #999;}
.section.sect03 .main-bbs .tc .itm a .txt{ display: block; font-size: 15px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.section.sect03 .main-edu{ position: relative; float: left; width: calc(50% - 40px);}
.section.sect03 .main-edu .slide-bx { overflow: hidden;}
.section.sect03 .main-edu .pag{ position: absolute; display: inline-block; padding: 0 20px; top: 15px; bottom: auto; left: auto; right: 0; z-index: 3;}
.section.sect03 .main-edu .pag .swiper-pagination-bullet{ margin: 0 4px; opacity: 1; background: #ccc;}
.section.sect03 .main-edu .pag .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: #90c31f; border-color:#90c31f;}
.section.sect03 .main-edu .swiper-slide { display: flex; flex-direction: column; justify-content: center; padding: 50px 40px; height: 300px;
    border-radius: 30px 5px 30px; overflow: hidden; background: #fff; border: 1px #ddd solid;}
.section.sect03 .main-edu .swiper-slide .title_wrap{ padding-right: 80px; position: relative;}
.section.sect03 .main-edu .swiper-slide .tit {font-size: 20px; color: #000; font-weight: 500; word-break: keep-all; overflow: hidden; white-space: normal; word-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.section.sect03 .main-edu .swiper-slide .date{position: absolute; top: calc(50% - 15px); right: 0; background: #90c31f; color: #fff; padding: 2px 12px; border-radius: 50px; font-size: 15px; 
font-weight: 300;}
.section.sect03 .main-edu .swiper-slide .info {color: #666; font-size: 16px; font-weight: 300; padding-top: 20px; margin-top: 25px; border-top: 1px #ddd solid; }
.section.sect03 .main-edu .swiper-slide .info li {position: relative; padding-left: 70px;}
.section.sect03 .main-edu .swiper-slide .info li b {position: absolute; left: 0px; color: #333; font-weight: 500;}


.main-mn{ position: absolute; top:50%; left: 68px; margin-top: -60px; z-index: 2;}
.main-mn > li > a{ display: block; width: 12px; height: 12px; border-radius: 6px;     border: #fff 2px solid;}
.main-mn > li + li{ margin-top: 20px;}
.main-mn > li.active > a{ height: 48px; background-color: #fff;}

.foot-link{position:absolute; top:calc(50% - 20px); right:40px; width:180px; height:40px; padding:0; z-index:6;}
.foot-link .bt{ position:relative; display:block; line-height:40px; height:40px; padding:0px;  color:#fff; border-top: 1px #fff solid; border-bottom: 1px #fff solid;}
.foot-link .bt::after{ content:""; position:absolute; top:50%; right:20px; margin-top:-2px; display:block; width:8px; height:8px; border-top:#fff 1px solid; border-right:#fff 1px solid; transform: rotate(-45deg);}
.foot-link > ul{ position:absolute; background-color:#333; bottom:40px; left:0; width:100%; padding:10px 0; display:none;}
.foot-link > ul > li a{ display:block; padding:5px 20px; color:#fff;}
.foot-link > ul > li a:hober{ text-decoration:underline;}

.footer-wrap .top{ position:absolute; top:calc(50% - 20px); right:-40px; width:40px; height:40px; display:block; background: #8e8e8e url(../images/bt_top.png) 50% 50% no-repeat; 
border-radius: 50%; text-indent:-9999px;}

@media screen and (max-width:1600px){  
	.main-mn { left: 20px;}
	.main-visual .desc {padding: 30vh 0 0px 60px;}
}

@media screen and (max-width:1500px){  
}

@media screen and (max-width:1400px){  
	.main-visual .cotr { left: 250px;}
	.main-s01bx {left: 0; border-radius: 30px 30px 0 0;}
}

@media screen and (max-width:1200px){  
	.main-s0202bx .main-sec02-q > li a {padding: 0 30px;}
	.main-s0202bx .main-sec02-q > li .bt {right: calc(50% - 48px); bottom: 3rem;}
}

@media screen and (max-width:769px){ 
    .main-s0202bx .main-sec02-q{flex-direction: column; height: auto;}
    .main-s0202bx .main-sec02-q > li{width: 100%; height: 160px;}
    .main-s0202bx .main-sec02-q > li + li{margin-left: 0px;}
    .main-s0202bx .main-sec02-q > li .bt{right: auto; bottom: auto; position:relative;}
    .main-s0202bx .main-sec02-q > li i{display: none;}
    .main-s0202bx .main-sec02-q > li a{height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
}

@media screen and (min-width:641px) and (max-width:1024px){    
    .main-mn{ display: none;}
    
    .main-visual{ position: relative;}
    .main-visual .thumb{ height: 35rem; width: 100%; width: 100%; top: auto; left: auto; right: auto;}
    .main-visual .desc{ padding: 12rem 2.5rem 0; height: 35rem; }
    .main-visual .desc .tx01{ font-size: 2.8rem;}
    .main-visual .desc .tx02{ font-size: 1.2rem;}
    .main-visual .desc .bt{ height: 2rem; line-height: 2rem; font-size: 1.1rem; width: auto; padding: 0 2rem; margin-top: 1.2rem;}
    .main-visual .cotr{ width: 100%; right: 0; bottom: 5.5rem; left:0; margin: 0; text-align: left; padding-left: 12.5rem;}
    .main-visual .cotr a{ width: 2rem; height: 2rem;}
    .main-visual .cotr .prev::after,
    .main-visual .cotr .next::after{ width: 1rem; height: 1rem; margin-top: -.5rem;}
    .main-visual .cotr .pag{ line-height: 2rem; font-size: 1.2rem;}
    
    .main-s01bx{ position: relative; bottom: auto; left: auto; margin: 0; width: 100%; height: auto; padding: 1.5rem 2rem;}
    .main-s01bx .itm{ width: calc((100% - 4%)/3); border: #bebebe 1px solid; border-radius: .5rem; padding: 1.5rem; margin-bottom:2%;}
	.main-s01bx .itm + .itm {margin-left:2%;}
	.main-s01bx .itm:nth-child(3n + 1) {margin-left: 0%;}
	.main-s01bx .itm::after {display:none;}
    .main-s01bx .tit{ font-size: 1.2rem; color: #333;}
    .main-s01bx .bt{font-size: 0.9rem; margin-top: 0.5rem; width: 100%; color: #999;}
    
    .section .m-tit .tit{ font-size: 1.6rem;}
    .section .m-tit .sTit{ font-size: 1.1rem; margin-top: .4rem;}
        
    #indexWrap .section .inner{ padding: 3rem 2rem 0; }
    .main-s02bx{ padding: 0 3rem;}
    .thumb-list .item .thumb img{ height: 160px;}
    .main-s02bx .thumb-list{ margin-top: 2rem;}
    .main-s02bx .prev{ left: 0; width: 3rem; height: 3rem; margin-top: -1.5rem;}
    .main-s02bx .next{ right: 0; width: 3rem; height: 3rem; margin-top: -1.5rem;}
    .main-s02bx .prev::after,
    .main-s02bx .next::after{ width: 1.4rem; height: 1.4rem; margin-left: 0; margin-right: 0;}
    .main-s02bx .prev::after{ left: 0;}
    .main-s02bx .next::after{ right: 0;}
    
    .main-s0202bx{ margin-top: 1rem;}
    
    .main-s0202bx .main-sec02-q{ width: 100%; float: none; margin-top: 1.5rem;}
    .main-s0202bx .main-sec02-q > li{ padding: 1.3rem 2.2rem;}
    .main-s0202bx .main-sec02-q > li + li{ margin-top: 1rem;}
    .main-s0202bx .main-sec02-q > li a {padding: 0px;}
    .main-s0202bx .main-sec02-q > li .tit{ font-size: 1.3rem;}
    .main-s0202bx .main-sec02-q > li .sTit{ font-size: 1rem; margin-top: .5rem;}
    .main-s0202bx .main-sec02-q > li .bt{ font-size: 0.8rem;}


    .section.sect03{ margin-top: 3rem; padding-bottom: 5rem;}

    .section.sect03 .main-edu{ width: 100%; float: none; margin-top: 50px;}
    .section.sect03 .main-edu .swiper-slide{ height: 400px;}
    .section.sect03 .main-edu .name strong{ font-size: 1.4rem;}
    .section.sect03 .main-edu .name p{ font-size: 1.3rem;}
    .section.sect03 .main-edu .name i{ font-size: 1.1rem; height: 1.8rem; line-height: 1.8rem; padding: 0 1rem;}
    .section.sect03 .main-edu .desc p{ width: 10rem;}
    .section.sect03 .main-edu .desc ul > li{ padding-left: 6rem; line-height: 1.4rem;}
    .section.sect03 .main-edu .desc ul > li + li{ margin-top: .5rem;}
    .section.sect03 .main-edu .pag{ top: 2.5rem;}

    .section.sect03 .inner .main-bbs{ width: 100%; float: none; margin-left: 0px; margin-top:3rem;}
    .section.sect03 .inner .main-bbs .tab{ position: relative; top: 0; margin-bottom: 1rem;}
    .section.sect03 .inner .main-bbs .tc{ padding: .5rem 1.5rem;}
    .section.sect03 .inner .main-bbs .tc .itm{ padding: 1rem 0;}
    .section.sect03 .inner .main-bbs .tc .itm a strong{ font-size: 1.1rem;}
    .section.sect03 .inner .main-bbs .tc .itm a .date{ font-size: 1rem;}
    .section.sect03 .inner .main-bbs .tc .itm a .txt{ font-size: 1rem;}
    .section.sect03 .inner .main-bbs .tab > li{ font-size: 1.2rem;}
    .section.sect03 .inner .main-bbs .bbsBx{ height: auto;}
    .section.sect03 .inner .main-bbs .pag{ padding-right: 0;}
    
    .main-faq{ width: 100%; height: 100%; float: none; margin-top: 2rem;}
    .main-faq .tit{ font-size: 1.4rem; margin-bottom: 1rem;}
    .main-faq .desc .tbx{ height: 16rem; padding-top: 4rem;}
    .main-faq .desc .tbx strong{ font-size: 1.4rem;}
    .main-faq .desc .tbx span{ font-size: 1rem; margin-bottom: 1rem;}
    .main-faq .desc .tbx .bt{ font-size:0.8rem;}
    .main-faq .desc{ background-size: cover;}

	.foot-link { position: relative; top: auto; right: calc(-50% + 90px); margin-top: 2rem; text-align: left;}
	.footer-wrap .top {top: auto; bottom: 0; right: calc(50% - 150px);}
}
@media screen and (max-width:767px){
	.main-s01bx .itm{ width: calc((100% - 2%)/2); border: #bebebe 1px solid; border-radius: .5rem; padding: 1.5rem; margin-bottom:2%;}
	.main-s01bx .itm:nth-child(3n + 1) {margin-left: 2%;}
	.main-s01bx .itm:nth-child(odd) {margin-left: 0%;}
}


@media screen and (max-width:640px){
    .main-mn{ display: none;}
    
    .main-visual{ position: relative;}
    .main-visual .thumb{ height: 35rem; width: 100%; }
    .main-visual .desc{ padding: 12rem 2.5rem; height: 35rem; }
    .main-visual .desc .tx01{ font-size: 2.8rem;}
    .main-visual .desc .tx02{ font-size: 1.2rem;}
    .main-visual .desc .bt{ height: 2.5rem; line-height: 2.4rem; font-size: 1.1rem; width: auto; padding: 0 2rem; margin-top: 1.2rem;}
    .main-visual .cotr{ width: 50%; right: 0; bottom: 2.5rem; left:left; margin: 0; text-align: right; padding-right: 2.5rem;}
    .main-visual .cotr a{ width: 2rem; height: 2rem;}
    .main-visual .cotr .prev::after,
    .main-visual .cotr .next::after{ width: 1rem; height: 1rem; margin-top: -.5rem;}
    .main-visual .cotr .pag{ line-height: 2rem; font-size: 1.2rem;}
    
    .main-s01bx{ position: relative; bottom: auto; left: auto; margin: 0; width: 100%; height: auto; padding: 2.5rem 2rem 0; background-color: #fafafa;}
    .main-s01bx .itm{ width: 49%; border: #bebebe 1px solid; border-radius: .5rem; padding: 1.5rem; margin-top: 0.5rem;}
	.main-s01bx .itm + .itm {margin-left: 2%;}
	.main-s01bx .itm:nth-child(odd) {margin-left: 0%;}
	.main-s01bx .itm:after{display:none;}

    .main-s01bx .tit{ font-size: 1.4rem; color: #333;}
    .main-s01bx .bt{font-size: 0.9rem; margin-top: 0.5rem; width: 100%; }
    .main-s01bx .bt{ font-size: 1.2rem; margin-top: 1rem;color: #999;}
    .main-s01bx .itm1::after, .main-s01bx .itm2::after, .main-s01bx .itm3::after, .main-s01bx .itm4::after{ width: 3rem; height: 3rem; top:50%; right: 1rem; margin-top: -1.5rem; background-size: cover;}
    
	.section .m-tit {margin-top: 6rem;}
    .section .m-tit .tit{ font-size: 2rem;}
    .section .m-tit .sTit{ font-size: 1.1rem; margin-top: .4rem;}
        
    #indexWrap .section .inner{ padding: 3rem 2rem 0; }
    .main-s02bx{ padding: 0 3rem;}
	.thumb-list .item .desc {height: 250px;}
    .main-s02bx .thumb-list{ margin-top: 2rem;}
	.thumb-list .item .bottom .tit { font-size: 16px;}
	.thumb-list .item .bottom .date { font-size: 14px;}
    .main-s02bx .prev{ left: 0; width: 3rem; height: 3rem; margin-top: -1.5rem;}
    .main-s02bx .next{ right: 0; width: 3rem; height: 3rem; margin-top: -1.5rem;}
    .main-s02bx .prev::after,
    .main-s02bx .next::after{ width: 1.4rem; height: 1.4rem; margin-left: 0; margin-right: 0;}
    .main-s02bx .prev::after{ left: 0;}
    .main-s02bx .next::after{ right: 0;}

    
    .main-s0202bx{ margin-top: 6rem;}

    
    .main-s0202bx .main-sec02-q{ width: 100%;}
    .main-s0202bx .main-sec02-q > li{ padding: 3.5rem 2rem; height: 120px;}
	.main-s0202bx .main-sec02-q > li a {padding: 0px;}
    .main-s0202bx .main-sec02-q > li .tit{ font-size: 1.6rem;}
    .main-s0202bx .main-sec02-q > li .sTit{ font-size: 1.1rem; margin-top: .5rem;}
    .main-s0202bx .main-sec02-q > li .bt{ height: 2.5rem; line-height: 2.4rem; font-size: 1.1rem; width: auto; padding: 0 2rem;}
    .main-s0202bx .main-sec02-q > li + li{margin-top: 20px;}
	
	.main-faq a img {margin: 20px auto 0; display: block;}
	.main-faq .left{background: #fff; height: auto;}
	.main-faq .right {background: #90c31f;}

    .section.sect03{ margin-top: 3rem; padding-bottom: 5rem;}
	#indexWrap .section.sect03 .inner {padding: 3rem 2rem 6rem;}
    .section.sect03 .main-edu{ width: 100%; float: none;  margin-top: 3rem;}
    .section.sect03 .main-edu .swiper-slide{height: 250px;}
	.section.sect03 .main-edu .swiper-slide .tit {font-size: 1.6rem; line-height: 1.3;}
    .section.sect03 .main-edu .name strong{ font-size: 1.4rem; height: auto;}
    .section.sect03 .main-edu .name p{ font-size: 1.3rem;}
    .section.sect03 .main-edu .name i{ font-size: 1.1rem; height: 1.8rem; line-height: 1.8rem; padding: 0 1rem;}
    .section.sect03 .main-edu .desc p{ width: 12rem; height: 9rem; margin-right: 1rem;}
	.section.sect03 .main-edu .desc ul {margin-left: 20px;}
    .section.sect03 .main-edu .desc ul > li{ padding-left: 1rem; line-height: 1.4rem;}
    .section.sect03 .main-edu .desc ul > li + li{ margin-top: .5rem;}
    .section.sect03 .main-edu .pag{ top: 2.5rem;}

	.section.sect03 .inner .main-bbs{ width: 100%; float: none; margin-left: 0px;}
    .section.sect03 .inner .main-bbs .tab{position: relative; top: auto; margin-bottom: 1rem;}
    .section.sect03 .inner .main-bbs .tc{ padding: .5rem 0rem;}
    .section.sect03 .inner .main-bbs .tc .itm{ padding: 1rem 0; height: auto;}
    .section.sect03 .inner .main-bbs .tc .itm a strong{ font-size: 1.6rem;}
    .section.sect03 .inner .main-bbs .tc .itm a .date{ font-size: 1.3rem;}
    .section.sect03 .inner .main-bbs .tc .itm a .txt{ font-size: 1.3rem;}
    .section.sect03 .inner .main-bbs .tab > li{ font-size: 1.4rem;}
	.section.sect03 .inner .main-bbs .tab > li+li{ margin-left: 10px; padding-left: 10px;}
    .section.sect03 .inner .main-bbs .bbsBx{ height: auto;}
    .section.sect03 .inner .main-bbs .pag{ padding-right: 0;}
    
    .main-faq{ width: 100%; height:100%; margin-top: 3rem;}
    .main-faq .tit{ font-size: 1.4rem; margin-bottom: 1rem;}
    .main-faq .desc .tbx{ height: 24rem; }
    .main-faq .desc .tbx strong{ font-size: 2rem;}
    .main-faq .desc .tbx span{ font-size: 1.2rem; margin-bottom: 1rem;}
    .main-faq .desc .tbx .bt{ /* font-size: 1.1rem;*/  height: 2.5rem; line-height: 2.4rem; font-size: 1.1rem; width: auto; padding: 0 2rem; margin-top: 1.2rem;}
    .main-faq .desc{ background-size: cover;}

	.foot-link { position: relative; top: auto; right: calc(-50% + 90px); margin-top: 2rem; text-align: left;}
	.footer-wrap .top {top: auto; bottom: 0; right: calc(50% - 150px);}

}

/* 0609 */
.hd-schbx{ background-color: #fff; position: absolute; left: 0; width: 100%; top: 127px; padding: 50px 0 60px; border-top: #d0cfd0 1px solid; border-bottom: #d0cfd0 1px solid; display: none;}
.hd-schbx .schInbx{ max-width: 1490px; margin: 0 auto; }
.hd-schbx .tit{ color: #31476f; font-size: 35px; text-align: center;}
.hd-schbx .inp-bx{position: relative; max-width: 670px; margin: 0 auto; padding-right: 70px; border-bottom: #000 2px solid;}
.hd-schbx .inp-bx .inp{ display: block; height: 70px; line-height: 70px; width: 100%; border: none; background-color: transparent;}
.hd-schbx .inp-bx .sch{ position: absolute; display: block; top: 0; right: 0; width: 70px; height: 70px; background: url(../images/ic_search.png) 50% 50% no-repeat; text-indent: -9999px;}

@media screen and (min-width:641px) and (max-width:1024px){  
    #header .inner .bt-sch.active{ background-size: 1.8rem;}  
    .hd-schbx{ top: 5rem; padding: 1rem 2rem 2rem 2rem;}
    .hd-schbx .schInbx{ padding: 0;}
}

@media screen and (max-width:640px){
    #header .inner .bt-sch.active{ background-size: 1.8rem;}
    .hd-schbx{ top: 5rem; padding: 1rem 2rem 2rem 2rem;}
    .hd-schbx .schInbx{ padding: 0;}
    .hd-schbx .tit{ font-size: 1.8rem;}
    .hd-schbx .inp-bx{ margin-top: 1rem; padding-right: 5rem;}
    .hd-schbx .inp-bx .inp{ height: 5rem; line-height: 5rem;}
    .hd-schbx .inp-bx .sch{ width: 5rem; height: 5rem; background-size: 2rem;}
}