@charset "UTF-8";
/*!
 *	Base Style v1.0  (2018-02-01)
 */
/********************************************************
	■ Font - Open Sans / NanumBarunGothic / NanumSquare
********************************************************/
@import url("//fonts.googleapis.com/css?family=Open+Sans");
/* ----- 나눔고딕 (2종 :: Regular / Bold) ----- */
@font-face { font-family: 'NG'; font-weight: 400; src: url("font/NanumGothicRegular.eot"); src: local(☺), url("font/NanumGothicRegular.woff") format("woff"), url("font/NanumGothicRegular.ttf") format("truetype"); }
@font-face { font-family: 'NG'; font-weight: 700; src: url("font/NanumGothicBold.eot"); src: local(☺), url("font/NanumGothicBold.woff") format("woff"), url("font/NanumGothicBold.ttf") format("truetype"); }
/* ----- 나눔바른고딕 (3종 :: Light / Regular / Bold) ----- */
@font-face { font-family: 'NBG'; font-weight: 300; src: url("font/NanumBarunGothicLight.eot"); src: local(☺), url("font/NanumBarunGothicLight.woff") format("woff"), url("font/NanumBarunGothicLight.ttf") format("truetype"); }
@font-face { font-family: 'NBG'; font-weight: 400; src: url("font/NanumBarunGothic.eot"); src: local(☺), url("font/NanumBarunGothic.woff") format("woff"), url("font/NanumBarunGothic.ttf") format("truetype"); }
@font-face { font-family: 'NBG'; font-weight: 700; 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'; }

/* ----- 고도체 (2종 :: Medium / Bold) ----- */
@font-face { font-family: 'Godo'; font-style: normal; font-weight: 400; src: url("font/GodoM.woff2") format("woff2"), url("font/GodoM.woff") format("woff"); }
@font-face { font-family: 'Godo'; font-style: normal; font-weight: 700; src: url("font/GodoB.woff2") format("woff2"), url("font/GodoB.woff") format("woff"); }
/* ----- 맑은 고딕 (1종 :: Regular) ----- */
@font-face { font-family: 'Malgun Gothic'; src: local("Malgun Gothic"), local("맑은 고딕"); src: url("font/MalgunGothic.eot"); src: url("font/MalgunGothic.eot?#iefix") format("embedded-opentype"), url("font/MalgunGothic.woff2") format("woff2"), url("font/MalgunGothic.woff") format("woff"); font-weight: normal; font-style: normal; }
/* ----- Noto Sans (Korean) (7종 Thin / Light / DemiLight / Regular / Medium / Bold / Black) ----- */
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 100; src: url("font/NotoSansKR/NotoSansKR-Thin.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-Thin.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-Thin.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-Thin.otf") format("opentype"); }
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 300; src: url("font/NotoSansKR/NotoSansKR-Light.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-Light.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-Light.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-Light.otf") format("opentype"); }
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 350; src: url("font/NotoSansKR/NotoSansKR-DemiLight.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-DemiLight.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-DemiLight.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-DemiLight.otf") format("opentype"); }
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 400; src: url("font/NotoSansKR/NotoSansKR-Regular.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-Regular.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-Regular.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-Regular.otf") format("opentype"); }
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 500; src: url("font/NotoSansKR/NotoSansKR-Medium.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-Medium.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-Medium.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-Medium.otf") format("opentype"); }
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 700; src: url("font/NotoSansKR/NotoSansKR-Bold.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-Bold.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-Bold.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-Bold.otf") format("opentype"); }
@font-face { font-family: 'NotoSans'; font-style: normal; font-weight: 900; src: url("font/NotoSansKR/NotoSansKR-Black.eot"); src: local(☺), url("font/NotoSansKR/NotoSansKR-Black.woff2") format("woff2"), url("font/NotoSansKR/NotoSansKR-Black.woff") format("woff"), url("font/NotoSansKR/NotoSansKR-Black.otf") format("opentype"); }
/* ----- Noto Serif (Korean) (7종 ExtraLight / Light / Regular / Medium / SemiBold / Bold / Black) ----- */
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 100; src: url("font/NotoSerifKR/NotoSerifKR-ExtraLight.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-ExtraLight.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-ExtraLight.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-ExtraLight.otf") format("opentype"); }
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 300; src: url("font/NotoSerifKR/NotoSerifKR-Light.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-Light.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-Light.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-Light.otf") format("opentype"); }
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 400; src: url("font/NotoSerifKR/NotoSerifKR-Regular.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-Regular.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-Regular.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-Regular.otf") format("opentype"); }
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 500; src: url("font/NotoSerifKR/NotoSerifKR-Medium.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-Medium.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-Medium.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-Medium.otf") format("opentype"); }
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 600; src: url("font/NotoSerifKR/NotoSerifKR-SemiBold.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-SemiBold.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-SemiBold.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-SemiBold.otf") format("opentype"); }
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 700; src: url("font/NotoSerifKR/NotoSerifKR-Bold.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-Bold.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-Bold.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-Bold.otf") format("opentype"); }
@font-face { font-family: 'NotoSerif'; font-style: normal; font-weight: 900; src: url("font/NotoSerifKR/NotoSerifKR-Black.eot"); src: local(☺), url("font/NotoSerifKR/NotoSerifKR-Black.woff2") format("woff2"), url("font/NotoSerifKR/NotoSerifKR-Black.woff") format("woff"), url("font/NotoSerifKR/NotoSerifKR-Black.otf") format("opentype"); }
/* ----- Bahagia ----- */
@font-face { font-family: 'Bahagia'; font-weight: 400; src: url("font/Bahagia.woff") format("woff"), url("font/Bahagia.ttf") format("truetype"); }
/* ----- Dancing Script (2종 Regular / Bold) ----- */
@font-face { font-family: 'Dancing Script'; font-weight: 400; src: url("font/DancingScript-Regular.ttf") format("truetype"); }
@font-face { font-family: 'Dancing Script'; font-weight: 700; src: url("font/DancingScript-Bold.ttf") format("truetype"); }
@font-face { font-family: 'Dynalight'; font-weight: 400; src: url("font/Dynalight-Regular.ttf") format("truetype"); }
/********************************************************
	■ Color List :: 색상 목록
********************************************************/
.red, .i.red { color: #e91b23; }

.red-i, .i.red-i { color: #e91b23 !important; }

.bg-red { background-color: #e91b23; color: white; }

.border-red { border-color: #e91b23; }

.darkred, .i.darkred { color: #aa3c3c; }

.darkred-i, .i.darkred-i { color: #aa3c3c !important; }

.bg-darkred { background-color: #aa3c3c; color: white; }

.border-darkred { border-color: #aa3c3c; }

.crimson, .i.crimson { color: crimson; }

.crimson-i, .i.crimson-i { color: crimson !important; }

.bg-crimson { background-color: crimson; color: white; }

.border-crimson { border-color: crimson; }

.darkpink, .i.darkpink { color: #c55; }

.darkpink-i, .i.darkpink-i { color: #c55 !important; }

.bg-darkpink { background-color: #c55; color: white; }

.border-darkpink { border-color: #c55; }

.pink, .i.pink { color: #f66; }

.pink-i, .i.pink-i { color: #f66 !important; }

.bg-pink { background-color: #f66; color: white; }

.border-pink { border-color: #f66; }

.orangered, .i.orangered { color: orangered; }

.orangered-i, .i.orangered-i { color: orangered !important; }

.bg-orangered { background-color: orangered; color: white; }

.border-orangered { border-color: orangered; }

.orange, .i.orange { color: #fa9614; }

.orange-i, .i.orange-i { color: #fa9614 !important; }

.bg-orange { background-color: #fa9614; color: white; }

.border-orange { border-color: #fa9614; }

.green, .i.green { color: #8cc346; }

.green-i, .i.green-i { color: #8cc346 !important; }

.bg-green { background-color: #8cc346; color: white; }

.border-green { border-color: #8cc346; }

.lightgreen, .i.lightgreen { color: #a0c850; }

.lightgreen-i, .i.lightgreen-i { color: #a0c850 !important; }

.bg-lightgreen { background-color: #a0c850; color: white; }

.border-lightgreen { border-color: #a0c850; }

.darkgreen, .i.darkgreen { color: #64963c; }

.darkgreen-i, .i.darkgreen-i { color: #64963c !important; }

.bg-darkgreen { background-color: #64963c; color: white; }

.border-darkgreen { border-color: #64963c; }

.deepblue, .i.deepblue { color: #007db4; }

.deepblue-i, .i.deepblue-i { color: #007db4 !important; }

.bg-deepblue { background-color: #007db4; color: white; }

.border-deepblue { border-color: #007db4; }

.skyblue, .i.skyblue { color: #64c3f5; }

.skyblue-i, .i.skyblue-i { color: #64c3f5 !important; }

.bg-skyblue { background-color: #64c3f5; color: white; }

.border-skyblue { border-color: #64c3f5; }

.blue, .i.blue { color: #3498db; }

.blue-i, .i.blue-i { color: #3498db !important; }

.bg-blue { background-color: #3498db; color: white; }

.border-blue { border-color: #3498db; }

.greenblue, .i.greenblue { color: #00a0a0; }

.greenblue-i, .i.greenblue-i { color: #00a0a0 !important; }

.bg-greenblue { background-color: #00a0a0; color: white; }

.border-greenblue { border-color: #00a0a0; }

.darkblue, .i.darkblue { color: #169; }

.darkblue-i, .i.darkblue-i { color: #169 !important; }

.bg-darkblue { background-color: #169; color: white; }

.border-darkblue { border-color: #169; }

.navy, .i.navy { color: #323c46; }

.navy-i, .i.navy-i { color: #323c46 !important; }

.bg-navy { background-color: #323c46; color: white; }

.border-navy { border-color: #323c46; }

.violet, .i.violet { color: #553c7d; }

.violet-i, .i.violet-i { color: #553c7d !important; }

.bg-violet { background-color: #553c7d; color: white; }

.border-violet { border-color: #553c7d; }

.yellow, .i.yellow { color: #f1c40f; }

.yellow-i, .i.yellow-i { color: #f1c40f !important; }

.bg-yellow { background-color: #f1c40f; color: white; }

.border-yellow { border-color: #f1c40f; }

.darkyellow, .i.darkyellow { color: #bea000; }

.darkyellow-i, .i.darkyellow-i { color: #bea000 !important; }

.bg-darkyellow { background-color: #bea000; color: white; }

.border-darkyellow { border-color: #bea000; }

.gold, .i.gold { color: #c8a046; }

.gold-i, .i.gold-i { color: #c8a046 !important; }

.bg-gold { background-color: #c8a046; color: white; }

.border-gold { border-color: #c8a046; }

.whiteyellow, .i.whiteyellow { color: #f5f5b4; }

.whiteyellow-i, .i.whiteyellow-i { color: #f5f5b4 !important; }

.bg-whiteyellow { background-color: #f5f5b4; color: white; }

.border-whiteyellow { border-color: #f5f5b4; }

.darkgray, .i.darkgray { color: #666; }

.darkgray-i, .i.darkgray-i { color: #666 !important; }

.bg-darkgray { background-color: #666; color: white; }

.border-darkgray { border-color: #666; }

.gray, .i.gray { color: #888; }

.gray-i, .i.gray-i { color: #888 !important; }

.bg-gray { background-color: #888; color: white; }

.border-gray { border-color: #888; }

.slightgray, .i.slightgray { color: #aaa; }

.slightgray-i, .i.slightgray-i { color: #aaa !important; }

.bg-slightgray { background-color: #aaa; color: white; }

.border-slightgray { border-color: #aaa; }

.lightgray, .i.lightgray { color: #ddd; }

.lightgray-i, .i.lightgray-i { color: #ddd !important; }

.bg-lightgray { background-color: #ddd; color: #333; }

.border-lightgray { border-color: #ddd; }

.white, .i.white { color: #fff; }

.white-i, .i.white-i { color: #fff !important; }

.bg-white { background-color: #fff; color: #333; }

.border-white { border-color: #fff; }

.light, .i.light { color: #f5f5f5; }

.light-i, .i.light-i { color: #f5f5f5 !important; }

.bg-light { background-color: #f5f5f5; color: #333; }

.border-light { border-color: #f5f5f5; }

.lightblack, .i.lightblack { color: #333; }

.lightblack-i, .i.lightblack-i { color: #333 !important; }

.bg-lightblack { background-color: #333; color: white; }

.border-lightblack { border-color: #333; }

.darkblack, .i.darkblack { color: #222; }

.darkblack-i, .i.darkblack-i { color: #222 !important; }

.bg-darkblack { background-color: #222; color: white; }

.border-darkblack { border-color: #222; }

.black, .i.black { color: #000; }

.black-i, .i.black-i { color: #000 !important; }

.bg-black { background-color: #000; color: white; }

.border-black { border-color: #000; }

/********************************************************
	■ Font Size :: 글꼴 크기 정의
********************************************************/
.font-6 { font-size: 6px; }

.font-7 { font-size: 7px; }

.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-51 { font-size: 51px; }

.font-52 { font-size: 52px; }

.font-53 { font-size: 53px; }

.font-54 { font-size: 54px; }

.font-55 { font-size: 55px; }

.font-56 { font-size: 56px; }

.font-57 { font-size: 57px; }

.font-58 { font-size: 58px; }

.font-59 { font-size: 59px; }

.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 */
.fw-light { font-weight: 300; }

.fw-medium { font-weight: 400; }

.fw-bold { font-weight: 700; }

/********************************************************
	■ Text Etc :: 텍스트 관련 기타 정의
********************************************************/
.b { font-weight: bold; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.no-wrap { white-space: nowrap; text-overflow: ellipsis; }

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

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

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

/********************************************************
	■ Box 모델
********************************************************/
/*
.c,
.c-1200,
.c-1300,
.c-1400 { margin:0 auto; padding:0 15px; }		/* Base Container :: 재정의시에 좌우 padding 값을 넣는 모델로 사용할 수 있다.
.c-full { margin:0 auto; padding:0; }			/* Base Container (Full) :: 재정의시에 좌우 padding 값을 넣지 않는 모델로 사용할 수 있다.
*/
.c, .c-700, .c-800, .c-900, .c-1000, .c-1100, .c-1200, .c-1300, .c-1400, .c-1500, .c-1600, .c-1700, .c-1800, .c-1900, .c-2000 { margin: 0 auto; padding-left: 15px; padding-right: 15px; }

.c-full, .c-full-700, .c-full-800, .c-full-900, .c-full-1000, .c-full-1100, .c-full-1200, .c-full-1300, .c-full-1400, .c-full-1500, .c-full-1600, .c-full-1700, .c-full-1800, .c-full-1900, .c-full-2000 { margin: 0 auto; padding-left: 0; padding-right: 0; }

@media (max-width: 767px) { .c, .c-700, .c-800, .c-900, .c-1000, .c-1100, .c-1200, .c-1300, .c-1400, .c-1500, .c-1600, .c-1700, .c-1800, .c-1900, .c-2000 { padding-left: 10px; padding-right: 10px; } }
.c-700 { max-width: 700px; }

.c-full-700 { max-width: 700px; }

.c-800 { max-width: 800px; }

.c-full-800 { max-width: 800px; }

.c-900 { max-width: 900px; }

.c-full-900 { max-width: 900px; }

.c-1000 { max-width: 1000px; }

.c-full-1000 { max-width: 1000px; }

.c-1100 { max-width: 1100px; }

.c-full-1100 { max-width: 1100px; }

.c-1200 { max-width: 1200px; }

.c-full-1200 { max-width: 1200px; }

.c-1300 { max-width: 1300px; }

.c-full-1300 { max-width: 1300px; }

.c-1400 { max-width: 1400px; }

.c-full-1400 { max-width: 1400px; }

.c-1500 { max-width: 1500px; }

.c-full-1500 { max-width: 1500px; }

.c-1600 { max-width: 1600px; }

.c-full-1600 { max-width: 1600px; }

.c-1700 { max-width: 1700px; }

.c-full-1700 { max-width: 1700px; }

.c-1800 { max-width: 1800px; }

.c-full-1800 { max-width: 1800px; }

.c-1900 { max-width: 1900px; }

.c-full-1900 { max-width: 1900px; }

.c-2000 { max-width: 2000px; }

.c-full-2000 { max-width: 2000px; }

@media (max-width: 767px) { .c-900, .c-1000, .c-1100, .c-1200, .c-1300, .c-1400, .c-1500, .c-1600, .c-1700, .c-1800, .c-1900, .c-2000 { padding: 0 10px; } }
.flex { display: -ms-flexbox; display: flex; }

/********************************************************
	■ Table 형태로 div 구조를 만들경우
********************************************************/
.table { display: table; table-layout: fixed; width: 100%; overflow: hidden; margin: 0; }
.table .cell { display: table-cell; overflow: hidden; }
.table .cell.h-left { text-align: left; }
.table .cell.h-center { text-align: center; }
.table .cell.h-right { text-align: right; }
.table .cell.v-top { vertical-align: top; }
.table .cell.v-center { vertical-align: middle; }
.table .cell.v-bottom { vertical-align: bottom; }

/********************************************************
	■ 백그라운드
********************************************************/
.bg-center, .bg-contain, .bg-cover { background-position: center; background-repeat: no-repeat; }

.bg-contain { background-size: contain; }

.bg-cover { background-size: cover; }

/********************************************************
	■ 구조 높이
********************************************************/
.h10 { height: 10px; }

.h15 { height: 15px; }

.h20 { height: 20px; }

.h25 { height: 25px; }

.h30 { height: 30px; }

.h35 { height: 35px; }

.h40 { height: 40px; }

.h45 { height: 45px; }

.h50 { height: 50px; }

.h55 { height: 55px; }

.h60 { height: 60px; }

.h65 { height: 65px; }

.h70 { height: 70px; }

.h75 { height: 75px; }

.h80 { height: 80px; }

.h85 { height: 85px; }

.h90 { height: 90px; }

.h95 { height: 95px; }

.h100 { height: 100px; }

/********************************************************
	■ 구조 여백 (Margin / Padding)
********************************************************/
.ml2 { margin-left: 2px; }

.mr2 { margin-right: 2px; }

.mt2 { margin-top: 2px; }

.mb2 { margin-bottom: 2px; }

.mlr2 { margin-left: 2px; margin-right: 2px; }

.mtb2 { margin-top: 2px; margin-bottom: 2px; }

.pl2 { padding-left: 2px; }

.pr2 { padding-right: 2px; }

.pt2 { padding-top: 2px; }

.pb2 { padding-bottom: 2px; }

.plr2 { padding-left: 2px; padding-right: 2px; }

.ptb2 { padding-top: 2px; padding-bottom: 2px; }

.ml3 { margin-left: 3px; }

.mr3 { margin-right: 3px; }

.mt3 { margin-top: 3px; }

.mb3 { margin-bottom: 3px; }

.mlr3 { margin-left: 3px; margin-right: 3px; }

.mtb3 { margin-top: 3px; margin-bottom: 3px; }

.pl3 { padding-left: 3px; }

.pr3 { padding-right: 3px; }

.pt3 { padding-top: 3px; }

.pb3 { padding-bottom: 3px; }

.plr3 { padding-left: 3px; padding-right: 3px; }

.ptb3 { padding-top: 3px; padding-bottom: 3px; }

.ml4 { margin-left: 4px; }

.mr4 { margin-right: 4px; }

.mt4 { margin-top: 4px; }

.mb4 { margin-bottom: 4px; }

.mlr4 { margin-left: 4px; margin-right: 4px; }

.mtb4 { margin-top: 4px; margin-bottom: 4px; }

.pl4 { padding-left: 4px; }

.pr4 { padding-right: 4px; }

.pt4 { padding-top: 4px; }

.pb4 { padding-bottom: 4px; }

.plr4 { padding-left: 4px; padding-right: 4px; }

.ptb4 { padding-top: 4px; padding-bottom: 4px; }

.ml5 { margin-left: 5px; }

.mr5 { margin-right: 5px; }

.mt5 { margin-top: 5px; }

.mb5 { margin-bottom: 5px; }

.mlr5 { margin-left: 5px; margin-right: 5px; }

.mtb5 { margin-top: 5px; margin-bottom: 5px; }

.pl5 { padding-left: 5px; }

.pr5 { padding-right: 5px; }

.pt5 { padding-top: 5px; }

.pb5 { padding-bottom: 5px; }

.plr5 { padding-left: 5px; padding-right: 5px; }

.ptb5 { padding-top: 5px; padding-bottom: 5px; }

.ml8 { margin-left: 8px; }

.mr8 { margin-right: 8px; }

.mt8 { margin-top: 8px; }

.mb8 { margin-bottom: 8px; }

.mlr8 { margin-left: 8px; margin-right: 8px; }

.mtb8 { margin-top: 8px; margin-bottom: 8px; }

.pl8 { padding-left: 8px; }

.pr8 { padding-right: 8px; }

.pt8 { padding-top: 8px; }

.pb8 { padding-bottom: 8px; }

.plr8 { padding-left: 8px; padding-right: 8px; }

.ptb8 { padding-top: 8px; padding-bottom: 8px; }

.ml10 { margin-left: 10px; }

.mr10 { margin-right: 10px; }

.mt10 { margin-top: 10px; }

.mb10 { margin-bottom: 10px; }

.mlr10 { margin-left: 10px; margin-right: 10px; }

.mtb10 { margin-top: 10px; margin-bottom: 10px; }

.pl10 { padding-left: 10px; }

.pr10 { padding-right: 10px; }

.pt10 { padding-top: 10px; }

.pb10 { padding-bottom: 10px; }

.plr10 { padding-left: 10px; padding-right: 10px; }

.ptb10 { padding-top: 10px; padding-bottom: 10px; }

.ml12 { margin-left: 12px; }

.mr12 { margin-right: 12px; }

.mt12 { margin-top: 12px; }

.mb12 { margin-bottom: 12px; }

.mlr12 { margin-left: 12px; margin-right: 12px; }

.mtb12 { margin-top: 12px; margin-bottom: 12px; }

.pl12 { padding-left: 12px; }

.pr12 { padding-right: 12px; }

.pt12 { padding-top: 12px; }

.pb12 { padding-bottom: 12px; }

.plr12 { padding-left: 12px; padding-right: 12px; }

.ptb12 { padding-top: 12px; padding-bottom: 12px; }

.ml15 { margin-left: 15px; }

.mr15 { margin-right: 15px; }

.mt15 { margin-top: 15px; }

.mb15 { margin-bottom: 15px; }

.mlr15 { margin-left: 15px; margin-right: 15px; }

.mtb15 { margin-top: 15px; margin-bottom: 15px; }

.pl15 { padding-left: 15px; }

.pr15 { padding-right: 15px; }

.pt15 { padding-top: 15px; }

.pb15 { padding-bottom: 15px; }

.plr15 { padding-left: 15px; padding-right: 15px; }

.ptb15 { padding-top: 15px; padding-bottom: 15px; }

.ml20 { margin-left: 20px; }

.mr20 { margin-right: 20px; }

.mt20 { margin-top: 20px; }

.mb20 { margin-bottom: 20px; }

.mlr20 { margin-left: 20px; margin-right: 20px; }

.mtb20 { margin-top: 20px; margin-bottom: 20px; }

.pl20 { padding-left: 20px; }

.pr20 { padding-right: 20px; }

.pt20 { padding-top: 20px; }

.pb20 { padding-bottom: 20px; }

.plr20 { padding-left: 20px; padding-right: 20px; }

.ptb20 { padding-top: 20px; padding-bottom: 20px; }

.ml25 { margin-left: 25px; }

.mr25 { margin-right: 25px; }

.mt25 { margin-top: 25px; }

.mb25 { margin-bottom: 25px; }

.mlr25 { margin-left: 25px; margin-right: 25px; }

.mtb25 { margin-top: 25px; margin-bottom: 25px; }

.pl25 { padding-left: 25px; }

.pr25 { padding-right: 25px; }

.pt25 { padding-top: 25px; }

.pb25 { padding-bottom: 25px; }

.plr25 { padding-left: 25px; padding-right: 25px; }

.ptb25 { padding-top: 25px; padding-bottom: 25px; }

.ml30 { margin-left: 30px; }

.mr30 { margin-right: 30px; }

.mt30 { margin-top: 30px; }

.mb30 { margin-bottom: 30px; }

.mlr30 { margin-left: 30px; margin-right: 30px; }

.mtb30 { margin-top: 30px; margin-bottom: 30px; }

.pl30 { padding-left: 30px; }

.pr30 { padding-right: 30px; }

.pt30 { padding-top: 30px; }

.pb30 { padding-bottom: 30px; }

.plr30 { padding-left: 30px; padding-right: 30px; }

.ptb30 { padding-top: 30px; padding-bottom: 30px; }

.ml40 { margin-left: 40px; }

.mr40 { margin-right: 40px; }

.mt40 { margin-top: 40px; }

.mb40 { margin-bottom: 40px; }

.mlr40 { margin-left: 40px; margin-right: 40px; }

.mtb40 { margin-top: 40px; margin-bottom: 40px; }

.pl40 { padding-left: 40px; }

.pr40 { padding-right: 40px; }

.pt40 { padding-top: 40px; }

.pb40 { padding-bottom: 40px; }

.plr40 { padding-left: 40px; padding-right: 40px; }

.ptb40 { padding-top: 40px; padding-bottom: 40px; }

.ml50 { margin-left: 50px; }

.mr50 { margin-right: 50px; }

.mt50 { margin-top: 50px; }

.mb50 { margin-bottom: 50px; }

.mlr50 { margin-left: 50px; margin-right: 50px; }

.mtb50 { margin-top: 50px; margin-bottom: 50px; }

.pl50 { padding-left: 50px; }

.pr50 { padding-right: 50px; }

.pt50 { padding-top: 50px; }

.pb50 { padding-bottom: 50px; }

.plr50 { padding-left: 50px; padding-right: 50px; }

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

.ml60 { margin-left: 60px; }

.mr60 { margin-right: 60px; }

.mt60 { margin-top: 60px; }

.mb60 { margin-bottom: 60px; }

.mlr60 { margin-left: 60px; margin-right: 60px; }

.mtb60 { margin-top: 60px; margin-bottom: 60px; }

.pl60 { padding-left: 60px; }

.pr60 { padding-right: 60px; }

.pt60 { padding-top: 60px; }

.pb60 { padding-bottom: 60px; }

.plr60 { padding-left: 60px; padding-right: 60px; }

.ptb60 { padding-top: 60px; padding-bottom: 60px; }

.ml70 { margin-left: 70px; }

.mr70 { margin-right: 70px; }

.mt70 { margin-top: 70px; }

.mb70 { margin-bottom: 70px; }

.mlr70 { margin-left: 70px; margin-right: 70px; }

.mtb70 { margin-top: 70px; margin-bottom: 70px; }

.pl70 { padding-left: 70px; }

.pr70 { padding-right: 70px; }

.pt70 { padding-top: 70px; }

.pb70 { padding-bottom: 70px; }

.plr70 { padding-left: 70px; padding-right: 70px; }

.ptb70 { padding-top: 70px; padding-bottom: 70px; }

.ml80 { margin-left: 80px; }

.mr80 { margin-right: 80px; }

.mt80 { margin-top: 80px; }

.mb80 { margin-bottom: 80px; }

.mlr80 { margin-left: 80px; margin-right: 80px; }

.mtb80 { margin-top: 80px; margin-bottom: 80px; }

.pl80 { padding-left: 80px; }

.pr80 { padding-right: 80px; }

.pt80 { padding-top: 80px; }

.pb80 { padding-bottom: 80px; }

.plr80 { padding-left: 80px; padding-right: 80px; }

.ptb80 { padding-top: 80px; padding-bottom: 80px; }

.ml90 { margin-left: 90px; }

.mr90 { margin-right: 90px; }

.mt90 { margin-top: 90px; }

.mb90 { margin-bottom: 90px; }

.mlr90 { margin-left: 90px; margin-right: 90px; }

.mtb90 { margin-top: 90px; margin-bottom: 90px; }

.pl90 { padding-left: 90px; }

.pr90 { padding-right: 90px; }

.pt90 { padding-top: 90px; }

.pb90 { padding-bottom: 90px; }

.plr90 { padding-left: 90px; padding-right: 90px; }

.ptb90 { padding-top: 90px; padding-bottom: 90px; }

.ml100 { margin-left: 100px; }

.mr100 { margin-right: 100px; }

.mt100 { margin-top: 100px; }

.mb100 { margin-bottom: 100px; }

.mlr100 { margin-left: 100px; margin-right: 100px; }

.mtb100 { margin-top: 100px; margin-bottom: 100px; }

.pl100 { padding-left: 100px; }

.pr100 { padding-right: 100px; }

.pt100 { padding-top: 100px; }

.pb100 { padding-bottom: 100px; }

.plr100 { padding-left: 100px; padding-right: 100px; }

.ptb100 { padding-top: 100px; padding-bottom: 100px; }

/* 일부 html 요소 여백 조정 헬퍼 */
p.mb0 { margin-bottom: 0; }

/********************************************************
	■ 요소 테두리 (Border)
********************************************************/
.bd1 { border-width: 1px; border-style: solid; }

.bdt1 { border-top-width: 1px; border-top-style: solid; }

.bdb1 { border-bottom-width: 1px; border-bottom-style: solid; }

.bdl1 { border-left-width: 1px; border-left-style: solid; }

.bdr1 { border-right-width: 1px; border-right-style: solid; }

.bdtb1 { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; }

.bdlr1 { border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid; }

.bd2 { border-width: 2px; border-style: solid; }

.bdt2 { border-top-width: 2px; border-top-style: solid; }

.bdb2 { border-bottom-width: 2px; border-bottom-style: solid; }

.bdl2 { border-left-width: 2px; border-left-style: solid; }

.bdr2 { border-right-width: 2px; border-right-style: solid; }

.bdtb2 { border-top-width: 2px; border-top-style: solid; border-bottom-width: 2px; border-bottom-style: solid; }

.bdlr2 { border-left-width: 2px; border-left-style: solid; border-right-width: 2px; border-right-style: solid; }

.bd3 { border-width: 3px; border-style: solid; }

.bdt3 { border-top-width: 3px; border-top-style: solid; }

.bdb3 { border-bottom-width: 3px; border-bottom-style: solid; }

.bdl3 { border-left-width: 3px; border-left-style: solid; }

.bdr3 { border-right-width: 3px; border-right-style: solid; }

.bdtb3 { border-top-width: 3px; border-top-style: solid; border-bottom-width: 3px; border-bottom-style: solid; }

.bdlr3 { border-left-width: 3px; border-left-style: solid; border-right-width: 3px; border-right-style: solid; }

/********************************************************
	■ 구조 테스트용 테두리 생성
********************************************************/
.test1 { border: 1px solid red; }

.test2 { border: 1px solid blue; }

/********************************************************
	■ 사용자 정의 버튼 정의
********************************************************/
.bt { position: relative; display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; /* 위 아래 라인이 있는 버튼 // 호버시 양 옆에 라인이 보여진다 */ /* 기본 버튼 */ /* 오른쪽에 화살표가 있는 버튼 */ }
.bt.bt-lrline { border-top: 1px solid; border-bottom: 1px solid; }
.bt.bt-lrline::before, .bt.bt-lrline::after { content: ""; display: block; position: absolute; width: 1px; height: 0; transition: height 300ms; }
.bt.bt-lrline::before { left: 0; bottom: 0; }
.bt.bt-lrline::after { right: 0; top: 0; }
.bt.bt-lrline:hover::before, .bt.bt-lrline:hover::after { height: 100%; }
.bt.bt-lrline.bt-black { border-color: #333; color: #333; }
.bt.bt-lrline.bt-black::before, .bt.bt-lrline.bt-black::after { background: #333; }
.bt.bt-lrline.bt-white { border-color: white; color: white; }
.bt.bt-lrline.bt-white::before, .bt.bt-lrline.bt-white::after { background: white; }
.bt.bt-default { border-width: 1px; border-style: solid; position: relative; height: auto; line-height: 100%; padding: 10px 20px; }
.bt.bt-default.bt-small { padding: 6px 12px; font-size: 14px; }
.bt.bt-default.bt-big { padding: 15px 25px; }
.bt.bt-default.bt-white { border-color: white; color: white; }
.bt.bt-default.bt-white:hover { background-color: white; border-color: white; color: #333; }
.bt.bt-rightarrow { border-width: 1px; border-style: solid; position: relative; height: auto; line-height: 100%; padding: 10px 50px 10px 20px; }
.bt.bt-rightarrow::after { content: ">"; display: block; position: absolute; right: 10px; top: 10px; transition: all 300ms; }
.bt.bt-rightarrow:hover::after { right: 20px; }
.bt.bt-rightarrow.bt-white { border-color: white; color: white; }
.bt.bt-rightarrow.bt-white:hover { background-color: white; border-color: white; color: #333; }

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ Swiper Plugin 기본 스타일
********************************************************/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ 타일 스타일 공용
********************************************************/
.tiles { visibility: hidden; }

.tiles.loaded { visibility: visible; }

.tiles::before, .tiles::after { content: ""; clear: both; display: block; }

.tiles .tile { float: left; margin-bottom: 10px; text-align: center; visibility: hidden; }

.tiles .tile > .a { position: relative; display: block; width: 100%; height: 100%; padding: 0; }

.tiles .tile > .a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .tile > .a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .tile > .a > .a2, .tiles .tile > .a > .a3 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

.tiles .tile > .a .a2::before, .tiles .tile > .a .a2::after, .tiles .tile > .a .a3::before, .tiles .tile > .a .a3::after { content: ""; position: absolute; transition-timing-function: linear; z-index: 3; }



.tiles .image { position: relative; display: block; overflow: hidden; }

.tiles .image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles .more { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 2; }

.tiles .image .img { background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .3s ease; }

.tiles .image.no-image .img { background-image: url(img/no-img.jpg) !important; }

.tiles .image .chk { position: absolute; left: 10px; top: 10px; z-index: 3; }

.tiles .content { height: 100%; text-align: left; }

.tiles .data { display: none; }

@media (max-width: 767px) { .tiles { margin: 0 -5px; }
  .tiles .tile { padding: 0 5px; } }
  
  
  
.tiles2 { visibility: visible; }

.tiles2.loaded { visibility: visible; }

.tiles2::before, .tiles::after { content: ""; clear: both; display: block; }

.tiles2 .tile { float: left; margin-bottom: 10px; text-align: center; visibility: visible; }

.tiles2 .tile > .a { position: relative; display: block; width: 100%; height: 100%; padding: 0; }

.tiles2 .tile > .a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles2 .tile > .a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles2 .tile > .a > .a2, .tiles .tile > .a > .a3 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

.tiles2 .tile > .a .a2::before, .tiles .tile > .a .a2::after, .tiles .tile > .a .a3::before, .tiles .tile > .a .a3::after { content: ""; position: absolute; transition-timing-function: linear; z-index: 3; }



.tiles2 .image { position: relative; display: block; overflow: hidden; }

.tiles2 .image::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: all .3s ease; }

.tiles2 .more { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 2; }

.tiles2 .image .img { background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .3s ease; }

.tiles2 .image.no-image .img { background-image: url(img/no-img.jpg) !important; }

.tiles2 .image .chk { position: absolute; left: 10px; top: 10px; z-index: 3; }

.tiles2 .content { height: 100%; text-align: left; }

.tiles2 .data { display: none; }

@media (max-width: 767px) { .tiles2 { margin: 0 -5px; }
  .tiles2 .tile { padding: 0 5px; } }
/* 트랜지션 (애니메이션 속도) */
.tran-2 .tile > .a::after, .tran-2 .tile .image::after, .tran-2 .tile .image .img { transition: all .2s ease; }

.tran-3 .tile > .a::after, .tran-3 .tile .image::after, .tran-3 .tile .image .img { transition: all .3s ease; }

.tran-4 .tile > .a::after, .tran-4 .tile .image::after, .tran-4 .tile .image .img { transition: all .4s ease; }

.tran-5 .tile > .a::after, .tran-5 .tile .image::after, .tran-5 .tile .image .img { transition: all .5s ease; }

.tran-6 .tile > .a::after, .tran-6 .tile .image::after, .tran-6 .tile .image .img { transition: all .6s ease; }

.tran-7 .tile > .a::after, .tran-7 .tile .image::after, .tran-7 .tile .image .img { transition: all .7s ease; }

.tran-8 .tile > .a::after, .tran-8 .tile .image::after, .tran-8 .tile .image .img { transition: all .8s ease; }

.tran-9 .tile > .a::after, .tran-9 .tile .image::after, .tran-9 .tile .image .img { transition: all .9s ease; }

.tran-10 .tile > .a::after, .tran-10 .tile .image::after, .tran-10 .tile .image .img { transition: all 1.0s ease; }

.tran-12 .tile > .a::after, .tran-12 .tile .image::after, .tran-12 .tile .image .img { transition: all 1.2s ease; }

.tran-15 .tile > .a::after, .tran-15 .tile .image::after, .tran-15 .tile .image .img { transition: all 1.5s ease; }

.tran-20 .tile > .a::after, .tran-20 .tile .image::after, .tran-20 .tile .image .img { transition: all 2.0s ease; }

/********************************************************
	■ 왼쪽에 아이콘이미지 / 오른쪽에 head, desc
********************************************************/
.ts-lefticon1 { margin: 0 -10px; }

.ts-lefticon1 .tile { padding: 0 10px; }

.ts-lefticon1 .tile > .a { display: table; border: 1px solid #d2d2d2; height: 130px; padding: 0 15px 0 20px; }

.ts-lefticon1 .image { display: table-cell; width: 100px; }

.ts-lefticon1 .image .img { width: 100%; height: 100%; background-size: contain; }

.ts-lefticon1 .content { display: table-cell; padding-left: 30px; height: 100%; vertical-align: middle; }

.ts-lefticon1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 1199px) { .ts-lefticon1 { margin: 0 -5px; }
  .ts-lefticon1 .tile { padding: 0 5px; }
  .ts-lefticon1 .content { padding-left: 10px; }
  .ts-lefticon1 .content .desc { display: none; } }
@media (max-width: 1023px) { .ts-lefticon1 .tile > a { height: 90px; padding: 0 5px; }
  .ts-lefticon1 .image { width: 70px; } }
@media (max-width: 767px) { .ts-lefticon1 .tile > a { height: 75px; }
  .ts-lefticon1 .image { height: 60px; } }
/********************************************************
	■ 왼쪽에 이미지 / 오른쪽에 head, desc
********************************************************/
.ts-rectimg-left-1 { margin: 0 -10px; }

.ts-rectimg-left-1 .tile { position: relative; padding: 0 10px; }

.ts-rectimg-left-1 .tile > .a { position: relative; }

.ts-rectimg-left-1 .image { position: relative; width: 60%; }

.ts-rectimg-left-1 .image .img { width: 100%; height: 100%; }

.ts-rectimg-left-1 .content { position: absolute; z-index: 2; left: 60%; right: 0; top: 0; bottom: 0; height: auto; }

.ts-rectimg-left-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 1199px) { .ts-rectimg-left-1 { margin: 0 -5px; }
  .ts-rectimg-left-1 .tile { padding: 0 5px; } }
/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-top-1 .tile { margin-bottom: 50px; }

.ts-squareimg-top-1 .image .img { position: relative; padding-bottom: 100%; }

/* 이미지 직사각 비율로 표현하려면 padding-bottom(%)을 재정의한다. */
.ts-squareimg-top-1 .content { margin-top: 20px; height: 100%; }

.ts-squareimg-top-1 .content .desc { margin-top: 10px; color: #666; font-weight: 300; }

@media (max-width: 767px) { .ts-squareimg-top-1 { margin: 0 -5px; }
  .ts-squareimg-top-1 .tile { padding: 0 5px; } }
/********************************************************
	■ 정사각 이미지 / 내부에 head, desc
********************************************************/
.ts-squareimg-full .tile { margin: 0; }

.ts-squareimg-full .tile > .a { position: relative; }

.ts-squareimg-full .image .img { position: relative; padding-bottom: 100%; }

.ts-squareimg-full .tile-h-2x .image .img { padding-bottom: 50%; }

.ts-squareimg-full .content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; }

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ 롤오버효과 (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; }

/* 실제 효과 */
/* 다음의 롤오버효과 클래스는 효과를 적용할 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: #646464; }

/* ----- 이미지 - 테두리 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: #646464; }

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

.hover-img-alpha40 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.4) !important; }

.hover-img-alpha50 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.5) !important; }

.hover-img-alpha60 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.6) !important; }

.hover-img-alpha70 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.7) !important; }

.hover-img-alpha80 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.8) !important; }

.hover-img-alpha90 .a:hover .image::after { background-color: rgba(0, 0, 0, 0.9) !important; }

.hover-img-alpha100 .a:hover .image::after { background-color: black !important; }

/* ----- 이미지 - 확대 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); }

/* ----- a 요소 - more 클래스 객체 보이기 :: a-more ----- */
.hover-a-more .a:hover .more { display: block; }

.hover-a-more-flex .a:hover .more { display: flex; }

.hover-a-height1 .a::before { background: white; transition: all .8s; }

.hover-a-height1 .a::after { top: 100% !important; transition: all .8s; }

.hover-a-height1 .a:hover::before { top: -20px; bottom: -20px; }

.hover-a-height1 .a:hover::after { top: -20px !important; bottom: -20px; }

/* ----- a 요소 - a2, a3 클래스 테두리 2px 애니매이션1 :: a-border2-ani1 ----- */
.hover-a-border2-ani1 .a .a2::before, .hover-a-border2-ani1 .a .a2::after, .hover-a-border2-ani1 .a .a3::before, .hover-a-border2-ani1 .a .a3::after { transition-duration: 100ms; transition-delay: 0ms; opacity: 0; }

.hover-a-border2-ani1 .a:hover .a2::before, .hover-a-border2-ani1 .a:hover .a2::after, .hover-a-border2-ani1 .a:hover .a3::before, .hover-a-border2-ani1 .a:hover .a3::after { opacity: 1; }

.hover-a-border2-ani1 .a .a2::before { left: 0; right: 100%; top: 0; height: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a2::before { right: 0; }

.hover-a-border2-ani1 .a .a2::after { right: 0; top: 0; bottom: 100%; width: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a2::after { bottom: 0; transition-delay: 100ms; }

.hover-a-border2-ani1 .a .a3::before { left: 100%; right: 0; bottom: 0; height: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a3::before { left: 0; transition-delay: 200ms; }

.hover-a-border2-ani1 .a .a3::after { left: 0; top: 100%; bottom: 0; width: 2px; background: #333; }

.hover-a-border2-ani1 .a:hover .a3::after { top: 0; transition-delay: 300ms; }

/* ----- a 요소 - 볼록 효과 - 위로 5px/10px 이동 및 적절한 그림자효과 :: a-top5shadow , a-top10shadow ----- */
.hover-a-top5shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-5px) !important; }

.hover-a-top10shadow .a:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-10px) !important; }

/********************************************************
	■ Animate.css 확장 애니메이션 // CSS3 애니메이션 관련
********************************************************/
@keyframes fadeInDown50 { from { opacity: 0; transform: translate3d(0, -50%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown50 { animation-name: fadeInDown50; }

@keyframes fadeInUp50 { from { opacity: 0; transform: translate3d(0, 50%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp50 { animation-name: fadeInUp50; }

@keyframes fadeInLeft50 { from { opacity: 0; transform: translate3d(-50%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInLeft50 { animation-name: fadeInLeft50; }

@keyframes fadeInRight50 { from { opacity: 0; transform: translate3d(50%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRight50 { animation-name: fadeInRight50; }

/* WOW.js Animation Blink Bug Fix */
.wow { visibility: hidden; }

.wow.wow-completed { animation-name: none !important; }

/* Trainsition */
.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; }

/* Animation Delay */
.ani-d-01 { animation-delay: .1s; }

.ani-d-02 { animation-delay: .2s; }

.ani-d-03 { animation-delay: .3s; }

.ani-d-04 { animation-delay: .4s; }

.ani-d-05 { animation-delay: .5s; }

.ani-d-06 { animation-delay: .6s; }

.ani-d-07 { animation-delay: .7s; }

.ani-d-08 { animation-delay: .8s; }

.ani-d-09 { animation-delay: .9s; }

.ani-d-10 { animation-delay: 1.0s; }

.ani-d-15 { animation-delay: 1.5s; }

.ani-d-20 { animation-delay: 2.0s; }

/********************************************************
	■ 반응형 코어
********************************************************/
/* ----- Desktops ----- */
@media (min-width: 768px) { .m-ele { display: none !important; }
  .d-w1 { width: 100%; }
  .d-w2 { width: 50%; }
  .d-w3 { width: 33.33%; }
  .d-w4 { width: 25%; }
  .d-w5 { width: 20%; }
  .d-w10p { width: 10%; }
  .d-w20p { width: 20%; }
  .d-w30p { width: 30%; }
  .d-w40p { width: 40%; }
  .d-w50p { width: 50%; }
  .d-w60p { width: 60%; }
  .d-w70p { width: 70%; }
  .d-w80p { width: 80%; }
  .d-w90p { width: 90%; }
  .d-w100p { width: 100%; } }
/* ----- Mobile ----- */
@media (max-width: 767px) { .d-ele { display: none !important; }
  .m-w1 { width: 100%; }
  .m-w2 { width: 50%; }
  .m-w3 { width: 33.33%; }
  .m-w4 { width: 25%; }
  .m-w5 { width: 20%; }
  .m-w10p { width: 10%; }
  .m-w20p { width: 20%; }
  .m-w30p { width: 30%; }
  .m-w40p { width: 40%; }
  .m-w50p { width: 50%; }
  .m-w60p { width: 60%; }
  .m-w70p { width: 70%; }
  .m-w80p { width: 80%; }
  .m-w90p { width: 90%; }
  .m-w100p { width: 100%; } }
/********************************************************
	■ HTML 기본 초기화
********************************************************/
* { box-sizing: border-box; }

html, body { font-size: 16px; /* colorset 에서 재정의한다. (중요! :: rem 단위사용에 필수) */ font-family: "Open Sans", "나눔바른고딕", "NBG", sans-serif; word-break: keep-all; word-wrap: break-word; }

body { position: relative; color: #333; left: 0; width: 100vw; height: 100vh; overflow-x: hidden; line-height: normal; transition: all .2s ease; }

a, a:link, a:visited { color: #333; text-decoration: none; transition: all .3s ease; }

a:hover { color: #60493d; text-decoration: none; }

fieldset legend { display: none; }

label { font-weight: normal; }

label.checkbox, label.radio { line-height: 12px; font-size: 12px; font-weight: normal; cursor: pointer; }

hr { display: block; margin: 20px 0; border: 0; border-top: 1px solid #eee; }

blockquote { font-size: 12px; margin: 0 0 20px; }

*[role=button] { outline: none; }

h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; line-height: 150%; }

.h0n, .h1n, .h2n, .h3n, .h4n, .h5n, .h6n { font-weight: 400; line-height: 150%; }

.h0, h1, h2, h3, .h0n, .h1n, .h2n, .h3n { margin-top: 10px; margin-bottom: 10px; }

h4, h5, h6, .h4, .h5, .h6, .h4n, .h5n, .h6n { margin: 0; }

.h0 { font-weight: bold; font-size: 4rem; }

h1, .h1, .h1n { font-size: 2.7rem; }

h2, .h2, .h2n { font-size: 2.4rem; }

h3, .h3, .h3n { font-size: 2.1rem; }

h4, .h4, .h4n { font-size: 1.8rem; }

h5, .h5, .h5n { font-size: 1.5rem; }

h6, .h6, .h6n { font-size: 1.2rem; }

@media (max-width: 767px) { html, body { font-size: 15px; }
  .h0 { font-size: 3rem; }
  h1, .h1, .h1n { font-size: 2.1rem; }
  h2, .h2, .h2n { font-size: 1.9rem; }
  h3, .h3, .h3n { font-size: 1.7rem; }
  h4, .h4, .h4n { font-size: 1.5rem; }
  h5, .h5, .h5n { font-size: 1.3rem; }
  h6, .h6, .h6n { font-size: 1.1rem; } }
@media (max-width: 480px) { .h0 { font-size: 2.5rem; }
  h1, .h1, .h1n { font-size: 2.1rem; }
  h2, .h2, .h2n { font-size: 1.9rem; }
  h3, .h3, .h3n { font-size: 1.7rem; }
  h4, .h4, .h4n { font-size: 1.5rem; }
  h5, .h5, .h5n { font-size: 1.3rem; }
  h6, .h6, .h6n { font-size: 1.1rem; } }
ul { list-style: none; margin: 0; padding: 0; }

ul::after { display: block; content: ""; clear: both; }

a:focus { outline: none; }

p, ol li { margin: 0 0 10px; word-break: keep-all; line-height: 1.5; }

p.desc { margin-bottom: 0; }

/* 게시판 - 쓰기(write) */
ul.form-ele { clear: both; border-bottom: 1px solid #ddd; padding: 10px; }

ul.form-ele.first { border-top: 1px solid #ddd; }

ul.form-ele::after { display: block; content: ""; clear: both; }

ul.form-ele li { float: left; }

ul.form-ele li:nth-child(1) { padding-top: 4px; padding-bottom: 2px; width: 20%; }

ul.form-ele li:nth-child(2) { width: 80%; }

ul.form-ele li .row { margin-bottom: 5px; }

ul.form-ele.full li { float: none; }

ul.form-ele.full li:nth-child(1) { width: 100%; }

ul.form-ele.full li:nth-child(2) { width: 100%; }

@media (min-width: 768px) { ul.form-ele li .d-w30p { display: inline-block; width: 30%; } }
@media (max-width: 767px) { ul.form-ele li { float: none; width: 100% !important; }
  ul.form-ele li select, ul.form-ele li input { margin-bottom: 5px; } }
/********************************************************
	■ 반응형 스타일 - 주요 분기점
********************************************************/
/* ----- Extra Large Devices (Desktops) ----- */
/* ----- Large Devices (Desktops) ----- */
/* ----- Medium Devices (Tablets) ----- */
/* ----- Small Devices (Landscape phones) ----- */
/* ----- Extra Small Devices (Portrait phones) ----- */
/* 참고 분기점 - 1200 */
/* 핵심 분기점 - <1024 / <768 / <=480 */
/* ----- Midium Devices (Tablets) ----- */
/* ----- Small Devices (Landscape phones) ----- */
/* ----- Extra Small Devices (Portrait phones) ----- */
/* 핵심 분기점 4개 (템플릿) */

/*# sourceMappingURL=base.css.map */