﻿@charset "utf-8";
@import url("font-awesome.min.css");
@import url("base.css");
@import url("layout.css");
@import url("table.css");
@import url("gnb.css");
@import url("media_mobile.css");


/* mobile-icon */

.icon-pls-step-01{background: url(../images/icon-pls-01.png) no-repeat; background-size:90px 90px;  width:90px; height:90px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-step-02{background: url(../images/icon-pls-02.png) no-repeat; background-size:90px 90px; width:90px; height:90px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-step-03{background: url(../images/icon-pls-03.png) no-repeat; background-size:90px 90px; width:90px; height:90px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.bu-checked {background: url(../images/bu-check.png) no-repeat 0 4px; background-size:15px 12px;  display:inline-block; padding-left: 20px; color:#22c276}
a.bu-checked {color:#22c276}



a.active .icon-pls-01{background: url(../images/icon.png) no-repeat; background-position:0 -560px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
a.active .icon-pls-02{background: url(../images/icon.png) no-repeat; background-position:-70px -560px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
a.active .icon-pls-03{background: url(../images/icon.png) no-repeat; background-position:-140px -560px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
a.active .icon-pls-04{background: url(../images/icon.png) no-repeat; background-position:-210px -560px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
a.active .icon-pls-05{background: url(../images/icon.png) no-repeat; background-position:-280px -560px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-01{background: url(../images/icon.png) no-repeat; background-position:0 -630px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-02{background: url(../images/icon.png) no-repeat; background-position:-70px -630px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-03{background: url(../images/icon.png) no-repeat; background-position:-140px -630px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-04{background: url(../images/icon.png) no-repeat; background-position:-210px -630px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-pls-05{background: url(../images/icon.png) no-repeat; background-position:-280px -630px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-game-01{background: url(../images/icon.png) no-repeat; background-position:0 -490px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-game-02{background: url(../images/icon.png) no-repeat; background-position:-70px -490px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-game-03{background: url(../images/icon.png) no-repeat; background-position:-140px -490px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-game-04{background: url(../images/icon.png) no-repeat; background-position:-210px -490px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-game-05{background: url(../images/icon.png) no-repeat; background-position:-280px -490px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-game-06{background: url(../images/icon.png) no-repeat; background-position:-350px -490px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-stress-01{background: url(../images/icon.png) no-repeat; background-position:0 -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-02{background: url(../images/icon.png) no-repeat; background-position:-70px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-03{background: url(../images/icon.png) no-repeat; background-position:-140px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-04{background: url(../images/icon.png) no-repeat; background-position:-210px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-05{background: url(../images/icon.png) no-repeat; background-position:-280px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-06{background: url(../images/icon.png) no-repeat; background-position:-350px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-07{background: url(../images/icon.png) no-repeat; background-position:-420px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-stress-08{background: url(../images/icon.png) no-repeat; background-position:-490px -420px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-03-02-01{background: url(../images/icon.png) no-repeat; background-position:0px -350px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-02-02{background: url(../images/icon.png) no-repeat; background-position:-70px -350px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-02-03{background: url(../images/icon.png) no-repeat; background-position:-140px -350px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-02-04{background: url(../images/icon.png) no-repeat; background-position:-210px -350px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-02-05{background: url(../images/icon.png) no-repeat; background-position:-280px -350px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-people-01{background: url(../images/icon.png) no-repeat; background-position:0 -280px; background-size:700px 700px;  width:59px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-people-02{background: url(../images/icon.png) no-repeat; background-position:-70px -280px; background-size:700px 700px;  width:59px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-people-03{background: url(../images/icon.png) no-repeat; background-position:-140px -280px; background-size:700px 700px;  width:59px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-people-04{background: url(../images/icon.png) no-repeat; background-position:-210px -280px; background-size:700px 700px;  width:59px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-people-05{background: url(../images/icon.png) no-repeat; background-position:-280px -280px; background-size:700px 700px;  width:59px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-notice{background:url(../images/icon.png) no-repeat; background-position:-490px 0px; background-size:700px 700px; width:19px; height:19px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-voice{background:url(../images/icon.png) no-repeat; background-position:-420px 0px; background-size:700px 700px;  width:70px; height:70px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-gnb-01{background:#22c276 url(../images/icon.png) no-repeat; background-position:0 0px; background-size:700px 700px;  width:47px; height:47px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-gnb-02{background:#22c276 url(../images/icon.png) no-repeat; background-position:-140px 0; background-size:700px 700px;  width:47px; height:47px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-gnb-03{background:#22c276 url(../images/icon.png) no-repeat; background-position:-280px 0; background-size:700px 700px;  width:47px; height:47px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-gnb-01.active{background:#22c276 url(../images/icon.png) no-repeat; background-position:-70px 0px; background-size:700px 700px;  width:47px; height:47px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-gnb-02.active{background:#22c276 url(../images/icon.png) no-repeat; background-position:-210px 0; background-size:700px 700px;  width:47px; height:47px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-gnb-03.active{background:#22c276 url(../images/icon.png) no-repeat; background-position:-350px 0; background-size:700px 700px;  width:47px; height:47px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.sub-icon i.icon-gnb-01{background:#22c276 url(../images/icon.png) no-repeat; background-position:0 0px; background-size:350px 350px;  width:23px; height:23px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.sub-icon i.icon-gnb-02{background:#22c276 url(../images/icon.png) no-repeat; background-position:-140px 0; background-size:350px 350px;  width:23px; height:23px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.sub-icon i.icon-gnb-03{background:#22c276 url(../images/icon.png) no-repeat; background-position:-280px 0; background-size:350px 350px;  width:23px; height:23px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.sub-icon i.icon-gnb-01.active{background:#22c276 url(../images/icon.png) no-repeat; background-position:-35px 0px; background-size:350px 350px;  width:23px; height:23px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.sub-icon i.icon-gnb-02.active{background:#22c276 url(../images/icon.png) no-repeat; background-position:-105px 0; background-size:350px 350px;  width:23px; height:23px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.sub-icon i.icon-gnb-03.active{background:#22c276 url(../images/icon.png) no-repeat; background-position:-175px 0; background-size:350px 350px;  width:23px; height:23px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}


.icon-01-01{background: url(../images/icon.png) no-repeat; background-position:0 -70px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-01-02{background: url(../images/icon.png) no-repeat; background-position:-70px -70px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-01-03{background: url(../images/icon.png) no-repeat; background-position:-140px -70px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-01-04{background: url(../images/icon.png) no-repeat; background-position:-210px -70px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-01-05{background: url(../images/icon.png) no-repeat; background-position:-280px -70px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-01-06{background: url(../images/icon.png) no-repeat; background-position:-350px -70px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-02-01{background: url(../images/icon.png) no-repeat; background-position:0 -140px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-02-02{background: url(../images/icon.png) no-repeat; background-position:-70px -140px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-02-03{background: url(../images/icon.png) no-repeat; background-position:-140px -140px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-02-04{background: url(../images/icon.png) no-repeat; background-position:-210px -140px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}

.icon-03-01{background: url(../images/icon.png) no-repeat; background-position:0 -210px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-02{background: url(../images/icon.png) no-repeat; background-position:-70px -210px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-03{background: url(../images/icon.png) no-repeat; background-position:-140px -210px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}
.icon-03-04{background: url(../images/icon.png) no-repeat; background-position:-210px -210px; background-size:700px 700px;  width:65px; height:65px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle;}


.btn-back{background:url(../images/btn-header-back.png) no-repeat; background-size:25px 20px;   width:25px; height:20px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle; position: absolute; left:15px; top:13px}
.btn-close{background:url(../images/btn-header-close.png) no-repeat; background-size:20px 20px;   width:20px; height:20px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle; position: absolute; left:15px; top:15px}
.btn-angle-left{background:url(../images/arrow-left.png) no-repeat; background-size:10px 16px; width:10px; height:16px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle; position: absolute; left:15px; top:17.5px}
.btn-angle-right{background:url(../images/arrow-right.png) no-repeat;background-size:10px 16px;  width:10px; height:16px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle; position: absolute; right:15px; top:17.5px}
.btn-angle-plus{background:url(../images/btn-header-plus.png) no-repeat;background-size:16px 16px;  width:16px; height:16px ; display:inline-block;overflow:hidden;line-height:9999px; vertical-align:middle; }

/************** check box **************/
body:not(#foo) input[type='checkbox'] {
  opacity: 0; position: absolute;
}

body:not(#foo) input[type='radio'] {
  opacity: 0; position: absolute; 	  
}

body:not(#foo) .checkbox,.radiobtn {
  width: 18px;
  height: 18px;/*
  margin-left: -20px ;*/
  display: inline-block;
  cursor: pointer;/*
  -webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));*/
  position: relative;
}

.check-wrap label span.checkbox {
  background: url(../images/btn_check.png) 0px 0px;/* margin-right: 3px;*/
}
.check-wrap input[type='checkbox']:checked + label span.checkbox {
  background: url(../images/btn_check.png) -20px 0px; 
}
.check-wrap label span.radiobtn {
  background: url(../images/btn_check.png) -40px 0px; position: relative; top:5px; margin-right: 3px
}
.check-wrap input[type='radio']:checked + label span.radiobtn {
  background: url(../images/btn_check.png) -60px 0px;
}
.check-wrap{ position: relative}
.check-wrap .checkbox{ position: absolute;  top:5px; padding: 0; margin: 0; line-height: 18px}
.check-wrap .title-check{ cursor: pointer;}


.radio-wrap label span.radio {
  background: url(../images/checkbox_selected_off.png) 0px 0px; width:22px !important; height: 22px !important ; position: relative; top:1px; cursor: pointer; margin-bottom: 0 !important
}
.radio-wrap input[type='radio']:checked + label span.radio {
  background: url(../images/checkbox_selected.png) 0px 0px; width:22px !important; height: 22px !important ; position: relative; top:1px; cursor: pointer; margin-bottom: 0 !important
}


.check-circle label span.checkbox {
  background: url(../images/checkbox_selected_off.png) 0px 0px; width:22px !important; height: 22px !important ; position: relative; top:1px; 
}
.check-circle input[type='checkbox']:checked + label span.checkbox {
  background: url(../images/checkbox_selected.png) 0px 0px;width:22px !important; height: 22px !important;line-height: 22px !important; 
}
.check-circle{ position: relative}
.check-circle .checkbox{ position: absolute;  top:5px !important; padding: 0; margin:0; line-height: 17px}


/* button */
.button {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  border: 1px solid #ccc;
  height: 33px;
  line-height: 30px;
  padding: 0px 20px;
  font-weight: normal;
  font-size: 14px;
  color: #000;
  margin: 0;
  text-decoration: none;
  text-align: center; 
  cursor:pointer;
	border-radius:2px
}

.radius{border-radius:50px}

.button:hover,a.button:hover, .button:focus {
  background-color: #f5f5f5;color: #000;
}

.button-line {
	background: #fff; border:1px solid #c4c2c2; 
}

.button-xl{ height:45px; line-height:43px;  font-size:16px}
.button-lg{ font-size:16px; height:45px; line-height:43px; padding:0px 10px}
.button-sm{ font-size:12px; height:20px; line-height:20px; padding:0px 10px}
.button-xs{ font-size:11px; height:20px; line-height:20px; padding:0px 10px}
.button-form{ font-size:12px; height:28px; line-height:28px; padding:0px 8px}
.button-full{ width: 100%; max-width:80%}

.button-primary {
	background:#22c276; color:#fff !important; border:none;
}
.button-primary:hover, .button-primary:focus {
  background:#199e5f !important; color:#fff !important
}

.button-white {
	background:#fff; border:none;
}
.button-white:hover, .button-point:focus {
  background:#f5f5f5 !important;
}

.button-point {
	background:#01bbd6; color:#fff !important; border:none;
}
.button-point:hover, .button-point:focus {
  background:#946b42 !important; color:#fff !important
}

.button-e01 {
	background:#3dc733; color:#fff !important; border:none;
}
.button-e01:hover, .button-e01:focus {
  background:#28a01f !important; color:#fff !important
}
.button-e02 {
	background:#22c276; color:#fff !important; border:none;
}
.button-e02:hover, .button-e02:focus {
  background:#1390b0 !important; color:#fff !important
}

.button-e03 {
	background:#ffba00; color:#fff !important; border:none;
}
.button-e03:hover, .button-e03:focus {
  background:#e4a807 !important; color:#fff !important
}




.button-point2 {
	background:#a2c02f !important; color:#fff !important; border:none;
}
.button-point2:hover, .button-point:focus {
  background:#2a221b !important; color:#fff !important
}
.button-gray {
	background:#707070; color:#fff !important; border:none;
}
.button-gray:hover, .button-gray:focus {
  background:#585858 !important; color:#fff !important
}

.button-orange {
	background:#ff6600; color:#fff !important; border:none;
}
.button-orange:hover, .button-orange:focus {
  background:#777 !important; color:#fff !important
}

.button-blue {
	background:#448cd6; color:#fff !important; border:none; 
}
.button-blue:hover, .button-blue:focus {
  background:#397ec4 !important; color:#fff !important
}
.button-green {
	background:#00c73c; color:#fff !important; border:none; border:1px solid #00c73c
}
.button-green:hover, .button-orange:focus {
  background:#00b135 !important; color:#fff !important
	
}
.button-sale {
	background:#eb0000; font-size:12px; height:20px; line-height:17px; padding:0 5px;  color:#fff !important; border:none; border:1px solid #d50101
}
.button-sale:hover, .button-sale:focus {
  background:#d50101 !important; color:#fff !important
	
}
