@charset "utf-8";

/*----------------------------------------------------------------------------------------------------------------------------------------
	File : common.css
	Company : The Webstyle co.,ltd
    CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
    CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
    CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, font/color, align, etc
------------------------------------------------------------------------------------------------------------------------------------------*/

/* Hidden */
.blind {overflow:hidden; width:0px; height:0px; margin:0; padding:0; font-size:0px; line-height:0px;}
.hide {display:none}

/* Display */
.display-ib {display:inline-block;}
.display-b {display:block;}
.display-n {display:none;}
.display-t {display:table; width:100%;}
.display-tc {display:table-cell;}

/* Float */
.fl {float:left !important;}
.fr {float:right !important;}
.cb {clear:both !important;}
.clearfix {*zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}

/* Scroll */
.scroll-a {overflow:auto;}
.scroll-h {overflow:hidden;}
.scroll-x {overflow-x:scroll;}
.scroll-y {overflow-y:scroll;}

/* Grid */
.row:after {content:''; display:block; clear:both;}
.col {
	float:left;
	width:100%;
	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out 0s;
	-moz-transition:all 0.3s ease-out 0s;
	-o-transition:all 0.3s ease-out 0s;
}
.col.right {float:right;}
.col.col-1  {width:8.33333333%;}
.col.col-2  {width:16.66666667%;}
.col.col-3  {width:25%;}
.col.col-4  {width:33.33333333%;}
.col.col-5  {width:41.66666667%;}
.col.col-6  {width:50%;}
.col.col-7  {width:58.33333333%;}
.col.col-8  {width:66.66666667%;}
.col.col-9  {width:75%;}
.col.col-10 {width:83.33333333%;}
.col.col-11 {width:91.66666667%;}
.col.col-12 {width:100%;}

.row.cols-2 > .col {width:50%;}
.row.cols-3 > .col {width:33.3333%;}
.row.cols-3 > .col:first-child {width:33.3334%;}
.row.cols-4 > .col {width:25%;}
.row.cols-5 > .col {width:20%;}
.row.cols-6 > .col {width:16.6666%;}
.row.cols-6 > .col:first-child {width:16.667%;}
.row.cols-7 > .col {width:14.2857142%;}
.row.cols-7 > .col:first-child {width:14.2857148%;}
.row.cols-8 > .col {width:12.5%;}
.row.cols-9 > .col {width:11.1111%;}
.row.cols-9 > .col:first-child {width:11.1112%;}
.row.cols-10 > .col {width:10%;}
.row.cols-12 > .col {width:8.3333%;}
.row.cols-12 > .col:first-child {width:8.3334%;}

.row.gutter-6 {margin:-3px;}
.row.gutter-8 {margin:-4px;}
.row.gutter-10 {margin:-5px;}
.row.gutter-12 {margin:-6px;}
.row.gutter-16 {margin:-8px;}
.row.gutter-20 {margin:-10px;}
.row.gutter-24 {margin:-12px;}
.row.gutter-28 {margin:-14px;}
.row.gutter-30 {margin:-15px;}
.row.gutter-32 {margin:-16px;}
.row.gutter-36 {margin:-18px;}
.row.gutter-40 {margin:-20px;}
.row.gutter-50 {margin:-25px;}
.row.gutter-60 {margin:-30px;}
.row.gutter-70 {margin:-35px;}

.row.gutter-6 > .col {padding:3px;}
.row.gutter-8 > .col {padding:4px;}
.row.gutter-10 > .col {padding:5px;}
.row.gutter-12 > .col {padding:6px;}
.row.gutter-16 > .col {padding:8px;}
.row.gutter-20 > .col {padding:10px;}
.row.gutter-24 > .col {padding:12px;}
.row.gutter-28 > .col {padding:14px;}
.row.gutter-30 > .col {padding:15px;}
.row.gutter-32 > .col {padding:16px;}
.row.gutter-36 > .col {padding:18px;}
.row.gutter-40 > .col {padding:20px;}
.row.gutter-50 > .col {padding:25px;}
.row.gutter-60 > .col {padding:30px;}
.row.gutter-70 > .col {padding:35px;}

