@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400:700&family=Nanum+Gothic:wght@400:700:800&family=Noto+Sans+KR:wght@100..900&display=swap');

*{
	margin:0px;
	padding:0px;
	font-family: "Noto Sans KR", sans-serif;
}

[class ^="pc"]
{
	display:none;
}

/****/


.phone_a_menu_right
{
	position: absolute;
        width: 60px;
        height: 60px;
        top: 10px;
        right: 10px;
        background-image: url(../../19image/index/phone_open.png);
        background-repeat: no-repeat;
        background-size: cover;
}



 
/****/
 

.phone_menu_toparea
{

        position: fixed;
        margin-right: -100%;
        right: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        background-color: #1c0d0d;
        z-index: 110;
        color: #ffffff;
        font-size: 1rem;
		padding: 0px 20px;
        box-sizing: border-box;


}


.phone_menu_toparea_quick
{
	position:relative;
}

.phone_menu_toparea_quick>ul
{
	position:relative;
	list-style-type:none;
} 



.phone_menu_toparea > div > ul
{
	position:relative;
	list-style-type:none;
}

.phone_menu_toparea > div > ul > li
{
	position: relative;
    vertical-align: top;
    font-size:1.125rem;
    font-weight: bold;
    padding: 20px 0px 20px 0px;
	border-top: 2px solid #121212;
}

.phone_menu_toparea > div > ul > li > span
{
	position:relative;
	display:inline-block;
	padding-left:10px;
	word-break: keep-all;
	font-size:1.3rem;
}


.phone_menu_toparea > div
{
	position:relative;
}
 
 /************/


.phone_menu_close
{
	position:absolute;
	width:50px;
	height:50px;
	top:20px;
	right:20px;
	background-image:url('../../19image/index/phone_close.png');
	background-repeat:no-repeat;
	background-size:cover;
	z-index:110;
}

.phone_menu_toparea > ul
{
	position:relative;
	padding:6px;
}
/*
.phone_menu_toparea li
{
	display: inline-block;
    box-sizing: border-box;
}
*/
.phone_menu_toparea li img
{
	width:100%;
}

.phone_menu_toparea li>a
{
	
	width:100%;
	height:100%;
}

.phone_menu_toparea_de
{
	position:relative;
	display:flex;
	padding:20px 0px;
	flex-direction: column;
        gap: 10px;
}

.phone_menu_toparea_de>a
{
	display:flex;
}

.phone_menu_toparea_de>a::before
{
	content:'|';
	padding:0px 10px;
}

.phone_menu_toparea_de>a:first-child::before
{
	content:none;
}

