@charset "utf-8";

#miceIntro { position: relative; width: 100%; font-size: 1.6rem;  }
#miceIntro::before,
#miceIntro::after { content:''; position: absolute; z-index: -1;  }
#miceIntro::before { left:0; top: 25%; width: 230px; height: 328px; background: url(../img/main/bak_left.png) no-repeat left center; background-size: 100% auto; }
#miceIntro::after { right:0; top:0; width: 588px; height: 586px; background: url(../img/main/bak_right.png) no-repeat right top; background-size: 100% auto; }

#miceIntro header { padding: 35px 50px; position: relative;  }
#miceIntro .gnbWrap { position: absolute; right:50px; top: 35px; }
#miceIntro .gnbWrap .user { display: none; }
#miceIntro .gnbWrap .languageNav button { background-color:#fff; }

#miceIntro .alarmArea {display:none !important;}

#mainContent { --boxR: 350px; --boxH: 350px; --gap:40px; }
#mainContent h2 { font-size: 4.5rem; color:#212121; font-family:NexenTire;  }

@media all and (max-width:1600px) { 
	#miceIntro::before { width: 18vw; top: 12%; }	
	#miceIntro::after { width: 28vw; }	
	
	
	#miceIntro header { padding: 2.5% 2%; }
	#miceIntro .gnbWrap { right:2%; top: 30px; }
	#mainContent { padding: 0 2%; --boxR: 20vw; --boxH: 21vw; --gap:2em; }	
}

@media all and (max-width:1380px) { 
	#mainContent { --gap: 1.5em; }
}

@media all and (max-width:1280px) { 
	#mainContent { --boxR: 22vw; }
	#mainContent h2 { font-size: 3.8vw; }
	#mainContent h2 img { max-height: 1.4em; }
}

@media all and (max-width:1024px) { 
	#miceIntro .gnbWrap { top: 3vw; }
	
	#mainContent { --boxR: calc(100% / 3); --boxH: 250px; /*max-width: 900px;*/ margin: 3% auto 0; padding: 0 4%;  }
}

@media all and (max-width:800px) { 
	#mainContent { --boxR: 34vw; --boxH: 230px; }
}

@media all and (max-width:676px) { 
	
	#miceIntro header { padding: 3% 4%; }
	#miceIntro header h1 img { height: 40px; }
	#miceIntro .gnbWrap { right: 3vw; }
	
	#mainContent { --boxR: 100%; --boxH: 42vw; margin-top: 5%; }
	#mainContent h2 { font-size: 4.6vw; }
}

@media all and (max-width:480px) { 
	#miceIntro header { padding: 4% 4% 5%; }
	#miceIntro header h1 img { height: 36px; }
	
	#mainContent { --boxH: 45vw; }
	#mainContent h2 { font-size: 5vw; }
}

@media all and (max-width:380px) { 
	#miceIntro header { padding: 4% 4% 6%; }
	#miceIntro header h1 img { height: 28px; }
}


/****************************************************************
	m-section0
****************************************************************/

#miceGuide .guide-cont { font-family:NexenTire; font-weight: 700; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;  }
#miceGuide .guide-cont .tit { text-align: center; margin: 0 4rem; order:1; }
#miceGuide .guide-cont .tit .img { position: relative; width: 140px; height: 140px; border-radius: 100%; overflow: hidden; background:#FCD30A; margin: 0 auto; }
#miceGuide .guide-cont .tit .img img { position: absolute; right:0; bottom:0; width: 100%; -webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;  }
#miceGuide .guide-cont .tit .img img.hoverIn { display: none; }
#miceGuide .guide-cont:hover .tit .img img.fadeUp { display: none; }
#miceGuide .guide-cont:hover .tit .img img.hoverIn { display: block; }
#miceGuide .guide-cont .tit h3 { position: relative; display: inline-block; white-space: nowrap; font-size: 2rem; color:#fff; padding: 0.4em 1.5em 0.5em; background:#1D3551; border-radius: 3rem; margin-top: -2rem; }
#miceGuide .guide-cont .bubbleL { order:0; }
#miceGuide .guide-cont .bubbleR { order:2; }
#miceGuide .guide-cont .bubble { position: relative; max-width: calc((100% - 180px) / 2); }
#miceGuide .guide-cont .bubble::before { content:''; position: absolute; width: 26px; height: 32px; z-index: 1; background-repeat: no-repeat; background-position: center; background-size: 100%; }
#miceGuide .guide-cont .bubbleL::before { right:-22px; bottom: 25%; background-image: url(../img/main/talkbubble_bg_01.svg); }
#miceGuide .guide-cont .bubbleR::before { left:-22px; top: 25%;background-image: url(../img/main/talkbubble_bg_02.svg); }
#miceGuide .guide-cont .bubble a { position: relative; display: block;  font-size: 2.2rem; color:#2D3947; padding: 2.5rem 3.5rem; border: 3px solid #E1E6ED; border-radius: 1.8rem; background:#fff; text-decoration: none; width: 500px; max-width: 100%; box-sizing: border-box;  }
#miceGuide .guide-cont .bubble a::before { content:''; width: 4rem; height: 4rem; border-radius: 100%; display: block; background: #EDEFF6 url(../img/main/btn_arrow_02.svg) no-repeat left center; background-size: auto 100%; 
										   position: absolute; right:3.5rem; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
#miceGuide .guide-cont .bubble a:hover::before { background-color:#00B6ED; background-position: right center; }
#miceGuide .guide-cont .bubble a span { max-width: calc(100% - 5rem); display: block; word-break: keep-all; }
#miceGuide .guide-cont .bubble a span em { color:#005FCE; }


