﻿/* 공통 */
.mtd20 {margin-top:2rem;}

/* 비주얼 영역 */
.slider-wrapper {position: relative; width: 100%; height: 100%; z-index:0;}
.slider-wrapper:after {content:''; position:absolute; width: calc(100% + 50rem); height:calc(100% + 10rem); background:url('/images/bohun/template/H2/main/visual-before.png') no-repeat 50% 100%; background-size:cover; top:0; left:50%; transform:translate(-50%, 0); z-index:-1;}
.slider-wrapper a.link {width:15rem; height:15rem; border-radius:50%; background:#177254 url('/images/bohun/template/H2/main/circle-bg.png') no-repeat 50% 50%; position:absolute; bottom:14rem; right:0; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; padding-top:3rem;}
.slider-wrapper a.link p {color:#fff; font-size:0.9rem; font-weight:300; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.6;}
.slider-wrapper a.link strong {font-size:1.2rem; display:flex; align-items:center; font-weight:700; color:#fff; margin-top:0.25rem;}
.slider-wrapper a.link span {position:absolute; width:3rem; height:3rem; border-radius:50%; background:#fff; top:0.25rem; right:0.75rem; box-shadow:0 0 10px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; color:#000; font-size:1.2rem; font-weight:400; transition: all 0.2s;}
.slider-wrapper a.link:hover span,
.slider-wrapper a.link:focus span { transform: rotate(45deg);}
.slider-mask {position: relative; left:-14.5rem; width: calc(100% + 29rem); height: 100%; -webkit-mask-image: url('/images/bohun/template/H2/main/path.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0%; mask-image: url('/images/bohun/template/H2/main/path.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: 0 0%;}
.visual-slider {display: flex;}
.visual-slider .item {flex: 0 0 100%; transition: transform 0.5s ease;}
.visual-slider .item img {width: 100%; height: auto;}
.slick-slider {-webkit-transition:all ease-in-out 0.3s; transition:all ease-in-out 0.3s; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-slide {display:none; height:100%; min-height:1px; vertical-align:middle; outline: none;}
.slick-list.dragging { cursor:pointer;}
.slick-initialized .slick-slide { display:inline-block; }
.slick-arrow.slick-hidden { display:none;}
.slick-current {opacity:1; display:block;}
.slick-track {position:relative; width:100%; left:0; top:0; display:block; margin-left:auto; margin-right:auto;}
.slick-list, .slick-track {height:100%;width:100%;}


/* 포토갤러리 */
.gallery {position: relative; border-radius: 0.5rem; padding: 0; }
.gallery .slick-list { overflow: visible;}
.gallery ul {margin: 0 -0.9rem; width: 81.8rem;}
.gallery ul li {width: 25%; padding: 0 0.9rem 0.9rem; opacity: 0; transition: all 0.2s;}
.gallery ul li.slick-active { opacity: 1;}
.gallery ul li a {display: block; width: 100%; height: 100%; box-shadow:0 0 30px rgba(0,0,0,0.08); border-radius:0.75rem;}
.gallery ul li a .box {padding:0.5rem 1.5rem 1rem; transition:all 0.25s; display:flex; flex-direction:column; gap:0.5rem;}
.gallery ul li a .box .title {display:flex; justify-content:space-between; align-items:center; height:2.5rem; border-bottom:1px dashed #e5e5e5;}
.gallery ul li a .box .title .num {display:flex; align-items:center; gap:1rem;}
.gallery ul li a .box .title .num p {font-size:0.75rem; color:#555555; display:flex; gap:0.25rem; align-items:center;}
.gallery ul li a .box .title .num i {width:1.5rem; height:1.5rem; border-radius:50%; background:#f4f4f4; display:flex; align-items:center; justify-content:center; color:#000; font-size:0.85rem; font-weight:400;}
.gallery ul li a .box .info .name {display:flex; justify-content:space-between; align-items:center;}
.gallery ul li a .box .info .name p {font-size:0.8rem; color:#333; font-weight:700;}
.gallery ul li a .box .info .name em {color:#555; font-weight:300; font-size:0.7rem;}
.gallery ul li a .box .info ul {flex-wrap:wrap; display:flex; margin:0.5rem 0 0 0; gap:1rem;}
.gallery ul li a .box .info ul li {position:relative; flex-grow:1; font-size:0.75rem; color:#555; font-weight:400; padding:0;}
.gallery ul li a .box .info ul li:after {content:''; position:absolute; width:1px; height:calc(100% - 0.25rem); background:#e5e5e5; right:0; top:50%; transform:translate(0, -50%);}
.gallery ul li a .box .info ul li:last-child:after {display:none;}
.gallery ul li a .box .info ul li strong {color:#333;}
.gallery ul li a .img {position: relative; height: 12.5rem; background: #fff; border-radius: 0.75rem; overflow: hidden; transition: 0.15s;}
.gallery ul li a .img img {position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.15s; height:100%; width: 100%; object-fit: cover;}
.gallery ul li a .tit {font-size: 0.9rem; font-weight: 700; color: #222; padding: 0 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gallery ul li a .date {color:#666666; font-weight:400; font-size:0.8rem;}
.gallery .control {position: relative; left: 0rem; display: flex; align-items: center; width:100%; gap:0.25rem; margin-top:1.5rem;}
.gallery .control a {flex-shrink:0; font-size: 1.15rem; width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; color:#000;}
.gallery .control a.play {display: none;}
.gallery .control .page {display: flex; width:100%; align-items: center; color: #000000; font-size: 0.9rem; margin-right: 1.2rem; background: #aeb4bc; height: 2px; border-radius: 1rem;}
.gallery .control .page > strong {font-weight: bold;}
.gallery .control .page > span {font-weight: 400;}
.gallery .control .page .bar {position: relative; width: 100%; height: 4px; background: #177254; border-radius: 1rem;}
.gallery .more { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; background: #659e35; border-radius: 50%;  color: #fff; transition: 0.15s;}
.gallery .more i{font-size: 1rem;}
.gallery .no_data{ height: 11.95rem; margin-top: 1.75rem; display: flex; align-items: center; justify-content: center; color: #fff; }
.gallery ul li a.new{position: relative;}
.gallery ul li a.new::before{font-family: 'Montserrat'; font-weight: 600; font-size: 0.7rem; content: 'New'; display: block; padding: 0.5rem 0.25rem; position: absolute; right: 1.5rem; top: -0.5rem; background: #00deb7; z-index: 1; border-radius: 0.5rem; box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.2);}
.gallery ul li a:hover .tit,
.gallery ul li a:focus .tit {color:#156a32;}
.gallery ul li a:hover .img,
.gallery ul li a:focus .img {border-radius:1rem;}
.gallery ul li a:hover .img img,
.gallery ul li a:focus .img img{transform: translate(-50%, -50%) scale(1.1);}


/* 리스트배너 */
.M_list {width:100%; height:100%; display:flex; justify-content:space-between; gap:1.8rem;}
.M_list .title {position:relative; display:flex; width:calc(25% - 1.5rem); align-items:flex-end; gap:0.75rem; justify-content:center; flex-direction:column; gap:0.9rem;}
.M_list .title:before {content:'';top:-5rem; left:-2rem; position:absolute; width:14rem; height:12.5rem; background:url('/images/bohun/template/H2/main/list-character.png'); opacity: 0; transition: all 0.2s;}
.active .M_list .title:before { opacity: 1; transition-delay: 1.3s;}
.M_list .heading {max-width:10rem; white-space: nowrap; font-size: 1.5rem; color: #111111; line-height: 1; overflow: hidden; font-weight: 700; display:inline-block; vertical-align: middle;}
.M_list ul {display:flex; flex-grow:1; margin: 0 -0.9rem; }
.M_list ul li {flex-grow:1; width: 25%; padding: 0 0.9rem;}
.M_list ul li a {padding:0 1.5rem 0 1rem; max-height:4.5rem; height:100%; font-size:0.9rem; font-weight:400; background:#e9f6f2; border-radius:0.75rem; display:flex; align-items:center; justify-content:space-between; transition: all 0.2s; border: 1px solid transparent;}
.M_list ul li a i {margin-left:auto; font-size:1.25rem; font-weight:400; transition: all 0.2s;}
.M_list ul li a .txt {margin-left:0.5rem; max-width:10rem; height:1.5rem; overflow:hidden;}
.M_list ul li a:hover,
.M_list ul li a:focus { border-color:#27c590;}
.M_list ul li a:hover i,
.M_list ul li a:focus i { color:#27c590;}

/* 게시판 */
.notice{position: relative;}
.notice .title {display:flex; align-items:center; gap:0.75rem;}
.notice .titTab {overflow: hidden;}
.notice .titTab ul{display: flex; color: #fff; gap:0.5rem;}
.notice .titTab ul li {position:relative; text-align: center; color:#222;}
.notice .titTab ul li a {position: relative; display: flex; width:8rem; height:3rem; align-items:center; justify-content:space-between; border-radius:1.5rem; background:#e8e8e8; white-space: nowrap; overflow: hidden; padding:0 1.5rem; font-size: 1rem; font-weight: 400; color:#111;}
.notice .tabWrap {border-radius: 0 0 0.5rem 0.5rem;}
.notice .tabWrap .list_box{ position: relative; display: none; padding:0; height: 100%; }
.notice .tabWrap .list_box ul{height: auto; display: flex; align-items: stretch; justify-content: flex-start; margin: 0 -0.9rem; margin-top:1.75rem;}
.notice .tabWrap .list_box ul li{display:flex; width: 25%; padding: 0 0.9rem;}
.notice .tabWrap .list_box ul li:nth-child(n+5){display: none;}
.notice .tabWrap .list_box ul li a { min-width: 0px; display: flex; flex-direction:column; padding:2rem; color:#222; box-shadow:0 0 30px rgba(0,0,0,0.08); border-radius:0.75rem; background:#fff; gap:1rem;  transition:all 0.2s;}
.notice .tabWrap .list_box .tit {font-size:0.9rem; font-weight:600; color:#000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition:all 0.2s;}
.notice .tabWrap .list_box .txt {font-size:0.8rem; font-weight:400; color:#666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.notice .tabWrap .list_box .date {display: flex; color: #989898; font-size:0.75rem; font-weight:300; align-items:center; gap:0.25rem;}
.notice .tabWrap .list_box .date i {color:#989898;}
.notice .more {position:absolute; top:-4rem; right:0rem; display:flex; align-items:center; justify-content:center; color: #111; transition: 0.15s;}
.notice .more i {font-size: 1.5rem; transition:all 0.2s;}
.notice .tabWrap .list_box .no_data{display: flex; align-items: center; justify-content: center; width: 100%; height:12rem; border-radius:1rem;  margin-top: 1.75rem; background:#fff; max-width:100%; box-shadow:0 0 30px rgba(0,0,0,0.08);}
.notice .tabWrap .list_box ul li a.new::before{font-family: 'Montserrat'; font-weight: 600; content: 'New'; color: #da0000; background: #ffebe9; line-height: 1; margin-right: 0.5rem;}
.notice .titTab ul li a.current {background: #c8056c; color: #fff; font-weight: 700;}
.notice .tabWrap .list_box.on{display: block;}
.notice .more:hover i,
.notice .more:focus i {transform:rotate(180deg);}
.notice .tabWrap .list_box ul li:hover a,
.notice .tabWrap .list_box ul li:focus a {outline:1px solid #c8056c;}
.notice .tabWrap .list_box ul li:hover a .tit,
.notice .tabWrap .list_box ul li:focus a .tit {color:#c8056c;}


/* 보고서 */
.M_report {position:relative; display:flex; flex-direction:column; align-items:flex-start; height:100%;}
.M_report .heading {font-size:1rem; font-weight:700; max-width:10rem; height: 1.5rem; overflow: hidden;}
.M_report ul {display:flex; gap:1rem; width:100%; justify-content:space-between;}
.M_report ul li {display:flex; flex-direction:column; justify-content:space-between;}
.M_report ul li p.tit {font-size:0.75rem; font-weight:700; color:#3c1fbf; margin-top:1rem;}
.M_report ul li p.txt {font-size:0.85rem; font-weight:500; color:#000; margin-top:0.75rem; margin-bottom:auto; max-height: 3.5rem; overflow: hidden;}
.M_report ul li img {border-radius:0.75rem; box-shadow:4px 0 10px rgba(0,0,0,0.08);}
.M_report ul li a {height:2.25rem; width:8rem; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:300; color:#666666; border-radius:1.125rem; border:2px solid rgba(0,0,0,0.2); transition: all 0.2s;}
.M_report ul li a i {font-size:1rem; font-weight:300;}
.M_report ul li a:hover,
.M_report ul li a:focus { color: #3c1fbf; border-color: #3c1fbf;}
.M_report > .more{display:flex; align-items:center; justify-content:center; position:absolute; top:0rem; right:0; width:1.5rem; height:1.5rem;}
.M_report > .more i {font-size:1rem; color:#757575;}

/* 배너버튼 */
.M_banner {margin-top:1rem; display:flex; flex-direction:column; gap:1rem;}
.M_banner a {display:flex; align-items:center; justify-content:flex-start; border-radius:0.75rem; height:4.5rem; background:#6750cd; padding:0 1.5rem 0 1rem; gap:0.5rem; transition:all 0.2s;}
.M_banner a p {font-size:0.9rem; font-weight:500; color:#fff; max-width:10rem; overflow:hidden;}
.M_banner a i {font-size:1.2rem; font-weight:500; color:#fff; margin-left:auto;}
.M_banner a:hover,
.M_banner a:focus {background:#2e159d;}


/* 팝업존 */
.popupzone { position: relative; margin-top:1rem;}
.popupzone .item {isolation: isolate; border-radius: 1rem; overflow: hidden;}
.popupzone .item a { display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; width: 100%; background: #2e2a78; height: 10rem; position: relative; }
.popupzone .item a::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 1.5rem 1.5rem 0 1.5rem; background: transparent; border: 2px solid #000000; opacity: 0; }
.popupzone .item a > img { max-width: 100%;}
.popupzone .control { position: absolute; bottom: -1rem;; right: 0; display: flex; background:#fff; border-radius: 1rem 0 1rem 1rem; padding:0 1rem; z-index: 1; height:2rem; display:flex; align-items:center; }
.popupzone .control .page { display: flex; gap: 0.95rem; align-items: end; font-size: 0.75rem; color: #666666; font-weight: 300; margin-right: 0.5rem; }
.popupzone .control .page strong { font-weight: bold; color: #c8056c; }
.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: #000; display: inline-flex; align-items: center; justify-content: center; }
.popupzone .control > a.play { display: none; }
.popupzone .item a:focus::before { opacity: 1; }



.M_educate {position:relative; width:100%; display:flex; margin-top:2.5rem;}
.M_educate > div {flex-grow:1; width:100%;}
.M_educate .edu_banner {display:flex; border-top:2px solid #000; padding-top:1.5rem; justify-content:space-between; gap:2rem;}
.M_educate .edu_banner a {position:relative; flex-grow:1; font-size:0.9rem; font-weight:400; display:flex; justify-content:flex-start; align-items:center; gap:0.5rem;}
.M_educate .edu_banner a:after {content:''; position:absolute; right:-1rem; width:1px; height:calc(100% - 0.5rem); background:#c6c6c8; top:50%; transform:translate(0, -50%);}
.M_educate .edu_banner a:hover,
.M_educate .edu_banner a:focus { color: #c8056c;}
.M_educate .edu_banner a:last-child:after {display:none;}
.M_educate .edu_banner a i:nth-child(1) {font-size:1.4rem;}
.M_educate .edu_banner a i:last-child {font-size:1.2rem; font-weight:100; margin-left:auto;}
.M_educate .list-slider {position:relative; margin-bottom:2.5rem; max-width:38rem;}
.M_educate .list-slider .item {padding-top:2rem;}
.M_educate .list-slider .item .tit {font-size:1.5rem; font-weight:900; color:#000; margin-bottom:1.5rem;}
.M_educate .list-slider .item p {font-size:0.9rem; font-weight:400; color:#333;}
.M_educate .list-slider .item a {margin-top:2.5rem; height:2.5rem; width:8rem; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:300; color:#666666; border-radius:1.125rem; border:2px solid rgba(0,0,0,0.2);transition: all 0.15s;}
.M_educate .list-slider .item a i {font-size:1rem; font-weight:300;}
.M_educate .circle-wrap {position:relative; width:29rem; height:29rem; margin-left:auto; top:-5rem;}
.M_educate .list-slider .item a:hover,
.M_educate .list-slider .item a:focus { border-color: #c8056c; color:#c8056c ;}
.M_educate .circle-wrap:before {content:''; position:absolute; left:50%; bottom:-2.5rem; transform:translate(-50%, 0); width:40rem; height:27.5rem; background:url('/images/bohun/template/H2/main/flower-cover.png') no-repeat 50% 50%; z-index:1;}
.M_educate .circle-wrap .circle-slider {position:relative; width:100%; border-radius:50%; height:100%; background:#fff; overflow:hidden;}
.M_educate .circle-wrap .ebook-banner {position:absolute; bottom:0; z-index:1; width:10rem; height:10rem; border-radius:50%; background:#3c1fbf url('/images/bohun/template/H2/main/ebook-banner-bg.png') no-repeat 50% 50%; right:-2rem; transition:all 0.2s; display:flex; align-items:center; justify-content:center; color:#fff; flex-direction:column;}
.M_educate .circle-wrap .ebook-banner p {font-size:1rem; font-weight:400;}
.M_educate .circle-wrap .ebook-banner strong {font-size:1.1rem; font-weight:700;}
.M_educate .circle-wrap .ebook-banner p:last-child {position:relative; font-weight:700; padding-top:1.5rem;}
.M_educate .circle-wrap .ebook-banner p:last-child:before {content:'\EF78'; position:absolute; top:0.25rem; left:50%; transform:translate(-50%, 0); color:#fff; font-weight:700; font-family: 'remixicon';}
.M_educate .circle-wrap .ebook-banner:after {content: ''; position: absolute; z-index:-1; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(60, 31, 191, 0.5);}
.M_educate .circle-wrap .ebook-banner:hover:after,
.M_educate .circle-wrap .ebook-banner:focus:after {animation: siteSpread 1.5s infinite linear; transform-origin: top left;}
.M_educate .slick-dots {display: flex;  gap:0.5rem;}
.M_educate .slick-dots button {position: relative; display: flex; min-width:8rem; height:3rem; align-items:center; justify-content:space-between; border-radius:1.5rem; background:#e8e8e8; white-space: nowrap; overflow: hidden; padding:0 1.5rem; font-size: 1rem; font-weight: 400; color:#111; transition:all 0.2s;}
.M_educate .slick-dots .slick-active button,
.M_educate .slick-dots button:hover,
.M_educate .slick-dots button:focus {background:#c8056c; color:#fff; font-weight:700;}

.notice-box {position:absolute; width:100%; height:4rem; bottom:0; background:#fff; border-radius:1.75rem 1.75rem 0 0; box-shadow:0 0 20px rgba(0,0,0,0.08); padding:0 2rem; display:flex; align-items:center; justify-content:space-between;}
.notice-box .notice-tit {display:flex; align-items:center; gap:0.75rem;}
.notice-box .notice-tit i.ri-megaphone-line {width:2.5rem; height:2.5rem; border-radius:50%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; color:#3c1fbf; font-size:1.2rem;}
.notice-box .notice-tit i.ri-more-fill {color:#000; font-size:1rem; font-weight:700;}
.notice-box .notice-tit .tit {font-size:1rem; font-weight:700; color:#3c1fbf;}
.notice-box .notice-tit .notice {font-size:0.8rem; font-weight:400; color:#111; min-width:25rem; max-width:25rem; width:100%; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;}
.notice-box .notice-tit .notice > span { font-weight: 600;}
.notice-box .date {margin-left:auto; display:flex; align-items:center; font-size:0.75rem; font-weight:300; gap:1rem;}
.notice-box .date em {color:#3c1fbf;}
.notice-box .status {height:2rem; padding:0 1rem; border-radius:1rem; background:#3c1fbf; display:flex; align-items:center; justify-content:center; margin-left:2rem;}
.notice-box .status em {font-size:0.75rem; font-weight:700; color:#fff;}
.notice-box .notice-tit .notice:hover,
.notice-box .notice-tit .notice:focus {color:#3c1fbf; font-weight: 600;}

/* 바로가기 */
.M_link {width:100%;}
.M_link ul{ position:relative; display:flex; justify-content:space-between; padding:0 2rem;}
.M_link ul li a {display: flex; flex-direction:column; align-items: center; gap:1.5rem; justify-content: center; font-size: 0.8rem;}
.M_link ul li a .img {position:relative; top:0rem; transition:all 0.3s;}
.M_link ul li a .img:before {content:''; position:absolute; width:4rem; height:4rem; border-radius:50%; left:50%; top:50%; background:#f4f4f4; transform:translate(-50%, -50%); transition:all 0.3s;  z-index:-1;}
.M_link ul li a .img img{display: block;}
.M_link ul li a .txt {font-size:0.9rem; font-weight:700; color:#222; overflow: hidden; position:relative; z-index:0;}
.M_link ul li a .txt:before {content:''; position:absolute; bottom:0; left:0; width:0%; height:0.5rem; background:rgba(0,0,0,0.2); transition:all 0.3s; border-radius:1rem; z-index:-1;}
/* 바로가기 : active */
.M_link ul li a:hover .img,
.M_link ul li a:focus .img {top:0.25rem;}
.M_link ul li a:hover .img:before,
.M_link ul li a:focus .img:before {background:rgba(0,0,0,0.4);}
.M_link ul li a:hover .txt:before,
.M_link ul li a:focus .txt:before {width:100%;}


@keyframes move {
    0% { width: 0; }
    100% { width: 100%; }
}


@keyframes scroll-animation{
    0%{
        left: 0;
    }
    100%{
        left: -3000px;
    }
}

@keyframes gage {
    0% { width: 0%; }
    
    100% { width: 100%; }
}


@media screen and (max-width: 1680px) {
    .section .inner {padding:3rem 1rem;}
    .section1 .inner {padding:0 1rem!important;}
    .slider-wrapper a.link {bottom:5rem;}
}

@media screen and (max-width: 1600px) {
    .notice-box {border-radius:1rem; height:auto; width:calc(100% - 2rem); padding:1rem; left:1rem; right:1rem; bottom:1rem; align-items:center;}
    .notice-box .notice-tit {align-items: center;}
    .notice-box .notice-tit .notice {flex: 0 0 100%;}
    .M_educate > div {margin-bottom:2rem;}
    .notice .tabWrap .list_box .txt {-webkit-line-clamp: 2; }
    .M_educate .circle-wrap .ebook-banner {right:0;}
}

@media screen and (max-width: 1460px){
    .notice-box {flex-direction:column; align-items:flex-start;}
    .notice-box .notice-tit  {flex-wrap:wrap;}
    .notice-box .date {margin-left: 0;margin-top: 0.2rem;}
    .notice-box .status {position:absolute; right:1rem; top:1rem;}
    
    .M_banner ul {justify-content:space-between; padding: 0 1rem;}
    .M_banner ul li {flex:1 0 auto;}
    .M_banner ul li a {width:100%;}
    .M_info {max-width:100%;}
    .M_info .title {display:flex; justify-content:space-between; align-items:center;}
    .M_info ul {flex-direction:row; margin:0; gap:1rem;}
    .M_educate > div {max-width:calc(100% - 20rem);}
    .M_educate .circle-wrap {width:20rem; height:20rem; top:0;}
    .M_educate .circle-wrap:before {background-size:contain;width: 28rem;height: 20.5rem;}
    .M_educate .edu_banner a {font-size:0.8rem;}
    .M_educate .circle-wrap .circle-slider .item img {width:100%;}
    
    
}

@media screen and (max-width: 1280px){
    .M_educate { margin-top: 0.7rem;}
    .M_educate .slick-dots button {font-size:0.9rem; min-width:6rem;}
    .notice-box {position:relative;  height:auto; flex-direction:column;}
    .M_list ul {margin:0 -0.25rem}
    .M_list ul li {padding: 0 0.25rem;}
    .M_list ul li a {padding:0 1rem 0 0.5rem; justify-content:space-around;}
    .M_list ul li a .txt {margin-left:0;}
    .M_list ul li a i {display:none;}
    .M_list .title:before {width:9rem; height:8.5rem; background-size:contain; left:0; top:-1rem;}
    
    .notice .tabWrap .list_box ul li {width:33.333333%;}
    .notice .tabWrap .list_box ul li:nth-child(n+4){display: none;}
    .notice-tit .more {display:none;}
    .notice-box {left:0; right:0; bottom:0; top:0; width:100%;}
    [class*="mot"] {opacity:1; transform: translate(0%, 0%);}
}

@media screen and (max-width: 1024px){
    .M_educate {flex-direction:column;}
    .M_educate > div {margin-bottom:1rem; max-width:100%;}
    .M_educate .circle-wrap {width:100%; height:auto; top:0;}
    .M_educate .circle-wrap .circle-slider,
    .M_educate .circle-wrap:before {display:none;}
    .M_educate .circle-wrap .ebook-banner {position:relative; align-items:center; width:100%; height:2.5rem; flex-direction:row; justify-content:center; border-radius:1.225rem; bottom:0; margin-bottom:1rem; padding:0 1.5rem; font-size:0.9rem; font-weight:700; background:#3c1fbf; right:auto;}
    .M_educate .circle-wrap .ebook-banner p:last-child {margin-left:auto; padding-top:0;}
    .M_educate .circle-wrap .ebook-banner p:last-child:before {display:none;}
    .M_educate .circle-wrap .ebook-banner:hover:after,
    .M_educate .circle-wrap .ebook-banner:focus:after {display:none;}
    .M_educate .circle-wrap .ebook-banner strong {margin-left:0.25rem;}
    
    .M_list {flex-direction:column; gap:1.25rem;}
    .M_list .title {align-items:flex-start;}
    .M_list .title:before {display:none;}
    .M_list ul li a .img {display:none;}
    .M_list ul li a .txt {text-align:center; padding:0.75rem 0; font-weight:700; height:2.5rem;}
    .M_list ul li a {padding:0 0.5rem 0 0.5rem; }
    
}

@media screen and (max-width: 768px){
    .slider-wrapper:after { height: calc(100% + 7rem); }
    
    
    .M_banner { flex-direction: row;gap:0.5rem;}
    .M_banner a { height: 2.5rem; width: 50%;}
    .M_banner a p.img { display: none;}
    
    .popupzone { margin-top: 0;}
    
    .M_info .title {flex-direction:column; align-items:flex-start; gap:1rem; justify-content:flex-start;}
    .notice-box .notice-tit {gap:0.25rem 0.75rem; width: 100%;}
    .notice-box .notice-tit .notice {min-width: auto;max-width: fit-content;}
    .notice-box .status { top: 0.7rem;}
    .notice-box .date {flex-direction:column; gap:0.25rem; align-items:flex-start;}
    .notice .tabWrap .list_box ul li {width:50%;}
    .notice .tabWrap .list_box ul li:nth-child(n+3){display: none;}
    .slider-wrapper a.link {  width:100%; height:2.5rem; justify-content:center; border-radius:1.225rem; bottom:0; margin-bottom:1.5rem; padding:0 1.5rem; align-items:flex-start; font-size:0.9rem; font-weight:700; background:#177254;}
    .slider-wrapper a.link:before {display:none;}
    .slider-wrapper a.link span {width:2rem; height:2rem; right:0.25rem;}
    .slider-wrapper a.link p {display:none;}
    .slider-wrapper a.link strong {margin-top:0;}
    
    .gallery ul {margin: 0 -0.4rem; }
    .gallery ul li { padding: 0 0.4rem 0.4rem; }
    
    .M_educate .list-slider {max-width:100%;}
    .M_educate .edu_banner {width:100%;}
    .section1 .inner .control {transform: scale(0.8) translate(-50%, 0); transform-origin: left top;}
}


@media screen and (max-width: 620px){
    .section .inner {padding:0.75rem 1rem;}
    
    .M_banner ul {flex-wrap:wrap; }
    .M_banner ul li {flex:1 1 40%;}
    .M_banner ul li a .img {width:2.5rem; height:2.5rem;}
    .M_banner ul li a .img img {width:100%;}
    .M_banner ul li a .txt {line-height:1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
    .M_info ul {flex-direction:column; gap:0.25rem;}
    .M_link ul {flex-wrap:wrap; padding:0; gap:1.5rem 0;}
    .M_link ul li {flex:1 1 33.33%;}
    
    .M_educate .list-slider .item p br { display: none;}
    .M_educate .slick-dots,
    .notice .titTab ul {flex-wrap:wrap;}
    .M_educate { margin-top: 0.3rem;}
    .M_educate > div { margin-bottom: 0;}
    .M_educate .slick-dots button { height: 2rem; font-size: 0.8rem; padding: 0 1rem;}
    .M_educate .edu_banner a { justify-content: center; text-align: center;}
    .M_educate .edu_banner a i { display: none;}
    .M_educate .edu_banner {padding: 0.8rem 0;}
    .M_educate .list-slider { margin-bottom: 1.5rem;}
    .M_educate .list-slider .item { padding-top: 1rem;}
    .M_educate .list-slider .item .tit {font-size:1.2rem; margin-bottom:1rem;}
    .M_educate .list-slider .item a { height: 2rem; margin-top: 1.5rem;}
    .M_educate .circle-wrap .ebook-banner p { font-size: 0.9rem;}
    .M_educate .circle-wrap .ebook-banner strong { font-size: 1rem;}
    
    .notice .tabWrap .list_box ul {flex-direction:column; margin-top: 1rem;}
    .notice .tabWrap .list_box ul li {width:100%; line-height:2.1;}
    .notice .tabWrap .list_box ul li:nth-child(n+3) {display:block;}
    .notice .tabWrap .list_box ul li:nth-child(n+4) {display:none;}
    .notice .tabWrap .list_box ul li a {display:flex; justify-content:space-between; flex-direction:row; background:transparent; padding:0; border:0; border-radius:0; box-shadow:none;}
    .notice .tabWrap .list_box ul li a .tit {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
    .notice .tabWrap .list_box .txt,
    .notice .tabWrap .list_box .date i {display:none;}
    .notice .tabWrap .list_box ul li:hover a,
    .notice .tabWrap .list_box ul li:focus a {outline:0;}
    .notice .titTab ul li a {width:auto; font-size:0.9rem; padding:0 1rem; height:2rem;}
    .notice .more {top:-3.5rem;}
    .notice-box .date { display: none;}
    .notice-box .notice-tit i.ri-megaphone-line { width: auto; height: auto; border-radius: 0; background: transparent;}
    .notice-box .notice-tit .notice { max-width: none;}
    .notice-box .status { height: 1.5rem;}
    
    .slider-wrapper a.link strong { font-size: 1rem;}
    
    .M_list { gap: 1rem;}
    .M_list .heading { font-size: 1.3rem;}
    .M_list ul li a .txt { padding: 0; line-height: 1.9rem;height: 1.9rem;font-size: 0.8rem;}
    
    .gallery .control { margin-top: 0.5rem;}
    
    
}

@media screen and (max-width: 400px){
    .gallery ul { width: 60rem;}
    
    .M_report {flex-direction:row;}
    .M_report .heading {display:flex; font-size: 0.9rem;}
    .M_report ul {width:auto;}
    .M_report ul li a {width:100%; text-indent:-9999px; width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; }
    .M_report ul li a i {text-indent:0; }
    .M_report ul li:last-child,
    .M_report ul li p.tit,
    .M_report ul li p.txt {display:none}
    .M_report > .more{display:none;}
    
    .M_banner {width:100%!important;}
    .M_banner a {padding: 0 0.8rem;}
    
    .notice .titTab ul {gap:0.25rem; padding-right:1rem;}
    
    .M_list ul li a .txt {height:auto;line-height: 1.2;padding: 0.2rem;}
}

@keyframes siteSpread {
    0% {transform: scale(1) translate(-50%, -50%); opacity: 1;}
    100% {transform: scale(1.5) translate(-50%, -50%); opacity: 0;}
}

@media screen and (max-width: 340px){
    .M_educate .circle-wrap .ebook-banner {flex-wrap: wrap;height: auto;padding: 0.1rem 1rem;}
}