@charset "utf-8";
/*config*/
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/earlyaccess/hanna.css');

/* Normalize */
*, *:before, *:after {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-text-size-adjust:none;}
html, body, div, span, applet, object, iframe, h5, h6, pre,a, abbr, acronym, address, dfn, font, img, s, strike, sub, sup, h1, h2, h3, h4, h5, b,  i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video { margin: 0;padding: 0; border: 0; font: inherit; color: inherit; vertical-align: baseline; background: transparent; } 
html, body {font-size:62.5% !important; overflow-x: hidden;font-family: "Noto Sans KR", "sans-serif", "AppleGothic", "굴림", "Gulim", "Arial", "verdana", "Helvetica"; } 
body {line-height:1;} 
body.sub { background-color:#e6e6e6; } 
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, p, span, button, th, td, a { font-family: "Noto Sans KR", "sans-serif", "AppleGothic", "굴림", "Gulim", "Arial", "verdana", "Helvetica"; } 
input, select, textarea, button { font: inherit; color: inherit; } 
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
legend { visibility: hidden; overflow: hidden; top: -9999px; left: -9999px; width: 0; height: 0; font-size: 0; line-height: 0; } 
caption { overflow: hidden; visibility: hidden; width: 0; height: 0; font-size: 0; line-height: 0; } 
button { border: none; background-color: transparent; cursor: pointer; } 
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 
input, textarea, button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
input, button, select, a, img { margin: 0; padding: 0; } 
ul, li {list-style:none;} 
hr { display: none; } 
img { border: none; } 
a { margin: 0; padding: 0; text-decoration: none; } 

/* Web fonts */
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/sairasemicondensed/v6/U9MD6c-2-nnJkHxyCjRcnMHcWVWV1cWRRX8MaOM.ttf) format('truetype'); } 
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('/fonts/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */
 src: local('Montserrat Regular'), local('Montserrat-Regular'), url('/fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */}
 
/*montserrat-500 - latin*/
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('/fonts/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
 src: local('Montserrat Medium'), local('Montserrat-Medium'), url('/fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */}
/*montserrat-600 - latin*/
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('/fonts/montserrat-v14-latin-600.eot'); /* IE9 Compat Modes */
 src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('/fonts/montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v14-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */}
/*montserrat-700 - latin*/
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('/fonts/montserrat-v14-latin-700.eot'); /* IE9 Compat Modes */
 src: local('Montserrat Bold'), local('Montserrat-Bold'), url('/fonts/montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v14-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */}
/*montserrat-800 - latin*/
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('/fonts/montserrat-v14-latin-800.eot'); /* IE9 Compat Modes */
 src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url('/fonts/montserrat-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v14-latin-800.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v14-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */}
/*montserrat-900 - latin*/
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('/fonts/montserrat-v14-latin-900.eot'); /* IE9 Compat Modes */
 src: local('Montserrat Black'), local('Montserrat-Black'), url('/fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */ url('/fonts/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */}

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url('/fonts/NotoSansCJKkr-Light-Alphabetic.eot'); /* IE9 Compat Modes */
 src: local('Noto Sans KR Light'), local('NotoSansKR-Light'), url('/fonts/noto-sans-kr-v12-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/NotoSansCJKkr-Light-Alphabetic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/NotoSansCJKkr-Light-Alphabetic.woff') format('woff'), /* Modern Browsers */ url('/fonts/NotoSansCJKkr-Light-Alphabetic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/NotoSansCJKkr-Light-Alphabetic.svg') format('svg'); /* Legacy iOS */}
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url('/fonts/noto-sans-kr-v12-latin_korean-regular.eot'); /* IE9 Compat Modes */
 src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'), url('/fonts/noto-sans-kr-v12-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/noto-sans-kr-v12-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/noto-sans-kr-v12-latin_korean-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/noto-sans-kr-v12-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/noto-sans-kr-v12-latin_korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */}
/*noto-sans-kr-500 - latin_korean*/
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url('/fonts/noto-sans-kr-v12-latin_korean-500.eot'); /* IE9 Compat Modes */
 src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'), url('/fonts/noto-sans-kr-v12-latin_korean-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/noto-sans-kr-v12-latin_korean-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/noto-sans-kr-v12-latin_korean-500.woff') format('woff'), /* Modern Browsers */ url('/fonts/noto-sans-kr-v12-latin_korean-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/noto-sans-kr-v12-latin_korean-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */}
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url('.fonts/noto-sans-kr-v12-latin_korean-700.eot'); /* IE9 Compat Modes */
 src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'), url('/fonts/noto-sans-kr-v12-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/noto-sans-kr-v12-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/noto-sans-kr-v12-latin_korean-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/noto-sans-kr-v12-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/noto-sans-kr-v12-latin_korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */}

/*영문폰트 ROBOTO*/
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/fonts/Roboto-Regular.eot'); /* IE9 Compat Modes */
 src: local('Roboto Regular'), local('Roboto-Regular'), url('/fonts/Roboto-Regular.eot') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/Roboto-Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/Roboto-Regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/Roboto-Regular.svg') format('svg'); /* Legacy iOS */}
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('/fonts/Roboto-Bold.eot'); /* IE9 Compat Modes */
 src: local('Roboto Bold'), local('Roboto-Bold'), url('/fonts/Roboto-Bold.eot') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/Roboto-Bold.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/Roboto-Bold.woff') format('woff'), /* Modern Browsers */ url('/fonts/Roboto-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/Roboto-Bold.svg') format('svg'); /* Legacy iOS */}
@font-face { font-family: 'Hanna'; font-style: normal; font-weight: 700; src: url('/fonts/BMHANNA_11yrs_ttf.ttf'); /* IE9 Compat Modes */
 src: local('BMHANNA_11yrs'), local('BMHANNA_11yrs'), url('/fonts/BMHANNA_11yrs_ttf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/BMHANNA_11yrs_ttf.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/BMHANNA_11yrs_ttf.woff') format('woff'), /* Modern Browsers */ url('/fonts/BMHANNA_11yrs_ttf.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/BMHANNA_11yrs_ttf.svg') format('svg'); /* Legacy iOS */}

.eng { font-family: "Roboto", "Saira Semi Condensed", "sans-serif", "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; }
.num_eng { color: #4a65f6; font-family: 'Roboto'; } 

.table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; } 
.after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.list { list-style: none; }
.underline { text-decoration: underline; } 
.clamp { display: block; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
.button { border: 0; outline: 0; cursor: pointer; } 
.letter-spacing { letter-spacing: -0.34px; } 
.tdnone { text-decoration: none; } 
.thin { font-weight: 400; } 
.hidden { font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; }
.blind { font-size: 0; line-height: 0; overflow: hidden; text-indent: -999; } 

.oh { overflow: hidden; } 
.oh-x { overflow-x: hidden; } 
.oa { overflow: auto; } 
.overauto { overflow: auto; -webkit-overflow-scrolling: touch; } 
.bgrn { background-repeat: no-repeat; } 
.bdrn { border: none; } 
.tdunder { text-decoration: underline; } 
.nowrap { white-space: nowrap; } 
.border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

.tbl { table-layout: fixed; border-collapse: collapse; border-spacing: 0; } 
.hauto { height: auto; } 
.breakall { word-break: break-all; } 
.bgcover { background-size: cover; } 
.lsnone { list-style: none; } 
.img-responsive { width: 100%; height: auto; } 

.vertical-top { position: relative; top: 0%; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } 
.vertical_mid { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 
.vertical_bottom { position: relative; top: 100%; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } 

/* flex */
.flexwrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } 
.dpflex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } 
.flexCV { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } 
.flexV { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } 
.flex1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } 
.fdrow { flex-direction: row; } 
.fdcol { flex-direction: column; } 

/* display */
.dpnone { display: none; } 
.block {display:block;}
.inline-block {display:inline-block;}
.dpblock {display:block;}
.dpinblock {display:inline-block;}

.tdnone { text-decoration: none; } 
.bgnone { background-image: none; } 
.cover { background-size: cover; } 
.mp00 { margin: 0; padding: 0; } 
.m0auto { margin: 0 auto; } 
.bold { font-weight: bold; } 
.pointer { cursor: pointer; } 
.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; } 
.clamp { display: block; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
.y50p { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 
.p_color { color: #4a65f6; } 

/* Parametic Mixins */
.duration { transition-duration: 0.5s; } 
.pp_color { color: #4a65f6; } 
.fade-in { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s; } 
@keyframes fadeInOpacity { 
0% { opacity: 0; } 
100% { opacity: 1; } 
}
/* Mixins-transition*/
.trans { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 
/*shadow*/
.shadow { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2); } 
/*Mixins - transition*/
.trans { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 
.trans2 { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } 
.trans3 { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } 
/*gradation*/
.bg-gradation { background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); /* IE6-9 */} 

/* border */
.border-all { border: 1px solid #e6e6e6; } 
.border-top { border-top: 1px solid #e6e6e6; } 
.border-bottom { border-bottom: 1px solid #e6e6e6; } 
.border-left { border-left: 1px solid #e6e6e6; } 
.border-right { border-right: 1px solid #e6e6e6; } 
.input-border { border: 1px solid #e0e0e0; } 

/* Position */
.poR { position: relative; }
.poA { position: absolute; }
.poF { position: fixed; }
.poS { position: static; }
.fL { float: left; } 
.fR { float: right; } 
.taL { text-align: left; }
.taR { text-align: right; }
.taC { text-align: center; }
.left { text-align: left; } 
.right { text-align: right; } 
.center { text-align: center; } 
.vaT { vertical-align: top; }
.vaM { vertical-align: middle; }
.vaB { vertical-align: bottom; }

/* BG Color */
.bg-white { background-color: #ffffff; } 
.bg-black { background-color: #000000; } 
.bg-trans { background: transparent; } 
.bg-navy { background-color: #192C4F; } 
.bg-orange { background-color: #FF5C05; } 
.bg-dark-navy { background-color: #101d35; } 
.bg-blue { background-color: #4a65f6; } 
.bg-dark-blue { background-color: #00377a; } 
.bg-f1 { background-color: #f1f1f1; } 
.bg-f5 { background-color: #f5f5f5; } 
.bg-f7 { background-color: #f7f7f7; } 
.bg-f9 { background-color: #f9f9f9; } 
.bg-dd { background-color: #dddddd; } 
.bg-cc { background-color: #cccccc; } 
.bg-ee { background-color: #eeeeee; } 
.bg-33 { background-color: #333333; } 
.bg-44 { background-color: #444444; } 
.bg-55 { background-color: #555555; } 
.bg-cafe-clr { background-color: #7b4cb6; } 
.bg-entinfo-clr { background-color: #2763bb; } 
.bdrT { border-top: 1px solid #e1e1e1; } 
.bdrB { border-bottom: 1px solid #e1e1e1; } 
.bdrL { border-left: 1px solid #e1e1e1; } 
.bdrR { border-right: 1px solid #e1e1e1; } 
.bdrA { border: 1px solid #e1e1e1; } 
.bdrT2 { border-top: 1px solid #dddddd; } 
.bdrB2 { border-bottom: 1px solid #dddddd; } 
.bdrL2 { border-left: 1px solid #dddddd; } 
.bdrR2 { border-right: 1px solid #dddddd; } 
.bdrA2 { border: 1px solid #dddddd; } 
.bdr0 { border: none; } 

/* Z-index */
.z0 { z-index: 0; } 
.z1 { z-index: 1; } 
.z5 { z-index: 5; } 
.z10 { z-index: 10; } 
.z20 { z-index: 20; } 
.z30 { z-index: 30; } 
.z50 { z-index: 50; } 
.z100 { z-index: 100; } 
.z200 { z-index: 200; } 
.z300 { z-index: 300; } 
.z400 { z-index: 400; } 
.z500 { z-index: 500; } 
.z1000 { z-index: 1000; } 
.z2000 { z-index: 2000; } 

/* Font Size */
.f11 { font-size: 11px; } 
.f12 { font-size: 12px; } 
.f13 { font-size: 13px; } 
.f14 { font-size: 14px; } 
.f15 { font-size: 15px; } 
.f16 { font-size: 16px; } 
.f17 { font-size: 17px; } 
.f18 { font-size: 18px; } 
.f19 { font-size: 19px; } 
.f20 { font-size: 20px; } 
.f21 { font-size: 21px; } 
.f22 { font-size: 22px; } 
.f24 { font-size: 24px; } 
.f30 { font-size: 30px; } 
.f36 { font-size: 36px; } 
.f40 { font-size: 40px; } 
.f48 { font-size: 48px; } 
.f50 { font-size: 50px; } 
.f60 { font-size: 60px; } 
.lh16 { line-height: 16px; } 
.lh19 { line-height: 19px; } 
.lh20 { line-height: 20px; } 
.lh21 { line-height: 21px; } 
.lh22 { line-height: 22px; } 
.lh24 { line-height: 24px; } 
.lh25 { line-height: 25px; } 
.lh30 { line-height: 30px; } 
.lh36 { line-height: 36px; } 
.lh39 { line-height: 39px; } 
.lh40 { line-height: 40px; } 
.lh42 { line-height: 42px; } 
.lh50 { line-height: 50px; } 
.lh60 { line-height: 60px; } 
.lh12em { line-height: 1.2em; } 
.lh13em { line-height: 1.3em; } 
.lh14em { line-height: 1.4em; } 
.lh15em { line-height: 1.5em; } 
.lh16em { line-height: 1.6em; } 
.lh17em { line-height: 1.7em; } 
.lh18em { line-height: 1.8em; } 
.ls-1 { letter-spacing: -1px; } 
.fw100 { font-weight: 100; } 
.fw300 { font-weight: 300; } 
.fw400 { font-weight: 400; } 
.fw500 { font-weight: 500; } 
.fw600 { font-weight: 600; } 
.fw700 { font-weight: 700; } 
.fw900 { font-weight: 900; } 

/* Margin & Padding */
.mT-1 { margin-top: -1px; } 
.mT05 { margin-top: 5px; } 
.mT10 { margin-top: 10px; } 
.mT12 { margin-top: 12px; } 
.mT15 { margin-top: 15px; } 
.mT20 { margin-top: 20px; } 
.mT30 { margin-top: 30px; } 
.mT35 { margin-top: 35px; } 
.mT40 { margin-top: 40px; } 
.mT50 { margin-top: 50px; } 
.mT60 { margin-top: 60px; } 
.mR00 { margin-right: 0 !important; } 
.mR05 { margin-right: 5px; } 
.mR10 { margin-right: 10px; } 
.mR15 { margin-right: 10px; } 
.mR20 { margin-right: 20px; } 
.mR30 { margin-right: 30px; } 
.mB00 { margin-bottom: 0; } 
.mB01 { margin-bottom: 1px; } 
.mB03 { margin-bottom: 3px; } 
.mB05 { margin-bottom: 5px; } 
.mB08 { margin-bottom: 8px; } 
.mB10 { margin-bottom: 10px; } 
.mB15 { margin-bottom: 15px; } 
.mB20 { margin-bottom: 20px; } 
.mB30 { margin-bottom: 30px; } 
.mB35 { margin-bottom: 35px; } 
.mB40 { margin-bottom: 40px; } 
.mB50 { margin-bottom: 50px; } 
.mL00 { margin-left: 0; } 
.mL05 { margin-left: 5px; } 
.mL07 { margin-left: 7px; } 
.mL10 { margin-left: 10px; } 
.mL15 { margin-left: 15px; } 
.mL20 { margin-left: 20px; } 
.mL30 { margin-left: 30px; } 
.mL40 { margin-left: 40px; } 
.mL50 { margin-left: 50px; } 
.mL60 { margin-left: 60px; } 
.pT05 { padding-top: 5px; } 
.pT10 { padding-top: 10px; } 
.pT12 { padding-top: 12px; } 
.pT15 { padding-top: 15px; } 
.pT20 { padding-top: 20px; } 
.pT25 { padding-top: 25px; } 
.pT30 { padding-top: 35px; } 
.pT35 { padding-top: 35px; } 
.pT40 { padding-top: 40px; } 
.pT50 { padding-top: 50px; } 
.pT80 { padding-top: 80px; } 
.pR0 { padding-right: 0; } 
.pR10 { padding-right: 10px; } 
.pR20 { padding-right: 20px; } 
.pB08 { padding-bottom: 8px; } 
.pB10 { padding-bottom: 10px; } 
.pB20 { padding-bottom: 20px; } 
.pB30 { padding-bottom: 30px; } 
.pB40 { padding-bottom: 40px; } 
.pB50 { padding-bottom: 50px; } 
.pL10 { padding-left: 10px; } 
.pL15 { padding-left: 15px; } 
.pL20 { padding-left: 20px; } 
.pL30 { padding-left: 30px; } 
.pTB50 { padding: 50px 0; } 

/* clear */
.clfix { *zoom: 1; } 
.clfix:before,
.clfix:after { display: block; line-height: 0; content: ""; } 
.clfix:after { clear: both; height: 0; } 
.clearfix { display: inline-block; } 
.clear { clear: both; font-size: 0; line-height: 0; width: 100%; height: 0; } 
.clear5 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 5px; } 
.clear10 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 10px; } 
.clear20 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 20px; } 
.clear30 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 30px; } 
.clear50 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 50px; } 
.clr { clear: both; font-size: 0; line-height: 0; width: 100%; height: 0; } 
.clr05 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 5px; } 
.clr10 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 10px; } 
.clr15 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 15px; } 
.clr20 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 20px; } 
.clr30 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 30px; } 
.clr40 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 40px; } 
.clr50 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 50px; } 
.clr100 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 100px; }

.hs10 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 10px; } 
.hs20 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 20px; } 
.hs30 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 30px; } 
.hs40 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 40px; } 
.hs50 { clear: both; font-size: 0; line-height: 0; width: 100%; height: 50px; } 

/* Width Size */
.w100p { width: 100%; clear: both; } 
.h100p { height: 100%; } 
.w1200 { width: 100%; max-width: 1200px; margin: 0 auto; } 
.w1160 { width: 100%; max-width: 1160px; margin: 0 auto; } 
.w1100 { width: 100%; max-width: 1100px; margin: 0 auto; } 

/* Wrap */
.wrap { font-family: "Noto Sans KR"; color: daren(white, 60%); padding: 2rem; width: 100%; clear: both; min-width: 360px; position: relative; } 
.wrap:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.wrap article { width: 100%; padding: 2rem 2rem; background-color: white; margin-bottom: 2rem; } 
.wrap article:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.wrap h1 { color: black; font-size: 2.4rem; padding-bottom: 2rem; } 
.wrap h2 { color: #4a65f6; font-size: 1.8rem; padding-bottom: 0.5rem; } 
.wrap .backBtn { position: absolute; right: 40px; top: 40px; width: 60px; height: 60px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; cursor: pointer; color: white; text-align: center; font-size: 0; overflow: hidden; z-index: 1000; } 
.wrap .backBtn:hover { background-color: rgba(0, 0, 0, 0.9); } 
.wrap .backBtn i { font-size: 2rem; line-height: 60px; } 

/* Input */
.input-group { width: 100%; } 
.input-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.input-group .ui-icon { display: inline-block; vertical-align: middle; position: relative; text-indent: -99999px; overflow: hidden; } 
.input-guide { width: 100%; font-size: 1.2rem; color: #FF5C05; margin-top: 0.5rem; line-height: 1.4; padding: 0 0 0 15px; position: relative; } 
.input-guide:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.input-guide:before { content: ''; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; background-image: url('/images/ttFriendship/ui-icons_black_256x240.png'); background-repeat: no-repeat; background-position: -18px -146px; } 

/* Button */
.bttn { display: inline-block; cursor: pointer; vertical-align: middle; outline: 0; border: 0; text-decoration: none; } 
.bttn:hover { text-decoration: none; } 
.bttn.bttn-navy { background-color: #192C4F; color: white; } 
.bttn.bttn-navy:hover { background-color: #070c15; } 
.bttn.bttn-navy:focus { background-color: #070c15; } 
.bttn.bttn-gray { background-color: #4d4d4d; color: white; } 
.bttn.bttn-gray:hover { background-color: #0d0d0d; } 
.bttn.bttn-gray:focus { background-color: #0d0d0d; } 
.bttn.bttn-white { background-color: white; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; color: #4d4d4d; } 
.bttn.bttn-white:hover { background-color: #d9d9d9; } 
.bttn.bttn-white:focus { background-color: #d9d9d9; } 
.bttn.bttn-blue { background: #4a65f6; color: #fff; padding: 10px 15px; font-size: 1.5rem; border-radius: 20px; } 
.txt_area .bttn.bttn-yellow{background: #f9aa00; color: #fff;}
.txt_area .bttn.bttn-yellow:hover{background: #e49c00;transition:all 2s;}
@media (min-width: 600px){
 .bttn.bttn-normal { font-size: 1.4rem; height: 36px; line-height: 36px; padding: 0 1.5rem; } 
}
@media (max-width: 599px){
 .bttn.bttn-normal { font-size: 1.3rem; height: 32px; line-height: 32px; padding: 0 1rem; } 
}

/*checkbox*/
.checkbox-group { width: 100%; } 
.checkbox-group ul,
.checkbox-group li { list-style: none; } 
.checkbox-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.checkbox-group li { float: left; margin: 0 2rem 1rem 0; position: relative; } 
.checkbox-group label { color: #666666; font-size: 1.4rem; cursor: pointer; padding: 0.5rem 0.5rem; border: 1px dotted transparent; float: left; } 
.checkbox-group label span { width: 18px; height: 18px; background-color: #d6dde7; background-image: url('/images/ttFriendship/ui-icons_white_256x240.png'); background-repeat: no-repeat; background-position: -63px -144px; box-shadow: none; border-radius: 0; border: none; margin-right: 0.5rem; float: left; position: relative; } 
.checkbox-group input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
.checkbox-group input:checked ~ label span { background-color: #4a65f6; } 
.checkbox-group input:focus ~ label { border: 1px dotted #999999; } 
.checkbox-group2 { width: 100%; } 
.checkbox-group2 ul,
.checkbox-group2 li { list-style: none; } 
.checkbox-group2:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.checkbox-group2 li { float: left; margin: 0 2rem 1rem 0; position: relative; } 
.checkbox-group2 label { color: #666666; font-size: 1.4rem; cursor: pointer; padding: 1px 0 0 23px; border: 1px dotted transparent; float: left; position: relative; } 
.checkbox-group2 label:before { content: ""; width: 18px; height: 18px; border: 1px solid #888; background-color: #fff; position: absolute; top: 0; left: 0; display: block; } 
.checkbox-group2 input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
.checkbox-group2 input:checked ~ label { color: #dc232d; } 
.checkbox-group2 input:checked ~ label:before { border: 1px solid #dc232d; background-color: #fdf5f4; background-image: url('/images/ttFriendship/ico.png'); background-repeat: no-repeat; background-position: 0 -21px; } 
.checkbox-group2 input:focus ~ label { border: 1px dotted #999999; } 
.checkbox { display: inline-block; width: 20px; height: 20px; vertical-align: middle; } 
.checkbox label { cursor: pointer; padding: 1px; border: 1px dotted transparent; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; display: inline-block; } 
.checkbox label span { width: 18px; height: 18px; background-color: #d6dde7; background-image: url('/images/ttFriendship/ui-icons_white_256x240.png'); background-repeat: no-repeat; background-position: -63px -144px; box-shadow: none; border-radius: 0; border: none; position: relative; display: inline-block; } 
.checkbox input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
.checkbox input:checked ~ label { background-color: #192C4F; } 
.checkbox input:focus ~ label { border: 1px dotted #999999; }

/*radio*/
.radio-group { width: 100%; } 
.radio-group ul,
.radio-group li { list-style: none; } 
.radio-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.radio-group li { float: left; margin: 0 2rem 1rem 0; position: relative; } 
.radio-group label { color: #666666; font-size: 1.4rem; cursor: pointer; padding: 0.5rem 0.5rem; border: 1px dotted transparent; float: left; } 
.radio-group label span { width: 18px; height: 18px; border-radius: 50%; background-color: #d6dde7; box-shadow: none; border: none; margin-right: 0.5rem; float: left; position: relative; } 
.radio-group input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
.radio-group input:checked ~ label span { background-color: #d6dde7; } 
.radio-group input:checked ~ label span:after { content: ''; position: absolute; width: 10px; height: 10px; background-color: #192C4F; border-radius: 50%; left: 4px; top: 4px; } 
.radio-group input:focus ~ label { border: 1px dotted #999999; } 
.radio-group.relationship { width: 100%; } 
.radio-group.relationship ul,
.radio-group.relationship li { list-style: none; } 
.radio-group.relationship:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.radio-group.relationship li { float: left; margin: 0 3rem 1rem 0; position: relative; } 
.radio-group.relationship label { color: #666666; font-size: 1.4rem; cursor: pointer; padding: 0.5rem 0.5rem; border: 1px dotted transparent; float: left; } 
.radio-group.relationship label span { width: 59px; height: 59px; border-radius: 50%; background-color: #eeeeee; box-shadow: none; border: none; margin: 0 auto 20px auto; float: none; position: relative; display: block; } 
.radio-group.relationship label span:after { content: ''; position: absolute; width: 23px; height: 23px; background-color: #fff; border-radius: 50%; left: 18px; top: 18px; } 
.radio-group.relationship input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
.radio-group.relationship input:checked ~ label span { background-color: #4163fc; } 
.radio-group.relationship input:checked ~ label span:after { content: ''; position: absolute; width: 23px; height: 23px; background-color: #fff; border-radius: 50%; left: 18px; top: 18px; } 
.radio-group.relationship input:focus ~ label { border: 1px dotted #999999; } 
@media (max-width: 599px){
 .radio-group.relationship { width: 100%; } 
 .radio-group.relationship ul,
 .radio-group.relationship li { list-style: none; } 
 .radio-group.relationship:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
 .radio-group.relationship li { float: left; margin: 0 0 1rem 0; position: relative; width: 33.3333%; } 
 .radio-group.relationship label { color: #666666; font-size: 1.2rem; cursor: pointer; padding: 0.5rem 0.5rem; border: 1px dotted transparent; float: none!important; } 
 .radio-group.relationship label span { width: 39px; height: 39px; border-radius: 50%; background-color: #eeeeee; box-shadow: none; border: none; margin: 0 auto 10px auto; float: none; position: relative; display: block; } 
 .radio-group.relationship label span:after { content: ''; position: absolute; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; left: 12px; top: 12px; } 
 .radio-group.relationship input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
 .radio-group.relationship input:checked ~ label span { background-color: #4163fc; } 
 .radio-group.relationship input:checked ~ label span:after { content: ''; position: absolute; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; left: 12px; top: 12px; } 
 .radio-group.relationship input:focus ~ label { border: 1px dotted #999999; } 
}

/*input*/
.input-text { width: 100%; position: relative; margin-bottom: 1rem; } 
.input-text ul,
.input-text li { list-style: none; } 
.input-text:last-of-type { margin-bottom: 0; } 
.input-text label { position: absolute; color: #4a65f6; left: 0; top: 0; } 
.input-text input[type="text"],
.input-text input[type="password"] { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.input-text input[type="text"]:focus,
.input-text input[type="password"]:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
.input-text.input-name input { max-width: 150px; } 
.input-text.input-id input { max-width: 300px; } 
.input-text.input-pw input { max-width: 300px; } 
.input-text.input-unit input { max-width: 100px; } 
.input-t { width: 100%; position: relative; } 
.input-t input[type="text"],
.input-t input[type="password"] { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.input-t input[type="text"]:focus,
.input-t input[type="password"]:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
@media (min-width: 600px){
 .input-text { padding: 0 0 0 100px; } 
 .input-text label { height: 36px; line-height: 36px; font-size: 1.4rem; } 
 .input-text input[type="text"],
 .input-text input[type="password"] { height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; } 
 .input-text .bttn { display: inline-block; margin-left: 0.5rem; } 
 .input-text .unit { height: 36px; line-height: 36px; font-size: 1.4rem; margin-left: 0.5rem; } 
 .input-t input[type="text"],
 .input-t input[type="password"] { height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; } 
}
@media (max-width: 599px){
 .input-text { padding: 24px 0 0 0; } 
 .input-text label { height: 24px; line-height: 24px; font-size: 1.3rem; } 
 .input-text input[type="text"],
 .input-text input[type="password"] { height: 32px; padding: 0 5px; line-height: 32px; font-size: 1.3rem; } 
 .input-text .bttn { display: block; margin-top: 0.5rem; } 
 .input-text .unit { height: 24px; line-height: 24px; font-size: 1.3rem; margin-left: 0.5rem; } 
 .input-t input[type="text"],
 .input-t input[type="password"] { height: 32px; padding: 0 5px; line-height: 32px; font-size: 1.3rem; } 
}
.input-textarea { width: 100%; position: relative; } 
.input-textarea ul,
.input-textarea li { list-style: none; } 
.input-textarea label { position: absolute; color: #4a65f6; left: 0; top: 0; } 
.input-textarea textarea { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; line-height: 1.4; } 
.input-textarea textarea:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
@media (min-width: 600px){
 .input-textarea { padding: 0 0 0 100px; } 
 .input-textarea label { line-height: 36px; font-size: 1.4rem; } 
 .input-textarea textarea { padding: 10px; font-size: 1.4rem; } 
}
@media (max-width: 599px){
 .input-textarea { padding: 24px 0 0 0; } 
 .input-textarea label { height: 24px; line-height: 24px; font-size: 1.3rem; } 
 .input-textarea textarea { padding: 5px; font-size: 1.3rem; } 
}

/*select*/
.select-group { width: 100%; position: relative; } 
.select-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.select-group label { position: absolute; color: #4a65f6; left: 0; top: 0; } 
.select-group ul,
.select-group li { list-style: none; } 
.select { position: relative; float: left; width: 100%; } 
.select select { display: inline-block; width: 100%; cursor: pointer; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; appearance: none; -webkit-appearance: none; -moz-appearance: none; } 
.select select::-ms-expand { display: none; } 
.select select:hover,
.select select:focus { color: #4d4d4d; background-color: white; border-color: black; } 
.select select:hover ~ .select-arrow,
.select select:focus ~ .select-arrow { border-top-color: #000; } 
.select .select-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; pointer-events: none; border-style: solid; border-width: 5px 4px 0 4px; border-color: #7b7b7b transparent transparent transparent; padding-right: 1px; } 

/*팝업 셀렉트박스 수정 - 230217 kmj*/
.report1 {width:100%;}
.report1 .modal-dialog { margin: 0 auto; }
.report1 .modal-dialog .modal-body { width: 100%; max-width: 800px; overflow-x: hidden; overflow-y: auto;}
.report1 .modal-dialog .modal-body .popup1 .taC span { width: 150px; }
.report1 .popup1 .taC{display:flex;align-items:center;justify-content:flex-start;gap:8px;letter-spacing:-0.5px;}
@media (min-width:751px){
    .report1 .popup1 .taC { padding-top:0; }
    .report1 .popup1 .select-group .select-arrow { top:58%;transform:translateY(-50%); right: 12px; }
    .report1 .select select { display: inline-block; width: 100%; cursor: pointer; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; appearance: none; -webkit-appearance: none; -moz-appearance: none; } 
    .report1 .popup1 .graph_area { padding-top:58px; } 
}
@media (min-width:751px){
    .select .select-arrow { right:15px; }
}
@media (max-width:750px){
    .report1 .modal-dialog:has(.reportpopup1){width:calc(100% - 20px);}
    .report1 .popup1 { position: relative; }
    .report1 .popup1 .taC { width:100%;position: static; transform: none; margin:30px auto 0;justify-content:center;} 
    .report1 .popup1 .taC span { line-height:25px; } 
    .report1 .popup1 .select-group{ width: 90%; position: static !important;transform: none !important;float:none;}
    .report1 .popup1 .select-group .select{ width:100%; max-width: 700px;}
    .reprort1 .popup1 .select-group .select.report1_select .select-arrow { top: 16px; right: 12px;}
    .report1 .popup1 .select-group .select-arrow { top: 59% !important; }
    .report1 .popup1 .graph_area { padding-top:25px; } 
    .select .select-arrow { right: 12px; } 
}
@media (min-width: 599px){
 .select-group { padding: 0 0 0 110px; } 
 .select-group label { height: 36px; line-height: 36px; font-size: 1.4rem; } 
 .select select { height: 36px; line-height: 36px; font-size: 1.4rem; padding: 0 25px 0 10px; } 
 .select.t3 { max-width: 100px; } 
 .select.t4 { max-width: 150px; } 
 .select.t5 { max-width: 200px; } 
}
@media (max-width: 599px){
 .select-group { padding: 24px 0 0 0; } 
 .select-group label { height: 24px; line-height: 24px; font-size: 1.3rem; } 
 .select select { max-width: 100% !important; height: 32px; line-height: 32px; font-size: 1.3rem; padding: 0 20px 0 10px; } 
}
.selects-group { width: 100%; position: relative; } 
.selects-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.selects-group ul,
.selects-group li { list-style: none; } 
@media (min-width: 600px){
 .selects-group .select { margin-right: 1rem; } 
}
@media (max-width: 599px){
 .selects-group .select { width: 100%; max-width: 100% !important; margin-bottom: 1rem; } 
 .selects-group .select:last-of-type { margin-bottom: 0 !important; } 
}

/*tel*/
.tel-group { width: 100%; position: relative; } 
.tel-group ul,
.tel-group li { list-style: none; } 
.tel-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.tel-group label { position: absolute; color: #4a65f6; left: 0; top: 0; } 
.tel-group input[type="text"] { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.tel-group input[type="text"]:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
.tel-group ul { width: 100%; } 
.tel-group ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.tel-group ul li { position: relative; float: left; } 
.tel-group ul li:after { content: '-'; color: #b3b3b3; position: absolute; right: 0; top: 0; text-align: center; } 
.tel-group ul li:last-child:after { content: ''; width: 0 !important; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
@media (min-width: 600px){
 .tel-group { padding: 0 0 0 100px; } 
 .tel-group label { height: 36px; line-height: 36px; font-size: 1.4rem; } 
 .tel-group input[type="text"] { height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; } 
 .tel-group li { width: 100px; line-height: 36px; font-size: 1.4rem; padding-right: 20px; } 
 .tel-group li:after { width: 20px; line-height: 36px; } 
}
@media (max-width: 599px){
 .tel-group { padding: 24px 0 0 0; } 
 .tel-group label { height: 24px; line-height: 24px; font-size: 1.3rem; } 
 .tel-group input[type="text"] { height: 32px; padding: 0 5px; line-height: 32px; font-size: 1.3rem; } 
 .tel-group li { width: 80px; line-height: 24px; font-size: 1.3rem; padding-right: 16px; } 
 .tel-group li:after { width: 16px; line-height: 32px; } 
}

/*address*/
.address-group { width: 100%; position: relative; } 
.address-group ul,
.address-group li { list-style: none; } 
.address-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.address-group label { position: absolute; color: #4a65f6; left: 0; top: 0; } 
.address-group input[type="text"] { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.address-group input[type="text"]:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
.address-group input.readonly { border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; background-color: #f2f2f2; } 
.address-group input.readonly:focus { border: 1px solid #e0e0e0 !important; border: 1px solid #d9d9d9 !important; -moz-box-shadow: inset 0 0 0 0 black; -webkit-box-shadow: inset 0 0 0 0 black; box-shadow: inset 0 0 0 0 black; } 
.address-group ul { width: 100%; } 
.address-group ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.address-group ul li { position: relative; width: 100%; margin-bottom: 0.5rem; } 
.address-group ul li:last-child { margin-bottom: 0 !important; } 
@media (min-width: 600px){
 .address-group { padding: 0 0 0 100px; } 
 .address-group label { height: 36px; line-height: 36px; font-size: 1.4rem; } 
 .address-group input[type="text"] { height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; } 
}
@media (max-width: 599px){
 .address-group { padding: 24px 0 0 0; } 
 .address-group label { height: 24px; line-height: 24px; font-size: 1.3rem; } 
 .address-group input[type="text"] { height: 32px; padding: 0 5px; line-height: 32px; font-size: 1.3rem; } 
}

/*email*/
.email-group { width: 100%; position: relative; } 
.email-group ul,
.email-group li { list-style: none; } 
.email-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.email-group label { position: absolute; color: #4a65f6; left: 0; top: 0; } 
.email-group input[type="text"] { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.email-group input[type="text"]:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
.email-group input.readonly { border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; background-color: #f2f2f2; } 
.email-group input.readonly:focus { border: 1px solid #e0e0e0 !important; border: 1px solid #d9d9d9 !important; -moz-box-shadow: inset 0 0 0 0 black; -webkit-box-shadow: inset 0 0 0 0 black; box-shadow: inset 0 0 0 0 black; } 
.email-group ul { width: 100%; } 
.email-group ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.email-group ul li { position: relative; width: 100%; } 
.email-group ul li:first-child { position: relative; } 
.email-group ul li:first-child:after { content: '@'; position: absolute; right: 0; top: 0; text-align: center; color: #b3b3b3; } 
@media (min-width: 600px){
 .email-group { padding: 0 0 0 100px; } 
 .email-group label { height: 36px; line-height: 36px; font-size: 1.4rem; } 
 .email-group input[type="text"] { height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; } 
 .email-group ul li { float: left; } 
 .email-group ul li:first-child { padding-right: 20px; width: 150px; } 
 .email-group ul li:first-child:after { width: 20px; font-size: 1.4rem; line-height: 36px; } 
 .email-group ul li:nth-child(2) { width: 150px; padding-right: 1rem; } 
 .email-group ul li:last-child { width: 120px; } 
}
@media (max-width: 599px){
 .email-group { padding: 24px 0 0 0; } 
 .email-group label { height: 24px; line-height: 24px; font-size: 1.3rem; } 
 .email-group input[type="text"] { height: 32px; padding: 0 5px; line-height: 32px; font-size: 1.3rem; } 
 .email-group ul { width: 100%; } 
 .email-group ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
 .email-group ul li { margin-bottom: 0.5rem; } 
 .email-group ul li:first-child { padding-right: 20px; } 
 .email-group ul li:first-child:after { width: 20px; font-size: 1.4rem; line-height: 32px; } 
 .email-group ul li:last-child { margin-bottom: 0 !important; } 
}

/*file*/
.file-group { width: 100%; position: relative; } 
.file-group ul,
.file-group li { list-style: none; } 
.file-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.file-group .filebox { display: inline-block; } 
.file-group .filebox label { display: inline-block; height: 36px; line-height: 36px; font-size: 1.4rem; padding: 0 40px 0 40px; vertical-align: middle; background-color: white; cursor: pointer; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; color: #666666; } 
.file-group .filebox label em { position: relative; font-style: normal; } 
.file-group .filebox label:hover { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; color: black; } 
.file-group .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } 
.file-group .file_text { font-size: 1.4rem; vertical-align: middle; color: #cccccc; } 
.file-group .file_list { width: 100%; padding-top: 15px; } 
.file-group .file_list li { width: 100%; font-size: 1.4rem; color: #333333; display: block; overflow: hidden; height: 19px; line-height: 19px; font-family: '돋움', serif; } 
.file-group .file_list li a { display: inline-block; text-decoration: none; vertical-align: top; } 
.file-group .file_list li a:not(.file_name) { width: 10px; height: 100%; background-image: url('/images/ttFriendship/file_close.png'); background-repeat: no-repeat; background-position: center left; display: inline-block; margin-right: 4px; padding-left: 15px; } 
@media (min-width: 600px){
 .file_text { display: inline-block; padding-left: 20px; height: 36px; line-height: 36px; } 
}
@media (max-width: 599px){
 .file_text { display: block; padding-top: 5px; height: 19px; line-height: 19px; } 
}

/*search*/
.search-group { width: 100%; position: relative; } 
.search-group ul,
.search-group li { list-style: none; } 
.search-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.search-group input[type="text"] { width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.search-group input[type="text"]:focus { border: 1px solid black; -moz-box-shadow: inset 0 0 0 1px black; -webkit-box-shadow: inset 0 0 0 1px black; box-shadow: inset 0 0 0 1px black; } 
.search-group ul { width: 100%; } 
.search-group ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
@media (min-width: 600px){
 .search-group input[type="text"] { height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; } 
 .search-group ul li { float: left; } 
 .search-group ul li:first-child { padding-right: 0.5rem; width: 120px; } 
 .search-group ul li:nth-child(2) { width: 200px; padding-right: 0.5rem; } 
}
@media (max-width: 599px){
 .search-group input[type="text"] { height: 32px; padding: 0 5px; line-height: 32px; font-size: 1.3rem; } 
 .search-group ul li { float: left; } 
 .search-group ul li:first-child { padding-right: 0.5rem; width: 90px; } 
 .search-group ul li:nth-child(2) { width: 140px; padding-right: 0.5rem; } 
}

/*Pagination*/
.pagination-wrap { text-align: center; } 
.pagination-wrap ul,
.pagination-wrap li { list-style: none; } 
.pagination-wrap a { display: inline-block; overflow: hidden; width: 40px; height: 40px; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; line-height: 37px; font-size: 1.5rem; margin: 0 0 0 -1px !important; padding: 0 !important; text-align: center; color: #666666; text-decoration: none; vertical-align: middle; font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; background-color: white; } 
.pagination-wrap a:hover { color: black; font-weight: bold; background-color: #f7f7f7; } 
.pagination-wrap a.pg_arr { text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; background-image: url('/images/ttFriendship/pagination.png'); background-repeat: no-repeat; } 
.pagination-wrap a.pg_first { background-position: 0 0; } 
.pagination-wrap a.pg_prev { background-position: -40px 0; } 
.pagination-wrap a.pg_next { background-position: -80px 0; } 
.pagination-wrap a.pg_last { background-position: -120px 0; } 
.pagination-wrap .pagination-desktop { display: inline-block; margin: 0 auto; padding-left: 1px; margin: 1rem; } 
.pagination-wrap .pagination-desktop a.pg_active { background-color: #666666; color: white; border: 1px solid #666666; } 
.pagination-wrap .pagination-mobile { display: inline-block; margin: 0 auto; padding-left: 1px; margin: 1rem; } 
.pagination-wrap .pagination-mobile .pg_now { display: inline-block; overflow: hidden; width: 80px; height: 40px; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; line-height: 37px; font-size: 1.5rem; margin: 0 0 0 -1px !important; padding: 0 !important; text-align: center; color: #666666; text-decoration: none; vertical-align: middle; font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; } 
@media (min-width: 700px){
 .pagination-wrap .pagination-mobile { display: none !important; } 
}
@media (max-width: 699px){
 .pagination-wrap .pagination-desktop { display: none !important; } 
}
.datepicker-group { display: inline-block; position: relative; } 
.datepicker-group ul,
.datepicker-group li { list-style: none; } 
.datepicker-group .input-type { width: 100%; max-width: 120px; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; position: relative; background-image: url('/images/ttFriendship/icon-calendar.png'); background-repeat: no-repeat; display: block; font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; color: #4d4d4d; } 
@media (min-width: 600px){
 .datepicker-group .input-type { height: 36px; padding: 0 35px 0 10px; line-height: 36px; background-position: right 3px; font-size: 1.4rem; } 
}
@media (max-width: 599px){
 .datepicker-group .input-type { height: 32px; padding: 0 35px 0 5px; line-height: 32px; background-position: right 1px; font-size: 1.3rem; } 
}

/*toggle*/
.toggle-buttons ul,
.toggle-buttons li { list-style: none; } 
.toggle-buttons ul { width: 100%; } 
.toggle-buttons ul li { width: 100%; margin-bottom: 1.5rem; } 
.toggle-buttons .bttn-toggle { width: 100px; height: 50px; line-height: 50px; display: inline-block; background-color: #666666; font-size: 1.5rem; cursor: pointer; color: white; } 
.toggle-buttons .bttn-toggle.active { background-color: #4a65f6; } 
.toggle-buttons .bttn-toggle.active span { display: none; } 
.toggle-buttons .bttn-toggle.active:after { content: '오프라인'; } 
.toggle-button-onoff ul,
.toggle-button-onoff li { list-style: none; } 
.toggle-button-onoff ul { width: 100%; } 
.toggle-button-onoff ul li { width: 100%; margin-bottom: 1.5rem; } 
.toggle-button-onoff .bttn-bg { transition: ease 0.3s; width: 100px; height: 40px; border-radius: 100px; background-color: #666666; cursor: pointer; position: relative; } 
.toggle-button-onoff .bttn-bg:after { content: 'off'; line-height: 40px; color: black; font-size: 1.6rem; position: absolute; left: 110px; top: 0; color: #666666; } 
.toggle-button-onoff .bttn-bg .toggle-indicator { width: 36px; height: 36px; display: block; position: absolute; top: 2px; left: 2px; transition: ease 0.3s; border-radius: 50%; background-color: white; } 
.toggle-button-onoff .bttn-bg.active { transition: ease 0.3s; background-color: #4a65f6; } 
.toggle-button-onoff .bttn-bg.active:after { content: 'on'; line-height: 40px; color: #4a65f6; font-size: 1.6rem; position: absolute; left: 110px; top: 0; } 
.toggle-button-onoff .bttn-bg.active .toggle-indicator { transition: ease 0.3s; top: 2px; left: 62px; } 
.toggle { width: 60px; height: 40px; border-radius: 100px; background-color: #ddd; overflow: hidden; box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05); position: relative; } 
.toggle .check { position: absolute; left: 0; top: 0; display: block; cursor: pointer; width: 100%; height: 100%; opacity: 0; z-index: 10; } 
.toggle .switch { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 22px; display: block; background-color: #fff; border-radius: 36px; z-index: 1; transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0s, 0.05s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 
.toggle .track { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05); border-radius: 40px; z-index: 0; } 
.toggle .check:checked ~ .track { box-shadow: inset 0 0 0 20px #dc232d; } 
.toggle .check:checked ~ .switch { right: 2px; left: 22px; transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0.05s, 0s; } 

/*Calendar*/
.calendar-small { float: left; position: relative; width: 100%; max-width: 300px; padding: 15px; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.calendar-small ul,
.calendar-small li { list-style: none; } 
.calendar-small:before { display: block; position: absolute; top: 55px; left: 0; width: 100%; height: 32px; background-color: #4a65f6; content: ''; } 
.calendar-small .mm { width: 100%; text-align: center; height: 30px; margin-bottom: 10px; position: relative; } 
.calendar-small .mm strong { position: absolute; width: 100%; left: 0; top: 0; color: #4a65f6; font-size: 2rem; font-weight: bold; text-align: center; letter-spacing: -0.025em; padding-bottom: 0.5rem; line-height: 30px; } 
.calendar-small .mm .mm-arr { display: block; position: relative; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; width: 30px; height: 30px; background-image: url('/images/ttFriendship/month-arr.png'); background-repeat: no-repeat; border-radius: 50%; cursor: pointer; } 
.calendar-small .mm .mm-arr.mm-prev { background-position: 0 0; float: left; } 
.calendar-small .mm .mm-arr.mm-next { background-position: -30px 0; float: right; } 
.calendar-small .mm .mm-arr:hover { background-color: #e6e6e6; } 
.calendar-small .mm .mm-arr:focus { background-color: #e6e6e6; } 
.calendar-small .calendar-table-small { table-layout: fixed; border-collapse: collapse; border-spacing: 0; position: relative; width: 100%; } 
.calendar-small .calendar-table-small thead th { height: 32px; text-align: center; color: white; font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.3rem; } 
.calendar-small .calendar-table-small tbody td { padding: 6px 5px; text-align: center; font-size: 1.2rem; color: #666666; line-height: 26px; } 
.calendar-small .calendar-table-small tbody td .sch { width: 100%; display: block; position: relative; line-height: 26px; margin: 0 !important; padding: 0 !important; } 
.calendar-small .calendar-table-small tbody td .sch:before { display: block; position: absolute; right: 0; bottom: -3px; left: 0; width: 100%; width: 6px; height: 6px; border-radius: 50%; margin: 0 auto; background-color: #FF5C05; content: ''; } 
.calendar-small .calendar-table-small tbody td .accessibility { text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.calendar-big { float: left; position: relative; width: 100%; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; } 
.calendar-big ul,
.calendar-big li { list-style: none; } 
.calendar-big .mm { width: 100%; height: 30px; position: relative; } 
.calendar-big .mm strong { position: absolute; width: 100%; left: 0; top: 0; padding: 0 40px; display: block; color: #4a65f6; font-size: 2.8rem; font-weight: bold; text-align: center; letter-spacing: -0.025em; line-height: 30px; } 
.calendar-big .mm .mm-arr { display: block; position: relative; cursor: pointer; height: 30px; line-height: 30px; } 
.calendar-big .mm .mm-arr i { display: block; background-image: url('/images/ttFriendship/month-arr.png'); background-repeat: no-repeat; position: absolute; top: 0; width: 30px; height: 30px; overflow: hidden; } 
.calendar-big .calendar-table-big { table-layout: fixed; border-collapse: collapse; border-spacing: 0; position: relative; width: 100%; } 
.calendar-big .calendar-table-big thead th { border-top: 3px solid #666666; border-bottom: 2px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; font-weight: normal; text-align: center; line-height: 1.5; vertical-align: middle; background-color: #fafafa; } 
.calendar-big .calendar-table-big thead .sun { color: #FF5C05; } 
.calendar-big .calendar-table-big thead .sat { color: #4a65f6; } 
.calendar-big .calendar-table-big tbody td { position: relative; border: 1px solid #d9d9d9; line-height: 1.5; color: #666666; vertical-align: top; text-align: center; } 
.calendar-big .calendar-table-big tbody td.off p { color: #d9d9d9 !important; } 
.calendar-big .calendar-table-big tbody td p { width: 100%; padding: 0; font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; text-align: left; } 
.calendar-big .calendar-table-big tbody td.sun p { color: #FF5C05; } 
.calendar-big .calendar-table-big tbody td.sat p { color: #4a65f6; } 
.calendar-big .calendar-table-big tbody td a { margin: 0 auto; display: inline-block; } 
.calendar-big .calendar-table-big tbody td a .able { background-color: #0d643a; color: white; } 
.calendar-big .calendar-table-big tbody td a .unable { color: white; } 
.calendar-big .calendar-table-big tbody td .holiday { margin: 0 auto; display: inline-block; color: #FF5C05; } 
@media (min-width: 700px){
 .calendar-big { max-width: 900px; padding: 3rem; } 
 .calendar-big .mm { margin: 0.5rem 0 3rem 0; } 
 .calendar-big .mm strong { font-size: 2.8rem; } 
 .calendar-big .mm .mm-arr { width: 80px; border-radius: 4px; border: 1px solid #e0e0e0; border: 1px solid #d9d9d9; font-size: 1.3rem; text-align: left; } 
 .calendar-big .mm .mm-arr.mm-prev { float: left; padding: 0 0 0 30px; } 
 .calendar-big .mm .mm-arr.mm-prev i { background-position: 0 0 !important; left: 0; } 
 .calendar-big .mm .mm-arr.mm-next { float: right; padding: 0 0 0 10px; } 
 .calendar-big .mm .mm-arr.mm-next i { background-position: -30px 0 !important; right: 0; } 
 .calendar-big .mm .mm-arr:hover { border: 1px solid black; } 
 .calendar-big .mm .mm-arr:focus { border: 1px solid black; } 
 .calendar-big .calendar-table-big thead th { padding: 10px 5px; font-size: 1.6rem; } 
 .calendar-big .calendar-table-big tbody td { height: 99px; padding: 8px; } 
 .calendar-big .calendar-table-big tbody td p { font-size: 1.4rem; margin: 0 0 15px 0; } 
 .calendar-big .calendar-table-big tbody td a { font-size: 1.2rem; } 
 .calendar-big .calendar-table-big tbody td a span { padding: 8px 10px; border-radius: 5px; } 
 .calendar-big .calendar-table-big tbody td a .unable { background-color: #4d4d4d; } 
 .calendar-big .calendar-table-big tbody td .holiday { font-size: 1.2rem; } 
}
@media (max-width: 699px){
 .calendar-big { padding: 1.5rem; } 
 .calendar-big .mm { margin: 0.5rem 0 1rem 0; } 
 .calendar-big .mm strong { font-size: 2rem; } 
 .calendar-big .mm .mm-arr { text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; width: 30px; border-radius: 50%; } 
 .calendar-big .mm .mm-arr.mm-prev { float: left; } 
 .calendar-big .mm .mm-arr.mm-prev i { background-position: 0 0; } 
 .calendar-big .mm .mm-arr.mm-next { float: right; } 
 .calendar-big .mm .mm-arr.mm-next i { background-position: -30px 0; } 
 .calendar-big .mm .mm-arr:hover { background-color: #e6e6e6; } 
 .calendar-big .mm .mm-arr:focus { background-color: #e6e6e6; } 
 .calendar-big .calendar-table-big thead th { padding: 3px; font-size: 1.4rem; } 
 .calendar-big .calendar-table-big tbody td { height: 49px; padding: 3px; } 
 .calendar-big .calendar-table-big tbody td p { font-size: 1.2rem; margin: 0 0 5px 0; } 
 .calendar-big .calendar-table-big tbody td a { font-size: 1.2rem; } 
 .calendar-big .calendar-table-big tbody td a span { width: 10px; height: 10px; border-radius: 50%; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; display: block; } 
 .calendar-big .calendar-table-big tbody td a .unable { background-color: #FF5C05; } 
 .calendar-big .calendar-table-big tbody td .holiday { font-size: 1rem; letter-spacing: -0.025em; } 
}

/*Board*/
.bbs-w { width: 100%; max-width: 900px; } 
.bbs-w:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-w .pagination-wrap { margin-top: 1rem; } 
.bbs-top { width: 100%; } 
.bbs-top:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-top ul,
.bbs-top li,
.bbs-top dl,
.bbs-top dt,
.bbs-top dd,
.bbs-top ol { list-style: none; } 
.bbs-top .bbs-total { font-size: 1.3rem; color: #666666; } 
.bbs-top .bbs-total strong { color: #4a65f6; } 
.bbs-top .bbs-search { float: right; } 
.bbs-guide { width: 100%; } 
.bbs-guide ul,
.bbs-guide li { list-style: none; } 
.bbs-guide ul { width: 100%; } 
.bbs-guide ul li { width: 100%; margin-bottom: 0.5rem; font-size: 1.3rem; color: #666666; line-height: 1.6em; padding-left: 10px; position: relative; } 
.bbs-guide ul li:before { content: "-"; position: absolute; left: 0; top: 0; color: #FF5C05; font-size: 1.4rem; } 
.bbs-guide ul strong { color: #FF5C05 !important; font-weight: 400; } 
.bbs-bttns { width: 100%; margin-top: 1.5rem; } 
.bbs-bttns:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-bttns .L { float: left; } 
.bbs-bttns .L .bttn { margin-right: 1rem; } 
.bbs-bttns .R { float: right; } 
.bbs-bttns .R .bttn { margin-left: 1rem; } 
.bbs-bttns.tp { margin: 1rem 0 !important; } 
.bbs-bttns.ct { margin:20px auto; text-align:center; } 
@media (min-width: 600px){
 .bbs-top { padding-bottom: 1.5rem; } 
 .bbs-top .bbs-total { float: left; padding-top: 20px; } 
}
@media (max-width: 599px){
 .bbs-top { padding-bottom: 1rem; } 
 .bbs-top .bbs-total { width: 100%; float: left; padding-top: 10px; } 
}

/*게시판 리스트*/
.bbs-list i.new { width: 10px; height: 10px; background-image: url('/images/ttFriendship/new.png'); background-repeat: no-repeat; background-size: 10px auto; background-position: 0 0; display: inline-block; margin-left: 5px; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-list i.lock { width: 10px; height: 10px; background-image: url('/images/ttFriendship/lock.png'); background-repeat: no-repeat; background-size: 10px auto; background-position: 0 0; display: inline-block; margin-right: 5px; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-list i.reply { width: 17px; height: 11px; background-image: url('/images/ttFriendship/reply.png'); background-repeat: no-repeat; background-size: 17px auto; background-position: 0 0; display: inline-block; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-list table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; border-top: 2px solid #192C4F; border-bottom: 2px solid #192C4F; } 
.bbs-list table th,
.bbs-list table td { text-align: center; font-size: 1.4rem; } 
.bbs-list table th a,
.bbs-list table td a { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; width: 100%; } 
.bbs-list table th { background-color: #f5f5f5; color: #192C4F; padding: 8px 5px; line-height: 1.5; font-weight: 400; border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e0e0e0; } 
.bbs-list table td { background-color: white; color: #4d4d4d; padding: 8px 5px; line-height: 1.5; border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e0e0e0; word-break: break-all; } 
.bbs-list table td.col_num { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.3rem; } 
.bbs-list table td.col_name { font-size: 1.3rem; } 
.bbs-list table td.col_gender { font-size: 1.3rem; } 
.bbs-list table td.col_id,
.bbs-list table td.col_birth { font-family: 'Roboto'; font-size: 1.3rem; } 
.bbs-list table td.col_ttl { text-align: left !important; } 
.bbs-list table td.col_date { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.3rem; } 
.bbs-list table td.col_view { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.3rem; } 
.bbs-list table td.col_file { font-size: 1.6rem; } 
.bbs-list table td.col_date_date { font-family: 'Roboto'; } 
.bbs-list table td.col_surveytype { text-align: left !important; } 
.bbs-list table a { text-decoration: none; font-size: 1.3rem; line-height: 1.5; vertical-align: middle; } 
.bbs-list table a:hover { text-decoration: underline; color: #4d4d4d; } 
@media (min-width: 600px){
 .bbs-list th.col_num { width: 60px !important; } 
 .bbs-list th.col_gender { width: 60px !important; } 
 .bbs-list th.col_date { width: 100px !important; } 
 .bbs-list th.col_view { width: 60px !important; } 
 .bbs-list th.col_file { width: 60px !important; } 
 .bbs-list th.col_birth { width: 150px !important; } 
 .bbs-list span.label { display: none; } 
}
@media (max-width: 599px){
 .bbs-list thead { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list thead th { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list td.col_num { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list td.col_ttl { display: block; width: 100%; border-bottom: 1px dotted #cccccc; background-color: #f5f5f5; } 
 .bbs-list td.col_schname { display: block; width: 100%; border-bottom: 1px dotted #cccccc; background-color: #f5f5f5; } 
 .bbs-list td.col_address { display: block; width: 100%; border-bottom: 1px dotted #cccccc; } 
 .bbs-list td.col_date { float: left; display: block; width: 33.33%; height: 40px; text-align: left; } 
 .bbs-list td.col_view { float: left; display: block; width: 33.33%; height: 40px; text-align: left; } 
 .bbs-list td.col_name { float: left; display: block; width: 50%; height: 40px; text-align: left; } 
 .bbs-list td.col_id,
 .bbs-list td.col_gender,
 .bbs-list td.col_status2,
 .bbs-list td.col_birth,
 .bbs-list td.col_overlapping { float: left; display: block; width: 50%; height: 40px; text-align: left; } 
 .bbs-list span.label { font-size: 1.2rem; padding-right: 5px; color: #4a65f6; } 
}
@media all and (min-width: 1000px){
 .bbs-list.svmng_tb th.col_num { width: 60px !important; } 
 .bbs-list.svmng_tb th.col_surveytype { width: 200px !important; } 
 .bbs-list.svmng_tb th.col_date_date { width: 200px !important; } 
 .bbs-list.svmng_tb th.col_url { min-width: 200px !important; } 
 .bbs-list.svmng_tb th.col_mngname { width: 180px !important; } 
 .bbs-list.svmng_tb th.col_status { width: 100px !important; } 
 .bbs-list.svmng_tb th.col_name { width: 150px !important; } 
 .bbs-list.svmng_tb td.col_mngname { color: #4163fc; font-size: 1.4rem; } 
 .bbs-list.svmng_tb td.col_mngname:hover { text-decoration: underline; } 
 .bbs-list.svmng_tb td.col_name { width: 150px !important; } 
 .bbs-list.svmng_tb td.col_name button { color: #4163fc; font-size: 1.4rem; } 
 .bbs-list.svmng_tb td.col_name button:hover { text-decoration: underline; } 
 .bbs-list.stdjoin_tb th.col_num { width: 60px !important; } 
 .bbs-list.stdjoin_tb th.col_name { width: 200px !important; } 
}
@media (min-width: 800px) and (max-width: 999px){
 .bbs-list.svmng_tb th.col_num { width: 60px !important; } 
 .bbs-list.svmng_tb th.col_surveytype { width: 180px !important; } 
 .bbs-list.svmng_tb th.col_date_date { width: 90px !important; } 
 .bbs-list.svmng_tb th.col_url { width: unset !important; } 
 .bbs-list.svmng_tb th.col_mngname { width: unset !important; } 
 .bbs-list.svmng_tb th.col_status { width: 100px !important; } 
 .bbs-list.svmng_tb th.col_name { width: 120px !important; } 
 .bbs-list.svmng_tb span.label { display: none; } 
}
@media all and (max-width: 799px){
 .bbs-list.svmng_tb thead {display:none; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list.svmng_tb thead th {display:none; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list.svmng_tb td {text-align:left;} 
 .bbs-list.svmng_tb td.col_num {display: none; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list.svmng_tb td.col_surveytype { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.svmng_tb td.col_date_date { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.svmng_tb td.col_mngname { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.svmng_tb td.col_url { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.svmng_tb td.col_status { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.svmng_tb td.col_name { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.svmng_tb span.label { width: 80px; display: inline-block; font-size: 1.2rem; padding-right: 5px; color: #4a65f6; } 
 .bbs-list.stdjoin_tb thead { display: none; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list.stdjoin_tb thead th { display: none; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list.stdjoin_tb td { text-align: left; } 
 .bbs-list.stdjoin_tb td.col_num { display: none; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list.stdjoin_tb td.col_name { display: block; width: 100%; border-bottom: 1px dotted #cccccc; background-color: #f5f5f5; text-align: center; } 
 .bbs-list.stdjoin_tb td.col_status_2 { float: left; display: block; width: 100%; border-bottom: 1px dotted #cccccc; background: #fff; } 
 .bbs-list.stdjoin_tb span.label { width: 130px; display: inline-block; font-size: 1.2rem; padding-right: 5px; color: #4a65f6; } 
}

/*게시판 상세보기*/
.bbs-view { width: 100%; } 
.bbs-view table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; border-top: 2px solid #192C4F; border-bottom: 1px solid #e0e0e0; } 
.bbs-view table tr { border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e0e0e0; } 
.bbs-view table tr th { color: #4a65f6; padding: 8px 5px; line-height: 1.5; font-weight: 400; text-align: center; font-size: 1.4rem; } 
.bbs-view table tr td { color: #4d4d4d; padding: 8px 5px; line-height: 1.5; text-align: left; font-size: 1.4rem; background-color: white; word-break: break-word; } 
.bbs-view table tr td.td_file ul,
.bbs-view table tr td.td_file li { list-style: none; } 
.bbs-view table tr td.td_file a { font-size: 1.3rem; } 
.bbs-view table tr td.td_file li { padding: 2px 0 2px 19px; background-image: url('/images/ttFriendship/clip.png'); background-repeat: no-repeat; background-size: 14px auto; background-position: 0 6px; } 
.bbs-view table a { text-decoration: none; } 
.bbs-view table a:hover { text-decoration: underline; color: #4d4d4d; } 
.bbs-con { width: 100%; padding: 1.5rem; border-bottom: 2px solid #e0e0e0; line-height: 1.5; font-size: 1.4rem; text-align: left; } 
@media (min-width: 600px){
 .bbs-view th { width: 200px !important; background-color: #f5f5f5; } 
 .bbs-view td.td_date { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.5rem; } 
 .bbs-view td.td_view { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.5rem; } 
}
@media (max-width: 599px){
 .bbs-view tr { border: none !important; } 
 .bbs-view th { width: 100% !important; font-size: 1.2rem; display: block; text-align: left !important; padding: 8px 5px 0 5px !important; } 
 .bbs-view td { width: 100%; font-size: 1.3rem; display: block; text-align: left !important; border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e0e0e0; } 
}

/*게시판 등록*/
.bbs-write { width: 100%; } 
.bbs-write ul,
.bbs-write li { list-style: none; } 
.bbs-write .blind { text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; width: 1px; height: 1px; margin: -1px; } 
.bbs-write table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; border-top: 2px solid #192C4F; border-bottom: 2px solid #e0e0e0; } 
.bbs-write table tr { border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e0e0e0; } 
.bbs-write table tr th { color: #4a65f6; padding: 8px 5px; line-height: 1.5; font-weight: 400; text-align: center; font-size: 1.4rem; } 
.bbs-write table tr td { color: #4d4d4d; padding: 8px 5px; line-height: 1.5; text-align: left; font-size: 1.4rem; background-color: white; } 
.bbs-write table .radio-group li { margin: 0 1rem 0 0 !important; } 
.bbs-write table .input-aaa { max-width: 120px; } 
.bbs-write table .input-bbb { max-width: 150px; } 
.bbs-write table .input-ccc { max-width: 500px; } 
.bbs-write .td_contents { width: 100%; padding: 1.5rem; border-bottom: 2px solid #e0e0e0; } 
.bbs-write .inp_file { margin-bottom: 5px; } 
@media (min-width: 600px){
 .bbs-write th { width: 160px !important; background-color: #f5f5f5; } 
 .bbs-write td.td_date { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.5rem; } 
 .bbs-write td.td_view { font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica"; font-size: 1.5rem; } 
}
@media (max-width: 599px){
 .bbs-write tr { border: none !important; } 
 .bbs-write th { width: 100% !important; font-size: 1.2rem; display: block; text-align: left !important; padding: 8px 5px 0 5px !important; } 
 .bbs-write td { width: 100%; font-size: 1.2rem; display: block; text-align: left !important; border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e0e0e0; } 
}

/*게시판 리스트 v2*/
.bbs-list-d2 ul,
.bbs-list-d2 li { list-style: none; } 
.bbs-list-d2 i.new { width: 10px; height: 10px; background-image: url('/images/ttFriendship/new.png'); background-repeat: no-repeat; background-size: 10px auto; background-position: 0 0; display: inline-block; margin: 0 5px; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-list-d2 i.lock { width: 10px; height: 10px; background-image: url('/images/ttFriendship/lock.png'); background-repeat: no-repeat; background-size: 10px auto; background-position: 0 0; display: inline-block; margin: 0 5px; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-list-d2 i.reply { width: 17px; height: 11px; background-image: url('/images/ttFriendship/reply.png'); background-repeat: no-repeat; background-size: 17px auto; background-position: 0 0; display: inline-block; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-list-d2 ul { width: 100%; } 
.bbs-list-d2 ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-list-d2 ul li { width: 100%; margin-bottom: 1rem; } 
.bbs-list-d2 ul li:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-list-d2 ul li a { width: 100%; float: left; border: 1px solid #d9d9d9; } 
.bbs-list-d2 ul li a:hover { border: 1px solid #FF5C05; -moz-box-shadow: inset 0 0 0 1px #FF5C05; -webkit-box-shadow: inset 0 0 0 1px #FF5C05; box-shadow: inset 0 0 0 1px #FF5C05; } 
.bbs-list-d2 ul li p { float: left; font-size: 1.5rem; color: #595959; } 
@media (min-width: 800px){
 .bbs-list-d2 ul li p { line-height: 1.2; margin: 1.5rem 0; } 
 .bbs-list-d2 ul li p.no { width: 8%; text-align: center; } 
 .bbs-list-d2 ul li p.no .label { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list-d2 ul li p.title { width: 70%; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; color: black; letter-spacing: -0.04em; padding: 0 10px; } 
 .bbs-list-d2 ul li p.date { width: 12%; } 
 .bbs-list-d2 ul li p.date i { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .bbs-list-d2 ul li p.view { width: 10%; padding: 0 10px; text-align: center; } 
 .bbs-list-d2 ul li p.view i { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
}
@media (max-width: 799px){
 .bbs-list-d2 ul li a { padding: 0.6rem 0; } 
 .bbs-list-d2 ul li p { line-height: 1.2; margin: 0.6rem 0; } 
 .bbs-list-d2 ul li p.no { width: 100%; font-size: 1.3rem; padding: 0 10px; } 
 .bbs-list-d2 ul li p.no .label { font-size: 1.3rem; } 
 .bbs-list-d2 ul li p.title { width: 100%; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; color: black; letter-spacing: -0.04em; padding: 0 10px; } 
 .bbs-list-d2 ul li p.date { width: 50%; padding: 0 10px; font-size: 1.3rem; } 
 .bbs-list-d2 ul li p.date i { margin-right: 5px; color: #999999; } 
 .bbs-list-d2 ul li p.view { width: 50%; padding: 0 10px; font-size: 1.3rem; } 
 .bbs-list-d2 ul li p.view i { margin-right: 5px; color: #999999; } 
}

/* 게시판 상세보기 v2*/
.bbs-view-d2 ul,
.bbs-view-d2 li { list-style: none; } 
.bbs-view-d2 i.new { width: 10px; height: 10px; background-image: url('/images/ttFriendship/new.png'); background-repeat: no-repeat; background-size: 10px auto; background-position: 0 0; display: inline-block; margin: 0 5px; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-view-d2 i.lock { width: 10px; height: 10px; background-image: url('/images/ttFriendship/lock.png'); background-repeat: no-repeat; background-size: 10px auto; background-position: 0 0; display: inline-block; margin: 0 5px; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-view-d2 i.reply { width: 17px; height: 11px; background-image: url('/images/ttFriendship/reply.png'); background-repeat: no-repeat; background-size: 17px auto; background-position: 0 0; display: inline-block; vertical-align: middle; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.bbs-view-d2 ul { width: 100%; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; padding: 1.5rem; } 
.bbs-view-d2 ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-view-d2 ul li { float: left; } 
.bbs-view-d2 ul li.title { width: 100%; color: black; font-size: 1.8rem; line-height: 1.4; padding-bottom: 1rem; } 
.bbs-view-d2 ul li.date { width: 50%; font-size: 1.4rem; color: #4d4d4d; } 
.bbs-view-d2 ul li.date i { margin-right: 5px; color: #999999; } 
.bbs-view-d2 ul li.view { width: 50%; font-size: 1.4rem; color: #4d4d4d; } 
.bbs-view-d2 ul li.view i { margin-right: 5px; color: #999999; } 
.bbs-con-d2 { width: 100%; padding: 1.5rem; border-bottom: 1px solid #d9d9d9; line-height: 1.5; font-size: 1.4rem; text-align: left; } 
.bbs-file { width: 100%; padding: 1.5rem; border-bottom: 1px solid #d9d9d9; } 
.bbs-file ul { width: 100%; } 
.bbs-file ul ul,
.bbs-file ul li { list-style: none; } 
.bbs-file ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.bbs-file ul li { float: left; padding-right: 1.5rem; } 
.bbs-file ul li a { font-size: 1.3rem; padding: 0 15px; line-height: 30px; color: #4a65f6; background-color: #f2f2f2; border: 1px solid #e0e0e0; display: block; border-radius: 4px; text-decoration: none; } 
.bbs-file ul li a:hover { color: white; background-color: #4a65f6; border: 1px solid #4a65f6; } 

/*Modal Popup*/
.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); display: none; z-index: 1000; cursor: pointer; } 
.modalpopup-group { width: 100%; position: relative; } 
.modalpopup-group ul,
.modalpopup-group li { list-style: none; } 
.modalpopup-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.modalpopup-group .modalPop_wrap { position: fixed; padding: 10px; width: 100%; max-width: 800px; min-width: 360px; display: none; z-index: 1001; } 
.modalpopup-group .modalPop_wrap.reportpopup2 { position: relative !important; } 
.modalpopup-group .modalPop { background-color: white; border-radius: 20px; padding: 0px; } 
.modalpopup-group .modalPop:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.modalpopup-group .modalPop h1 { width: 100%; color: #fff; font-size: 2.8rem; font-weight: 500; margin: 0; padding: 22px 0; background: #4a65f6; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; border-radius: 20px 20PX 0 0; } 
.modalpopup-group .modalPop .closeBtn { right: 30px; top: 30px; cursor: pointer; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
.modalpopup-group .modalPop .closeBtn i { font-size: 30px; color: #FFF; } 
.modalpopup-group .modalPop .closeBtn:hover i { color: black; } 
.modalpopup-group .modalPop .bttns { width: 100%; text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #dee2e6; } 
.modalpopup-group .modalPop .bttns button { display: inline-block; margin: 0 5px!important; } 
.modalpopup-group .modalPop .bttns button:hover { background: #4a65f6; } 
.modalpopup-group .modalPop .bttns > .closeBtn { position: relative; top: 0; right: 0; height: 50px; background-color: #32334f; color: #fff; font-size: 2rem!important; text-indent: inherit; border-radius: 25px; padding: 0px 30px; } 
.modalpopup-group .modalPop .modalCon { width: 100%; min-height: 300px; padding: 3rem 6rem; } 
.modalpopup-group .modalPop .modalCon .service_info { position: relative; padding-left: 220px; text-align: center; } 
.modalpopup-group .modalPop .modalCon .service_info p { font-size: 1.8rem; color: #333; line-height: 28px; word-break: keep-all; text-align: left; } 
.modalpopup-group .modalPop .modalCon .service_info p.purple { color: #4a65f6; font-weight: 600; } 
.modalpopup-group .modalPop .modalCon .service_info p .red { font-size: 2rem; color: #ff3300; font-weight: 600; } 
.modalpopup-group .modalPop .modalCon .service_info img { position: absolute; left: 0; top: 0; } 
.modalpopup-group .modalPop .modalCon .closeBtn { display: inline-block; width: 45px; height: 45px; background: #fff; border-radius: 30px; text-indent: 0 !important; right: 24px; top: 24px; } 
.modalpopup-group .modalPop .modalCon .closeBtn i { font-size: 20px !important; color: #4a65f6 !important; } 
@media (max-width: 750px){
 .modalpopup-group .modalPop h1 { font-size: 2.2rem; padding: 15px 0; } 
 .modalpopup-group .modalPop .modalCon { min-height: auto; padding: 3rem; } 
 .modalpopup-group .modalPop .modalCon .service_info { padding-left: 0; } 
 .modalpopup-group .modalPop .modalCon .service_info img { position: relative; width: 140px; } 
 .modalpopup-group .modalPop .modalCon .service_info p { font-size: 1.6rem; line-height: 22px; } 
 .modalpopup-group .modalPop .modalCon .service_info p .red { display: block; font-size: 1.8rem; } 
 .modalpopup-group .modalPop .modalCon .service_info p br { display: none; } 
 .modalpopup-group .modalPop .modalCon .closeBtn { top: 10px; right: 10px; } 
 }
.svpop { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; } 
.svpop h2 { font-size: 2.6rem; color: #333; margin: 10px 0 !important; } 
.svpop h2 span { font-weight: 700; } 
.svpop div.th { text-align: left; font-weight: 500; font-size: 1.8rem; padding: 0px 15px 10px 15px; border: 1px solid #fff; display: inline-block; float: left; } 
.svpop div.th.question { color: #333; } 
.svpop div.th.question:before { content: ''; display: inline-block; width: 50px; height: 20px; background: #FFF; border: 1px solid #dddddd; vertical-align: middle; margin-right: 10px; border-radius: 3px; } 
.svpop div.th.answer { color: #4a65f6; } 
.svpop div.th.answer:before { content: ''; display: inline-block; width: 50px; height: 20px; background: #d0d7ff; vertical-align: middle; margin-right: 10px; border-radius: 3px; } 
.svpop .scroll_bd { display: block; width: 100%; height: 300px; overflow: auto; border-top: 2px solid #d0d7ff; border-radius: 0 0 10px 10px; } 
.svpop .scroll_bd .svpop_table { clear: both; width: 100%; border: 0!important; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } 
.svpop .scroll_bd .svpop_table tr td { text-align: left; font-weight: 400; font-size: 1.6rem; border: 1px solid #fff; border-bottom: 1px solid #eee; padding: 20px 15px; } 
.svpop .scroll_bd .svpop_table tr td.question { color: #333; background: #fff; width: 65%; font-weight: 500; } 
.svpop .scroll_bd .svpop_table tr td.answer { color: #4a65f6; background: #f2f4ff; width: 35%; } 
.svpop .scroll_bd .svpop_table tr td.question50 { color: #333; background: #fff; width: 50%; font-weight: 500; } 
.svpop .scroll_bd .svpop_table tr td.answer50 { color: #4a65f6; background: #f2f4ff; width: 50%; text-align: center; } 
.svpop .scroll_bd .svpop_table tr td.who { color: #333; background: #fff; width: 35%; font-weight: 500; } 
.svpop .scroll_bd .svpop_table tr td.w_answer { color: #4a65f6; background: #f2f4ff; width: 65%; } 
@media (max-width: 750px){
 .svpop { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; } 
 .svpop h2 { font-size: 2rem; } 
 .svpop div.th { font-size: 1.6rem; padding: 10px 8px; } 
 .svpop div.th.question:before { width: 20px; height: 15px; } 
 .svpop div.th.answer:before { width: 20px; height: 15px; } 
 .svpop .scroll_bd { height: 300px; } 
 .svpop .scroll_bd .svpop_table tr td { font-size: 1.3rem; float: left; padding: 15px; } 
 .svpop .scroll_bd .svpop_table tr td.question { width: 100%; } 
 .svpop .scroll_bd .svpop_table tr td.answer { width: 100%; } 
 .svpop .scroll_bd .svpop_table tr td.who { width: 100%; } 
 .svpop .scroll_bd .svpop_table tr td.w_answer { width: 100%; } 
}
.memberAddPop { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; } 
.reportpopup1 { max-width: 800px !important; width: 100%; margin: 0 auto; } 
.popup1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; width: 100%; } 
.popup1 h2 { font-size: 2.6rem; color: #333; text-align: left; } 
.popup1 h2 span { font-weight: 700; display: inline-block; text-align: center; text-overflow: ellipsis; background: #e2e6ff; padding: 8px 30px; white-space: nowrap; overflow: hidden; vertical-align: middle; } 
.popup1 .select-group { float: left; width: 150px; height: 50px; padding: 0!important; } 
.popup1 .select-group label { text-indent: -99999px; } 
.popup1 .select-group .select { max-width: 230px; } 
.popup1 .select-group .select .select-arrow { border-color: #4a65f6 transparent transparent transparent; } 
.popup1 .select-group .select select { border: 1px solid #4a65f6; border-radius: 5px; height: 50px; margin-top: 8px; } 
.popup1 .graph_area { width: 100%; margin-top: 20px; min-height: 350px; text-align: center; } 
.popup1 .explain { border-radius: 10px; background: #f8f8f8; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; margin: 10px auto 0 auto; width: 100%; padding: 15px; } 
.popup1 .explain .text ul { overflow: hidden; width: 100%; margin: 20px auto; display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;row-gap:5px; } 
.popup1 .explain .text ul li { float: left; width: 33% !important; text-align: center; font-size: 1.5rem; color: #333; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 3px; display:flex;justify-content: center;gap:5px;align-items:baseline;} 
.popup1 .explain .text ul li span { font-weight: bold; } 
.popup1 .explain .text ul li:first-child { font-weight: 600; width:100% !important;display:flex;justify-content:center;padding-bottom:6px; } 
.popup1 .explain .text.student ul { background: #e2e6ff; padding: 10px 0; margin-bottom: 10px; } 

@media (min-width: 751px){
 .popup1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; min-width: 350px; } 
 .popup1 h2 {margin: 13px 0 25px 31%; }
 .popup1 .explain .text ul li:first-child { width: 12%; } 
 .popup1 .explain .text ul li:nth-child(5) { width: 18%; }
}

@media (max-width: 750px){
 .popup1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; min-width: 350px; } 
 .popup1 .select-group { position: absolute; width: 100px; height: 35px; } 
 .popup1 .select-group .select { max-width: 100px; } 
 .popup1 .select-group .select select { height: 35px; } 
 .popup1 h2 {font-size:2rem;margin:7px 0 35px 30%;}
 .popup1 .explain .text ul { width: 100%;row-gap:0; } 
 .popup1 .explain .text ul li { width: 33%; padding: 3px; } 
 .popup1 .explain .text ul li:first-child { width: 100%; text-align: center; padding-bottom: 10px; } 
 .popup1 .explain .text ul li span { font-weight: bold; } 
}
@media (max-width: 480px){
    .popup1 .select-group {width:100%;float:none;margin:0 auto;position:initial;}
    .popup1 .select-group .select {max-width:100%;}
    .popup1 h2 {font-size:1.8rem;margin:26px 0;text-align:center;}

   }

.reportpopup2 { margin:0 auto; } 
.popup2 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; } 
.popup2 h2 { font-size: 2.6rem; color: #333; margin: 20px 0 40px 0; } 
.popup2 h2 span { font-weight: 700; } 
.popup2 .select-group { width: 170px; height: 50px; padding: 0!important; } 
.popup2 .select-group label { text-indent: -99999px; } 
.popup2 .select-group .select { max-width: 230px; } 
.popup2 .select-group .select .select-arrow { border-color: #4a65f6 transparent transparent transparent; } 
.popup2 .select-group .select select { border: 1px solid #4a65f6; border-radius: 5px; height: 50px; } 
.popup2 .block_l { width: 60%; float: left; position: relative; padding: 45px 20px 20px 20px !important; } 
.popup2 .block_l .title_p { font-size: 2.4rem; color: #111; } 
.popup2 .block_l .title_p span { font-weight: 700; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: bottom; } 
.popup2 .block_l .graph_area { width: 100%; margin: 0 auto; height: 570px; background: #fff; } 
.popup2 .block_l .ex_p { text-align: center; font-size: 1.7rem; font-weight: 500; color: #111; padding: 5px 0; margin: 0 !important; } 
.popup2 .block_l .explain { border-radius: 10px; background: #f8f8f8; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; margin-top: 20px; } 
.popup2 .block_l .explain .legend { float: left; display: inline-block; width: 180px; background: #f2f2f2; border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 23px; font-size: 1.3rem; color: #333; font-weight: 500; } 
.popup2 .block_l .explain .legend span.boy { font-size: 1.3rem; color: #333; margin-right: 10px; } 
.popup2 .block_l .explain .legend span.boy:before { content: ''; display: inline-block; width: 12px; height: 12px; background: #4a65f6; margin-right: 10px; } 
.popup2 .block_l .explain .legend span.girl { font-size: 1.3rem; color: #333; margin-bottom: 10px; } 
.popup2 .block_l .explain .legend span.girl:before { content: ''; display: inline-block; width: 12px; height: 12px; background: #f54484; margin-right: 10px; } 
.popup2 .block_l .explain .legend span.good { display: inline-block; padding-left: 105px; background-image: url('/images/ttFriendship/green_arrow.png'); background-repeat: no-repeat; background-position: left; margin-top: 5px; } 
.popup2 .block_l .explain .legend span.bad { display: inline-block; padding-left: 105px; background-image: url('/images/ttFriendship/orange_arrow.png'); background-repeat: no-repeat; background-position: left; margin-top: 5px; } 
.popup2 .block_l .explain .text { float: left; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-left: -180px; padding: 10px 10px 10px 190px; } 
.popup2 .block_l .explain .text p { font-size: 1.4rem; color: #666666; letter-spacing: -0.08rem; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px; margin: 0; line-height: 1.2; } 
.popup2 .block_l .explain .text p span { font-weight: 700; color: #111; } 
.popup2 .block_l .keyword { width: 100%; margin-bottom: 20px; height: 400px; background: #f6f6f6; border-radius: 10px; overflow: auto; } 
.popup2 .block_r { width: 40%; float: right; } 
.popup2 .block_r .title_p { font-size: 2.2rem; color: #111; } 
.popup2 .block_r .title_p.face { background-image: url('/images/ttFriendship/man_happy.png'); background-repeat: no-repeat; padding-left: 50px; height: 39px; line-height: 39px; } 
.popup2 .block_r .title_p span { font-weight: 700; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: bottom; } 
.popup2 .block_r .f_type { font-size: 1.5rem; color: #333; font-weight: 700; } 
.popup2 .block_r .f_type:before { content: ''; display: inline-block; width: 5px; height: 5px; background: #000; vertical-align: middle; margin-right: 10px; } 
.popup2 .block_r div.ul_wrap { width: 100%; background: #f6f6f6; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px 20px; border-radius: 10px 10px 0 0; } 
.popup2 .block_r div.ul_wrap ul { width: 100%; overflow: hidden; min-height: 79px; } 
.popup2 .block_r div.ul_wrap ul li { float: left; list-style: none; margin: 2px 0; } 
.popup2 .block_r div.ul_wrap ul li div.fr_name { border-radius: 20px; background: #fff; padding: 0px 10px 0px 0; font-size: 1.6rem; color: #333; line-height: 30px; margin: 0 5px; } 
.popup2 .block_r div.ul_wrap ul li div.fr_name:has(.st_) {padding:0 5px;}
.popup2 .block_r div.ul_wrap ul li div.fr_name span { display: inline-block; border-radius: 20px; width: 30px; margin-right: 4px; height: 30px; color: #333; font-family: 'Roboto'; text-align: center; } 
.popup2 .block_r div.ul_wrap ul li div.fr_name span.st_w { background: #fddae6; } 
.popup2 .block_r div.ul_wrap ul li div.fr_name span.st_m { background: #c6cdff; } 
.popup2 .block_r div.ul_wrap ul li div.fr_name span.st_ { width: 95px; margin-right: 0; }
.popup2 .block_r div.filter { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border-radius: 15px; position: relative; background-color: #32334f; padding: 20px 10px; margin: 10px 0 10px 0;} 
.popup2 .block_r div.filter span.dropdown { font-size: 2rem; font-weight: 700; color: #fff; padding-left: 10px; cursor: pointer; display: block; } 
.popup2 .block_r div.filter span.dropdown i.list { margin-right: 10px; } 
.popup2 .block_r div.filter span.dropdown i.updown { float: right; font-size: 30px; margin-top: -5px; } 
.popup2 .block_r div.filter span.dropdown.down { margin: 20px 0; } 
.popup2 .block_r div.filter .input-group { overflow: hidden; position: relative; bottom: 0px; left: 0; background: #32334f; border-radius: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; width: 100%; } 
.popup2 .block_r div.filter .input-group ul.checkbox-group { width: 100%; border-bottom: 1px solid #464760; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; } 
.popup2 .block_r div.filter .input-group ul.checkbox-group:nth-child(5) { border-bottom: 0 !important; } 
.popup2 .block_r div.filter .input-group ul.checkbox-group li { width: 100% !important; } 
.popup2 .block_r div.filter .input-group ul.checkbox-group li label { color: #fff; } 
.popup2 .block_r div.filter .input-group button { border-radius: 20px; color: #fff; background: #4a65f6; padding: 13px 40px; font-size: 1.5rem; cursor: pointer; margin: 10px auto 20px auto; display: block; } 
.popup2 .block_r div.filter .input-group button:hover { background: #2239bb; } 
.popup2 .block_r .chart { width: 100%; margin-bottom: 20px; height: 400px; background: #f6f6f6; border-radius: 10px; } 
@media (max-width: 900px){
 .popup2 { padding: 20px 10px; } 
 .popup2 .block_l { width: 100%; float: none; } 
 .popup2 .block_l .explain .legend { float: none; display: block; width: 100%; padding: 10px; font-size: 1.3rem; } 
 .popup2 .block_l .explain .legend span.boy,
 .popup2 .block_l .explain .legend span.girl { margin-right: 10px; } 
 .popup2 .block_l .explain .legend span.good,
 .popup2 .block_l .explain .legend span.bad { padding-left: 50px; background-position: -50px; margin-right: 10px; } 
 .popup2 .block_l .explain .text { float: none; margin: 0; padding: 10px; } 
 .popup2 .block_l .explain .text p { font-size: 1.4rem; } 
 .popup2 .block_r { width: 100%; float: none; } 
}
@media (max-width: 750px){
 .popup2 .block_l { padding: 0 !important; } 
 .popup2 .block_l .title_p { font-size: 1.8rem; } 
 .popup2 .block_l .ex_p { font-size: 1.5rem; } 
 .popup2 .block_r .title_p { font-size: 1.8rem; } 
 .popup2 .block_r .f_type { font-size: 1.5rem; } 
 .popup2 .block_r div.ul_wrap ul li div.fr_name { font-size: 1.4rem; margin: 0 2px; } 
 .popup2 .block_r div.filter { padding: 15px 10px; border-radius: 10px; margin: 10px 0 10px 0;} 
 .popup2 .block_r div.filter span.dropdown { font-size: 1.8rem; } 
}

/*휴대폰인증/아이디/비밀번호 찾기*/
.certify_popup,
.find_pw_popup { max-width: 600px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; } 
.certify_popup .modalPop,
.find_pw_popup .modalPop { padding: 10px 30px; } 
.certify_popup .modalPop h1,
.find_pw_popup .modalPop h1 { background: #fff; font-size: 3rem; color: #111; font-weight: 700; } 
.certify_popup .modalPop .cer_box,
.find_pw_popup .modalPop .cer_box { border-top: 2px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; padding-bottom: 25px; } 
.certify_popup .modalPop .cer_box ul,
.find_pw_popup .modalPop .cer_box ul { width: 100%; clear: both; padding: 15px 10px; } 
.certify_popup .modalPop .cer_box ul li,
.find_pw_popup .modalPop .cer_box ul li { width: 100%; clear: both; display: block; } 
.certify_popup .modalPop .cer_box ul li .item,
.find_pw_popup .modalPop .cer_box ul li .item { padding: 0px 0 10px 15%; position: relative; overflow: hidden; } 
.certify_popup .modalPop .cer_box ul li .item .column_txt,
.find_pw_popup .modalPop .cer_box ul li .item .column_txt { display: inline-block; width: 28%; height: 40px; line-height: 40px; font-size: 1.6rem; color: #333; position: absolute; left: 0; } 
.certify_popup .modalPop .cer_box ul li .item .tel,
.find_pw_popup .modalPop .cer_box ul li .item .tel { display: inline-block; padding-right: 20px; line-height: 40px; } 
.certify_popup .modalPop .cer_box ul li .item .tel:after,
.find_pw_popup .modalPop .cer_box ul li .item .tel:after { content: '-'; color: #b3b3b3; position: absolute; right: 0; top: 0; text-align: center; width: 20px; } 
.certify_popup .modalPop .cer_box ul li .item .tel:last-child:after,
.find_pw_popup .modalPop .cer_box ul li .item .tel:last-child:after { display: none; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt { width: 60%; display: inline-block; font-size: 1.4rem; color: #666666; position: relative; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt input,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt input { font-size: 1.4rem; border: 1px solid #dddddd; color: #666666; padding: 0 10px; width: 100%; clear: both; height: 40px; line-height: 40px; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt.email,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt.email { position: relative; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt.email input,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt.email input { padding-right: 10px !important; display: inline-block; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt.email input.e01,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt.email input.e01 { width: 45%; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt.email input.e02,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt.email input.e02 { width: 45%; } 
.certify_popup .modalPop .cer_box ul li .item .input_txt.tel,
.find_pw_popup .modalPop .cer_box ul li .item .input_txt.tel { width: 140px; } 
.certify_popup .modalPop .cer_box ul li .item .select,
.find_pw_popup .modalPop .cer_box ul li .item .select { height: 40px; } 
.certify_popup .modalPop .cer_box ul li .item .select select,
.find_pw_popup .modalPop .cer_box ul li .item .select select { height: 40px; } 
.certify_popup .modalPop .cer_box ul li .item .select .select-arrow,
.find_pw_popup .modalPop .cer_box ul li .item .select .select-arrow { top: 17px; } 
.certify_popup .modalPop .cer_box ul li .item .select.tel,
.find_pw_popup .modalPop .cer_box ul li .item .select.tel { width: 140px; } 
.certify_popup .modalPop .cer_box ul li .item .check_w,
.find_pw_popup .modalPop .cer_box ul li .item .check_w { margin-left: 5px; } 
.certify_popup .modalPop .cer_box ul li .item .check_w .check,
.find_pw_popup .modalPop .cer_box ul li .item .check_w .check { min-width: 80px; height: auto; padding: 12px 15px; font-size: 1.3rem; color: white; background-color: #32334f; cursor: pointer; border-radius: 25px; } 
.certify_popup .modalPop .cer_box ul li .item .birth_w,
.find_pw_popup .modalPop .cer_box ul li .item .birth_w { font-size: 1.4rem; } 
.certify_popup .modalPop .cer_box ul li .item .birth_w .input_txt,
.find_pw_popup .modalPop .cer_box ul li .item .birth_w .input_txt { width: 110px; margin-right: 5px; } 
.certify_popup .modalPop .cer_box ul li .item .birth_w .select,
.find_pw_popup .modalPop .cer_box ul li .item .birth_w .select { width: 110px; float: none; margin: 0 5px; } 
.certify_popup .modalPop .cer_box p,
.find_pw_popup .modalPop .cer_box p { font-size: 1.3rem; color: #555; margin: 5px 0; } 
.certify_popup .modalPop .result_area,
.find_pw_popup .modalPop .result_area { width: 100%; clear: both; border-top: 2px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; padding: 25px 0; } 
.certify_popup .modalPop .result_area p,
.find_pw_popup .modalPop .result_area p { font-size: 18px; line-height: 1.5; text-align: center; padding: 0; margin: 0; letter-spacing: -0.34px; } 
.certify_popup .modalPop .result_area p b,
.find_pw_popup .modalPop .result_area p b { color: #4a65f6; font-weight: 700; } 
.certify_popup .modalPop .closeBtn,
.find_pw_popup .modalPop .closeBtn { display: inline-block; width: 45px; height: 45px; background: #4a65f6; border-radius: 30px; text-indent: 0 !important; right: -5px; top: -5px; } 
.certify_popup .modalPop .closeBtn i,
.find_pw_popup .modalPop .closeBtn i { font-size: 20px !important; } 
@media (max-width: 750px){
 .certify_popup { max-width: 600px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; } 
 .certify_popup .modalPop { padding: 10px 30px; } 
 .certify_popup .modalPop h1 { font-size: 2.6rem; } 
 .certify_popup .modalPop .cer_box ul { padding: 20px 0px; } 
 .certify_popup .modalPop .cer_box ul li .item { padding: 10px 0; } 
 .certify_popup .modalPop .cer_box ul li .item .column_txt { width: 100%; display: inline-block; position: static; font-size: 1.6rem; } 
 .certify_popup .modalPop .cer_box ul li .item .input_txt { width: 100%; display: inline-block; font-size: 1.4rem; } 
 .certify_popup .modalPop .cer_box ul li .item .input_txt.tel { width: 110px; } 
 .certify_popup .modalPop .cer_box ul li .item .select { display: inline-block; } 
 .certify_popup .modalPop .cer_box ul li .item .select.tel { width: 110px; } 
 .certify_popup .modalPop .cer_box ul li .item .check_w { display: inline-block; margin-top: 5px; margin-left: 0px; } 
 .certify_popup .modalPop .cer_box ul li .item .check_w .check { min-width: 80px; padding: 12px 15px; } 
 .certify_popup .modalPop .cer_box ul li .item .birth_w .input_txt,
 .certify_popup .modalPop .cer_box ul li .item .birth_w .select { width: 90px; } 
 .certify_popup .modalPop .cer_box p { font-size: 1.3rem; color: #555; margin: 5px 0; } 
 .certify_popup .modalPop .closeBtn { display: inline-block; width: 45px; height: 45px; background: #4a65f6; border-radius: 30px; text-indent: 0 !important; right: -5px; top: -5px; } 
 .certify_popup .modalPop .closeBtn i { font-size: 20px !important; } 
}
.terms_popup { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; } 
.terms_popup .modalPop { padding: 10px 30px; } 
.terms_popup .modalPop h1 { background: #fff; font-size: 3rem; color: #111; font-weight: 700; } 
.terms_popup .modalPop .closeBtn { display: inline-block; width: 45px; height: 45px; background: #4a65f6; border-radius: 30px; text-indent: 0!important; right: -5px; top: -5px; } 
.terms_popup .modalPop .closeBtn i { font-size: 20px!important; } 
.terms_popup .modalPop .terms { padding: 0; } 
.terms_popup .modalPop .terms .terms_box { height: 300px; margin: 0; } 
.terms_popup .modalPop .terms .m_control { text-align: center; padding: 20px 15px; } 

/*Styles*/
.placeholder { margin: 30px auto; width: 100%; text-align: justify; line-height: 1.6; opacity: 30%; } 
.placeholder__word { background: #ccc; border-radius: 3px; color: #ccc; font-size: 1.3rem; letter-spacing: 0.2rem; line-height: 2; margin: 0 2px; } 
.formValidation-group { width: 100%; position: relative; } 
.formValidation-group ul,
.formValidation-group li { list-style: none; } 
.formValidation-group:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.formValidation-group .form-container { width: 100%; max-width: 500px; } 
.formValidation-group .form-container .form-group { margin-bottom: 20px; } 
.formValidation-group .form-container label { display: block; margin-bottom: 10px; font-size: 1.4rem; color: #192C4F; } 
.formValidation-group .form-container .label { display: block; margin-bottom: 10px; font-size: 1.4rem; color: #192C4F; } 
.formValidation-group .form-container .form-control { width: 100%; height: 36px; padding: 0 10px; line-height: 36px; font-size: 1.4rem; border: 1px solid #e6e6e6; border: 1px solid #e0e0e0; border-bottom: 3px solid #1c94ff; } 
.formValidation-group .form-container .text-help { color: #dc1d34; font-size: 1.3rem; margin-top: 8px; } 
.formValidation-group .has-success .form-control { border-bottom: 3px solid #168b3f; } 
.formValidation-group .has-danger .form-control { border-bottom: 3px solid #dc1d34; } 
.formValidation-group .inline-label label { display: inline; } 
.formValidation-group .pristine-error { display: table; } 
.toggle-wrap .family_w { width: 200px; position: relative; text-align: left; } 
.toggle-wrap .family_w ul,
.toggle-wrap .family_w li { list-style: none; } 
.toggle-wrap .family_w .family_btn { width: 100%; height: 50px; line-height: 50px; background-color: #e6e6e6; font-size: 1.5rem; padding: 0 0 0 2rem; position: relative; text-align: left; cursor: pointer; } 
.toggle-wrap .family_w .family_btn i { position: absolute; width: 20px; height: 10px; right: 20px; top: 20px; background-image: url('/images/ttFriendship/icon_family_arw.png'); background-repeat: no-repeat; background-position: 0 -10px; } 
.toggle-wrap .family_w .family_btn.active i { background-position: 0 0 !important; } 
.toggle-wrap .family_w .family_sites { width: 100%; height: 150px; overflow: auto; position: absolute; left: 0; bottom: 50px; background-color: white; border: 1px solid #e6e6e6; padding: 15px; display: none; } 
.toggle-wrap .family_w .family_sites.opened { display: block !important; } 
.toggle-wrap .family_w .family_sites ul { width: 100%; } 
.toggle-wrap .family_w .family_sites ul li { width: 100%; position: relative; padding-left: 8px; } 
.toggle-wrap .family_w .family_sites ul li:before { content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background-color: black; } 
.toggle-wrap .family_w .family_sites ul li a { line-height: 1.6; font-size: 14px; color: #666666; text-decoration: none; } 
.toggle-wrap .family_w .family_sites ul li a:hover { color: black; text-decoration: underline; } 
.rim_wrap img { width: 100%; height: auto; max-width: 1024px; } 
.gotop { position: fixed; right: 50px; bottom: 50px; display: none; background-color: #192C4F; color: white; font-size: 14px; width: 80px; height: 80px; text-align: center; text-decoration: none; border-radius: 50%; } 
.gotop i { width: 100%; height: 30px; text-align: center; display: block; line-height: 30px; margin-top: 10px; font-size: 18px; } 
.gotop span { width: 100%; height: 20px; text-align: center; display: block; line-height: 20px; } 
.vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 
.image-zoom h1 { text-align: left; } 
.image-zoom figure { margin: 3rem auto; width: 100%; max-width: 700px; } 
.image-zoom figure img { width: 100%; height: auto; } 
.image-zoom figure figcaption { width: 100%; text-align: center; line-height: 30px; font-size: 14px; color: #666666; } 
.image-zoom .medium-zoom-image { cursor: pointer; cursor: zoom-in; transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1); } 
.pane-container { text-align: center; } 
.pane-container .pane { width: 100%; } 
.pane-container .pane .content-container { height: 100%; width: auto; position: relative; } 
.pane-container .paneOne .content-container { background-color: #8FD9CB; } 
.pane-container .paneTwo .content-container { background-color: #ABBF63; } 
.pane-container .paneThree .content-container { background-image: url('/images/ttFriendship/@bgimg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; } 
.pane-container .paneFour .content-container { background-color: #F2B872; } 
.pane-container .paneFive .content-container { background-color: #F27052; } 
.pane-container .paneSix .content-container { background-color: #000; } 
.pane-container .paneSeven .content-container { background-color: #D95043; } 
.pane-container .bg-video { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; } 
.pane-container .bg-video video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.pane-container .wrapper { max-width: 1200px; margin: 0 auto; position: relative; top: 50%; padding: 40px 100px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 
.pane-container .wrapper .placeholder { margin: 30px auto; width: 100%; text-align: justify; line-height: 1.6; opacity: 30%; } 
.pane-container .wrapper .placeholder__word { background: #fff; border-radius: 3px; color: #fff; font-size: 1.3rem; letter-spacing: 0.2rem; line-height: 2.4; margin: 0 2px; } 
.triangle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid #dc232d; } 
.triangle2 { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid #dc232d; } 
.bg_border { padding: 6px; background-image: url('/images/ttFriendship/bg_border.png'); background-repeat: repeat; } 
.bg_border .bg_border_in { background-color: white; width: 100%; height: 100%; padding: 30px; } 
.pdf-control { width: 100%; max-width: 800px; margin-bottom: 15px; } 
.pdf-control .page { float: right; font-size: 1.4rem; color: #808080; line-height: 36px; border: 1px solid #e6e6e6; padding: 0 15px; } 
.pdf-control .page .ttl { padding-right: 15px; border-right: 1px solid #e6e6e6; margin-right: 15px; line-height: 36px; } 
.pdf-control .page_num { color: #dc232d; } 
.pdf-canvas { border: 2px solid #e6e6e6; direction: ltr; width: 100%; max-width: 800px; } 
.lazy_load_img { width: 100%; } 
.progressive { overflow: hidden; position: relative; background-color: #efefef; } 
.progressive .progressive__img { width: 100%; height: 100%; transform: translateZ(0); } 
.progressive .progressive--not-loaded { filter: blur(30px); transform: scale(1.1); } 
.progressive .progressive--is-loaded { filter: blur(20px); animation: a 0.5s both; transform: scale(1); } 
.progressive__bg { width: 100%; height: 100%; transform: translateZ(0); background-image: no-repeat; background-size: 100% auto; } 
@keyframes a { 
 0% { filter: blur(20px); } 
 to { filter: blur(0); } 
}

/*Table*/
.table_type01 { border-top: 2px solid #191919; max-width: 900px; } 
.table_type01 table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } 
.table_type01 th,
.table_type01 td { min-height: 40px; padding: 15px; border-bottom: 1px solid #ddd; color: #4d4d4d; vertical-align: middle; word-wrap: break-word; word-break: break-all; line-height: 1.5; } 
.table_type01 thead th { background-color: #f5f5f5; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.table_type01 tbody th { background-color: #f5f5f5; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.table_type01 tbody td { font-weight: normal; text-align: center; font-size: 14px; } 
.table_type01 .left { text-align: left; } 
.table_type01 .right { text-align: right; } 
.table_type01 .line { border-right: 1px solid #ddd; } 
.table_type01 ul,
.table_type01 li { list-style: none; } 
.table_type01 p { margin: 0; padding: 0; } 
.table_type01 .txt_comment { color: #0d643a; padding-top: 25px; } 
@media (max-width: 699px){
 .table_type01 colgroup { display: none; } 
 .table_type01 thead th { display: none; } 
 .table_type01 tbody th { width: 100%; background-color: #f5f5f5; display: block; } 
 .table_type01 tbody td { width: 100%; display: block; } 
 .table_type01 .line { border-right: none !important; } 
}
.table_type02 { max-width: 900px; } 
.table_type02 table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } 
.table_type02 th,
.table_type02 td { padding: 15px; border-bottom: 1px solid #ddd; color: #4d4d4d; vertical-align: middle; word-wrap: break-word; word-break: break-all; line-height: 1.5; } 
.table_type02 thead th { background-color: #f0fbfa; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.table_type02 tbody th { background-color: #f0fbfa; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.table_type02 tbody td { font-weight: normal; text-align: center; font-size: 14px; } 
.table_type02 tr:first-child th { border-top: 2px solid #00bcb4; } 
.table_type02 tr:first-child td { border-top: 1px solid #ddd; } 
.table_type02 .left { text-align: left; } 
.table_type02 .right { text-align: right; } 
.table_type02 .line { border-right: 1px solid #ddd; } 
.table_type02 ul,
.table_type02 li { list-style: none; } 
@media (min-width: 700px){
 .table_type02 th,
 .table_type02 td { min-height: 40px; } 
}
@media (max-width: 699px){
 .table_type02 colgroup { display: none; } 
 .table_type02 thead th { display: none; } 
 .table_type02 tbody th { width: 100%; background-color: white; display: block; text-align: left; padding: 10px 15px 0 15px; border-bottom: none !important; color: #0d643a !important; } 
 .table_type02 tbody td { width: 100%; display: block; text-align: left; padding: 10px 15px; } 
 .table_type02 tr:first-child td { border-top: none !important; } 
 .table_type02 .line { border-right: none !important; } 
}
.table_type03 { max-width: 900px; } 
.table_type03 table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } 
.table_type03 th,
.table_type03 td { color: #4d4d4d; vertical-align: middle; word-wrap: break-word; word-break: break-all; line-height: 1.5; } 
.table_type03 thead th { background-color: #f1f8fd; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.table_type03 tbody th { background-color: #f1f8fd; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.table_type03 tbody td { font-weight: normal; text-align: center; font-size: 14px; } 
.table_type03 tr:first-child th { border-top: 2px solid #0072bc; } 
.table_type03 .left { text-align: left; } 
.table_type03 .right { text-align: right; } 
.table_type03 ul,
.table_type03 li { list-style: none; } 
@media (min-width: 800px){
 .table_type03 .label { display: none; text-indent: -999; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; position: absolute; } 
 .table_type03 th,
 .table_type03 td { min-height: 40px; padding: 15px; border: 1px solid #ddd; } 
}
@media (max-width: 799px){
 .table_type03 colgroup { display: none; } 
 .table_type03 thead th { display: none; } 
 .table_type03 tbody td { width: 100%; display: block; text-align: left; padding: 0 0 5px 0; } 
 .table_type03 tr { border-bottom: 1px solid #ddd; display: block; padding: 10px 15px; } 
 .table_type03 .label { width: 100%; display: block; font-size: 13px; color: #0072bc; padding-bottom: 3px; } 
}
.scrolltbody { display: block; width: 600px; border-collapse: collapse; border: 2px solid #000; } 
.scrolltbody th,
.scrolltbody td { min-height: 40px; padding: 15px; border-bottom: 1px solid #ddd; color: #4d4d4d; vertical-align: middle; word-wrap: break-word; word-break: break-all; line-height: 1.5; } 
.scrolltbody th { border: 1px solid #ddd; background-color: #f5f5f5; font-weight: bold; letter-spacing: -0.5px; text-align: center; font-size: 14px; } 
.scrolltbody td { border: 1px solid #ddd; border-top: 0; text-align: center; font-size: 14px; } 
.scrolltbody thead { width: 100%; display: block; } 
.scrolltbody tbody { display: block; height: 500px; overflow: auto; } 
.js-scrollable,
.js-scrollable-shadow { width: 100%; max-width: 800px; } 
.js-scrollable-shadow table { background-color: transparent; } 
.scroll-hint.is-right-scrollable { background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); } 
.scroll-hint.is-right-scrollable.is-left-scrollable { background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); } 
.scroll-hint.is-left-scrollable { background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); } 
table.scrollhint-table { width: 100%; border-collapse: collapse; border-spacing: 0; } 
table.scrollhint-table th,
table.scrollhint-table td { padding: 15px; border-bottom: 1px solid #ddd; color: #4d4d4d; vertical-align: middle; word-wrap: break-word; word-break: break-all; line-height: 1.5; white-space: nowrap; } 
table.scrollhint-table thead th { background-color: #f0fbfa; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: left; font-size: 14px; } 
table.scrollhint-table tbody th { background-color: #f0fbfa; color: #191919; font-weight: bold; letter-spacing: -0.5px; text-align: left; font-size: 14px; } 
table.scrollhint-table tbody td { font-weight: normal; text-align: left; font-size: 14px; } 
table.scrollhint-table tr:first-child th { border-top: 2px solid #00bcb4; } 
table.scrollhint-table tr:first-child td { border-top: 1px solid #ddd; } 
table.scrollhint-table .left { text-align: left; } 
table.scrollhint-table .right { text-align: right; } 
table.scrollhint-table .line { border-right: 1px solid #ddd; } 
table.scrollhint-table ul,
table.scrollhint-table li { list-style: none; } 
table.scrollhint-table code { color: #dc232d; } 

/*Tips*/
.tip_wrap { padding: 10px 15px !important; margin-bottom: 10px !important; } 
.tip_wrap .label { float: left; font-size: 14px; color: #666666; width: 350px; line-height: 30px; } 
.tip_wrap .label span { display: inline-block; padding: 0 10px; line-height: 30px; background-color: #0d643a; color: white; border-radius: 4px; margin-right: 7px; } 
.tip_wrap .con { float: left; font-size: 14px; color: #191919; } 
.tip_wrap .con a { color: #191919; text-decoration: none; cursor: pointer; line-height: 30px; } 
.tip_wrap .con a:hover { text-decoration: underline; } 
.tip_wrap .add { width: 100%; padding: 0 20px 0 350px; } 
.tip_wrap .pre { width: 100%; background-color: #191919; color: white; font-size: 1.2rem; } 

/*Tab*/
.ui-tab { width: 100%; position: relative; max-width: 900px; } 
.ui-tab.type-linebox { position: relative; margin: 0; } 
.ui-tab .ui-tab-btns { position: relative; z-index: 1; margin-left: 0; background: none; padding: 0 0 0 1px; border: 0; width: 100%; margin-bottom: 30px; } 
.ui-tab .ui-tab-btns:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.ui-tab .ui-tab-btns .ui-tab-btn { position: relative; z-index: 0; color: #777; font-weight: 400; border-radius: 0; transition: box-shadow 0.1s ease-in, background-color 0.1s ease-in; border: 1px solid #ddd; background-color: #fff; margin: 0 0 0 -1px; cursor: pointer; float: left; width: auto; padding: 5px; } 
.ui-tab .ui-tab-btns .ui-tab-btn:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } 
.ui-tab .ui-tab-btns .ui-tab-btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } 
.ui-tab .ui-tab-btns .ui-tab-btn:focus { border: none; outline: 1px dotted #f05014; } 
.ui-tab .ui-tab-btns .ui-tab-btn.selected { z-index: 2; background-color: #fff; color: #f05014; border-color: #f05014; font-weight: 500; } 
.ui-tab .ui-tab-btns .ui-tab-btn.selected:focus i,
.ui-tab .ui-tab-btns .ui-tab-btn.selected:hover i { font-weight: 500; } 
.ui-tab .ui-tab-btns .ui-tab-btn.selected:focus,
.ui-tab .ui-tab-btns .ui-tab-btn.selected:hover { box-shadow: 0 0 5px rgba(253, 71, 0, 0.7); } 
.ui-tab .ui-tab-btns.tabs2 .ui-tab-btn { width: 50%; } 
.ui-tab .ui-tab-btns.tabs3 .ui-tab-btn { width: 33.33%; } 
.ui-tab .ui-tab-btns.tabs4 .ui-tab-btn { width: 25%; } 
.ui-tab .ui-tab-btns.tabs5 .ui-tab-btn { width: 20%; } 
.ui-tab .ui-tab-btns.tabs6 .ui-tab-btn { width: 16.66%; } 
.ui-tab .ui-tab-btns.L .ui-tab-btn { font-size: 16px; height: 52px; line-height: 1.2; } 
.ui-tab .ui-tab-btns.M .ui-tab-btn { font-size: 14px; height: 52px; line-height: 1.2; } 
.ui-tab .ui-tab-btns.S .ui-tab-btn { font-size: 13px; height: 52px; line-height: 1.2; } 
.ui-tab .ui-tab-pnls { position: relative; width: 100%; } 
.ui-tab .ui-tab-pnls .ui-tab-pnl { visibility: hidden; position: absolute; opacity: 0; display: none; } 
.ui-tab .ui-tab-pnls .ui-tab-pnl.selected { visibility: visible; position: relative; opacity: 1; z-index: 1; display: block; } 
.ui-tab .ui-tab-pnls .ui-tab-pnl { width: 100%; } 
.tab-panel { width: 100%; position: relative; max-width: 900px; } 
.tab-panel ul,
.tab-panel li { list-style: none; } 
.tab-panel ul { width: 100%; position: relative; padding-left: 1px; } 
.tab-panel ul:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.tab-panel ul li { float: left; margin-left: -1px; } 
.tab-panel ul li button { cursor: pointer; height: 50px; line-height: 50px; padding: 0 20px; border: 1px solid #ebebeb; border-radius: 10px 10px 0 0; font-size: 16px; background-color: white; } 
.tab-panel ul li.active button { background-color: #0d643a; border: 1px solid #0d643a; color: white; } 
.tab-panel .panel { padding: 2rem 0; background-color: white; display: none; } 
.tab-panel .active-panel { display: block; } 
.history-wrap { width: 100%; max-width: 1000px; margin: 0 auto; position: relative; } 
.history-wrap ul,
.history-wrap li,
.history-wrap dl,
.history-wrap dt,
.history-wrap dd { list-style: none; } 
.history-wrap .left,
.history-wrap .right { position: absolute; top: 50%; margin-top: -10px; cursor: pointer; } 
.history-wrap .right { right: 0; } 
.history-wrap .history-year { height: 42px; white-space: nowrap; margin: 0 auto; position: relative; display: flex; } 
.history-wrap .history-year li { width: auto; font-size: 1.5rem; font-weight: bold; line-height: 1.5; border-collapse: collapse; border-bottom: solid 1px #003e30; } 
.history-wrap .history-year li a { font-family: "Montserrat", sans-serif; display: block; background-color: #fff; color: #585e64; text-align: center; border-left: none; text-decoration: none; height: 41px; padding-top: 9px; } 
.history-wrap .history-year li a.on { border: solid 1px #003e30; border-bottom: 0px; color: #003e30; border-bottom: none; margin-top: 1px; margin-left: -1px; } 
.history-wrap .history-year li a:hover { color: #003e30; } 
.history-wrap .history-year li:first-child a.on { margin-left: 0; } 
.history-wrap .history-year li:last-child a { border-right: 0; } 
.history-wrap .history-year li:last-child a.on { border-right: solid 1px #003e30; } 
.history-detail { clear: both; width: 100%; max-width: 1000px; margin: 0 auto 50px auto; } 
.history-detail .item { display: none; } 
.history-detail .item:first-child { display: block; } 
.history-detail p { width: 100%; font-family: "Montserrat", sans-serif; font-weight: bold; color: #4d9a89 !important; } 
.history-detail dl { line-height: 1.5; position: relative; } 
.history-detail dl dt { font-family: "Montserrat", sans-serif; font-weight: bold; color: #003e30; float: left; position: relative; } 
.history-detail dl dd { color: #555; } 
@media (min-width: 1000px){
 .history-wrap .left,
 .history-wrap .right { display: inline-block; } 
 .history-wrap .history-year { overflow-x: hidden; margin-top: 54px; width: 950px; } 
 .history-wrap .history-year li { border-right: solid 1px #e7e3de; } 
 .history-wrap .history-year a { width: 190px; } 
 .history-wrap .history-year a.on { margin-right: -1px; } 
 .history-detail p { font-size: 2.8rem; padding-left: 390px; padding-top: 79px; } 
 .history-detail dl { padding-left: 342px; font-size: 1.6rem; padding-top: 23px; } 
 .history-detail dl:before { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; border: solid 1px #4d9a89; position: absolute; left: 417px; top: -1px; } 
 .history-detail dl:after { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: #4d9a89; display: block; position: absolute; top: 3px; left: 421px; } 
 .history-detail dl dt { width: 50px; height: 55px; padding-top: 31px; } 
 .history-detail dl dt:before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: solid 2px #4d9a89; background-color: #fff; display: block; left: 78px; top: 38px; position: absolute; } 
 .history-detail dl dt:after { content: ""; width: 1px; height: 44px; position: absolute; background-color: #4d9a89; top: -7px; left: 82px; } 
 .history-detail dl dd { padding-top: 31px; height: 55px; padding-left: 120px; } 
}
@media (max-width: 999px){
 .history-wrap .left,
 .history-wrap .right { display: none; } 
 .history-wrap .history-year { padding: 0 0 0 8px; overflow-x: scroll; margin-top: 0; width: 100%; } 
 .history-wrap .history-year li:last-child { border-right: solid 1px #e7e3de; } 
 .history-wrap .history-year a { width: 91px; border-top: solid 1px #e7e3de; border-right: 0; } 
 .history-wrap .history-year a:first-child { border-left: solid 1px #e7e3de; } 
 .history-wrap .history-year a.on { border-left: solid 1px #003e30; border-right: solid 1px #003e30; } 
 .history-detail { padding-left: 20px; padding-right: 20px; } 
 .history-detail p { text-align: left; font-size: 2.4rem; } 
 .history-detail dl { font-size: 1.4rem; padding-top: 10px; width: 100%; position: relative; overflow: hidden; } 
 .history-detail dl dt { width: 60px; margin-bottom: 15px; } 
 .history-detail dl dt:after { content: ""; width: 9px; height: 9px; border-radius: 50%; border: solid 2px #4d9a89; background-color: #fff; display: block; right: 0; top: 6px; position: absolute; } 
 .history-detail dl dt:before { content: ""; width: 1px; height: 100px; position: absolute; background-color: #4d9a89; top: -7px; right: 4px; } 
 .history-detail dl dd { padding-left: 70px; color: #555; margin-bottom: 15px; } 
}

/*Animation*/
.ani_sample_box { width: 100%; height: 300px; text-align: center; position: relative; } 
.ani_sample_box svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.ani_sample_box canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.ani_sample_box text { font-family: 'Montserrat'; font-weight: 900; font-size: 10rem; stroke: #dc232d; stroke-width: 2px; stroke-dasharray: 1000; stroke-dashoffset: 1000; fill: transparent; animation: dash 5s ease-out alternate infinite; } 
@keyframes dash { 
 from { stroke-dashoffset: 1000; } 
 to { stroke-dashoffset: 0; } 
}

/*Navigation*/
.nav1 { width: 100%; max-width: 900px; } 
.nav1:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.nav1 ul li { list-style-type: none; } 
.nav1 ul.main-menu { width: 100%; background-color: #192C4F; padding: 1rem; float: left; } 
.nav1 ul.main-menu li { float: left; } 
.nav1 a.d1 { color: white; display: block; padding: 1em 2em; text-decoration: none; font-size: 16px; } 
.nav1 .sub-menu-parent { position: relative; } 
.nav1 .sub-menu-parent .sub-menu { position: absolute; top: 100%; left: 0; width: 100%; background-color: #4a65f6; padding: 15px; visibility: hidden; opacity: 0; transform: translateY(-20px); z-index: -1; } 
.nav1 .sub-menu-parent .sub-menu li { width: 100%; } 
.nav1 .sub-menu-parent .sub-menu li a { width: 100%; color: white; font-size: 14px; line-height: 1.5; padding: 5px; text-decoration: none; display: block; visibility: hidden; opacity: 0; } 
.nav1 .sub-menu-parent .sub-menu li a:hover { text-decoration: underline; } 
.nav1 .sub-menu-parent:focus .sub-menu,
.nav1 .sub-menu-parent:focus-within .sub-menu,
.nav1 .sub-menu-parent:hover .sub-menu { visibility: visible; opacity: 1; z-index: 100; transform: translateY(0); transition-delay: 0s, 0s, 0.3s; transition: all 0.3s ease-in-out; } 
.nav1 .sub-menu-parent:focus .sub-menu a,
.nav1 .sub-menu-parent:focus-within .sub-menu a,
.nav1 .sub-menu-parent:hover .sub-menu a { visibility: visible; opacity: 1; } 
.nav2 { width: 100%; max-width: 900px; } 
.nav2:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.nav2 ul li { list-style-type: none; } 
.nav2 ul.main-menu { width: 100%; background-color: #192C4F; padding: 0 1rem; float: left; position: relative; } 
.nav2 ul.main-menu > li { float: left; } 
.nav2 ul.main-menu > li:first-child ul { padding-left: 20px; } 
.nav2 ul.main-menu > li:nth-child(2) ul { padding-left: 50px; } 
.nav2 ul.main-menu > li:nth-child(3) ul { padding-left: 300px; } 
.nav2 ul.main-menu > li:nth-child(4) ul { padding-left: 200px; } 
.nav2 ul.main-menu > li:nth-child(5) ul { padding-left: 400px; } 
.nav2 a.d1 { color: white; display: block; padding: 1em 2em; text-decoration: none; font-size: 16px; } 
.nav2 .sub-menu-parent { padding: 1em 0; } 
.nav2 .sub-menu-parent .sub-menu { position: absolute; top: 100%; left: 0; width: 100%; height: 0; overflow: hidden; background-color: #4a65f6; padding: 15px; visibility: hidden; opacity: 0; transform: translateY(-20px); z-index: -1; } 
.nav2 .sub-menu-parent .sub-menu li { float: left; } 
.nav2 .sub-menu-parent .sub-menu li a { color: white; font-size: 14px; line-height: 1.5; padding: 5px 10px; text-decoration: none; display: block; visibility: hidden; opacity: 0; } 
.nav2 .sub-menu-parent .sub-menu li a:hover { text-decoration: underline; color: white; } 
.nav2 .sub-menu-parent:focus .sub-menu,
.nav2 .sub-menu-parent:focus-within .sub-menu,
.nav2 .sub-menu-parent:hover .sub-menu { visibility: visible; opacity: 1; height: auto; transform: translateY(0); transition-delay: 0s, 0s, 0.3s; z-index: 100; transition: all 0.3s ease-in-out; } 
.nav2 .sub-menu-parent:focus .sub-menu a,
.nav2 .sub-menu-parent:focus-within .sub-menu a,
.nav2 .sub-menu-parent:hover .sub-menu a { visibility: visible; opacity: 1; } 
.nav3 { width: 100%; max-width: 900px; position: relative; } 
.nav3:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.nav3 ul li { list-style-type: none; } 
.nav3 ul.main-menu { width: 100%; background-color: #192C4F; padding: 1rem; float: left; } 
.nav3 ul.main-menu li { float: left; } 
.nav3 a.d1 { color: white; display: block; padding: 1em 2em; text-decoration: none; font-size: 16px; } 
.nav3 .sub-menu-parent { position: relative; } 
.nav3 .sub-menu-parent .sub-menu { position: absolute; top: 100%; left: 0; width: 100%; background-color: transparent; padding: 15px; visibility: hidden; opacity: 0; transform: translateY(-20px); z-index: 101; } 
.nav3 .sub-menu-parent .sub-menu li { width: 100%; } 
.nav3 .sub-menu-parent .sub-menu li a { width: 100%; color: #808080; font-size: 14px; line-height: 1.5; padding: 5px; text-decoration: none; display: block; visibility: hidden; opacity: 0; } 
.nav3 .sub-menu-parent .sub-menu li a:hover { text-decoration: underline; } 
.nav3:focus .sub-menu,
.nav3:focus-within .sub-menu,
.nav3:hover .sub-menu { visibility: visible; opacity: 1; z-index: 101; transform: translateY(0); transition-delay: 0s, 0s, 0.3s; transition: all 0.3s ease-in-out; } 
.nav3:focus .sub-menu a,
.nav3:focus-within .sub-menu a,
.nav3:hover .sub-menu a { visibility: visible !important; opacity: 1 !important; } 
.nav3 .sub-menu-bg { position: absolute; top: 100%; left: 0; width: 100%; height: 0; background-color: white; border: 1px solid #e6e6e6; padding: 15px; visibility: hidden; opacity: 0; transform: translateY(-20px); z-index: -1; } 
.nav3:focus .sub-menu-bg,
.nav3:focus-within .sub-menu-bg,
.nav3:hover .sub-menu-bg { visibility: visible; opacity: 1; height: 200px; z-index: 100; transform: translateY(0); transition-delay: 0s, 0s, 0.3s; transition: all 0.3s ease-in-out; } 

/*Index*/
.index { width: 100%; height: 100vh; position: relative; padding-bottom: 100px; } 
.index .controls { width: 100%; float: left; } 
.index .controls:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.index .controls .bttn { margin: 5px; float: left; } 
.index .controls .bttn.active { background-color: #4a65f6 !important; color: white; } 
.index .styles { width: 100%; float: left; margin-top: 20px; } 
.index .styles .mix { display: none; } 
.index .styles:after { content: ""; height: 0; line-height: 0; clear: both; display: block; *zoom: 1; } 
.index .styles ul,
.index .styles li { list-style: none; } 
.index .styles ul { width: 100%; float: left; } 
.index .styles ul li { float: left; margin: 5px; } 
.index .styles ul a { display: block; width: 150px; height: 150px; text-align: center; font-size: 1.4rem; border: 1px solid #d9d9d9; text-decoration: none; transition: all 0.2s ease-in-out; line-height: 1.4; } 
.index .styles ul a i { width: 0; height: 100%; display: inline-block; vertical-align: middle; } 
.index .styles ul a span { width: 100%; display: inline-block; vertical-align: middle; color: #4d4d4d; line-height: 1.4; } 
.index .styles ul a:hover { border: 1px solid black; border: 2px solid black; -moz-box-shadow: inset 0 0 0 2px black; -webkit-box-shadow: inset 0 0 0 2px black; box-shadow: inset 0 0 0 2px black; } 
.index .styles ul a:hover span { color: black; font-weight: bold; } 
.index .bottom { position: fixed; left: 0; bottom: 0; width: 100%; height: 80px; background-color: #333333; color: white; font-size: 16px; padding: 20px; line-height: 40px; } 
.index .bottom a { border: 1px solid white; width: 120px; height: 40px; text-align: center; line-height: 34px; display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; margin-right: 15px; } 
.index .bottom a:hover { border: 2px solid white; -moz-box-shadow: inset 0 0 0 2px white; -webkit-box-shadow: inset 0 0 0 2px white; box-shadow: inset 0 0 0 2px white; } 

/*학생 일괄등록*/
.memAlladdPop h1 { width: 100%; font-size: 2.8rem; font-weight: 500; text-align: center; color: #fff; background: #4a65f6; border-radius: 20px 20PX 0 0; margin: 0; padding: 22px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
.memAlladdPop .popup1 { background-color: #fff; } 
.memAlladdPop .file_input { text-align: center; } 
.memAlladdPop .file_input label { position: relative; display: inline-block; width: 100px; height: 40px; line-height: 40px; font-size: 14px; text-align: center; color: #fff; background-color: #32334f; border-radius: 30px; cursor: pointer; } 
.memAlladdPop .file_input input[type="file"] { position: absolute; width: 0; height: 0; visibility: hidden; } 
.memAlladdPop .file_input input[type=text] { display: inline-block; width: 400px; height: 40px; line-height: 40px; font-size: 14px; border: 1px solid #dddddd; color: #666666; padding: 0 10px; margin-right: 5px; } 
.memAlladdPop .bttns { text-align: center; } 
.memAlladdPop .bttns button { display: inline-block; }

 /*체크박스 커스텀*/
 input[type="checkbox"] {
    appearance: none; width:14px;height:14px;border-radius:3px;background-color: #fff; border: 1px solid #a7a7a7;
}
input[type="checkbox"]:checked{
    appearance: none; width:14px;height:14px; background-image: url(/images/ttFriendship/checkbox.png); background-size: 62%; background-repeat: no-repeat; background-position: right 47% bottom 50%; background-color: #54c654; border: none;
}

/* 다회차 분석 리포트 팝업-이중 스크롤 제거 */
body:has(.popup2, .reportpopup2){height:auto;}

/* 회원정보-인증코드 등록 버튼 */
.contents.myinfo .info_item button {margin-left:12px;min-width:60px;}

/* 로고 교체(세로형 공통) 251112 */
.cmmlogo{width:200px;}
.sub-tt{font-size:22px;text-align:center;letter-spacing: -1px;padding-top:18px;font-weight:500;}
.sub-tt b{color:#3EA2FF;font-weight:700;}
@media (max-width: 599px) {
  .cmmlogo{width:140px;}
  .sub-tt{font-size:16px;}
}
@media (max-width: 480px) {
  .cmmlogo{width:100px;}
  .sub-tt{padding-top:10px;}
}