@media all and (max-width:1480px) { 
	#miceGuide .guide-cont .tit .img { width: 100px; height: 100px; }
	#miceGuide .guide-cont .tit h3 { font-size: 1.7rem; padding: 0.5em 1.2em; }
	#miceGuide .guide-cont .bubble a { font-size: 1.8rem; width: 100%; }
	#miceGuide .guide-cont .bubble a br { display:  none;  }
	#miceGuide .guide-cont .bubble a::before { width: 3rem; height: 3rem; }
	#miceGuide .guide-cont .bubble a span { max-width: calc(100% - 4rem); }
}

@media all and (max-width:1080px) { 
	#miceGuide .guide-cont .bubble a { padding: 2rem 1.5rem 2rem 2.5rem; }
	#miceGuide .guide-cont .bubble a::before { right: 1.5rem; }
	#miceGuide .guide-cont .bubble a span { max-width: calc(100% - 3.5rem); }
}


@media all and (max-width:860px) {
	#miceGuide .guide-cont .bubble a { font-size: 1.7rem;  padding: 2rem 1rem 2rem 2rem; }
}

@media all and (max-width:676px) {
	#miceGuide .guide-cont { -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
	#miceGuide .guide-cont .bubble { width: 100%; max-width: 100%; margin-top: 1rem; }
	
	#miceGuide .guide-cont .tit { order:0; }
	#miceGuide .guide-cont .bubble::before { display: none; }
	#miceGuide .guide-cont .bubble a { font-size: 2.1rem; }
	#miceGuide .guide-cont .bubbleL { order:1; }
	#miceGuide .guide-cont .bubbleR { order:2; }
}

@media all and (max-width:480px) {
	#miceGuide .guide-cont .bubble a { font-size: 1.7rem; }
}


/****************************************************************
	m-section1
****************************************************************/

.m-section1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: var(--gap); padding: 80px 0; }
.m-section1::before { content:''; display: block; width: 529px; height: 191px; position: absolute; right:-10%; bottom: 15%; background:url(../img/main/bak_mice.png) no-repeat center; background-size: 100% auto; z-index: -1;  }