/****/
			
			a
			{
				color:inherit;
				text-decoration:none;
			}
			
			#agit_top_area
			{
				position:fixed;
				height:80px;
				width:100%;
				background-color:#000000;
				z-index:20;
			}
			
			#agit_top_area > div
			{
				position:relative;

				display:flex;
				height:100%;
				color:#ffffff;
				align-items: center;
				justify-content: space-between;
				padding: 0px 20px;
			}
			
			#agit_map_container
			{
				position:relative;
				top:80px;
				aspect-ratio: 1800 / 2708;
				/*
				background-image:url('../image/agit_view_base.jpg');
				background-repeat:no-repeat;
				background-size:cover;
				*/
			}
			
			.agit_map_position_set
			{
				position: absolute;
				top: 0px;
				left: 0px;
				width:100%;
			}
			
			#agit_map_img
			{
				width: 100%;
				height: auto;
				display: block;
			}
			

			
			#sticker_layer 
			{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events:none;
				z-index:4;
			}
			
			#sticker_layer a 
			{
			pointer-events: auto;
			}
			
			/*스티커 클릭시 부엉이 이미지 나오게 하는 설정 부분*/			
			
	#port_layer 
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index:3;
	}		
	
	.port_agitview 
	{
    position: absolute;
    width: 30%;
    height: auto;
}
			
	

				.sticker_view_daily.hovered {
					transform: scale(0.25);
					filter: hue-rotate(230deg) saturate(3) brightness(6)
							drop-shadow(0 0 25px #ffffff)
							drop-shadow(0 0 40px #ffffff);
				}

				.owl_main_image_view 
				{

					
					    position:absolute;
						width:80px;
						z-index:10;
						pointer-events:none;
						opacity:0;
						transform: scale(0.8);
						transition: all 0.3s ease;
				}

				.owl_main_image_view.show {
					opacity: 1;
					transform: scale(1);
				}
				
				.owl_main_image_view.hide {
					opacity: 0;
					transform: scale(0);
				}
							
			
			
			@keyframes sticker_twinkle {
			  0% { opacity: 0.6; }
			  50% { opacity: 1; }
			  100% { opacity: 0.6; }
			}			
			
			.sticker_view_daily
			{
				display:block;
				animation: sticker_twinkle 2s infinite ease-in-out;
			}			
			
			#agit_bottom_info
			{
				position:relative;
				top:80px;
		
				background-color:#000000;
			}
			
			
.agit_mainmenu
{
	height:80px;

	font-size:1rem;
	z-index: 10;
        position: relative;
}

.agit_mainmenu > div
{
	height:80px;
	
}
 
.agit_mainmenu > div > ul
{
	display:flex;
	list-style-type:none;
	justify-content: center;

	 flex-wrap: wrap;
     align-items: center;
        height: 100%;
        justify-content: space-around;
}

.agit_mainmenu > div > ul > li
{
	vertical-align:top;
	font-size:1rem;
	font-weight:bold;
	text-align:center;
	color:#fff9cd;
	
	cursor: pointer;
	height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
		
	padding: 0px 14px;
}

.agit_mainmenu > div > ul > li:hover
{
	background-color:rgba(55,38,25,0.8);
}

.agit_mainmenu > div > ul > li>span
{
	display:inline-block;
	width:100%;


	color:#3c4b2c;
	
}

.agit_mainmenu > div > ul > li > span:hover
{
	color:#9ea596;
}


.sub_none
{
	position:relative;
	display:none;
	width:100%;
	left:0px;

}


.sub_menu
{
	list-style-type:none;
	display:flex;
	justify-content: center;
	position:relative;
	left:0px;
	width:100%;	
	padding-top:12px;
}

.sub_menu > li
{
	text-align:center;
	padding:10px 20px;
	box-sizing:border-box;
	font-size:1rem;
	font-weight:bold;
}

.sub_menu_2line
{
	line-height:1.2;
}

.sub_menu > li:hover
{
	 background-color:rgba(60,75,44,0.5);
	 color:#ffd950;
}


.sub_menu > li > a
{
	display:inline-block;
	width:100%;
	height:100%;
}





/**/

#observatory_container
{
	position:relative;
	top:80px;
	background-image:url('../image/agit_port_background.jpg?v=a2');
	background-repeat:no-repeat;
	background-size:cover;
		padding-bottom:100px;
}

#observatory_container_light
{
	position:relative;
}

#observatory_container_light_each
{
		position: absolute;
        z-index: 12;
        display: flex;
        justify-content: center;
        width: 210px;
}

#observatory_container_light_each>p
{
		position: absolute;
        width: 6px;
        background-color: #000000;
        top: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
}

#observatory_container_light_each>div
{
	position: absolute;
        left: 0px;
        right: 0px;
        width: 210px;
        
        margin: auto;
}

/**/
.observatory_container_light_each_1
{
	right:0px;
	top:0px;
}

.observatory_container_light_each_1>p
{
	height: 20px;
}

.observatory_container_light_each_1>div
{
	top: -30px;
}

.observatory_container_light_each_2
{
	left:0px;
	top:0px;
}

.observatory_container_light_each_2>p
{
	height: 20px;
}

.observatory_container_light_each_2>div
{
	top: -30px;
}

.observatory_container_light_each_3
{
	right:100px;
	top:0px;
	        display: none !important;
}

.observatory_container_light_each_3>p
{
	height: 20px;
}

.observatory_container_light_each_3>div
{
	top: -30px;
}

.observatory_container_light_each_4
{
	left:100px;
	top:0px;
		display:none!important;
}

.observatory_container_light_each_4>p
{
	height: 20px;
	
}

.observatory_container_light_each_4>div
{
	top: -30px;

}

/**/



#observatory_postit_area
{
	position:relative;
	height:500px;
	top:80px;
	display:none;
	background-color:black;
}

#observatory_postit_area >form> div
{
		position: relative;
        padding-top: 50px;

        display: flex;
}

#observatory_title_area
{
	position:relative;
	padding-top:80px;

	display: flex;
        align-items: center;
        justify-content: space-between;
		flex-direction: column;
}

.observatory_subject_view
{
	position:relative;

	padding: 20px 10px;
	background-color:#c3894d;
	border:8px solid #301d13;

        box-sizing: border-box;
        font-size: 1.2rem;
	display: flex;
        text-align: center;
        align-items: center;
}

.observatory_subject_view>p:first-child
{
	position:absolute;


	width: 98%;
        top: 7px;
        left: 0px;
        right: 0px;
        margin: auto;
		font-size:0.5rem;
}

.observatory_subject_view>p:nth-child(2)
{
	position:absolute;

	width: 98%;
        bottom: 15px;
        left: 0px;
        right: 0px;
        margin: auto;
		font-size:0.5rem;
}

.observatory_subject_view>p:first-child::before
{
	content:'●';
	position:absolute;
	left:0px;
	top:0px;
	
}

.observatory_subject_view>p:first-child::after
{
	content:'●';
	position:absolute;
	right:0px;
	top:0px;
}

.observatory_subject_view>p:nth-child(2)::before
{
	content:'●';
	position:absolute;
	left:0px;
	top:0px;
	
}

.observatory_subject_view>p:nth-child(2)::after
{
	content:'●';
	position:absolute;
	right:0px;
	top:0px;
}

.observatory_subject_left_pannel
{
	position:relative;
	width:180px;
	height:80px;
	background-color:#c3894d;
	border:8px solid #301d13;
	display:flex;
	justify-content: center;
        align-items: center;
}

.observatory_subject_right_pannel
{
	position:relative;
	width:180px;
	height:80px;
	background-color:#c3894d;
	border:8px solid #301d13;
	display:flex;
	justify-content: center;
        align-items: center;
}

#observatory_board_area
{
	position:relative;
	padding-top:50px;
	display:none;
}

.observatory_paste_board
{
	position:relative;

	height:800px;

	background-color:#332a25;
	border:8px solid #b07136;
	display:flex;
	
}

.observatory_paste_explain
{
	position:relative;

	color:#ffffff;
	padding: 50px 0px;
        font-size: 1.25rem;
        line-height: 1.9;
}

.observatory_write
{
	position:relative;
	width:700px;
	height:400px;
}

.observatory_write > textarea
{
	width:100%;
	height:100%;
	resize:none;
	background-color: lemonchiffon;
	box-sizing:border-box;
	padding:10px;
	font-size:1.2rem;
	white-space: pre-wrap;
}

.observatory_postit_color_select
{
	position:relative;
	width:150px;
	height:400px;
	box-sizing:border-box;
	padding:0px 20px;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.observatory_postit_color_select > div
{
	position:relative;
	height:70px;
	width:100%;	
	cursor:pointer;
	box-sizing:border-box;
}

.observatory_postit_color_select > div:hover
{
	border:10px solid #ffffff;
}

.postit_pink
{
	background-color:pink;
}

.postit_lemonchiffon
{
	background-color:lemonchiffon;
}

.postit_skyblue
{	
	background-color:skyblue;
}

.custom_color_area 
{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    text-align:center;
    color:#ffffff;
    font-size:0.9rem;
}

.custom_color_area input[type="color"]{
    width:100%;
    border:none;
    cursor:pointer;
}

.observatory_paste_btn
{
	position:relative;
	width:300px;
	height:400px;
	text-align: center;
}

.observatory_paste_btn > div
{
	position:relative;
	height:100%;
	background-color:#dadada;
	border:1px solid #555555;
	display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 1.4rem;
}

/**/
#observatory_listview_container
{
	position:relative;
	top:80px;
	background-color:#000000;
}

#observatory_listview_container::before
{
	content:"";
	background-image:url('../image/agit_portlist_background.jpg?v=a01');
	background-repeat:no-repeat;
	background-size:cover;	
	top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        opacity: 0.5;
        z-index: 1;
}

#observatory_listview
{
	position:relative;
	z-index:3;
	padding-top:100px;
	width:1250px;
	margin:0px auto;
}

#observatory_listview > ul
{
	position:relative;
	display:flex;
	flex-direction: row;
}

#observatory_listview > ul > li
{
	display:inline-block;
	border:1px solid #ffffff;
	color:#ffffff;
	width:100%;
	padding:10px 0px;
}

#observatory_listview > ul > li>a
{
	position:relative;
	display:inline-block;
	width:100%;
	height:100%;
}


#agit_phone_explain
{
	position:relative;
	top:80px;
	        padding: 50px 10px;
        text-align: center;
		line-height:3;
}

/**/
.sticker_setting
{
    position: absolute!important;
	z-index: 100;
        display: none;
        left: 0px;
        right: 0px;
        margin: auto;
}

.agit_map_position_sticker_back
{
	position: absolute;
    left: 00px;
    bottom: -120px;
    z-index: 100;
    font-size: 2rem;
    color: #23232d;
    font-weight: bold;
	display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
}

.agit_map_position_sticker_back_btn
{
	position:relative;
	padding:20px;
	background-color:brown;
	cursor:pointer;
}

.agit_map_position_sticker_save_btn
{
	position:relative;
	padding:20px;
	background-color:brown;
	cursor:pointer;
	display:none;
}

.agit_map_position_sticker_select_area
{
	font-size: 0.9rem;
    text-align: center;
    position: relative;
    padding-top: 30px;
}

.agit_map_position_sticker_select_area ul
{
	list-style-type:none;
	display: flex;
        justify-content: space-evenly;
}

.agit_map_position_sticker_select_area li
{
	cursor:pointer;
	padding:0px 7px;
}

.sticker_absorbed
{
	animation: absorbMagic 6s ease forwards;
	will-change: transform;
}


@keyframes absorbMagic {

  /* 0~50% : 3초 반짝임 */
  0% {
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 0px #00ffff);
    transform: scale(1);
  }

  10% {
    filter: brightness(1.8) drop-shadow(0 0 8px #00ffff);
  }

  20% {
    filter: hue-rotate(20deg) saturate(1.2) brightness(1.2) drop-shadow(0 0 4px #00ffff);
  }

  30% {
    filter: hue-rotate(50deg) saturate(1.4)  brightness(2) drop-shadow(0 0 12px #00ffff);
  }

  50% {
    filter: hue-rotate(100deg) saturate(1.6) brightness(1.5) drop-shadow(0 0 6px #00ffff);
  }

  /* 50~100% : 녹으며 청록화 */
  70% {
    filter: 
      hue-rotate(170deg) 
      saturate(1.8) 
      brightness(0.8)
      drop-shadow(0 0 10px #f9ffb0);
    opacity: 0.7;
    transform: scale(1.1);
  }

  100% {
    filter: 
      hue-rotate(230deg) 
      saturate(2) 
      brightness(5)
      drop-shadow(0 0 20px #ffffff);
    opacity: 1;
    transform: scale(0.2);
  }
}


#learning_journey_record_container
{
	position:relative;
	background-image:url('../image/agit_learning_journey_record_background.jpg?v=a2');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	top:80px;
	aspect-ratio: 1800 / 1600;
}


#learning_journey_record 
{
	position:relative;
}

#calendar_area 
{
		position: relative;

        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 12px;
        padding: 20px;
        display: flex;
        justify-content: space-around;
        color: #ffffff;
        font-size: 1.3rem;
        align-items: center;
		flex-direction: column-reverse;
}

.calendar {
	width: 360px;
}

.calendar_month_select {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.calendar_month_select button {
	background: #1e3a8a;
	border: none;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	cursor: pointer;
}

.calendar_week_view {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 13px;
	color: #cbd5e1;
	margin-bottom: 5px;
}

.calendar_days_view {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.day {
		position: relative;
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
}

.day:hover {
	background: #1e293b;
}

.disabled_day {
    opacity:0.3;
    pointer-events:none;
}


.record_day_dot
{
    width:6px;
    height:6px;
    background:#facc15;
    border-radius:50%;
    position:absolute;
    bottom:5px;
    left:0;
    right:0;
    margin:auto;
}

.click_view_today {
	background: #facc15;
	color: #000;
	font-weight: bold;
}

.empty {
	cursor: default;
}


.learning_journey_record_explain
{
	position: relative;
        font-size: 1.1rem;
        padding: 30px 5px;
}

.learning_journey_record_explain > ul
{
	position:relative;
	list-style-type:none;
}

#planner_area
{
	position:relative;

}

.planner 
{

	position:relative; 

	border-radius: 12px;
	padding: 15px;
	margin-top: 20px;
	background-color: #9a6745; 
	box-sizing: border-box;	

	
}

.planner_date_dailycard 
{
	position:relative;
	padding:10px 0px;
	font-size:1.3rem;
        text-align: center;
        color: #0d1019;
}

#selectedDate
{
	font-size:1.5rem;
	font-weight:bold;
}

.planner_card 
{
	list-style-type: none;
	position:relative;
	height:300px; 
	overflow-y:scroll;
	padding: 10px 5px;
        box-sizing: border-box;
}

.planner_row 
{
	position: relative;
        padding: 10px 5px;
        display: flex;
        border: 1px solid #1e293b;
        box-sizing: border-box;
        margin: 0px 5px;
		flex-wrap: wrap;
}

.planner_row input
{
	padding:10px;
}

.card_time_cell 
{
	padding: 6px;
	position: relative;
	width: 280px;
        display: flex;
        justify-content: space-around;
        align-items: center;
		box-sizing:border-box;
}

.card_row_total 
{
	position:relative;
	width: 70px;
    display: flex;
        justify-content: space-around;
        align-items: center;
	padding: 6px;
	box-sizing:border-box;
}
.row_delete_btn {
	margin-left: 10px;
	padding: 4px 8px;
	background: #7c2d12;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
}

.card_content_cell 
{
		width: 500px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
		flex-direction: column;
        flex-wrap: wrap;
}

.card_content_cell > input
{
	width:100%;
	padding:10px;
	box-sizing: border-box;
}

.card_content_cell > button
{
	padding:10px;
	font-size:1rem;
}

.card_total_time 
{
position: relative;
        font-weight: bold;
        padding: 10px 0px;
        font-size: 1.2rem;
        color: #47200e;
}

#totalTime
{
	color:#ffffff;
	font-size: 1.3rem;
}

.card_self_review
{
	position:relative;
}

.card_self_review > div
{
	position:relative;
	font-size:1.3rem;
	padding:5px 0px;
}

.card_self_review textarea 
{
		resize: none;
        width: 100%;
        height: 100px;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        font-size: 1.1rem;
}

#addRow 
{
	position:relative;
	padding: 10px 0px;
	background-color: #47200e;
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-align:center;
}

.magic_send_area
{
        position: relative;
        padding: 10px 0px;
        background-color: #0c0f18;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        margin: 10px auto;
}


.open_yn
{
	position:relative;
	padding: 10px 0px;
		text-align:center;
		font-size:1rem;
}


/**************************/
			#bg_login_index_all {
			 position:absolute;
			 left:0px;
			 right:0px;
			 width:100%;
			 height:100%;
			  opacity: 0;
			  animation: bg_login_fadeInBody 2s ease-in forwards;
			  background: radial-gradient(circle at center, #333333 0%, #000 80%);
			}

			@keyframes bg_login_fadeInBody {
			  to { opacity: 1; }
			}
			#bg_login_image_area
			{
				position:relative;
				text-align:center;
			}
			
			#bg_login_image_area>img
			{
				max-width:85%;
				opacity:0.2;
			}
			
			#bg_login_login_area
			{
				position:relative;
								display:flex;    
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;
				align-items: center;
				flex-direction: column;
			}
			
			#bg_login_input_type
			{
			    position: absolute;
				z-index: 1;
				width: 400px;
				height:400px;
				left: 0px;
				right: 0px;
				margin: 0px auto;
				top: 380px;
			}
			    .bg_login_view_input {
					position: relative;
					padding: 10px 0px;
				}
			
		.bg_login_view_input > input
		{
			width: 100%;
			padding: 16px 20px;
			font-size: 1.2rem;
			box-sizing: border-box;
			background-color: #525252;
			color: #ffffff;
			border-radius: 10px;
		}
		
		.bg_login_loginbtn {
        background-color: #3c4b2c !important;
    }
	
	    .bg_login_magic_login_btn 
		{
        display: inline-block;
        padding: 13px 0px;
        font-size: 1.13rem;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(135deg, #532e22, #341c10);
        border-radius: 50px;
        text-decoration: none;
        text-align: center;
        position: relative;
        overflow: hidden;
           box-shadow: 0 0 15px rgb(83 46 34), 0 0 40px rgb(22 11 10) inset;
        transition: all 0.3s ease;
		width:100%;
    }
	
	    .bg_login_view_input_acc {
        position: relative;
        text-decoration: underline;
        color: #b1a096;
    }
	
	
	/* 출입구 마법 전등 효과 */
.bg_login_magic_lights {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	
	height: 100vh;
	pointer-events: none;

	background: 
			radial-gradient(circle at 20% 45%, rgb(255 154 45 / 25%), transparent 55%), 
			radial-gradient(circle at 80% 45%, rgb(255 154 45 / 22%), transparent 55%);		
		
	animation: bg_login_magicGlow 3s ease-in-out infinite;
}

@keyframes bg_login_magicGlow {
	0%   { opacity: 0.4; filter: blur(6px); }
	50%  { opacity: 0.8; filter: blur(10px); }
	100% { opacity: 0.4; filter: blur(6px); }
}


/**/
.bg_login_magic_dust::before,
.bg_login_magic_dust::after {
	content: '';
	position: absolute;
	left: 30%;
	top: 55%;
	width: 6px;
	height: 6px;
	background: rgba(180,220,255,0.8);
	border-radius: 50%;
	filter: blur(1px);
	animation: bg_login_dustFloat 6s linear infinite;
}

.bg_login_magic_dust::after {
	left: 35%;
	animation-delay: 2.5s;
}

@keyframes bg_login_dustFloat {
	0% {
		transform: translateY(0) scale(0.6);
		opacity: 0;
	}
	20% { opacity: 1; }
	100% {
		transform: translateY(-120px) scale(1.2);
		opacity: 0;
	}
}

/***************************/