@charset "utf-8";

@import url(Open_Sans.css);
@import url(nanumgothic.css);

body {font-family: 'Nanum Gothic' , 'Open Sans';}

.clear {clear:both;}
.hidden {display:none;}
.colorInherit {color:inherit;}
.overYa {overflow-y: auto;}
.pointer {cursor: pointer;}

.text_overflow {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.text_overflow p {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

/*text-color*/
.text_white {color:#fff !important;}
.text_red {color:#ff4b00 !important;}
.text_blue {color:#55b9ff;}
.text_green {color:#7dd237;}
.text_scal {color:#e68e27;}
.text_gray {color:#cdcdcd;}
.text_purple {color:#312d47;}
.text_black {color:#333333;}
.text_orange {color:#FF7F00;}
.red {color:#ff0000;}

/*font-size*/
.fs11 {font-size:11px;}
.fs12 {font-size:12px;}
.fs14 {font-size:14px;}
.fs16 {font-size:16px;}
.fs18 {font-size:18px;}
.fs20 {font-size:20px;}
.fs22 {font-size:22px;}
.fs25 {font-size:25px;}
.fs30 {font-size:30px;}
.fs40 {font-size:40px;}
.fs50 {font-size:50px;}
.fs60 {font-size:60px;}

/* line-height */
.lh14 {line-height: 14px;}
.lh30 {line-height: 30px;}
.lh34 {line-height: 34px;}
.lh40 {line-height: 40px;}

/*width*/
.w100 {width:100%;}
.w98 {width:98%;}
.w95 {width:95%;}
.w90 {width:90%;}
.w85 {width:85%;}
.w80 {width:80%;}
.w75 {width:75% !important;}
.w70 {width:70%;}
.w65 {width:65%;}
.w60 {width:60%;}
.w55 {width:55%;}
.w50 {width:50%;}
.w49 {width:49%;}
.w48 {width:48%;}
.w45 {width:45%;}
.w40 {width:40%;}
.w35 {width:35%;}
.w34 {width:34%;}
.w33 {width:33%;}
.w30 {width:30%;}
.w25 {width:25%;}
.w20 {width:20%;}
.w15 {width:15%;}
.w10 {width:10%;}
.w7 {width:7%;}
.w5 {width:5%;}
.w3 {width:3%;}
.w2 {width:2%;}
.w1 {width:1%;}
.w800px {width:800px;}
.w700px {width:700px;}
.w500px {width:500px;}
.w400px {width:400px;}
.w300px {width:300px;}
.w250px {width:250px;}
.w200px {width:200px;}
.w150px {width:150px;}
.w100px {width:100px;}
.w90px {width:90px;}
.w80px {width:80px;}
.w70px {width:70px;}
.w60px {width:60px;}
.w50px {width:50px;}
.w40px {width:40px;}
.w30px {width:30px;}
.w20px {width:20px;}
.w10px {width:10px;}

/*height*/
.mh0 {min-height:0 !important;}
.h20 {height:20px;}
.h30 {height:30px;}
.h80 {height:80px;}
.h100 {height:100px;}
.h150 {height:150px;}
.h180 {height:180px;}
.h200 {height:200px;}
.h250 {height:250px;}
.h280 {height:280px;}
.h300 {height:300px;}
.h310 {height:310px;}
.h320 {height:320px;}
.h325 {height:325px;}
.h350 {height:350px;}
.h400 {height:400px;}
.h500 {height:500px;}
.h100per {height:100%;}

/*margin*/
.m100 {margin:100px !important;}
.m90 {margin:90px !important;}
.m80 {margin:80px !important;}
/*.m70 {margin:70px !important;}*/
.m60 {margin:60px !important;}
.m50 {margin:50px !important;}
.m40 {margin:40px !important;}
.m30 {margin:30px !important;}
.m20 {margin:20px !important;}
.m10 {margin:10px !important;}
.m5 {margin:5px !important;}
.m0 {margin:0 !important;}
.m0a {margin:0 auto;}
.ma0 {margin:auto 0;}
.ma {margin:auto;}

/*margin-top*/
.mt100 {margin-top:100px !important;}
.mt90 {margin-top:90px !important;}
.mt80 {margin-top:80px !important;}
.mt70 {margin-top:70px !important;}
.mt60 {margin-top:60px !important;}
.mt50 {margin-top:50px !important;}
.mt40 {margin-top:40px !important;}
.mt30 {margin-top:30px !important;}
.mt20 {margin-top:20px !important;}
.mt15 {margin-top:15px !important;}
.mt10 {margin-top:10px !important;}
.mt5 {margin-top:5px !important;}
.mt2 {margin-top:2px !important;}
.mt0 {margin-top:0 !important;}
.mt-2 {margin-top:-2px !important;}
.mt-4 {margin-top:-4px !important;}
.mt-5 {margin-top:-5px !important;}

/*margin-left*/
.ml100 {margin-left:100px !important;}
.ml90 {margin-left:90px !important;}
.ml80 {margin-left:80px !important;}
.ml70 {margin-left:70px !important;}
.ml60 {margin-left:60px !important;}
.ml50 {margin-left:50px !important;}
.ml40 {margin-left:40px !important;}
.ml30 {margin-left:30px !important;}
.ml20 {margin-left:20px !important;}
.ml10 {margin-left:10px !important;}
.ml5 {margin-left:5px !important;}
.ml7 {margin-left:7px !important;}
.ml0 {margin-left:0 !important;}

/*margin-right*/
.mr5per {margin-right: 5% !important;}
.mr100 {margin-right:100px !important;}
.mr90 {margin-right:90px !important;}
.mr80 {margin-right:80px !important;}
.mr70 {margin-right:70px !important;}
.mr60 {margin-right:60px !important;}
.mr50 {margin-right:50px !important;}
.mr40 {margin-right:40px !important;}
.mr30 {margin-right:30px !important;}
.mr20 {margin-right:20px !important;}
.mr15 {margin-right:15px !important;}
.mr10 {margin-right:10px !important;}
.mr7 {margin-right:7px !important;}
.mr5 {margin-right:5px !important;}
.mr0 {margin-right:0 !important;}

/*margin-bottom*/
.mb100 {margin-bottom:100px !important;}
.mb90 {margin-bottom:90px !important;}
.mb80 {margin-bottom:80px !important;}
.mb70 {margin-bottom:70px !important;}
.mb60 {margin-bottom:60px !important;}
.mb50 {margin-bottom:50px !important;}
.mb40 {margin-bottom:40px !important;}
.mb30 {margin-bottom:30px !important;}
.mb20 {margin-bottom:20px !important;}
.mb10 {margin-bottom:10px !important;}
.mb5 {margin-bottom:5px !important;}
.mb3 {margin-bottom:3px !important;}
.mb0 {margin-bottom:0 !important;}
.mb-4 {margin-bottom: -4px important;}

/* margin-other */
.m5side0 {margin:5px 0;}
.mtb50 {margin-top: 50px; margin-bottom: 50px;}
.mtb70 {margin-top: 70px; margin-bottom: 70px;}

/*padding*/
.p100 {padding:100px !important;}
.p90 {padding:90px !important;}
.p80 {padding:80px !important;}
.p70 {padding:70px !important;}
.p60 {padding:60px !important;}
.p50 {padding:50px !important;}
.p40 {padding:40px !important;}
.p30 {padding:30px !important;}
.p20 {padding:20px !important;}
.p15 {padding:15px !important;}
.p10 {padding:10px !important;}
.p6 {padding:6px !important;}
.p5 {padding:5px !important;}
.p0 {padding:0 !important;}

/*padding_horizontal*/
.ph100 {padding:0 100px !important;}
.ph90 {padding:0 90px !important;}
.ph80 {padding:0 80px !important;}
.ph70 {padding:0 70px !important;}
.ph60 {padding:0 60px !important;}
.ph50 {padding:0 50px !important;}
.ph40 {padding:0 40px !important;}
.ph30 {padding:0 30px !important;}
.ph20 {padding:0 20px !important;}
.ph15 {padding:0 15px !important;}
.ph10 {padding:0 10px !important;}
.ph5 {padding:0 5px !important;}

/*padding_vertical*/
.pv100 {padding:100px 0 !important;}
.pv90 {padding:90px 0 !important;}
.pv80 {padding:80px 0 !important;}
.pv70 {padding:70px 0 !important;}
.pv60 {padding:60px 0 !important;}
.pv50 {padding:50px 0 !important;}
.pv40 {padding:40px 0 !important;}
.pv30 {padding:30px 0 !important;}
.pv20 {padding:20px 0 !important;}
.pv15 {padding:15px 0 !important;}
.pv10 {padding:10px 0 !important;}
.pv6 {padding:6px 0 !important;}
.pv5 {padding:5px 0 !important;}
.pv3 {padding:3px 0 !important;}
.pv2 {padding:2px 0 !important;}

/*padding-top*/
.pt100 {padding-top:100px !important;}
.pt90 {padding-top:90px !important;}
.pt80 {padding-top:80px !important;}
.pt70 {padding-top:70px !important;}
.pt60 {padding-top:60px !important;}
.pt50 {padding-top:50px !important;}
.pt40 {padding-top:40px !important;}
.pt30 {padding-top:30px !important;}
.pt20 {padding-top:20px !important;}
.pt10 {padding-top:10px !important;}
.pt7 {padding-top:7px !important;}
.pt5 {padding-top:5px !important;}
.pt2 {padding-top:2px !important;}
.pt0 {padding-top:0 !important;}

/*padding-left*/
.pl100 {padding-left:100px !important;}
.pl90 {padding-left:90px !important;}
.pl80 {padding-left:80px !important;}
.pl70 {padding-left:70px !important;}
.pl60 {padding-left:60px !important;}
.pl50 {padding-left:50px !important;}
.pl40 {padding-left:40px !important;}
.pl30 {padding-left:30px !important;}
.pl20 {padding-left:20px !important;}
.pl10 {padding-left:10px !important;}
.pl5 {padding-left:5px !important;}
.pl0 {padding-left:0 !important;}

/*padding-right*/
.pr100 {padding-right:100px !important;}
.pr90 {padding-right:90px !important;}
.pr80 {padding-right:80px !important;}
.pr70 {padding-right:70px !important;}
.pr60 {padding-right:60px !important;}
.pr50 {padding-right:50px !important;}
.pr40 {padding-right:40px !important;}
.pr30 {padding-right:30px !important;}
.pr20 {padding-right:20px !important;}
.pr10 {padding-right:10px !important;}
.pr7 {padding-right:7px !important;}
.pr5 {padding-right:5px !important;}
.pr0 {padding-right:0 !important;}

/*padding-bottom*/
.pb100 {padding-bottom:100px !important;}
.pb90 {padding-bottom:90px !important;}
.pb80 {padding-bottom:80px !important;}
.pb70 {padding-bottom:70px !important;}
.pb60 {padding-bottom:60px !important;}
.pb50 {padding-bottom:50px !important;}
.pb40 {padding-bottom:40px !important;}
.pb30 {padding-bottom:30px !important;}
.pb20 {padding-bottom:20px !important;}
.pb15 {padding-bottom:15px !important;}
.pb10 {padding-bottom:10px !important;}
.pb5 {padding-bottom:5px !important;}
.pb0 {padding-bottom:0 !important;}

.ptb50 {padding-top:50px; padding-bottom:50px;}
.pt50mb50 {padding-top: 50px; margin-bottom: 50px;}

/*border*/
.bor {border:1px solid #ddd;}
.bt {border-top:1px solid #ddd;}
.bb {border-bottom:1px solid #ddd;}
.bl {border-left:1px solid #ddd;}
.br {border-right:1px solid #ddd;}
.bortn {border-top:0 !important;}
.bbn {border-bottom:0 !important;}
.bln {border-left:0 !important;}
.brn {border-right:0 !important;}
.bn {border:0 !important;}
.bor2 {border:2px solid #bbb;}
.bt2 {border-top:2px solid #bbb;}
.bb2 {border-bottom:2px solid #bbb;}
.bl2 {border-left:2px solid #bbb;}
.br2 {border-right:2px solid #bbb;}
.brTest {border:1px solid red;}
.brnone {border:none !important;}
.brw {border:1px solid #FFFFFF !important;}
.blf4 {border-left:1px solid #F4F4F4;}

/*border-dotted*/
.bor_dot {border:1px dotted #bbb;}
.bt_dot {border-top:1px dotted #bbb;}
.bb_dot {border-bottom:1px dotted #bbb;}
.bl_dot {border-left:1px dotted #bbb;}
.br_dot {border-right:1px dotted #bbb;}

/*border-radius*/
.bra50 {border-radius:50%;}
.bra10 {border-radius:10px;}
.bra5 {border-radius:5px;}
.bra3 {border-radius:3px;}

/*background-color*/
.bg_fff {background-color:#fff;}
.bg_gray {background-color:#f9f9fb;}
.bg_dgray {background-color:#f2f2f4;}
.bg_dblue {background-color:#3c4650;}
.bg_blue {background-color:#55b9ff;}
.bg_purple {background-color:#312d47; color: #FFFFFF;}
.bgn {background:none !important;}
.bgcn {background-color:transparent !important;}


/*float*/
.fl {float:left !important;}
.fr {float:right !important;}
.fn {float:none !important;}
.flexend {display: flex; justify-content: flex-end;}

/*text-align*/
.tc {text-align:center !important;}
.tl {text-align:left !important;}
.tr {text-align:right !important;}
.tj {text-align:justify !important;}

/*font-weight*/
.tb {font-weight:bold;}
.tn {font-weight:normal;}

/*text-decoration*/
.tdo {text-decoration:overline;}
.tdl {text-decoration:line-through;}
.tdo {text-decoration:underline;}

/*display*/
.db {display:block !important;}
.di {display:inline !important;}
.dib {display:inline-block !important;}
.df {display:flex !important;}

/* flex */
.df_center {display:flex; justify-content: center;}