.row.gutter-h6  {margin-left:-3px; margin-right:-3px;}
.row.gutter-h8  {margin-left:-4px; margin-right:-4px;}
.row.gutter-h10 {margin-left:-5px; margin-right:-5px;}
.row.gutter-h12 {margin-left:-6px; margin-right:-6px;}
.row.gutter-h16 {margin-left:-8px; margin-right:-8px;}
.row.gutter-h20 {margin-left:-10px; margin-right:-10px;}
.row.gutter-h24 {margin-left:-12px; margin-right:-12px;}
.row.gutter-h28 {margin-left:-14px; margin-right:-14px;}
.row.gutter-h30 {margin-left:-15px; margin-right:-15px;}
.row.gutter-h32 {margin-left:-16px; margin-right:-16px;}
.row.gutter-h36 {margin-left:-18px; margin-right:-18px;}
.row.gutter-h40 {margin-left:-20px; margin-right:-20px;}
.row.gutter-h50 {margin-left:-25px; margin-right:-25px;}
.row.gutter-h60 {margin-left:-30px; margin-right:-30px;}
.row.gutter-h70 {margin-left:-35px; margin-right:-35px;}

.row.gutter-h6 > .col  {padding-left:3px; padding-right:3px;}
.row.gutter-h8 > .col  {padding-left:4px; padding-right:4px;}
.row.gutter-h10 > .col {padding-left:5px; padding-right:5px;}
.row.gutter-h12 > .col {padding-left:6px; padding-right:6px;}
.row.gutter-h16 > .col {padding-left:8px; padding-right:8px;}
.row.gutter-h20 > .col {padding-left:10px; padding-right:10px;}
.row.gutter-h24 > .col {padding-left:12px; padding-right:12px;}
.row.gutter-h28 > .col {padding-left:14px; padding-right:14px;}
.row.gutter-h30 > .col {padding-left:15px; padding-right:15px;}
.row.gutter-h32 > .col {padding-left:16px; padding-right:16px;}
.row.gutter-h36 > .col {padding-left:18px; padding-right:18px;}
.row.gutter-h40 > .col {padding-left:20px; padding-right:20px;}
.row.gutter-h50 > .col {padding-left:25px; padding-right:25px;}
.row.gutter-h60 > .col {padding-left:30px; padding-right:30px;}
.row.gutter-h70 > .col {padding-left:35px; padding-right:35px;}

.row.gutter-v6  {margin-top:-3px; margin-bottom:-3px;}
.row.gutter-v8  {margin-top:-4px; margin-bottom:-4px;}
.row.gutter-v10 {margin-top:-5px; margin-bottom:-5px;}
.row.gutter-v12 {margin-top:-6px; margin-bottom:-6px;}
.row.gutter-v16 {margin-top:-8px; margin-bottom:-8px;}
.row.gutter-v20 {margin-top:-10px; margin-bottom:-10px;}
.row.gutter-v24 {margin-top:-12px; margin-bottom:-12px;}
.row.gutter-v28 {margin-top:-14px; margin-bottom:-14px;}
.row.gutter-v30 {margin-top:-15px; margin-bottom:-15px;}
.row.gutter-v32 {margin-top:-16px; margin-bottom:-16px;}
.row.gutter-v36 {margin-top:-18px; margin-bottom:-18px;}
.row.gutter-v40 {margin-top:-20px; margin-bottom:-20px;}
.row.gutter-v50 {margin-top:-25px; margin-bottom:-25px;}
.row.gutter-v60 {margin-top:-30px; margin-bottom:-30px;}
.row.gutter-v70 {margin-top:-35px; margin-bottom:-35px;}

