@charset "utf-8";
/* -----------------------------------------------
	* 메인 화면 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/

/****************************************************
	메인 레이아웃
****************************************************/

#body {opacity:0;}
#no_design_main {
	position:relative;
	padding:50px 0;
	display: grid;
	grid-template-columns: 32% 36% 32%;
	grid-auto-rows: auto;
	gap: 0;
	align-items: start;
}
#no_design_main:after {content:""; display:block; position:relative; clear:both;}

/** 슬라이드배너/한줄공지 **/
#main_visual_box,
.sub_marquee {
  grid-column: 1 / -1;
}

/** 공지 게시판 **/
#main_twitter_box {
  grid-column: 1 / 2;
  grid-row: 3 / 5;
}

/** TV **/
#main_center_box {
  grid-column: 2 / 3;
  grid-row: 3;
}

/** 로그인 창 **/
#main_side_box {
  grid-column: 3 / 4;
  grid-row: 3;
}

/** 바로가기 배너 **/
#main_c_b {
  grid-column: 2 / 4;
  grid-row: 4;
}

/** 디버깅용 **/
#no_design_main > * {
  outline: 0.5px dashed rgba(0,0,0,0.05); /* 디버깅 시 주석 해제 */
}

/** 레이아웃 모바일 호환 **/
@media all and (max-width: 1399px) {
	#no_design_main {
		grid-template-columns: 45% minmax(300px, 55%);
		grid-template-rows: auto auto;
		grid-auto-flow: row;
	}

	/** 슬라이드배너/한줄공지 **/
	#main_visual_box,
	.sub_marquee {
		grid-column: 1 / -1;
	}

	/** 공지 게시판 **/
	#main_twitter_box {
		grid-column: 1 / 2;
		grid-row: 3 / 5;
	}

	/** TV **/
	#main_center_box {
		grid-column: 2 / 3;
		grid-row: 3;
	}

	/** 로그인 창 **/
	#main_side_box {
		grid-column: 2 / 3;
		grid-row: 4;
	}

	/** 바로가기 배너 **/
	#main_c_b {
		grid-column: 1 / -1;
		grid-row: 5;
	}
}

/****************************************************
	메인 슬라이드 배너
****************************************************/

#main_visual_box {
	min-height:100px; background:#fdfff4; margin-bottom:20px; border: solid 2px #f6f7ee;
}


/****************************************************
	메인 트위터 박스
****************************************************/

#main_twitter_box {
	position:relative;
	width: 100%;
	min-width:200px; 
	height:0;
	margin-bottom:20px;
	padding-bottom:119.4%;
	top: -18px;
}
.twitter {max-height:100%;}

#main_twitter_box .notice_bg {
	position: absolute;
	width:90%;
	height:80%;
	top: 0;
	left: 0;
	background-image: url('https://border.dothome.co.kr/img/A.png');
	z-index: -1;
	background-size: contain;
    padding: 10% 5%;
}


/****************************************************
	메인 이미지 박스
****************************************************/

#main_center_box {position:relative; width:auto; margin-left:2%; margin-right:2%; height:max-content; text-align:center; margin-bottom:7px;}

#main_c_a {height:190px;margin-bottom:20px;}
#main_c_a img {z-index: 99;}


/****************************************************
	메인 우측 박스 (로그인 / 일반)
****************************************************/

#main_side_box {position:relative; height:max-content; margin-bottom:20px;flex: 0 0 auto;min-width: 300px;}

#main_login_box {
	box-shadow: 7px 12px 12px -7px #555555;
	padding:15px;
	background-color:white;
	border:1px solid #333637;
	height:165px;
	overflow: hidden;position: relative;}

#main_side_box .login_img1 {
	width:120px;
	position:absolute;
	z-index:40;
	left:-20px;
	top:120px;
}
#main_side_box .login_img2 {
	width:80px;
	position:absolute;
	z-index:40;
	right:-10px;
	top:110px;
}

#main_banner_box {
	padding:20px; text-align:left; box-sizing:border-box;
}

div#main_c_b {
    position: relative;
    height: max-content;
    right: -1%;
    bottom: 8%;
}

div#main_c_b img {
    width: 22%;
}

