@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@media screen and (max-width:320px) {
     body {zoom:50%;}
 }
 @media screen and (min-width:321px) and (max-width:359px) {
     body {zoom:50%;}
 }
 @media screen and (min-width:360px) and (max-width:479px) {
     body {zoom:56.25%;}
 }
 @media screen and (min-width:480px) and (max-width:639px) {
     body {zoom:75%;}
 }
  @media all and (min-width: 640px) {
     body {zoom:100%; margin:0 auto;}
 }
 
*{margin:0; padding:0;}
img {border:0;}
a {border:0; text-decoration:none; color:inherit; font-family: 'Nanum Gothic', sans-serif;}
ul, li {list-style:none;}
body {font-family:'Malgun Gothic';/*font-family: 'Nanum Gothic', sans-serif;*/width:100%;max-width:640px; background:none; }
#wrap {width:100%; text-align:center; margin:0 auto;display:block;}
fieldset{margin:0; padding:0; border:none;}
legend{ position:absolute; left:-9999%;}
label:focus{outline: 1px dotted #0066FF; *border: 1px dotted #0066FF;}
.radio.focus{outline: 1px dotted #0066FF; *border: 1px dotted #0066FF;}
.gm ul li a:focus{outline: 1px dotted #0066FF; *border: 1px dotted #0066FF;}
input,textarea,select,button{border:1px solid #D8C3C2;color:#594F40; font-size:12px}
input,select {vertical-align:middle; margin:0; padding:0;}

.clearfix:after {content:""; clear:both; display:block;}
.float {float:left;}
.float_r {float:right;}



/* »ó´Ü */
#header {width:100%; position:relative; box-sizing:border-box;}
#header .wrap { height:120px; width:600px; margin:0 auto;  }
#header .wrap a.logo { width:283px; margin:0 auto; height:51px; display:inline-block;   }
#header .wrap a.logo img { margin-top:27px; }
#header .wrap #menu { float:left; margin-top:0px;  }
#header .wrap #tel {float:right; margin-top:27px;}
#header .wrap:after {content:""; clear:both; display:block;}
#header .wrap #menu a { display:block; height:53px; }
#header .wrap #menu .menu_btn {margin-top:27px;}


#showRightPush {
 width:61px; height:62px;
 background:url('/base/img/m/images/btn_menu.png') no-repeat;
 border:none; 
 cursor:pointer;
 text-indent: -1000%;
 }
 
#cbp-spmenu-s2 {width:250px; font-family:"NanumGothic", sans-serif; font-weight:400; background:#eee; overflow:scroll;  }
#cbp-spmenu-s2 .gnb_home {width:100%; height:100px; background:/*#274367*/#3e4a61; font-size:28px; text-align:center; line-height:100px;}
#cbp-spmenu-s2 .gnb_home a { color:#fff; }
#cbp-spmenu-s2 li {font-size:1.2em; border-bottom: 1px solid #ddd;}
#cbp-spmenu-s2 li a {padding:0.875em; cursor:pointer; }
#cbp-spmenu-s2 li a.none { padding:0 !important; }
#cbp-spmenu-s2 li .s6 { padding:0 !important; }
#cbp-spmenu-s2 dd > a {color:#666; }
.topnav {padding:0.8em; color:#4a4a4a; cursor:pointer; }
.topnav  span { font-size:12px; ; }
.subnav {display:none; background:#fff; width:100%; /*border-left:1px solid #ddd;*/  }
.subnav dd { border-bottom:1px solid #ddd; }


/* ----------------------------------------------------------------------------
        
¸ÞÀÎ
        
-----------------------------------------------------------------------------*/  
#main { width:100%;}
/* .sl_txt { position:absolute; z-index:10; top:30px; left:50%; margin-left:-271px; } */
#main .flexslider {height:413px;}

#main #article {width:100%; clear:both;}
#main #article ul li {float:left;}
#main #article ul li a img {display:block;} 
#main #article ul:after {content:""; clear:both; display:block;}
#main #banner a img {display:block;}

/* ÇÏ´Ü */

#footer { clear:both;  width:100%; position:relative; }
#footer .cs {border-top:1px solid #444;}
#footer #icon { width:100%; }
#footer #icon ul li {float:left;}
#footer #icon ul li a {display:block;}
#footer #icon ul:after {content:""; clear:both; display:block;}
#footer #admin {
    background: #2e2b2a;
    width: 100%;
}
#footer #admin ul li { float:left; width:50%;font-size:14px; text-align:center;}
#footer #admin ul li a { display:block; padding:20px 0 15px; color:#fff; font-weight:bold; font-size:20px;}
#footer .copy {padding:10px 20px; line-height:22px; color:#fff; font-size:13px; text-align:center;  background:#2e2b2a;  }


/* ----------------------------------------------------------------------------
        
¼­ºê
        
-----------------------------------------------------------------------------*/  
     
#sub  { wdith:100%; position:relative; }
#sub .sub_common { background:#57afd6; height:71px; width:100%;  }
#sub .sub_common p {line-height:71px; color:#fff; font-size:26px; font-weight:600; font-family:'Nanum Gothic', sans-serif;}
#sub #sub_tit { width:100%; background:url('../images/sub_tit.png') no-repeat 50% 50%; height:120px; }
#sub #sub_tit h2 { padding-top:30px; padding-bottom:10px; color:#274367; font-size:2em; letter-spacing:-0.5px }
#sub #sub_tit span { letter-spacing:-1px; color:#8d8d8d; font-size:16px;  }
#sub-menu {  background:#fff; height:62px; }
#sub-menu ul { width: 100%; margin:0 auto; letter-spacing:-0.1em; } 
#sub-menu ul li {     float:left;   height:62px; line-height:62px;  border:1px solid #e0e0e0; box-sizing:border-box; border-top:none; }
#sub-menu ul li:last-child { background:none; border-left:none;}
#sub-menu ul li a {  display:inline-block; width:100%;text-align:center;  color: #505050; letter-spacing:-2px; font-size:20px; height:61px; box-sizing:border-box;}
#sub-menu ul li a:hover, #sub-menu li a.on  {background:#fff; color:#57afd6; border-bottom:3px solid #57afd6; box-sizing:border-box;}
#sub-menu ul.m1 li { width:100%; }
#sub-menu ul.m2 li { width:50%; }
#sub-menu ul.m3 li { width:33.3%; }
#sub-menu ul.m4 li { width:25%; }
#sub-menu ul.m5 li { width:20%; }
#sub-menu ul.m6 li { width:16.6%; }

#sub #content { width:600px; margin:0 auto; padding-bottom:40px; clear:both; margin-top:50px; }
#sub #content img.per100 {width:100%;}
#sub #content h2 { text-align:left; padding-top:40px; width:620px; margin:0 auto 26px auto;  padding-bottom:20px; /*border-bottom:1px dashed #ddd;*/ font-size:2em; letter-spacing:-1px;  }
#sub #content h2 span { float:right; font-size:16px; font-weight:normal; line-height:58px;  }


/*¼­ºê Å×À̺í*/
#sub #content2 {width:620px;}
/* #sub #content .table {width:620px; border-top:3px #0091d2 solid;font-size:17px;} */
#sub #content .table th, #sub #content .table td {border-bottom:1px #e0e0e0 solid;}
#sub #content .table th {color:#0091d2; text-align:justify;}
#sub #content .table td {text-align:left;}
#sub #content .soon {width:100%;}

#sub #content2 .table_gr {margin-bottom:50px;}
#sub #content2 .table {border-top:3px #118dea solid;font-size:13px;}
#sub #content2 .table th,#sub #content2 .table td {border-bottom:1px #e0e0e0 solid;padding:13px 6px; line-height:1.3;}
#sub #content2 .table th {color:#666; text-align:justify;}
#sub #content2 .table td.td1 {font-weight:bold; color:#118dea;}
#sub #content2 .table td.td2 {font-weight:bold; text-align:center; line-height:1.7;}
#sub #content2 .table1 {border-bottom:1px #0091d2 solid;}

#sub #content2 .table2 {text-align:center;}
#sub #content2 .table2 th {text-align:center;  color:#118dea;}
#sub #content2 .table2 td {line-height:1.4;}
#sub #content2 .table2 td:nth-child(4) {text-align:justify;}
#sub #content2 .table2 td:nth-child(1) {padding-left:0;}
#sub #content2 .table2 td:nth-child(5) {padding-right:0;}

#sub #content .table-sm .table {width:600px; margin-bottom:30px; border-top: 3px #0091d2 solid;}
#sub #content .table-sm  th {text-align:center; padding:7px 0;}
#sub #content .table-sm .al-center {text-align:center;}
#sub #content .table-sm td {
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    padding: 5px 0;
}


/* ¼­ºêtab */
#sub #content ul.tabs {width:100%; height:42px; line-height:42px; margin:0 auto;}
#sub #content ul.tabs li {display:inline-block;float:left; text-align:center; font-size:17px; color:#808080;  letter-spacing:-1px; text-transform:uppercase; background:#f5f5f5;border-top:3px #b9b9b9 solid;margin-right:0.1%;}
#sub #content ul.tabs li a {display:block;}
#sub #content ul.tabs li.active, #sub #content ul.tabs li:hover  {border-top:3px #ff8500 solid;color:#303030;}
#sub #content ul.tabs.t2 li {width:49.9%;}
#sub #content ul.tabs.t4 li {width:24.9%;}
#sub #content ul.tabs.t5 li {width:19.9%;}
#sub #content ul.tabs li.last {margin-right:0;}
#sub #content .tab_container {width:100%;display:inline-block; margin-top:50px;}
#sub #content .tab_content {width:100%;display:inline-block; min-height:280px;}

/*¼­ºê tabtab */
#sub #content #content1 {width:600px; margin:10px auto 0;}
#sub #content #content1 ul.tabs1 {width:100%; height:35px; line-height:35px; margin:0 auto;}
#sub #content #content1 ul.tabs1 li {display:inline-block;float:left; text-align:center; font-size:15px; color:#808080;  letter-spacing:-1px; text-transform:uppercase; background:#f5f5f5;border-top:3px #b9b9b9 solid;margin-right:0.1%;}
#sub #content #content1 ul.tabs1 li a {display:block;}
#sub #content #content1 ul.tabs1 li.active, #sub #content #content1 ul.tabs1 li:hover  {border-top:3px #b07b42 solid;color:#303030;}
#sub #content ul.t2 li {width:49.9%;}
#sub #content ul.t3 li {width:33.2%;}
#sub #content ul.t4 li {width:24.9%;}
#sub #content ul.t5 li {width:19.9%;}
#sub #content #content1 .tab_container1 {width:100%;display:inline-block; margin-top:20px;}
#sub #content #content1 .tab_content1 {width:100%;display:inline-block; min-height:280px;}

#sub #content #content1 ul.tabs2 {width:100%; height:35px; line-height:35px; margin:0 auto;}
#sub #content #content1 ul.tabs2 li {display:inline-block;float:left; text-align:center; font-size:15px; color:#808080;  letter-spacing:-1px; text-transform:uppercase; background:#f5f5f5;border-top:3px #b9b9b9 solid;margin-right:0.1%;}
#sub #content #content1 ul.tabs2 li a {display:block;}
#sub #content #content1 ul.tabs2 li.active, #sub #content #content1 ul.tabs2 li:hover  {border-top:3px #b07b42 solid;color:#303030;}
#sub #content #content1 .tab_container2 {width:100%;display:inline-block; margin-top:20px;}
#sub #content #content1 .tab_content2 {width:100%;display:inline-block; min-height:280px;}

.panel {text-align:left;}
.panel h3 {font-size:24px; margin-bottom:8px;}
h3 span {color:#4996cf; text-align:left;}

/*±³À°*/
.panel_txt {margin-bottom:30px; padding-left:10px; text-align:left;}
.panel_txt h3 {font-size:24px;}
.panel_txt h3 span {color:#4996cf;}
.panel_txt ul li {font-size:17px; line-height:1.6;}
.panel_txt ul li ul {text-indent:20px;}
#sub .panel_txt p {font-size:17px; line-height:1.6; float:none; margin:0; padding:0; color:#444;}
div.panel .panel_txt img {display:block; margin:0 auto; padding:0;}

/*±³Àç½Åû*/
.book_info {width:100%;}
#sub #content .book_info p {font-size:17px; line-height:1.6; float:none; margin:0; padding:0; color:#444;}
.book_info ul li {font-size:17px; line-height:1.6;}
.book_info ul li ul {text-indent:20px;}
.book_info h4 {color:#4996cf; font-size:18px; margin-top:20px; margin-bottom:5px; border-top:1px solid #e5e5e5;padding-top:15px;}
.book_thumb {width:258px; margin-right:83px;margin-bottom:30px;}
.book_thumb:nth-child(2n) {margin-right:0px;}
.book_thumb .txt {margin-top:8px; font-weight:bold; line-height:1.5;} 

/* sub5 ±³Àç½Åû */
#sub #content .book {text-align:left; margin-bottom:100px;}
#sub #content .book img {border:1px solid #ddd; display:block; margin:0 auto;}
#sub #content .book h3 {color:#444; font-size:26px; margin-top:32px;}
#sub #content .book p {font-size:18px;}
#sub #content .book p.tit {color:#2a8cd6; margin-top:15px; font-weight:bold;}
#sub #content .btn_apply, #sub #content .btn_back {
    font-size: 20px;
    font-weight:bold;
    display:inline-block;
}
#sub #content .btn_back {margin-right:15px;}
#sub #content .btn_apply a {
    background-color: #f8b059;
    border-radius: 50px;
    color: #fff;
    padding: 20px 80px;

}
#sub #content .btn_back a  {
    background-color: #555;
    border-radius: 50px;
    color: #fff;
    padding: 20px 80px;

}

/* ==========================================

       ¾ÆÄÚµð¾ð-Á¤°ü 
   
=============================================         */
span.date { 
   width: 100%;
    font-size: 13px;
    text-align: right;
    display: inline-block;
    line-height: 1.4;
    color: #888;
    margin-bottom: 10px;
}

#sub #content h2 {text-align:center; margin-bottom:40px; padding-top:50px; font-size:26px; font-family: 'Nanum Gothic', sans-serif;
} 
#sub .accordi2_wrap {border:1px solid #c4c4c4;}
button.accordion2 {
    background-color: #f9f9f9;
    border:1px solid #c4c4c4;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
font-size:18px;
font-family: 'Nanum Gothic', sans-serif;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion2.active, button.accordion2:hover {
    background-color: #ddd;
}

/* Style the accordion panel. Note: hidden by default */
div.panel2 {
    padding: 25px;
    background-color: white;
    display: none;
    border-bottom:1px solid #c4c4c4;
}
button.accordion2:after {
    content: "";
    position: absolute;
    right: 50px;
    padding-top:15px;
    color: #444;
    height: 8px;
    width: 14px;
    background: url('/base/img/pc/images/acodi2_arr.png') center center no-repeat;
}

button.accordion2.active:after {
    -webkit-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
}
#sub #content .panel2 {text-align:left;}
#sub #content .panel2 h5 {margin:25px 0 5px;}
#sub #content .panel2 p {padding:0; line-height:1.6; float:none; font-size:14px; margin-top:0;}
#sub #content .panel2 ul {font-size:14px; /*margin-bottom:20px;*/}
#sub #content .panel2 ul li {margin-bottom:5px;}
.panel2 ul ul {padding-left:10px;}


/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel2.show {
    display: block;
}

#sub #content .accordion2 {background:#f9f9f9; border-bottom:1px solid #c4c4c4;}


/* ==========================================

       ¼­ºê2-¾ÆÄÚµð¾ð
   
=============================================         */
.accordi_wrap {width:600px; margin:0 auto;}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    color: #fff;
    cursor: pointer;
    padding: 20px 0 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
position: relative;
margin-bottom:50px;
border-radius:100px;
font-size:24px;
font-weight:bold;
font-family: 'Nanum Gothic', sans-serif;
}
.accordion span {  
    display: inline-block;
    width: 100%;
    text-align: center;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
-moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.35); -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.35); box-shadow: inset 0 0 20px rgba(0,0,0,0.35);
}


/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0;
    background-color: white;
    display: none;
}
div.panel img {padding-bottom:30px;}
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
}