.row.gutter-v6 > .col  {padding-top:3px; padding-bottom:3px;}
.row.gutter-v8 > .col  {padding-top:4px; padding-bottom:4px;}
.row.gutter-v10 > .col {padding-top:5px; padding-bottom:5px;}
.row.gutter-v12 > .col {padding-top:6px; padding-bottom:6px;}
.row.gutter-v16 > .col {padding-top:8px; padding-bottom:8px;}
.row.gutter-v20 > .col {padding-top:10px; padding-bottom:10px;}
.row.gutter-v24 > .col {padding-top:12px; padding-bottom:12px;}
.row.gutter-v28 > .col {padding-top:14px; padding-bottom:14px;}
.row.gutter-v30 > .col {padding-top:15px; padding-bottom:15px;}
.row.gutter-v32 > .col {padding-top:16px; padding-bottom:16px;}
.row.gutter-v36 > .col {padding-top:18px; padding-bottom:18px;}
.row.gutter-v40 > .col {padding-top:20px; padding-bottom:20px;}
.row.gutter-v50 > .col {padding-top:25px; padding-bottom:25px;}
.row.gutter-v60 > .col {padding-top:30px; padding-bottom:30px;}
.row.gutter-v70 > .col {padding-top:35px; padding-bottom:35px;}


/*-------------------------------------------------------------------
    Fixed Size & Gutter
-------------------------------------------------------------------*/
/* Width Percent */
.w-10p {width:10%;}
.w-20p {width:20%;}
.w-30p {width:30%;}
.w-40p {width:40%;}
.w-50p {width:50%;}
.w-60p {width:60%;}
.w-70p {width:70%;}
.w-80p {width:80%;}
.w-90p {width:90%;}
.w-100p {width:100%;}

/* Width Pixcel */
.w-10 {width:10px;}
.w-20 {width:20px;}
.w-30 {width:30px;}
.w-40 {width:40px;}
.w-50 {width:50px;}
.w-60 {width:60px;}
.w-70 {width:70px;}
.w-80 {width:80px;}
.w-90 {width:90px;}
.w-100 {width:100px;}
.w-120 {width:120px;}
.w-140 {width:140px;}
.w-150 {width:150px;}
.w-160 {width:160px;}
.w-170 {width:170px;}
.w-200 {width:200px;}
.w-220 {width:220px;}
.w-240 {width:240px;}
.w-250 {width:250px;}
.w-260 {width:260px;}
.w-280 {width:280px;}
.w-300 {width:300px;}

/* Width REM */
.w-01r {width:0.1rem;}
.w-02r {width:0.2rem;}
.w-03r {width:0.3rem;}
.w-04r {width:0.4rem;}
.w-05r {width:0.5rem;}
.w-06r {width:0.6rem;}
.w-07r {width:0.7rem;}
.w-08r {width:0.8rem;}
.w-09r {width:0.9rem;}
.w-10r {width:1.0rem;}
.w-12r {width:1.2rem;}
.w-14r {width:1.4rem;}
.w-15r {width:1.5rem;}
.w-16r {width:1.6rem;}
.w-18r {width:1.8rem;}
.w-20r {width:2.0rem;}
.w-22r {width:2.2rem;}
.w-24r {width:2.4rem;}
.w-25r {width:2.5rem;}
.w-26r {width:2.6rem;}
.w-28r {width:2.8rem;}
.w-30r {width:3.0rem;}

/* Height Percent */
.h-10p {height:10%;}
.h-20p {height:20%;}
.h-30p {height:30%;}
.h-40p {height:40%;}
.h-50p {height:50%;}
.h-60p {height:60%;}
.h-70p {height:70%;}
.h-80p {height:80%;}
.h-90p {height:90%;}
.h-100p {height:100%;}

