@charset "utf-8";

/********************************************************
	■ Font - Noto Sans Korean (가독성/완성도 면에서 훌륭함)
********************************************************/

@import url('//fonts.googleapis.com/css?family=Open+Sans');

/* ----- 나눔바른고딕 (3종 :: Light / Regular / Bold) ----- */
@font-face {
	font-family:'NBGL';
	
	src:url('../font/NanumBarunGothicLight.eot');
	src:local(☺),
	url('../font/NanumBarunGothicLight.woff') format('woff'),
	url('../font/NanumBarunGothicLight.ttf') format('truetype');
}
@font-face {
	font-family:'NBG';
	
	src:url('../font/NanumBarunGothic.eot');
	src:local(☺),
	url('../font/NanumBarunGothic.woff') format('woff'),
	url('../font/NanumBarunGothic.ttf') format('truetype');
}
@font-face {
	font-family:'NBGB';
	
	src:url('../font/NanumBarunGothicBold.eot');
	src:local(☺),
	url('../font/NanumBarunGothicBold.woff') format('woff'),
	url('../font/NanumBarunGothicBold.ttf') format('truetype');
}

/* ----- 나눔스퀘어 (3종 :: Light / Regular / Bold) ----- */
@font-face {
	font-family: 'NSL';
	src:url(../font/NanumSquareL.eot);
	src:local(☺),
	url(../font/NanumSquareL.woff) format('woff'),
	url(../font/NanumSquareL.ttf) format('truetype');
}
@font-face {
	font-family: 'NSR';
	src:url(../font/NanumSquareR.eot);
	src:local(☺),
	url(../font/NanumSquareR.woff) format('woff'),
	url(../font/NanumSquareR.ttf) format('truetype');
}
@font-face {
	font-family: 'NSB';
	src:url(../font/NanumSquareB.eot);
	src:local(☺),
	url(../font/NanumSquareB.woff) format('woff'),
	url(../font/NanumSquareB.ttf) format('truetype');
}
.font-nsl, .font-nsrl { font-family:'NSL'; }
.font-nsr { font-family:'NSR'; }
.font-nsb, .font-nsrb { font-family:'NSB'; }


