/* 새로 바뀐 common 2014.10.17 */

.abs {position:absolute !important}
.rel {position:relative !important}
/*.fixed {position:fixed !important; top:0;}*/
.fr {float:right !important}
.fl {float:left !important}
.bgeee{background: #eee;}


.keycolor{color:#2a6fd6 !important;}
.keybg{background:#2a6fd6; color:#fff;}
.keybd{border: 1px solid #2a6fd6;}
.orgbg{background:#ff6f00; color:#fff;}
.noBg {background:none !important}
.grayBg{background:#999 !important; color:#fff;}
.graybd{border: 1px solid #999 !important;}
.graycolor{color:#999 !important;}
.gnbd{border: 1px solid #006b32 !important;}
.gncolor{color:#006b32;}
.redcolor{color:#cc0000;}
.redbd{border: 1px solid #cc0000 !important;}
.overHidden {overflow:hidden !important}
.cursor{cursor:default;}
.normalbg{background-color: #eeeeee; border: 1px solid #ddd;}
.basicbg{background-color: #f5f5f5 !important;}
.basicbd{border: 1px solid #ddd !important}
.basicbg{background-color: #ddd !important; color:#fff !important;}
.bgaaa{background-color: #aaa !important;}
.bgf5{background-color: #f5f5f5 !important;}

.abs {position:absolute !important;}
.rel {position:relative !important;}
.fr {float:right !important;}
.fl {float:left !important;}
.fn {float:none !important;}

.inline {display:inline !important;}
.inblock {display:inline-block !important;}
.block {display:block !important;}
.table {display:table;}
.table_cell {display:table-cell;}

.nrb {border-right:none !important}
.nlb {border-left:none !important}
.ntb {border-top:none !important}
.nbb {border-bottom:none !important}
.noBorder {border:none !important}

.nrp {padding-right:0 !important}
.nlp {padding-left:0 !important}
.ntp {padding-top:0 !important}
.nbp {padding-bottom:0 !important}
.noPadding {padding:0 !important}

.nrm {margin-right:0 !important}
.nlm {margin-left:0 !important}
.ntm {margin-top:0 !important}
.nbm {margin-bottom:0 !important}
.noMargin {padding:0 !important}

.line100 {line-height:100% !important}
.line110 {line-height:110% !important}
.line120 {line-height:120% !important}
.line130 {line-height:130% !important}
.line140 {line-height:140% !important}
.line150 {line-height:150% !important}
.line160 {line-height:160% !important}
.line170 {line-height:170% !important}
.line180 {line-height:180% !important}
.line190 {line-height:190% !important}
.line200 {line-height:200% !important}
.line250 {line-height:250% !important}
.line300 {line-height:300% !important}

.fs10 {font-size:10px !important}
.fs11 {font-size:11px !important}
.fs12 {font-size:12px !important}
.fs13 {font-size:13px !important}
.fs14 {font-size:14px !important}
.fs15 {font-size:15px !important}
.fs16 {font-size:16px !important}
.fs17 {font-size:17px !important}
.fs18 {font-size:18px !important}
.fs19 {font-size:19px !important}
.fs20 {font-size:20px !important}
.fs21 {font-size:21px !important}
.fs22 {font-size:22px !important}
.fs23 {font-size:23px !important}
.fs24 {font-size:24px !important}
.fs25 {font-size:25px !important}
.fs26 {font-size:26px !important}
.fs27 {font-size:27px !important}
.fs28 {font-size:28px !important}
.fs29 {font-size:29px !important}
.fs30 {font-size:30px !important}

.em01 {font-size:1em !important}
.em11 {font-size:1.1em !important}
.em12 {font-size:1.2em !important}
.em13 {font-size:1.3em !important}
.em14 {font-size:1.4em !important}
.em15 {font-size:1.5em !important}


.mt05 {margin-top:5px !important}
.mt10 {margin-top:10px !important}
.mt15 {margin-top:15px !important}
.mt20 {margin-top:20px !important}
.mt25 {margin-top:25px !important}
.mt30 {margin-top:30px !important}
.mt35 {margin-top:35px !important}
.mt40 {margin-top:40px !important}
.mt45 {margin-top:45px !important}
.mt50 {margin-top:50px !important}
.mt55 {margin-top:55px !important}
.mt60 {margin-top:60px !important}
.mt65 {margin-top:65px !important}
.mt70 {margin-top:70px !important}
.mt75 {margin-top:75px !important}
.mt80 {margin-top:80px !important}
.mt85 {margin-top:85px !important}
.mt90 {margin-top:90px !important}
.mt95 {margin-top:95px !important}
.mt100 {margin-top:100px !important}
.mt200 {margin-top:200px !important}

.mb05 {margin-bottom:5px !important}
.mb10 {margin-bottom:10px !important}
.mb15 {margin-bottom:15px !important}
.mb20 {margin-bottom:20px !important}
.mb25 {margin-bottom:25px !important}
.mb30 {margin-bottom:30px !important}
.mb35 {margin-bottom:35px !important}
.mb40 {margin-bottom:40px !important}
.mb45 {margin-bottom:45px !important}
.mb50 {margin-bottom:50px !important}
.mb55 {margin-bottom:55px !important}
.mb60 {margin-bottom:60px !important}
.mb65 {margin-bottom:65px !important}
.mb70 {margin-bottom:70px !important}
.mb75 {margin-bottom:75px !important}
.mb80 {margin-bottom:80px !important}
.mb85 {margin-bottom:85px !important}
.mb90 {margin-bottom:90px !important}
.mb95 {margin-bottom:95px !important}
.mb100 {margin-bottom:100px !important}
.mb200 {margin-bottom:200px !important}


.ml05 {margin-left:5px !important}
.ml10 {margin-left:10px !important}
.ml15 {margin-left:15px !important}
.ml20 {margin-left:20px !important}
.ml25 {margin-left:25px !important}
.ml30 {margin-left:30px !important}
.ml35 {margin-left:35px !important}
.ml40 {margin-left:40px !important}
.ml45 {margin-left:45px !important}
.ml50 {margin-left:50px !important}
.ml55 {margin-left:55px !important}
.ml60 {margin-left:60px !important}
.ml65 {margin-left:65px !important}
.ml70 {margin-left:70px !important}
.ml75 {margin-left:75px !important}
.ml80 {margin-left:80px !important}
.ml85 {margin-left:85px !important}
.ml90 {margin-left:90px !important}
.ml95 {margin-left:95px !important}
.ml100 {margin-left:100px !important}


.mr05 {margin-right:5px !important}
.mr10 {margin-right:10px !important}
.mr15 {margin-right:15px !important}
.mr20 {margin-right:20px !important}
.mr25 {margin-right:25px !important}
.mr30 {margin-right:30px !important}
.mr35 {margin-right:35px !important}
.mr40 {margin-right:40px !important}
.mr45 {margin-right:45px !important}
.mr50 {margin-right:50px !important}
.mr55 {margin-right:55px !important}
.mr60 {margin-right:60px !important}
.mr65 {margin-right:65px !important}
.mr70 {margin-right:70px !important}
.mr75 {margin-right:75px !important}
.mr80 {margin-right:80px !important}
.mr85 {margin-right:85px !important}
.mr90 {margin-right:90px !important}
.mr95 {margin-right:95px !important}
.mr100 {margin-right:100px !important}

.m02 {margin:2px !important}
.m05 {margin:5px !important}
.m10 {margin:10px !important}
.m15 {margin:15px !important}
.m20 {margin:20px !important}
.m25 {margin:25px !important}
.m30 {margin:30px !important}
.m35 {margin:35px !important}
.m40 {margin:40px !important}
.m45 {margin:45px !important}
.m50 {margin:50px !important}
.m55 {margin:55px !important}
.m60 {margin:60px !important}
.m65 {margin:65px !important}
.m70 {margin:70px !important}
.m75 {margin:75px !important}
.m80 {margin:80px !important}
.m85 {margin:85px !important}
.m90 {margin:90px !important}
.m95 {margin:95px !important}
.m100 {margin:100px !important}


.pt0 {padding-top:0px !important}
.pt05 {padding-top:5px !important}
.pt10 {padding-top:10px !important}
.pt15 {padding-top:15px !important}
.pt20 {padding-top:20px !important}
.pt25 {padding-top:25px !important}
.pt30 {padding-top:30px !important}
.pt35 {padding-top:35px !important}
.pt40 {padding-top:40px !important}
.pt45 {padding-top:45px !important}
.pt50 {padding-top:50px !important}
.pt55 {padding-top:55px !important}
.pt60 {padding-top:60px !important}
.pt65 {padding-top:65px !important}
.pt70 {padding-top:70px !important}
.pt75 {padding-top:75px !important}
.pt80 {padding-top:80px !important}
.pt85 {padding-top:85px !important}
.pt86 {padding-top:86px !important}
.pt90 {padding-top:90px !important}
.pt95 {padding-top:95px !important}
.pt100 {padding-top:100px !important}

.pb0 {padding-bottom:0px !important}
.pb05 {padding-bottom:5px !important}
.pb10 {padding-bottom:10px !important}
.pb15 {padding-bottom:15px !important}
.pb20 {padding-bottom:20px !important}
.pb25 {padding-bottom:25px !important}
.pb30 {padding-bottom:30px !important}
.pb35 {padding-bottom:35px !important}
.pb40 {padding-bottom:40px !important}
.pb45 {padding-bottom:45px !important}
.pb50 {padding-bottom:50px !important}
.pb55 {padding-bottom:55px !important}
.pb60 {padding-bottom:60px !important}
.pb65 {padding-bottom:65px !important}
.pb70 {padding-bottom:70px !important}
.pb75 {padding-bottom:75px !important}
.pb80 {padding-bottom:80px !important}
.pb85 {padding-bottom:85px !important}
.pb90 {padding-bottom:90px !important}
.pb95 {padding-bottom:95px !important}
.pb100 {padding-bottom:100px !important}

.pl05 {padding-left:5px !important}
.pl10 {padding-left:10px !important}
.pl15 {padding-left:15px !important}
.pl20 {padding-left:20px !important}
.pl25 {padding-left:25px !important}
.pl30 {padding-left:30px !important}
.pl35 {padding-left:35px !important}
.pl40 {padding-left:40px !important}
.pl45 {padding-left:45px !important}
.pl50 {padding-left:50px !important}
.pl55 {padding-left:55px !important}
.pl60 {padding-left:60px !important}
.pl65 {padding-left:65px !important}
.pl70 {padding-left:70px !important}
.pl75 {padding-left:75px !important}
.pl80 {padding-left:80px !important}
.pl85 {padding-left:85px !important}
.pl90 {padding-left:90px !important}
.pl95 {padding-left:95px !important}
.pl100 {padding-left:100px !important}


.pr05 {padding-right:5px !important}
.pr10 {padding-right:10px !important}
.pr15 {padding-right:15px !important}
.pr20 {padding-right:20px !important}
.pr25 {padding-right:25px !important}
.pr30 {padding-right:30px !important}
.pr35 {padding-right:35px !important}
.pr40 {padding-right:40px !important}
.pr45 {padding-right:45px !important}
.pr50 {padding-right:50px !important}
.pr55 {padding-right:55px !important}
.pr60 {padding-right:60px !important}
.pr65 {padding-right:65px !important}
.pr70 {padding-right:70px !important}
.pr75 {padding-right:75px !important}
.pr80 {padding-right:80px !important}
.pr85 {padding-right:85px !important}
.pr90 {padding-right:90px !important}
.pr95 {padding-right:95px !important}
.pr100 {padding-right:100px !important}



.p05 {padding:5px !important}
.p10 {padding:10px !important}
.p15 {padding:15px !important}
.p20 {padding:20px !important}
.p25 {padding:25px !important}
.p30 {padding:30px !important}
.p35 {padding:35px !important}
.p40 {padding:40px !important}
.p45 {padding:45px !important}
.p50 {padding:50px !important}
.p55 {padding:55px !important}
.p60 {padding:60px !important}
.p65 {padding:65px !important}
.p70 {padding:70px !important}
.p75 {padding:75px !important}
.p80 {padding:80px !important}
.p85 {padding:85px !important}
.p90 {padding:90px !important}
.p95 {padding:95px !important}
.p100 {padding:100px !important}


.w00 {width:0% !important;}
.w05 {width:5% !important;}
.w10 {width:10% !important;}
.w15 {width:15% !important;}
.w20 {width:20% !important;}
.w25 {width:25% !important;}
.w30 {width:30% !important;}
.w35 {width:35% !important;}
.w40 {width:40% !important;}
.w45 {width:45% !important;}
.w50 {width:50% !important;}
.w55 {width:55% !important;}
.w60 {width:60% !important;}
.w65 {width:65% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}
.w85 {width:85% !important;}
.w90 {width:90% !important;}
.w95 {width:95% !important;}
.w97 {width:97% !important;}
.w100 {width:100% !important;}

/* 폰트 두께 */
.bold {font-weight:bold !important}
.normal {font-weight:normal !important}
.f500{font-weight: 500 !important;}
.f400{font-weight: 400 !important;}
.f300{font-weight: 300 !important;}

/* 폰트 */
.gotham{font-family: 'Gotham'}
.gothamR{font-family: 'GothamR'}

/* 폰트 색깔 */

.color000{color:#000 !important;}
.color222{color:#222 !important;}
.color333{color:#333 !important;}
.color444{color:#444 !important;}
.color666{color:#666 !important;}
.color999{color:#999 !important;}
.colorfff{color:#fff !important;}

/* 감추기 */
.blind {display:none !important}
.hidden {font-size:0; line-height:0;width:0; height:0;overflow:hidden; text-indent:-9999px;}

/* float해제 */
.clearFix:after {content:""; width:0; height:0; font-size:0; line-height:0; display:block; visibility:hidden; clear:both !important}
.clear {clear:both !important}


/* 박스관련 */
.borderBox {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }


li a {vertical-align:top;}
li a img {vertical-align:top;}
li img {vertical-align:top;}
a img {vertical-align:top;}
div img {vertical-align:top;}


/* text 정렬 */
.tac {text-align:center !important;}
.tal {text-align:left !important;}
.tar {text-align:right !important;}


/* 세로 정렬 */
.vertical * {vertical-align:middle !important;}
.vTop {vertical-align:top !important;}
.vMid {vertical-align:middle !important;}
.vBottom {vertical-align:bottom !important;}

.vSub {vertical-align:sub !important;}

.wordKA{word-break: keep-all;}
.wordBW{word-break:break-word;}
.wsNormal{white-space: normal !important;}
.wsNowrap{white-space: nowrap !important;}

/* list */
ul.list > li {float:left !important;}
ul.list:after {content:""; width:0; height:0; font-size:0; line-height:0; display:block; visibility:hidden; clear:both !important}

.list_disc{list-style:disc;}
.list_decimal{list-style:decimal;}

/*link*/
.txtlink a{color:#202dd9;}

/*필수입력사항*/
.required{color:#cc0000;display: inline-block; vertical-align: text-bottom;}

/*레이아웃*/

.containRow{margin-left:auto; margin-right:auto;}
.row{clear:both; margin-left:-12px; margin-right:-12px; position:relative;}
.row .col-20, .row .col-25, .row .col-30, .row .col-33, .row .col-35, .row .col-40,
.row .col-50, .row .col-60, .row .col-66, .row .col-70, .row .col-75, .row .col-100,
.row .col-1, .row .col-2, .row .col-3, .row .col-4, .row .col-5, .row .col-6,
.row .col-7, .row .col-8, .row .col-9, .row .col-10, .row .col-11, .row .col-12{float:left;padding-left:12px; padding-right:12px;box-sizing: border-box;}
.containRow:before,.containRow:after,.row:before,.row:after{
    display:table;
    content:" "
}

.containRow:before,.containRow:after,.row:before,.row:after{
    clear:both
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


.row .col-20{width:20%;}
.row .col-25{width:25%;}
.row .col-30{width:30%;}
.row .col-33{width:33.333%;}
.row .col-35{width:35%;}
.row .col-40{width:40%;}
.row .col-50{width:50%;}
.row .col-60{width:60%;}
.row .col-66{width:66%;}
.row .col-70{width:70%;}
.row .col-75{width:75%;}
.row .col-100{width:100%;}

/*이미지 비율*/
.ratio.thumbnail-wrapper { width: 100%; } 
.ratio .thumbnail { position: relative; padding-top: 57.2%;  overflow: hidden; } 
.ratio .thumbnail img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto;}

/* radio, chkbox */
input[type="radio"], input[type="checkbox"] {
    visibility: hidden;
    display: none;
}
label.radio:before {
    background: #fff;
    border: 1px solid #ddd;
    content: '';
    position: absolute;
    top: 0px;
    /*top: 19px;*/
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    box-sizing: border-box;
}
label.radio {
    cursor: pointer;
    text-indent: 25px;
    overflow: visible;
    display: inline-block;
    position: relative;
    font-size: 15px;
    height: 15px;
    line-height: 14px;
}
label.radio:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    top: 4px;
    /*top: 24px;*/
    left: 4px;
    background: #666;
    border-radius: 50%;
}
input:checked + label.radio:after{
    opacity: 1;
}
label.chkbox:before {
    background: #fff;
    border: 1px solid #ddd;
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 15px;
    height: 15px;
	border-radius:2px;
    box-sizing: border-box;
}
label.chkbox {
    cursor: pointer;
    text-indent: 25px;
    overflow: visible;
    display: inline-block;
    position: relative;
    font-size: 15px;
	color:#555;
	font-weight:300;
    height: 15px;
    line-height: 14px;
}
label.chkbox:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    top: 4px;
    left: 4px;
	background: url(/html/images/common/icon_check.png) 50% 50% no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
input:checked + label.chkbox:after{
    opacity: 1 !important;
}
input:disabled{background-color: #fff;}

::-moz-selection {
   background: #f2f5fd;/*c28eee*/
   color: #555;
}
::selection {
   background: #f2f5fd;
   color: #555;
}

input:-webkit-input-placeholder { color: #999; font-size:14px; }
input:-ms-input-placeholder { color: #999; font-size:14px; }/*IE10이상버전에서만 적용됨*/
input:-webkit-input-placeholder { color: #999; font-size:14px; } 
input:-moz-placeholder { color: #999; font-size:14px; }
input::placeholder ,
select::placeholder{color:#999; font-size:14px;}
input.ipt01{height:42px;border:1px solid #ddd;padding:0 10px;background:#fff;border-radius:3px;-webkit-appearance:none;appearance:none;}
select{border-radius:3px;vertical-align:middle;}
#userid { ime-mode:inactive !important; }
.userid { ime-mode:disabled !important; }


/*글제목 관련*/
.w_subject{display: inline-block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
/*썸네일 관련*/
.thumbnail-wrapper {
    width: 100%; 
}

.thumbnail {
    position: relative;
    padding-top: 100%;  /* 1:1 ratio */
    overflow: hidden;
}
.thumbnail.ratio2 {
    position: relative;
    padding-top: 56.5%;  /* 1:1 ratio */
    overflow: hidden;
}
.thumbnail.ratio2 img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width:100%;max-width: 100%; height: auto; }


.thumbnail .centered  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(50%,50%);
    -ms-transform: translate(50%,50%);
    transform: translate(50%,50%);
}

.thumbnail .centered img {
    position: absolute;
    top: 0;
    left: 0;   
    max-width: 100%;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

img.portrait { width: 100%; height: auto; }
img.landscape { width: auto; height: 100%; }

.thumbnail.ratio3 {
    position: relative;
    padding-top: 134%;  /* 3:4 ratio */
    overflow: hidden;
}
.thumbnail.ratio3 img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }

.thumbnail.ratio4 {
    position: relative;
    padding-top: 67.7%;
    overflow: hidden;
}
.thumbnail.ratio4 img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }


/*컬럼 이름*/
.columnName {font-size: 12px; color: #fff; display: inline-block; padding: 5px 8px;}
.columnName.name0{background:#48ab59;}
.columnName.name1{background:#ef5172;}
.columnName.name2{background:#05cbaa;}
.columnName.name3{background:#6d85ff;}
.columnName.name4{background:#a959ec;}
.columnName.name5{background:#3db6e5;}
.columnName.name6{background:#ed66c2;}
.columnName.name7{background:#f67637;}


/*버튼*/
.btnWrap{text-align:center;margin-top:40px;}
.btnWrap a{min-width:130px; height:38px; line-height:36px; text-align:center; display:inline-block;margin:0 4px;vertical-align: middle;padding: 0 20px;}
.xs-sm-btn{font-size:12px; padding:2px 4px;}
table .sm-btn{font-size:13px; padding:5px 12px;border-radius:50px; display:inline-block;}

/*리스트 스타일 1*/
.list-style1{margin-bottom:30px;}
.list-style1 li{line-height:24px; font-size:13px;position:relative;padding-left:10px;}
.list-style1 li:before{content:'';width:4px;height:1px; border-radius:100%;position:absolute;top:11px;left:0;background:#555;}

/*리스트 스타일 2*/
.listBox{padding-left:20px;}
.ulList{}
.ulList li{line-height:24px; font-size:15px;position:relative;padding-left:10px;color:#555;}
.ulList li:before{content:'';width:3px;height:3px; border-radius:100%;position:absolute;top:10px;left:0;background:#555;}
.ulList2{}
.ulList2 li{line-height:26px; font-size:15px;position:relative;padding:5px 0;padding-left:35px;font-weight:300;color:#555;}
.ulList2 li span{width:24px;height:24px; border-radius:100%;position:absolute;top:6px;left:0;background:#bbb;color:#fff;font-size:12px; font-weight:600;text-align: center;line-height: 24px;}
.dotList{}
.dotList li{line-height:24px; font-size:15px;position:relative;padding:0px 0px 0px 10px !important;color:#555;}
.dotList li:before{content:'';width:3px;height:3px; border-radius:100%;position:absolute;top:10px;left:0;background:#555;}
@media all and (max-width:768px) {

/*버튼*/
.btnWrap{margin-top:20px;}
.btnWrap a{width:30%;margin:0 1%; min-width:auto;}

/*리스트 스타일 1*/
.list-style1{margin-bottom:15px;}
.list-style1 li{line-height:18px;padding-bottom:5px;}
.list-style1 li:last-child{padding-bottom:0}
.list-style1 li:before{content:'';width:4px;height:1px; border-radius:100%;position:absolute;top:8px;left:0;background:#555;}

/*리스트 스타일 2*/
.listBox{padding-left:0px;}
.ulList2{}
.ulList2 li{line-height:22px; font-size:15px;position:relative;padding-left:30px;font-weight:300;color:#555;margin-bottom:5px;}
.ulList2 li span{width:24px;height:24px;top:7px;font-size:12px; font-weight:600;line-height: 24px;}

}