/* Height Pixcel */
.h-10 {height:10px;}
.h-20 {height:20px;}
.h-30 {height:30px;}
.h-40 {height:40px;}
.h-50 {height:50px;}
.h-60 {height:60px;}
.h-70 {height:70px;}
.h-80 {height:80px;}
.h-90 {height:90px;}
.h-100 {height:100px;}
.h-120 {height:120px;}
.h-140 {height:140px;}
.h-150 {height:150px;}
.h-160 {height:160px;}
.h-180 {height:180px;}
.h-200 {height:200px;}
.h-220 {height:220px;}
.h-240 {height:240px;}
.h-250 {height:250px;}
.h-260 {height:260px;}
.h-280 {height:280px;}
.h-300 {height:300px;}

/* Height REM */
.h-01r {height:0.1rem;}
.h-02r {height:0.2rem;}
.h-03r {height:0.3rem;}
.h-04r {height:0.4rem;}
.h-05r {height:0.5rem;}
.h-06r {height:0.6rem;}
.h-07r {height:0.7rem;}
.h-08r {height:0.8rem;}
.h-09r {height:0.9rem;}
.h-10r {height:1.0rem;}
.h-12r {height:1.2rem;}
.h-14r {height:1.4rem;}
.h-15r {height:1.5rem;}
.h-16r {height:1.6rem;}
.h-18r {height:1.8rem;}
.h-20r {height:2.0rem;}
.h-22r {height:2.2rem;}
.h-24r {height:2.4rem;}
.h-25r {height:2.5rem;}
.h-26r {height:2.6rem;}
.h-28r {height:2.8rem;}
.h-30r {height:3.0rem;}

/* Margin */
.mar0    {margin:0px !important;}
.mar-t0  {margin-top:0 !important;}
.mar-t3  {margin-top:3px !important;}
.mar-t5  {margin-top:5px !important;}
.mar-t10 {margin-top:10px !important;}
.mar-t12 {margin-top:12px !important;}
.mar-t15 {margin-top:15px !important;}
.mar-t18 {margin-top:18px !important;}
.mar-t20 {margin-top:20px !important;}
.mar-t25 {margin-top:25px !important;}
.mar-t30 {margin-top:30px !important;}
.mar-t40 {margin-top:40px !important;}
.mar-t45 {margin-top:45px !important;}
.mar-t50 {margin-top:50px !important;}
.mar-t60 {margin-top:60px !important;}
.mar-t70 {margin-top:70px !important;}
.mar-t80 {margin-top:80px !important;}
.mar-t90 {margin-top:90px !important;}
.mar-t100 {margin-top:100px !important;}
.mar-t150 {margin-top:150px !important;}

.mar-r0  {margin-right:0px !important;}
.mar-r2  {margin-right:2px !important;}
.mar-r3  {margin-right:3px !important;}
.mar-r5  {margin-right:5px !important;}
.mar-r10 {margin-right:10px !important;}
.mar-r15 {margin-right:15px !important;}
.mar-r20 {margin-right:20px !important;}
.mar-r30 {margin-right:30px !important;}
.mar-r40 {margin-right:40px !important;}
.mar-r50 {margin-right:50px !important;}
.mar-r60 {margin-right:60px !important;}
.mar-r65 {margin-right:65px !important;}
.mar-r70 {margin-right:70px !important;}
.mar-r80 {margin-right:80px !important;}
.mar-r90 {margin-right:90px !important;}
.mar-r100 {margin-right:100px !important;}

.mar-b0  {margin-bottom:0px !important;}
.mar-b3  {margin-bottom:3px !important;}
.mar-b5  {margin-bottom:5px !important;}
.mar-b10 {margin-bottom:10px !important;}
.mar-b15 {margin-bottom:15px !important;}
.mar-b20 {margin-bottom:20px !important;}
.mar-b22 {margin-bottom:22px !important;}
.mar-b30 {margin-bottom:30px !important;}
.mar-b40 {margin-bottom:40px !important;}
.mar-b50 {margin-bottom:50px !important;}
.mar-b60 {margin-bottom:60px !important;}
.mar-b70 {margin-bottom:70px !important;}
.mar-b80 {margin-bottom:80px !important;}
.mar-b90 {margin-bottom:90px !important;}
.mar-b100 {margin-bottom:100px !important;}
.mar-b125 {margin-bottom:125px !important;}

