@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,800&subset=korean');
/************************************ reset.css ***********************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea , button{margin:0; padding:0; border:0; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

html{ font-size:16px; }
hr{display:none;}
ul, ol, li{list-style:none; padding:0px;}
img, fieldset{border:none;}
img {vertical-align:middle;}
h1, h2, h3, h4, h5, h6{font-size:100%}
table{border-collapse:collapse;}
address, em, optgroup{font-style:normal;}
object{vertical-align:top;}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
button{ background:none; border:0; }
fieldset{margin:0; padding:0; border:0;}
legend{display:none;}
a{color:#666; text-decoration:none;}
body{ font-size:12px; color:#fff; font-family:'Open Sans','Nanum Gothic','sans-serif';}
a,button{ cursor:pointer; }




/************************************ header ***********************************/
#wrapper{ min-width:1200px; margin:0 auto; }

#header{ position: relative;  z-index:20; height:65px; font-size:0; }
#header .header-fixed{  position: fixed; top:0; left:0; width:100%; height:65px; background:#030304;opacity:0.8;filter:alpha(opacity:80); }
#header .header-inner { position: relative; width:1200px; height:100%; margin:0 auto; }
#header .header-inner h1.logo{ position:absolute; top:15px; left:40px;}
#header .header-inner h1.logo a{ display:inline-block; width:130px; height:30px;}
#header .header-inner .navi-wrap{ float:right; margin-top:20px; }
#header .header-inner .navi-wrap .navi-list li{ float:left; margin-right:20px; }
#header .header-inner .navi-wrap .navi-list li:last-child{ margin-right:0; }
#header .header-inner .navi-wrap .navi-list li a{ display:inline-block; position: relative; padding:2px 3px; font-size:16px; line-height:18px; color:#fff;  transition:all .3s;}
/* #header .header-inner .navi-wrap .navi-list li a:hover{opacity:.8;} */
#header .header-inner .navi-wrap .navi-list li:nth-of-type(-n + 5) a:after{content:''; display:block; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:#fff; transition:all .3s;}
#header .header-inner .navi-wrap .navi-list li:nth-of-type(-n + 5) a:hover:after{width:100%;}
#header .header-inner .navi-wrap .navi-list li.logout a{ font-family:'Nanum Gothic'; }
#header .header-inner .navi-wrap .navi-list li.login a{ display:inline-block; height:32px; padding:0 10px; margin-top:-5px; border-radius:3px; border:1px solid #fff; line-height:32px;}
#header .header-inner .navi-wrap .navi-list li.login a:hover{ border-color:transparent; background-color:#fff; color:rgb(27,70,119);}
#header .header-inner .navi-wrap .navi-list li.mypage a{ position:relative; padding-left:23px; }
#header .header-inner .navi-wrap .navi-list li.mypage a:after{ content:''; position:absolute; top:4px; left:0; width:14px; height:14px; background:url(../images/icons.png) no-repeat 0 -34px; }



/************************************ lnb ***********************************/

