/* 폰트 파일 불러오기 */
@font-face {
	font-family: "Noto Sans KR";
	font-weight: 400;
	src: url("../fonts/notosanskr-regular.woff2") format("woff2"),
			url("../fonts/notosanskr-regular.woff") format("woff")
}

@font-face {
	font-family: "Noto Sans KR";
	font-weight: 500;
	src: url("../fonts/notosanskr-medium.woff2") format("woff2"),
			url("../fonts/notosanskr-medium.woff") format("woff")
}

@font-face {
	font-family: "Noto Sans KR";
	font-weight: 700;
	src: url("../fonts/notosanskr-bold.woff2") format("woff2"),
			url("../fonts/notosanskr-bold.woff") format("woff")
}

/* 엘리먼트 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; position: relative; font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.5px; outline: none !important; word-break: keep-all; outline: none; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; border-radius: 0; border: 0; touch-action: pan-y; }
*:focus { outline: none; }
*::selection { background-color: #000; color: #FFF; }
*::placeholder { color: #CCC; }
html, body { width: 100%; float: left; color: #000; font-size: 13px; background-color: #FEFEFE; }
html { max-width: 800px; margin: 0 auto; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
body { overflow-x: hidden; }

a { text-decoration: none; color: inherit; }
img { vertical-align: middle; max-width: 100%; }
ul, li { list-style: none; }
textarea, input { resize: none; font-size: 13px; }

.left { float: left; }
.right { float: right; }

/* labelBox */
label.labelBox { float: left; font-size: 13px; font-weight: 500; }
label.labelBox > .square { width: 20px; height: 20px; float: left; border: 1px solid #CCC; text-align: center; line-height: 20px; margin-right: 5px; border-radius: 5px; }
label.labelBox > .square > i { color: #333; opacity: 0; font-size: 11px; }
label.labelBox > .label { height: 20px; line-height: 20px; float: left; color: #999; }
label.labelBox > input { display: none; }
label.labelBox > input:checked + .square > i { opacity: 1; } 
label.labelBox > input:checked ~ .label { color: #333; }

/* swiper */
.swiper-pagination-bullet { border-radius: 8px; transition: width 0.5s; }
.swiper-pagination-bullet-active { width: 40px; background: #333; }
.swiper-pagination-bullet.white { background: #FFF !important; }

/* section */
.section { width: 100%; float: left; margin-top: 30px; }
.section.page { margin-top: 100px; padding: 20px; }
.section > .titleBox { width: 100%; float: left; display: table; table-layout: fixed; padding: 20px; z-index: 2; }
.section > .titleBox > div { display: table-cell; vertical-align: middle; }
.section > .titleBox > .title > p { width: 100%; float: left; }
.section > .titleBox > .title > p.big { font-weight: bold; font-size: 21px; color: #000; }
.section > .titleBox > .title > p.small { font-weight: 500; font-size: 12px; color: #999; }
.section > .titleBox > .more { width: 20px; }
.section > .titleBox > .more > a { display: inline-block; width: 20px; vertical-align: middle; }
.section.padding { padding: 20px; }
.section.padding > .titleBox { padding: 0; margin-bottom: 20px; }

/* intro */
#intro { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; overflow: hidden; }
#intro > .background { width: 110%; height: 100%; float: left; left: -5%; transition: left 5s; background-image: url("../images/intro/bg.jpg"); background-size: cover; background-position: center top; }
#intro > img { position: absolute; width: 100%;  left: 0; top: 0; z-index: 2; }
#intro.active > .background { left: -10%; }

/* 공용상단영역 */
#header { position: fixed; width: 100%; max-width: 800px; left: 50%; margin-left: -400px; top: 0; z-index: 10; padding: 0 20px; opacity: 0; }
#header > div { height: 50px; line-height: 50px; z-index: 2; }
#header > .title { float: left; font-size: 15px; font-weight: bold; opacity: 0; }
#header > .title > img { height: 28px; top: -1px; margin-right: 5px; }
#header > .right { float: right; }
#header > .right > a { font-size: 17px; margin-left: 20px; color: #000; }
#header > .right > a:first-of-type { margin-left: 0; }
#header > .right > a > i { vertical-align: middle; }
#header.active { -webkit-backdrop-filter: blur(200px); -moz-backdrop-filter: blur(200px); -ms-backdrop-filter: blur(200px); backdrop-filter: blur(200px); }
#header.active > .title { opacity: 1; }
#header.active > .right > a { color: #000 !important; }
#header.white > .right > a { color: #FFF; }
#header > .cover {  position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; opacity: 0.6; border-bottom: 1px solid #EEE; display: none; }
#header.active > .cover { display: block; }

/* 공용하단영역 */
#footer { position: fixed; max-width: 800px; width: 100%; left: 50%; margin-left: -400px; bottom: 0; z-index: 12; -webkit-backdrop-filter: blur(200px); -moz-backdrop-filter: blur(200px); -ms-backdrop-filter: blur(200px); backdrop-filter: blur(200px); opacity: 0; }
#footer > ul { width: 100%; float: left; z-index: 2; }
#footer > ul > li { width: 20%; height: 50px; float: left; }
#footer > ul > li > a { width: 100%; float: left; text-align: center; padding: 8px 0; color: #BBB; }
#footer > ul > li > a > i { width: 100%; float: left; font-size: 20px; }
#footer > ul > li > a > span { width: 100%; float: left; font-size: 10px; letter-spacing: -1px; font-weight: 500; margin-top: 5px; }
#footer > .cover {  position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; opacity: 0.8; border-top: 1px solid #EEE; }

/* 콘텐츠영역 */
.contents { position: fixed; max-width: 800px; width: 100%; height: 100%; left: 50%; margin-left: -400px; top: 0; z-index: 1; background-color: #FEFEFE; overflow-y: auto; opacity: 0; }
.contents.active { display: block !important; opacity: 1; }
.contents > div { width: 100%; float: left; }
.contents > div > .menuTitle { position: absolute; top: 50px; left: 20px; z-index: 2; font-size: 24px; font-weight: bold; color: #000; }
.contents > div > .menuTitle.white { color: #FFF; }
.contents > div > .copyright { width: 100%; float: left; padding: 40px 20px; padding-bottom: 200px; border-top: 1px solid #F1F1F1; }
.contents > div > .copyright > p { width: 100%; float: left; text-align: center; font-size: 11px; color: #999; }

/* main */
#mainSlide { width: 100%; float: left; overflow: hidden; padding-bottom: 130%; }
#mainSlide > .cover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; display: none; }
#mainSlide > .swiper { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#mainSlide > .swiper > ul { width: 100%; height: 100%; float: left; }
#mainSlide > .swiper > ul > li { width: 100%; height: 100%; float: left; }
#mainSlide > .swiper > ul > li a { width: 100%; height: 100%; float: left; }
#mainSlide > .swiper > ul > li .visual { width: 100%; height: 100%; float: left; }
#mainSlide > .swiper > ul > li .info { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; bottom: -10px; opacity: 0; }
#mainSlide > .swiper > ul > li .info.active { opacity: 1; bottom: 0; }

#mainQuickBox { width: 100%; float: left; overflow: hidden; padding: 50px; margin-top: -40px; margin-bottom: -20px; }
#mainQuickBox > ul { width: 100%; float: left; }
#mainQuickBox > ul > li { width: 120px; float: left; padding: 10px 0; background-color: #FFF; margin-right: 20px; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 20px; }
#mainQuickBox > ul > li > a { width: 100%; float: left; }
#mainQuickBox > ul > li > a > img { width: calc(100% - 80px); float: left; margin: 0 40px; }
#mainQuickBox > ul > li > a > span { width: 100%; float: left; padding-bottom: 30px; margin-top: 15px; font-weight: 500; color: #333; font-size: 13px; text-align: center; }
#mainQuickBox > ul > li.last { box-shadow: none; opacity: 0.5; margin-right: 0; }

#mainPeopleBox { width: 100%; float: left; overflow: hidden; padding: 40px 20px; margin-top: -40px; margin-bottom: -20px; }
#mainPeopleBox > ul { width: 100%; float: left; }
#mainPeopleBox > ul > li { width: 85%; float: left; background-color: #FFF; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 20px; overflow: hidden; }
#mainPeopleBox > ul > li > a { width: 100%; float: left; display: table; table-layout: fixed; }
#mainPeopleBox > ul > li > a > p { height: 200px; display: table-cell; vertical-align: top; }
#mainPeopleBox > ul > li > a > .img { width: 120px; }
#mainPeopleBox > ul > li > a > .img > img { width: 100%; }
#mainPeopleBox > ul > li > a > .info { padding: 15px; }
#mainPeopleBox > ul > li > a > .info > .name { width: 100%; float: left; font-weight: 500; font-size: 18px; color: #000; margin-bottom: 5px; }
#mainPeopleBox > ul > li > a > .info > .about { width: 100%; float: left; font-weight: 500; font-size: 12px; color: #666; line-height: 17px; }
#mainPeopleBox > ul > li > a > .info > .more { position: absolute; width: calc(100% - 30px); height: 40px; line-height: 40px; border-radius: 10px; font-weight: 500; color: #FFF; text-align: center; left: 15px; bottom: 15px; font-size: 12px; }
#mainPeopleBox > ul > li > a > .info > .more > img { height: 20px; margin-right: 5px; top: -1px; }

#mainMapBox { width: 100%; float: left; }
#mainMapBox > .location { width: 100%; height: 40px; line-height: 40px; float: left; border-radius: 15px; text-align: center; background-color: #F1F1F1; color: #333; cursor: pointer; font-size: 13px; font-weight: 500; }
#mainMapBox > .location > i { color: #DC3333; margin-right: 5px; }
#mainMapBox > .location > .none { opacity: 0.3; }
#mainMapBox > .visual { width: 100%; float: left; border-radius: 20px; overflow: hidden; margin-top: 10px; }
#mainMapBox > .visual > img { width: 100%; float: left; }
#mainMapBox > .visual > .info { position: absolute; left: 0; top: 0; z-index: 2; }

#mainVideoBox { width: 100%; float: left; overflow: hidden; padding: 40px 20px; margin-top: -40px; margin-bottom: -40px; }
#mainVideoBox > ul { width: 100%; float: left; }
#mainVideoBox > ul > li { width: 90%; float: left; }
#mainVideoBox > ul > li > .iframe { width: 100%; float: left; background-color: #FFF; border-radius: 20px; overflow: hidden; padding-bottom: 56%; }
#mainVideoBox > ul > li > .iframe > iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 20px; }
#mainVideoBox > ul > li > .iframe > .cover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; cursor: pointer; }
#mainVideoBox > ul > li > .info { width: 100%; float: left; padding: 15px 10px; padding-bottom: 0; }
#mainVideoBox > ul > li > .info > p { width: 100%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mainVideoBox > ul > li > .info > p.title { font-weight: bold; font-size: 16px; color: #333; }
#mainVideoBox > ul > li > .info > p.sub { font-weight: 500; font-size: 12px; color: #999; margin-top: 2px; }

/* nav */
#menu_nav .copyright { display: none; }
#menu_nav .list { width: 100%; float: left; margin-bottom: 30px; padding-bottom: 20px; }
#menu_nav .list:last-of-type { margin-bottom: 0; }
#menu_nav .list > li { width: 100%; float: left; }
#menu_nav .list > li.title { font-size: 18px; font-weight: bold; color: #000; }
#menu_nav .list > li.item { margin-top: 20px; }
#menu_nav .list > li.item > a { width: 100%; float: left; font-size: 14px; font-weight: 500; color: #444; padding-left: 10px; }
#menu_nav .list > li.item > a > i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* shopListBox */
.shopListBox { width: 100%; float: left; margin-bottom: 10px; }
.shopListBox > .shopViewBox { width: 100%; float: left; margin-bottom: 20px; display: none; }
.shopListBox > .shopViewBox > .viewNotice { width: 100%; height: 40px; line-height: 40px; float: left; border-radius: 15px; font-size: 12px; font-weight: 500; background-color: #F2F2F2; margin-bottom: 10px; color: #666; text-align: center; }
.shopListBox > .shopViewBox > .viewNotice > i { margin-right: 5px; color: #444; }
.shopListBox > .shopViewBox > .viewItem { width: 100%; float: left; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 20px; overflow: hidden; z-index: 2; display: none; text-align: center; }
.shopListBox > .shopViewBox > .viewItem > img { width: 100%; float: left; }
.shopListBox > ul { width: 100%; float: left; margin-bottom: -15px; }
.shopListBox > ul > li { width: calc(calc(100% - 15px) / 2); float: left; margin-right: 15px; background-color: #FFF; margin-bottom: 15px; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 20px; cursor: pointer; overflow: hidden; padding-bottom: 15px; transition: box-shadow 0.5s; }
.shopListBox > ul > li.active { box-shadow: 2px 10px 20px 0 rgb(0 0 0 / 25%); }
.shopListBox > ul > li:nth-of-type(2n) { margin-right: 0; }
.shopListBox > ul > li > div { width: 100%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shopListBox > ul > li > .img { background-color: #DDD; margin-bottom: 15px; }
.shopListBox > ul > li > .img > img { width: 100%; float: left; }
.shopListBox > ul > li > .category { padding: 0 15px; font-size: 11px; font-weight: 500; color: #999; text-align: left; margin-bottom: 2px; }
.shopListBox > ul > li > .name { padding: 0 15px; font-size: 16px; font-weight: bold; color: #333; text-align: left; }
.shopListBox > ul > li > .icon { padding: 0 15px; text-align: left; }
.shopListBox > ul > li > .icon > div { height: 25px; line-height: 25px; float: left; font-size: 11px; font-weight: 500; }
.shopListBox > ul > li > .icon > .vr { color: #CCC; }
.shopListBox > ul > li > .icon > .vr > i { margin-right: 5px; }
.shopListBox > ul > li > .icon > .vr.active { border-color: #666; color: #666; }
.shopListBox > ul > li > .icon > .review { margin-left: 15px; }
.shopListBox > ul > li > .icon > .review > i { color: #CCC; margin-left: -2px; }
.shopListBox > ul > li > .icon > .review > i.fas { color: #F3c104; }
.shopListBox > ul > li > .icon > .review > span { color: #F3c104; margin-left: 5px; }
.shopListBox > ul > li > .price { padding: 0 15px; margin-top: 10px; }
.shopListBox > ul > li > .price > p { width: 100%; float: left; text-align: right; }
.shopListBox > ul > li > .price > .discount { font-size: 12px; color: #AAA; text-decoration: line-through; }
.shopListBox > ul > li > .price > .price { font-size: 18px; color: #000; font-weight: bold; }

.shopNoneBox { width: 100%; float: left; padding: 50px 0; display: none; }
.shopNoneBox > * { width: 100%; float: left; text-align: center; }
.shopNoneBox > i { margin-bottom: 20px; font-size: 64px; color: #BBB; }
.shopNoneBox > p { font-size: 12px; color: #CCC; }

#shopCategoryBox { margin-top: 100px; padding: 0 20px; }
#shopCategoryBox > ul { width: 100%; float: left; }
#shopCategoryBox > ul > li { width: auto; height: 40px; line-height: 40px; float: left; padding: 0 15px; background-color: #F2F2F2; margin-right: 10px; border-radius: 10px; color: #AAA; cursor: pointer; font-weight: 500; }
#shopCategoryBox > ul > li > span { margin-left: 3px; opacity: 0.7; }
#shopCategoryBox > ul > li:last-of-type { margin-right: 0; }
#shopCategoryBox > ul > li.active { color: #FFF; }

#shopSearchBox { margin-top: 15px; margin-bottom: 10px; padding: 0 20px; }
#shopSearchBox > div { width: 100%; height: 50px; float: left; border-radius: 10px; overflow: hidden; }
#shopSearchBox > div > input { width: calc(100% - 60px); height: 100%; float: left; padding: 0 15px; background-color: #F4F4F4; font-weight: 500; font-size: 13px; color: #333; }
#shopSearchBox > div > button { width: 60px; height: 100%; float: left; background-color: #333; color: #FFF; font-weight: bold; font-size: 14px; }

/* moreBtnBox */
.moreBtnBox { width: 100%; float: left; margin-top: 20px; }
.moreBtnBox > button { width: 100%; height: 60px; float: left; color: #FFF; font-weight: bold; font-size: 15px; border-radius: 15px; }

/* map */
#menu_map .section > .location { width: 100%; height: 40px; line-height: 40px; float: left; border-radius: 15px; text-align: center; background-color: #F1F1F1; color: #333; cursor: pointer; font-size: 13px; font-weight: 500; margin-bottom: 15px; }
#menu_map .section > .location > i { color: #DC3333; margin-right: 5px; }
#menu_map .section > .location > .none { opacity: 0.3; }

#menu_map .section > .iframe { width: 100%; padding-bottom: 110%; float: left; }
#menu_map .section > .iframe > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 20px; }
#menu_map .section > .iframe > .cover { z-index: 2; }

#menu_map .section > .none { width: 100%; float: left; margin-top: 20px; padding: 50px 0; }
#menu_map .section > .none > * { width: 100%; float: left; text-align: center; }
#menu_map .section > .none > i { margin-bottom: 20px; font-size: 64px; color: #BBB; }
#menu_map .section > .none > p { font-size: 12px; color: #CCC; }

/* match */
#menu_match .titleBox { padding: 20px 10px; padding-bottom: 10px; }

#menu_match .peopleBox { margin-top: 100px; padding: 25px 20px; padding-top: 0; }
#menu_match .peopleBox > ul { width: 100%; float: left; }
#menu_match .peopleBox > ul > li { width: 250px; float: left; background-color: #FFF; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); border-radius: 20px; overflow: hidden; margin-right: 20px; transition: box-shadow 0.5s; cursor: pointer; }
#menu_match .peopleBox > ul > li > .border { position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top: 0; border-radius: 20px; border: 1px solid #000; opacity: 0; transition: opacity 0.5s; }
#menu_match .peopleBox > ul > li.active { box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 20%); }
#menu_match .peopleBox > ul > li.active > .border { opacity: 0.1; }
#menu_match .peopleBox > ul > li:last-of-type { margin-right: 0; }
#menu_match .peopleBox > ul > li > .people { width: 100%; float: left; display: table; table-layout: fixed; }
#menu_match .peopleBox > ul > li > .people > p { height: 165px; display: table-cell; vertical-align: top; }
#menu_match .peopleBox > ul > li > .people > .icon { width: 100px; background-color: #CCC; overflow: hidden; }
#menu_match .peopleBox > ul > li > .people > .icon > i { position: absolute; font-size: 80px; color: #FFF; left: 50%; transform: translateX(-50%); margin-left: -10px; bottom: -5px; opacity: 0.7; }
#menu_match .peopleBox > ul > li > .people > .img { width: 100px; }
#menu_match .peopleBox > ul > li > .people > .img > img { width: 100%; }
#menu_match .peopleBox > ul > li > .people > .info { padding: 15px; }
#menu_match .peopleBox > ul > li > .people > .info > .name { width: 100%; float: left; font-weight: 500; font-size: 18px; color: #000; margin-bottom: 5px; }
#menu_match .peopleBox > ul > li > .people > .info > .about { width: 100%; float: left; font-size: 12px; color: #666; line-height: 17px; }
#menu_match .peopleBox > ul > li > .people > .info > .more { position: absolute; width: calc(100% - 30px); height: 40px; line-height: 40px; border-radius: 10px; font-weight: 500; color: #FFF; text-align: center; left: 15px; bottom: 15px; font-size: 12px; }
#menu_match .peopleBox > ul > li > .people > .info > .more > img { height: 20px; margin-right: 5px; top: -1px; }

#menu_match .frmBox { width: 100%; float: left; margin-bottom: 20px; }
#menu_match .frmBox > input { width: 100%; height: 50px; float: left; border-radius: 15px; background-color: #F5F5F5; padding: 0 15px; font-weight: 500; font-size: 13px; color: #333; }
#menu_match .frmBox > textarea { width: 100%; height: 100px; float: left; border-radius: 15px; background-color: #F5F5F5; padding: 15px; font-weight: 500; font-size: 13px; color: #333; }
#menu_match .frmBox.check { padding: 0 10px; }
#menu_match .frmBox.check > .labelBox { margin-right: 10px; margin-bottom: 5px; }

#menu_match .checkList { width: 100%; float: left; padding: 0 10px; }
#menu_match .checkList > .labelBox { width: 100%; float: left; margin-bottom: 5px; }

/* login */
#menu_login .section > div { width: 100%; float: left; }

#loginBox { border-radius: 20px; overflow: hidden; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 10%); }
#loginBox > ul { width: 100%; float: left; }
#loginBox > ul > li { width: 100%; float: left; border-bottom: 1px solid #EEE; }
#loginBox > ul > li:last-of-type { border-bottom: 0; }
#loginBox > ul > li > input { width: 100%; height: 50px; float: left; font-weight: 500; font-size: 13px; color: #333; background-color: #FFF; padding: 0 20px 0 45px; }
#loginBox > ul > li > i { position: absolute; font-size: 16px; left: 20px; z-index: 2; top: 50%; transform: translateY(-50%); color: #AAA; transition: color 0.5s; }
#loginBox > button { width: 100%; height: 60px; float: left; color: #FFF; font-weight: bold; font-size: 15px; }

#menu_login .section > .link { text-align: center; margin: 30px 0; }
#menu_login .section > .link > a { margin: 0 10px; color: #AAA; font-size: 12px; font-weight: 500; }

#menu_login .section > .snsLogin { border-top: 1px solid #EFEFEF; padding-top: 20px; }
#menu_login .section > .snsLogin > button { width: 100%; height: 50px; float: left; border-radius: 10px; font-size: 15px; font-weight: bold; color: #FFF; margin-bottom: 10px; }
#menu_login .section > .snsLogin > button:last-of-type { margin-bottom: 0; }
#menu_login .section > .snsLogin > button > img { height: 100%; margin-right: 5px; }
#menu_login .section > .snsLogin > button.kakao { background-color: #FFE000; color: #3B1D1E; }
#menu_login .section > .snsLogin > button.facebook { background-color: #425998; }
#menu_login .section > .snsLogin > button.naver { background-color: #03D101; }

/* chat */
#menu_chat { background-color: #F2F2F2; }
#menu_chat .menuTitle { display: none !important; }
#menu_chat .copyright { display: none !important; }
#menu_chat .section { margin-top: 0; padding-top: 50px; padding-bottom: 100px; }
#menu_chat .section > div { width: 100%; float: left; padding: 20px; }

#menu_chat .chatList { width: 100%; float: left; }
#menu_chat .chatList > li { width: 100%; float: left; margin-bottom: 25px; }
#menu_chat .chatList > li:last-of-type { margin-bottom: 0; }
#menu_chat .chatList > li.company > p { text-align: left; float: left; }
#menu_chat .chatList > li.user > p { text-align: right; float: right; }
#menu_chat .chatList > li > p { width: 100%; }
#menu_chat .chatList > li > p.name { font-size: 14px; font-weight: bold; color: #333; padding: 0 10px; margin-bottom: 5px; }
#menu_chat .chatList > li > p.name > i { margin-right: 5px; }
#menu_chat .chatList > li > p.memo { width: auto; max-width: 300px; background-color: #FFF; color: #333; font-weight: 500; padding: 15px; border-radius: 15px; line-height: 18px; }
#menu_chat .chatList > li > p.date { font-size: 12px; padding: 0 10px; color: #AAA; margin-top: 10px; }
#menu_chat .chatList > li.company > p.memo { color: #FFF; }

#chatSendBox { position: fixed; max-width: 800px; width: 100%; height: 50px; left: 50%; margin-left: -400px; bottom: 50px; z-index: 13; background-color: #FFF; }
#chatSendBox > input { width: calc(100% - 70px); height: 100%; float: left; padding: 0 20px; color: #333; font-weight: 500; font-size: 13px; background-color: #FFF; }
#chatSendBox > button { width: 70px; height: 100%; float: left; text-align: center; color: #FFF; font-size: 13px; font-weight: bold; background-color: #333; }

/* video */
.videoViewBox { width: 100%; padding-bottom: 56%; float: left; border-radius: 20px; overflow: hidden; }
.videoViewBox > * { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 20px; background-color: #333; }
.videoViewBox > iframe { z-index: 2; }
.videoViewBox > p > span { width: 100%; text-align: center; font-size: 12px; color: #FFF; font-weight: 500; opacity: 0.6; top: 50%; display: inline-block; transform: translateY(-50%); }

.videoListBox { width: 100%; float: left; margin-top: 20px; margin-bottom: 10px; }
.videoListBox > ul { width: 100%; float: left; }
.videoListBox > ul > li { width: 100%; float: left; border-radius: 10px; box-shadow: 2px 5px 20px 0 rgb(0 0 0 / 15%); margin-top: 10px; background-color: #FFF; padding: 10px; display: table; table-layout: fixed; cursor: pointer; }
.videoListBox > ul > li > div { display: table-cell; vertical-align: top; }
.videoListBox > ul > li > .img { width: 100px; }
.videoListBox > ul > li > .img > img { width: 100%; float: left; border-radius: 5px; }
.videoListBox > ul > li > .info { padding-left: 10px; padding-top: 5px; }
.videoListBox > ul > li > .info > p { width: 100%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.videoListBox > ul > li > .info > p.title { font-weight: bold; font-size: 16px; color: #333; margin-bottom: 2px; }
.videoListBox > ul > li > .info > p.sub { font-weight: 500; font-size: 12px; color: #999; }

@media (max-width: 800px){
	#header, #footer, .contents, #chatSendBox { max-width: 100%; left: 0; margin-left: 0; }
}