.mar-l3  {margin-left:3px !important;}
.mar-l5  {margin-left:5px !important;}
.mar-l6  {margin-left:6px !important;}
.mar-l10 {margin-left:10px !important;}
.mar-l12 {margin-left:12px !important;}
.mar-l15 {margin-left:15px !important;}
.mar-l20 {margin-left:20px !important;}
.mar-l25 {margin-left:20px !important;}
.mar-l30 {margin-left:30px !important;}
.mar-l40 {margin-left:40px !important;}
.mar-l45 {margin-left:45px !important;}
.mar-l50 {margin-left:50px !important;}
.mar-l60 {margin-left:60px !important;}
.mar-l70 {margin-left:70px !important;}
.mar-l80 {margin-left:80px !important;}
.mar-l90 {margin-left:90px !important;}
.mar-l100 {margin-left:100px !important;}
.mar-auto {margin:auto !important;}

/* Padding */
.pad-0  {padding:0px !important;}
.pad-5  {padding:5px !important;}
.pad-10 {padding:10px !important;}
.pad-20 {padding:20px !important;}
.pad-30 {padding:30px !important;}
.pad-40 {padding:40px !important;}
.pad-50 {padding:50px !important;}
.pad-60 {padding:60px !important;}
.pad-70 {padding:70px !important;}
.pad-80 {padding:80px !important;}
.pad-90 {padding:90px !important;}
.pad-100 {padding:100px !important;}

.pad-t0  {padding-top:0 !important;}
.pad-t3  {padding-top:3px !important;}
.pad-t5  {padding-top:5px !important;}
.pad-t10 {padding-top:10px !important;}
.pad-t15 {padding-top:15px !important;}
.pad-t20 {padding-top:20px !important;}
.pad-t30 {padding-top:30px !important;}
.pad-t40 {padding-top:40px !important;}
.pad-t50 {padding-top:50px !important;}
.pad-t60 {padding-top:60px !important;}
.pad-t64 {padding-top:64px !important;}
.pad-t70 {padding-top:70px !important;}
.pad-t80 {padding-top:80px !important;}
.pad-t90 {padding-top:90px !important;}
.pad-t100 {padding-top:100px !important;}
.pad-t122 {padding-top:122px !important;}

.pad-r3  {padding-right:3px !important;}
.pad-r5  {padding-right:5px !important;}
.pad-r10 {padding-right:10px !important;}
.pad-r15 {padding-right:15px !important;}
.pad-r20 {padding-right:20px !important;}
.pad-r30 {padding-right:30px !important;}
.pad-r40 {padding-right:40px !important;}
.pad-r50 {padding-right:50px !important;}
.pad-r60 {padding-right:60px !important;}
.pad-r70 {padding-right:70px !important;}
.pad-r80 {padding-right:80px !important;}
.pad-r90 {padding-right:90px !important;}
.pad-r100 {padding-right:100px !important;}

.pad-b0  {padding-bottom: 0px !important;}
.pad-b2  {padding-bottom: 2px !important;}
.pad-b5  {padding-bottom: 5px !important;}
.pad-b10 {padding-bottom:10px !important;}
.pad-b20 {padding-bottom:20px !important;}
.pad-b28 {padding-bottom:28px !important;}
.pad-b30 {padding-bottom:30px !important;}
.pad-b40 {padding-bottom:40px !important;}
.pad-b50 {padding-bottom:50px !important;}
.pad-b60 {padding-bottom:60px !important;}
.pad-b70 {padding-bottom:70px !important;}
.pad-b75 {padding-bottom:75px !important;}
.pad-b80 {padding-bottom:80px !important;}
.pad-b90 {padding-bottom:90px !important;}
.pad-b100 {padding-bottom:100px !important;}