/* main - lnb  */
.container-inner .lnb-wrap .lnb-list{ position:relative; z-index:1; top:0; width:225px; height:620px; padding:100px 24px 100px 24px; background-color:#628ec1; opacity:90;filter:alpha(opacity:0.9); }
.container-inner .lnb-wrap .lnb-list li{ border-top:1px solid #91afd3; white-space:nowrap; }
.container-inner .lnb-wrap .lnb-list li:last-child{ border-bottom:1px solid #91afd3; }
.container-inner .lnb-wrap .lnb-list > li > a{ display:inline-block; width:100%;  padding:15px 0; font-size:15px; color:#fff; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

.container-inner .lnb-list .list-box{ display:none; background-color:#384454; margin:0 -24px 0 -24px; position:relative; margin-bottom:-1px !important; }
.container-inner .lnb-list .list-box .list{ overflow:hidden; padding:10px 0; }
.container-inner .lnb-list .list-box .list li{ height:32px;border-top:0; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
.container-inner .lnb-list .list-box .list li:last-child{ border-bottom:0; }
.container-inner .lnb-list .list-box .list li a{ display:inline-block; height:100%; width:100%; padding-left:34px; font-size:14px; line-height:32px; color:#84bbfc; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

/*  sub - lnb */
.sub-page .container-inner .lnb-wrap .lnb-list{ float:left; height:auto; max-height:calc(100%-65px); overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; }

/* lnb > outbox*/
.sub-page .lnb-list .list-box{ display:none; background-color:#384454; margin:0 -24px 0 -24px; position:relative; margin-bottom:-1px !important; }
.sub-page .lnb-list .list-box .list{ overflow:hidden; padding:10px 0; }
.sub-page .lnb-list .list-box .list li{ height:32px;border-top:0; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
.sub-page .lnb-list .list-box .list li:last-child{ border-bottom:0; }
.sub-page .lnb-list .list-box .list li a{ display:inline-block; height:100%; width:100%; padding-left:34px; font-size:14px; line-height:32px; color:#84bbfc; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

.sub-page .container-inner .lnb-wrap .lnb-list{ position:fixed !important; top:65px; }
.sub-page .outbox .lnb-list .list-box{ display:block !important; height:auto !important; }

/* lnb > statistics*/
.lnb-list .list-box2{ display:none; background-color:#384454; margin:0 -24px 0 -24px; position:relative; margin-bottom:-1px !important; }
.lnb-list .list-box2 .list{ overflow:hidden; padding:10px 0; }
.lnb-list .list-box2 .list li{ height:32px;border-top:0; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
.lnb-list .list-box2 .list li:last-child{ border-bottom:0; }
.lnb-list .list-box2 .list li a{ display:inline-block; height:100%; width:100%; padding-left:34px; font-size:14px; line-height:32px; color:#84bbfc; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

/*
.sub-page .statistics .lnb-list .list-box2{ display:block !important; height:auto !important; }
*/


/************************************ footer ***********************************/

#footer { background-color:#1e1f21;}
#footer .f-inner{ overflow:hidden;  width:1200px; height:185px; margin:0 auto; }
#footer .f-inner .f-logo{ float:left; margin-top:45px; font-size:0;}
#footer .f-inner .info-list{ overflow:hidden; float:left; width:700px; margin-left:50px; margin-top:60px;}
#footer .f-inner .info-list li{ position:relative; float:left; padding:0 11px 0 9px ; font-size:14px; line-height:22px; font-family:'Nanum Gothic';}
#footer .f-inner .info-list li:after{ content:''; position:absolute; top:6px; left:0; width:1px; height:13px; background-color:#fff;}
#footer .f-inner .info-list li:first-child:after,
#footer .f-inner .info-list li:nth-child(4):after,
#footer .f-inner .info-list li:nth-child(7):after { display:none; }
#footer .f-inner .info-list li.e-mail a{ display:inline-block; font-size:14px; line-height:22px; color:#fff; }
#footer .f-inner .info-list li.terms a{ display:inline-block; color:#fff; }
#footer .f-inner .info-list li a{color:#fff; transition:all .3s;}
#footer .f-inner .info-list li a:hover{opacity:.8}

#footer .f-inner .sns{ overflow:hidden; float:right;  margin-top:84px;  }
#footer .f-inner .sns li{ position:relative; float:left; width:25px; height:27px; margin-left:40px; margin-right:20px; }
#footer .f-inner .sns li:first-child{ margin-left:0; }
#footer .f-inner .sns li:last-child{ margin-right:0; }
#footer .f-inner .sns li a{ display:block; width:30px; height:30px; padding:2px 0; font-size:0;  transition:all .3s;}
#footer .f-inner .sns li a:hover{opacity:.8}
#footer .f-inner .sns li a:after{ content:''; position:absolute; top:0; right:0; width:16px; height:26px; background:url(../images/icons.png) no-repeat 0 0; }
#footer .f-inner .sns li.t a:after{ top:4px; right:0; width:23px; height:21px;  background-position:-55px -3px; }
#footer .f-inner .sns li.g a:after{ top:3px; right:-2px; width:22px; height:22px; background-position:-118px -3px; }
/* #footer .f-inner .sns li.g{display:none;} */
#footer .f-inner .sns li.l a:after{ top:2px; right:-2px; width:22px; height:22px; background-position:-177px -1px; }
#footer .f-inner .sns li.i a{ display:block; padding:0 3px; margin-left:-5px;}
#footer .f-inner .sns li.i a:after{ top:2px; right:2px; width:25px; height:25px; background-position:-239px -1px; }


/* sub-footer */
#footer.sub-footer { background-color:#ebebeb;}
#footer.sub-footer .f-inner .info-list li{ position:relative; float:left; padding:0 11px 0 9px ; font-size:14px; line-height:22px; color:#a3a3a3; font-family:'Nanum Gothic';}
#footer.sub-footer .f-inner .info-list li:after{ content:''; position:absolute; top:6px; left:0; width:1px; height:13px; background-color:#a3a3a3;}
#footer.sub-footer .f-inner .info-list li.e-mail a{ display:inline-block; color:#a3a3a3; }

#footer.sub-footer .f-inner .sns li a:after{ background-position: 0 -57px; }
#footer.sub-footer .f-inner .sns li.t a:after{ background-position:-55px -60px; }
#footer.sub-footer .f-inner .sns li.g a:after{ background-position:-118px -60px; }
#footer.sub-footer .f-inner .sns li.l a:after{ background-position:-177px -58px; }
#footer.sub-footer .f-inner .sns li.i a:after{ background-position:-239px -58px; }


/* sub - layout */
.sub-page #container .container-inner{ width:1200px; margin:0 auto; }
.sub-page #container .container-inner .content-wrap{ min-height:845px; padding:100px 0 100px 267px; margin:0;}
.sub-page #container .container-inner .content-wrap h2.page-tit{ font-size:32px; color:#000; }

.sub-page .f-inner{ width:1200px; margin:0 auto;}

.scroll-y{overflow:hidden; overflow-y:auto; padding-top:5px;  padding-bottom:10px; margin-right:-15px; padding-right:15px; }

/* scrollbar style */
-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; } 
-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment{display: block; height: 10px; background: url('./images/bg.png') #efefef} 
-webkit-scrollbar-track  { 
    background: #efefef; -webkit-border-radius: 10px; border-radius:10px;  
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2);
} 
:-webkit-scrollbar-thumb  {
    height: 50px; width: 50px; background: rgba(0,0,0,.2);  
    -webkit-border-radius: 8px; border-radius: 8px;  
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)
}

/************************************ sub - common  ***********************************/
/* float */
.db{display:block;}
.dib{display:inline-block;}
.dn{display:inline;}

.clearfix::after {content: ''; display:block; clear: both;}

/* float */
.cb{clear:both;}
.fl{float:left;}
.fr{float:right;}

/* ì •ë ¬ */
.tc{ text-align:center !important; }
.tl{ text-align:left !important; }
.tr{ text-align:right !important;}

/* width */
.size1{width:235px;}
.size2{width:730px;}
.size3{width:100px;}
.size4{width:177px !important;}
.size5{width:480px !important;}

/* border */
.bd{border:1px solid #e4e4e4;}
.bt{border-top:1px solid #e4e4e4;}
.bb{border-bottom:1px solid #e4e4e4;}
.bl{border-left:1px solid #e4e4e4;}
.br{border-right:1px solid #e4e4e4;}
.bt0{border-top:0 !important;}
.bb0{border-bottom:0 !important;}
.bdrn{ border-radius:0 !important;}

/* padding */
.p-ty1{ padding:5px;}
.p-ty2{ padding:10px; }
.p-ty3{ padding:15px; }
.p-ty4{ padding:20px; }

.pt5 { padding-top:5px; }
.pt10{ padding-top:10px; }
.pt15{ padding-top:15px; }
.pt20{ padding-top:20px; }

.pb5 { padding-bottom:5px; }
.pb10{ padding-bottom:10px; }
.pb15{ padding-bottom:15px; }
.pb20{ padding-bottom:20px; }

.pl5 { padding-left:5px; }
.pl10{ padding-left:10px; }
.pl15{ padding-left:15px; }
.pl20{ padding-left:20px; }

.pr0 { padding-right:0 !important; }
.pr5 { padding-right:5px; }
.pr10{ padding-right:10px; }
.pr15{ padding-right:15px; }
.pr20{ padding-right:20px; }

.mr5 { padding-right:5px; }
.mr10{ padding-right:10px; }
.mr15{ padding-right:15px; }
.mr20{ padding-right:20px; }

/* margin */
.m-ty1{ margin:5px; }
.m-ty2{ margin:10px; }
.m-ty3{ margin:15px; }
.m-ty4{ margin:20px; }


.mt0{ margin-top:0; }
.mt5{ margin-top:5px !important; }
.mt10{ margin-top:10px !important; }
.mt15{ margin-top:15px !important; }
.mt20{ margin-top:20px; }
.mt25{ margin-top:25px; }
.mt30{ margin-top:30px; }
.mt-5{ margin-top:-5px; }
.mt-15{ margin-top:-15px; }

.mb5{ margin-bottom:5px; }
.mb10{ margin-bottom:10px; }
.mb15{ margin-bottom:15px; }
.mb20{ margin-bottom:20px; }
.mb40{ margin-bottom:40px; }

.ml5 { margin-left:5px; }
.ml10{ margin-left:10px; }
.ml15{ margin-left:15px; }
.ml20{ margin-left:20px; }
.ml60{ margin-left:60px; }

.mr5 { margin-right:5px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mr20{ margin-right:20px; }
.mr35{ margin-right:35px; }

/* font-size */
.fz15{ font-size:15px;}
.fz20{ font-size:20px;}

/* color */
.c-1{ color:#6c98cc; }
.c-2{ color:#384454; }
.c-3{ color:#a3a3a3 !important; }
.c-4{ color:#ec3250 !important; }

/* link */
.link-st1{ text-decoration:underline; color:#fff !important; }
.link-st2{ text-decoration:underline; color:#222 !important; }
.link-st3{ text-decoration:underline; color:#939393 !important; }


/* font-style */
.fb{ font-weight:bold;}
.fn{ font-weight:normal;}

/* font-style */
.txt1{ font-size:16px; color:#000;}
.txt2{ font-size:16px; color:#939393;}
.txt3{ font-size:16px; color:#6c98cc;}


/* background-color */
.bg-c1{ background-color:#fff4ba !important;}
.bg-c2{ background-color:#c5e0eb !important;}
.bg-c3{ background-color:#e2ac01 !important;}


/* btn -ty */
button.btn-ty1,
a.btn-ty1{ display:inline-block; height:40px; padding:0 24px; border:0; border-radius:3px; background-color:#6c98cc; font-size:16px; line-height:40px; color:#fff;}
button.btn-ty2,
a.btn-ty2{ display:inline-block; height:35px; padding:0 11px; border:1px solid #6c98cc; border-radius:3px; font-size:14px; line-height:35px; color:#6c98cc;}
a.btn-ty3,
button.btn-ty3{ height:42px; padding:0 15px; border-radius:3px; background-color:#d9d9d9; font-size:14px; line-height:42px; color:#000; }
a.btn-ty4,
button.btn-ty4{ height:40px; padding:0 15px; border:1px solid #6c98cc; border-radius:3px; background-color:#fff; font-size:16px; font-weight:bold; color:#6c98cc; }
a.btn-ty4:hover,
button.btn-ty4:hover{ background-color:#6c98cc;  color:#fff; }
a.btn-ty5,
button.btn-ty5{ height:40px; padding:10px 15px; border:1px solid #57c2dd; border-radius:3px; background-color:#fff; font-size:16px; font-weight:bold; color:#57c2dd; }
a.btn-ty5:hover,
button.btn-ty5:hover{  background-color:#57c2dd;  color:#fff; }
a.btn-ty6,
button.btn-ty6{ height:40px; padding:0 40px; border:1px solid #e4e4e4; font-size:16px; color:#939393; }
a.btn-ty6.on,
button.btn-ty6.on{ background-color:#a6a6a6; font-size:16px; color:#fff; }
a.btn-ty12,
button.btn-ty12{ height:24px; padding:2px 5px; border-radius:3px; background-color:#dadada; font-size:14px; line-height:24px; color:#fff; }
a.btn-ty12.on,
button.btn-ty12.on{ background-color:#ae7f7f;}
a.btn-ty13,
button.btn-ty13{ height:50px; padding:10px 50px ;border:1px solid #fff; border-radius:3px; font-size:20px; line-height:24px; color:#fff; font-weight:bold;}
a.btn-ty13:hover,
button.btn-ty13:hover{ border:1px solid #6d98cb; background-color:#6d98cb; }

/* btn -  고정넓이 */
a.btn-ty7,
button.btn-ty7{ width:90px; height:35px; border:1px solid #d9534f; border-radius:3px; font-size:14px; color:#d9534f; text-align:center; }
a.btn-ty8,      
button.btn-ty8{ width:90px; height:35px; border:1px solid #4e72da; border-radius:3px; font-size:14px; color:#4e72da; text-align:center;}
a.btn-ty9,      
button.btn-ty9{ width:90px; height:35px;  border:1px solid #a3a3a3; border-radius:3px; font-size:14px; color:#a3a3a3; text-align:center;}
a.btn-ty10,
button.btn-ty10{ width:90px; height:35px; border:1px solid #3fc969; border-radius:3px; font-size:14px; color:#3fc969; text-align:center;}
a.btn-ty11,
button.btn-ty11{ width:90px; height:35px; border:1px solid #6c98cc; border-radius:3px; font-size:14px; color:#6c98cc; text-align:center;}
/* // btn -  고정넓이 */


button.up{ width:15px; height:15px; background:url(../images/icons.png) no-repeat 0 -94px; font-size:0; }
button.down{ width:15px; height:15px; background:url(../images/icons.png) no-repeat -18px -94px; font-size:0; }

button.btn-upgrade{width:100px; height:42px; padding:0 15px; line-height:42px; border: 1px solid rgb(5,200,90); border-radius: 3px; font-size: 14px; text-align: center;  color: #fff; font-weight: bold; transition: all .3s; background-color:rgb(5,200,90); transition:all .3s;}
button.btn-upgrade:hover{ color:#3fc969; background:#fff; border-color:#3fc969}

.table-cell-send-all {
  display: table-cell;
  width: 87%;
}

#free-btn-upgrade{margin-left: 3px;}

.btn-wrap{ border-top:1px solid #e4e4e4;}



/*  form - ty */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"]{ height:40px; padding-left:16px; border:1px solid #e4e4e4; -webkit-appearance: none; -webkit-border-radius: 0;background-color:#fff;-webkit-appearance:none;-moz-appearance: none; font-size:16px; line-height:20px; color:#939393;}



input.inp-ty{ width:300px;}
input.inp-ty2{ width:160px; padding:7px 0 7px 16px; margin-right:15px;}


.search-box{ margin-top:40px; }
.form-ty .field{ margin-bottom:16px;}
.form-ty .field:last-child{ margin-bottom:40px;}
.form-ty .date.field label{ line-height:40px;}
.form-ty .date.field input[type="date"]{ vertical-align:bottom;}
.form-ty label{ display:inline-block; width:133px; font-size:16px; color:#000; }
label.label-ty{ width:40px; }
label.label-ty2{ width:198px; }

/* select-box */
select{ -webkit-appearance: none; -webkit-border-radius: 0;}
select::-ms-expand { display:none; }
.sel-ty{ width:70px; padding:7px 0 7px 10px; border:1px solid #e4e4e4; border-radius:0;  background:url(../images/icons.png) no-repeat -432px -100px; font-size:14px; color:#1e1e1e; }
.sel-ty2{ padding:7px 0 7px 10px; border:1px solid #e4e4e4; border-radius:0;  background:url(../images/icons.png) no-repeat 100% -174px; font-size:14px; color:#939393; }
.sel-ty3{ padding:7px 0 7px 10px; border:1px solid #e4e4e4; border-radius:0; background:url(../images/icons.png) no-repeat 100% -153px; font-size:14px; color:#939393; }


/* 체크박스 */
.checkbox-1 input[type=checkbox]{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:0;filter:alpha(opacity:0);}

.checkbox-1{ position:relative; display:inline-block; height:22px; margin-top:10px;}
.checkbox-1 i{ position:absolute; top:0; left:0;  width:22px; height:22px; background:url(../images/icons.png) no-repeat -38px -121px; vertical-align:middle;}
.checkbox-1 :checked + i{ background-position-x:0;}
label{ margin-top:10px; vertical-align:middle;}
label strong{ display:inline-block; margin-left:35px; font-size:16px; color:#000;}
.checkbox-1 [disabled] + i{ background-position-x:-117px; }
.checkbox-1 :checked[disabled] + i{ background-position-x:-80px;  }


/* 라디오버튼  */
input[type="radio"]{ display:none;}
.form-ty .field input[type="radio"] + label{ position:relative; }
.form-ty .field input[type="radio"] + label:before{content:''; display:inline-block; width:22px; height:22px; margin-top:-3px; margin-right:10px; background-color:#d9d9d9; border-radius:20px;vertical-align:middle; }
 
.form-ty .field input[type="radio"]:checked + label:before{ content:''; display:inline-block;  background-color:#6c98cc; border-radius:20px;  }
.form-ty .field input[type="radio"]:checked + label:after{ content:''; display:inline-block; position:absolute; top:7px; left:7px; width:8px; height:8px;  background-color:#fff; border-radius:10px; z-index:10;}

.form-ty .field2 input[type="radio"] + label{ position:relative; }
.form-ty .field2 input[type="radio"] + label:before{content:''; display:inline-block; width:22px; height:22px; margin-top:0px; margin-right:10px; background-color:#d9d9d9; border-radius:20px;vertical-align:middle; }
 
.form-ty .field2 input[type="radio"]:checked + label:before{ content:''; display:inline-block;  background-color:#6c98cc; border-radius:20px;  }
.form-ty .field2 input[type="radio"]:checked + label:after{ content:''; display:inline-block; position:absolute; top:7px; left:7px; width:8px; height:8px;  background-color:#fff; border-radius:10px; z-index:10;}

.box-ty .area-txt input[type="radio"] + label{ position:relative; }
.box-ty .area-txt input[type="radio"] + label:before{content:''; display:inline-block; width:22px; height:22px; margin-top:0px; margin-right:10px; background-color:#d9d9d9; border-radius:20px;vertical-align:middle; }
 
.box-ty .area-txt input[type="radio"]:checked + label:before{ content:''; display:inline-block;  background-color:#6c98cc; border-radius:20px;  }
.box-ty .area-txt input[type="radio"]:checked + label:after{ content:''; display:inline-block; position:absolute; top:8px; left:7px; width:8px; height:8px;  background-color:#fff; border-radius:10px; z-index:10;}

.radio ally-hidden{ overflow:hidden; position:absolute; left:-9999px; }
.radio label{ width:auto; margin-right:20px; }

/* tbl-ty > radio */
.tbl-ty span.radio{ position:relative; }
.tbl-ty span.radio input[type="radio"] + label:before{content:''; position:absolute; right:0; top:0; width:22px; height:22px; margin-top:-3px; margin-right:10px; background-color:#d9d9d9; border-radius:20px;vertical-align:middle; }
.tbl-ty span.radio input[type="radio"] + label:before{content:''; position:absolute; right:-50px; top:3px; width:22px; height:22px; margin-top:-3px; margin-right:10px; background-color:#d9d9d9; border-radius:20px;vertical-align:middle; }
.tbl-ty span.radio  input[type="radio"]:checked + label:before{ content:''; position:absolute; right:-50px; top:3px;  background-color:#6c98cc; border-radius:20px;  }
.tbl-ty span.radio input[type="radio"]:checked + label:after{ content:''; position:absolute; top:7px; right:-33px; width:8px; height:8px;  background-color:#fff; border-radius:10px; z-index:10;}

/* box-ty2 > radio */
.box-ty2 .area-txt input[type="radio"] + label{ position:relative; }
.box-ty2 .area-txt input[type="radio"] + label:before{content:''; display:inline-block; width:22px; height:22px; margin-top:-3px; margin-right:10px; background-color:#d9d9d9; border-radius:20px;vertical-align:middle; }
 
.box-ty2 .area-txt input[type="radio"]:checked + label:before{ content:''; display:inline-block;  background-color:#6c98cc; border-radius:20px;  }
.box-ty2 .area-txt input[type="radio"]:checked + label:after{ content:''; display:inline-block; position:absolute; top:6px; left:7px; width:8px; height:8px;  background-color:#fff; border-radius:10px; z-index:10;}

/* table - ty */
.tbl-ty{ margin-top:0; table-layout:fixed; width:100%; }/* 2017-07-01 : 수정 */
.tbl-ty thead th{ padding:10px 0; border-top:2px solid #141414; border-bottom:1px solid #e4e4e4; background-color:#f6f6f6; font-size:14px; font-weight:normal; color:#000; }
.tbl-ty thead th .tbl-title{ position:relative; }
.tbl-ty thead th .tbl-title button.up{ position:absolute; top:50%; margin-top:-14px; margin-left:10px;z-index:10; }
.tbl-ty thead th .tbl-title button.down{ position:absolute; top:50%; margin-top:2px; margin-left:10px; z-index:10;}
.tbl-ty tbody tr td{ padding:15px 10px; border-bottom:1px solid #e4e4e4; font-size:14px; line-height:22px; color:#000; text-align:center; }
.tbl-ty tbody tr td:last-child{ white-space:nowrap; }
.tbl-ty.small thead tr th,
.tbl-ty.small tbody tr td{ font-size:12px;}

.tbl-ty2{ width:100%; margin-top:0;}/* 2017-07-01 : 수정 */
.tbl-ty2 thead th{ padding:10px 0; background-color:#dce9f8; font-size:16px; line-height:22px; font-weight:normal;  color:#000; text-align:center;}
.tbl-ty2 tbody td{ padding:15px 0; border-bottom:1px solid #ebebeb; font-size:16px; line-height:22px; color:#000; text-align:center;}

.multiline{ overflow:hidden; width:100%;  max-height:60px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:14px; line-height:20px; text-overflow:ellipsis; text-align:left;}
.a11y-hidden { overflow: hidden; position: absolute; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; border:0; padding:0;}


.area{ margin-top:80px; }
.area:first-child{ margin-top:0; }


/* paging */
.paging-box{ position:relative; margin-top:50px; }
.paging-box .search-page{ position:absolute; left:0; top:0; }
.paging-box .search-page label{ width:110px; margin-right:10px; font-size:14px; color:#1e1e1e;}
.paging-box .sel-ty{ margin-top:-4px;}

.paging-box .total-box{ position:absolute; right:10px;  top:0; margin-top:-4px; font-size:14px; color:#1e1e1e;}
.paging-box .total-box input.cur{ width:50px; height:30px; padding:8px 10px; border:1px solid #e4e4e4; text-align:center; line-height:22px; vertical-align:middle; }
.paging-box .total-box span{ margin-left:5px; line-height:22px; vertical-align:middle;}
.paging-box .total-box .next{  display:inline-block; width:10px; height:11px; margin-left:15px; background:url(../images/icons.png) no-repeat -110px -95px; font-size:0; vertical-align:middle; }

.paging{ text-align:center;}
.paging a{ display:inline-block; width:22px; height:22px; margin:0 2px; font-size:14px; line-height:22px; text-align:center; vertical-align:middle;}
.paging a.on{ background-color:#6c98cc; border-radius:10px;  color:#fff;}
.paging a.first{ font-size:0; }
.paging a.prev{  margin-left:-3px; margin-right:10px; font-size:0; }
.paging a.next{ font-size:0; margin-left:10px;}
.paging a.last{ margin-left:-3px; font-size:0; }
.paging a.first:before,
.paging a.prev:before,
.paging a.next:before,
.paging a.last:before{ content:''; display:inline-block; width:12px; height:9px; margin-top:5px;  background:url(../images/icons.png) no-repeat; }
.paging a.first:before{ background-position:-71px -96px; }
.paging a.prev:before{ width:6px; background-position:-41px -96px ; }
.paging a.next:before{ width:6px; background-position:-112px -96px; }
.paging a.last:before{  background-position:-141px -96px; }

/************************************ popup ***********************************/

/* pop-st */
.modal-open .modal{overflow-y: hidden}
.modal-dialog{ min-width:600px; background-color:#fff; }
.modal-header,
.modal-body.message{ min-height:55px; padding:15px 20px; border-bottom:1px solid #d9d9d9; font-size:20px; color:#000;} 
.modal-body{ overflow-y:auto; /*-webkit-overflow-scrolling: touch;  */max-height:606px; padding:20px;  min-height: 395px;}
.modal-body .txt{ padding:0 20px 0 0; font-size:16px; line-height:22px; color:#000; }
.modal-body .box-ty { margin-top:30px; font-size:16px; color:#000; }
.modal-body .box-ty .area-txt{ position:relative; padding-left:120px; margin-bottom:10px; }
.modal-body .box-ty .area-txt strong{ position:absolute; left:0; display:inline-block; width:118px;  font-weight:bold; vertical-align:top; }
.modal-body .box-ty .area-txt .strong2{ position:absolute; left:0; display:inline-block; width:118px;  font-weight:bold; vertical-align:top; }
.modal-body .box-ty .area-txt strong:after{ content:':'; display:inline-block; position:absolute; top:0; right:0;  width: 1px ; height:22px;  color:#000; font-weight:normal;}
.modal-body .box-ty .area-txt span{  display:inline-block; padding-left:15px; vertical-align:top; }
.modal-body .box-ty .area-txt input{ padding-left:10px; margin-left:15px;  vertical-align:top;}
.modal-body .box-ty .area-txt-ty2{ padding-left:0; margin-bottom:20px;}
.modal-body .box-ty .area-txt-ty2 label{ margin-right:40px; margin-left:70px;}
.modal-body .box-ty .area-txt-ty2 label:first-child{ margin-left:0;}

.modal-body .box-ty .inp-email{ margin-left:135px; text-align:right; }
.modal-body .box-ty .inp-email input{ width:100%; margin-top:5px; padding-left:10px; font-size:16px; line-height:26px; border:1px solid #e4e4e4; }
.modal-body .box-ty .inp-email input:first-child{ margin-top:0; }
.modal-body .area-txt .btn-box1{ padding-left:0; vertical-align:top;}
.modal-body .email-list .eamil{ display:inline-block;width:234px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

.modal-body .box-ty2 { margin-top:30px; font-size:14px; color:#000; }
.modal-body .box-ty2 .area-txt{ position:relative; padding-left:120px; margin-bottom:10px; }
.modal-body .box-ty2 .area-txt strong{ position:absolute; left:0; display:inline-block; width:118px;  font-weight:bold; vertical-align:top; }
.modal-body .box-ty2 .area-txt .strong2{ position:absolute; left:0; display:inline-block; width:118px;  font-weight:bold; vertical-align:top; }
.modal-body .box-ty2 .area-txt strong:after{ content:':'; display:inline-block; position:absolute; top:0; right:0;  width: 1px ; height:22px;  color:#000; font-weight:normal;}
.modal-body .box-ty2 .area-txt span{  display:inline-block; padding-left:15px; vertical-align:top; }
.modal-body .box-ty2 .area-txt input{ padding-left:10px; margin-left:15px;  vertical-align:top;}
.modal-body .box-ty2 .area-txt-ty2{ padding-left:0; margin-bottom:20px;}
.modal-body .box-ty2 .area-txt-ty2 label{ margin-right:40px; margin-left:70px;}
.modal-body .box-ty2 .area-txt-ty2 label:first-child{ margin-left:0;}
.modal-body .box-ty2 .area-txt-ty3{ padding-left:0; margin-bottom:20px;}
.modal-body .box-ty2 .area-txt-ty3 label{ margin-right:27px; margin-left:40px;}
.modal-body .box-ty2 .area-txt-ty3 label:first-child{ margin-left:0;}

.modal-body .box1 textarea{ overflow-y:scroll; width:100%; height:220px; padding:10px;  border:1px solid #d9d9d9; font-size:14px; line-height:22px;}
.modal-body .box2{ border-top:1px solid #d9d9d9; margin:0 -20px;}
.modal-body .box2 .box-ty.box-w{ margin:0 20px;}
.modal-body .box2 .box-ty.box-w .area-txt{ padding-left:180px;}
.modal-body .box2 .box-ty.box-w .area-txt strong{ width:177px;}
.modal-body .box2 .box-ty.box-w .area-txt input{ width:288px; height:34px;}


.modal-body .email-area{ overflow-y:auto; height:335px; padding:20px; border:1px solid #d9d9d9; }
.modal-body .email-area .email-txt{ color:#000; }
.modal-body .email-area .email-txt strong{ display:block; margin-bottom:10px; font-weight:bold; }
.modal-body .btn-box{ margin-top:10px; text-align:right; }

.terms-box{ border:1px solid #222; box-shadow:4px 4px RGB(0,0,0,0.2); }
.terms-box .modal-body{ margin:20px; border:1px solid #d9d9d9; }
.terms-box .modal-body .top{padding:35px 0; text-align:center;}
.terms-box .modal-body .top h2{ margin-bottom:20px; font-size:0; text-align:center;}
.terms-box .modal-body .top h2 img{ width:222px; height:51px;}
.terms-box .modal-body .top strong{ font-size:20px; line-height:22px; color:#678cc1;}
.terms-box .modal-body .content b{ display:block;}
.terms-box .modal-body .content .txt01{ font-size:14px; line-height:20px; color:#000;}


.modal-footer{ overflow:hidden; padding:20px; border-top:1px solid #d9d9d9; text-align:right; }
.modal-footer button{ margin-right:4px;}
.modal-footer .btn-box2 button:last-child{ margin-right:0;}
.modal-footer .contry-info { overflow:hidden; width:100%; font-size:14px; line-height:20px; color:#000; text-align:left;}
.modal-footer .contry-info .txt{ font-weight:normal;}
.modal-footer .contry-info .box{ overflow:hidden; width:100%; }
.modal-footer .contry-info .box dt{ float:left; width:70px; margin-right:5px; line-height:20px; }
.modal-footer .contry-info .box dd{ overflow:hidden; line-height:20px; vertical-align:top;}
.modal-footer .contry-info .box dd p.txt{ float:left; width:100%; }

.modal-header + .modal-footer,
.modal-body.message + .modal-footer{ border-top:0;}


/**************************************************************************************************/
/********************************************* front  *********************************************/
/**************************************************************************************************/


/* main */

#wrapper.front{ overflow:hidden; max-width:100%; }
.front #header .header-fixed{ transition: all 1s ease;}
.front #header .header-fixed.trans{ background-color:transparent; transition: all 0.5s ease;}
.front #header{ height:auto;}


.front .container-inner section{  text-align:left; /* display:flex; justify-content: center; align-items: center; flex-direction: column */}
.front .front-main .container-inner section{text-align: center;}
.front .container-inner section h1{ position:relative;/*  padding-top:187px; */ padding-top:65px; font-size:3.750rem; color:#222; font-weight:normal; display:table-cell; vertical-align: middle; width:100%; height:100%; text-align:center;}
.front .container-inner section .line:after{ content:''; position:absolute; bottom:-24px; left:50%; margin-left:-60px; width:120px; height:4px; background-color:#222; left:50%; display:none}
.sub-page.front .container-inner section .line:after{ bottom:-7px; width:100px; margin-left:-50px; display:none}
.sub-page.front .container-inner section .line.on:after{display:block}
.front .container-inner section .line2:after{ content:''; position:absolute; bottom:-24px; left:50%; margin-left:-60px; width:120px; height:4px; background-color:#fff; left:50%;display:none}
.sub-page.front .container-inner section .line2:after{ bottom:-7px; width:100px; margin-left:-50px; display:none;}
.sub-page.front .container-inner section .line2.on:after{display:block; }
.front .container-inner section .txt01{ margin-top:40px; font-size:1.250rem; line-height:1.833rem; color:#222; display:none;}
.front .container-inner section .txt02{ font-size:1.333rem; line-height:1.833rem; color:#fff;}

.front .container-inner .section01{ height:395px; display:table; table-layout: fixed; width:100%;}
.front .container-inner .section01 img{ max-height:600px; }

.front .container-inner .section02 img{ position:absolute; top:0;  }
.front .container-inner .section02 .img01{ left:-250px;}
.front .container-inner .section02 .img02{ right:-250px;}
.front .container-inner .section02 .btn-box{ display:inline-block; margin-top:80px; }

/* footer */
.front #footer{ background-color:#678cc1;}

/* sub-page */
textarea{ width:660px; height:170px; padding-left:16px; border:1px solid #e4e4e4; -webkit-appearance: none; -webkit-border-radius: 0;background-color:#fff;-webkit-appearance:none;-moz-appearance: none; font-size:1.333rem; line-height:1.667rem; color:#939393; }
.front .form-ty input[type="text"],
.front .form-ty input[type="password"],
.front .form-ty input[type="email"]{ width:660px;}
.front .form-ty .text label,
.front .form-ty .text textarea{ vertical-align:top;}
.front .form-ty .text label{ margin-top:10px;}
.front .form-ty .field label.required:after{ content:''; position:absolute; top:0; width:10px; height:10px; margin-left:5px; background:url(../images/icons.png) -305px  0 no-repeat; }

.sub-page.front .form-ty label{ position:relative; width: 256px; margin-top:-5px; }
.sub-page.front #header .header-fixed{  position: fixed; top:0; left:0; width:100%; height:65px; background:#030304;opacity:0.8;filter:alpha(opacity:80); }

/* news - 박스*/
.front.sub-page .content-wrap .list-section{  margin:80px 0 160px ;}
.front.sub-page .content-wrap .list-section .list{ width:380px; margin-bottom:30px;   border:1px solid  #e3e3e3; }
.front.sub-page .content-wrap .list-section .list img{ width:100%; }
.front.sub-page .content-wrap .list-section .list:nth-child(3n){ margin-right:0;}
.front.sub-page .content-wrap .list-section .list .top{ overflow:hidden; position:relative; padding:10px 20px; border-bottom:1px solid #e3e3e3;}
.front.sub-page .content-wrap .list-section .list .top:before{ content:''; position:absolute;top:10px; left:20px;  width:23px; height:20px; background:url(../images/icons.png) no-repeat -110px -209px; }
.front.sub-page .content-wrap .list-section .list .top b{ float:left; margin-left:40px; font-size:0.833rem; font-weight:bold; color:#000;}
.front.sub-page .content-wrap .list-section .list .top .date{ float:right; margin-left:40px; font-size:0.833rem; color:#a3a3a3;}
.front.sub-page .content-wrap .list-section .list .bottom{ padding:10px 20px; border-top:1px solid #e3e3e3; text-align:left;}
.front.sub-page .content-wrap .list-section .list .bottom .cont{ padding:15px 0; font-size:0.833rem; font-weight:bold; color:#666; }
.front.sub-page .content-wrap .list-section .list .bottom .icon-box{ height:22px;}
.front.sub-page .content-wrap .list-section .list .icon-box .icon-com{ float:left; background:url(../images/icons.png)  0  -206px no-repeat;  }
.front.sub-page .content-wrap .list-section .list .icon-box .icon-like{ float:left; margin-left:10px;  background:url(../images/icons.png) -38px  -207px no-repeat;}
.front.sub-page .content-wrap .list-section .list .icon-box .icon-f{ float:right; width:15px;height:21px; background:url(../images/icons.png) -72px  -209px no-repeat;  }
.front.sub-page .content-wrap .list-section .list .icon-box .icon-f a{ display:inline-block; width:21px; height:21px; margin-left:-3px;}
.front.sub-page .content-wrap .list-section .list em.count{ margin-left:22px; font-size:0.833rem; color:#bababa;}



.front.sub-page #container .container-inner.contact .content-wrap{ min-height:auto; margin:0 auto;}
.front.sub-page #container .container-inner.news .content-wrap{ min-height:auto; padding:0; margin:0 auto;}
.front.sub-page #container .container-inner.contact .content-wrap,
.front.sub-page #container .container-inner.membership .content-wrap{ min-height:auto; padding:0; margin:70px auto 100px;}


/************************************ 1366px  ***********************************/
@media screen and (max-width:1710px){
    .modal-body{ overflow-y:auto; -webkit-overflow-scrolling: touch;  max-height:400px; padding:10px;  min-height: 420px;}
    #edit-email-modal-body{ overflow-y:hidden; -webkit-overflow-scrolling: touch;  max-height:400px; padding:10px;  min-height: 420px;}
    .modal-footer { padding:10px; }
    .modal-footer .contry-info{ overflow-y:auto; padding:10px; border-top:1px solid #d9d9d9; height: 80px;}
    textarea{ width:660px; height:100px; padding-left:16px; border:1px solid #e4e4e4; -webkit-appearance: none; -webkit-border-radius: 0;background-color:#fff;-webkit-appearance:none;-moz-appearance: none; font-size:1.333rem; line-height:1.667rem; color:#939393; }
}

/************************************ 1024px이하  ***********************************/


@media screen and (max-width:1024px){
    
    /* width */
    .size1{width:188px;}
    .size2{width:584px;}
    .size3{width:80px;}
    .size4{width:141px !important;}
    
    /* font-style */
    .txt1{  }
    .txt2{  }
    .txt3{  }
    
    .pt20{padding-top:16px;}

    .mt10{ margin-top:8px !important;}
    .mt15{ margin-top:12px !important;}
    .mr5{ margin-right:4px;}
    .mb40{ margin-bottom:32px;}
    
    /* btn -ty */
    button.btn-ty1,
    a.btn-ty1{ height:32px; padding:0 15px;  line-height:2rem;}
    button.btn-ty2,
    a.btn-ty2{ height:28px; padding:0 8px;  line-height:1.8rem;}
    a.btn-ty3,
    button.btn-ty3{ height:33px; padding:0 12px;  line-height:2.0625rem;  }
    a.btn-ty4,
    button.btn-ty4{ height:32px; padding:0 12px; white-space:nowrap; }
    a.btn-ty5,
    button.btn-ty5{ height:32px; padding:8px 9px;  }
    a.btn-ty6,
    button.btn-ty6{ height:25px; padding:0 32px;  }
    a.btn-ty6.on,
    button.btn-ty6.on{ }
    a.btn-ty12,
    button.btn-ty12{ height:22px; padding:1px 7px;  line-height:1.1875rem; }
    a.btn-ty13,
    button.btn-ty13{ height:40px; padding:8px 40px;  line-height:1.188rem;}
    
    /* btn -  고정넓이 */
    a.btn-ty7,
    button.btn-ty7{ width:72px; height:22px;  }
    a.btn-ty8,      
    button.btn-ty8{ width:72px; height:22px; }
    a.btn-ty9,      
    button.btn-ty9{ width:72px; height:22px;  }
    a.btn-ty10,
    button.btn-ty10{ width:72px; height:22px; }
    a.btn-ty11,
    button.btn-ty11{ width:72px; height:22px;  }
    

    button.up{ width:15px; height:15px; background:url(../images/icons.png) no-repeat 0 -94px;  }
    button.down{ width:15px; height:15px; background:url(../images/icons.png) no-repeat -18px -94px;  }

    .multiline{ max-height:48px;  line-height:1rem;}
    
    .table-cell-send-all {
	  display: table-cell;
	  width: 84%;
	}

    #free-btn-upgrade{margin-left: 3px;     height: 33px;    padding: 0 12px;    line-height: 2.0625rem;}
    
    
    
    /* main */
    #wrapper{ min-width:960px;}
    #header{ height:52px;}
    #header .header-fixed{ height:52px;}
    #header .header-inner{ width:960px;}
    #header .header-inner h1.logo{ top:11px; left:32px;}
    #header .header-inner h1.logo img{ width:104px;}
    #header .header-inner .navi-wrap{margin-top:16px;}
    #header .header-inner .navi-wrap .navi-list li{margin-right:16px;}
    #header .header-inner .navi-wrap .navi-list li:last-child{ margin-right:10px; }
    #header .header-inner .navi-wrap .navi-list li a{  line-height:0.875rem;}
    #header .header-inner .navi-wrap .navi-list li.login a{ height:25px; padding:0 8px; margin-top:-5px; line-height:1.5rem;}
    #header .header-inner .navi-wrap .navi-list li.mypage a:after{  top:0; left:0; width:14px; height:14px; }
    
    
    #container .container-inner{ width:960px;}
    
    .container-inner .lnb-wrap .lnb-list{ width:190px; height:416px; padding:80px 15px;}
    .container-inner .lnb-wrap .lnb-list > li > a{  padding:12px 0; }
    
    /* footer */
    #footer .f-inner{ width:960px; height:148px;}
    #footer .f-inner .f-logo{ margin-top:36px;}
    #footer .f-inner .f-logo img{ width:57px;}
    #footer .f-inner .info-list{ width:510px; margin-left:45px; margin-top:60px;}
    #footer .f-inner .info-list li{ padding:0 8px 0 7px;  line-height:1.0625rem;}
    #footer .f-inner .info-list li:after{ top:4px; height:10px;}
    #footer .f-inner .info-list li.e-mail:after{left:auto; right:0;}
    #footer .f-inner .info-list li.e-mail a{ line-height:1.0625rem;}
    
    #footer .f-inner .sns{ margin-top:67px;}
    #footer .f-inner .sns li{width:22px; height:26px; margin-left:32px; margin-right:16px;}
    #footer .f-inner .sns li:last-child{ margin-right:10px; }
    #footer .f-inner .sns li a{ width:24px; height:24px;}
    #footer .f-inner .sns li a:after{  width:12px; height:26px;}
    
    
    /* login */
    #footer.sub-footer .f-inner .info-list li{ padding:0 8px 0 7px;  line-height:1.0625rem;}
    
    
    /* sub-page  */
    .sub-page #container .container-inner{ width:960px;}
    .sub-page #container .container-inner .content-wrap{ min-height:676px; padding:80px 0 80px 213px; }
    .sub-page #container .container-inner .content-wrap h2.page-tit{ }
    .search-box{ margin-top:32px;}
    
    
    /*  sub-lnb */
    .sub-page .container-inner .lnb-wrap .lnb-list{top:52px;}
    .sub-page .lnb-list .list-box{ margin:0 -20px;}
    .sub-page .lnb-list .list-box .list{ padding:8px 0;}
    .sub-page .lnb-list .list-box .list li{ height:25px;}
    .sub-page .lnb-list .list-box .list li a{ padding-left:26px;  line-height:1.5625rem;}
    
    /* tbl-st */
    .tbl-ty thead th .tbl-title{ padding:0 10px; }
    .tbl-ty thead th .tbl-title button.up{ top:50%; margin-top:-14px; margin-left:8px;}
    .tbl-ty thead th .tbl-title button.down{ top:50%; margin-top:3px;  margin-left:8px;}
    .tbl-ty tbody tr td{ padding:12px 8px;  line-height:1.0625rem;}
    .admin .tbl-ty tbody tr td:nth-child(5n){ padding:12px 0 12px 8px;}
    .admin .tbl-ty.small tbody tr td{ padding:12px ;}
    
    .tbl-ty2 thead th{ padding:8px 0;  line-height:17px; }
    .tbl-ty2 tbody td{ padding:12px 0;  line-height:17px; }

    .multiline{ max-height:48px;  line-height:16px;}
    
    /* form */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="date"]{ height:21px; padding-left:12px;  line-height:1rem;}
    
    
    .form-ty .field{ margin-bottom:12px;}
    .form-ty label{ width:106px; }
    .form-ty .date.field label{line-height:2rem;}
    input.inp-ty{ width:240px;}
    input.inp-ty2{ width:128px; padding:5px 0 5px 12px; margin-right:12px;}
    label.label-ty{ width:32px;}
    
    .sel-ty{ width:56px; padding:5px 0 5px 8px;  }
    .sel-ty2{  padding:5px 0 5px 8px; background-position-y:-178px;  }
    .sel-ty3{  padding:5px 0 5px 8px;   }
    
    
    .radio label{ margin-right:16px;}
    .form-ty .field input[type="radio"] + label:before{ width:18px; height:18px; margin-right:8px;}
    .form-ty .field input[type="radio"]:checked + label:before{ border-radius:16px;  }
    .form-ty .field input[type="radio"]:checked + label:after{ top:7px; left:5px; }
    
    .box-ty .area-txt input[type="radio"] + label:before{ width:18px; height:18px; margin-right:8px;}
    .box-ty .area-txt input[type="radio"]:checked + label:before{ border-radius:16px;  }
    .box-ty .area-txt input[type="radio"]:checked + label:after{ top:7px; left:5px; }
    
    /* tbl-ty > radio */
    .tbl-ty span.radio input[type="radio"] + label:before{ right:-30px;}
    .tbl-ty span.radio  input[type="radio"]:checked + label:before{ right:-30px;}
    .tbl-ty span.radio input[type="radio"]:checked + label:after{ right:-13px; }

    
        
    .checkbox-1{ height:17px; margin-top:8px;}
    .checkbox-1 i{ width:22px; height:22px;}
    label{ margin-top:8px; }
    label strong{ margin-left:28px;  }

    
    /* paging */
    .sel-ty{ width:56px; padding:5px 0 5px 8px; background-position:-444px -104px; }
    .paging-box{ margin-top:40px;}
    .paging-box .sel-ty{ margin-top:-3px;}  
    .paging-box .search-page label{ width:88px; margin-right:8px; vertical-align:middle; }
    
    .paging a{ width:17px; height:17px;  line-height:1.0625rem; vertical-align:middle;}
    
    .paging-box .total-box{ right:8px; margin-top:-3px;  line-height:1.0625rem;}
    .paging-box .total-box input.cur{ width:40px; height:24px; padding:6px 8px; line-height:1.0625rem;}
    .paging-box .total-box .next{ width:8px; height:11px; margin-left:12px;}
    .paging-box .total-box span{margin-left:4px; line-height:1.0625rem;}
    
    .paging a.first:before,
    .paging a.prev:before,
    .paging a.next:before,
    .paging a.last:before{  width:12px; height:9px; margin-top:2px;  }
    
    .area{margin-top:64px;}
    
    /************************************ popup ***********************************/
    
    
    /* pop-st */
    .modal-dialog{ min-width:480px; }
    .modal-header,
    .modal-body.message{ min-height:44px; padding:12px 16px;  } 
    .modal-body{  max-height:475px; padding:16px;}
    .modal-body .txt{ padding:0 16px 0 0;  line-height:17px; }
    .modal-body .box-ty { margin-top:24px;   }
    .modal-body .box-ty .area-txt{  padding-left:96px; margin-bottom:8px; }
    .modal-body .box-ty .area-txt strong{ width:94px; font-size:14px;  }
    .modal-body .box-ty .area-txt .strong2{  width:94px;  }
    .modal-body .box-ty .area-txt strong:after{ height:17px; }
    .modal-body .box-ty .area-txt span{  padding-left:12px;  }
    .modal-body .box-ty .area-txt input{ padding-left:8px; margin-left:12px;}
    .modal-body .box-ty .area-txt-ty2{ margin-bottom:16px;}
    .modal-body .box-ty .area-txt-ty2 label{ margin-right:32px; margin-left:56px;}

    .modal-body .box-ty .inp-email{ margin-left:108px; }
    .modal-body .box-ty .inp-email input{  margin-top:4px; padding-left:8px;  line-height:20px; }
    .modal-body .box-ty .inp-email input:first-child{ margin-top:4px;}
    .modal-body .email-list .eamil{ width:234px;}

    .modal-body .box1 textarea{  height:176px; padding:8px;  line-height:17px;}
    .modal-body .box2{ margin:0 -16px;}
    .modal-body .box2 .box-ty.box-w{ margin:0 16px;}
    .modal-body .box2 .box-ty.box-w .area-txt{ padding-left:144px;}
    .modal-body .box2 .box-ty.box-w .area-txt strong{ width:141px;}
    .modal-body .box2 .box-ty.box-w .area-txt input{ width:230px; height:27px;}


    .modal-body .email-area{  height:268px; padding:16px; }
    .modal-body .email-area .email-txt strong{margin-bottom:8px;  }
    .modal-body .btn-box{ margin-top:8px;  }


    .modal-footer{  padding:16px;}
    .modal-footer button{ margin-right:3px;}
    .modal-footer .contry-info {  line-height:16px;}
    .modal-footer .contry-info .box dt{ width:48px; margin-right:4px; line-height:16px; }
    .modal-footer .contry-info .box dd{ line-height:16px;}
    
    
    .terms-box .modal-body{ margin:16px; }
    .terms-box .modal-body .top{ padding:28px 0;}
    .terms-box .modal-body .top h2{ margin-bottom:16px; }


}




/************************************ front -  1024px이하  ***********************************/

@media screen and (max-width:1024px){
    
    
    /* main */
    :root{ }
    .front .container-inner section h1{ padding-top:74px; }
    .front .container-inner section h1_new{ padding-top:74px; padding-left:0px;}
    .front .container-inner section .line:after{ bottom:-20px; }
    .front .container-inner section .line2:after{ bottom:-20px; }
    .front .container-inner section .txt01{  }
    .front .container-inner section .txt02{  line-height:1.833rem; }

    .front .container-inner .section01{ height:316px; }
    .front .container-inner .section01 img{ max-height:600px; }

    .front .container-inner .section02 .img01{ left:-250px;}
    .front .container-inner .section02 .img02{ right:-250px;}
    .front .container-inner .section02 .btn-box{  margin-top:60px; }



    /* sub-page */
    textarea{ width:528px; height:136px; padding-left:12px;  line-height:1.667rem;  }
    .front .form-ty input[type="text"],
    .front .form-ty input[type="password"],
    .front .form-ty input[type="email"]{ width:528px;}
    .front .form-ty .text label{ margin-top:10px;}
    .front .form-ty .field label.required:after{ width:10px; height:10px; margin-left:5px;}

    .sub-page.front .form-ty label{ width: 201px; }
    .sub-page.front #header .header-fixed{ height:52px;}

    /* news - 박스*/
    .front.sub-page .content-wrap .list-section{  margin:72px 0 128px ;}
    .front.sub-page .content-wrap .list-section .list{ width:304px; margin-bottom:24px; }
    .front.sub-page .content-wrap .list-section .list .top{ padding:8px 16px; }
    .front.sub-page .content-wrap .list-section .list .top:before{ top:8px; left:16px;  width:23px; height:20px; }
    .front.sub-page .content-wrap .list-section .list .top b{ margin-left:32px;  }
    .front.sub-page .content-wrap .list-section .list .top .date{margin-left:32px; }
    .front.sub-page .content-wrap .list-section .list .bottom{ padding:8px 16px;}
    .front.sub-page .content-wrap .list-section .list .bottom .cont{ padding:12px 0;  }
    .front.sub-page .content-wrap .list-section .list .bottom .icon-box{ height:17px;}
    .front.sub-page .content-wrap .list-section .list .icon-box .icon-like{ margin-left:8px;}
    .front.sub-page .content-wrap .list-section .list .icon-box .icon-f{width:15px;height:21px;}
    .front.sub-page .content-wrap .list-section .list em.count{ margin-left:17px; }

    .front.sub-page #container .container-inner.contact .content-wrap,
    .front.sub-page #container .container-inner.membership .content-wrap{ margin:56px auto 80px;}

}



/* 2019-01-12 main fixed by noel */
.front-main .common-section{width:100%; height:auto !important; padding:90px 0;}
.front-main .common-box{width:1200px; height:100%; margin:0 auto; overflow:hidden; display:table; table-layout: fixed; }
.front-main .common-box > div{display:table-cell; vertical-align: middle; height:100%;}
.front-main .common-box > div.wrap-box{display:block;}
.front-main .common-box .txt-box{text-align: left; padding-left:55px;}
.front-main .common-box .text-r.txt-box{text-align:right; padding-left:0; padding-right:55px; letter-spacing: -.25px;}
.front-main .common-box .txt-box h2{display:block; text-align:left;color:#232323; margin-bottom: 20px;font-size: 2.375rem;line-height: 2.750rem; word-break: keep-all}
.front-main .common-box .text-r.txt-box h2{text-align:right;}
.front-main .common-box .txt-box .txt02{ font-size: 1.250rem; line-height: 1.625rem; color:#232323}
.front-main .common-box .txt-box.white h2{color:#fff;}
.front-main .common-box .txt-box.white .txt02{color:#fff;}
.front-main .common-box .txt-box.white .txt02 a{color:#fff; text-decoration:underline; transition:all .3s;}
.front-main .common-box .txt-box.white .txt02 a:hover{color:#3fc969}
.front-main .common-box .img-box .txt-box{padding-left:0;}
.front-main .common-box .img-box .txt-box h2{font-size:1.6rem; margin-top:30px; margin-bottom:7px;}
.front-main .common-box .img-box .txt-box .txt02{font-size:1.2rem}

.front-main .common-box img{max-width:100%;}

.center-fluid{margin-top:60px; font-size: 2.375rem;line-height: 2.750rem;}
.center-fluid .txt02{margin-top:30px;}
.center-fluid button{margin:40px auto 0; background:none; color:#fff; border-color:#fff;}
.center-fluid button:hover{background:#fff; color:#6c98cc; border-color:#6c98cc;}

/* section05 ~ section07 */
.section05{background:#5c8dc6}
.section06{background:#c1e1ee;}
.section07{background:#1b4677}
.section08{background:#5c8dc6}

/* section08 */
.stylus .title{font-size: 2.375rem;line-height: 2.750rem; color:#fff;}
.stylus .txt{ font-size: 1.250rem; line-height: 1.625rem;  margin-top:32px;}
.stylus .txt + img{display:block; margin: 70px auto}
.txt-3column{font-size:0;}
.txt-3column li{width:400px; display:inline-block; vertical-align: top;}
.txt-3column li em{display:block; font-size: 2.375rem;line-height: 2.750rem; color:#fff; text-align:center; }
.txt-3column li > span{display:block; text-align:center; font-size: 1.250rem; line-height: 1.825rem;  margin-top:30px;}
.txt-3column li i{display:inline-block; vertical-align: 2px }
.txt-3column li a{color:#fff; text-decoration: underline; transition:all .3s;}
.txt-3column li a:hover{color:#3fc969}

/* section09 */
.section09 p{color:#678cc1;font-size: 1.250rem;}
.section09 button{margin-top:40px;}

/* section10 */
.section10{color:#232323; background:#c0e1ed; font-size:  1.250rem;}
.front .container-inner section.section10{display:block;}
.section10 a{color:#232323; text-decoration: underline; transition:all .3s;}
.section10 a:hover{color:#3fc969}

.table {display: table; color:#000; width: 100%;}
.row {display: table-row; line-height:16px;}
.cell {display: table-cell; padding: 3px; /*border-bottom: 1px solid #DDD;*/}
.col1 { width: 7%;}
.col2 {width: 51%; }
.col3 {width: 7%;}
.col4 {width: 50%; }
.col80 {width: 81%;}
.col20 {width: 18%;}