/*table design 1 _order*/
.tabledesign1_order {
    border-collapse: collapse;
    width: 100%;
}
.tabledesign1_order td, .tabledesign1_order th {
    border: 1px solid #ddd;
    padding: 7px;
    line-height:1.5;
}
/*.tabledesign1_order tr:nth-child(even){background-color: #f2f2f2;}
.tabledesign1_order tr:hover {background-color: #ddd;}*/
.tabledesign1_order th {
    padding: 7px;
    text-align:center;
    /*background-color:#f0f0f0;*/
}
.tabledesign1_order td {
    /*background-color: #fff;*/
}

/*table design 03 _order*/
table.type03_order {
  border-collapse: collapse;
  text-align: left;
  line-height: 1.5;
  border-top: 1px solid #ccc;
  border-left: 3px solid #369;
  margin : 20px 10px;
}
table.type03_order th {
  width: 147px;
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  color: #153d73;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
table.type03_order td {
  width: 349px;
  padding: 10px;
  vertical-align: top;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/*table design09_order*/
table.table_blacktop {
  border-collapse: collapse;
  text-align: left;
  line-height: 1.5;
  width: 100%;
}
table.table_blacktop th {
  padding: 7px;
  font-weight: bold;
  vertical-align: top;
  /*color: #95a5a6;*/
  /*border-bottom: 1.5px solid black;*/
  border-bottom: 1px solid #bdc3c7;
}
table.table_blacktop td {
  padding: 7px;
  vertical-align: top;
  border-bottom: 1px solid #bdc3c7;
  /*background-color: #fff;*/
}
table.table_blacktop td:nth-child(1){
  padding-left:0;
}
table.table_blacktop tr:nth-child(1){
  border-top:1.5px solid black;
}
table.table_blacktop td:nth-child(odd){
  /*background-color: #f7f9fc;*/
}
table.table_blacktop td:nth-child(even){
  /*background-color: #fff;*/
}

/*table design09_order*/
table.table_bluetop {
  border-collapse: collapse;
  text-align: left;
  line-height: 1.5;
  width: 100%;
}
table.table_bluetop thead th {
  padding: 7px;
  font-weight: bold;
  vertical-align: top;
  /*color: #95a5a6;*/
  /*border-bottom: 1.5px solid black;*/
}
table.table_bluetop td {
  padding: 7px;
  vertical-align: top;
  border-bottom: 1px solid #bdc3c7;
  /*background-color: #fff;*/
}
table.table_bluetop td:nth-child(1){
  padding-left:0;
}
table.table_bluetop tr:nth-child(1){
  border-top:1.5px solid #00cddc;
}
table.table_bluetop td:nth-child(odd){
  /*background-color: #f7f9fc;*/
}
table.table_bluetop td:nth-child(even){
  /*background-color: #fff;*/
}

/*step-box START*/
/* 단계별 상태 스타일 */
.step-box {
  padding:10px;
  background:#fff;
}
.step-state ul:after {
  content:'';
  display:block;
  clear:both
}
.step-state ul li {
  float:left;
  position:relative;
  /*width:33%;*/ /* 진행바를 단계수만큼 등분 */
  padding-top:50px; /* 진행바 영역 확보 */
  font-size:15px;
  font-weight:bold;
  text-align:center;
  line-height:12px;
  color:#666
}
/* 도전중, 달성 텍스트 영역 */
.step-state ul li p:after {
  position:absolute; /* absolute 기준은 li 영역 */
  width:41px;
  height:24px;
  margin-right:-20px;
  background:url(/images/icon/step_status.png) no-repeat 0 0;
  background-size:auto 24px;
  background-position:-58px 0;
  top:0;
  right:0;
  color:#fff;
  font-size:11px;
  line-height:16px;
  letter-spacing:-.5px;
}
.step-state ul li span {
  display:block;
  margin-top:5px;
  font-weight:normal;
  color:#898989;
  font-size:12px
}
/* 회색 진행바 생성 */
.step-state ul li:before {
  position:absolute;
  top:35px;
  left:0;
  right:0;
  height:3px;
  background:#ddd;
  content:''
}
/* 첫 번째 진행바 반만 생성*/
.step-state ul li:nth-child(1):before {
  left:50%
}
/* 마지막 진행바 반만 생성*/
/*.step-state ul li:nth-child(3):before {
  right:50%
}*/
/* 화살표 상태 아이콘 */
.step-state ul li:after {
  position:absolute;
  top:27px;
  left:50%;
  width:20px;
  height:20px;
  margin-left:-10px;
  background:url(/images/icon/step_status.png) no-repeat 0 0;
  background-size:auto 24px;
  background-position:0 0;
  content:''
}
/* 활성화 진행바 및 활성화 화살표 아이콘 표시 */
/* 활성화 상태바 */
.step-state.step1 ul li:nth-child(1):before,
.step-state.step2 ul li:nth-child(-n+2):before,
.step-state.step2-ing ul li:nth-child(-n+2):before,
.step-state.step3 ul li:nth-child(-n+3):before,
.step-state.step3-ing ul li:nth-child(-n+3):before,
.step-state.step4 ul li:nth-child(-n+4):before,
.step-state.step4-ing ul li:nth-child(-n+4):before,
.step-state.step5 ul li:nth-child(-n+5):before {
  /*background:#ff889b;*/background:#ef0000;
}
/* 활성화 아이콘 표시 */
.step-state.step1 ul li:nth-child(1):after,
.step-state.step2 ul li:nth-child(-n+2):after,
.step-state.step2-ing ul li:nth-child(-n+2):after,
.step-state.step3 ul li:nth-child(-n+3):after,
.step-state.step3-ing ul li:nth-child(-n+3):after,
.step-state.step4 ul li:nth-child(-n+4):after,
.step-state.step4-ing ul li:nth-child(-n+4):after,
.step-state.step5 ul li:nth-child(-n+5):after {
  background-position:-20px 0
}
/* 도전 중일 경우의 1/2 영역 비활성화 상태바 영역 */
.step-state ul li p:before {
  position:absolute;
  top:35px;
  left:50%;
  right:0;
  height:3px;
  content:'';
}
.step-state.step1 ul li:nth-child(1) p:before,
.step-state.step2 ul li:nth-child(2) p:before,
.step-state.step3 ul li:nth-child(3) p:before {
  background:#ddd
}
/* "달성" 텍스트 표시 */
.step-state.step1 ul li:nth-child(1) p:after,
.step-state.step2 ul li:nth-child(2) p:after,
.step-state.step3 ul li:nth-child(3) p:after {
  /*content:'진행중';*/
  right:50%
}
/*step-box END*/

/*accordian menu START*/
#accordian {
    background: #fff;
    color: black;
}
#accordian .level2 {
    background-color:#F7F9F9;
}
#accordian h3 {
    background: #E5E7E9;
}
#accordian h3 a {
    padding: 20px;
    /*line-height: 34px;*/
    display: block;
    color: black;
    text-decoration: none;
}
#accordian h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian li {
    list-style-type: none;
    cursor: pointer;
}
#accordian ul ul li a,
#accordian h4 {
    color: black;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 27px;
    display: block;
    padding: 15px 15px 15px 15px;
    transition: all 0.15s;
    position: relative;
    border-top: 1px solid #c5cae9;
}
/*#accordian ul ul li a:hover {
    border-left: 5px solid #3f51b5;
    cursor: default;
}*/
#accordian ul ul {
    display: none;
}
#accordian li.active>ul {
    display: block;
}
#accordian ul ul ul {
    /*margin-left: 30px;*/margin-left:0px;
    /*border-left: 1px dotted rgba(0, 0, 0, 0.5);*/border-left:5px solid #3f51b5;
}
#accordian a:not(:only-child):after {
    content: "\f107";
    font-family: fontawesome;
    font-size: 1.2em;
    position: absolute;
    right: 20px;
    top: 10;
}
#accordian .active>a:not(:only-child):after {
    content: "\f106";
}
.level2>ul { background-color:#fff; }
/*accordian menu END*/

/*table design 1*/
.tabledesign1 {
    border-collapse: collapse;
    width: 100%;
    border-top: 1.5px solid black;
}
.tabledesign1 td, .tabledesign1 th {
    border: 1px solid #ddd;
    padding: 8px;
    line-height:1.5;
}
/*.tabledesign1 tr:nth-child(even){background-color: #f2f2f2;}
.tabledesign1 tr:hover {background-color: #ddd;}*/
.tabledesign1 th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align:center;
    background-color:#f0f0f0;
    /*color:black;*/
}

