/* 공통 */
.mtd20 {margin-top:2rem;}


/* 포토갤러리 */
.MVisual {position: relative; height:100%; border-radius:0rem; padding: 0; display:flex; z-index:1;}
.MVisual .visual-wrap {position:relative; width:calc(100% - 27.5rem);}
.MVisual .circle-wrap {position:relative; width:27.5rem; right:-4rem;}
.MVisual .circle-wrap .circle-slider {width:100%; height:27.5rem; border-radius:50%; overflow:hidden; background:#f0e7e0; box-shadow:10px 0 20px rgba(0,0,0,0.1);}
.MVisual .title {display:flex; align-items:center; gap:0.75rem; justify-content:center; flex-direction:column;}
.gallery .heading {max-width:10rem; white-space: nowrap; font-size: 2.25rem; color: #111111; line-height: 1; overflow: hidden; font-weight: 400; display:inline-block; vertical-align: middle;}
.gallery .heading strong {font-weight:900;}
.gallery .heading p {font-size:1rem; color:#111;}
.gallery .title i.icon_mobile {display:none;}
.gallery .title i {width:1.5rem; height:1.5rem; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:#5c4a34; font-weight:400; font-size:1rem; margin-top:0.5rem;}
.gallery ul{background:#f6f3ee; border-radius:1.25rem; display: flex; align-items: flex-start; justify-content: flex-start; margin: 0 -0.9rem; margin-top: 1.75rem; padding:3rem 3rem 6rem 3rem;}
.MVisual .item {width: 100%; overflow:hidden;}
.MVisual .visual-wrap .item a{display: flex; flex-direction:column; width: 100%; height: 100%; /*padding:1.5rem 0;*/}
.MVisual .visual-wrap .item a .box {padding:1rem 0; transition:all 0.25s; display:flex; flex-direction:column; gap:0.5rem;}
.MVisual .visual-wrap .item a .img{position: relative; overflow: hidden; transition: 0.15s;}
.MVisual .visual-wrap .item a .img img{display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.15s;}
.MVisual .visual-wrap .item a .date {color:#666666; font-weight:400; font-size:0.8rem;}
.MVisual .visual-wrap .item a .sub {font-size:1.2rem; font-weight:700; color:#222;}
.MVisual .visual-wrap .item a .tit {font-size:2.75rem; font-weight:900; color:#176955; margin-top:1rem; margin-bottom:0.5rem;}
.MVisual .visual-wrap .item a p {font-size:2.75rem; font-weight:300; color:#222222; margin:0; padding:0; line-height:1.4;}
.MVisual .visual-wrap .item a p strong {font-weight:900;}
.MVisual .more { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; background: #659e35; border-radius: 50%;  color: #fff; transition: 0.15s;}
.MVisual .more i{font-size: 1rem;}
.MVisual .no_data{ height: 11.95rem; margin-top: 1.75rem; display: flex; align-items: center; justify-content: center; color: #fff; }
.MVisual .control {position: absolute; left:0rem; bottom: 3rem; display: flex; align-items: center; width:100%; gap:0.25rem;}
.MVisual .control a {flex-shrink:0; font-size: 1.3rem; width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f5f5f5; box-shadow:10px 0 20px rgba(0,0,0,0.1);}
.MVisual .control a.play { display: none; }
.MVisual .control a.play,
.MVisual .control a.stop { margin: 0 0.5rem; font-size: 1.3rem; }
.MVisual .control a.more {background:#5c4a34; color:#fff; box-shadow:none;}
.MVisual .control .page { display: flex; align-items: center; color: #000000; font-size: 0.8rem; gap:1rem; padding:0 1rem;}
.MVisual .control .page strong { font-weight: bold; color: #222; }
.MVisual .control .page span { position: relative; }
.MVisual .control .page span::before { position: absolute; content: ""; background: #222; width: 0.15rem; height: 0.15rem; border-radius: 50%; top: 50%; transform: translateY(-50%); left: -0.5rem; }
.MVisual .control .bar { position: relative; width: 100%; height: 1px; background: #dddddd; overflow:hidden;}
.MVisual .control .bar::before { width: 0%; position: absolute; content: ""; left: 0; top: 0; height: 100%; background: #176955; }
.MVisual .control .bar.move::before { animation: move 4s forwards linear; }
.MVisual .control a:hover,
.MVisual .control a:focus {background:#176955; color:#fff;}
.MVisual .item a{ line-height:0;}
.MVisual .item a img {width:100%;}


/* 바로가기 */
.M_banner ul {position:relative; display:flex; gap:2rem; flex-wrap:wrap;}
.M_banner ul li {width:calc(50% - 1rem);}
.M_banner ul li a {overflow:hidden; display: flex; width:100%; position:relative; height:12.5rem; flex-direction:column; align-items: flex-start; gap:0rem; background:#fff; justify-content: center; font-size: 0.8rem; transition:all 0.15s; z-index:0; border-radius:1.5rem; padding:2.5rem 4.5rem 2.5rem 2.5rem;}
.M_banner ul li a .img {position:relative;}
.M_banner ul li a .img img{display: block; transition: 0.2s;}
.M_banner ul li a .tit {font-size: 1.4rem; font-weight: 700; flex-shrink: 0; line-height: 1.4; color: #222; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;} 
.M_banner ul li a .txt {font-size:0.9rem; flex-shrink:0; font-weight:400; color:#666666; width:100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height:2.5rem; line-height:1.3; overflow: hidden; text-overflow: ellipsis; margin-top:0.5rem;}
.M_banner ul li a .link {position:relative; width:2.5rem; height:2.5rem; border-radius:50%; background:#e0e0e0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:400; color:#222222; flex-shrink:0; margin-top:1rem;}
.M_banner ul li a .link:after {content: ''; position: absolute; z-index:-1; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(144,195,31,0.5); opacity:0;} 
.M_banner ul li a:before {content: ''; position: absolute; top: 0%; right: -100%; width: 100%; height: 100%; background: url('/images/bohun/template/H3/main/link-symbol.png') no-repeat 50% 50%; opacity: 1; transition: all 0.3s; z-index: 0;}
.M_banner ul li a:after {content:''; position:absolute; right:0.75rem; bottom:0.75rem; width:5rem; height:5rem;}
.M_banner ul li a:hover:before, .M_banner ul li a:focus:before {right: -30%; top: 0%;}
.M_banner ul li a:hover .link,
.M_banner ul li a:focus .link {background:#90c31f;}
.M_banner ul li a:hover .link:after,
.M_banner ul li a:focus .link:after  {animation: siteSpread 1.5s infinite linear; transform-origin: top left; opacity:1;}
.M_banner ul li a:hover .img img,
.M_banner ul li a:focus .img img { transform: rotateY(180deg); }
.M_banner ul li a:hover,
.M_banner ul li a:focus {border-color:#90c31f; outline:4px solid #90c31f; box-shadow:10px 0 20px rgba(144,195,31,0.2);}
.M_banner ul li:nth-child(1) a:after {background:url('/images/bohun/template/H3/main/banner-icon01.png') no-repeat 50% 50%; background-size:contain;}
.M_banner ul li:nth-child(2) a:after {background:url('/images/bohun/template/H3/main/banner-icon02.png') no-repeat 50% 50%; background-size:contain;}
.M_banner ul li:nth-child(3) a:after {background:url('/images/bohun/template/H3/main/banner-icon03.png') no-repeat 50% 50%; background-size:contain;}
.M_banner ul li:nth-child(4) a:after {background:url('/images/bohun/template/H3/main/banner-icon04.png') no-repeat 50% 50%; background-size:contain;}


/* 문의전화 */
.M_info {position:absolute; left:3rem; bottom:5rem; width:calc(100% - 3rem); z-index:1;}
.M_info .info_section {width:100%;}
.M_info .title {position:relative; display:flex; align-items:center; color:#fff; gap:0.3rem;}
.M_info .title p {font-size:1rem; color:#fff;}
.M_info .info_section .tel {font-size:2.5rem; font-weight:700; color:#fff; letter-spacing:-0.05rem;}
.M_info .info_section .date {display:flex; justify-content:space-between;}
.M_info .info_section .date strong {display:flex; align-items:center; justify-content:center; border-radius:0.75rem; background:#0e2c25; color:#fff; font-size:0.8rem; font-weight:400; height:1.5rem; padding:0 0.5rem;}
.M_info .info_section .date p {display:flex; align-items:center; color:#fff; font-size:0.8rem; gap:0.5rem;}


/* 게시판 */
.notice {position: relative;}
.notice .title {position:relative; display:flex; align-items:center; justify-content:space-between; }
.notice .title .tit {font-size:1.5rem; color:#ffffff; font-weight:700; display:flex; align-items:center; gap:0.5rem; max-width: 15rem; overflow: hidden; white-space: nowrap;} 
.notice .title .tit i {font-size:1rem; color:#fff; font-weight:400;}
.notice .more {position:absolute; top:0.25rem; right:0rem; display:flex; align-items:center; justify-content:center; color: #fff; transition: 0.15s; font-weight:700; gap:0.35rem;}
.notice .more i {font-size: 1rem; width:1.5rem; height:1.5rem; border-radius:50%; background:#092a22; display:flex; align-items:center; justify-content:center; color:#fff; transition:all 0.2s; font-weight:400;}
.notice .list_box{ position: relative; padding:0; height: 100%; }
.notice .list_box ul{ display: flex; flex-direction:column; align-items: flex-start; justify-content: flex-start; margin: 0 -0.9rem; margin-top:1rem;}
.notice .list_box ul li {width: 100%; padding: 0 0.9rem; line-height:2;}
.notice .list_box ul li a { display: flex; color:#fff; gap:1rem; justify-content:space-between; transition:all 0.2s; position:relative; padding-left:0.75rem;}
.notice .list_box ul li a:before {content:''; position:absolute; left:0; top:50%; transform:translate(0, -50%); width:5px; height:5px; border-radius:50%; background:#fff;}
.notice .list_box .tit {position:relative; font-size:0.9rem; font-weight:400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition:all 0.2s; transition:all 0.2s; z-index:0;}
.notice .list_box .tit:before {content:''; position:absolute; bottom:0.25rem; left:0; width:0%; height:0.5rem; background:rgba(255,255,255,0.2); transition:all 0.3s; border-radius:1rem; z-index:-1;}
.notice .list_box .tit:hover:before,
.notice .list_box .tit:focus:before {width:100%;}
.notice .list_box .date {display: flex; color: #fff; font-size:0.75rem; font-weight:300; align-items:center; gap:0.25rem;}
.notice .no_data {height:5.75rem; display:flex; align-items:center; justify-content:center; color:#fff;}


/* 팝업존 */
.popupzone { position: relative; isolation: isolate; overflow: hidden; margin-top:2rem;}
.popupzone .title {position:relative; display:flex; align-items:center; justify-content:space-between;}
.popupzone .title .tit {font-size:1.5rem; color:#ffffff; font-weight:700; display:flex; align-items:center; gap:0.75rem; max-width: 15rem; overflow: hidden; white-space: nowrap;} 
.popupzone .title .tit i {font-size:1rem; color:#fff; font-weight:400;}
.popupzone .more {position:absolute; top:0.25rem; right:0rem; display:flex; align-items:center; justify-content:center; color: #fff; transition: 0.15s; font-weight:700; gap:0.35rem;}
.popupzone .more i {font-size: 1rem; width:1.5rem; height:1.5rem; border-radius:50%; background:#1f5b99; display:flex; align-items:center; justify-content:center; color:#fff; transition:all 0.2s; font-weight:400;}
.popupzone #popupSlider {position:relative; border-radius:1.5rem; margin-top:1rem; overflow:hidden;}
.popupzone .item {overflow:hidden;}
.popupzone .item a { display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; width: 100%; background: #e1e1e1; height: 15rem; position: relative; }
.popupzone .item a::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: transparent; border: 2px solid #000000; opacity: 0; }
.popupzone .item a > img { max-width: 100%; }
.popupzone .control { position: absolute; top: 0.25rem; right: 0; display: flex; align-items: center; z-index: 1; gap:0.25rem;}
.popupzone .control .page { display: flex; gap: 0.95rem; align-items: center; font-size: 0.75rem; color: #fff; font-weight: 300; margin: 0 0.5rem; }
.popupzone .control .page strong { font-weight: bold; color: #fff; }
.popupzone .control .page span { position: relative; }
.popupzone .control .page span::before { position: absolute; content: ""; background: #cccccc; width: 0.15rem; height: 0.15rem; border-radius: 50%; top: 50%; transform: translateY(-50%); left: -0.5rem; }
.popupzone .control > a { font-size: 1.1rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.popupzone .control > a i {font-size: 1rem; width:1.5rem; height:1.5rem; border-radius:50%; background:#092a22; display:flex; align-items:center; justify-content:center; color:#fff; transition:all 0.2s; font-weight:400;}
.popupzone .control > a.play { display: none; }
.popupzone .item a:focus::before { opacity: 1; }


@keyframes siteSpread {
    0% {transform: scale(1) translate(-50%, -50%); opacity: 1;}
    100% {transform: scale(1.5) translate(-50%, -50%); opacity: 0;}
}

@keyframes move {
    0% { width: 0; }
    100% { width: 100%; }
}


@media screen and (max-width: 1680px){
	.MVisual .visual-wrap .item a .tit,
	.MVisual .visual-wrap .item a p {font-size:2rem;}
	.MVisual .visual-wrap .item a {position:relative;}
	.M_info .info_section .tel {font-size:2rem;}
}

@media screen and (max-width: 1440px){
	.MVisual {width:100%; justify-content: space-around;}
	.MVisual .circle-wrap {top:5rem; right:1rem; width:22rem; height:22rem;}
	.MVisual .circle-wrap .circle-slider {height:100%;}	
	.M_info {position:relative; top:0; left:1rem; width:22.5rem; display:flex; gap:0.75rem;}
	.M_info .title {flex-shrink:0; position:relative; top:-0.75rem;}
	.M_info .info_section .tel {font-size:2rem;}
	.M_info .info_section .date {position:relative; left:-5rem;}
	.popupzone {margin-top:2rem;}
}

@media screen and (max-width: 1240px){
	.M_banner ul {flex-direction:column; gap:1rem;}
	.M_banner ul li {width:100%;}
	.M_banner ul li a {height:6rem; border-radius:0.75rem; padding-left:1.5rem;}
	.M_banner ul li a .tit{ font-size:1.25rem;}
	.M_banner ul li a .txt {height:auto; max-height:2.5rem;}
	.M_banner ul li a:before {background-size:50%;}	
	.M_banner ul li a:after {display:none;}
	.M_banner ul li a .link {position:absolute; right:1.5rem; top:50%; transform:translate(0, -50%); margin-top:0;}
	
	.MVisual .control {width:calc(100% - 2rem); left:1rem;}
	.MVisual .circle-wrap {width:25rem; height:25rem; top:1rem;}
	.MVisual .visual-wrap .item a {left:1rem;}
	.notice .list_box ul {margin-top:1rem;}
}

@media screen and (max-width: 1024px){	
	.M_banner ul li a .txt {display:block; white-space:nowrap; }
	.MVisual .visual-wrap .item a .tit, 
	.MVisual .visual-wrap .item a p {font-size:1.5rem;}
	.MVisual .control a {width:1.5rem; height:1.5rem;}
	.MVisual .visual-wrap {width:calc(100% - 21rem);}
	.MVisual .circle-wrap {width:20rem; height:20rem; top:1.5rem;}
}

@media screen and (max-width: 760px){
	.MVisual .control {position:static; margin:0 0 1rem 1rem;}
	.MVisual .visual-wrap {width:calc(100% - 15rem);}
	.MVisual .circle-wrap {width:13rem; height:13rem; top:2.5rem;}
	.M_banner ul {flex-direction:row;}
	.M_banner ul li {width:calc(50% - 0.5rem);}

	.popupzone #popupSlider{ border-radius:1rem;}
}

@media screen and (max-width: 580px){
	.MVisual {flex-direction:column;}
	.MVisual .visual-wrap .item a {left:0; text-align:left;}
	.MVisual .visual-wrap .item a p br {display:none;}
	.MVisual .visual-wrap .item a p span {margin-left:0.5rem;}
	.MVisual .visual-wrap .item a .tit {margin-bottom:0;}
	.MVisual .visual-wrap {width:100%;}	
	.MVisual .visual-wrap .item a {padding:1.5rem 1rem;}
	.MVisual .circle-wrap {top:0; width:20rem; height:20rem; right:auto; left:50%; transform:translate(-50%, 0);}
	.M_banner ul li a {padding:1.5rem; flex-direction:row; justify-content:space-between; align-items:center;}
	.M_banner ul li a .txt {display:none;}
	.M_info {margin:0 auto; text-align:center; left:0; padding:0 1rem;}
	.M_info .info_section .date {width: calc(100% + 3rem);}
	.popupzone .item a {height:auto;}
}

@media screen and (max-width: 480px){
	.M_banner ul li a {padding:1.5rem 1rem;}
	.M_banner ul li a .tit {font-size:0.9rem;}
	.M_banner ul li a .link {width:1.5rem; height:1.5rem; font-size:1rem;}
	.MVisual .circle-wrap {width:18rem; height:18rem;}
	.notice .title .tit,
	.popupzone .title .tit {font-size:1.2rem;}
}

@media screen and (max-width: 410px){
	.M_info {flex-direction:column; text-align:left; width:100%; gap:0;}
	.M_info .title {top:0;}
	.M_info .info_section .date {left:0; width:100%;}
	.M_banner ul {flex-direction:column;}
	.M_banner ul li {width:100%;}
	.M_banner ul li a {height:4rem; padding:1rem;}
}

@media screen and (max-width: 320px){
	.M_info .info_section .date {flex-direction:column; gap:0.25rem;}
	.MVisual .visual-wrap .item a .tit {font-size:1.2rem;}
	.MVisual .visual-wrap .item a .tit, 
	.MVisual .visual-wrap .item a p {font-size:1.2rem;}
	.MVisual .circle-wrap {width:16rem; height:16rem;}
	.M_info .info_section .tel {font-size:1.75rem;}
	.popupzone .control .page {margin:0;}
}