@charset 'utf-8';

@import url('reset.css');

/*all, menu*/
#wrap {width:100%; overflow-x:hidden;}
header {margin-left:calc((100% - 1200px) / 2); width:1200px; margin:0 auto; position:relative;}
nav {margin-top:27px; height:60px;}
nav h1 {width:201px; display:inline-block; padding-right:417px; float:left;}
.menu {float:left; width:180px; height:50px; line-height:45px; text-align:left;}
.menu a {display:inline-block; width:180px; font-size:15px; font-weight:600;}
.menu a:hover {color:#50820a;} 
.menu:hover .sub_menu {opacity:1; visibility:visible; transition:all 0.5s ease;}
.sub_menu {position:absolute; top:50px; z-index:100; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;/* border:1px solid #d4d4d4; border-bottom:none; */ opacity:0; visibility:hidden;}
.sub_menu li {width:180px; height:40px; line-height:40px; border-bottom:1px solid #d4d4d4; background-color:#ffffff;}
.sub_menu li a {font-size:13px; font-weight:normal; padding-left:10px;}
.sub_menu li a:hover {border-bottom:1px solid #d4d4d4; background-color:#f6faff;}
.sub_menu li:last-child a:hover {border-bottom:none; height:39px;}
/* .lang {float:right; margin-top:14px;}
.lang a.on {display:inline-block; cursor: pointer; width:63px; height:23px; border-radius:50px; text-align:center; padding:4px 24px 5px 11px; border:none; font-size:12px; color:#333; background-color:#dfdfdf; position:relative;}
.lang a.on:hover .lang ul {opacity:1; visibility:visible; transition:all 0.5s ease; }
.lang a.on span {position:absolute; top:7px; right:7px; width:12px; height:8px; background:url(../images/bullet_lang.png);}
.lang>ul {position:absolute; top:42px; z-index:100; border:1px solid #dfdfdf; font-size:12px; background-color:#fff; border-radius:5px; opacity:0; visibility:hidden; }
.lang>ul li a {display:block; padding:4px 24px 5px 11px;}
.lang>ul li a:hover {color:#62ac28;} */
.lang {float:right; margin-top:14px;}
.lang a.on {display:inline-block; cursor: pointer; width:63px; height:23px; border-radius:50px; text-align:center; padding:4px 24px 5px 11px; border:none; font-size:12px; color:#333; background-color:#dfdfdf; position:relative;}
.lang a.on span {position:absolute; top:7px; right:7px; width:12px; height:8px; background:url(../images/bullet_lang.png);}
.lang>ul {position:absolute; top:42px; z-index:100; border:1px solid #dfdfdf; font-size:12px; background-color:#fff; border-radius:5px;  }
.lang>ul li a {display:block; padding:4px 24px 5px 11px;}
.lang>ul li a:hover {color:#62ac28;}


#show_dir, .nav_dir {display:none;}

/*main banner*/
.border {border-bottom:1px solid #d4d3d3;}
section {width:100%;}
.main_center {width:100%; height:440px; margin:0 auto; position:relative;}
.other_bgcolor {background-color:#e3eaf2;}
.center {width:1200px; margin:0 auto;}
.mainImg_txt {padding:39px 0 0 78px; width:520px; font-size:53px; line-height:46px; font-weight:600; letter-spacing: -1px;}
.mainImg_txt span {color:#acacac; font-size:30px; font-weight:100; letter-spacing: -1px; display:block;}
.mainImg_txt02 {color:#323230; font-size:14px; line-height:24px; margin:16px 0 0 78px;}
.mainImg {float:right;}
.btn_go {margin:10px 0 0 78px;}
.btn_go a {display:inline-block; width:185px; height:45px; text-align:center; color:#fff; font-size:16px; padding-top:11px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%); }
.btn_go a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
.btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-right:8px; margin-top:150px; background: url(../images/btn_pageRolling_left.gif); width:40px; height:40px;}
.btn_pageRolling span:nth-child(1) a:hover {background: url(../images/btn_pageRolling_left_on.gif);}
.btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:150px; background: url(../images/btn_pageRolling_right.gif); width:40px; height:40px;}
.btn_pageRolling span:nth-child(2) a:hover {background: url(../images/btn_pageRolling_right_on.gif);}
.btn_pageAutoRolling {padding:14px 0 0 78px;}
.btn_pageAutoRolling span {float:left; margin-right:8px; width:12px; height:12px; }
.btn_pageAutoRolling span a.on {display:inline-block; background: url(../images/btn_autorolling_on.gif); width:12px; height:12px;}
.btn_pageAutoRolling span a {display:inline-block; background: url(../images/btn_autorolling.gif); width:12px; height:12px;}


/*product icon*/
.area_product {background-color:#fff; width:1200px; height:207px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
.area_product li {width:199px; height:207px; border-right:1px solid #efefef; float:left; font-size:18px; text-align:center;}
.area_product li:last-child {border-right:none !important;}
.area_product li a {width:200px; height:207px; padding-top:30px;}
.area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:108px; line-height:24px;}
.area_product li a span {color:#acacac; font-weight:normal;}
.area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 60px 30px no-repeat;} 
.area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 60px 30px no-repeat;}
.area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 60px 30px no-repeat;}
.area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 60px 30px no-repeat;}
.area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 60px 30px no-repeat;}
.area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 60px 30px no-repeat;}
.area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 60px 30px no-repeat;}
.area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 60px 30px no-repeat;}
.area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 60px 30px no-repeat;}
.area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 60px 30px no-repeat;}
.area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 60px 30px no-repeat;}
.area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 60px 30px no-repeat;}

