@charset "utf-8";

/*
 * --------------------------------------------------------------------------
 * descript : 공통 CSS(삭제 및 수정금지)
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

 /*
 * ==========================================================================
 * Table of Contents 
 * ==========================================================================
 * 1.0  - IE 낮은 IE 9이하 버전에서 브라우저 업그레이드 공지 안내
 * 2.0  - 탭 바로가기
 * 3.0  - 기본 스타일 정의
 * 4.0  - 링크 정의
 * 5.0  - 해상도별 폰트 사이즈 정의
 * 6.0  - 이미지 엘리먼트 정의
 * 7.0  - Input 엘리먼트 다국어 설정
 * 8.0  - 마우스 커서 정의
 * 9.0  - HTML 사전 정의
 * 10.0 - HTML 로딩 설정
 * --------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
   1.0 IE 낮은 IE 9이하 버전에서 브라우저 업그레이드 공지 안내
   -------------------------------------------------------------------------- */
#old-browser-popup{position:fixed; width:100%; height:100%; left:0; top:0; background:url(/assets/img/common/bg.png) repeat; z-index:9999; font-family: '맑은 고딕', 'Malgun Gothic', 'Noto Sans', sans-serif;}
.old-browser-container{width:100%; margin:0 auto; text-align:center;}
.old-browser-container div{color:#fff; font-size:13px; line-height:22px;}
.old-browser-container div b{color:#fc0; font-weight:700;}
.old-browser-container p{background:#fff; border-radius:5px; color:#222; font-weight:700; margin:25px auto 50px auto; height:30px; line-height:30px; width:700px;}
.old-browser-container a{color:#fff; font-weight:700; padding:0 10px; display:inline-block; font-size:12px; text-decoration:none;}
.old-browser-container a:hover{text-decoration:underline; color:#fc0;}

/* --------------------------------------------------------------------------
   2.0 탭 바로가기
   -------------------------------------------------------------------------- */
#skipnavigation a {position:absolute; left:-3000%;}
#skipnavigation a:focus { display:block; left:0; top:0; z-index:10000000000; width:100%; height:50px; line-height:50px; color:#fff; text-align:center; font-size:12px; font-weight:700; background:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);}

/* --------------------------------------------------------------------------
   3.0 기본 스타일 정의
   -------------------------------------------------------------------------- */
.trn{-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

.tar{text-align:right;}			/* 수평 오른쪽 정렬 */
.tal{text-align:left;}			/* 수평 왼쪽 정렬 */
.tac{text-align:center;} 		/* 수평 중앙 정렬 */
.taj{text-align:justify;}		/* 수평 양쪽 정렬 */

.vat{vertical-align:top:}		/* 수직 상단 정렬 */
.vam{vertical-align:middle:}	/* 수직 중앙 정렬 */
.vab{vertical-align:bottom:}	/* 수직 하단 정렬 */

.fr{float:right;}				/* 플롯팅 오른쪽 정렬 */
.fl{float:left;}				/* 플롯팅 왼쪽 정렬 */
.fn{float:none;}				/* 플롯팅 없음 */
.cb {clear:both;}				/* 플롯팅 정렬 취소 */

.ps{position:static;}
.pr{position:relative;}
.pa{position:absolute;}
.px{position:fixed;}

.db{display:block; position:relative;}
.di{display:inline-block;}
.dn{display:none;}

.ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}		/* 글자 생략 */
.wb{word-break:break-all;}													/* 무조건 줄바꿈  */
.wn{white-space:nowrap}														/* 줄바꿈 안함 */
.wp{white-space:pre;}														/* 마크업 수동 줄바꿈 */
.wpl{white-space:pre-line;}													/* 마크업 자동 줄바꿈 */

.hidden {visibility:hidden;}																				/* 숨김 */
.blind {position:absolute; font-size:0px; line-height:0; top:-9999%; left:-9999%; text-indent:-9999%;}		/* 가림 */

/* 공백 */
.blank10 {height:10px; clear:both; overflow:hidden; display:block;}
.blank15 {height:15px; clear:both; overflow:hidden; display:block;}
.blank20 {height:20px; clear:both; overflow:hidden; display:block;}
.blank25 {height:25px; clear:both; overflow:hidden; display:block;}
.blank30 {height:30px; clear:both; overflow:hidden; display:block;}
.blank35 {height:35px; clear:both; overflow:hidden; display:block;}
.blank40 {height:40px; clear:both; overflow:hidden; display:block;}
.blank45 {height:45px; clear:both; overflow:hidden; display:block;}
.blank50 {height:50px; clear:both; overflow:hidden; display:block;}
.blank55 {height:55px; clear:both; overflow:hidden; display:block;}
.blank60 {height:60px; clear:both; overflow:hidden; display:block;}
.blank65 {height:65px; clear:both; overflow:hidden; display:block;}
.blank70 {height:70px; clear:both; overflow:hidden; display:block;}
.blank75 {height:75px; clear:both; overflow:hidden; display:block;}
.blank80 {height:80px; clear:both; overflow:hidden; display:block;}
.blank85 {height:85px; clear:both; overflow:hidden; display:block;}
.blank90 {height:90px; clear:both; overflow:hidden; display:block;}
.blank95 {height:95px; clear:both; overflow:hidden; display:block;}
.blank100 {height:100px; clear:both; overflow:hidden; display:block;}

/* 들여쓰기 */
.ti5{text-indent:5px;}
.ti10{text-indent:10px;}
.ti15{text-indent:15px;}
.ti20{text-indent:20px;}
.ti25{text-indent:25px;}
.ti30{text-indent:30px;}
.ti35{text-indent:35px;}
.ti40{text-indent:40px;}
.ti45{text-indent:45px;}
.ti50{text-indent:50px;}

/* 글자 색상 */
.c0  {color:#000 !important;}
.c1  {color:#111 !important;}
.c2  {color:#222 !important;}
.c3  {color:#333 !important;}
.c4  {color:#444 !important;}
.c5  {color:#555 !important;}
.c6  {color:#666 !important;}
.c7  {color:#777 !important;}
.c8  {color:#888 !important;}
.c9  {color:#999 !important;}
.ca  {color:#aaa !important;}
.cb  {color:#bbb !important;}
.cc  {color:#ccc !important;}
.cd  {color:#ddd !important;}
.ce  {color:#eee !important;}
.cf  {color:#fff !important;}

/* 글자 두깨 */
.fw300{font-weight:300;}
.fw400{font-weight:400;}
.fw500{font-weight:500;}
.fw600{font-weight:600;}
.fw700{font-weight:700;}
.fw800{font-weight:800;}
.fw900{font-weight:900;}

/* 글자 크기 */
.fs10{font-size:1.0em;}
.fs11{font-size:1.1em;}
.fs12{font-size:1.2em;}
.fs13{font-size:1.3em;}
.fs14{font-size:1.4em;}
.fs15{font-size:1.5em;}
.fs16{font-size:1.6em;}
.fs17{font-size:1.7em;}
.fs18{font-size:1.8em;}
.fs19{font-size:1.9em;}
.fs20{font-size:2.0em;}
.fs21{font-size:2.1em;}
.fs22{font-size:2.2em;}
.fs23{font-size:2.3em;}
.fs24{font-size:2.4em;}
.fs25{font-size:2.5em;}
.fs26{font-size:2.6em;}
.fs27{font-size:2.7em;}
.fs28{font-size:2.8em;}
.fs29{font-size:2.9em;}
.fs30{font-size:3em;}

/* 수직 글자 간격 */
.lh10{line-height:1em;}
.lh11{line-height:1.1em;}
.lh12{line-height:1.2em;}
.lh13{line-height:1.3em;}
.lh14{line-height:1.4em;}
.lh15{line-height:1.5em;}
.lh16{line-height:1.6em;}
.lh17{line-height:1.7em;}
.lh18{line-height:1.8em;}
.lh19{line-height:1.9em;}
.lh20{line-height:2.0em;}
.lh21{line-height:2.1em;}
.lh22{line-height:2.2em;}
.lh23{line-height:2.3em;}
.lh24{line-height:2.4em;}
.lh25{line-height:2.5em;}
.lh26{line-height:2.6em;}
.lh27{line-height:2.7em;}
.lh28{line-height:2.8em;}
.lh29{line-height:2.9em;}
.lh30{line-height:3em;}

/* 수평 글자 간격 */
.ls0{letter-spacing:0;}
.ls01{letter-spacing:0.1em;}
.ls02{letter-spacing:0.2em;}
.ls03{letter-spacing:0.3em;}
.ls04{letter-spacing:0.4em;}
.ls05{letter-spacing:0.5em;}
.ls06{letter-spacing:0.6em;}
.ls07{letter-spacing:0.7em;}
.ls08{letter-spacing:0.8em;}
.ls09{letter-spacing:0.9em;}
.ls10{letter-spacing:1em;}
.ls11{letter-spacing:1.1em;}
.ls12{letter-spacing:1.2em;}
.ls13{letter-spacing:1.3em;}
.ls14{letter-spacing:1.4em;}
.ls15{letter-spacing:1.5em;}
.ls16{letter-spacing:1.6em;}
.ls17{letter-spacing:1.7em;}
.ls18{letter-spacing:1.8em;}
.ls19{letter-spacing:1.9em;}
.ls20{letter-spacing:2em;}

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

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

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

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

.ptb0{padding:0 !important;}
.ptb5{padding:5px 0;}
.ptb10{padding:10px 0;}
.ptb15{padding:15px 0;}
.ptb20{padding:20px 0;}
.ptb25{padding:25px 0;}
.ptb30{padding:30px 0;}
.ptb35{padding:35px 0;}
.ptb40{padding:40px 0;}
.ptb45{padding:45px 0;}
.ptb50{padding:50px 0;}
.ptb55{padding:55px 0;}
.ptb60{padding:60px 0;}
.ptb65{padding:65px 0;}
.ptb70{padding:70px 0;}
.ptb75{padding:75px 0;}
.ptb80{padding:80px 0;}
.ptb85{padding:85px 0;}
.ptb90{padding:90px 0;}
.ptb95{padding:95px 0;}
.ptb100{padding:100px 0;}

.prl0{padding:0 0 !important;}
.prl5{padding:0 5px;}
.prl10{padding:0 10px;}
.prl15{padding:0 15px;}
.prl20{padding:0 20px;}
.prl25{padding:0 25px;}
.prl30{padding:0 30px;}
.prl35{padding:0 35px;}
.prl40{padding:0 40px;}
.prl45{padding:0 45px;}
.prl50{padding:0 50px;}
.prl55{padding:0 55px;}
.prl60{padding:0 60px;}
.prl65{padding:0 65px;}
.prl70{padding:0 70px;}
.prl75{padding:0 75px;}
.prl80{padding:0 80px;}
.prl85{padding:0 85px;}
.prl90{padding:0 90px;}
.prl95{padding:0 95px;}
.prl100{padding:0 100px;}

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

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

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

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

.mtb0{margine:0 !important;}
.mtb5{margine:5px 0;}
.mtb10{margine:10px 0;}
.mtb15{margine:15px 0;}
.mtb20{margine:20px 0;}
.mtb25{margine:25px 0;}
.mtb30{margine:30px 0;}
.mtb35{margine:35px 0;}
.mtb40{margine:40px 0;}
.mtb45{margine:45px 0;}
.mtb50{margine:50px 0;}
.mtb55{margine:55px 0;}
.mtb60{margine:60px 0;}
.mtb65{margine:65px 0;}
.mtb70{margine:70px 0;}
.mtb75{margine:75px 0;}
.mtb80{margine:80px 0;}
.mtb85{margine:85px 0;}
.mtb90{margine:90px 0;}
.mtb95{margine:95px 0;}
.mtb100{margine:100px 0;}

.mrl0{margine:0 0 !important;}
.mrl5{margine:0 5px;}
.mrl10{margine:0 10px;}
.mrl15{margine:0 15px;}
.mrl20{margine:0 20px;}
.mrl25{margine:0 25px;}
.mrl30{margine:0 30px;}
.mrl35{margine:0 35px;}
.mrl40{margine:0 40px;}
.mrl45{margine:0 45px;}
.mrl50{margine:0 50px;}
.mrl55{margine:0 55px;}
.mrl60{margine:0 60px;}
.mrl65{margine:0 65px;}
.mrl70{margine:0 70px;}
.mrl75{margine:0 75px;}
.mrl80{margine:0 80px;}
.mrl85{margine:0 85px;}
.mrl90{margine:0 90px;}
.mrl95{margine:0 95px;}
.mrl100{margine:0 100px;}

.w5p{width:5%;}
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w25p{width:25%;}
.w30p{width:30%;}
.w35p{width:35%;}
.w40p{width:40%;}
.w45p{width:45%;}
.w50p{width:50%;}
.w55p{width:55%;}
.w60p{width:60%;}
.w65p{width:65%;}
.w70p{width:70%;}
.w75p{width:75%;}
.w80p{width:80%;}
.w85p{width:85%;}
.w90p{width:90%;}
.w95p{width:95%;}
.w100p{width:100%;}

.wcalc1{width:-webkit-calc(100% / 1); width:-moz-calc(100% / 1); width:calc(100% / 1);}
.wcalc2{width:-webkit-calc(100% / 2); width:-moz-calc(100% / 2); width:calc(100% / 2);}
.wcalc3{width:-webkit-calc(100% / 3); width:-moz-calc(100% / 3); width:calc(100% / 3);}
.wcalc4{width:-webkit-calc(100% / 4); width:-moz-calc(100% / 4); width:calc(100% / 4);}
.wcalc5{width:-webkit-calc(100% / 5); width:-moz-calc(100% / 5); width:calc(100% / 5);}
.wcalc6{width:-webkit-calc(100% / 6); width:-moz-calc(100% / 6); width:calc(100% / 6);}
.wcalc7{width:-webkit-calc(100% / 7); width:-moz-calc(100% / 7); width:calc(100% / 7);}
.wcalc8{width:-webkit-calc(100% / 8); width:-moz-calc(100% / 8); width:calc(100% / 8);}
.wcalc9{width:-webkit-calc(100% / 9); width:-moz-calc(100% / 9); width:calc(100% / 9);}
.wcalc10{width:-webkit-calc(100% / 10); width:-moz-calc(100% / 10); width:calc(100% / 10);}

/* --------------------------------------------------------------------------
   4.0 링크 정의
   -------------------------------------------------------------------------- */
a:link, a:visited {/* color: #4d4d4d; */ text-decoration: none;}
a:active, a:hover {/* color: #525252; */ text-decoration: underline;}

/* --------------------------------------------------------------------------
   5.0 해상도별 폰트 사이즈 정의
   -------------------------------------------------------------------------- */
@media (max-width:360px)						{html{font-size:12px;}}
@media (min-width:361px) and (max-width:399px)	{html{font-size:12.4px;}}
@media (min-width:400px) and (max-width:439px)	{html{font-size:12.8px;}}
@media (min-width:440px) and (max-width:479px)	{html{font-size:13.2px;}}
@media (min-width:480px) and (max-width:519px)	{html{font-size:13.6px;}}
@media (min-width:520px) and (max-width:559px)	{html{font-size:14px;}}
@media (min-width:560px) and (max-width:599px)	{html{font-size:14.4px;}}
@media (min-width:600px) and (max-width:639px)	{html{font-size:14.8px;}}
@media (min-width:640px)						{html{font-size:15px;}}

/* --------------------------------------------------------------------------
   6.0 이미지 엘리먼트 정의
   -------------------------------------------------------------------------- */
img {max-width:100%; border:0px; vertical-align:middle;}

/* --------------------------------------------------------------------------
   7.0 Input 엘리먼트 다국어 설정
   -------------------------------------------------------------------------- */
input.de {ime-mode:inactive !important;}									/* 기본 영문입력 default-english */
input.dk {ime-mode:active !important;}										/* 기본 한글입력 default-korean */
input.al {ime-mode:auto !important;}										/* 자동 선택입력 auto-language */
input.oe {ime-mode:disable !important;}										/* 고정 영문입력 only-enlish */

/* --------------------------------------------------------------------------
   8.0 마우스 커서 정의
   -------------------------------------------------------------------------- */
.cp{cursor:pointer;}
.cd{cursor:default;}
.cm{cursor:move;}
.ct{cursor:text;}
.cw{cursor:wait;}

/* --------------------------------------------------------------------------
   9.0 HTML 사전 정의
   -------------------------------------------------------------------------- */
input, label, select, button, textarea{box-sizing:border-box;}
caption, legend {position:fixed; top:-5000px; width:0; height:0; text-indent:-5000px; overflow:hidden; visibility:hidden; font-size:0; line-height:0; display:none;}
*::before, *::after{position:absolute; content:''; display:inline-block;}

/* --------------------------------------------------------------------------
   10.0 HTML 로딩 설정
   -------------------------------------------------------------------------- */
#loader-wrapper {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background:rgba(255,255,255,1) url(/assets/img/common/theme/logo.png) no-repeat center center; background-size:150px;}
#loading {position:absolute; left:50%; top:50%; margin:-100px 0 0 -25px; display:inline-block; width:50px; height:50px; border:3px solid rgba(0,0,0,0.3); border-radius: 50%; border-top-color:#b89564; animation: spin 1s ease-in-out infinite;}
@-webkit-keyframes spin {to {transform: rotate(360deg);}}
@-moz-keyframes spin {to {transform: rotate(360deg);}}
@-ms-keyframes spin {to {transform: rotate(360deg);}}
@-o-keyframes spin {to {transform: rotate(360deg);}}
@keyframes spin {to {transform: rotate(360deg);}}