@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; list-style: none; text-decoration: none;}
body{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #fafafa;}
.wrap{max-width: 375px; height: 90vh; width: 100%; background-color: white; border: 2px solid #f0f0f0; overflow: hidden; position: relative;}
main{padding: 24px; }
header{margin-bottom: 29px; padding-top: 12px; padding-left: 24px; padding-right: 24px; height: 60px;}
i{font-size: 25px; cursor: pointer;}

input{height: 54px; width: 100%; padding: 10px; outline: none; border-radius: 8px; border: 0; background-color: #f1f1f5;  text-indent: 8px; font-size: 18px;letter-spacing: -1px; color: #191919;}
input::placeholder{color: #999999;}
input + i{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color:#d4d4d8; font-size: 15px;}
button{height: 54px; width: 100%; padding: 10px; outline: none; border-radius: 10px; border: 0; margin-bottom: 12px; font-size: 18px; letter-spacing: -0.45px; color:white; background-color: #505050; cursor: pointer;}
form + button{background-color: #3a6efe; margin-top: 32px;}
form div{position: relative; top: 0; left: 0; margin-bottom: 12px;}
iframe{width: 100%; height: 300px; display: none;}
h2{font-size: 24px; line-height: 32px; margin-bottom: 42px; font-weight: 500; letter-spacing: -0.6px; color:#191919;}
h3 span,h2 span{color:#191919}
form p{font-size: 14px; margin-bottom: 10px;}
ul{display: flex; justify-content: center; gap:5px; align-items: center;}
li{font-size: 14px; line-height: 20px; letter-spacing: -0.35px; cursor: pointer; font-weight: 400;}
li:nth-child(2){font-size: 15px; color:#D4D4D8; cursor:context-menu;}
.fa-times-circle{display: none; color: #b1b8c1;}
a{text-align: center; color:#191919; font-size: 12px; display: block; text-decoration:underline; text-underline-position: under; font-weight: 500; letter-spacing: -1px;}

/* 하단고정 css */
.bottom_fix {position: absolute; bottom: 0; left: 0; display: flex; width: 100%; z-index: 1;}
.bottom_fix button{margin: 0; width: 70%; border-radius: 0;}
.bottom_fix button:first-child{width: 30%; color: #191919; background-color: #f1f1f5;}
.bottom_fix button:last-child{background-color: #d4d4d8; color: white; cursor: auto;}

/* 버튼css */
.gray_btn{background-color:#f1f1f5; color:#191919; font-weight: 500;}
.green_btn{background-color: #03cf5c; font-weight: 500;}
.yellow_btn{background-color: #f9db00; color:#191919; font-weight: 500;}
.blue_btn{background-color: #3a6efe; color:white; font-weight: 500;}

/* input error */
.error{border: 2px solid #ea2d52;}
.error_p{color:#ea2d52; display: none; font-size: 12px; font-weight: 500; letter-spacing: -1px;}
.val_ok{border: 2px solid #3a6efe;}
.ok_p{color:#3a6efe; font-size: 12px; font-weight: 500; letter-spacing: -1px;}
.ok_btn{background-color: #3a6efe !important; cursor: pointer !important; color:white !important;}
.not_event{pointer-events: none;}

/* 동적생성 */
.pw_area, .addr_area{margin-bottom: 40px;}

.black_back{background-color: rgba(0,0,0,0.6); width: 100%; height: 100vh; z-index: 1; position: absolute; bottom: 0; left: 0; display: none;}
.slider{background-color: white; width: 100%; height: 400px; border-radius: 20px 20px 0 0; padding: 24px; position: absolute; z-index: 1; left: 0; bottom: -100vh; transition: 1s;}
.slider h3{margin-bottom: 28px; color:#191919; font-size: 20px; font-weight: 500;}
.slider input{display: none;}
.slider label{display: block; padding-left: 34px; position: relative; top: 0; left: 0; height: 36px; line-height: 36px;}
.slider label .check{position: absolute; left: 0; object-fit: scale-down; width: 24px; height: 24px; top: 50%; transform: translateY(-50%);}
.slider .checked .check{filter: invert(16%) sepia(89%) saturate(6054%) hue-rotate(213deg) brightness(97%) contrast(113%);}
.slider button{position: absolute; top: 0; right: 10px; width: 10px; height: 100%;line-height: 100%; border-radius:0; ; margin-bottom:0; padding: 0; color:#191919; background: transparent;}
.slider hr{margin: 12px 0; border:0; border-bottom: 1px solid #F1F1F5;}
.no_slider{transition: 0s;}

.text_area{width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 3; background-color: white; padding: 20px; overflow: hidden; transition: 1s; display: none;}
.text_area i{font-size: 40px; margin-bottom: 50px; cursor: pointer;}
.text_area .text_content{width: 100%; height: calc(100vh - 90px); overflow: auto; color: #7c7c7c;}
.text_area .text_content::-webkit-scrollbar{width: 1px;}
.text_area .text_content::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,1);}
.text_area .text_content::-webkit-scrollbar-track{background-color: white;}
.text_area h3{margin-bottom: 30px; color: #191919;}
.text_area h4{margin: 20px 0; color: #191919;}

main::-webkit-scrollbar{width: 1px;}
main::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,1);}
main::-webkit-scrollbar-track{background-color: white;}


.placeholder_color{color:#999999 !important;}
.radio_input{display: flex; justify-content: start; gap:30%}
.radio_input label{display: flex; align-items: center; gap:10px; cursor: pointer;}
.radio_input input{width: 15px; height: 15px; margin: 0;}
.user_data input{margin-bottom: 0;}
.add_radio{margin-bottom: 50px;}

.table_title{font-size: 14px; color: #191919; font-weight: 500;}

.checked_file{position: relative; top: 0; left: 0;}
.checked_file::after{content: ''; width: 15px; height: 15px; position: absolute; top: 50%; right: -24px; transform: translateY(-50%); background-color: #3a6efe;}
.addr_area{height: 100% !important; }
.addr_area div{width: 100% !important;}

.addr_area html::-webkit-scrollbar{width: 1px;}
.addr_area html::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,1);}
.addr_area html::-webkit-scrollbar-track{background-color: white;}

.none_file{position: relative; top: 0; left: 0;}
.none_file::after{content: ''; width: 15px; height: 15px; position: absolute; top: 50%; right: -24px; transform: translateY(-50%); background-color: #ea2d52 !important;}

.detail p{margin-bottom: 20px;}

.tab_menu{display: flex; padding:0 24px; border-bottom: 1px solid #999;}
.tab_menu p{font-size: 18px; padding-bottom: 10px; color: #b1b8c1; width: 50%; position: relative; cursor: pointer; text-align: center; height: 44px; line-height: 44px;}
.tab_menu .this_tab{top: 0;left: 0; color: #191919; font-weight: bold;}
.tab_menu .this_tab::after{position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: #3a6efe; content: '';}
.title{padding: 24px; padding-bottom: 0;}

.header_right{display: flex; gap:10px;}

/* .bottom_fix{box-shadow: 0px 0px 20px rgba(0,0,0,0.4); } */
.bottom_fix div{width: 20%;text-align: center; height: 80px; line-height: 80px; color: #b1b8c1;}
.videos {margin-bottom: 28px; cursor: pointer;}
.videos .top{padding: 0 24px; display: flex; gap:5px; align-items: center; height: 72px; }
.videos .top span img{width: 50px; object-fit: scale-down; border-radius: 50%; overflow: hidden;}
.videos .top h2{font-size: 16px; margin-bottom: 0px; line-height: unset; letter-spacing: -0.4px; color: #191919;}
.videos .top p{color:#767676; letter-spacing: -0.35px; font-weight: 300; font-size: 14px;}
.videos .mid {height: 56.25%; width: 100%;}
.videos .mid img{width: 100%; height: 100%; object-fit: cover; display:block;}
.videos .bottom{padding: 0 24px; margin-top: 20px; margin-bottom: 20px;}
.videos .bottom h2{font-size: 18px; margin-bottom: 4px; line-height: 26px; color: #191919; letter-spacing: -0.45px; }
.videos .bottom p{color:#767676; letter-spacing: -0.35px; font-weight: 300; font-size: 14px;}
.com_list {padding: 0 24px; margin-bottom: 50px;}
.com_list .top{display: flex; margin-bottom: 10px; gap:5px; position: relative;}
.com_list .top h2{font-size: 16px; margin-bottom: 0px; line-height: unset;}
.com_list .top .more{font-size: 12px; position: absolute; right: 0;}
.com_list .top p{color:#999; letter-spacing: -0.8px; font-weight: 300; font-size: 14px;}
.com_list .bottom{margin-top: 20px;}
.com_list .bottom h2{font-size: 20px; margin-bottom: 10px; line-height: unset;}
.com_list .bottom p{color:#999; letter-spacing: -0.8px; font-weight: 300; font-size: 14px;}

/* .bn{margin-bottom: 42px;} */
@media screen and (max-width:786px) {
    /* .black_back + div{height: 100vh;} */
}
.flex_group li:nth-child(3n){margin-right: 0;}
label::before{display: none;}
form p{letter-spacing: -0.35px;}
form p + span{font-size: 12px; letter-spacing: -0.3px; color:#999999; margin-top: 6px; margin-bottom: 10px; display: block;}
.files p{letter-spacing: -0.35px;}
.files p + span{font-size: 12px; letter-spacing: -0.3px; color:#999999; margin-top: 6px; margin-bottom: 10px; display: block;}
.files{margin-bottom: 0;}
.files_div{display: flex; gap:10px; margin-bottom: 0;}
.files_div div{width: 72px; height: 72px; position: relative; background: #F1F1F5; border-radius: 8px; cursor: pointer; overflow: hidden;}
.files_div div::before{position: absolute; top: 0; left: 0; content: '+'; width: 100%; height: 100%; color:#191919; font-size: 40px; opacity: 0.5; display: flex; align-items: center; justify-content: center;}
.files_div div img{width: 100%; height: 100%; object-fit: scale-down; display: none;}
.files_div div i{display: none; position: absolute; top: 0; right: 0;}
.files_div .pre_img::before{display: none;}
.files_div .pre_img i{display: block;}
.files_div .pre_img i::after{position: absolute; top: 5px; right: 5px; border-radius: 50%; background-color: white; content: '\00d7'; width: 20px; height: 20px; color:#191919;     font-style: normal; display: flex; align-items: center; font-size: 12px; justify-content: center;}
.files input{display: none;}
.files span span{color:#3A6EFE;}

.flex_group{ display: flex; flex-wrap: wrap; justify-content: start; max-height: 300px; overflow: auto;}
.flex_group::-webkit-scrollbar{width: 1px;}
.flex_group::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,1);}
.flex_group::-webkit-scrollbar-track{background-color: white;}


.popup{position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.6); height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 99;}
.popup .box{width: calc(100% - 48px); height: auto; padding: 24px; background: white; border-radius: 20px; text-align: center;}
.popup .box h2{margin-bottom: 0; font-size: 20px; letter-spacing: -0.5px; margin-top: 12px; font-weight: bold;}
.popup .box p{padding: 16px 0 36px; font-size: 14px; letter-spacing: -0.35px; font-weight: 400;}
.popup .box .btn_g{display: flex; justify-content: center; gap:11px;}
.popup .box .btn_g .ok{height: 44px; width: 134px; color: white; background-color: #3a6efe; border-radius: 8px; font-size: 14px; letter-spacing: -0.35px;}
.popup .box .btn_g .no{height: 44px; width: 134px; color: #191919; background-color: #F8F8FA; border-radius: 8px; font-size: 14px; letter-spacing: -0.35px;}
.popup .box .btn_g button{margin: 0;}

.color_b{color:#3A6EFE;}
.color_r{color: #E9002D;}

/* 반응형 */
@media screen and (max-width: 768px){
    .wrap{max-width: 100%; height: 100vh; border: 0;}
    main{overflow: auto;}
}

.main_bottom{height: 70px; width: 100%; display: flex; position: absolute; bottom: 0;}
.main_bottom div{width: 20%; text-align: center;}
.main_bottom div img{width: 36px; height: 36px; object-fit: scale-down; margin: auto; margin-bottom: 0; margin-top: 8px; display: block;}
.main_bottom div p{width: 100%; color: #191919; line-height: 18px; font-size: 12px;}

.this_page img{filter: invert(16%) sepia(89%) saturate(6054%) hue-rotate(213deg) brightness(97%) contrast(113%);}
.this_page p{color: #3A6EFE !important;}

.community li h2 span{background-color: white; border: 2px solid #3A6EFE; box-sizing: content-box; padding: 0px 4px; line-height: 18px;}
.porfile{display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; height: 56px; gap:12px;}
.icon{display: flex; gap:16px; align-items: center; width: 100%;}
.icon img{width: 48px; height: 48px; border-radius: 50%;}
.icon .info{width: calc(100% - 64px);}
.info h2{font-size: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 24px; letter-spacing: -0.4px;}
.info p{color: #767676; font-size: 12px; letter-spacing: -0.3px; line-height: 18px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.info span{color:#3A6EFE; font-size: 12px; letter-spacing: -0.3px; line-height: 18px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  display: block;}
.padding24{padding: 0 24px;}
footer{width: 100%; height: 300px; background: #f8f8fa; padding: 30px 24px; padding-bottom: 42px;} 
footer h2{font-size: 14px; letter-spacing: -0.35px; line-height: 20px; color: #191919; margin-bottom: 18px; display: flex; align-items: center;}
footer span{transform: rotate(90deg);}
footer ul{display: flex;  justify-content: start; margin-bottom: 28px;}
footer li{width: auto; font-size: 14px; letter-spacing: -0.35px; line-height: 20px; color: #191919;margin-right: 18px;}
footer p{text-align: center; font-size: 12px; letter-spacing: -0.30px; line-height: 18px; color: #191919;}
footer button{display: flex; align-items: center; justify-content: center; background-color: #F8F8FA; border: 1px solid #D4D4D8; font-size: 14px; letter-spacing: -0.35px; line-height: 20px; color: #191919; gap:6px; margin-bottom: 10px; border-radius: 8px;}
.setting{display: flex; align-items: center; justify-content: center;}

#detail_title h2{margin-bottom: 4px;}
.title h2{margin-bottom: 28px;}
#main_page header{margin-bottom: 12px;}

/* chat area */
.submit_text{position: fixed; bottom: 0; left: 0; width: 100%; height: auto; min-height: 66px; padding: 0 14px; display: flex; justify-content: center; align-items: center; gap:14px; background: white; flex-wrap: wrap; row-gap: 0;}
.submit_text textarea{width: calc(100% - 100px); border-radius: 8px; min-height: 44px; resize: none; height: auto; padding: 12px 16px; color: #191919; font-size: 14px; letter-spacing: -0.35px; line-height: 20px; border: 1px solid #D4D4D8; height: 44px; outline: none; margin: 11px 0; max-height: 84px;}
.submit_text textarea::placeholder{color: #D4D4D8;}
.submit_text textarea::-webkit-scrollbar{width: 1px;}
.submit_text textarea::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,1);}
.submit_text textarea::-webkit-scrollbar-track{background-color: white;}
.submit_text div{cursor: pointer;}

.chat_area{overflow-y: scroll;}
.chat_area::-webkit-scrollbar{width: 1px;}
.chat_area::-webkit-scrollbar-track{background-color: #F8F8FA;}
.chat_area .date{ padding: 28px 0; font-size: 12px; color:#999999; letter-spacing: -0.3px; line-height: 18px; text-align: center; clear: both;}
.chat_area .users{display: flex; width: calc(100% - 38px); gap:8px; margin-bottom: 20px; clear: both;}
.users_chat .users_name{color: #191919; font-size: 12px; letter-spacing: -0.3px; line-height: 18px;}
.users_chat .users_content{color: #191919;  font-size: 14px; letter-spacing: -0.35px; line-height: 20px;background-color: #F1F1F5; border-radius: 0 16px 16px 16px; min-height: 44px; margin-top: 4px; position: relative;}
.users_chat{max-width: calc(100% - 57px); }

.context{padding: 12px;}
.users_content img{width: 100%; max-height: 212px; object-fit: scale-down; border-radius: 16px;}
.users_time{position: absolute; left: 100%; bottom: 0; min-width: 53px; font-size: 12px; letter-spacing: -0.3px; line-height: 18px; padding-left: 4px; white-space: nowrap;}
.read{color: #FD7D00;}
.time{color:#999; }
.my{padding-bottom: 20px; clear: both; height: auto;}
.my_content{color: white;  font-size: 14px; letter-spacing: -0.35px; line-height: 20px;background-color: #3A6EFE; border-radius: 16px 0 16px 16px; min-height: 44px; margin-bottom: 20px; position: relative; float: right;  max-width: calc(100% - 97px); }
.my_content img{width:100%; max-height: 212px; object-fit: scale-down; border-radius: 16px; display: block;}
.my_time{position: absolute; right: 100%; bottom: 0; min-width: 53px; font-size: 12px; letter-spacing: -0.3px; line-height: 18px; padding-right: 4px; white-space: nowrap; text-align: right;}

.type_img{border-radius: 16px;}
.etc_tab{width: 100%; height: 240px; padding: 24px 0; }
.etc_tab ul{gap: 0; justify-content: start; flex-wrap: wrap;}
.etc_tab li{width: 25%; height: 92px; margin-bottom: 8px; text-align: center; color:#191919; font-size: 14px; letter-spacing: -0.35px; line-height: 20px; padding: 12px 17px;}
.etc_tab li div{margin: auto; width: 48px; height: 48px; text-align: center; border-radius: 50%; padding: 6px;} 
.etc_tab li:nth-child(1) div{background-color: #FD7D00;}
.etc_tab li:nth-child(2) div{background-color: #59B230;}
.etc_tab li div img{width: 36px; height:36px; filter: brightness(0) invert(1); }

.hide{display: none !important;}
.show_etc_tab{height: calc(100vh - 300px);}

.popup_img_tab{width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 2; background-color: #000;}
.popup_img_tab .header_area{display: flex; justify-content: start; align-items: center; padding: 0 24px; height: 60px; }
.popup_img_tab h2{margin-bottom: 0; color: white; width: calc(100% - 50px); text-align: center;}
.popup_img_tab .header_area img{filter: invert(1); }
.popup_img_tab .header_area .back{margin-right: 12px;}
.popup_wrap{position: relative; height: 100%;}
.popup_img_tab .bottom_area{position: absolute; bottom: 0; left: 0; height: 60px; display: flex; width: 100%;}
.popup_img_tab .bottom_area div{width: 25%; display: flex; align-items: center; justify-content: center;}
.img_area{height: calc(100vh - 120px); display: flex; align-items: center;}
.img_area img{object-fit: scale-down; width: 100%; height: 100%;}

.exit_tab{display: flex; align-items: flex-start; gap:18px; margin-bottom: 42px;}
.exit_tab a{text-align: left; font-size: 12px; line-height: 18px; letter-spacing: -0.3px; color: #999;}
.exit_tab h3{color: #191919; font-size: 18px; letter-spacing: -0.45px; line-height: 26px; font-weight: 400;}
.exit_tab p{margin: 8px 0; color: #999999; font-size: 14px; letter-spacing: -0.35px; line-height: 20px; word-break: keep-all;}

/*faq*/
.FAQ div{height: 48px; display: flex; gap:12px; align-items: center; cursor: pointer;}
.FAQ span{color:#3A6EFE; font-size: 16px; letter-spacing: -0.4px; font-family: 'GmarketSans';}
.FAQ p{color:#191919; font-size: 16px; letter-spacing: -0.4px;}

header #search_text{width: calc(100vw - 100px);}
.notice .list{justify-content: space-between;}
.notice p{text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.my_page_icon{width: 24px; height: 24px;}
.bell{width: 30px; height: 30px;}
.bell img,.my_page_icon img{width: 100%; height: 100%; object-fit: scale-down;}
.header_right{align-items: center;}
header{position: relative;}
header h2{position: absolute; top: 14px; left: 50%; transform: translateX(-50%);}

.contract_head{text-align: center; display: flex; justify-content: space-between; align-items: center; color: #191919; width: 100%;}
.contract_head h2{font-size: 20px; letter-spacing: -0.5px; margin-bottom: 0;}
.contract_head div{display: flex; justify-content: space-between; align-items: center;}
.contract_head span{color:#3A6EFE; font-size: 14px; letter-spacing: -0.35px;}

.contract_list{min-height: 52px; border-radius: 8px; background-color: #F8F8FA; margin-top: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #191919; letter-spacing: -0.35px; margin-bottom: 42px;}

.FAQ h2{font-size: 20px; margin-bottom: 11px;}
.FAQ div{height: 48px; display: flex; gap:12px; align-items: center; cursor: pointer;}
.FAQ span{color:#3A6EFE; font-size: 16px; letter-spacing: -0.4px; font-family: 'GmarketSans';}
.FAQ p{color:#191919; font-size: 16px; letter-spacing: -0.4px;}

.board_popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9;}
.board_popup main{height: calc(100vh - 90px); padding: 0; display: block;}
.board_popup .keyword_list{display: flex; flex-wrap: wrap; gap:12px; justify-content: start; margin-bottom: 56px; padding: 0 20px;}
.board_popup main h2{margin-bottom: 16px; padding: 0 20px;}
.board_popup .faq_data{color:#767676; font-size: 14px; letter-spacing: -0.35px; line-height: 20px; white-space: normal;  padding: 0 20px; margin-bottom: 42px;}
.board_popup .bar{height: 8px;width: 100%; background-color: #F8F8FA; margin-bottom: 42px;}
.board_popup .bar + h2{margin-bottom: 12px;}
.board_popup .bar + h2 + p{padding: 0 20px; color: #999999; font-size: 14px; line-height: 20px; text-decoration: underline; letter-spacing: -0.35px; margin-bottom: 70px; cursor: pointer;}
.banner_inquiry{width: 100%; margin-top: 42px;}
.banner_inquiry img{width: 100%; object-fit: cover;}
.btn_list{margin-bottom: 42px;}
#board_popup_contents p{padding: 0; margin: 0;}

.google-visualization-tooltip{border: 0 !important; border-radius:0 !important; box-shadow:0 !important; -webkit-box-shadow:0 !important;}