/* 공통 아이콘 스타일 */
.icon {
  position: fixed;         /* 뷰포트 기준 고정 */
  z-index: 20;             /* 위에 표시 */
  pointer-events: auto;    /* 클릭 가능 */
  display: block;          /* img 블록처럼 */
}


/* 각 아이콘 위치 */
.icon.compass {
  top: 71%;
  left: 38%;
  width: 116px;             /* 기본 크기 */
}

.icon.radio {
  bottom: 7%;
  left: 44.1%;
  width: 280px;             /* 개별 크기 */
}

.icon.clock {
  bottom: 7%;
  left: 59%;
  width: 150px;
}

.icon.projector {
  bottom: 5.5%;
  left: 66.5%;
  width: 250px;
}

.icon.hanger {
  bottom: 35.3%;
  left: 73.4%;
  width: 134px;
}

/* img는 100% width로 부모 크기 따라감 */
.icon img {
  width: 100%;
  height: auto;
  display: block;
}


/* 공통 스티커 스타일 */
.sticker {
  position: fixed; /* <- absolute 대신 fixed 권장 */
  pointer-events: none;
  opacity: 1;
  z-index: 10;
}

/* 각 스티커 위치 */
.watercolor {
  top: 14%;
  left: 21%;
  width: 170px;
}

.stamp {
  top: 50.5%;
  left: 71.6%;
  width: 60px;
}

.brush {
  top: 61.4%;
  left: 35%;
  width: 709px;
}

.palette {
  bottom: 0px;
  right: 0px;
  width: 380px;
}

.boder {
  bottom: 6.5%;
  left: 18%;
  width: 311px;
}



/****************************************************
	메인 카피라이터
****************************************************/

#main_copyright_box {
	background-image:url('/img/waterbrush.png');
	background-size: contain;
	color:white;
	height:45px;
	padding-top:15px;
	display:block; position:relative; margin-bottom:20px;text-align:center;}

/****************************************************
	메인 한줄공지
****************************************************/
#lineNotice {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

#lineNotice span {
	width: 92%;
    left: 4%;
    top: 30%;
	color:white;
}

.sub_marquee {
	position: relative;
	height:0;
	padding-bottom:5.72%;
	background:url('/img/waterbrush.png') no-repeat center top;
	background-size: cover;
	/*left:2.238%;*/
	margin-bottom:2.6%;
}

/****************************************************
	반응형 스타일
****************************************************/
@media all and (max-width:1399px)  {
	div#main_c_b {right: unset;}
	#main_twitter_box {width: 100%; padding-bottom: 119.2%;}
	div#main_c_b {padding-bottom: 5%;}
	#main_side_box {
        width: 80%;
        margin: 0 auto;
        top: -10%;
    }
	div#main_c_b img {
		width: 20%;
    	margin-left: 3%;
	}
}
@media all and (max-width:1024px)  {
	#no_design_main {padding-top:20px;}
}
@media all and (max-width:800px)  {
	#main_twitter_box,
	#main_image_box,
	#main_side_box  {width:auto; float:none; margin:0 0px 20px;}

	#no_design_main {
		grid-template-columns: 90%;
		gap: 16px;
		left: 5%;
	}

	#main_twitter_box,
	#main_center_box,
	#main_side_box,
	#main_c_b {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	#main_visual_box {
        max-width: 100%;
        overflow: hidden;
        max-height: max-content;
        min-height: unset;
		margin-top: 50px;
	}

	.sub_marquee {
		background: #ffffffaa;
		backdrop-filter: blur(4px);
		padding: 15px;
		border-radius: 10px;
	}
	#lineNotice span {color:black;top: 20%;}

	#main_twitter_box {
		width: 344px;
		padding-bottom: 411px;
		margin: 0 auto;
	}

}
@media all and (max-width:450px)  {
	#main_twitter_box {
		width:100%;
		padding-bottom: 119.8%;
	}
	#main_side_box {
        width: 90%;
        margin: 10px auto;
	}
	#main_side_box {
        width: 90%;
        margin: 10px auto;
        min-width: unset;
    }
	#main_login_box {
		padding: 5px;
	}

}