.pad-l0  {padding-left:0px !important;}
.pad-l3  {padding-left:3px !important;}
.pad-l5  {padding-left:5px !important;}
.pad-l10 {padding-left:10px !important;}
.pad-l15 {padding-left:15px !important;}
.pad-l20 {padding-left:20px !important;}
.pad-l25 {padding-left:25px !important;}
.pad-l30 {padding-left:30px !important;}
.pad-l40 {padding-left:40px !important;}
.pad-l50 {padding-left:50px !important;}
.pad-l60 {padding-left:60px !important;}
.pad-l70 {padding-left:70px !important;}
.pad-l80 {padding-left:80px !important;}
.pad-l90 {padding-left:90px !important;}
.pad-l100 {padding-left:100px !important;}

/* Border Style */
.bor-tnone {border-top:0px !important;}
.bor-rnone {border-right:0px !important;}
.bor-bnone {border-bottom:0px !important;}
.bor-lnone {border-left:0px !important;}
.bor-none  {border:none !important;}

.bor-solid {border:1px solid #d7d7d7 !important;}
.bor-solid-t {border-top:1px solid #d7d7d7 !important;}
.bor-solid-r {border-right:1px solid #d7d7d7 !important;}
.bor-solid-b {border-bottom:1px solid #d7d7d7 !important;}
.bor-solid-l {border-left:1px solid #d7d7d7 !important;}

.bor-dotted {border:1px dotted #ddd;}

/* Align */
.va-t {vertical-align:top !important;}
.va-m {vertical-align:middle !important;}
.va-b {vertical-align:bottom !important;}
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}
.ta-r {text-align:right !important;}
.ta-j {text-align:justify; -moz-text-align-last:justify; -webkit-text-align-last:justify; text-align-last:justify;}


/*-------- Font Style --------*/

/* IME Mode */
.ime-en {ime-mode:inactive;}
.ime-ko {ime-mode:active;}

/* Font Size */
.fs11 {font-size:11px !important;}
.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs16 {font-size:16px !important;}
.fs20 {font-size:20px !important;}
.fs24 {font-size:24px !important;}
.fs25 {font-size:25px !important;}
.fs30 {font-size:30px !important;}

/* Line Height */
.lh11 {line-height:11px !important;}
.lh12 {line-height:12px !important;}
.lh13 {line-height:13px !important;}
.lh14 {line-height:14px !important;}
.lh16 {line-height:16px !important;}
.lh18 {line-height:18px !important;}
.lh20 {line-height:20px !important;}
.lh24 {line-height:24px !important;}

/* Font Color */
.red {color:#e31937 !important;}
.black {color:#111 !important;}

/* 팝업 */
.popup {position:fixed;z-index:300;display:none;left:0;/*margin-left:-150px;margin-top:-300px;*/top:0;width:100%;height:100%;text-align:center;font-size:0;overflow-y:auto;}
.popup:after {content:'';display:inline-block;width:0;height:100%;vertical-align:middle;}
.popup .inner {display:inline-block;vertical-align:middle;/*max-width:100%;*/position:relative;z-index:10;/*margin:0 10px;*/width:auto;}
.popup .inner.active {display:inline-block;}
.popup .close {float:right;display:block;position:relative;font-size:15px;margin:15px 0;z-index:20;border:none;border:none;background:none;color:#fff;}
.popup .area {background:#fff;font-size:14px;line-height:1.5em;width:100%!important; max-width:100%!important;overflow-y:auto;}
.popup .area * {max-width:100%;height:auto !important;}
.popup .btn {display:block;height:60px;line-height:60px;color:#fff;font-size:21px;font-weight:bold;background:#000;}
.popup .today {text-align:center;background:none;border:none;height:auto;color:#fff;font-size:15px;margin-top:15px; margin-left:40px; position:absolute;left:0;}
.popup .today > * {display:inline-block;vertical-align:middle;}
.popupbg {position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:0;}