/*table design 09*/
table.type09 {
  border-collapse: collapse;
  text-align: left;
  line-height: 1.5;
  width: 100%;
}
table.type09 thead th {
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  color: #369;
  border-bottom: 3px solid #036;
}
table.type09 tbody th {
  padding: 10px;
  font-weight: bold;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
  background: #f3f6f7;
  color: #221a70;
}
table.type09 td {
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px solid #ccc;
}

/*flat 버튼 css START*/
/* #white Flat Button   
==================================================*/
.white-flat-button {
  color:black;
  background: white;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #sun flower Button
==================================================*/
.whitegrey-flat-box {
  color: black;
  background: #F6F6F6;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #sun flower Button
==================================================*/
.sun-flower-button {
  color: white;
  background: #f1c40f;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #sun flower flat Button
==================================================*/
.sun-flower-flat-button {
  color: white;
  background: #f1c40f;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Orange Flat Button 
==================================================*/
.orange-flat-button {
  color: white;
  background: #f39c12;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Carrot Flat Button  
==================================================*/
.carrot-flat-button {
  color: white;
  background: #e67e22;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Pumpkin Flat Button  
==================================================*/
.pumpkin-flat-button {
  color: white;
  background: #d35400;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Alizarin Flat Button
==================================================*/
.alizarin-flat-button {
  color: white;
  background: #e74c3c;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Pomegranate Flat Button   
==================================================*/
.pomegranate-flat-button {
  color: white;
  background: #c0392b;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Turquoise Flat Button  
==================================================*/
.turquoise-flat-button {
  color: white;
  background: #1abc9c;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Green Sea Flat Button
==================================================*/
.green-sea-flat-button {
  color: white;
  background: #16a085;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Emerald Flat Button  
==================================================*/
.emerald-flat-button {
  color: white;
  background: #2ecc71;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Nephritis Flat Button 
==================================================*/
.nephritis-flat-button {
  color: white;
  background: #27ae60;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Peter River Flat Button
==================================================*/
.peter-river-flat-button {
  color: white;
  background: #3498db;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Belize Hole Sea Flat Button   
==================================================*/
.belize-hole-flat-button {
  color: white;
  background: #2980b9;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Amethyst Flat Button 
==================================================*/
.amethyst-flat-button {
  color: white;
  background: #9b59b6;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Wisteria Flat Button
==================================================*/
.wisteria-flat-button {
  color: white;
  background: #8e44ad;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Wet Asphalt Flat Button   
==================================================*/
.wet-asphalt-flat-button {
  color: white;
  background: #34495e;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Wet Asphalt Flat Button 
==================================================*/
.wet-asphalt-flat-button {
  color: white;
  background: #34495e;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Midnight Blue Flat Button
==================================================*/
.midnight-blue-flat-button {
  color: white;
  background: #2c3e50;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Clouds Flat Button   
==================================================*/
.clouds-flat-button {
  color:#454545;
  background: #f0f0f0;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Silver Flat Button 
==================================================*/
.silver-flat-button {
  color:white;
  background: #bdc3c7;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Concrete Flat Button
==================================================*/
.concrete-flat-button {
  color:white;
  background: #859596;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Asbestos Flat Button     
==================================================*/
.asbestos-flat-button {
  color:white;
  background: #7f8c8d;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Asbestos Flat Button 
==================================================*/
.asbestos-flat-button {
  color:white;
  background: #7f8c8d;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Graphite Flat Button
==================================================*/
.graphite-flat-button {
  color:white;
  background: #454545;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}

/* #Navy Flat Button
==================================================*/
.navy-flat-button {
  color:white;
  background: #2E2180;
  text-align: center;
  /*border: 1px solid rgba(0,0,0,0.21);*/border:0;
}
/*flat 버튼 css END*/

/*로고색 버튼 START*/
.ikef-navy-button {
  color: white;
  background: #2e2181;
  text-align: center;
  border: 0;
}
.ikef-navy-color {
  color: #221a70;
}
.ikef-navy-bg {
  background-color: #2e2181;
  color: white;
}
.ikef-yellow-button {
  color: black;
  background: #ffc200;
  text-align: center;
  border: 0;
}
.ikef-yellow-bg {
  background-color: #ffc200;
}
.ikef-red-bg {
  background-color: #ef0000;
  color: #fff;
}
.ikef-silver-bg {
  background-color: #bdc3c7;
}
.ikef-white-bg {
  background-color: #fff;
}
/*로고색 버튼 END*/

/*메인색 버튼 START*/
.ikef-red-button {
  background-color: #ff2d00;
  padding:7px 15px;border-radius:18px;color:black;font-weight:bold;cursor:pointer;
  text-align: center;
  border: 0;
}
.ikef-skyblue-button {
  background-color: #00cddc;
  padding:7px 15px;border-radius:18px;color:black;font-weight:bold;cursor:pointer;
  text-align: center;
  border:0;
}
.ikef-skyblue-bg {
  background-color: #00cddc;
  color: black;font-weight: bold;
}
.ikef-silver-button {
  background-color: #bdc3c7;
  padding:7px 15px;border-radius:18px;color:black;font-weight:bold;cursor:pointer;
  text-align: center;
  border:0;
}
/*메인색 버튼 END*/

/*file upload input design START*/
.filebox input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}
.filebox label {
  display: inline-block;
  padding: 10px 20px;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #ebebeb;
  border-radius: 5px;
}
/* named upload */
.filebox .upload-name {
  display: inline-block;
  height: 34px;
  padding: 0 10px;
  vertical-align: middle;
  background-color: #f5f5f5;
  border: 1px solid #ebebeb;
}
/*file upload input design END*/

/*accordian menu START*/
#accordian {
    background: #fff;
    color: black;
}
#accordian .level2 {
    background-color:#F7F9F9;
}
#accordian h3 {
    background: #E5E7E9;
}
#accordian h3 a {
    padding: 20px;
    /*line-height: 34px;*/
    display: block;
    color: black;
    text-decoration: none;
}
#accordian h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian li {
    list-style-type: none;
    cursor: pointer;
}
#accordian ul ul li a,
#accordian h4 {
    color: black;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 27px;
    display: block;
    padding: 15px 15px 15px 15px;
    transition: all 0.15s;
    position: relative;
    border-top: 1px solid #c5cae9;
}
/*#accordian ul ul li a:hover {
    border-left: 5px solid #3f51b5;
    cursor: default;
}*/
#accordian ul ul {
    display: none;
}
#accordian li.active>ul {
    display: block;
}
#accordian ul ul ul {
    /*margin-left: 30px;*/margin-left:0px;
    /*border-left: 1px dotted rgba(0, 0, 0, 0.5);*/border-left:5px solid #3f51b5;
}
#accordian a:not(:only-child):after {
    content: "\f107";
    font-family: fontawesome;
    font-size: 1.2em;
    position: absolute;
    right: 20px;
    top: 10;
}
#accordian .active>a:not(:only-child):after {
    content: "\f106";
}
.level2>ul { background-color:#fff; }
/*accordian menu END*/

/*speech bubble START*/
.talk-bubble 
{
    display:inline-block;position:relative;min-width:100px;height:auto;background-color:lightyellow;
}
.talk-border{
  border: 2px solid #666;
}
.talk-round{
  border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
/*Right triangle, placed bottom left side slightly in*/
.tri-right.talk-border.btm-left-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  right: auto;
  top: auto;
  bottom: -17px;
  border: 8px solid;
  border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 32px;
  right: auto;
  top: auto;
  bottom: -12px;
  border: 6px solid;
  border-color: lightyellow transparent transparent lightyellow;
}
/*Right triangle, placed top left side slightly in*/
.tri-right.talk-border.top-left-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  right: auto;
  top: auto;
  top: -17px;
  border: 8px solid;
  border-color:  transparent #666 #666 transparent ;
}
.tri-right.top-left-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 32px;
  right: auto;
  top: auto;
  top: -12px;
  border: 6px solid;
  border-color: transparent lightyellow lightyellow transparent;
}

.talk-text {
    padding: 10px;
    font-size: 0.8em;
}
/*speech bubble END*/

/*css animaiton*/
/*좌우 흔듬*/
.shk_this {
  transform: translate3d(0, 0, 0);
  animation-name: shakeMe;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes shakeMe {
  2%, 18% {
      transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
      transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
      transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
      transform: translate3d(5px, 0, 0);
  }
  
  18.1% {
      transform: translate3d(0px, 0, 0);
  }
}
.bounce_shk {
    animation: bounce_shake 1.5s ease-out infinite;
}
@keyframes bounce_shake{
  0%   { transform: scale(1,1)      translateY(0); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-5px); }
  32% { transform: scale(1.2) translateY(-5px); }
  35%, 40% { transform: scale(1.2) translateY(-5px) rotate(-20deg)}
  45%, 50% { transform: scale(1.2) translateY(-5px) rotate(20deg)}
  60%  { transform: scale(1.05,.95) translateY(0); }
  70%  { transform: scale(1.05,.95) translateY(0); }
  80%  { transform: scale(1,1)      translateY(-3px); }
  95%  { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}