/*news, notice*/
.area_board {width:1200px; height:340px; margin-top:50px;}
.board {margin-left:50px; width:550px; float:left;}
h2 {font-size:23px; font-weight:800; margin-bottom:32px;}
h2 a {font-size:15px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:55px;}
.sub_board {font-size:17px; line-height:26px;}
.loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:510px; overflow:hidden;}
.date {font-size:14px; color:#6eb20c; margin-top:10px; display:inline-block;}

/*support*/
.bg_support {margin-top:50px; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:219px;}
.txt_white {color:#fff !important;}
.icon_support a {width:101px; height:101px; text-align:center; float:left; margin-left:80px; margin-top:10px;}
.icon_support a span {display:inline-block; margin-top:108px;}
.icon_support:nth-child(1) a {display:inline-block; background: url(../images/icon_help.png) no-repeat;}
.icon_support:nth-child(1) a:hover {background: url(../images/icon_help_on.png) no-repeat;}
.icon_support:nth-child(2) a {display:inline-block; background: url(../images/icon_recruit.png) no-repeat;}
.icon_support:nth-child(2) a:hover {background: url(../images/icon_recruit_on.png) no-repeat;}
.icon_support:nth-child(3) a {display:inline-block; background: url(../images/icon_contactUs.png) no-repeat;}
.icon_support:nth-child(3) a:hover {background: url(../images/icon_contactUs_on.png) no-repeat;}

/*product, recruite, 사이트맵, 개인정보처리방침*/
.bg_footer {background-color:#2c2b2b; height:52px; clear:both; overflow:hidden;}
.sub_footer {font-size:14px; line-height:52px; margin:0 23px;}
.sub_footer:first-child {margin-left:0;}

/*footer*/
footer {width:100%; background-color:#303030; padding-top:30px; height:180px; position:absolute;}
.address {display:inline-block; width:600px; float:left; position:relative;}
.address p {font-size:14px; color:#fff; line-height:30px;}
.address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
    position:absolute; top:30px; right:70px;}
.address a:first-child:hover {background: url(../images/icon_youtube_on.png) no-repeat; width:58px; height:58px;}
.address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
    position:absolute; top:30px; right:0;}
.address a:last-child:hover {background: url(../images/icon_facebook_on.png) no-repeat; width:58px; height:58px;}

.sub_bgcolor {background-color:#f6f7f8; display:table; padding-bottom:80px; min-height:740px;}
/* #left_menu {background-color:#eeeff0; width:260px; height:500px; display:table-cell; float:left; margin-top:15px; padding:26px 0 0 24px;} */
.area_right {width:1200px; padding-top:36px; float:left;}
/* #left_menu > dl dt:before {content: ''; display: inline-block; background: url(../images/bullet.png) no-repeat; width:8px; height:12px; margin:12px 8px 0 0;}
#left_menu > dl dt {font-size:18px; font-weight:bold; height:40px; color:#3f3f3f;}
#left_menu > dl dd a {display:inline-block; font-size:15px; font-weight:600; line-height:48px; color:#888787; margin-left:17px;}
#left_menu > dl dd a:hover {color:#50820a;} */
.select_menu a {display:inline-block; color:#3f3f3f !important; font-weight:600;}
.area_right h3 {font-size:30px; font-weight:bold; margin-left:45px; vertical-align:bottom; padding-bottom:10px; border-bottom:1px solid #ececed; height:60px; /* line-height:50px; */}
.btn_install {float:right;}
.btn_install a {display:inline-block; width:185px; height:38px; text-align:center; color:#fff; font-size:15px; line-height:37px; border-radius:3px; 
    background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);} 
.btn_install a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
.sub_page {padding:40px 0 0 0; width:1160px; margin-left:40px;}
.txt_title {font-size:24px; font-weight:bold; margin-bottom:18px;}
.txt_sub {font-size:16px; line-height:26px;}
.txt_sub li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.button_sub {width:1200px; height:38px;}
.button_sub li {float:left; margin-right:20px; width:275px; text-align:center;}
.btn_docu a {display:inline-block; width:275px; height:38px; text-align:center; color:#fff; font-size:15px; line-height:37px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
.btn_docu a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
.button_sub li:nth-child(4), .button_sub li:nth-child(8), .button_sub li:nth-child(12) {margin-right:0;}
.basic_table tr th:first-child {border-top-left-radius:6px;}
.basic_table tr th:last-child {border-top-right-radius:6px; border-right:none}
.basic_table tr th {background-color:#e6efcf; height:45px; font-size: 16px; border-right:1px solid #f0f0f0;}
.basic_table tr td {background-color:#fff; height:45px; font-size: 15px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding-left:30px;}
.borB_none {border-bottom:none !important;}
.borR_none {border-right:none !important;}

.txt_num span:first-child {font-size:36px; font-weight:800; color:#69b219; display:inline-block; float:left; width:42px; margin-right:22px;}
.txt_num span:nth-child(2) {display:inline-block; font-size:18px; padding-top:10px;}
.txt_num ul {margin:18px 0 0 65px;}
.txt_num li {font-size:16px; line-height:24px;}
.txt_num li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.txt_highlight {color:#349028;}

.movie_area {width:1160px; height:575px; background-color:#fff; box-shadow: 6px 6px 10px 1px #e7e7e7, -6px -6px 10px -1px #e7e7e7;}
span.title_demo {font-size:18px; padding:0 28px; position:absolute; left:350px; top:23px; font-weight:bold;}
span.sub_demo {font-size:16px; padding:0 28px; position:absolute; left:350px; top:60px;}
.small_movie_area {width:1160px; height:260px;}
.small_movie {width:1160px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
.small_movie:last-child {margin-right:0;}
.small_movie a img {width:344px; height:260px;}
.btn_play {width:344px; height:260px; background: url(../images/icon_playbox_off.png) no-repeat; position:absolute; left:0; top:0; cursor: pointer; }
.btn_play:hover {background: url(../images/icon_playbox_on.png) no-repeat;}

/* youtube layer popup */
.video-popup.reveal { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index:9 }  
.video-popup .video-wrapper { position: relative; width: 80%; padding-bottom: 45%; z-index: 10 }
.video-popup .video-wrapper iframe { position: absolute; width: 100%; height: 100%; }
.video-popup.reveal .video-popup-closer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); z-index: 9 } 

.txt_year {position:relative;}
.txt_year span {font-size:36px; font-weight:800; color:#767676; display:inline-block; float:left; width:110px; margin-right:22px;}
.txt_year ul {padding-top:18px; margin-left:166px; border-left:1px solid #d9d9d9;}
.txt_year li {font-size:16px; line-height:24px; margin-left:54px;}
.txt_year li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.circle {background: #fff; width:30px; height:30px; border:9px solid #c0170d; border-radius:50%; position:absolute; left:151px; top:47px;}
.area_year:before {content: ''; position: absolute; top:0; left:159px; width:15px; height:15px; background: #a9afce; border-radius:50%;}

.accordion {width:1160px;}
.accordion ul {list-style:none; margin:0; padding:0;}
.accordion li {margin:0; padding:0;}
.accordion [type=radio], .accordion [type=checkbox] {display:none;}
.accordion label {display:block; font-size:16px; line-height:18px; background:#fff; border:1px solid #eeeff0; color:#333; font-weight:700; 
    cursor:pointer; text-transform:uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {background:#fff; color:#333; border:1px solid #82c51d;}
.accordion .content {overflow:hidden; -webkit-transition: all .0.5s ease-out; -moz-transition: all .0.5s ease-out; }
.accordion p {color:#333; font-size:16px; line-height:26px;}

/* Vertical */
.vertical ul li {overflow:hidden;margin:10px 0;}
.vertical ul li label {padding:30px;}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {border-bottom:0;}
.vertical ul li .content {height:0px;border-top:0;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {padding:19px 40px 34px 52px;  border:1px solid #82c51d; border-top:none;
height:100%; min-height:200px;}

.root_daum_roughmap .wrap_controllers {display:none;}

/*width 993이상 1200이하 에서 적용이 됨*/
@media (min-width: 993px) and (max-width: 1200px){
  /*menu*/
  header {margin-left:calc((100% - 993px) / 2); width:993px; margin:0 auto; position:relative;}
  nav h1 {width:201px; display:inline-block; padding-right:400px; float:left; }
  .menu {float:left; width:130px; height:50px; line-height:45px; text-align:left;}
  /*main banner*/
  .center {width:993px; margin:0 auto;}
  .mainImg_txt {padding:17px 0 0 78px; width:520px; font-size:40px; line-height:46px; font-weight:600; letter-spacing: -1px;}
  .mainImg_txt02 {color:#323230; font-size:14px; line-height:22px; margin:6px 0 0 78px;}
  .mainImg img {width:80%; float:right;}
  .btn_pageAutoRolling {display:none;}
  .main_center {width:100%; height:372px; margin:0 auto; position:relative;}
  .btn_go a {display:inline-block; width:153px; height:39px; text-align:center; color:#fff; font-size:16px; padding-top:9px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%); }
  .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-right:8px; margin-top:115px; background: url(../images/btn_pageRolling_left.gif); width:40px; height:40px;}
  .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:115px; background: url(../images/btn_pageRolling_right.gif); width:40px; height:40px;}
  /*product icon*/
  .area_product {background-color:#fff; width:993px; height:190px; margin-top:-94px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
  .area_product li {width:165px; height:190px; border-right:1px solid #efefef; float:left; font-size:16px; text-align:center;}
  .area_product li a {width:164px; height:190px; padding-top:30px;}
  .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 45px 25px no-repeat;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 45px 25px no-repeat;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 45px 25px no-repeat;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 45px 25px no-repeat;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 45px 25px no-repeat;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 45px 25px no-repeat;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 45px 25px no-repeat;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 45px 25px no-repeat;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 45px 25px no-repeat;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 45px 25px no-repeat;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 45px 25px no-repeat;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 45px 25px no-repeat;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:90px; line-height:24px;}
  /*news, notice*/
  .area_board {width:993px; height:340px; margin-top:50px;}
  .board {margin-left:0; width:472px; float:left;}
  .board:first-child {margin-right:49px;}
  .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:472px; overflow:hidden;}
  h2 a {font-size:15px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:0;}
  /*support*/
  .icon_support a {width:101px; height:101px; text-align:center; float:left; margin-left:56px; margin-top:10px;}
  /*footer*/
  .address:first-child {display:inline-block; width:586px; float:left; position:relative;}
  .address:last-child {display:inline-block; width:406px; float:left; position:relative;}
  /*sub page*/
  #left_menu {display:none;}	
  .area_right {width:993px; padding-top:31px; float:left;}
  .sub_page {padding:30px 0 0 0; width:963px;}
  .sub_page img {width:100%;}
  .txt_sub {font-size:15px; line-height:26px;}
  .button_sub {width:993px; height:38px;}
  .button_sub li {float:left; margin-right:20px; width:226px; text-align:center;}
  .btn_docu a {display:inline-block; width:226px; height:38px; text-align:center; color:#fff; font-size:15px; line-height:37px; border-radius:3px; letter-spacing: -1px; 
    background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}  
  .small_movie_area {width:993px; height:260px;}
  .small_movie {width:953px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
  /*news, notics*/
  .accordion {width:953px;}
}

/*width 768이상 992이하 에서 적용이 됨*/
@media (min-width: 768px) and (max-width:992px) {
  body {overflow-y: scroll;}
  /*menu*/
  header {margin-left:calc((100% - 768px) / 2); width:100%; margin:0 auto; position:relative;}
  nav h1 {width:201px; height:59px; display:inline-block; padding-right:400px; float:left; padding-left:20px; }  
  .menu {display:none;}
  header .nav_dir {display:block; top:0;  position:absolute; right:20px; width:30px; height:30px; background:url(../images/menu.png) no-repeat; background-size:100%; cursor:pointer; text-indent:-8000px; z-index:2000;}
  #show_dir {max-width:100%; background-color:#f6f7f8;  z-index:1000; position:absolute; top:60px; left:0; min-width:100%; border-top: 1px solid #e6e6e6; border-bottom:#000; box-shadow: 4px 6px 9px -3px #d4dbe2, -4px 0 0 -3px #d4dbe2;}
  #show_dir li {display:inline-block; width:33%; float:left;}
  #show_dir li a {font-weight:600; width:90%; margin:0 auto; text-align:center; display:block; font-size:15px; color:#353535; border-bottom:1px dotted #dddddd; padding-top:15px; padding-bottom:15px;}
  #show_dir li a:hover {color:#ea5d4b; background-color:#fafafa;}
  #header.smaller .nav_dir {top:15%;}
  #header.smaller #show_dir {top:44px;}
  .lang {position:absolute; top:-10px; right:70px;}
  .lang>ul {position:absolute; top:28px; z-index:100; border:1px solid #dfdfdf; font-size:12px; background-color:#fff; border-radius:5px;}
  .mainImg_txt {padding:21px 0 0 78px; width:520px; font-size:53px; line-height:46px; font-weight:600; letter-spacing: -1px;}
  .mainImg_txt02 {color:#323230; font-size:14px; line-height:24px; margin:0 0 0 78px;}
  .mainImg_txt span {color:#acacac; font-size:28px; font-weight:100; letter-spacing: -1px; display:block;}
  /*main banner*/
  .center {width:100%; margin:0 auto;}
  .mainImg_txt {width:436px; font-size:38px; line-height:38px; font-weight:600; letter-spacing: -1px; }
  .mainImg_txt02 {color:#323230; font-size:14px; line-height:22px; width:260px; margin-top:10px;}
  .mainImg img {width:50%; position:absolute; right:52px; top:20px; z-index:100;}
  .first_image img {width:47%;}
  .last_image img {width:41%;}
  .btn_pageAutoRolling {display:none;}
  .main_center {width:100%; height:364px; margin:0 auto; position:relative;}
  .btn_go {clear:both}
  .btn_go a {display:inline-block; width:130px; height:35px; text-align:center; color:#fff; font-size:14px; padding-top:9px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%); }
  .btn_pageRolling span:nth-child(1) a {position:absolute; left:20px; top:-37px; background: url(../images/btn_pageRolling_left.gif); width:40px; height:40px;}
  .btn_pageRolling span:nth-child(2) a {position:absolute; right:11px; top:-37px; background: url(../images/btn_pageRolling_right.gif); width:40px; height:40px;}
  /*product icon*/
  .area_product {background-color:#fff; width:96%; height:157px; margin-top:-125px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2; margin-left:20px;
  /* position:absolute; left:20px; top:440px; z-index:1000;  */}
  .area_product li {width:122px; height:157px; border-right:1px solid #efefef; float:left; font-size:14px; text-align:center; letter-spacing:-0.5px;}
  .area_product li a {width:122px; height:176px; padding-top:30px; }
  .area_product li:nth-child(1) a  {width:122px; display:inline-block; background: url(../images/icon_product01.png) 27px 21px no-repeat; background-size: 57%;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 27px 21px no-repeat; background-size: 55%;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 32px 23px no-repeat; background-size: 50%;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 32px 23px no-repeat; background-size: 50%;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 28px 23px no-repeat; background-size: 55%;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 28px 23px no-repeat; background-size: 55%;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 27px 23px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 27px 23px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 35px 23px no-repeat; background-size: 55%;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 35px 23px no-repeat; background-size: 55%;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 32px 23px no-repeat; background-size: 50%;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 35px 23px no-repeat; background-size: 50%;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:68px; line-height:20px;}
  /*news, notice*/
 .area_board {width:100%; height:340px; margin-top:40px;}
 .board {margin-left:2%; width:47%;}
 .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}
 .sub_board {font-size:14px; line-height:24px;}
 h2 a {font-size:14px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:18px;}
 h2 {font-size:21px; font-weight:800; margin-bottom:22px;}
 .date {font-size:13px; color:#6eb20c; margin-top:6px; display:inline-block;}
 /*support*/
 .icon_support a {width:80px; height:80px; text-align:center; float:left; margin-left:30px; margin-top:10px;}
 .bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:198px;}
 .icon_support a span {display:inline-block; margin-top:91px;}
 .icon_support:nth-child(1) a {display:inline-block; background: url(../images/icon_help.png) no-repeat; background-size: 100%;}
 .icon_support:nth-child(1) a:hover {background: url(../images/icon_help_on.png) no-repeat; background-size: 100%;}
 .icon_support:nth-child(2) a {display:inline-block; background: url(../images/icon_recruit.png) no-repeat; background-size: 100%;}
 .icon_support:nth-child(2) a:hover {background: url(../images/icon_recruit_on.png) no-repeat; background-size: 100%;}
 .icon_support:nth-child(3) a {display:inline-block; background: url(../images/icon_contactUs.png) no-repeat; background-size: 100%;}
 .icon_support:nth-child(3) a:hover {background: url(../images/icon_contactUs_on.png) no-repeat; background-size: 100%;}
/*footer*/
 .address:first-child {display:inline-block; width:71%; float:left; position:relative; margin-left:2%;}
 .address:last-child {display:inline-block; width:24%; float:left; position:relative; margin-left:2%;}
 .address p {font-size:13px; color:#fff; line-height:30px;}
 .address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
  position:absolute; top:30px; right:90px;}
 .address a:first-child:hover {background: url(../images/icon_youtube_on.png) no-repeat; width:58px; height:58px;}
 .address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
  position:absolute; top:30px; right:20px;}
 .address a:last-child:hover {background: url(../images/icon_facebook_on.png) no-repeat; width:58px; height:58px;}
 /*sub_page*/
 .area_right {width:750px; padding-top:25px; float:left; }
 .sub_page {padding:20px 0 0 0; width:724px; margin-left:26px;}
 .sub_page img {width:100%;}
 .button_sub {width:750px; height:38px; }
 .button_sub li {float:left; margin-right:20px; width:166px; text-align:center;}
 .btn_docu a {display:inline-block; width:166px; height:38px; text-align:center; color:#fff; font-size:13px; line-height:37px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
 .area_right h3 {font-size:27px; font-weight:bold; margin-left:26px; vertical-align:bottom; padding-bottom:20px; border-bottom:1px solid #ececed; height:49px; /* line-height:50px; */}
 .txt_title {font-size:23px; font-weight:bold; margin-bottom:18px;}
 .txt_sub {font-size:14px; line-height:25px;}
 .sub_bgcolor {background-color:#f6f7f8; width:100%; display:table; padding-bottom:80px; min-height:740px;}
 .small_movie_area {width:728px; height:260px;}
 .small_movie {width:728px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
 span.title_demo {font-size:17px; padding:0 28px; position:absolute; left:350px; top:26px; font-weight:bold;}
 span.sub_demo {font-size:14px; padding:0 28px; position:absolute; left:350px; top:63px; line-height:20px;}
 .accordion {width:728px;}
 .txt_year li {font-size:15px; line-height:24px; margin-left:54px;}
 .basic_table tr td {background-color:#fff; height:45px; font-size: 14px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding-left:16px;}
 .txt_num span:nth-child(2) {display:inline-block; font-size:17px; padding-top:10px;}
 .txt_num li {font-size:14px; line-height:24px;}
 .accordion p {color:#333; font-size:13px; line-height:26px;}
 .accordion label {display:block; font-size:14px; line-height:18px; background:#fff; border:1px solid #eeeff0; color:#333; font-weight:700; 
  cursor:pointer; text-transform:uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
}
/*width 577이상 767이하 에서 적용이 됨*/
@media (min-width: 577px) and (max-width:767px) {
  /*menu*/
  header {margin-left:calc((100% - 577px) / 2); width:577px; margin:0 auto; position:relative;}
  nav h1 {width:201px; display:inline-block; float:left; margin-left:10px;}
  .menu {display:none;}
  header .nav_dir {display:block; top:0;  position:absolute; right:20px; width:30px; height:30px; background:url(../images/menu.png) no-repeat; background-size:100%; cursor:pointer; text-indent:-8000px; z-index:2000;}
  #show_dir {max-width:100%; background-color:#f6f7f8;  z-index:1000; position:absolute; top:60px; left:0; min-width:100%; border-top: 1px solid #e6e6e6; border-bottom:#000; box-shadow: 4px 6px 9px -3px #d4dbe2, -4px 0 0 -3px #d4dbe2;}
  #show_dir li {display:inline-block; width:50%; float:left;}
  #show_dir li a {font-weight:600; width:90%; margin:0 auto; text-align:center; display:block; font-size:14px; color:#353535; border-bottom:1px dotted #dddddd; padding-top:15px; padding-bottom:15px;}
  #show_dir li a:hover {color:#ea5d4b; background-color:#fafafa;}
  #header.smaller .nav_dir {top:15%;}
  #header.smaller #show_dir {top:44px;}
  .lang {position:absolute; top:-10px; right:70px;}
  .lang>ul {position:absolute; top:28px; z-index:100; border:1px solid #dfdfdf; font-size:12px; background-color:#fff; border-radius:5px;}
  /*main banner*/
  .center {width:100%; margin:0 auto;}
  .mainImg_txt {position:absolute; left:0; top:0; width:436px; font-size:40px; line-height:46px; font-weight:600; letter-spacing: -1px; }
  .mainImg_txt02 {color:#323230; font-size:14px; line-height:22px;}
  .mainImg img {width:44%; position:absolute; right:50px; top:35px; z-index:100; }
  .first_image img {}
  .last_image img {width:33%;}
  .btn_pageAutoRolling {display:none;}
  .main_center {width:100%; height:362px; margin:0 auto; position:relative;}
  .btn_go a {display:inline-block; width:100px; height:32px; text-align:center; color:#fff; font-size:13px; padding-top:8px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%); }
  /* .btn_pageRolling span:nth-child(1) a {display:none;}
  .btn_pageRolling span:nth-child(2) a {display:none;} */
  .mainImg_txt {padding:30px 0 0 73px; font-size:31px; line-height:35px; font-weight:600; letter-spacing: -1px; }
  .mainImg_txt span {color:#acacac; font-size:31px; font-weight:100; margin-right:9px;}
  .mainImg_txt02 {color:#323230; font-size:14px; line-height:21px; width:200px; clear:both; margin:4px 0 0 73px;}
  .btn_go {margin:7px 0 0 75px;}
  .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-left:8px; margin-top:77px; background: url(../images/btn_pageRolling_left.gif); width:40px; height:40px;}
  .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:77px; background: url(../images/btn_pageRolling_right.gif); width:40px; height:40px;}

  /*product icon*/
  .area_product {background-color:#fff; width:577px; height:165px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
  .area_product li {width:96px; height:165px; border-right:1px solid #efefef; float:left; font-size:14px; text-align:center;}
  .area_product li a {width:96px; height:165px; padding-top:30px;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:65px; line-height:18px;}
  .area_product li a span {color:#acacac; font-weight:normal;}
  .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 16px 22px no-repeat; background-size: 66%;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 16px 22px no-repeat; background-size: 66%;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 16px 22px no-repeat; background-size: 66%;}

  /*news, notice*/
  .board {margin-left:30px; width:550px; margin-bottom:30px;}
  .area_board {width:577px; height:340px; margin-top:30px;}
  h2 {font-size:21px; font-weight:800; margin-bottom:22px;}
  h2 a {font-size:13px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:27px;}
  .sub_board {font-size:14px; line-height:13px;}
  .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:510px; overflow:hidden;}
  .date {font-size:13px; color:#6eb20c; margin-top:5px; display:inline-block;}
  /*support*/
.bg_support {clear:both; margin-top:50px; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:219px;}
.txt_white {color:#fff !important;}
.icon_support a {width:80px; height:80px; text-align:center; float:left; margin-left:70px; margin-top:10px;}
.bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:272px;}
.icon_support a span {display:inline-block; margin-top:91px;}
.icon_support:nth-child(1) a {display:inline-block; background: url(../images/icon_help.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(1) a:hover {background: url(../images/icon_help_on.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(2) a {display:inline-block; background: url(../images/icon_recruit.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(2) a:hover {background: url(../images/icon_recruit_on.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(3) a {display:inline-block; background: url(../images/icon_contactUs.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(3) a:hover {background: url(../images/icon_contactUs_on.png) no-repeat; background-size: 100%;}

/*footer*/
footer {width:100%; background-color:#303030; padding-top:30px; height:168px; position:absolute;}
.address:first-child {display:inline-block; width:66%; float:left; position:relative; margin-left:30px;}
.address:last-child {display:inline-block; width:24%; float:left; position:relative; margin-left:2%;}
.address p {font-size:12px; color:#fff; line-height:23px;}
.address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
 position:absolute; top:30px; right:60px; background-size: 85%;}
.address a:first-child:hover {background: url(../images/icon_youtube_on.png) no-repeat; width:58px; height:58px; background-size: 85%;}
.address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
 position:absolute; top:30px; right:0; background-size: 85%;}
.address a:last-child:hover {background: url(../images/icon_facebook_on.png) no-repeat; width:58px; height:58px; background-size: 85%;}
}

/*width 320이상 576이하 에서 적용이 됨*/
@media (min-width: 320px) and (max-width:576px) {  
  /*menu*/
  header {width:100%; margin:0 auto; position:relative;}
  nav {margin-top:16px; height:44px;}
  nav h1 a img {width:130px; display:inline-block; float:left; margin-left:10px;}
  .menu {display:none;}
  header .nav_dir {display:block; top:0;  position:absolute; right:20px; width:30px; height:30px; background:url(../images/menu.png) no-repeat; background-size:90%; cursor:pointer; text-indent:-8000px; z-index:2000;}
  #show_dir {max-width:100%; background-color:#f6f7f8;  z-index:1000; position:absolute; top:44px; left:0; min-width:100%; border-top: 1px solid #e6e6e6; border-bottom:#000; box-shadow: 4px 6px 9px -3px #d4dbe2, -4px 0 0 -3px #d4dbe2;}
  #show_dir li {display:inline-block; width:50%; float:left;}
  #show_dir li a {font-weight:600; width:90%; margin:0 auto; text-align:center; display:block; font-size:13px; color:#353535; border-bottom:1px dotted #dddddd; padding-top:11px; padding-bottom:11px;}
  #show_dir li a:hover {color:#ea5d4b; background-color:#fafafa;}
  #header.smaller .nav_dir {top:15%;}
  #header.smaller #show_dir {top:44px;}
  .lang {position:absolute; top:-12px; right:62px;}
  .lang>ul {position:absolute; top:26px; z-index:100; border:1px solid #dfdfdf; font-size:12px; background-color:#fff; border-radius:5px;}
  .lang a.on {display:inline-block; cursor: pointer; width:55px; height:21px; border-radius:50px; text-align:center; padding:4px 24px 5px 11px; border:none; font-size:11px; color:#333; background-color:#dfdfdf; position:relative;}
  .lang>ul li a {display:block; padding:4px 17px 5px 11px;}
  /*main banner*/
  .center {width:100%; margin:0 auto;}
  .mainImg_txt {position:absolute; left:0; top:0; width:436px; font-size:40px; line-height:46px; font-weight:600; letter-spacing: -1px; }
  .mainImg_txt span {color:#acacac; font-size:30px; font-weight:100; letter-spacing: -1px; display:inline-block;}
  .mainImg_txt02 {color:#323230; font-size:14px; line-height:22px;}
  .mainImg img {display:none;}
  .last_image img {width:33%;}
  .btn_pageAutoRolling {display:none;}
  .main_center {width:100%; height:276px; margin:0 auto; position:relative;}
  .btn_go a {display:inline-block; width:100px; height:32px; text-align:center; color:#fff; font-size:13px; padding-top:8px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%); }
  /* .btn_pageRolling span:nth-child(1) a {display:none;}
  .btn_pageRolling span:nth-child(2) a {display:none;} */
  .mainImg_txt {padding:30px 0 0 66px; font-size:24px; line-height:29px; font-weight:600; letter-spacing: -1px; }
  .mainImg_txt span {color:#acacac; font-size:24px; font-weight:100; margin-right:9px;}
  .mainImg_txt02 {color:#323230; font-size:13px; line-height:21px; margin:0 66px; padding-top:66px;}
  .btn_go {margin:10px 0 0 66px;}
  .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-left:8px; margin-top:77px; background: url(../images/btn_pageRolling_left.gif);}
  .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:77px; background: url(../images/btn_pageRolling_right.gif);}

  /*product icon*/
  .area_product {background-color:#fff; width:577px; height:152px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
  .area_product li {width:96px; height:152px; border-right:1px solid #efefef; float:left; font-size:13px; text-align:center;}
  .area_product li a {width:96px; height:165px; padding-top:30px;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:57px; line-height:17px;}
  .area_product li a span {color:#acacac; font-weight:normal;}
  .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 18px 17px no-repeat; background-size: 63%;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 18px 17px no-repeat; background-size: 63%;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 18px 17px no-repeat; background-size: 63%;}

  /*news, notice*/
  .board {margin-left:22px; width:550px; margin-bottom:20px;}
  .area_board {width:577px; height:340px; margin-top:27px;}
  h2 {font-size:20px; font-weight:800; margin-bottom:20px;}
  h2 a {font-size:13px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:17px;}
  .sub_board {font-size:13px; line-height:13px;}
  .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:510px; overflow:hidden;}
  .date {font-size:13px; color:#6eb20c; margin-top:5px; display:inline-block;}
  .board p.mt25 {margin-top:15px !important;}
  /*support*/
.bg_support {clear:both; margin-top:50px; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:219px;}
.txt_white {color:#fff !important;}
.icon_support a {width:80px; height:80px; text-align:center; float:left; margin-left:70px; margin-top:10px;}
.bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:244px;}
.icon_support a span {display:inline-block; margin-top:91px;}
.icon_support:nth-child(1) a {display:inline-block; background: url(../images/icon_help.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(1) a:hover {background: url(../images/icon_help_on.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(2) a {display:inline-block; background: url(../images/icon_recruit.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(2) a:hover {background: url(../images/icon_recruit_on.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(3) a {display:inline-block; background: url(../images/icon_contactUs.png) no-repeat; background-size: 100%;}
.icon_support:nth-child(3) a:hover {background: url(../images/icon_contactUs_on.png) no-repeat; background-size: 100%;}
.bg_support .center .pt40 {padding-top:25px !important;}

/*footer*/
footer {width:100%; background-color:#303030; padding-top:30px; height:168px; position:absolute; }
.address:first-child {display:inline-block; width:66%; float:left; position:relative; margin-left:30px;}
.address:last-child {display:inline-block; width:24%; float:left; position:relative; margin-left:2%;}
.address p {font-size:12px; color:#fff; line-height:23px;}
.address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
 position:absolute; top:30px; right:60px; background-size: 85%;}
.address a:first-child:hover {background: url(../images/icon_youtube_on.png) no-repeat; width:58px; height:58px; background-size: 85%;}
.address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
 position:absolute; top:30px; right:0; background-size: 85%;}
.address a:last-child:hover {background: url(../images/icon_facebook_on.png) no-repeat; width:58px; height:58px; background-size: 85%;}

.area_right {width:553px; padding-top:20px; float:left;}
.area_right h3 {font-size:22px; font-weight:bold; margin-left:19px; vertical-align:bottom; padding-bottom:0; border-bottom:1px solid #ececed; height:46px; /* line-height:50px; */}
.sub_page {padding:17px 0 0 0; width:539px; margin-left:19px;}
.txt_title {font-size:19px; font-weight:bold; margin-bottom:8px; line-height:23px;}
.txt_sub {font-size:13px; line-height:22px;}
.sub_page img {width:100%;}
.sub_page p.mt30 {margin-top:20px !important;}
.sub_page p.mt50 {margin-top:23px !important;}
.button_sub {width:553px; height:86px;}
.button_sub li {float:left; margin-right:15px; width:260px; text-align:center; margin-top:10px; height:38px;}
.button_sub li:nth-child(2),.button_sub li:nth-child(4),.button_sub li:nth-child(6),.button_sub li:nth-child(8),.button_sub li:nth-child(10),.button_sub li:nth-child(12) {margin-right:0;}
.btn_docu a {display:inline-block; width:260px; height:34px; text-align:center; color:#fff; font-size:12px; line-height:34px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
.btn_docu a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
.basic_table tr th {background-color:#e6efcf; height:45px; font-size: 14px; border-right:1px solid #f0f0f0;}
.basic_table tr td {background-color:#fff; height:45px; font-size: 14px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding:0 16px;}

.txt_num {width:553px;}
.txt_num span:first-child {font-size:26px; font-weight:800; color:#69b219; display:inline-block; float:left; width:42px; margin-right:7px;}
.txt_num span:nth-child(2) {width:500px; display:inline-block; font-size:15px; padding-top:10px;}
.txt_num ul {margin:12px 0 0 50px;}
.txt_num li {font-size:13px; line-height:24px;}
.txt_num li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.txt_highlight {color:#349028;}

.mt40 {margin-top:12px !important;}

.small_movie_area {width:536px;}
.small_movie {width:536px; height:176px; margin-bottom:20px;}

.small_movie a img {width:264px; height:175px;}
.btn_play {width:264px; height:175px; background: url(../images/icon_playbox_off.png) no-repeat; background-size:100%;  position:absolute; left:0; top:0; cursor: pointer; }
.btn_play:hover {background: url(../images/icon_playbox_on.png) no-repeat;}

span.title_demo {font-size:15px; padding:0 28px; position:absolute; left:258px; top:16px; font-weight:bold;}
span.sub_demo {font-size:13px; padding:0 28px; position:absolute; left:259px; top:45px; line-height:18px;}

.txt_year span {font-size:27px;  font-weight:800; color:#767676; display:inline-block; float:left; width:67px; margin-right:0px;}
.txt_year ul {padding-top:18px; margin-left:97px; border-left:1px solid #d9d9d9;}
.txt_year li {font-size:13px; line-height:24px; margin-left:26px;}
.txt_year li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.circle {background: #fff; width:30px; height:30px; border:9px solid #c0170d; border-radius:50%; position:absolute; left:82px; top:44px;}
.area_year:before {content: ''; position: absolute; top:0; left:89px; width:15px; height:15px; background: #a9afce; border-radius:50%;}

.vertical ul li label {padding:19px;}
.mr40 {margin-right:20px !important;}
.ml20 {margin-left:2px !important;}
.accordion label, .accordion p {font-size:14px;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {padding:13px 22px;  border:1px solid #82c51d; border-top:none;
  height:100%; min-height:100px;}
.accordion p {line-height:20px;}
.accordion {width:536px;}
}

/*width 414이하 에서 적용이 됨*/
@media all and (max-width:414px) {  
  /*main banner*/
  .mainImg_txt span.block {display:block;}
  .mainImg_txt02.block02 {padding-top:98px;}
  .mainImg_txt {padding:30px 0 0 44px; font-size:24px; line-height:29px; font-weight:600; letter-spacing: -1px;}
  .mainImg_txt02 {color:#323230; font-size:13px; line-height:21px; margin:0 44px; padding-top:70px;}
  .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-left:8px; margin-top:77px; background: url(../images/btn_pageRolling_left.gif); width:22px; height:22px; background-size:95%;}
  .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:77px; background: url(../images/btn_pageRolling_right.gif); width:22px; height:22px; background-size:95%;}
  .btn_go {margin:7px 0 0 44px;}
  .main_center {width:100%; height:295px; margin:0 auto; position:relative;}
  /*product icon*/
  .area_product {background-color:#fff; width:414px; height:243px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
  .area_product li {width:137px; height:115px; border-right:1px solid #efefef; border-bottom:1px solid #efefef; float:left; font-size:12px; text-align:center;}
  .area_product li.non_border {border-bottom:none; height:127px;}
  .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 22px 14px no-repeat; background-size: 56%;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:40px; line-height:15px;}
  .area_product li:nth-child(3) {border-right:none !important;}
  /*news, notice*/
  .board {margin-left:22px; width:380px; margin-bottom:20px;}
  .area_board {width:411px; height:340px; margin-top:21px;}
  .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:370px; overflow:hidden;}
  h2 a {font-size:12px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:7px;}
  h2 {font-size:17px; font-weight:800; margin-bottom:13px;}
  .date {font-size:12px; color:#6eb20c; margin-top:0; display:inline-block;}
  .sub_board {font-size:13px; line-height:20px;}
   /*support*/
 .icon_support a {width:90px; height:100px; text-align:center; float:left; margin-left:22px; margin-top:0;}
 .bg_support .center .pt40 {padding-top:20px !important;}
 .icon_support a span {display:inline-block; margin-top:94px;}
 .bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:245px;}
 /*footer*/
 footer {width:100%; background-color:#303030; padding-top:23px; height:230px; position:absolute;}
 .address:first-child {display:inline-block; width:90%; float:left; position:relative; margin-left:23px;}
 .address p {font-size:12px; color:#fff; line-height:20px;}
 .address:last-child {display:inline-block; width:97%; float:right; position:relative; margin-right:3%;}
 .address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
   position:absolute; top:14px; right:60px; background-size: 85%;}
   .address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
     position:absolute; top:14px; right:0; background-size: 85%;}
 
 .area_right {width:411px; padding-top:20px; float:left;}
 .area_right h3 {font-size:20px; font-weight:bold; margin:0 19px; vertical-align:bottom; padding-bottom:0; border-bottom:1px solid #ececed; height:38px; /* line-height:50px; */}
 .sub_page {padding:12px 0 0 0; width:384px; margin-left:19px;}
 .txt_title {width:360px; font-size:15px; font-weight:bold; margin-bottom:8px; line-height:20px;}
 .txt_sub {width:380px; font-size:13px; line-height:22px;}
 .sub_page img {width:98%;}
 .sub_page p.mt30 {margin-top:20px !important;}
 .sub_page p.mt50 {margin-top:23px !important;}
 .button_sub {width:376px; height:86px;}
 .button_sub li {float:left; margin-right:20px; width:177px; text-align:center; margin-top:10px; height:38px;}
 .button_sub li:nth-child(2),.button_sub li:nth-child(4),.button_sub li:nth-child(6),.button_sub li:nth-child(8),.button_sub li:nth-child(10),.button_sub li:nth-child(12) {margin-right:0;}
 .btn_docu a {display:inline-block; width:177px; height:34px; text-align:center; color:#fff; font-size:12px; line-height:34px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
 .btn_docu a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
 .basic_table {width:375px;}
 .basic_table tr th {background-color:#e6efcf; height:45px; font-size: 12px; border-right:1px solid #f0f0f0;}
 .basic_table tr td {background-color:#fff; height:45px; font-size: 12px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding:0 16px;}
 
 .txt_num {width:375px;}
 .txt_num span:first-child {font-size:31px; font-weight:800; color:#69b219; display:inline-block; float:left; width:42px; margin-right:7px;}
 .txt_num span:nth-child(2) {width:235px; display:inline-block; font-size:15px; padding-top:10px;}
 .txt_num ul {margin:12px 0 0 50px;}
 .txt_num li {font-size:13px; line-height:24px;}
 .txt_num li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
 .txt_highlight {color:#349028;}
 
 .sub_bgcolor {min-height:0;}
 
 .small_movie_area {width:360px; height:260px;}
 .small_movie {width:360px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
 /*news, notics*/
 .accordion {width:374px;}
 
 .small_movie_area {width:360px;}
 .small_movie {width:374px; height:106px; margin-bottom:20px;}
 
 .small_movie a img {width:150px; height:105px;}
 .btn_play {width:150px; height:105px; background: url(../images/icon_playbox_off.png) no-repeat; background-size:100%;  position:absolute; left:0; top:0; cursor: pointer; }
 .btn_play:hover {background: url(../images/icon_playbox_on.png) no-repeat;}
 
 span.title_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:12px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
 span.sub_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:33px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
 
 .txt_year span {font-size:23px; font-weight:800; color:#767676; display:inline-block; float:left; width:60px; margin-right:0px;}
 .txt_year ul {padding-top:18px; margin-left:80px; border-left:1px solid #d9d9d9;}
 .txt_year li {font-size:12px; line-height:24px; margin-left:26px;}
 .txt_year li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
 .circle {background: #fff; width:30px; height:30px; border:9px solid #c0170d; border-radius:50%; position:absolute; left:66px; top:44px;}
 .area_year:before {content: ''; position: absolute; top:0; left:73px; width:15px; height:15px; background: #a9afce; border-radius:50%;}
 
 .vertical ul li label {padding:14px;}
 .mr40 {margin-right:17px !important;}
 .ml20 {margin-left:2px !important;}
 .accordion label, .accordion p {font-size:12px;}
 .vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {padding:7px 20px;  border:1px solid #82c51d; border-top:none;
   height:100%; min-height:100px;}
 .accordion p {line-height:20px;}
 }

/*width 375이하 에서 적용이 됨*/
@media all and (max-width:375px) {  
  /*main banner*/
  .mainImg_txt span.block {display:block;}
  .mainImg_txt02.block02 {padding-top:98px;}
  .mainImg_txt {padding:30px 0 0 44px; font-size:24px; line-height:29px; font-weight:600; letter-spacing: -1px;}
  .mainImg_txt02 {color:#323230; font-size:13px; line-height:21px; margin:0 44px; padding-top:70px;}
  .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-left:8px; margin-top:77px; background: url(../images/btn_pageRolling_left.gif); width:22px; height:22px; background-size:95%;}
  .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:77px; background: url(../images/btn_pageRolling_right.gif); width:22px; height:22px; background-size:95%;}
  .btn_go {margin:7px 0 0 44px;}
  .main_center {width:100%; height:295px; margin:0 auto; position:relative;}
  /*product icon*/
  .area_product {background-color:#fff; width:375px; height:243px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
  .area_product li {width:125px; height:115px; border-right:1px solid #efefef; border-bottom:1px solid #efefef; float:left; font-size:12px; text-align:center;}
  .area_product li.non_border {border-bottom:none; height:127px;}
  .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 22px 14px no-repeat; background-size: 56%;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:40px; line-height:15px;}
  .area_product li:nth-child(3) {border-right:none !important;}
  /*news, notice*/
  .board {margin-left:22px; width:345px; margin-bottom:20px;}
  .area_board {width:345px; height:340px; margin-top:21px;}
  .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:340px; overflow:hidden;}
  h2 a {font-size:12px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:7px;}
  h2 {font-size:17px; font-weight:800; margin-bottom:13px;}
  .date {font-size:11px; color:#6eb20c; margin-top:0; display:inline-block;}
  .sub_board {font-size:12px; line-height:20px;}
   /*support*/
 .icon_support a {width:80px; height:90px; text-align:center; float:left; margin-left:22px; margin-top:0;}
 .bg_support .center .pt40 {padding-top:20px !important;}
 .icon_support a span {display:inline-block; margin-top:79px;}
 .bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:230px;}
 /*footer*/
 footer {width:100%; background-color:#303030; padding-top:23px; height:230px; position:absolute;}
 .address:first-child {display:inline-block; width:90%; float:left; position:relative; margin-left:23px;}
 .address p {font-size:12px; color:#fff; line-height:20px;}
 .address:last-child {display:inline-block; width:97%; float:right; position:relative; margin-right:3%;}
 .address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
   position:absolute; top:14px; right:60px; background-size: 85%;}
   .address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
     position:absolute; top:14px; right:0; background-size: 85%;}
 
 .area_right {width:375px; padding-top:20px; float:left;}
 .area_right h3 {font-size:20px; font-weight:bold; margin:0 19px; vertical-align:bottom; padding-bottom:0; border-bottom:1px solid #ececed; height:38px; /* line-height:50px; */}
 .sub_page {padding:12px 0 0 0; width:345px; margin-left:19px;}
 .txt_title {width:360px; font-size:15px; font-weight:bold; margin-bottom:8px; line-height:19px;}
 .txt_sub {width:345px; font-size:12px; line-height:22px;}
 .sub_page img {width:98%;}
 .sub_page p.mt30 {margin-top:20px !important;}
 .sub_page p.mt50 {margin-top:23px !important;}
 .button_sub {width:360px; height:86px;}
 .button_sub li {float:left; margin-right:20px; width:160px; text-align:center; margin-top:10px; height:38px;}
 .button_sub li:nth-child(2),.button_sub li:nth-child(4),.button_sub li:nth-child(6),.button_sub li:nth-child(8),.button_sub li:nth-child(10),.button_sub li:nth-child(12) {margin-right:0;}
 .btn_docu a {display:inline-block; width:160px; height:34px; text-align:center; color:#fff; font-size:12px; line-height:34px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
 .btn_docu a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
 .basic_table {width:340px;}
 .basic_table tr th {background-color:#e6efcf; height:45px; font-size: 12px; border-right:1px solid #f0f0f0;}
 .basic_table tr td {background-color:#fff; height:45px; font-size: 12px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding:0 16px;}
 
 .txt_num {width:360px;}
 .txt_num span:first-child {font-size:31px; font-weight:800; color:#69b219; display:inline-block; float:left; width:42px; margin-right:7px;}
 .txt_num span:nth-child(2) {width:235px; display:inline-block; font-size:15px; padding-top:10px;}
 .txt_num ul {margin:12px 20px 0 50px;}
 .txt_num li {font-size:12px; line-height:24px;}
 .txt_num li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
 .txt_highlight {color:#349028;}
 
 .sub_bgcolor {min-height:0;}
 
 .small_movie_area {width:360px; height:260px;}
 .small_movie {width:360px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
 /*news, notics*/
 .accordion {width:338px;}
 
 .small_movie_area {width:360px;}
 .small_movie {width:338px; height:106px; margin-bottom:20px;}
 
 .small_movie a img {width:150px; height:105px;}
 .btn_play {width:150px; height:105px; background: url(../images/icon_playbox_off.png) no-repeat; background-size:100%;  position:absolute; left:0; top:0; cursor: pointer; }
 .btn_play:hover {background: url(../images/icon_playbox_on.png) no-repeat;}
 
 span.title_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:12px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
 span.sub_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:33px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
 
 .txt_year span {font-size:23px; font-weight:800; color:#767676; display:inline-block; float:left; width:60px; margin-right:0px;}
 .txt_year ul {padding-top:18px; margin-left:80px; border-left:1px solid #d9d9d9;}
 .txt_year li {font-size:12px; line-height:24px; margin-left:26px;}
 .txt_year li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
 .circle {background: #fff; width:30px; height:30px; border:9px solid #c0170d; border-radius:50%; position:absolute; left:66px; top:44px;}
 .area_year:before {content: ''; position: absolute; top:0; left:73px; width:15px; height:15px; background: #a9afce; border-radius:50%;}
 
 .vertical ul li label {padding:14px;}
 .mr40 {margin-right:17px !important;}
 .ml20 {margin-left:2px !important;}
 .accordion label, .accordion p {font-size:12px;}
 .vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {padding:7px 20px;  border:1px solid #82c51d; border-top:none;
   height:100%; min-height:100px;}
 .accordion p {line-height:20px;}
 }

/*width 360이하 에서 적용이 됨*/
@media all and (max-width:360px) {  
  /*main banner*/
  .mainImg_txt span.block {display:block;}
  .mainImg_txt02.block02 {padding-top:98px;}
  .mainImg_txt {padding:30px 0 0 44px; font-size:24px; line-height:29px; font-weight:600; letter-spacing: -1px;}
  .mainImg_txt02 {color:#323230; font-size:13px; line-height:21px; margin:0 44px; padding-top:70px;}
  .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-left:8px; margin-top:77px; background: url(../images/btn_pageRolling_left.gif); width:22px; height:22px; background-size:95%;}
  .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:77px; background: url(../images/btn_pageRolling_right.gif); width:22px; height:22px; background-size:95%;}
  .btn_go {margin:7px 0 0 44px;}
  .main_center {width:100%; height:295px; margin:0 auto; position:relative;}
  /*product icon*/
  .area_product {background-color:#fff; width:360px; height:243px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
  .area_product li {width:120px; height:115px; border-right:1px solid #efefef; border-bottom:1px solid #efefef; float:left; font-size:12px; text-align:center;}
  .area_product li.non_border {border-bottom:none; height:127px;}
  .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 22px 14px no-repeat; background-size: 56%;} 
  .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 22px 14px no-repeat; background-size: 56%;}
  .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:40px; line-height:15px;}
  .area_product li:nth-child(3) {border-right:none !important;}
  /*news, notice*/
  .board {margin-left:22px; width:320px; margin-bottom:20px;}
  .area_board {width:320px; height:340px; margin-top:21px;}
  .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:320px; overflow:hidden;}
  h2 a {font-size:12px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:7px;}
  h2 {font-size:17px; font-weight:800; margin-bottom:13px;}
  .date {font-size:11px; color:#6eb20c; margin-top:0; display:inline-block;}
  .sub_board {font-size:12px; line-height:20px;}
   /*support*/
 .icon_support a {width:80px; height:90px; text-align:center; float:left; margin-left:18px; margin-top:0;}
 .bg_support .center .pt40 {padding-top:20px !important;}
 .icon_support a span {display:inline-block; margin-top:79px;}
 .bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:230px;}
 /*footer*/
 footer {width:100%; background-color:#303030; padding-top:23px; height:230px; position:absolute;}
 .address:first-child {display:inline-block; width:90%; float:left; position:relative; margin-left:23px;}
 .address p {font-size:12px; color:#fff; line-height:20px;}
 .address:last-child {display:inline-block; width:97%; float:right; position:relative; margin-right:3%;}
 .address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
   position:absolute; top:14px; right:60px; background-size: 85%;}
   .address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
     position:absolute; top:14px; right:0; background-size: 85%;}
 
 .area_right {width:360px; padding-top:20px; float:left;}
 .area_right h3 {font-size:20px; font-weight:bold; margin:0 19px; vertical-align:bottom; padding-bottom:0; border-bottom:1px solid #ececed; height:38px; /* line-height:50px; */}
 .sub_page {padding:12px 0 0 0; width:320px; margin-left:19px;}
 .txt_title {width:320px; font-size:15px; font-weight:bold; margin-bottom:8px; line-height:19px;}
 .txt_sub {width:320px; font-size:12px; line-height:22px;}
 .sub_page img {width:100%;}
 .sub_page p.mt30 {margin-top:20px !important;}
 .sub_page p.mt50 {margin-top:23px !important;}
 .button_sub {width:320px; height:86px;}
 .button_sub li {float:left; margin-right:20px; width:150px; text-align:center; margin-top:10px; height:38px;}
 .button_sub li:nth-child(2),.button_sub li:nth-child(4),.button_sub li:nth-child(6),.button_sub li:nth-child(8),.button_sub li:nth-child(10),.button_sub li:nth-child(12) {margin-right:0;}
 .btn_docu a {display:inline-block; width:150px; height:34px; text-align:center; color:#fff; font-size:12px; line-height:34px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
 .btn_docu a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
 .basic_table {width:320px;}
 .basic_table tr th {background-color:#e6efcf; height:45px; font-size: 12px; border-right:1px solid #f0f0f0;}
 .basic_table tr td {background-color:#fff; height:45px; font-size: 12px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding:0 16px;}
 
 .txt_num {width:320px;}
 .txt_num span:first-child {font-size:31px; font-weight:800; color:#69b219; display:inline-block; float:left; width:42px; margin-right:7px;}
 .txt_num span:nth-child(2) {width:235px; display:inline-block; font-size:15px; padding-top:10px;}
 .txt_num ul {margin:12px 0 0 50px;}
 .txt_num li {font-size:12px; line-height:24px;}
 .txt_num li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
 .txt_highlight {color:#349028;}
 
 .sub_bgcolor {min-height:0;}
 
 .small_movie_area {width:320px; height:260px;}
 .small_movie {width:320px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
 /*news, notics*/
 .accordion {width:320px;}
 
 .small_movie_area {width:320px;}
 .small_movie {width:320px; height:106px; margin-bottom:20px;}
 
 .small_movie a img {width:150px; height:105px;}
 .btn_play {width:150px; height:105px; background: url(../images/icon_playbox_off.png) no-repeat; background-size:100%;  position:absolute; left:0; top:0; cursor: pointer; }
 .btn_play:hover {background: url(../images/icon_playbox_on.png) no-repeat;}
 
 span.title_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:12px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
 span.sub_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:33px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
 
 .txt_year span {font-size:23px; font-weight:800; color:#767676; display:inline-block; float:left; width:60px; margin-right:0px;}
 .txt_year ul {padding-top:18px; margin-left:80px; border-left:1px solid #d9d9d9;}
 .txt_year li {font-size:12px; line-height:24px; margin-left:26px;}
 .txt_year li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
 .circle {background: #fff; width:30px; height:30px; border:9px solid #c0170d; border-radius:50%; position:absolute; left:66px; top:44px;}
 .area_year:before {content: ''; position: absolute; top:0; left:73px; width:15px; height:15px; background: #a9afce; border-radius:50%;}
 
 .vertical ul li label {padding:14px;}
 .mr40 {margin-right:17px !important;}
 .ml20 {margin-left:2px !important;}
 .accordion label, .accordion p {font-size:12px;}
 .vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {padding:7px 20px;  border:1px solid #82c51d; border-top:none;
   height:100%; min-height:100px;}
 .accordion p {line-height:20px;}
 }



/*width 320이하 에서 적용이 됨*/
@media all and (max-width:320px) {  
 /*main banner*/
 .mainImg_txt span.block {display:block;}
 .mainImg_txt02.block02 {padding-top:98px;}
 .mainImg_txt {padding:30px 0 0 44px; font-size:24px; line-height:29px; font-weight:600; letter-spacing: -1px;}
 .mainImg_txt02 {color:#323230; font-size:13px; line-height:21px; margin:0 44px; padding-top:70px;}
 .btn_pageRolling span:nth-child(1) a {float:left; vertical-align:middle; margin-left:8px; margin-top:77px; background: url(../images/btn_pageRolling_left.gif); width:22px; height:22px; background-size:95%;}
 .btn_pageRolling span:nth-child(2) a {float:right; vertical-align:middle; margin-right:8px; margin-top:77px; background: url(../images/btn_pageRolling_right.gif); width:22px; height:22px; background-size:95%;}
 .btn_go {margin:7px 0 0 44px;}
 .main_center {width:100%; height:295px; margin:0 auto; position:relative;}
 /*product icon*/
 .area_product {background-color:#fff; width:320px; height:243px; margin-top:-92px; box-shadow: 4px 4px 5px -3px #d4dbe2, -4px -4px 5px -3px #d4dbe2;}
 .area_product li {width:106px; height:115px; border-right:1px solid #efefef; border-bottom:1px solid #efefef; float:left; font-size:12px; text-align:center;}
 .area_product li.non_border {border-bottom:none; height:127px;}
 .area_product li:nth-child(1) a  {display:inline-block; background: url(../images/icon_product01.png) 22px 14px no-repeat; background-size: 56%;} 
 .area_product li:nth-child(1) a:hover {background: url(../images/icon_product01_on.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(2) a {display:inline-block; background: url(../images/icon_product02.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(2) a:hover {background: url(../images/icon_product02_on.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(3) a {display:inline-block; background: url(../images/icon_product03.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(3) a:hover { background: url(../images/icon_product03_on.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(4) a {display:inline-block; background: url(../images/icon_product04.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(4) a:hover {background: url(../images/icon_product04_on.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(5) a {display:inline-block; background: url(../images/icon_product05.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(5) a:hover {background: url(../images/icon_product05_on.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(6) a {display:inline-block; background: url(../images/icon_product06.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li:nth-child(6) a:hover {background: url(../images/icon_product06_on.png) 22px 14px no-repeat; background-size: 56%;}
 .area_product li a .txt_product {/*color:#333;*/ font-weight:bold; margin-top:40px; line-height:15px;}
 /*news, notice*/
 .board {margin-left:22px; width:288px; margin-bottom:20px;}
 .area_board {width:320px; height:340px; margin-top:21px;}
 .loss {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:280px; overflow:hidden;}
 h2 a {font-size:12px; font-weight:normal; color:#1a3487 !important; float:right; margin-right:7px;}
 h2 {font-size:17px; font-weight:800; margin-bottom:13px;}
 .date {font-size:11px; color:#6eb20c; margin-top:0; display:inline-block;}
 .sub_board {font-size:12px; line-height:20px;}
  /*support*/
.icon_support a {width:70px; height:80px; text-align:center; float:left; margin-left:18px; margin-top:0;}
.bg_support .center .pt40 {padding-top:20px !important;}
.icon_support a span {display:inline-block; margin-top:79px;}
.bg_support {margin-top:0; background: url(../images/area_support.jpg) no-repeat; background-size: cover; height:230px;}
/*footer*/
footer {width:100%; background-color:#303030; padding-top:23px; height:230px; position:absolute;}
.address:first-child {display:inline-block; width:90%; float:left; position:relative; margin-left:23px;}
.address p {font-size:12px; color:#fff; line-height:20px;}
.address:last-child {display:inline-block; width:97%; float:right; position:relative; margin-right:3%;}
.address a:first-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_youtube.png) no-repeat; width:58px; height:58px; 
  position:absolute; top:14px; right:60px; background-size: 85%;}
  .address a:last-child {text-indent:-9999px; display:inline-block; background: url(../images/icon_facebook.png) no-repeat; width:58px; height:58px; 
    position:absolute; top:14px; right:0; background-size: 85%;}

.area_right {width:320px; padding-top:20px; float:left;}
.area_right h3 {font-size:20px; font-weight:bold; margin:0 19px; vertical-align:bottom; padding-bottom:0; border-bottom:1px solid #ececed; height:38px; /* line-height:50px; */}
.sub_page {padding:12px 0 0 0; width:290px; margin-left:19px;}
.txt_title {width:290px; font-size:15px; font-weight:bold; margin-bottom:8px; line-height:19px;}
.txt_sub {width:290px; font-size:12px; line-height:22px;}
.sub_page img {width:95%;}
.sub_page p.mt30 {margin-top:20px !important;}
.sub_page p.mt50 {margin-top:23px !important;}
.button_sub {width:320px; height:86px;}
.button_sub li {float:left; margin-right:10px; width:138px; text-align:center; margin-top:10px; height:38px;}
.button_sub li:nth-child(2),.button_sub li:nth-child(4),.button_sub li:nth-child(6),.button_sub li:nth-child(8),.button_sub li:nth-child(10),.button_sub li:nth-child(12) {margin-right:0;}
.btn_docu a {display:inline-block; width:138px; height:34px; text-align:center; color:#fff; font-size:12px; line-height:34px; border-radius:3px; background: linear-gradient(180deg, rgba(152,206,10,1) 0%, rgba(96,172,27,1) 100%);}
.btn_docu a:hover {background: linear-gradient(180deg,  rgba(96,172,27,1) 0%,rgba(152,206,10,1) 100%);}
.basic_table {width:287px;}
.basic_table tr th {background-color:#e6efcf; height:45px; font-size: 12px; border-right:1px solid #f0f0f0;}
.basic_table tr td {background-color:#fff; height:45px; font-size: 12px; border-right:1px solid #f0f0f0; border-bottom:1px solid #e0ecc2; padding:0 16px;}

.txt_num {width:290px;}
.txt_num span:first-child {font-size:31px; font-weight:800; color:#69b219; display:inline-block; float:left; width:42px; margin-right:7px;}
.txt_num span:nth-child(2) {width:235px; display:inline-block; font-size:15px; padding-top:10px;}
.txt_num ul {margin:12px 0 0 50px;}
.txt_num li {font-size:12px; line-height:24px;}
.txt_num li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.txt_highlight {color:#349028;}

.sub_bgcolor {min-height:0;}

.small_movie_area {width:290px; height:260px;}
.small_movie {width:290px; height:260px; float:left; margin-bottom:40px; position:relative; background-color: #fff; border:1px solid #dcdcdc; border-left:none}
/*news, notics*/
.accordion {width:290px;}

.small_movie_area {width:290px;}
.small_movie {width:290px; height:106px; margin-bottom:20px;}

.small_movie a img {width:150px; height:105px;}
.btn_play {width:150px; height:105px; background: url(../images/icon_playbox_off.png) no-repeat; background-size:100%;  position:absolute; left:0; top:0; cursor: pointer; }
.btn_play:hover {background: url(../images/icon_playbox_on.png) no-repeat;}

span.title_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:12px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}
span.sub_demo {font-size:12px; padding:0 28px; position:absolute; left:135px; top:33px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:166px; overflow:hidden;}

.txt_year span {font-size:23px; font-weight:800; color:#767676; display:inline-block; float:left; width:60px; margin-right:0px;}
.txt_year ul {padding-top:18px; margin-left:80px; border-left:1px solid #d9d9d9;}
.txt_year li {font-size:12px; line-height:24px; margin-left:26px;}
.txt_year li:before {content: ''; display: inline-block; background: url(../images/bullet_list.gif) 0 0 no-repeat; width:10px; height:7px; padding-left:10px;}
.circle {background: #fff; width:30px; height:30px; border:9px solid #c0170d; border-radius:50%; position:absolute; left:66px; top:44px;}
.area_year:before {content: ''; position: absolute; top:0; left:73px; width:15px; height:15px; background: #a9afce; border-radius:50%;}

.vertical ul li label {padding:14px;}
.mr40 {margin-right:17px !important;}
.ml20 {margin-left:2px !important;}
.accordion label, .accordion p {font-size:12px;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {padding:7px 20px;  border:1px solid #82c51d; border-top:none;
  height:100%; min-height:100px;}
.accordion p {line-height:20px;}
}