@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 100;
	src: local('Noto Sans Thin'), local('NotoSans-Thin'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Thin-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Thin-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Thin-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 300;
	src: local('Noto Sans Light'), local('NotoSans-Light'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Light-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Light-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Light-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 350;
	src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 400;
	src: local('Noto Sans Regular'), local('NotoSans-Regular'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Regular-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Regular-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 500;
	src: local('Noto Sans Medium'), local('NotoSans-Medium'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Medium-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Medium-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 700;
	src: local('Noto Sans Bold'), local('NotoSans-Bold'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Bold-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Bold-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Korean';
	font-style: normal;
	font-weight: 900;
	src: local('Noto Sans Black'), local('NotoSans-Black'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Black-Hestia.eot),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Black-Hestia.woff) format('woff'),
	url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Black-Hestia.otf) format('opentype');
}

/* ----- 나눔바른고딕 기준 ----- */
.fw-light {		font-weight:300; }
.fw-medium {	font-weight:400; }
.fw-bold {		font-weight:700; }

/********************************************************
	■ Color List :: 색상 목록
********************************************************/

.red, i.red {					color: rgb(233, 27, 35); }
.darkred, i.darkred {			color: rgb(170, 60, 60); }
.crimson, i.crimson {			color: rgb(220, 20, 60); }
.darkpink, i.darkpink {			color: #c55; }		/* New */
.pink, i.pink {					color: #f66; }		/* New */
.orangered, i.orangered {		color: orangered; }
.orange, i.orange {				color: rgb(240, 150, 20); }
.green, i.green {				color: rgb(140, 195, 70); }
.lightgreen, i.lightgreen {		color: rgb(160, 200, 80); }
.darkgreen, i.darkgreen {		color: rgb(100, 150, 60); }		/* New */
.deepblue, i.deepblue {			color: rgb(0, 125, 180); }
.skyblue, i.skyblue {			color: rgb(100, 195, 245); }
.blue, i.blue {					color: rgb(52, 152, 219); }
.greenblue, i.greenblue {		color: rgb(0, 160, 160); }		/* New */
.darkblue, i.darkblue {			color: #169; }
.navy, i.navy {					color: rgb(50, 60, 70); }
.violet, i.violet {				color: rgb(85, 60, 125); }
.yellow, i.yellow {				color: rgb(241, 196, 15); }
.darkyellow, i.darkyellow {			color:rgb(190, 160, 0); }	/* New */
.gold, i.gold {					color: rgb(200, 160, 70); }		/* New */
.whiteyellow, i.whiteyellow {	color: rgb(245, 245, 180); }
.darkgray, i.darkgray {			color: #666; }
.gray, i.gray {					color: #888; }
.slightgray {					color: #aaa; }					/* New */
.lightgray, i.lightgray {		color: #ddd; }
.white, i.white {				color: #fff; }
.light, i.light {				color: #f5f5f5; }
.lightblack, i.lightblack {		color: #333; }
.darkblack, i.darkblack {		color: #222; }
.black, i.black {				color: black; }

.red-i {					color: rgb(233, 27, 35) !important; }
.darkred-i {				color: rgb(170, 60, 60) !important; }
.crimson-i {				color: rgb(220, 20, 60) !important; }
.orangered-i {				color: orangered !important; }
.orange-i {					color: rgb(240, 150, 20) !important; }
.green-i {					color: rgb(140, 195, 70) !important; }
.lightgreen-i {				color: rgb(160, 200, 80) !important; }
.darkgreen {				color: rgb(100, 150, 60) !important; }
.deepblue-i {				color: rgb(0, 125, 180) !important; }
.skyblue-i {				color: rgb(100, 195, 245) !important; }
.blue-i {					color: rgb(52, 152, 219) !important; }
.greenblue-i {				color: rgb(0, 160, 160) !important; }
.navy-i {					color: rgb(50, 60, 70) !important; }
.violet-i {					color: rgb(85, 60, 125) !important; }
.yellow-i {					color: rgb(241, 196, 15) !important; }
.whiteyellow-i {			color: rgb(245, 245, 180) !important; }
.darkgray-i {				color: #666 !important; }
.gray-i {					color: #888 !important; }
.lightgray-i {				color: #ddd !important; }
.white-i {					color: #fff !important; }
.light-i {					color: #f5f5f5 !important; }
.slightgray-i {				color: #aaa !important; }
.lightblack-i {				color: #333 !important; }
.darkblack-i {				color: #222 !important; }
.black-i {					color: black !important; }

.bg-red {					background-color: rgb(233, 27, 35); color:white; }
.bg-darkred {				background-color: rgb(170, 60, 60); color:white; }
.bg-crimson {				background-color: rgb(220, 20, 60); color:white; }
.bg-darkpink {				background-color: #c55; color:white; }
.bg-pink {					background-color: #f66; color:white; }
.bg-orangered {				background-color: orangered; color:white; }
.bg-orange {				background-color: rgb(240, 150, 20); color:white; }
.bg-green {					background-color: rgb(140, 195, 70); color:white; }
.bg-lightgreen {			background-color: rgb(160, 200, 80); color:white; }
.bg-darkgreen {				background-color: rgb(100, 150, 60); color:white; }
.bg-deepblue {				background-color: rgb(0, 125, 180); color:white; }
.bg-skyblue {				background-color: rgb(100, 195, 245); color:white; }
.bg-blue {					background-color: rgb(52, 152, 219); color:white; }
.bg-greenblue {				background-color: rgb(0, 160, 160); color:white; }
.bg-navy {					background-color: rgb(50, 60, 70); color:white; }
.bg-violet {				background-color: rgb(85, 60, 125); color:white; }
.bg-yellow {				background-color: rgb(241, 196, 15); color:white; }
.bg-darkgray {				background-color: #666; color:white; }
.bg-gray {					background-color: #888; color:white; }
.bg-lightgray {				background-color: #ddd; color:#333; }
.bg-white {					background-color: #fff; color:#333; }
.bg-light {					background-color: #f5f5f5; color:#333; }
.bg-lightblack {			background-color: #333; color:white; }
.bg-darkblack {				background-color: #222; color:white; }
.bg-black {					background-color: black; color:white; }

.border-red {				border-color: rgb(233, 27, 35); }
.border-darkred {			border-color: rgb(170, 60, 60); }
.border-crimson {			border-color: rgb(220, 20, 60); }
.border-orangered {			border-color: orangered; }
.border-orange {			border-color: rgb(240, 150, 20); }
.border-green {				border-color: rgb(140, 195, 70); }
.border-lightgreen {		border-color: rgb(160, 200, 80); }
.border-darkgreen {			border-color: rgb(100, 150, 60); }
.border-deepblue {			border-color: rgb(0, 125, 180); }
.border-skyblue {			border-color: rgb(100, 195, 245); }
.border-blue {				border-color: rgb(52, 152, 219); }
.border-greenblue {			border-color: rgb(0, 160, 160); }
.border-navy {				border-color: rgb(50, 60, 70); }
.border-violet {			border-color: rgb(85, 60, 125); }
.border-yellow {			border-color: rgb(241, 196, 15); }
.border-darkgray {			border-color: #666; }
.border-gray {				border-color: #888; }
.border-lightgray {			border-color: #ddd; }
.border-white {				border-color: #fff; }
.border-light {				border-color: #f5f5f5; }
.border-lightblack {		border-color: #333; }
.border-darkblack {			border-color: #222; }
.border-black {				border-color: black; }

/********************************************************
	■ Font Size :: 글꼴 크기 정의
********************************************************/

.font-8 { font-size: 8px; }
.font-9 { font-size: 9px; }
.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-19 { font-size: 19px; }
.font-20 { font-size: 20px; }
.font-21 { font-size: 21px; }
.font-22 { font-size: 22px; }
.font-23 { font-size: 23px; }
.font-24 { font-size: 24px; }
.font-25 { font-size: 25px; }
.font-26 { font-size: 26px; }
.font-27 { font-size: 27px; }
.font-28 { font-size: 28px; }
.font-29 { font-size: 29px; }
.font-30 { font-size: 30px; }
.font-31 { font-size: 31px; }
.font-32 { font-size: 32px; }
.font-33 { font-size: 33px; }
.font-34 { font-size: 34px; }
.font-35 { font-size: 35px; }
.font-36 { font-size: 36px; }
.font-37 { font-size: 37px; }
.font-38 { font-size: 38px; }
.font-39 { font-size: 39px; }
.font-40 { font-size: 40px; }
.font-41 { font-size: 41px; }
.font-42 { font-size: 42px; }
.font-43 { font-size: 43px; }
.font-44 { font-size: 44px; }
.font-45 { font-size: 45px; }
.font-46 { font-size: 46px; }
.font-47 { font-size: 47px; }
.font-48 { font-size: 48px; }
.font-49 { font-size: 49px; }
.font-50 { font-size: 50px; }
.font-55 { font-size: 55px; }
.font-60 { font-size: 60px; }

/********************************************************
	■ Font Weight :: 글꼴 두께 정의
********************************************************/

.fw-100 { font-weight: 100; }	/* Noto Sans Korea 기준 - Thin */
.fw-300 { font-weight: 300; }	/* Noto Sans Korea 기준 - Light */
.fw-400 { font-weight: 400; }	/* Noto Sans Korea 기준 - Regular */
.fw-500 { font-weight: 600; }	/* Noto Sans Korea 기준 - Medium */
.fw-700 { font-weight: 700; }	/* Noto Sans Korea 기준 - Bold */

/********************************************************
	■ Text Etc :: 텍스트 관련 기타 정의
********************************************************/

.italic { font-style:italic; }
.underline { text-decoration:underline; }

.ta-left { text-align:left; }
.ta-center { text-align:center; }
.ta-right { text-align:right; }

/********************************************************
	■ Box 모델
********************************************************/

.c { margin:0 auto; padding:0 15px; }		/* Base Container :: 재정의시에 좌우 padding 값을 넣는 모델로 사용할 수 있다. */
.c-full { margin:0 auto; padding:0; }	/* Base Container (Full) :: 재정의시에 좌우 padding 값을 넣지 않는 모델로 사용할 수 있다. */

@media (max-width:991px) {
	.c { padding:0 10px; }
}

/********************************************************
	■ Table 형태로 div 구조를 만들경우
********************************************************/

.table { display:table; table-layout:fixed; width:100%; overflow:hidden; margin:0; }
.cell { display:table-cell; overflow:hidden; }
.cell.h-left { text-align:left; }
.cell.h-center { text-align:center; }
.cell.h-right { text-align:right; }
.cell.v-top { vertical-align:top; }
.cell.v-center { vertical-align:middle; }
.cell.v-bottom { vertical-align:bottom; }

/********************************************************
	■ 백그라운드
********************************************************/

.bg-cover { background-size:cover; background-repeat:no-repeat; background-position:center; }
.bg-contain { background-size:contain; background-repeat:no-repeat; background-position:center; }

/********************************************************
	■ 구조 높이
********************************************************/

.h05 { height:5px; }
.h07 { height:7px; }
.h08 { height:8px; }
.h10 { height:10px; }
.h12 { height:12px; }
.h15 { height:15px; }
.h20 { height:20px; }
.h25 { height:25px; }
.h30 { height:30px; }
.h35 { height:35px; }
.h40 { height:40px; }
.h45 { height:45px; }
.h50 { height:50px; }
.h100 { height:100px; }
.h200 { height:200px; }

/********************************************************
	■ 구조 여백 (Margin / Padding)
********************************************************/

.ml5 { margin-left:5px; }
.ml8 { margin-left:8px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml25 { margin-left:25px; }
.ml30 { margin-left:30px; }
.ml40 { margin-left:40px; }
.ml50 { margin-left:50px; }

.mr5 { margin-right:5px; }
.mr8 { margin-right:8px; }
.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }
.mr25 { margin-right:25px; }
.mr30 { margin-right:30px; }
.mr40 { margin-right:40px; }
.mr50 { margin-right:50px; }

.mt5 { margin-top:5px; }
.mt8 { margin-top:8px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt25 { margin-top:25px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }
.mt50 { margin-top:50px; }
.mt75 { margin-top:75px; }
.mt100 { margin-top:100px; }

.mb5 { margin-bottom:5px; }
.mb8 { margin-bottom:8px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb25 { margin-bottom:25px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb75 { margin-bottom:75px; }
.mb100 { margin-bottom:100px; }

.mlr3 { margin-left:3px; margin-right:3px; }
.mlr5 { margin-left:5px; margin-right:5px; }
.mlr8 { margin-left:8px; margin-right:8px; }
.mlr10 { margin-left:10px; margin-right:10px; }
.mlr15 { margin-left:15px; margin-right:15px; }
.mlr20 { margin-left:20px; margin-right:20px; }
.mlr25 { margin-left:25px; margin-right:25px; }
.mlr30 { margin-left:30px; margin-right:30px; }
.mlr40 { margin-left:40px; margin-right:40px; }
.mlr50 { margin-left:50px; margin-right:50px; }

.mtb3 { margin-top:3px; margin-bottom:3px; }
.mtb5 { margin-top:5px; margin-bottom:5px; }
.mtb8 { margin-top:8px; margin-bottom:8px; }
.mtb10 { margin-top:10px; margin-bottom:10px; }
.mtb15 { margin-top:15px; margin-bottom:15px; }
.mtb20 { margin-top:20px; margin-bottom:20px; }
.mtb25 { margin-top:25px; margin-bottom:25px; }
.mtb30 { margin-top:30px; margin-bottom:30px; }
.mtb40 { margin-top:40px; margin-bottom:40px; }
.mtb50 { margin-top:50px; margin-bottom:50px; }

.pl5 { padding-left:5px; }
.pl8 { padding-left:8px; }
.pl10 { padding-left:10px; }
.pl15 { padding-left:15px; }
.pl20 { padding-left:20px; }
.pl25 { padding-left:25px; }
.pl30 { padding-left:30px; }
.pl40 { padding-left:40px; }
.pl50 { padding-left:50px; }

.pr5 { padding-right:5px; }
.pr8 { padding-right:8px; }
.pr10 { padding-right:10px; }
.pr15 { padding-right:15px; }
.pr20 { padding-right:20px; }
.pr25 { padding-right:25px; }
.pr30 { padding-right:30px; }
.pr40 { padding-right:40px; }
.pr50 { padding-right:50px; }

.pt5 { padding-top:5px; }
.pt8 { padding-top:8px; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt25 { padding-top:25px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt50 { padding-top:50px; }
.pt75 { padding-top:75px; }
.pt100 { padding-top:100px; }

.pb5 { padding-bottom:5px; }
.pb8 { padding-bottom:8px; }
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb25 { padding-bottom:25px; }
.pb30 { padding-bottom:30px; }
.pb40 { padding-bottom:40px; }
.pb50 { padding-bottom:50px; }
.pb75 { padding-bottom:75px; }
.pb100 { padding-bottom:100px; }

.plr3 { padding-left:3px; padding-right:3px; }
.plr5 { padding-left:5px; padding-right:5px; }
.plr8 { padding-left:8px; padding-right:8px; }
.plr10 { padding-left:10px; padding-right:10px; }
.plr15 { padding-left:15px; padding-right:15px; }
.plr20 { padding-left:20px; padding-right:20px; }
.plr25 { padding-left:25px; padding-right:25px; }
.plr30 { padding-left:30px; padding-right:30px; }
.plr40 { padding-left:40px; padding-right:40px; }
.plr50 { padding-left:50px; padding-right:50px; }

.ptb3 { padding-top:3px; padding-bottom:3px; }
.ptb5 { padding-top:5px; padding-bottom:5px; }
.ptb8 { padding-top:8px; padding-bottom:8px; }
.ptb10 { padding-top:10px; padding-bottom:10px; }
.ptb15 { padding-top:15px; padding-bottom:15px; }
.ptb20 { padding-top:20px; padding-bottom:20px; }
.ptb25 { padding-top:25px; padding-bottom:25px; }
.ptb30 { padding-top:30px; padding-bottom:30px; }
.ptb40 { padding-top:40px; padding-bottom:40px; }
.ptb50 { padding-top:50px; padding-bottom:50px; }

/********************************************************
	■ 사용자 정의 버튼 정의
********************************************************/

.bt { display:inline-block; position:relative; }
.bt a { display:block; padding:0 20px; height:40px; line-height:40px; }

.bt.bt-lrline a { border-top:1px solid; border-bottom:1px solid; }
.bt.bt-lrline a::before { display:block; content:""; position:absolute; width:1px; height:0; left:0; bottom:0; transition:height .3s; }
.bt.bt-lrline a::after { display:block; content:""; position:absolute; width:1px; height:0; right:0; top:0; transition:height .3s; }
.bt.bt-lrline a:hover::before, .bt.bt-lrline a:hover::after { height:100%; }

/********************************************************
	■ 구조 테스트용 테두리 생성
********************************************************/

.test1 { border:1px solid red; }
.test2 { border:1px solid blue; }


/********************************************************
	■ 롤오버효과 (Hover Effects)
********************************************************/

/* 일반적으로 타일(tile) 요소에 적용 */
/* 타일(tile) 요소가 아닌 경우에 적용하려면 hover-effect 클래스를 활용한다. */
/* hover-effect 클래스는 효과를 적용할 a 또는 .image 요소에 추가한다. */
a.hover-effect { position:relative; display:block; }
.image.hover-effect { position:relative; overflow:hidden; }
a.hover-effect::after, .image.hover-effect::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; transition:all .3s ease !important; }

/* 실제 효과 */
/* 다음의 롤오버효과 클래스는 효과를 적용할 a / .image / .img 의 상위 요소에 추가해야한다. */

/* ----- a 요소 - 테두리 내부 그림자 :: a-shadow-inset ----- */
.hover-a-shadow-inset a::after { box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.2); opacity:0; }
.hover-a-shadow-inset a:hover::after { opacity:1; }
/* ----- 이미지 - 테두리 내부 그림자 :: img-shadow-inset ----- */
.hover-img-shadow-inset a .image::after { box-shadow:inset 0 0 30px rgba(0, 0, 0, 0.2); opacity:0; }
.hover-img-shadow-inset a:hover .image::after { opacity:1; }

/* ----- a 요소 - 테두리 7px :: a-border7 ----- */
.hover-a-border7 a::after { border:2px solid rgba(100, 100, 100, 0); }
.hover-a-border7 a:hover::after { border-width:7px; border-color:rgba(100, 100, 100, 1.0); }
/* ----- 이미지 - 테두리 7px :: img-border7 ----- */
.hover-img-border7 a .image::after { border:2px solid rgba(100, 100, 100, 0); }
.hover-img-border7 a:hover .image::after { border-width:7px; border-color:rgba(100, 100, 100, 1.0); }

/* ----- 이미지 - 배경마스크 알파 x% :: img-alphaXX ----- */
.hover-img-alpha30 a:hover .image::after { background-color:rgba(0, 0, 0, 0.3); }
.hover-img-alpha40 a:hover .image::after { background-color:rgba(0, 0, 0, 0.4); }
.hover-img-alpha50 a:hover .image::after { background-color:rgba(0, 0, 0, 0.5); }

/* ----- 이미지 - 확대 x % :: img-zoomXXX ----- */
.hover-img-zoom110 a:hover .img { transform:scale(1.1); }
.hover-img-zoom115 a:hover .img { transform:scale(1.15); }
.hover-img-zoom120 a:hover .img { transform:scale(1.2); }
.hover-img-zoom130 a:hover .img { transform:scale(1.3); }


/********************************************************
	■ Animate.css 확장 애니메이션
********************************************************/

@keyframes fadeInUp50 {
	from {
		opacity: 0;
		transform: translate3d(0, 50%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInUp50 {
	animation-name: fadeInUp50;
}

.tran-2 { transition:all .2s ease !important; }
.tran-3 { transition:all .3s ease !important; }
.tran-4 { transition:all .4s ease !important; }
.tran-5 { transition:all .5s ease !important; }

/********************************************************
	■ 반응형 코어
********************************************************/

/* ----- Desktops ----- */
@media (min-width: 992px) {
	.m-ele { display:none; }

	.d-w1 { width:100%; }
	.d-w2 { width:50%; }
	.d-w3 { width:33.33%; }
	.d-w4 { width:25%; }
	.d-w5 { width:20%; }
}

/* ----- Phone, Tablets ----- */
@media (max-width: 991px) {
	.d-ele { display:none; }

	.m-w1 { width:100%; }
	.m-w2 { width:50%; }
	.m-w3 { width:33.33%; }
	.m-w4 { width:25%; }
	.m-w5 { width:20%; }
}

/********************************************************
	■ HTML 기본 초기화
********************************************************/

* { box-sizing:border-box; }
html, body {
	font-size: 15px;		/* colorset 에서 재정의한다. (중요! :: rem 단위사용에 필수) */
	font-family: "Open Sans", "나눔바른고딕", "NBG", sans-serif;
	word-break:keep-all; word-wrap:break-word;
}
ul { list-style:none; margin:0; padding:0; }
a:focus { outline:none; }


/********************************************************
	■ 반응형 스타일 적용 (틀)
********************************************************/

/* ----- Extra Large Devices (Desktops) ----- */
@media (min-width: 1200px) {
}
/* ----- Large Devices (Desktops) ----- */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* ----- Medium Devices (Tablets) ----- */
@media (min-width: 768px) and (max-width: 991px) {
}
/* ----- Small Devices (Landscape phones) ----- */
@media (min-width: 481px) and (max-width: 767px) {
}
/* ----- Extra Small Devices (Portrait phones) ----- */
@media (max-width: 480px) {
}

@media (max-width: 1199px) {  }
@media (max-width: 991px) {  }
@media (max-width: 767px) {  }
@media (max-width: 480px) {  }