/* 메인컨텐츠 박스 */
.m-section1 .mcont-box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: calc(100% - var(--boxR) - var(--gap)); gap: 20px; -webkit-box-align: start; -moz-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; height: calc(var(--boxH) + 50px); }
.m-section1 .mcont-box li { position: relative; -ms-flex: 1; -webkit-flex: 1; flex: 1;border-radius: 0 3.8rem 0 3.8rem; overflow: hidden; -webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s; }
.m-section1 .mcont-box li:nth-child(even) { align-self: flex-end; }
.m-section1 .mcont-box li.boxM { background:#1A305E; }
.m-section1 .mcont-box li.boxI { background:#166DD3; }
.m-section1 .mcont-box li.boxC { background:#542FA2; }
.m-section1 .mcont-box li.boxE { background:#17BEB4; }

.m-section1 .mcont-box li::before { font-size: 27rem; font-family: 'Poppins'; opacity: 0.15; font-weight: 900; line-height: 0.8em; position: absolute; color:#fff; -webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;  -webkit-transform:scale(1.0);-o-transform:scale(1.0);transform:scale(1.0); }
.m-section1 .mcont-box li.boxM::before { content: 'M'; left:-3.2rem; bottom:-3rem;  }
.m-section1 .mcont-box li.boxI::before { content: 'I'; right: -1.8rem; top: 15rem;  }
.m-section1 .mcont-box li.boxC::before { content: 'C'; left: -3.2rem; bottom:-2.5rem; }
.m-section1 .mcont-box li.boxE::before { content: 'E'; right: -2.4rem; top: -1rem; }
.m-section1 .mcont-box li:hover::before { -webkit-transform:scale(1.3); -o-transform:scale(1.3); transform:scale(1.3); }

.m-section1 .mcont-box li .img { position: absolute; right:0; top:0; width: 100%; height: 100%; }
.m-section1 .mcont-box li .img img { position: absolute; right:0; bottom:0; max-width: 360px; }
.m-section1 .mcont-box li.boxM .img { right: -15%; }
.m-section1 .mcont-box li.boxI .img { right: -10%; }
.m-section1 .mcont-box li.boxC .img { right: -13%; }
.m-section1 .mcont-box li.boxE .img { right: -25%; }


.m-section1 .mcont-box li a { position: relative; display: block; height: var(--boxH); color:#fff; padding: 4.5rem 3.5rem; }
.m-section1 .mcont-box li a:focus::before { content:''; width: 100%; height: 100%; position: absolute; left:0; top:0; border: 3px solid #000; box-sizing: border-box; border-radius: 0 3.8rem 0 3.8rem; }
/*.m-section1 .mcont-box li.boxM a { background: url(../img/main/main_cont_01.png) no-repeat -13% bottom; }
.m-section1 .mcont-box li.boxI a { background: url(../img/main/main_cont_02.png) no-repeat right bottom; }
.m-section1 .mcont-box li.boxC a { background: url(../img/main/main_cont_03.png) no-repeat center bottom; }
.m-section1 .mcont-box li.boxE a { background: url(../img/main/main_cont_04.png) no-repeat -30% bottom; }*/

.m-section1 .mcont-box li a * { display: block; }
.m-section1 .mcont-box li a:hover { text-decoration: none; }
.m-section1 .mcont-box li a .tit { font-size: 2.5rem; font-weight: 800; }
.m-section1 .mcont-box li a .go { font-size: 1.5rem; margin-top: 1.5em; padding: 0.6em 0; opacity: 0.7; background: url(../img/main/arrow_right.svg) no-repeat left bottom;  }





/* 등록건수 */
.m-section1 .regist-info { width: var(--boxR); align-self: flex-start; background:#EDEFF6; border-radius: 1.8rem; padding: 2.5em 2em; }
.m-section1 .regist-info .regist-tit { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; }
.m-section1 .regist-info .regist-tit h3 { font-size: 2.2rem; color:#212121; font-weight: 800; }
.m-section1 .regist-info .regist-cont dl a { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center;  background:#fff; border-radius: 1rem; padding: 1em; font-size: 1.8rem; color:#212121; font-weight: 600; }
.m-section1 .regist-info .regist-cont dl + dl { margin-top: 10px; }
.m-section1 .regist-info .regist-cont dl dd em { font-size: 1.33em; color:#00B6ED; font-weight: 800; }
.m-section1 .regist-info .regist-cont dl:hover a {text-decoration:none;}

@media all and (max-width:1600px) { 
	.m-section1::before { width: 30vw; right:-1vw; bottom: 24%;  }
	.m-section1 .mcont-box { gap: 1em; }
	.m-section1 .mcont-box li a { background-size: 120% auto !important; }
	
	.m-section1 .regist-info .regist-tit h3 { font-size: 2rem; }
	.m-section1 .regist-info .regist-tit p { font-size: 0.8em; }
	.m-section1 .regist-info .regist-cont dl { font-size: 1.7rem; }
}

@media all and (max-width:1480px) { 
	.m-section1 .mcont-box li::before { font-size: 24rem; }
	.m-section1 .mcont-box li a { padding: 4rem 3rem; }
	.m-section1 .mcont-box li a .tit { font-size: 2.2rem; }
	.m-section1 .mcont-box li a .go { font-size: 0.8em; }
	.m-section1 .mcont-box li .img img { max-width: 125%; }
	
	.m-section1 .regist-info { padding: 2.3em 1.7em; }
	.m-section1 .regist-info .regist-cont dl { padding: 0.8em; }
}

@media all and (max-width:1380px) { 
	.m-section1 .mcont-box { gap: 0.7em; }
	
	.m-section1 .regist-info { padding: 2em 1.5em; }
	.m-section1 .regist-info .regist-tit { -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 0.5em;  }
	.m-section1 .regist-info .regist-cont dl { font-size: 1.6rem; }
	.m-section1 .regist-info .regist-cont dl + dl { margin-top: 5px; }
}

@media all and (max-width:1280px) { 
	.m-section1 { padding: 3em 0; }
	.m-section1 .mcont-box li::before { font-size: 22rem;  } 
	.m-section1 .mcont-box li a { padding: 3.2rem 2.6rem; }
	.m-section1 .mcont-box li a .tit { font-size: 1.9rem; }
	.m-section1 .mcont-box li a .go { margin-top: 1em; }
	
	.m-section1 .regist-info .regist-cont dl { font-size: 1.5rem; }
}


@media all and (max-width:1024px) { 
	.m-section1::before { width: 35vw; right:-3.2vw; bottom: inherit; top: 15%; }
	.m-section1 .mcont-box { -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; height: calc(var(--boxH) * 2 + var(--gap)) }
	.m-section1 .mcont-box li { flex: inherit; width: calc(50% - 0.35em); }
	.m-section1 .mcont-box li a { background-size: 115% auto !important; padding: 3.4rem 2.8rem; }
	.m-section1 .mcont-box li.boxM a { background-position: -15% bottom; }
	.m-section1 .mcont-box li.boxI a { background-position: right bottom; }
	.m-section1 .mcont-box li.boxC a { background-position: -20% bottom; }
	.m-section1 .mcont-box li.boxE a { background-position: -75% 150%; }
	
	.m-section1 .mcont-box li .img img { max-width: 125%; }
	.m-section1 .mcont-box li.boxE .img { right: -35%; top: 7%; }
	
	.m-section1 .mcont-box li a .tit { font-size: 2.4rem; }
	.m-section1 .mcont-box li a .go { display: none;  }
	
	.m-section1 .regist-info { align-self: flex-end; }
}

@media all and (max-width:800px) { 
	.m-section1 .mcont-box li a .tit { font-size: 2.2rem; }
	.m-section1 .mcont-box li.boxE a { background-position: -75% 130%; }
}


@media all and (max-width:676px) {
	.m-section1 { -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
	.m-section1 .mcont-box { width: 100%; }
	.m-section1 .mcont-box li a { padding: 2em 1.5em; }
	.m-section1 .mcont-box li a .tit { font-size: 4.5vw; }
}

@media all and (max-width:480px) {
	.m-section1 .mcont-box li::before { font-size: 20rem; }
	.m-section1 .mcont-box li.boxI::before { top: 5rem; }
}

@media all and (max-width:380px) {
	.m-section1 { padding: 2em 0; }
	.m-section1 .mcont-box li { border-radius: 0 2.5rem 0 2.5rem; }
	.m-section1 .mcont-box li::before { font-size: 16rem; }
	.m-section1 .mcont-box li a { padding: 1.3em 1em; }
	
	.m-section1 .regist-info { padding: 1.7em 1.2em; }
	.m-section1 .regist-info .regist-tit { margin-bottom: 1em; gap: 0.2em; }
	.m-section1 .regist-info .regist-tit h3 { font-size: 1.7rem; }
	.m-section1 .regist-info .regist-cont dl { padding: 0.6em 0.8em; border-radius: 0.8rem; }
}

/****************************************************************
	m-section2
****************************************************************/

/* 회원 바로가기 메뉴 (로그인, 회원가입) */
.m-section2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; gap: var(--gap); align-items: center; }
.m-section2 .contL { width: calc(100% - var(--boxR) - var(--gap)); }
.m-section2 .contR { width: var(--boxR); margin-top: -70px; }
.m-section2 .user-link { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; padding: 1.5em 0;  }
.m-section2 .user-link::before { content:''; width: 150%; height: 100%; position: absolute; top: 0; right:0; background:#F3F9FF; border-radius: 0 60px 60px 0; z-index:-1; }
.m-section2 .user-link li { -ms-flex: 1; -webkit-flex: 1; flex: 1;padding: 0 1.5em; background:url(../img/main/dotline.svg) no-repeat right center; }
.m-section2 .user-link li:last-child { background: none; }
.m-section2 .user-link li a::after { content:''; display: block; width: 20px; height: 20px; background:url(../img/main/btn_arrow.svg) no-repeat center; background-size: 100% auto; position: absolute; right:0; top: 50%; transform: translateY(-50%);  }
.m-section2 .user-link li a { position: relative; display: block; color:#2D3947; font-size: 1.9rem; font-weight: 600; }
.m-section2 .user-link li a i { display: inline-block; vertical-align: middle; margin-right: 1em; width: 54px; height: 54px; border-radius: 1.2em; background-color:#fff; background-position: center; background-size: 100% auto; filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.07));}
.m-section2 .user-link li a i.ico-login { background-image:url(../img/main/ico_login.svg); }
.m-section2 .user-link li a i.ico-join { background-image:url(../img/main/ico_join.svg); }
.m-section2 .user-link li a i.ico-qna { background-image:url(../img/main/ico_qna.svg); }
.m-section2 .user-link li a i.ico-guide { background-image:url(../img/main/ico_guide.svg); }

/* 공지사항 */
.m-section2 .notice { line-height: 30px; width: 100%; overflow: hidden; padding: 1.5em 0; border-bottom: 1px solid #E1E6ED; }
.m-section2 .notice .notice-tit { width: 200px; float: left; }
.m-section2 .notice .notice-tit * { display: inline-block; vertical-align: middle; }
.m-section2 .notice .notice-tit h3 { font-size: 2.3rem; color:#212121; font-weight: 600; line-height: 30px; }
.m-section2 .notice .notice-tit h3::before { content:''; display: inline-block; vertical-align: middle; margin: -1px 10px 0 0; width: 30px; height: 30px; background:url(../img/main/ico_notice.svg) no-repeat center; background-size: 100% auto; }
.m-section2 .notice .notice-tit a { float: right; width: 30px; height: 30px; background:url(../img/main/arr_notice.svg) no-repeat center; background-size: 100% auto;  }
.m-section2 .notice .notice-slide { width: calc(100% - 220px); float: right; overflow: hidden;  }
.m-section2 .notice .notice-slide li { width: 100% !important; padding: 0 1.5em;  }
.m-section2 .notice .notice-slide li a { position: relative; display: block; overflow: hidden;  }
.m-section2 .notice .notice-slide li a:focus::before { content:''; width: 100%; height: 100%; position: absolute; left:0; top:0; border: 2px solid #000;  }
.m-section2 .notice .notice-slide li a .subj { float:left; color:#555969; width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-section2 .notice .notice-slide li a .date { float: right; color:#A0A2B5; width: 90px; text-align: right;  }

/* 기관 바로가기 */						
.m-section2 .family-site { width: 100%; border-radius: 1.8rem; padding: 1.5em 2em; background:#3149C7 url(../img/main/bak_familysite.png) no-repeat 105% -15%; background-size: 35% auto; }
.m-section2 .family-site h3 { font-size: 2.2rem; font-weight: 700; color:#fff; margin-bottom: 0.5em; }
.m-section2 .family-site .site-link { position: relative; }
.m-section2 .family-site .site-link .select-btn { width: 100%; background:#fff url(../img/main/arr_up.svg) no-repeat 95% center; color:#2D3947; font-size: 1.05em; padding: 0.8em 1em; border-radius: 10px; text-align: left;  }
.m-section2 .family-site .site-link .select-btn.on { background-image: url(../img/main/arr_down.svg); }
.m-section2 .family-site .site-link .select-list { display: none; position: absolute; left:0; bottom:100%; background:#fff; width: 100%; max-height: 14em; overflow-y: auto; padding: 1.5em; border-radius: 10px; border: 2px solid #8FBFFA; z-index:3;  }
.m-section2 .family-site .site-link .select-list li + li { margin-top: 0.5em;  }
.m-section2 .family-site .site-link .select-list li a { color:#2D3947; }

/* 버츄얼플랫폼 바로가기 */
.m-section2 .virtual-link { width: 100%; border-radius: 1.8rem; background: rgb(81,158,229); background: linear-gradient(180deg, rgba(81,158,229,1) 0%, rgba(48,94,242,1) 100%); margin-top: 5px; overflow: hidden;   }
.m-section2 .virtual-link a { display: block; color:#fff; text-align: center; padding: 0.8em 0 4.8em; background: url(../img/main/virtual_img.png) no-repeat center 165%; background-size: 100% auto; }
.m-section2 .virtual-link a:hover, 
.m-section2 .virtual-link a:active { text-decoration:none;}
.m-section2 .virtual-link h3 { font-size: 2.2rem; font-weight: 700; color:#fff; margin-bottom: 0.1em; }
.m-section2 .virtual-link p { font-size: 1.4rem; }


/* 탄소배출저감 바로가기 */
.m-section2 .esg-link { width: 100%; border-radius: 1.8rem; background: rgb(81,158,229); background: linear-gradient(180deg, rgba(81,158,229,1) 0%, rgba(48,94,242,1) 100%); margin-top: 5px; overflow: hidden;   }
.m-section2 .esg-link a { display: block; color:#fff; text-align: center; height:8em; padding: 1.2em; background: url(../img/main/bg_esg.svg) no-repeat center bottom; background-size: 100% auto; }
.m-section2 .esg-link a:hover, 
.m-section2 .esg-link a:active { text-decoration:none;}
.m-section2 .esg-link h3 { font-size: 2.2rem; font-weight: 700; color:#fff; margin-bottom: 0.1em; word-break:keep-all;} 

@media all and (max-width:1480px) {
	.m-section2 .family-site h3,
	.m-section2 .virtual-link h3,
	.m-section2 .esg-link h3 { font-size: 1.8rem; }
	.m-section2 .family-site { padding: 1.2em; }
	.m-section2 .family-site .site-link .select-btn { padding: 0.7em 1em; }
	.m-section2 .virtual-link p { font-size: 1.25rem; }
	.m-section2 .virtual-link a { padding: 0.8em 2.5em 3.2em;  }
	
}

@media all and (max-width:1280px) {
	.m-section2 .user-link { padding: 1.2em 0; }
	.m-section2 .user-link li { padding: 0 1em; }
	.m-section2 .user-link li a { font-size: 1.7rem; }
	.m-section2 .user-link li a i { width: 40px; height: 40px; border-radius: 0.8em; margin-right: 0.7em; }
	.m-section2 .user-link li a::after { width: 16px; height: 16px; }
	
	.m-section2 .notice .notice-tit { width: 160px; }
	.m-section2 .notice .notice-tit h3 { font-size: 2rem; }
	
	.m-section2 .notice .notice-slide { width: calc(100% - 180px);}
	
	.m-section2 .contR { margin-top: -30px; }
	.m-section2 .family-site h3,
	.m-section2 .virtual-link h3 { font-size: 1.7rem; }
	.m-section2 .virtual-link a { padding: 0.8em 2.5em 2.9em; }
}

@media all and (max-width:1080px) {
	.m-section2 .virtual-link a { padding: 0.8em 2em 2.9em; }
	.m-section2 .esg-link a {height:7.6em;}
}

@media all and (max-width:1024px) {
	.m-section2 { -webkit-box-align: start; -moz-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
	.m-section2 .user-link { -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding:0.4em 0; }
	.m-section2 .user-link::before { border-radius: 0 1.5em 1.5em 0; }
	.m-section2 .user-link::after { content:''; width: 90%; height: 1px; display: block; position: absolute; left:5%; top: 50%; margin-top: -0.5px; background:url(../img/main/dotlineX.svg) repeat-x left center; }
	.m-section2 .user-link li { width: 50%; flex:auto; padding: 1em;  }
	.m-section2 .user-link li:nth-child(even) { background:none; }
	
	.m-section2 .notice .notice-tit { width: 130px; }
	.m-section2 .notice .notice-tit h3 { font-size: 1.8rem; }
	.m-section2 .notice .notice-tit h3::before { width: 24px; height: 24px; margin-right: 5px;  }
	
	.m-section2 .notice .notice-slide { width: calc(100% - 140px);}
	.m-section2 .notice .notice-slide li { padding:0; }
	
	.m-section2 .contR { margin-top: 0; }
	.m-section2 .virtual-link a { padding: 0.8em 1em 4em; background-size: auto 68%;  }
}

@media all and (max-width:676px) {
	.m-section2 { -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
	.m-section2 .contL { width: 100%; }
	.m-section2 .contR { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: strech; justify-content: space-between; }	
	
	.m-section2 .family-site { /*display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; gap: 1em;*/  background-size: 25% auto; }
	
	.m-section2 .family-site h3 br { display: none; }
	.m-section2 .family-site .site-link { flex: 1 0 auto; }
	
	.m-section2 .family-site,
	/* .m-section2 .virtual-link, */
	.m-section2 .esg-link { width: calc(50% - 5px); }
	.m-section2 .virtual-link { margin-top:0; margin-left: 10px;}
	.m-section2 .virtual-link a { height: 100%; background-size: auto 70%; padding-bottom: 3.5em; }
	.m-section2 .esg-link {margin-top:0; margin-left: 10px; }
}

@media all and (max-width:480px) {
	.m-section2 .user-link li a { font-size: 1.6rem; }
	.m-section2 .user-link li a i { width: 36px; height: 36px; }
	
	.m-section2 .notice .notice-tit a { width: 24px; height: 24px; margin-top: 3px; }
	.m-section2 .notice .notice-slide { width: 100%; }
	.m-section2 .notice .notice-slide li { font-size: 0.9em; }
	
	.m-section2 .contR,
	.m-section2 .family-site { -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
	.m-section2 .family-site h3, 
	.m-section2 .family-site .site-link { width: 100%; }
	.m-section2 .family-site h3 { font-size: 1.7rem; }
	.m-section2 .family-site .site-link .select-btn,
	.m-section2 .family-site .site-link .select-list  { font-size: 0.95em; }
	
	.m-section2 .family-site,
	.m-section2 .virtual-link,
	.m-section2 .esg-link { width: 100%; }
	.m-section2 .virtual-link { margin-top:8px; margin-left: 0; }
	.m-section2 .esg-link {margin-top:8px; margin-left: 0; }
}

@media all and (max-width:380px) {
	.m-section2 .notice .notice-slide { margin-top: .5em; }
	.m-section2 .user-link li { padding: 1em 0.7em; }
	.m-section2 .notice .notice-slide li a .subj,
	.m-section2 .notice .notice-slide li a .date { width: 100%; text-align: left; line-height: 1.5em; }
}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.m-section1 .mcont-box,
	.m-section2 .contL { width: calc(100% - 390px); margin-right: 40px; }
 	.m-section1 .mcont-box li { margin-left: 20px; }
 	.m-section1 .mcont-box li:first-child { margin-left:0; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:1024px) {
	.m-section1 .mcont-box li { float: left; width: calc(50% - 10px); margin-top: 0; }
	.m-section1 .mcont-box li:nth-child(odd) { margin-left:0; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:676px) {
	.m-section1 .mcont-box,
	.m-section2 .contL { width: 100% !important; }
	.m-section1 .mcont-box li { width: calc(50% - 5px); margin-left: 10px; }
	.m-section1 .mcont-box li:nth-child(even) { align-self: flex-start; }
	.m-section2 .family-site h3 { margin-bottom: 0.7em; }
}







/****************************************************************
	Animation
****************************************************************/
@keyframes bounce{ 0% {bottom: 5%; } 50% { bottom: 9%;} 100% { bottom: 5%; } }
@-webkit-keyframes bounce{ 0% {top: 5%; } 50% {bottom: 9%;} 100% {bottom: 5%;} } 
@-moz-keyframes bounce{ 0% {bottom: 5%; } 50% {bottom: 9%;}	100% {bottom: 5%;} }

@keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

@keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }}
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }}
@-moz-keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }}

@keyframes fadeUp { 0% { opacity: 0; bottom: -100%; } 100% { opacity: 1; bottom: 0; } }
@-webkit-keyframes fadeUp { 0% { opacity: 0; bottom: -100%; } 100% { opacity: 1; bottom: 0; } }
@-moz-keyframes fadeUp { 0% { opacity: 0; bottom: -100%; } 100% { opacity: 1; bottom: 0; } }

@keyframes fadeLeft { 0% { opacity: 0; right: -100%; } 100% { opacity: 1; right: 0; } }
@-webkit-keyframes fadeLeft { 0% { opacity: 0; right: -100%; } 100% { opacity: 1; right: 0; } }
@-moz-keyframes fadeLeft { 0% { opacity: 0; right: -100%; } 100% { opacity: 1; right: 0; } }

@keyframes fadeRight { 0% { opacity: 0; right: 100%; } 100% { opacity: 1; right: 0; } }
@-webkit-keyframes fadeRight { 0% { opacity: 0; right: 100%; } 100% { opacity: 1; right: 0; } }
@-moz-keyframes fadeRight { 0% { opacity: 0; right: 100%; } 100% { opacity: 1; right: 0; } }

@keyframes scale { 0% { transform: scale(1, 1);} 50% { transform: scale(1.08, 1.08);} 100% { transform: scale(1, 1);} }
@-webkit-keyframes scale { 0% { transform: scale(1, 1);} 50% { transform: scale(1.08, 1.08);} 100% { transform: scale(1, 1);} }
@-moz-keyframes scale { 0% { transform: scale(1, 1);} 50% { transform: scale(1.08, 1.08);} 100% { transform: scale(1, 1);} }

@keyframes scaleY { 0% { transform: scaleY(0.8);} 50% { transform: scaleY(0.5); } 100% { transform: scaleY(1);} }
@-webkit-keyframes scaleY { 0% { transform: scaleY(0.8);} 50% { transform: scaleY(0.5); } 100% { transform: scaleY(1);} }
@-moz-keyframes scaleY { 0% { transform: scaleY(0.8);} 50% { transform: scaleY(0.5); } 100% { transform: scaleY(1);} }

@keyframes zoom { 0% {  transform: scale(0, 0); opacity:0;  } 90% {  transform: scale(1, 1); opacity: 1; }  100% {  transform: scale(1.08, 1.08); opacity: 0; } }
@-webkit-keyframes zoom { 0% {  transform: scale(0, 0); opacity:0;  } 90% {  transform: scale(1, 1); opacity: 1; }  100% {  transform: scale(1.08, 1.08); opacity: 0; } }
@-moz-keyframes zoom { 0% {  transform: scale(0, 0); opacity:0;  } 90% {  transform: scale(1, 1); opacity: 1; }  100% {  transform: scale(1.08, 1.08); opacity: 0; } }

@keyframes switch { 0%, 20%, 40%, to { opacity: 0; } 10%, 30% { opacity: 1; } }
@-webkit-keyframes switch { 0%, 20%, 40%, to { opacity: 0; } 10%, 30% { opacity: 1; } }
@-moz-keyframes switch { 0%, 20%, 40%, to { opacity: 0; } 10%, 30% { opacity: 1; } }


.bounce1 { animation: bounce 3s ease-in-out reverse; animation-iteration-count: infinite;
			-webkit-animation: bounce 3s ease-in-out reverse; -webkit-animation-iteration-count: infinite;
			-moz-animation: bounce 3s ease-in-out reverse; -moz-animation-iteration-count: infinite; }
.bounce2 { animation: bounce 4s ease-in-out reverse; animation-iteration-count: infinite;
			-webkit-animation: bounce 4s ease-in-out reverse; -webkit-animation-iteration-count: infinite;
			-moz-animation: bounce 4s ease-in-out reverse; -moz-animation-iteration-count: infinite; }
.scale { animation: scale 3s ease-in-out reverse; animation-iteration-count: infinite;
			-webkit-animation: scale 3s ease-in-out reverse; -webkit-animation-iteration-count: infinite;
			-moz-animation: scale 3s ease-in-out reverse; -moz-animation-iteration-count: infinite;  }		
.scaleY { animation: scaleY 1s ease-in-out reverse; animation-iteration-count: infinite;
			-webkit-animation: scaleY 1s ease-in-out reverse; -webkit-animation-iteration-count: infinite;
			-moz-animation: scaleY 1s ease-in-out reverse; -moz-animation-iteration-count: infinite;  }		
.deleay1 { animation-duration:2s; }
.deleay2 { animation-duration:3s; }

.fadeUp { animation: fadeUp 1s 1 ease-in-out; -webkit-animation: fadeUp 1s 1 ease-in-out; -moz-animation: fadeUp 1s 1 ease-in-out;  }
.fadeUp2 { animation: fadeUp 3s ease-in-out reverse; animation-iteration-count: infinite; 
			-webkit-animation: fadeUp 3s ease-in-out reverse; -webkit-animation-iteration-count: infinite; 
		-moz-animation: fadeUp 3s ease-in-out reverse; -moz-animation-iteration-count: infinite; }		  
.fadeLeft { animation: fadeLeft 1s 1 ease-in-out; -webkit-animation: fadeLeft 1s 1 ease-in-out; -moz-animation: fadeLeft 1s 1 ease-in-out;  }
.fadeRight { animation: fadeRight 1s 1 ease-in-out; -webkit-animation: fadeRight 1s 1 ease-in-out; -moz-animation: fadeRight 1s 1 ease-in-out;  }
.fadeIn { animation: fadeIn 10s ease-in-out reverse; animation-iteration-count: infinite; 
		-webkit-animation: fadeIn 10s ease-in-out reverse; -webkit-animation-iteration-count: infinite; 
		-moz-animation: fadeIn 10s ease-in-out reverse; -moz-animation-iteration-count: infinite; }		
.fadeOut { animation: fadeOut 10s ease-in-out reverse; animation-iteration-count: infinite; 
		-webkit-animation: fadeOut 10s ease-in-out reverse; -webkit-animation-iteration-count: infinite; 
		-moz-animation: fadeOut 10s ease-in-out reverse; -moz-animation-iteration-count: infinite; }		
		
.zoom { animation: zoom 5s ease-in-out reverse; animation-iteration-count: infinite;  
		-webkit-animation: zoom 5s 1 ease-in-out; -webkit-animation-iteration-count: infinite; 
		-moz-animation: zoom 5s 1 ease-in-out; -moz-animation-iteration-count: infinite; }

.switch { animation: switch 4s ease-in-out reverse; animation-iteration-count: infinite; 
		-webkit-animation: switch 4s ease-in-out reverse; -webkit-animation-iteration-count: infinite; 
		-moz-animation: switch 4s ease-in-out reverse; -moz-animation-iteration-count: infinite; }
		





/****************************************************************
	Modal Style
****************************************************************/
.modal {display:block; position: fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.8); z-index:99999; overflow:auto;}
.modal-content {display:block;position:fixed;top:50%;left:50%;-webkit-transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); -ms-transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)); transform:translate(-50%, -50%); border-radius:30px;margin:auto;width:1480px;max-width:95vw;min-height:200px;max-height:95vh; padding: 9rem 3rem 4rem; overflow: visible; background: #fff url('../img/main/pop_bg_01.png') no-repeat center bottom; }
.modal-content::before { content:''; width: 100%; height: 100%; position: absolute; left:0; top: 0; border-radius: 30px; background: url('../img/main/pop_bg_02.png') no-repeat left top ; background-size: 100% auto;  }
.modal-pannel { position: relative; text-align: center; height: 100%; max-height:calc(95vh - 13rem); overflow-y: auto; }
.modal-close { position: absolute; right: 2rem; top: 2rem; width: 50px; height: 50px; border-radius:100%; background:#3149C7 url('../img/common/icon_close_white.svg') no-repeat center; background-size: 100% auto; font-size:0; box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3); }

.modal-pannel { --blue: #005FCE; --green: #07B3BE;  }
.modal-pannel .tit { color:#212121; }
.modal-pannel .tit p { font-size: 2rem; }
.modal-pannel .tit h3 { font-size: 3.4rem; font-family:NexenTire; margin-top: 0.5rem; letter-spacing: -0.04em; }
.modal-pannel .tit h3 em.blue { color:var(--blue); }
.modal-pannel .tit h3 em.green { color:var(--green); }
.modal-pannel .cont { display: flex; justify-content: center; align-items: stretch; margin: 4rem auto 3rem; max-width: 94%; }
.modal-pannel .cont .box { position: relative; display: inline-block; width: 380px; margin: 0 20px; background:#fff; border-radius: 30px; box-shadow: 4px 4px 20px 4px rgba(0,0,0,0.2); overflow: hidden; }	
.modal-pannel .cont .box a { position: relative;  display: block; width: 100%; height: 100%; text-decoration: none; } 
.modal-pannel .cont .box a img { width: 100%; display: block; max-width: 380px; margin: 0 auto; }
.modal-pannel .cont .boxBlue { --point: var(--blue); }
.modal-pannel .cont .boxGreen { --point: var(--green); }
.modal-pannel .cont .boxBlue .img { background: rgb(8,114,237); background: linear-gradient(180deg, rgba(8,114,237,1) 0%, rgba(0,59,128,1) 100%); }
.modal-pannel .cont .boxGreen .img { background: rgb(7,179,190); background: linear-gradient(180deg, rgba(7,179,190,1) 0%, rgba(0,107,141,1) 100%); }
.modal-pannel .cont .box a .txt { color:#555969; position: relative; text-align: left; padding: 3rem 2.5rem; border-radius: 0 0 30px 30px; overflow: hidden;  }
.modal-pannel .cont .box a:hover .txt::before { content:''; width: 100%; height: 100%; border-radius: 0 0 30px 30px; position: absolute; left:0; top:0; border: 2px solid var(--point); border-top:0; -webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s; }
.modal-pannel .cont .box a .txt p { font-size: 1.5rem; }
.modal-pannel .cont .box a .txt h4 { font-size: 2.4rem; color:#212121; font-weight: 800; letter-spacing: -.07rem; margin: 1rem 0 0; }
.modal-pannel .cont .box a .txt h4 em { color: var(--point); }
.modal-pannel .cont .box a .txt ul { margin: 2rem 0; }
.modal-pannel .cont .box a .txt ul li { font-size: 1.6rem;  margin: 0.4rem 0; letter-spacing: -0.04em; padding-left: 1.7rem; position: relative;  }
.modal-pannel .cont .box a .txt ul li::before { content:''; width: 12px; height: 10px; display: inline-block; background: url('../img/main/ico_check.svg') no-repeat left center; position: absolute; left:0; top: 0.5rem; }
.modal-pannel .cont .box a .txt .detail { background:var(--point); display: inline-block; padding: 0 2rem; font-size: 1.4rem; color:#fff; border-radius: 2rem; line-height: 2.5em; box-sizing: border-box; }

.modal-content .decoImg { position: absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1;  }
.modal-content .decoImg img { position: absolute; }
.modal-content .decoImg img.decoL { left:0; bottom:-3.5%; }
.modal-content .decoImg img.decoR { right:0; bottom:13%; }


@media all and (max-width:1280px) {
	.modal-pannel .tit p { font-size: 1.8rem; }
	.modal-pannel .tit h3 { font-size: 3rem; }
	.modal-pannel .cont .box { margin: 0 10px; }
	.modal-content .decoImg img { max-width: 20vw; }
}

@media all and (max-width:800px) { 
	.modal-close { width: 40px; height: 40px; }
	.modal-pannel .tit p { font-size: 1.6rem; }
	.modal-pannel .tit h3 { font-size: 2.4rem; }
	.modal-pannel .cont .box { margin: 0 5px; } 
	.modal-pannel .cont .box a .txt h4 { font-size: 2rem; }
	.modal-pannel .cont .box a .txt ul li { font-size: 1.4rem; }
	.modal-pannel .cont .box a .txt ul li::before { width: 10px; height: 8px; }
}

@media all and (max-width:640px) { 
	.modal-content { padding: 6rem 0 3rem; }
	.modal-pannel { padding: 0 2rem; }
	.modal-pannel .cont {  margin: 3rem auto 2rem;  }
	.modal-pannel .tit { max-width: 90%; margin: 0 auto; word-break: keep-all; }
	.modal-pannel .cont .box a .txt { padding: 2.5rem 2rem; }
	.modal-pannel .cont .box a .txt h4 br { display: none; }
	.modal-pannel .cont .box a .txt .detail { font-size: 1.3rem; }
}


@media all and (max-width:480px) { 
	.modal-pannel .tit p { font-size: 1.5rem; }
	.modal-pannel .tit h3 { font-size: 2.2rem; }
	.modal-pannel .cont { flex-direction: column; max-width: 320px; }
	.modal-pannel .cont .box { max-width: 100%; margin: 5px 0; }
	.modal-pannel .cont .box a img { width: 75%; }
	.modal-pannel .cont .box a .txt p { font-size: 1.4rem; }
	.modal-pannel .cont .box a .txt h4 { font-size: 1.9rem; }
	.modal-content .decoImg img { max-width: 30vw; }
	.modal-content .decoImg img.decoR { bottom:0%; }
}

@media all and (max-width:380px) { 
	.modal-pannel .tit h3 { font-size: 2rem; }
	.modal-content .decoImg img { max-width: 32vw; }
	.modal-content .decoImg img.decoR { display: none; }
}

#m_conts + .footerWrap { margin-top: 0.7em; }

/*.footerWrap .infoWrap .siteMap { display: block }
.footerWrap .infoWrap .contact { width: calc(100% - var(--boxR) - var(--gap)); }*/


.layerPopup {display:none; position:fixed; z-index:99; top:150px; left:10px; background:#fff; border:1px solid #000; overflow:hidden;}
.layerPopup .pop-con {position:relative;}
.layerPopup .pop-con img {display:block; max-width:100%;}
.layerPopup .pop-control {display:block; position:relative; background:#000; color:#fff; padding:10px 40px 10px 10px; font-size:11px; min-width:200px; height:40px; overflow:hidden;}
.layerPopup .pop-control .dayCloseCheck {display:block; position:absolute; top:0; left:0; opacity:0; z-index:-9999; height:0 !important; width:0 !important;}
.layerPopup .pop-control .dayCloseCheck + label {display:inline-block; position:relative; line-height:20px; padding:0; cursor:pointer;}
.layerPopup .pop-control .dayCloseCheck + label:before {content:""; display:inline-block; width:12px; height:12px; vertical-align:middle; background:#fff; border:3px solid #fff; border-radius:100%; margin-right:.5em; box-sizing:border-box;}
.layerPopup .pop-control .dayCloseCheck:focus + label {text-decoration:underline;}
.layerPopup .pop-control .dayCloseCheck:checked + label:before {background:#0089ff;}
.layerPopup .pop-control .pop-close {display:block; position:absolute; top:10px; right:10px; width:20px; height:20px; background:transparent; overflow:hidden; text-indent:-999px;}
.layerPopup .pop-control .pop-close:before {content:"⨯"; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:20px; text-indent:0; color:#fff; font-size:2em;}


#layerpopup_mycode {left:200px;}

@media all and (max-width:1024px) {
	#layerpopup_mycode {left:50%; transform:translateX(-50%);}
}

@media all and (max-width:600px) {
	#layerpopup_mycode {width:90%;}
	.layerPopup .pop-con img {width:100%;}
}