@charset "utf-8";

/* Mobile */
.section {background: url(/images/04_office/main/main_img.jpg) no-repeat center; background-size:1150px; background-position-y: 0;}
.section .left_sec {padding: 80px 30px 40px;/*height: 70vh;*/}
.section .left_sec h2 {position: relative; color: #fff; font-weight: 300; font-size: 24px;}
.section .left_sec h2 strong {display: block;font-family: 'inklip'; font-weight: 100;word-break: keep-all;font-size:2.5em;}
.section .summary {padding: 40px 0 35px 0;}
.section .summary li {position: relative; padding-bottom: 10px; color: #fff; font-size: 16px; font-weight: 300;}
.section .summary li:first-of-type strong {padding-right: 10px;}
.section .summary li strong::before {left: 0; border-radius: 50px; content: ''; position: absolute; width: 5px; height: 5px; top: 5px; background-color: #2b76ba; }
.section .summary li strong {padding-left: 15px; font-weight: 600;padding-right: 27px; position: relative;}
.section .related_sites { padding: 20px 0; border-radius: 30px 5px;position: relative; background-color: #fff;min-height: 220px;}
.section .related_sites ul {position: relative; z-index: 1;}
.section .related_sites h3 {text-align: center;color: #fff;font-weight: 300; font-size: 18px; background: #2b76ba; padding: 20px 35px; border-radius: 25px 10px; transform: translatex(-20px);}
.section .related_sites:after {overflow: hidden;  width: 110px;height: 120px; opacity: .4; right: -5px;content: ''; position: absolute; bottom: -3px; background: url('/images/04_office/main/logo_bg.png') no-repeat center;background-size: 90%; }
.section .related_sites a:before {padding-left: 45px; top: 7px; left: 0;position: absolute;width: 20px; height: 20px; background: url('/images/04_office/main/icon.png') no-repeat 34% center; content: '';}
.section .related_sites a {position: relative; font-size: 16px; padding: 10px 0 0 60px; display: block; line-height: 20px;}
.right_sec {margin-top: 50px; /*height: 81vh;*/}
.right_sec .links {position: relative;z-index: 1;}
.btn_produce {margin: 10px auto 0 auto;}
.btn_produce strong {font-weight: 300; overflow: hidden; display: inline-block;width: calc(100%/2 - 3px); position: relative;}
.btn_produce .employee a {border-radius:0;}
.btn_produce a {background-color: #fff; padding: 23px 60px 23px 20px; display: block; color: #2b76ba; border: 1px solid #2b76ba; border-radius: 20px 0 0;}
.btn_produce a::after { display: block; top: 13px; right: 10%; content: ''; position: absolute; width: 33px; height: 41px; background: url('/images/04_office/main/icon.png') no-repeat 0 center;}
.btn_produce .employee a::after {background-position: 13.5% center;}
.btn_produce a:hover, .btn_produce a:active, .btn_produce a:focus {background-color: #2b76ba; color: #fff; padding: 23px 60px 23px 20px; display: block; border: 1px solid #2b76ba;}
.btn_produce a:hover::before, .btn_produce a:active::before, .btn_produce a:focus::before {opacity: .1; top: -10px; left: 0;background-position: 60%; content: '';position: absolute; width: 65px; height: 75px; left: 0; background: url('/images/04_office/main/logo_bg_mobile.png') no-repeat center;}
.btn_produce a:hover::after, .btn_produce a:active::after, .btn_produce a:focus::after {top: 13px; right: 18px;content: ''; position: absolute; width: 33px; height: 41px; background: url('/images/04_office/main/icon.png') no-repeat 6.7% center; box-sizing: border-box;}
.btn_produce .employee a:hover::after, .btn_produce .employee a:active::after, .btn_produce .employee a:focus::after {top: 10px; right: 18px;content: ''; position: absolute; width: 33px; height: 41px; background: url('/images/04_office/main/icon.png') no-repeat 19.5% center;} 
.sitelinks_bar {position: absolute; width: 100%;}
.sitelinks_bar>li>ul {display: none;}
.sitelinks_bar>li>a {background-color: #fff; border: 1px solid #2b76ba; border-radius: 0 0 20px; margin-top: 10px; display: block;}
.sitelinks_bar>li>a {position: relative; padding: 23px 60px 23px 20px; display: block; color: #2b76ba;}
.sitelinks_bar>li>a::after {right: 8%; content: ''; position: absolute; width: 20px; height:20px; background: url('/images/04_office/main/icon.png') no-repeat 57% center;}
.sitelinks_bar::after {content: ''; display: block; clear: both;}

/* 부서별 사이트 펼침 */
.sitelinks_bar.on { position: absolute;overflow-y: auto; z-index: 3; border-radius: 0 0 20px 0;}
.sitelinks_bar.on>li {box-shadow: 0px 5px 10px rgba(0,0,0,0.1);  background-color: #fff; border: 1px solid #2b76ba; border-radius: 0 0 20px; margin-top: 10px; display: block;}
.sitelinks_bar.on>li>a {border: 0;font-weight: 700;}
.sitelinks_bar.on>li>ul {border-top: 1px solid #bfd6ea; font-size: 14px; display: block; margin: 5px 20px 0;}
.sitelinks_bar.on>li>ul>li {border-bottom: 1px dotted #c6daec; font-weight: 700;padding: 15px 15px 0;}
.sitelinks_bar.on>li>ul>li>ul {padding: 10px 0; font-weight: 300; display: block;}
.sitelinks_bar.on>li>ul>li>ul>li {position: relative; display: inline-block; padding-bottom: 5px;}
.sitelinks_bar.on>li>ul>li>ul>li::before {content: ''; width: 3px; height:3px; background-color: #2b76ba; border-radius: 50px; left: 0;position: absolute; top: 30%;}
.sitelinks_bar.on>li>ul>li>ul>li a {padding: 0 14px 0 10px;}
.sitelinks_bar.on>a {font-weight: 700; position: relative; padding: 23px 60px 23px 20px; display: block; color: #2b76ba;}
.sitelinks_bar.on>a::after {position: absolute;top: 35%;right: 8%; content: ''; position: absolute; width: 20px; height:20px; background: url('/images/04_office/main/icon.png') no-repeat 57% center;}
.sitelinks_bar.on>li>ul>li>ul>li a:hover, .sitelinks_bar.on>li>ul>li>ul>li a:focus, .sitelinks_bar.on>li>ul>li>ul>li a:active {color: #28649b; text-decoration: underline;}
.sitelinks_bar.on .other {border: 0; background: #f4f4f4; margin: 0; border-radius: 0 0 20px; padding: 0 20px;}
.sitelinks_bar.on .other li {border: 0;}
.sitelinks_bar.on .other li ul {padding: 0;padding-bottom: 10px;}

.notice_wrap {box-sizing: border-box; margin: 135px 0 50px 0;box-shadow:-5px 5px 10px rgba(0,0,0,0.1); background-color: #2b76ba; border-radius: 40px 0 0 40px; padding: 20px 0;height: 440px; position: relative;z-index: 0;}
.notice_wrap::before {content:''; height: 440px; width:50%; right:-10%; top: 0;position:absolute; z-index:0; background: #2b76ba;}
.notice_wrap::after {right: 5%; content: 'Jeonbuk State office of Education'; color: #1a1b1d; text-transform: uppercase; opacity: .1; font-weight: 700; font-size: 20px; position: absolute;bottom: 0; line-height: 1.1em;}
.notice_tit {padding: 10px 0 0 20px; text-align: left;}
.notice_tit h4 {display: inline-block;}
.notice_tit .tit_img01, .tit_img02 {margin-bottom: 20px; z-index: 100;}
.notice_tit .tit_img01.on, .notice_tit .tit_img02.on {margin-bottom: 0;}
.notice_tit .tit_img01>a,  .notice_tit .tit_img02>a { padding: 15px; color: #fff; font-size: 25px;font-weight: 100;/*z-index: 100;*/ position: relative;}
.notice_tit .tit_img01>a:focus,  .notice_tit .tit_img02>a:focus { outline-color: #fff; outline-offset: -3px; outline-width: 3px;  outline-style: dashed;}
.notice_tit .tit_img01.on>a, .notice_tit .tit_img02.on>a {font-family: 'inklip';font-size: 45px;}
.notice_tit .tit_img01.on>a:focus, .notice_tit .tit_img02.on>a:focus {outline-color: #fff; outline-offset: -3px; outline-width: 3px; outline-style: dashed;}
.notice_tit .tit_img01>a {position: relative}
.notice_tit .tit_img01>a::after {content: ''; background-color: #28649b; padding:5px; border-radius: 50px; position: absolute;right:-12%;top: 40%;}
.notice_tit .tit_img01.on>a::after {right:-5%;}
.notice_tit .tit_img02 {position: absolute; top: 30px; left: 165px;}
.notice_wrap .control, .control02 {position: absolute; top: 24%; right: 120px;z-index: 100;}
.notice_wrap .control .btn button, .control02 .btn button {color: #fff;}
.notice_wrap .control .btn button:focus, .control02 .btn button:focus {outline-color: #fff; outline-offset: -1px; outline-width: 2px; outline-style: dashed;}
.notice_wrap .control .btn .prev, .control02 .btn .next, .control02 .prev, .control02 .next {position: relative;}
.notice_wrap .control .btn .prev::before, .control02 .prev::before {content: ''; position: absolute; background: url('/images/04_office/main/icon.png') no-repeat 62% center;top: 3px; left: -20px; padding: 10px;}
.notice_wrap .control .btn .prev::after, .control02 .prev::after {content: ''; width: 1px; height: 10px; background-color: #5591c8; position: absolute; right: -10px; top: 8px;}
.notice_wrap .control .btn .next, .control02 .next {padding-left: 20px;}
.notice_wrap .control .btn .next::after, .control02 .next::after {content: ''; position: absolute; background: url('/images/04_office/main/icon.png') no-repeat 65.5% center;top: 2px; right: -20px; padding: 10px;}
.notice_wrap .more {display: block;}
.notice_wrap .more, .more02 {font-size: 0;}
.notice_wrap .more::after, .more02::after {position: absolute; content: '';background: url('/images/04_office/main/icon.png') no-repeat 70% center; padding: 10px;top: 24.5%; right: 70px;z-index: 100;}
.notice_wrap .more:focus::after, .more02:focus::after { outline-color: #fff;  outline-offset: -1px; outline-width: 1px; outline-style: dashed;}
.notice_wrap .notice_cnt {margin-top:50px; display: none;width: 300px; max-width: 2000px;}
.notice_wrap .notice_cnt.on {display: block;}
.notice_cnt .cnt_box {overflow: hidden; transform: translateX(-30px);  height: 230px;}
.cnt_box>div~div {margin-left: 20px;}
.notice_cnt .cnt_box>a {margin-bottom: 30px; max-width: 230px; display: inline-block; }
.notice_cnt div .cnt {width: 310px;}
.notice_cnt .cnt {min-width: 220px; margin-bottom: 50px; max-width: 250px; display: inline-block; margin-right: 30px; box-shadow: 0px 5px 15px rgba(0,0,0,0.3); background: #fff; padding: 40px 20px; opacity: .8;border-radius: 30px 10px;}
.notice_cnt .cnt:hover, .cnt:active, .cnt:focus {transition: .5s all; opacity: 1;}
.notice_cnt .cnt p em {font-style: normal;}
.notice_cnt .cnt p strong {font-weight: 300;}
.notice_cnt .cnt a, .notice_cnt .cnt_bg a {opacity: 1; line-height: 1.2; display: block;}
.notice_cnt .cnt .date, .notice_cnt .cnt_nobg .date {font-size: 14px; position: relative; color: #666;padding-left: 25px;}
.notice_cnt .cnt .date::before, .cnt_nobg .date::before {padding: 10px; top: -3px; content: ''; position: absolute; left: 0; background: url('/images/04_office/main/icon.png') no-repeat 25.5% center; }
.cnt_nobg .date::before {background-position: 30.1% center;}
.notice_cnt .cnt .cnt_tit, .cnt_nobg .cnt_tit{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow: hidden; color: #4c4c57; padding: 20px 0;font-size: 18px;}
.notice_cnt .cnt .cnt_con, .cnt_nobg .cnt_con {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow: hidden;  color: #666;font-size: 16px;}
.notice_cnt .cnt_nobg .date, .cnt_nobg .cnt_tit, .cnt_nobg .cnt_con {color: #fff;}
.notice_cnt .cnt_nobg {visibility: hidden; padding: 40px 30px;width: 80%; background: none; border-radius: 30px 10px; width: 80%;transform: translateX(-10px); border: 1px solid #fff;}
.notice_cnt .cnt_nobg a {opacity: 1; line-height: 1.2; display: block;}


/* Tablet */
@media all and (min-width:768px) {
.section {overflow: hidden;/*height: 100vh;*/background-size: auto;}
.section .left_sec {float: left; margin-right: 6.5%;}
.section .left_sec h2 {font-size: 31px;}
.section .left_sec h2 strong {  font-size: 2.3em;  }
.section .summary li {padding-bottom: 15px; font-size: 20px;}
.section .summary li strong {padding-left: 20px;}
.section .summary li:first-of-type strong {padding-right: 15px;}
.section .related_sites a { max-width: 70%;}
.section .related_sites:after {right: 0; bottom: 0; width: 125px; height: 143px; background-size: 100%;}
.section .right_sec {float: left; width: calc(100%/2 - 10%);}
.section .related_sites h3 {font-size: 20px;}
.btn_produce a {background-color:transparent; color: #fff; border: 1px solid #fff;backdrop-filter: blur(15px); }
.btn_produce a:hover::before, .btn_produce a:active::before, .btn_produce a:focus::before {background: url(/images/04_office/main/logo_bg.png) no-repeat center; z-index: -1; background-size: 90%; opacity: .4;}
.btn_produce a:hover, .btn_produce a:active, .btn_produce a:focus {border: 1px solid #fff; background-color: #fff; color: #2b76ba;}
.btn_produce a:focus { outline-color: darkcyan;  outline-offset: -3px;  outline-width: 3px;  outline-style: dashed;}
.btn_produce a::after {background-position: 6.7% center;}
.btn_produce a:hover::after, .btn_produce a:active::after, .btn_produce a:focus::after {background-position: 0 center;}
.btn_produce .employee a::after {background-position: 19.7% center;}
.btn_produce .employee a:hover::after, .btn_produce .employee a:active::after, .btn_produce .employee a:focus::after {background-position: 13.4% center;}
.sitelinks_bar.on>li>ul>li {font-size: 16px;}
.sitelinks_bar.on>li>ul>li>ul>li>a {font-size: 14px;}
.sitelinks_bar>li>a {backdrop-filter: blur(15px); color: #fff; background-color:transparent; border: 1px solid #fff; }
.sitelinks_bar>li>a::after {background-position: 62% center; transform: rotate(-90deg);} 
.notice_wrap {display: flex; flex-direction: column-reverse; justify-content: space-between;}
.notice_wrap .notice_cnt {margin-top: 35px; width: 2000px;}
.notice_cnt .cnt_box {overflow: visible; transform: translateX(-50px);}
.notice_tit h4 {margin-top: 40px;}
.notice_wrap::before { width: 2000px; right: -1992px;}
.notice_wrap .control, .control02 {top: 30%; right: auto; left: 55px;}
.notice_wrap .more::after, .more02::after {top: 30.5%; right: auto; left: 210px;}
.notice_wrap::after {right: auto;left: 0;top:0;bottom: auto;font-size: 20px;width: 100%;}
.notice_tit .tit_img01.on, .notice_tit .tit_img02.on {top: 23px; position: absolute;}
.notice_cnt .cnt {min-height: 140px;}

.sitelinks_bar.on>li {margin-right: 0;}
.sitelinks_bar.on>li>a {backdrop-filter: blur(0); font-weight: 700; color: #28649b; margin-top: 10px;}
.sitelinks_bar.on>li>a::after {background: url(/images/04_office/main/icon.png) no-repeat 79% center; transform: rotate(-180deg);}



}

/* Desktop */
@media all and (min-width:1023px) {
.section .left_sec {max-width: 292px;}
.btn_produce a, .sitelinks_bar>li>a, .sitelinks_bar.on>li>a {font-size:20px;}

.notice_wrap::before { width: 2000px; right: -1992px;}
.notice_wrap .notice_cnt {margin-top: 25px;}
.notice_wrap::after {right: 43%; font-size: 20px;}
.notice_wrap .control, .control02 {left: 13%; top: 30%;}
.notice_wrap .more::after, .more02::after {top: 30.8%; right: auto; left: 50.28%;}

}

/* Pc */
@media all and (min-width:1400px) {  
.section .right_sec {margin-left: 10%;}

.sitelinks_bar.on>li>ul>li>ul {width: 85.2%;padding: 0 0 5px 20px; display: inline-block;}
.notice_tit h4 {padding-top: 30px;}
.notice_cnt .cnt_nobg .cnt_tit {font-weight: 300;}
.notice_wrap .notice_cnt::before {left: 52%; content: ''; width:11%; height: 1px; background-color: #5591c8; position: absolute; top: 26%;}
.notice_cnt .cnt_nobg {visibility: visible; min-width: 220px;  max-width: 250px; display: inline-block;}
.notice_cnt .date {font-style: normal;}
.notice_wrap .control, .control02 {top: 22.5%; left: 390px;}
.notice_wrap .more::after, .more02::after {top: 23.5%;left: 535px;}
.notice_wrap::after {right: 42%; font-size: 40px;top: 0;}

}                 

/* 번역 */
/* Mobile */
.translated-ltr body {min-height: 100%;  top: 40px;  position: relative;}
.translated-ltr .section .left_sec { padding: 50px 30px 40px;}
.translated-ltr .section .left_sec h2 {font-size: 20px; line-height: 1.2;}
.translated-ltr .section .left_sec h2 strong { font-size: 60px;}
.translated-ltr .section .summary { padding: 20px 0;}
.translated-ltr .section .summary li { padding-left: 10px;}
.translated-ltr .section .summary li strong { padding-right: 5px; display: inline-block;padding-left:0; }
.translated-ltr .section .summary li strong::before {left: -10px;top: 10px; }
.translated-ltr .section .related_sites h3 {padding: 10px 35px;font-size: 15px;}             
.translated-ltr .section .related_sites a {font-size: 14px; padding: 10px 0 0 50px;}

.translated-ltr .btn_produce a {padding: 10px 60px 10px 10px;  min-height: 43px; font-size: 0.9rem;}
.translated-ltr .notice_cnt .cnt .cnt_tit, .translated-ltr .cnt_nobg .cnt_tit { padding: 0; margin: 20px 0;}
.translated-ltr .notice_tit .tit_img01>a, .translated-ltr .notice_tit .tit_img02>a {  padding: 10px 5px; font-size: 16px;}
.translated-ltr .notice_tit .tit_img01.on>a, .translated-ltr .notice_tit .tit_img02.on>a {font-size: 30px;}
.translated-ltr .notice_wrap .control, .translated-ltr .control02 { top: 20%;}
.translated-ltr .notice_wrap .more::after, .translated-ltr .more02::after { top: 20.5%;}

/* Tablet */
@media all and (min-width:768px) {
.translated-ltr .section .left_sec {max-width: 295px; margin-right: 3%;}
.translated-ltr .section .left_sec h2 {font-size: 25px;}
.translated-ltr .section .left_sec h2 strong { font-size: 70px;}
.translated-ltr .section .summary li { padding-left: 10px;}
.translated-ltr .section .summary li strong::before {top: 15px; }
.translated-ltr .section .summary li strong { padding-left:0; }

.translated-ltr .section .right_sec {width: calc(100%/2 - 2%);}
.translated-ltr .btn_produce a { font-size: 1rem;}
.translated-ltr .notice_tit .tit_img01>a, .translated-ltr .notice_tit .tit_img02>a {  padding: 10px 5px; font-size: 20px;}
.translated-ltr .notice_tit .tit_img01.on>a, .translated-ltr .notice_tit .tit_img02.on>a {font-size: 35px;}
.translated-ltr .notice_tit .tit_img02 { left: 200px;}
.translated-ltr .notice_tit .tit_img01.on>a::after { top: 48%;right: -7%;}
.translated-ltr .notice_wrap .control, .translated-ltr .control02 { top: 30%;}
.translated-ltr .notice_wrap .more::after, .translated-ltr .more02::after { top: 31%;left: 300px;}
}

/* Desktop */
@media all and (min-width:1023px) {
.translated-ltr .section .left_sec { max-width: 320px; margin-right: 10%;}
.translated-ltr .section .summary li {padding-left: 20px;}
.translated-ltr .section .summary li strong::before {left: -20px;}
.translated-ltr .btn_produce a { min-height: 50px;  font-size: 1.2rem;  word-break: keep-all;padding: 10px 80px 10px 10px;}
}

/* Pc */
@media all and (min-width:1400px) {  
.translated-ltr .section .right_sec {width: calc(100%/2 - 4%);}
.translated-ltr .notice_tit .tit_img01, .translated-ltr .tit_img02 { margin-bottom: 0;}
.translated-ltr .notice_tit .tit_img02 {top: 35px;}
.translated-ltr .notice_tit .tit_img01>a::after {    right: -7%;}
.translated-ltr .notice_wrap .notice_cnt::before {content:none;}
.translated-ltr .notice_wrap .more::after, .translated-ltr .more02::after {left:640px;}
}