@import url('/include/css/common.css');
@import url('/include/css/survey.css');

label.switch{ position: relative; display: inline-block; width: 55px; height: 30px; }
label.switch.small{ width:40px; height:22px; }
label.switch .slider{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cdcdcd; transition: .4s; border-radius: 30px; }
label.switch .slider:before{ position: absolute; content: ""; width: 22px; height: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
label.switch.small .slider:before{ width:14px; height:14px; }

input:checked + .slider{ background-color: #79bb33; }
input:focus + .slider{ box-shadow: 0 0 1px #79bb33; }
input:checked + .slider:before{ transform: translateX(25px); }
label.switch.small input:checked + .slider:before{ transform: translateX(18px); }

a.select{ font-weight:bold; }
a.select:before{ display:inline-block; width:10px; }
a.select.left:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d9\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; }
a.select.right:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0da\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; }
a.select.right.middle:before{ vertical-align:middle; }
a.select.up:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d8\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; width:13px; }
a.select.down:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d7\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; width:13px; }

/* --------------------------------------------------- */


html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef; }
::-webkit-scrollbar { width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: block; height: 10px; background: #f9f9f9; }
::-webkit-scrollbar-track { background: #f9f9f9; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(150, 150, 150, .2); }
::-webkit-scrollbar-thumb { height: 50px; width: 50px; background: rgba(150, 150, 150, .2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(150, 150, 150, .1); }

html, body{ width:100%; height:100%; margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; position:relative; font-size:var(--font-default-size); color: rgba(0,0,0,0.9); line-height:normal; }
body.layer{ overflow-y:hidden; position:fixed; }
body.error{ background:#44aee3; }
body.error .center{ position:absolute; top:50%; right:50%; transform: translate(50%, -50%); }
body.error img{ background:#fff; border-radius:55px; }
body.error code{ background:#fff; display:block; padding:10px; margin-bottom:20px; text-align:left; line-height:20px; font-family: 'Noto Sans KR', sans-serif; }

body.error.exception{ background:#fd8787; }

header{ border-bottom:1px solid #ccc; position:relative; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
header img{ vertical-align:middle; }
header .division{ width:100%; }

header .division a.sub_link{ font-size:12px; margin-right:10px; }
header .division a.sub_link:before{ content:'|'; font-size:12px; vertical-align:top; margin-right:10px; color:#ccc; }
header .division a.sub_link:first-child:before{ content:''; margin:0; }

header .navi_wrap{ height:90px; display:flex; align-items:center; }
header .navigation{ display:inline-block; vertical-align:middle; margin-left:70px; }
header .navigation li{ display:inline-block; font-size:1.4rem; font-weight: var(--font-lightbold); margin:0px 70px; position:relative; line-height: 30px;}
header .navigation li.on a.depth_one{ color:#6779d3; }
header .navigation li .children_group li.on a.depth_two, header .navigation .children_group a:hover{ text-decoration:underline; color:#6779d3; }
header .navigation li.navi_group.on:after{ content:''; background:#6779d3; width:130%; height:2px; position:absolute; bottom:-27px; left:-15%; }
header .navigation .children_group{ position:absolute; width:105px; z-index: 20; display:none; }
header .navigation .children_group li{ display:block; font-size:15px; margin:15px 0; }
header .navigation .children_group li:first-child{ margin-top:55px; }

header #main_menu{ position:fixed; background: #fff; box-shadow:0px 0px 2px rgb(0, 0, 0, 0.2); }
header #main_menu .children_bg{ position:absolute; top:90px; width:100%; height: 250px; background:rgba(247,247,247,0.95); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); z-index: 10; display:none; }
header #main_menu .children_bg #main_menu_cs { position: absolute; left: 10%; }
header #main_menu .children_bg #bg_menu1 { position: absolute; left: 10%; bottom: -39px; width: 300px; height: 300px; transform:rotate(90deg); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

header #main_menu .right a{ display:flex; align-items:center; margin-left:20px; }
header #main_menu .right a img{ margin-right:8px; }

footer{ border-top:1px solid #ececec; background:#fafafa; color:#444; padding:20px 0px 40px; }
footer p{ margin:10px 0; }
footer p:last-child{ margin:18px 0 0; }
footer a { color:#444; }
footer #footerMenuWrap .fright img{ margin-bottom:5px; }
footer #footerLogo{ width:106px; margin-right:26px; }
footer #footerMenu{ margin-top:9px; }
footer #footerMenu a{ padding: 0 10px; font-weight: var(--font-lightbold); }
footer #footerMenu a:first-child{ padding-left: 0; }
footer #footerMenuWrap #sslSeal{ margin-top: 10px; }
footer #footerMenuWrap .fright { position: relative; z-index: 2; }
footer #dreamInfo{ display: block; top: -50px; margin-bottom: -60px }
footer #footerMenu #dcamkr { color: #fff; background: #6779d3; }
footer #footerMenu #dcamblog { color: #fff; background: #2aac52; }
header #popup_zone .area{ position:relative; }
header #popup_zone .popup_hide{ position:absolute; right:0px; bottom:5px; font-size:13px; color:rgba(255, 255, 255, 0.7); border:1px solid #aaa; padding:1px 10px; }

.home_popup_layer{ position:absolute; border:1px solid #4d5eb1; z-index:5; }
.home_popup_layer .popup_content img{ width:100%; }
.home_popup_layer .popup_another{ width:100%; height:22px; position:relative; border-top:1px solid #4d5eb1; }
.home_popup_layer .popup_hide{ font-size:11px; position:absolute; bottom:4px; right:4px; }

#container{ margin-bottom:80px; padding-top:90px; }
#container.home{ margin-bottom:0px; padding-top:89px; }
#container .description{ background: url('/images/user/2depthBG.png') no-repeat bottom; padding: 52px 0 52px; text-align:center; }
#container .description .h0{ margin-bottom:24px; }
#container .description p{ line-height:30px; }
#container .secondary{ width:100%; display:table; }
#container .secondary a{ display:table-cell; text-align:center; width:12.5%; background:#ebebeb; font-size:16px; transition: background-color 0.2s ease; padding:28px 0; box-sizing:border-box; color:#767676; }
#container ol.secondary  a{ width:auto; padding:7px 14px; display:inline-block; font-size:14px; }
#container .secondary a:hover{ background:#ffda2f; color:#000; }
#container .secondary a.on{ background:#ffda2f; color:#000; }
#container.area .inner_wrap{ margin-top:40px; }

#container .secondary.thin a{ padding:15px; font-size:14px; }

.action_bottom{ 
	position:fixed; bottom:20px; right:20px; /*box-shadow:10px 10px 10px #ccc; outline:none;*/ width:70px; height:70px; /*border:1px solid #f9f9f9;*/ border: 1px solid #ccc; display:none;
	border-radius:35px; font-size:10px; text-align:center; /*background:rgba(200,200,200,0.2);*/ background:#f9f9f9; z-index:10; padding:15px 0; box-sizing:border-box; color:#6879d3; box-shadow: 0px 0px 5px 0 rgba(50, 50, 50, 0.3);
}

.action_bottom:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f7e4'; font-weight:bold; font-size:20px; margin-bottom:4px; display:block; color:#4254b6; }

#page_top.action_bottom{ bottom:40px; right:40px; padding:13px; }
#page_top.action_bottom:before{ content:'\f077'; margin-bottom:0px; }

/* 메인 슬라이드 */
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom:15px !important; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ outline:none; }
.swiper-pagination-bullet-active{ background:#6879d3 !important; }
.swiper-container img{ width:100%; position:relative; left:50%; transform:translate(-50%, 0); }

.item_group{ width:100%; margin-bottom:70px; }
.item_group li{ margin-bottom:10px; border:1px solid #ccc; padding:12px; box-sizing:border-box; position:relative; transition: background-color 0.2s ease; /*box-shadow:3px 3px 5px 0px #eee;*/ }
.item_group li:hover{ background:#f9f9f9; border:1px solid #d7daea; }
.item_group li:hover .thumbnail{ transform: scale(1.2); transition: transform .35s; }
.item_group li.competency .round{ position:absolute; top:5px; right:5px; color:#deff00; background:#4254b6; padding:5px 7px; font-size:10px; }
.item_group li.competency .item_infomation{ margin:5px; }
.item_group .item_empty{ text-align:center; padding:50px; }
.item_group .item_empty p{ margin:10px 0; }
.item_group .item_empty i{ font-size:28px; margin-top:10px; }
.item_group .item_infomation{ display:inline-block; margin-left:20px; vertical-align:top; /*width:610px;*/ width:750px; }
.item_group .item_infomation h1{ width:100%; letter-spacing:-2px; overflow:hidden; }
.item_group .item_infomation .absolute{ bottom: 12px; }
.item_group .label{ padding: 6px 8px; font-size:10px; }

.item_group .additory_infomation{  display:flex; justify-content:right; }
.item_group .additory_infomation .study_receive{ display:inline-block; vertical-align:middle; padding:4px 5px 4px 14px; box-sizing:border-box; background:#f1f1f1; font-size:11px; border-radius:30px; margin-bottom:12px; }
.item_group .additory_infomation .study_receive .receive_txt{ margin-right:5px; vertical-align:middle; font-weight:bold; }
.item_group .additory_infomation .label{ border-radius:30px; padding:7.5px 12px; font-size:11px; vertical-align:middle; background:#ff65a6; color:#fff; margin-right:3px; margin-bottom:12px; }
.item_group .additory_infomation .label.complete{ background:#4254b6; }

label.toggle{ width:50px; height:22px; line-height:22px; position:relative; display:inline-block; vertical-align:middle; cursor:pointer; }
label.toggle.block{ cursor:default; }
label.toggle .slider{ position:absolute; top:0; left:0; right:0; bottom:0; background:#ccc; transition:.4s; border-radius:30px; box-shadow:inset 3px 3px 10px -5px #333; }
label.toggle .slider:before{ content:''; width:14px; height:14px; position: absolute; left:calc(0% + 4px); bottom:4px; background-color:white; transition: .4s; border-radius: 50%; z-index:10; box-shadow:0px 0px 10px -3px #333; }
label.toggle .slider:after{ content:'OFF'; position:absolute; right:9px;transition:all .4s ease; font-size:10px; font-weight:bold; top:50%; transform:translateY(-50%); }
label.toggle input:checked + .slider{ background:#fedc00; }
label.toggle input:checked + .slider:before{ transform:translateX(28px); }
label.toggle input:checked + .slider:after{ content:'ON'; right:auto; left:4px; transform:translate(0.5rem, -50%); }

.item_group.half{ display:table; }
.item_group.half li{ width:calc(50% - 4px); display:table; }
.item_group.half a:nth-child(odd) li{ margin-right:8px; }
.item_group.half ul.disc li{ width:100%; }
.item_group.half .item_infomation{ width:calc(100% - 205px); }
.item_group.half .item_infomation h1{ height:56px; }
.item_group.half .item_infomation p{ margin-bottom:4px;} 
.item_group.quarter { display:table; }
.item_group.quarter li{ width:24.5%; display:table; display: inline-block; }
.item_group.quarter a:nth-child(odd) li{ margin-right:10px; }

.button.platform{ width:140px; background:#333 !important; color:#fff; text-indent:0px; border-radius:10px; border:none; }
.button.platform:before{ content:''; display:block; width:24px; height:24px; background-size:100% 100%; margin:3px auto 5px; }
.button.platform.android{  }
.button.platform.android:before{  background-image:url('/images/common/store_android.png');  }
.button.platform.ios{  }
.button.platform.ios:before{ background-image:url('/images/common/store_ios.png'); }

input[type=submit].button { /*height: 48px;*/ }

.quotes{ position:relative; }
.quotes:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f10d'; font-weight: 900; font-size:0.5em; margin:2px 3px 0px 0px; display:inline-block; vertical-align:top; }
.quotes:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f10e'; font-weight: 900; font-size:0.5em; margin:3px 0px 0px 3px; display:inline-block; vertical-align:top; }

p.icon{ text-indent:-16px; margin-left:16px !important; }
.icon.percent:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f541'; font-weight:bold; margin-left:3px; }
.icon.info:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f05a'; font-weight:bold; margin-right:5px; }
.icon.tel:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f87b'; font-weight:bold; margin-right:5px; }
.icon.web:before { font-family: 'Font Awesome 5 Brands'; content: '\f268'; font-weight: 900; margin-right: 5px; font-size: 14px; vertical-align: bottom; }
.icon.mobile:before { font-family: 'Font Awesome 5 Free'; content: '\f3cd'; font-weight: 900; font-size: 14px; margin-right: 5px; vertical-align: bottom; }
.icon.ios:before { font-family: 'Font Awesome 5 Brands'; content: '\f179'; font-weight: 900; margin-right: 5px; font-size: 15px; line-height: 1; /*vertical-align: bottom;*/ }
.icon.android:before { font-family: 'Font Awesome 5 Brands'; content: '\f17b'; font-weight: 900; margin-right: 5px; font-size: 15px; line-height: 1; vertical-align: bottom; }
.icon.certification:before { font-family: 'Font Awesome 5 Free'; content: '\f2bb'; font-weight: bold; margin-right: 5px; font-size: 14px;  vertical-align: bottom; }
.icon.right:before { font-family: 'Font Awesome 5 Free'; content: '\f0da'; font-weight: bold; margin: 0px 5px; font-size: 14px; vertical-align: middle; }
.icon.blank:after { font-family: 'Font Awesome 5 Free'; content: '\f35d'; font-weight: bold; margin-left:10px; font-size:13px; vertical-align: middle; }
.icon.ing:after { font-family: 'Font Awesome 5 Free'; content: '\f004'; font-weight: bold; position: absolute; top:19px; margin-left:5px; font-size:13px; vertical-align: middle; color:#f33f3f; animation:heart 0.9s infinite; }
.icon.message:before { font-family: 'Font Awesome 5 Free'; content: '\f086'; font-weight: bold; margin-right:5px; font-size:13px; vertical-align:middle; }

.bold{ font-weight:bold !important; }
.secondary { color: rgba(0,0,0,0.7); }
.disabled { color: rgba(0,0,0,0.4); }
.light { font-weight:lighter !important; }

.flex{ display:flex; align-items:center; }
.flex .right{ margin-left:auto; }

.grid{ display:grid; grid-gap:10px; }
.grid.two{ grid-template-columns: repeat(2, 1fr); }
.grid.three{ grid-template-columns: repeat(3, 1fr); }
.grid.four{ grid-template-columns: repeat(4, 1fr); }
.grid.five{ grid-template-columns: repeat(5, 1fr); }
.grid.six{ grid-template-columns: repeat(6, 1fr); }

.hide{ display:none !important; }
.area{ /*width:1080px;*/ width: 1200px; margin:0 auto 0; clear:both; position:relative; }

.c_blue{ color:#6779d3; }
.inline-block{ display:inline-block; }
.vertical-middle{ vertical-align:middle !important; }
.vertical-top{ vertical-align:top !important; }
.vertical-super{ vertical-align:super !important; }
.vertical-bottom{ vertical-align:bottom !important; }
.vertical-unset{ vertical-align:unset !important; }

.label{ padding:5px 10px; font-size:12px; text-align:center; border-radius:5px; line-height:1; display:inline-block; }
.label.black{ background:#ddd; color:#333; }
.label.blue{ background:#e3f5ff; color:#219dd1; }
.label.green{ background:#e4faf3; color:#16b079; }
.label.yellow{ background:#f9f3e5; color:#d19b0f; }
.label.red{ background:#fbeaea; color:#cb6363; }


.jconfirm-content{ line-height:22px; }

.jconfirm .jconfirm-box div.jconfirm-title-c{ display:flex; }
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{ line-height:1; }
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content div p{ margin:0; line-height:24px; }
.jconfirm .jconfirm-buttons{ display:flex; justify-content:end; float:unset !important; }
.jconfirm .jconfirm-buttons .btn.left{ margin-right:auto; }


.label.hash_tags{ background:transparent; color:#4254b6; display:inline-block; padding:2px 0px; /*min-width:45px;*/ }
.item_infomation .label.hash_tags:first-child{ margin-left:10px; }

.disabled{ color:rgba(0, 0, 0, 0.45) !important; }
img.smileys{ display:inline-block; vertical-align:text-bottom; }

.nice-select{ max-width:100%; height:32px !important; line-height:30px !important; font-size:13px !important; border:1px solid #ccc !important; padding-left:13px; }
.nice-select .list{ z-index:1000; max-width:100%; max-height:160px; overflow-y:auto; }
.nice-select .option{ min-height:30px; line-height:30px; }

table.table { border-top: 1px solid #ccc; margin: 20px 0; width: 100%; }
table.table tr th { background: #ececec; border-bottom: 1px solid #ccc; padding: 15px; }
table.table tr td { border-bottom: 1px solid #ccc; padding: 15px; background: #fff; }
table.table.mini { width: initial; margin: 0; }
table.table.mini tr th { padding: 1px 5px; }
table.table.mini tr td { padding: 1px 5px; }

.txt { margin: 40px 0 80px; }
.txt .box { border: 1px solid #ccc; padding: 20px 30px; background: #f5f5f5; }
.txt h1 { margin-top: 40px; margin-bottom: 25px; }
.txt h2 { position: relative; margin-top: 15px; margin-bottom: 10px; }
.txt h2:before { background: url("/images/user/context_h2.svg"); width: 25px; height: 7px; content: ""; position: absolute; top: -8px; }
.txt h3 { position: relative; margin-bottom: 5px; position: relative; padding-left: 10px; }
.txt h3:before { content: ""; height: 5px; width: 5px; background: #6779d3; position: absolute; left: 0; top: 7px; }

.hm-layer{ width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:9999; overflow-y:auto; background-color:rgba(17, 24, 39, 0.4); display:none; }
.hm-layer.open{ display:flex !important; }
.hm-layer.open.center{ display:flex; align-items:center; justify-content:center; }

.hm-layer.scroll.open{ display:block !important; }
.hm-layer.scroll.open .hm-dialog{ top:50px; left:50%; transform:translateX(-50%); margin-bottom:100px; }

.hm-layer.right .hm-dialog{ width:640px; height:100%; margin-left:auto; padding-bottom:80px; overflow-y:auto; }
.hm-layer.right .button-set{ position:fixed; width:640px; left:auto; right:0px; }
.hm-layer.center .hm-dialog{ width:800px; border-radius:8px; padding:30px 40px 80px 40px; }
.hm-layer.center .hm-dialog.large{ min-width:1400px; }
.hm-layer.center .hm-dialog.contents{ min-width:1000px; }
.hm-layer.center .hm-dialog.small{ width:500px; }

.hm-layer .hm-dialog{ background:#fff; position:relative; opacity:0; padding:30px 40px; box-sizing:border-box; box-shadow:0px 1px 10px 0px rgba(0, 0, 0, 0.3); }
.hm-layer .hm-dialog.blur{ filter: blur(3px); }
.hm-layer .hm-dialog .hm-wrap{ margin-bottom:50px; }
.hm-layer .hm-dialog :is(input[type=text], textarea){ width:100%; }
.hm-layer .hm-dialog form .separate{ margin-bottom:20px; }
.hm-layer .hm-dialog .upper_tit{ font-size:14px; margin:0px 0px 8px 0px;  color:#666; }
.hm-layer .hm-dialog .upper_tit + .button{ min-width:80px; }
.hm-layer .hm-dialog .upper_tit + .flex label{ line-height:36px; }

.hm-layer .button-set{ position:absolute; bottom:30px; left:0px; width:100%; padding:0px 40px; box-sizing:border-box; background:#fff; }
.hm-layer .button-set .button{ padding:8px 20px; font-size:13px; border-radius:8px; border:none; }
.hm-layer .button-set .right .button:not(:last-child){ margin-right:5px; }

.hm-layer table.default{ font-size:13px; }
.hm-layer table.default.column th{ text-align:left; }
.hm-layer table.default.row th{ text-align:center; }

#loading.hm-layer .hm-dialog{ width:50px; min-height:50px; background:none; padding:0; box-shadow:none; }
#loading.hm-layer .hm-dialog:befoe{ content:'';  }

#homepage-etc.hm-layer h5{ margin-top:20px; }
#homepage-etc.hm-layer ul + h6{ margin:15px auto 2px; }
#homepage-etc.hm-layer ul{ padding-left:15px; }
#homepage-etc.hm-layer ul li{ font-size:13px; }

/* 레이어 팝업 */
.layer_group{ width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:1000000; overflow-y:auto; background-color: rgba(0, 0, 0, 0.3); display:none; }
.layer_group.show{ display:block; }
.layer_group .layer_wrap{ position:absolute; background:#fff; box-sizing:border-box; padding:20px; box-shadow:7px 7px 40px 5px #666; border-radius:5px; text-align:left; z-index:100; max-width:90%; }

.layer_group .layer_wrap .layer_container{ max-width:100%; }
.layer_group .layer_wrap .layer_container.smallest{ width:auto; padding:0px 20px; }
.layer_group .layer_wrap .layer_container.small{ width:500px; }
.layer_group .layer_wrap .layer_container.medium{ width:800px; }
.layer_group .layer_wrap .layer_container.large{ width:1200px; }
.layer_group .layer_wrap .button_group{ border-top:1px solid #cdcdcd; padding-top:15px; text-align:right; }
.layer_group .layer_wrap .button_group .button{ padding:5px 15px; }
.layer_group .layer_wrap .button_group.long{ text-align:center; border:none; margin:10px auto 0; }
.layer_group .layer_wrap .button_group.long .button{ padding:8px 30px; }
.layer_group .layer_wrap ul.paging-wrap li{ width:28px; height:28px; line-height:28px; font-size:11px; }
.layer_group .layer_wrap ul.paging-wrap li i{ line-height:28px; }
.layer_group .layer_wrap .layer_container::-webkit-scrollbar { width: 5px; }
.layer_group .layer_wrap .layer_container::-webkit-scrollbar-track { background-color: #efefef; }
.layer_group .layer_wrap .layer_container::-webkit-scrollbar-thumb { background-color: #ddd; }
.layer_group .layer_wrap.long{ margin-bottom:100px; }

.layer_group .layer_wrap .select_option { margin-bottom: 20px; text-align: center; }
.layer_group .layer_wrap .select_option .button { padding: 8px; width: calc(50% - 20px); }
.layer_group .layer_wrap .select_option .button.active { background: #3985bf; border: 1px solid #2d6c9d; color: #fff; }

.layer_group #member_form{ width:auto; padding:30px; }

#loading.layer_group .layer_wrap{ background:none; box-shadow:none; padding:0; }

.search_wrap{ margin-bottom:15px; text-align:left; background: #fff; padding: 20px;  box-sizing: border-box; border: 5px solid #e7e8ea; font-size:12px; width:100%; }
.search_wrap .right{ margin-left:auto; }

.search_wrap .search_depth{ width:100%; display:flex; align-items:center; }
.search_wrap .search_depth:not(:last-child){ margin-bottom:20px; border-bottom:1px solid #eee; padding-bottom:20px; }
.search_wrap .search_depth:after{ content:''; clear:both; display:block; }

.search_wrap .division{ display:flex; align-items:center; }
.search_wrap .division .title{ margin-right:5px; font-weight:bold; }
.search_wrap .division.line:after{ content:'\2758'; margin:0px 10px 0px 7px; color:#999; font-size:16px; }

.search_wrap input[type=text]{ height:32px; line-height:32px; }
.search_wrap input.button{ height:32px; }

.search_wrap input[type=radio]{ display:none; }
.search_wrap input + label{ cursor:pointer;  }
.search_wrap label{ display:flex; justify-content:center; align-items:center; font-size:13px; }
.search_wrap label > .label{ margin:0px 0px 0px 5px; line-height:1; padding:8px 12px; border-radius:8px; }
.search_wrap input + label > .label{ opacity:0.6; }
.search_wrap label:not(:last-child){ margin-right:15px; }
.search_wrap input:checked + label > .label-txt{ text-decoration:underline; }
.search_wrap input:checked + label > .label{ opacity:1; }

/*
.search_wrap{ margin-bottom:15px; text-align:left; background: #fff; padding: 20px;  box-sizing: border-box; border: 5px solid #e7e8ea; font-size:12px; width:100%; }
.search_wrap:after{ content:''; clear:both; display:block; }
.search_wrap .division{ line-height:30px; }
.search_wrap .division .title{ margin-right:5px; font-weight:bold; vertical-align: middle; display:inline-block; line-height:31px; }
.search_wrap .division.line:after{ content:'|'; margin:0px 10px 0px 7px; color:#999; }
.search_wrap .search_depth:last-child{ margin-top:20px; border-top:1px solid #eee; padding-top:20px; }
.search_wrap .search_depth:after{ content:''; clear:both; display:block; }
.search_wrap input[type=text]{ height:32px; }
.search_wrap input.button{ height:32px; }
.search_wrap .search_depth:last-child{ margin-top:20px; border-top:1px solid #eee; padding-top:20px; }
.search_wrap .search_depth:after{ content:''; clear:both; display:block; }

.search_wrap .search_depth h1:before{ font-family:'Font Awesome\ 5 Free'; content:'\f621'; margin-right:5px; font-size:13px; vertical-align:super; color:red; }
.search_wrap.course .checkbox{ text-align:left; margin-bottom:5px; }
.search_wrap.course div:first-child{ margin-right:50px; }
.search_wrap.course label{ width:140px; }
.search_wrap.course #hrd_zero + label{ width:190px; }
.search_wrap.course #lll_card + label{ width:140px; }
.search_wrap.course div.search{ padding-top:55px; }
.search_wrap .bbs_description{ line-height:20px; }
.search_wrap .button.company{ margin-top:4px; }
*/

select{ width:100%; }
.select2-container{ margin-right:3px; font-size:13px; max-width:100%; }
.select2-container .select2-selection--single{ height:32px; border-radius:5px; border:1px solid #ccc; }
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#000; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:#000; line-height:30px; padding:0px 26px 0px 10px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ width:auto; top:3px; right:15px; }
.select2-container--default .select2-search--dropdown .select2-search__field{ border:1px solid #ccc; border-radius:5px; padding:6px 8px; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color:#3498db; }
.select2-search--dropdown{ padding:4px 4px 0px 4px; }
.select2-dropdown{ border-color:#ddd; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.select2-results__option{ padding:6px 10px; font-size:13px; }
.select2-search:not(.select2-search--hide) + .select2-results .select2-results__option:not(.select2-results__message):first-child{ margin-top:4px; }
.select2-results__option:not(.select2-results__message):last-child{ border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.select2-results__option.select2-results__message{ padding:15px 0px; text-align:center; }
.select2-container--default .select2-selection--single .select2-selection__arrow b{ transition: all 0.3s ease; border-color:#000 transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-color:transparent transparent #000 transparent; }
.select2-container.select2-container--open{ z-index:10000; }


/*
.select2-container{ margin-right:3px; font-size:14px; }
.select2-container .select2-selection--single{ height:36px; border-radius:8px; border:1px solid #e8e8e8; }
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#000; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:#000; line-height:34px; padding:0px 26px 0px 15px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ width:auto; top:5px; right:15px; }
.select2-container--default .select2-search--dropdown .select2-search__field{ border:1px solid #ccc; border-radius:5px; font-size:14px; padding:6px 8px; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color:#3498db; }
.select2-search--dropdown{ padding:4px 4px 0px 4px; }
.select2-dropdown{ border-color:#ddd; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.select2-results__option{ padding:6px 10px; }
.select2-search:not(.select2-search--hide) + .select2-results .select2-results__option:not(.select2-results__message):first-child{ margin-top:4px; }
.select2-results__option:not(.select2-results__message):last-child{ border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.select2-results__option.select2-results__message{ padding:15px 0px; text-align:center; }
.select2-container--default .select2-selection--single .select2-selection__arrow b{ transition: all 0.3s ease; border-color:#000 transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-color:transparent transparent #000 transparent; }
.select2-container.select2-container--open{ z-index:10000; }
*/

.button{ 
	display: inline-block; border: 1px solid #ddd; background: #ddd; cursor: pointer; transition: background-color 0.2s ease;
	padding: 6px 19px; position: relative; box-sizing:border-box; color:rgba(0,0,0,0.9); outline:none;
	line-height:normal; vertical-align:middle; font-size:13px; text-align:center; text-decoration: none !important; overflow:hidden;
}
.button.gray:before { width: 100%; position: absolute; top: 0; background: #fff; height: 1px; content: ""; left: 0; }
.button:hover:before { /*display: none;*/ }
.button.blue{ border: 1px solid #4d5eb1; background: #6779d3; color: #fff; }
.button.blue:hover{ border: 1px solid #4d5eb1; background: #4d5eb1; color: #fff;  }
.button.blue:before { width: 100%; position: absolute; top: 0; height: 1px; content: ""; left: 0; background: #7b8ad9; }

.button.small{ padding:3px 15px; font-size:11px; }
.button.radius{ border-radius:20px; }
.button.big{ padding:10px 48px; font-size:16px; }
.button.big.radius{ border-radius:30px; }
.button.delete{ background:#f33f3f; color:#fff; border:1px solid #f33f3f; }
.button.delete.disabled{ opacity:0.5; color:#fff !important; }
.button.add{ background:#795548; color:#fff;  border:1px solid #50382f; }
.button.yellow{ background:#FFD100; color:#000; border:1px solid #FFD100; }
.button.cancel{ background:#ddd; color:#000; border:1px solid #ccc; }
.button.save{ background:#ffb100; color:#fff; border:1px solid #ffb100; }
.button.search{ background:#2196f3; color:#fff; border:1px solid #1f7e9c; }
.button.select{ background:#4caf50; color:#fff; border:1px solid #5c8e27; }
.button.excel{ background:#217346; color:#fff; border:1px solid #1b402c; }
.button.violet{ background:#6879d3; color:#fff; border:1px solid #4254b6; }
.button.violet:hover{ background:#4254b6; color:#fff; border:1px solid #6879d3; transition: all 0.2s ease; }
.button.white{ background:#fff; color:#000; border:1px solid #4254b6; }
.button.white:hover{ background:#6879d3; color:#fff; border:1px solid #6879d3; transition: all 0.2s ease; }
.button.purple{ background:#6779d3; border:1px solid #4d5eb1; color:#fff; }
.button.kakao{ background:#fedc00; border:1px solid #d6bb08; }
.button.naver{ background:#20bc03; border:1px solid #00a030; color:#fff; }

/* Toast */
#toast-container{ z-index:1000000000; }
#toast-container.toast-top-center{ top:150px; }
#toast-container.toast-bottom-center{ bottom:120px; }
#toast-container > div{ width:360px !important; border-radius:100px; padding:15px 50px; text-align:center; opacity:0.95; }
#toast-container :is(.toast-info, .toast-success, .toast-warning, .toast-error){ background-image:none !important; }
#toast-container .toast-warning{ background:rgba(0, 0, 0, .8); }
#toast-container .toast-message{ line-height:22px; }

/* 테이블 */
table{ table-layout: fixed; font-size:14px; }
table.default i{ vertical-align:middle; }
table.default i.fa-bullhorn, table.default i.fa-key{ margin:0; }
table.default td.start_date{ border-right:none !important; position:relative; }
table.default td.start_date:after{ content:'~'; position:absolute; top:15px; right:-4px; }
table.default td.dash{ border-right:none !important; position:relative; }
table.default td.dash:after{ content:'-'; position:absolute; top:13px; right:-2px; }
table.default td.email{ border-right:none !important; position:relative; }
table.default td.email:after{ content:'@'; position:absolute; top:14px; right:-5.5px; font-size:12px; }
table.default td{ /*line-height:26px;*/ position:relative; }

table.default.column{ width:100%; border-top:1px solid #cdcdcd; text-align:center; background:#fff; margin:15px 0; }
table.default.column tr{ border-bottom:1px solid #cdcdcd; }
table.default.column td{ padding:13px; /*padding:15px;*/ /*padding:10px;*/ line-height:22px; }
table.default.column td.left{ text-align:left; }
table.default.column th{ background:#f9f9f9; padding:10px; line-height:22px; }
table.default.column .board_info{ padding:5.5px; display:inline-block; }
table.default.column .attachment{ padding:5px 10px; border-radius:5px; }
table.default.column.small{ width:70%; }
table.default.column.small td, table.default.column.small th{ padding:8px; font-size:13px; }
table.default.column .border-right{ border-right:1px solid #cdcdcd; }
table.default.column.board td{ padding:10px; }
table.default.column input[type=checkbox] + label{ line-height:32px; }

table.default.column th.essential{ position:relative; }
table.default.column th.essential:before{ content:''; }
table.default.column th.essential:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f621'; font-weight:bold; color:#ff3d00; margin-left:3px; font-size:10px; position:absolute; top:10px; }

table.rider input[type=radio] + label{ line-height:32px; }
table.rider tr p{ font-size:12px !important; }

table.default.row i{ margin:0; }
table.default.row{ width:100%; border-top:2px solid #344e81; text-align:center; background:#fff; }

table.default.row.line th:not(:last-child), 
table.default.row.line td:not(:last-child){ border-right:1px solid #cdcdcd !important; }
table.default.row.line tr:nth-child(n+2) th:last-child,
table.default.row.line th[rowspan]:not(:last-child),
table.default.row.line td[rowspan]:not(:last-child){ border-left:1px solid #cdcdcd; border-right:1px solid #cdcdcd; }

table.default.row.line a:not('.button'):hover{ color:#344e81; text-decoration:underline; }
table.default.row tr{ border-bottom:1px solid #cdcdcd; }
table.default.row tbody tr:hover{ background:#eee !important; color:#4254b6 !important; }
table.default.row tr span{ vertical-align:middle; }
table.default.row thead tr{ border-bottom:1px solid #344e81; }
table.default.row th{ padding:12px; background:#f9f9f9; }
table.default.row td{ padding:15px; }
table.default.row.share_note td{ padding:10px; height:25px; }
table.default.row tr.alt{ background:#fafafa; }
table.default.row tr.answer p{ font-size:13px !important; }

table.default.row.thin th{ padding:10px; }
table.default.row.thin td{ padding:10px; }
table.default.row td.left{ text-align:left; }
table.default.row td.right{ text-align:right; }
table.default.row tr.answer td{ padding:20px; }
table.default tr p{ margin:0; font-size:11px; }
table.default tr.cursor{ cursor:pointer; }
table.default.row.small th, table.default.row.small td{ padding:8px; font-size:13px; }

table.default.row.board td{ padding:20px 15px; }
table.default.row.board tbody tr{ height:59px; }

table.default.row td.latest{ position:relative; }
table.default.row td.latest:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f058'; font-weight: 900; margin-right:5px; position:absolute; top:14px; left:20px; font-size:17px; color:red; animation:heart 0.9s infinite; }
table.default.row td .fa-medal{ font-size:16px; }
table.default.row td.empty{ padding:80px 0 !important; color:rgba(0, 0, 0, 0.45) !important; background:#fff; }
table.default.row td.empty.thin{ padding:40px 0 !important; }
table.default.row td.empty:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f010'; font-weight: bold; display:block; margin-bottom:20px; font-size:34px; }
table.default.row td.empty.thin:before{ margin-bottom:10px; font-size:32px; }
table.default.row b.new{ background:#ffd12e; text-align:center; font-size:10px; color:#fff; border-radius:3px; padding:3px 6px; }

table.simple.row{ width:100%; border-top:3px solid #ffda2f; text-align:center; table-layout:auto; }
table.simple.row thead tr{ border-bottom:2px solid #666; font-size:14px; }
table.simple.row tbody tr{ border-bottom:1px solid #ccc; font-size:13px; }
table.simple.row tbody tr.empty td{ padding:50px; }
table.simple.row.line :is(th, td){ border-right:1px solid #cdcdcd; }
table.simple.row.line :is(th, td):last-child{ border-right:none; }
table.simple.row :is(th, td){ padding:10px; min-width:50px; white-space:nowrap; }
table.simple.row td.left{ text-align:left; }

table.simple.row tbody td .button{ padding:8px 16px; line-height:1; border:none; border-radius:8px; font-size:12px; }

table.simple.column{ width:100%; border:1px solid #ccc; text-align:left; }
table.simple.column tr{ border-bottom:1px solid #ccc; }
table.simple.column th{ font-weight:normal; padding:15px 20px; }
table.simple.column td{ padding:0px 10px; }

.board_view{ border-top:1px solid #cdcdcd; font-size:13px; }
.board_view .board_column{ display:inline-block; vertical-align:middle; }
.board_view .board_column:first-child{ width:100px; text-align:center; }
.board_view .board_column:last-child{ width:calc(100% - 104px); }
.board_view .board_title{ padding:25px 30px; font-size:20px; border-bottom:1px solid #cdcdcd; background:#f9f9f9; }
.board_view .board_title input{ padding:10px; font-size:16px; }
.board_view .board_head{ height:40px; line-height:40px; padding:5px 15px 5px 30px; border-bottom:1px solid #cdcdcd;  }
.board_view .board_head img.profile{ margin-right:5px; }
.board_view .board_head span{ margin-right:15px; display:flex; align-items:center; }
.board_view .board_table{ border-bottom:1px solid #cdcdcd; /*display:table;*/ width:100%; padding:8px; box-sizing: border-box; }
.board_view .board_body{ background:#fff; padding:40px 35px; min-height:200px; border-bottom:1px solid #cdcdcd; line-height:20px; font-size: inherit; }
.board_view .board_body > *{ max-width:100% !important; }
.board_view .board_body ul{ padding-left:20px; }
.board_view .board_body ul li{ list-style: disc; }

.board_view img{ max-width:100%; height:auto !important; }
.board_view a:hover{ text-decoration:underline; }
.board_password{ border:1px solid #ccc; margin:80px auto 0; width:340px; padding:60px 30px 70px 30px; text-align:center; box-shadow:0 1px 10px 0 rgba(0,0,0,0.3); box-sizing:border-box; }
.board_password input{ padding:10px; }
.board_password h1{ font-size:24px !important; }
.board_password i{ font-size:30px; padding:30px; border-radius:60px; border:2px solid #6779d3; color:#4254b6; }
.board_password .secret_password_error{ margin:10px auto 20px; text-align:center; background:rgb(243, 63, 63, 0.7); box-sizing:border-box; padding:10px; color:#fff; border:2px solid #f33f3f; border-radius:10px; line-height:22px; font-size:13px; }

table.table{ table-layout:auto !important; width:100% !important; border:none !important; border-top:1px solid #eee !important; }
table.table tr:first-child td, table.table tr th{ background:#f9f9f9 !important; font-weight:bold; border:none !important; }


table.table tr{ border-bottom:1px solid #eee; }
table.table tr td{ padding:10px; border:none !important; }
table.table tr td img{ width:80%; }


table.table tr td.border,
table.table tr td:not(:last-child), 
table.table tr th:not(:last-child){ border:none !important; border-right:1px solid #eee !important; }

.note-editable p{ font-size:13px !important; }

div.attachment{ padding:4px 10px; background:#fff; margin-bottom:8px; box-sizing: border-box; border:1px solid #ccc; text-align:left; font-size:12px; width:100%; line-height:17px; }
div.attachment.active{ background:#f5f5f5; }
div.attachment:last-child{ margin-bottom:0px; }
div.attachment span{ background:#344e81; color:#fff; font-size:10px; padding:0px 6px; border-radius: 10px; margin-left:5px; cursor:pointer; }

.board_comment{ margin-top:20px; padding:0px 30px; }
.board_comment .comment{ padding:15px 20px; margin:0px auto 20px; box-sizing: border-box; border-radius: 10px; font-size:13px; background:#f1f1f1; width:70%; float:left; position:relative; }
.board_comment .comment.me{ float:right; background:#d8def5; }
.board_comment .comment_list{ display:flex; flex-direction:column-reverse; max-height:500px; overflow-y:auto; padding:10px; }
.board_comment .comment_head span.fleft{ margin-right:15px; }
.board_comment .comment_head .comment_delete{ 
	position:absolute; top:-8px; right:-8px; color:#f33f3f; width:15px; height:15px; border:2px solid #f33f3f;
	text-align:center; border-radius:50%; background:#fff; padding:2px; line-height:15px; font-size:12px; display:none;
}

.board_comment .comment:hover .comment_delete{ display:block; }
.board_comment .comment_head .comment_delete:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f00d'; font-weight:bold; }
.board_comment .comment_body{ clear:both; margin-top:15px; line-height:20px; font-size:12px; width:100%; }
.board_comment .comment_write{ border:1px solid #ccc; position:relative; background:#f9f9f9; }
.board_comment .comment_write textarea{ border:none; width:100%; padding:10px; }
.board_comment .comment_write .comment_write_name{ display:block; padding:6px 10px; border-top: 1px solid #ccc; font-size:13px; }
.board_comment .comment_write .comment_write_name .notification{ float:right; margin-right:60px; }
.board_comment .comment_write .comment_write_name .notification i{ font-size:13px; margin-right:5px; }
.board_comment .comment_write .comment_save{ position:absolute; bottom:0px; right:0px; height:31px; border:none; border-radius:0; }

/* 소셜 로그인 아이콘 */
.linkage:before{ content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 5px; }
.linkage.naver:before{ background:url('/images/user/member/logo_naver.png'); }
.linkage.kakao:before{ background:url('/images/user/member/logo_kakao.jpg'); background-size:100% 100%; }
.linkage.google:before{ background:url('/images/user/member/logo_google.png'); }

/* 페이징 */
ul.paging-wrap{ width:80%; margin:30px auto 0; text-align:center; }
ul.paging-wrap li{ display:inline-block; vertical-align:middle; width:32px; height:32px; line-height:32px; border:1px solid #cdcdcd; margin:0 2px; background:#fff; }
ul.paging-wrap li.active{ border:1px solid #6779d3; color:#6779d3; }
ul.paging-wrap li i{ color:#6779d3; line-height: 32px; margin:0; }
ul.paging-wrap li.disabled{ background:#fafafa; }
ul.paging-wrap li.disabled i{ color:#999; }

input[type=checkbox]{ display:none; }
input[type=checkbox] + label { font-size:16px; cursor:pointer; display:flex; align-items:center; line-height:1; }
input[type=checkbox] + label span.check{ width:20px; height:20px; margin-right:5px; box-sizing: border-box; background:#B7B7B7; position:relative; text-align:center; border-radius:5px; flex-shrink:0; }
input[type=checkbox]:disabled + label{ opacity:0.5; }
input[type=checkbox]:checked + label span.check{ background:#666; }
input[type=checkbox]:checked + label span.check:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f00c'; font-weight: bold; font-size:14px; display:inline-block; line-height:20px; color: #fff; }

input[readonly]{ background-color:rgba(239, 239, 239, 0.3); }

input.error{ border:1px dashed #ff3d00; }
input.error + label.error{ margin-left:10px; color:#ff3d00; font-size:13px; }
input.error + label.error:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f05a'; font-weight:bold; margin-right:5px; }

/* 회원 가입 */
.oauth{ padding:13px; display:block; box-sizing: border-box; text-align:center; }

#join_wrap{ width:100%; min-height:100%; background:#eee; text-align:center; display:flex; justify-content:center; }
#join_wrap .button{ font-size:13px; border-radius:5px; border:none; box-shadow:1px 1px 2px rgb(0, 0, 0, 0.2); }
#join_wrap .button:active{ box-shadow:1px 1px 1px rgb(0, 0, 0, 0.2); position:relative; top:1px; }

#join_wrap #join_header{ padding:20px; border-bottom:1px solid #eaeaea; }
#join_wrap .step_circle{ width:10px; height:10px; margin:0 10px; display:inline-block; vertical-align:middle; background:#a1a1a1; border-radius:10px; }
#join_wrap .step_circle.on{ width:15px; height:15px; background:#FFD63A; }

#join_wrap #join_footer{ padding:100px 60px 30px 60px; }
#join_wrap #join_footer a{ width:100%; }
#join_wrap #join_footer p{ font-size:12px; margin:10px 0; }
#join_wrap #join_footer .page_links{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd; display:flex; justify-content:center; }

#join_wrap #join_step_1 .join_inner.area{ width:580px; text-align:left; border-left:8px solid #FFD63A; padding:20px 32px; line-height:20px; margin-bottom:30px; }
#join_wrap #join_step_1 .join_inner.area p{ line-height:24px; }

#join_wrap :is(#join_step_3, #find_identity, #find_password) .area{ width:600px; }

.member_edit table.simple.column .button{ box-shadow:none; height:34px; line-height:34px; padding:0px 20px; background:#333; color:#fff; border:none; }
.member_edit table.simple.column input[type=text]{ padding:6px 10px; }
.member_edit #certify_limit{ display:inline-block; height:34px; line-height:34px; font-size:13px; padding:0px 15px; vertical-align:middle; border:1px solid #ccc; color:#6778d3; font-weight:bold; box-sizing:border-box; border-radius:5px; }

#join_container{ width:720px; background:#fff; margin:0px auto 0px; position: relative; text-align:center; }
#join_container .area{ width:640px; }
#join_container .area.small{ width:480px; }
#join_container .agree_each{ border:1px solid #ccc; text-align:left; }
#join_container .agree_each .title{ border-bottom:1px solid #ccc; padding:10px 20px; line-height:23px; }
#join_container .agree_each .contents{ max-height:280px; overflow-y:auto; padding:10px 20px; margin:0; font-size:12px; }
#join_container .agree_each .contents h5{ margin:5px 0; }
#join_container .agree_each .contents h6{ margin:3px 0; }
#join_container .agree_each .contents h6 + ul{ margin:0px 0px 20px 8px; }
#join_container .agree_each .ellipsis{ width:85%; }

#join_container .oauth { padding:14px 0; }
#join_container .join_warning{ background:#fff; padding:40px 50px 50px 50px; box-sizing:border-box; border:5px solid #e7e8ea; margin-bottom:40px; text-align:left; }
#join_container .join_warning.small{ padding:40px; }

#panel-additory ul.templete > li:not(:last-child){ margin-bottom:15px; padding-bottom:15px; border-bottom:1px dashed #ccc; }
#panel-additory ul.templete > li > h6{ margin-bottom:8px; }


/* 회원정보 수정 */
#edit_container{ width:1000px; margin:0 auto 0; }
#edit_container.panel{ width:80%; }

/* 아이디 / 비밀번호 찾기 */
#member_form .resident_number input{ width:calc(50% - 6px); }

/* 회원 로그인 */
#member_form{ width:720px; padding:65px 130px; margin:0 auto 0; box-sizing:border-box; z-index:1000; text-align:center; }
#member_form img{ margin-bottom:40px; }
#member_form input, #member_form select{ padding:13px; margin:0 0 15px; font-size:15px; }
#member_form hr{ margin: 45px 0; }
#member_form .button.big { padding:16px 48px; }
#member_form .button.big:before { display: none; }
#member_form .button.naver:hover { background: #20bc03; }
#member_form .button.kakao:hover { background: #fedc00; }

/* 메인 */
ul.dot.big{ font-size:15px; }
ul.dot li.item:not(:last-child){ margin-bottom:2px !important; }
ul.dot li.item{ padding: 0px 31px 0px 25px; position: relative; line-height: 24px; }
ul.dot li.item:before{ position: absolute; left: 3px; top: 3px; width: 10px; height: 100%; font-family: 'Font Awesome 5 Free'; font-weight: 900;  content: '\f192'; color: #ff4f4f; line-height: 19px; }
ul.dot li.item.blue:before{ color: #85bae3; }
ul.dot li.item.green:before{ color: #84be59; }
ul.dot.big li.item:before{ top:2.5px; }

ul.disc{ padding-left:5px; }
ul.disc li{ padding:0; margin-bottom:4px; border:none; list-style:none; display:block; }
ul.disc li:hover{ background:initial; border:none; }
ul.disc li:last-child{ margin-bottom:0px; }
ul.disc li:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f111'; font-weight:bold; color: #6779d3; margin-right:5px; vertical-align:middle; font-size:10px; position:relative; top:1px; }
ul.disc.h3 li:before{ top:-1px; }

ul.disc li span{ vertical-align:middle; display:inline-block; }
ul.disc li span.dot:after{ font-family:'Font Awesome\ 5 Free'; content:'\f142'; font-size:10px; font-weight:bold; margin:0px 5px 0px 7px; color: rgba(0,0,0,0.4); vertical-align:10%; }

@keyframes heart{
	0% { transform: scale(0); }
	5% { transform: scale(0.1); }
	10% { transform: scale(0.2); }
	15% { transform: scale(0.3); }
	20% { transform: scale(0.4); }
	25% { transform: scale(0.5); }
	30% { transform: scale(0.6); }
	35% { transform: scale(0.7); }
	40% { transform: scale(0.8); }
	45% { transform: scale(0.9); }
	50% { transform: scale(1); }
	55% { transform: scale(0.9); }
	60% { transform: scale(0.8); }
	65% { transform: scale(0.7); }
	70% { transform: scale(0.6); }
	75% { transform: scale(0.5); }
	80% { transform: scale(0.4); }
	85% { transform: scale(0.3); }
	90% { transform: scale(0.2); }
	95% { transform: scale(0.1); }
	100% { transform: scale(0); }
}

@keyframes gradient-animation {
	0% {
		background-position: 15% 0%;
	}
	50% {
		background-position: 85% 100%;
	}
	100% {
		background-position: 15% 0%;
	}
}

@keyframes frame-enter {
	0% {
		clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 100%, 100% 100%, 100% 0%, 0% 0%);
	}
	25% {
		clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 100% 100%, 100% 0%, 0% 0%);
	}
	50% {
		clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 100% 0%, 0% 0%);
	}
	75% {
		-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
	}
	100% {
		-webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
	}
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.copy_text{ cursor:pointer; }
.copy_text:hover{ text-decoration:underline; }
/*
.toast{ position:absolute; top:50%; left:50%; transform: translate(-50%, -120%); background-color: rgba(0, 0, 0, 0.7); color:#fff; padding:5px 16px; border-radius:20px; line-height:normal; font-size:11px; z-index:1050; }
.toast:after{ content: ""; position: absolute; top:100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; }
*/

/* 점검 중 */
.inspect-background{ width:100%; height:100%; position:absolute; background:rgb(255, 255, 255, 0.8); }
.inspect{ text-align:center; position:absolute; top:50%; right:50%; transform: translate(50%, -50%); padding:50px; box-sizing:border-box; /*background:rgb(255, 255, 255, 0.9);*/ }
.inspect h1{ font-size:56px !important; }
.inspect h1:before{ font-family:'Font Awesome\ 5 Free'; content:'\f071'; font-size:120px; font-weight:bold; color:red; display:block; margin-bottom:20px; }
.inspect h2{ font-size:30px !important; color:#999; margin-top:5px; }
.inspect .dot{ text-align:left; background:#f9f9f9; padding:20px; box-sizing:border-box; font-size:14px; width:700px; margin:50px auto 0; color:#666; border:5px solid #eee; }

.guide_container{ width:95%; margin:0px 30px; }
.guide_container .swiper-container{ box-shadow:0px 0px 20px 10px #ccc; border-radius:20px; }
.guide_container .swiper-slide h1{ position:absolute; z-index:1000; color:#fff; top:10px; left:10px; font-size:34px !important; padding:5px 25px; background:rgba(0, 0, 0, 0.4); border-radius:30px; }
.guide_container .swiper-slide .guide_title{ margin-bottom:10px; }

.guide_container.txt h1{ margin:0px auto 35px; }
.guide_container.txt h2.medium{ margin-left:10px; }
.guide_container.txt ul.dot{ margin-left:20px; }

.guide_container ul.dot li.item{ line-height:20px; margin-bottom:5px; }
.guide_container ul.dot li.item:before{ top:0px; }

.guide_container .pdfobject-container { width:100%; height:810px; }

#choreoathetoid .swiper-slide{ box-sizing:border-box; padding:0px 5px 30px 5px; max-width:300px; }
#choreoathetoid .swiper-slide img{ width:100%; }
#choreoathetoid .swiper-slide h4{ text-align:center; margin-top:10px; }
#choreoathetoid .swiper-pagination{ bottom:0px !important; }

.work_data table td span{ vertical-align:middle; position:relative; }
.work_data table td span:not(:last-child){ margin-right:8px; padding-right:8px; }
.work_data table td span:not(:last-child):after{ content: ''; position: absolute; right: 0; top: 50%; display: block; width: 1px; height: 13px; margin: -6px 0 0 0; background-color: #bbb; }

#form_rider h1{ font-size:30px !important; font-weight:bold; margin:100px auto 50px; }


.nice-select{ max-width:100%; height:32px !important; line-height:30px !important; font-size:12px; border:1px solid #ccc; padding-left:13px; clear:inherit; margin-right:1px; float:unset; }
.nice-select.thin{ height:28px !important; line-height:26px !important; font-size:10px; }
.nice-select:after{ margin-top:-5px; }
.nice-select:not(:last-child){ margin-right:3px; }
.nice-select .current{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; display:inline-block; }
.nice-select .list{ z-index:1000; overflow-y:auto; min-width:100%; max-height:160px; }
.nice-select .option{ min-height:30px; line-height:30px; }

/* 사전 등록 */
#tutorial_wrap{ width:85%; margin:0 auto 0; }
#tutorial_wrap #sign_container{ 
	width:200px; height:100px; border:1px solid #ddd; margin:0 auto 0; position:relative; display:flex; align-items:center; justify-content:center; font-size:30px; color:#ccc;
	border-radius:20px;
}

#tutorial_wrap #sign_container canvas{ width:100%; height:100%; position:absolute; top:0px; left:0px; }
#tutorial_wrap .button.oauth{ width:200px; display:inline-block; vertical-align:middle; }

.tt_contrainr{ text-align:left; font-size:16px; }
.tt_contrainr input[type=text]{ border-radius:5px; padding-left:10px; }
.tt_contrainr.right{ text-align:right; }
.tt_contrainr .nice-select.expiration.half{ width:calc(50% - 10px); display:inline-block; }
.tt_contrainr .quarter{ width:calc(25% - 9px); display:inline-block; }

/* -----------------------------*/

@keyframes slideInFromLeft {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

.loader {
	animation: rotate 1s infinite;
	height: 50px;
	width: 50px;
	position:absolute;
}

.loader:before,
.loader:after {
	border-radius: 50%;
	content: "";
	display: block;
	height: 20px;
	width: 20px;
}

.loader:before {
	animation: ball1 1s infinite;
	background-color: #38ceff;
	box-shadow: 30px 0 0 #6e5cfb;
	margin-bottom: 10px;
}

.loader:after {
	animation: ball2 1s infinite;
	background-color: #ffd100;
	box-shadow: 30px 0 0 #ff4f99;
}

@keyframes rotate {
	0% { transform: rotate(0deg) scale(0.8) }
	50% { transform: rotate(360deg) scale(1.2) }
	100% { transform: rotate(720deg) scale(0.8) }
}

@keyframes ball1 {
	0% {
		box-shadow: 30px 0 0 #6e5cfb;
	}
	50% {
		box-shadow: 0 0 0 #6e5cfb;
		margin-bottom: 0;
		transform: translate(15px, 15px);
	}
	100% {
		box-shadow: 30px 0 0 #6e5cfb;
		margin-bottom: 10px;
	}
}

@keyframes ball2 {
	0% {
		box-shadow: 30px 0 0 #ff4f99;
	}
	50% {
		box-shadow: 0 0 0 #ff4f99;
		margin-top: -20px;
		transform: translate(15px, 15px);
	}
	100% {
		box-shadow: 30px 0 0 #ff4f99;
		margin-top: 0;
	}
}

/* 레이아웃 */
#main_menu { z-index: 100; }
#main_menu .area.navi_wrap > .right { font-size: 0.8rem; font-weight: 600; margin-left:auto; }

/* 메인 페이지 */
#main_img_area .absolute { top: 200px; left: 0; width: 100%; }
#main_img_area .h00:not(.light) { font-size: 3rem; }
#main_img_area .button { padding: 10px 70px; border-radius: 50px; border: 0; }

#surveyfarm1 ul { display: flex; }
#surveyfarm1 ul li { background: #FFF6DB; aspect-ratio: 1 / 1; margin: 0 20px; border-radius: 10px; padding: 30px 0; box-sizing: border-box; }
#surveyfarm1 ul li:first-child { background: #DFF8F2; margin: 0; }
#surveyfarm1 ul li:last-child { background: #E9EFFF; margin: 0; }
#surveyfarm1 ul li img { width: 80%; }

#surveyfarm2 { height: 600px;  background: url("/images/user/home/bg.png") center center no-repeat;}
#surveyfarm2 .swiper-wrapper img { max-height: 373px; }

#noticearea { display: flex; }
#noticearea #notice { width: calc(100% - (320px * 2)); }
#noticearea #notice h1 { display: block; }
#noticearea #pro { background: #66A9E0; width: 318px; display: inline-block; }
#noticearea #analytics { background: #014A75; width: 318px;  display: inline-block; }

#surveyfarm2 .area { display: flex; padding: 110px 0; }
#surveyfarm2 .area > .text { width: 40%; margin-top: 30px; height: 210px; }
#surveyfarm2 .area > .text h2 { font-weight: 500; }

#surveyfarm2 .area > .text .slideNav { position: absolute; bottom: 0; }
#surveyfarm2 .area > .text .slideNav > div { display: inline-block; vertical-align: middle;}
#surveyfarm2 .area > .text .slideNav .progress { height: 5px; width: 200px; background: #fff; border-radius: 2.5px; margin: 0 10px; }
#surveyfarm2 .area > .text .slideNav .progress .now { height: 5px; width: 0; background: orange; }

.dcslide-wrapper { position: relative; width: 60%; }
.dcslide-wrapper .slider_page { position: absolute; width: 750px; height: 400px; overflow:hidden; text-align: center; }
.dcslide-wrapper .slider_page img { max-width: 100%; max-height: 100%; }

#noticearea { display: flex; padding: 80px 0; }
#noticearea #notice {  box-sizing: border-box; width: calc(100% - 650px); padding-right: 20px; }
#noticearea #notice h1 { border-bottom: 4px solid #000; padding-bottom: 20px; }
#noticearea #notice h1 #viewmore { border-radius: 30px; border: 2px solid #000; vertical-align: middle; padding: 10px 20px; font-weight: 200; font-size: 1rem; }

#noticearea #commercial { }
#noticearea #commercial > div { width: 320px; height: 400px; box-sizing: border-box; padding: 40px 0; border-radius: 10px; }
#noticearea #commercial > div:first-child { margin-right: 10px; }
#noticearea #commercial > div > div.flex{ flex-direction: column; }
#noticearea #commercial > div > div.flex > img { margin-bottom: 10px; }
#noticearea #commercial > div .align.left { width: 260px; margin: 30px auto 0; border-top: 1px solid #fff; padding-top: 20px; }

table.grid{ width:100%; display:inline-table; }
table.grid tbody tr{ border-bottom:none; }
table.grid tbody tr.empty td{ padding:65px 0px; background:rgba(200, 200, 200, 0.2); font-size:18px; border-radius:10px; text-align:center; }
table.grid thead{ display:none; }
table.grid:not(.empty) tbody{ display:grid; gap:20px; }
table.grid:not(.empty) tbody.eight{ grid-template-columns:repeat(8, 1fr); }
table.grid:not(.empty) tbody.six{ grid-template-columns:repeat(6, 1fr); }
table.grid:not(.empty) tbody.five{ grid-template-columns:repeat(5, 1fr); }
table.grid:not(.empty) tbody.four{ grid-template-columns:repeat(4, 1fr); }
table.grid:not(.empty) tbody.three{ grid-template-columns:repeat(3, 1fr); }
table.grid:not(.empty) tbody.two{ grid-template-columns:repeat(2, 1fr); }
table.grid:not(.empty) tbody td{ display:block; width:100%; padding:0; background:none; }

.paging{ display:flex; justify-content:center; align-items:center; margin-top:80px; }
.paging .pagedisplay{ font-size:14px; font-weight:bold; margin:0px 5px; }
.paging .button{ font-size:12px; width:34px; height:34px; padding:0; background:#e5e5e5; color:#6d5dff; border:none; text-align:center; border-radius:8px; box-sizing:border-box; margin:0 2px; line-height:34px; }
.paging .button.disabled{ background:#e5e5e5; color:#999 !important; cursor:no-drop; }
.paging .button:before{ font-family: 'Font Awesome\ 5 Free'; font-weight: bold; }
.paging .button.first:before{ content:'\f049'; }
.paging .button.prev:before{ content:'\f048'; }
.paging .button.next:before{ content:'\f051'; }
.paging .button.last:before{ content:'\f050'; }

#data-survey-campaign .campaign{ display:flex; align-items:center; border-radius:10px; box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.14); padding:20px; background:#fdfdfd; transition:all 0.1s ease; }
#data-survey-campaign .campaign.ing > div:nth-child(1){ width:200px; }
#data-survey-campaign .campaign.ing > div:nth-child(1) img{ width:88%; background:#fff; padding:10px; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); box-sizing:border-box; border-radius:8px; }
#data-survey-campaign .campaign.ing > div:nth-child(2){ width:750px; }
#data-survey-campaign .campaign.ing > div:nth-child(3){ width:calc(100% - 950px); }
#data-survey-campaign .campaign.ing > div:nth-child(3) a{ background-color:#ffda2f; padding:10px 20px; width:90%; display:block; margin-left:auto; box-sizing:border-box; text-align:center; font-weight:bold; border-radius:10px; }
#data-survey-campaign .campaign.ing > div:nth-child(3) a[disabled]{ background:rgba(255, 218, 47, 0.3); }
#data-survey-campaign .campaign.ing .gift{ margin-bottom:15px; }
#data-survey-campaign .campaign h4{ font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:8px }
#data-survey-campaign .campaign .bottom{ letter-spacing:-1px; }
#data-survey-campaign .campaign .partner.end{ max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#data-survey-campaign .campaign .partner:before{ font-style:italic; content:'by.'; margin-right:5px; color:#ffb900; }

:is(#data-survey-campaign, #data-agent-survey, #monitoring-collection-list) .button{ box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2); border:none; }
:is(#data-survey-campaign, #data-agent-survey, #monitoring-collection-list) .button:active{ box-shadow:1px 1px 1px rgb(0, 0, 0, 0.2); position:relative; top:1px; }
:is(#data-survey-campaign, #data-agent-survey, #monitoring-collection-list) .search_wrap{ border:0; padding:0; /*border-width:1px 0px 1px 0px; border-color:#eee; margin-bottom:50px;*/ }
:is(#data-survey-campaign, #data-agent-survey, #monitoring-collection-list) .search_wrap .search_depth:first-of-type{ border-top:1px solid #eee; padding-top:20px; }
:is(#data-survey-campaign, #data-agent-survey, #monitoring-collection-list) .search_wrap .search_depth:last-of-type{ border-bottom:1px solid #eee; padding-bottom:20px; }
:is(#data-survey-campaign, #data-agent-survey, #monitoring-collection-list) .search_wrap .division .title{ margin-right:10px; min-width:60px; }
:is(#data-agent-survey, #monitoring-collection-list) .search_wrap .nice-select{ max-width:none; }
:is(#data-agent-survey, #monitoring-collection-list) .search_wrap .nice-select .list{ max-width:none; }

.overflow-x {
    overflow-x: auto;
    padding-bottom: 5px;
}

.animation { position: relative; }
.animation_active.title { animation: ani_content_header_title ease 0.8s forwards; }
.animation_active.subtitle { animation: ani_content_sub_title ease 0.8s forwards; }

@keyframes ani_content_header_title {
	0% {
		opacity: 0;
		top: 2rem;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}

@keyframes ani_content_sub_title {
	0% {
		opacity: 0;
		top: -1rem;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}

@media (max-width: 1280px) {
	.area { width: 90%; }
	#main_img_area .absolute { top: 10%; }
	#noticearea #notice { width: 530px; }
	#noticearea #commercial { width: calc(100% - 530px); display: flex; }
	#noticearea #commercial > div { width: calc((100% / 2) - 10px); height: auto; }

	#noticearea #commercial > div > div.flex{ flex-direction:row; justify-content:center; align-items:center; margin-bottom:15px; }
	#noticearea #commercial > div > div.flex > img { width: 15%; margin:0; margin-right:5px; }
	#noticearea #commercial > div .align.left { width: 90%; }
}

@media (max-width: 900px) {
	.h00 { font-size: 2rem !important; }
	.h0 { font-size: 1.8rem !important; }
	h1, .h1 { font-size: 1.6rem !important; }
	h2, .h2 { font-size: 1.4rem !important; }
	h3, .h3 { font-size: 1.2rem !important; }
	h4, .h4 { font-size: 1rem !important; }
	h5, .h5 { font-size: 0.8rem !important; }
	h6, .h6 { font-size: 0.6rem !important; }

	.select2-container{ font-size:10px; }
	.select2-container .select2-selection--single{ height:28px; }
	.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:26px; }
	.select2-container--default .select2-selection--single .select2-selection__arrow{ top:1px; }
	.select2-results__option{ font-size:10px; }
	.select2-container--default .select2-search--dropdown .select2-search__field{ padding:4px 8px; font-size:10px; }

	#surveyfarm1{ padding:0px 20px; box-sizing:border-box; }
	#surveyfarm1 .h2{ margin-top:30px !important; }
	#surveyfarm1 ul { flex-direction: column; }
	#surveyfarm1 ul li { aspect-ratio: initial; width: 100%; margin: 0 0 10px 0 !important; }
	#surveyfarm1 ul li img { width: 30%; }
	#main_img_area .button.mt60 { font-size: 0.8rem !important; margin-top: 10px !important; padding: 5px 20px; }
	#main_img_area .absolute{ padding:0px 20px; box-sizing:border-box; }

	#surveyfarm2 { overflow: hidden; height:auto; }
	#surveyfarm2 .area{ padding:0px 20px 80px 20px; box-sizing:border-box; flex-direction: column; }
	#surveyfarm2 .area > .text { width: 100%; height:auto; }
	#surveyfarm2 .area > .text .slideNav{ width:100%; bottom:30px; }
	#surveyfarm2 .area > .text .slideNav .progress{ width:45%; }
	#surveyfarm2 .dcslide-container { margin-top:30px; }
	#surveyfarm2 .dcslide-wrapper { width:100%; }
	#surveyfarm2 .dcslide-wrapper .slider_page { position:relative; width:100%; height:auto; }

	#noticearea { width: 90%; flex-direction: column; }

	#noticearea #notice { width: 100%; margin-bottom: 80px; }
	#noticearea #notice h1 #viewmore{ padding:4px 12px; }
	
	#noticearea #commercial { flex-direction: column; width: 100%; }
	#noticearea #commercial > div { width: 100%; margin-bottom: 20px; padding: 15px 0; }
	#noticearea #commercial > div > h1 { display: inline-block; }
	#noticearea #commercial > div > img { width: 10%; vertical-align: middle; }
	#noticearea #commercial > div .align.left { margin: 0 auto; }
}