button.accordion:after {
    content: "";
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 25px;
    font-weight: 200;
    color: #444;
    height: 16px;
    width: 18px;
    background: url('/base/img/pc/images/acodi_arr.png') center center no-repeat;
    background-size: 70%;
}

button.accordion.active:after {
    -webkit-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
}
.accordion:nth-child(1) {background:/*#104AA8;*/#61b2ed;}
.accordion:nth-child(n+3) {background:/*#104AA8;*/#61b2ed;}
.accordion:nth-child(2n+2) {background:/*#65C8E8;*/#3992d5;}
.accordion:nth-child(3n+3) {background:/*#1069D1;*/#4786ce;}

/* ¼­ºê ¹Ù·Î°¡±â ¹öÆ° */
#sub .btn_go {text-align:center;}
#sub .btn_go a {
    display:inline-block;
    width:250px;
    line-height:1.8;
    padding:10px 10px;
    background-color: #fc594c;
    border-radius: 100px;
    color: #fff;
    font-size: 16px;
    margin-right: 20px;
}

#sub .btn_go a.btn1 {background-color:#f8b059;}
#sub .btn_go a.btn2 {background-color:#4dc7b7;}












/* °Ô½ÃÆÇ */
.formmail_textarea_style { width:432px; }
#sub #content iframe {min-height:300px;}
#sub #content iframe .bbsnewf5 > table > tbody > tr > td > a > img {width:180px; height:120px;}
.map_wrap {width:600px; margin:0 auto;}
.map_wrap .map_info {padding:10px 0;}
.map_btn ul li {float:left;}
.map_btn ul:after {content:""; clear:both; display:block;}
/*ÄÁÅÙÃ÷ º¸µå*/
#sub #content .board textarea,#sub #content .board input {width:90%;}
#sub #content .board input {height:30px;}
#sub #content td.formmail_cell_bgcolor {padding:10px; padding-left:10px;}
#sub #content input[name="phone_no1"],#sub #content input[name="phone_no2"],#sub #content input[name="phone_no3"] {width:25%;}
#sub #content input[type="radio"],#sub #content input[type="checkbox"] {width:auto;}
#sub #content textarea[name="description"] {height:60px !important;}

#content .board > tbody > tr > td > table > tbody > tr > .bbsnewf5 > table > tbody > tr > td a img {width:140px !important; height:90px !important;}