@charset "UTF-8";
/* 학교상징 */
.slogan-main{width: 100%; background: url(/sites/kor/images/sub/symbol_background.png) no-repeat top center; height: 300px; position: relative; display: table;}
.slogan-main .symbol-textbox{position: absolute; right: 7%; top: 50%; margin-top: -42px;}
.slogan-main .symbol-textbox::after{content:""; display: table; clear: both;}
.slogan-main .symbol-textbox h1{float: left; color: white; position: relative; padding: 7px 0; font-size: 30px; font-family: 'Noto Bold'; margin-top: 12.5px;}
.slogan-main .symbol-textbox h1::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background-color: white;}
.slogan-main .symbol-textbox h1::after{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-color: white;}
.slogan-main .symbol-text-sub{float: left; color: white; margin-left: 40px;}
.slogan-main .symbol-text-sub li{font-size: 19px;}
.slogan-main .symbol-text-sub li span{font-family: 'Noto Regular';}
.symbol-text .txt-color2{font-family: 'Noto Medium';}
.symbol-mean .txt-color2, .symbol-mean .txt-color3, .symbol-mean .txt-color4{font-family: 'Noto Medium';}

.logo-wrap{background :url(/sites/kor/images/sub/logo_background.png) center top; padding: 50px 140px 53px 140px; border: 2px solid #ececec;}
.logo-box{text-align: center; margin-bottom: 70px;}
.logo-box:last-child{margin-bottom: 0;}
.logo-wrap ul{display: inline-block; width: 100%;}
.logo-wrap ul::after{content:""; display: table; clear: both;}
.logo-wrap li{float: left;}
.logo-line-1 li{width: 50%;}
.logo-line-2 li{width: calc(100%/3);}
.logo-wrap ul p{font-family: 'Noto Medium'; color: #111111; margin-bottom: 10px;}

@media all and (max-width: 1023px) {
  .logo-wrap{padding: 50px 20px;}
  .logo-wrap li{padding-right: 20px;}
  .slogan-main .symbol-textbox{margin-top: -36px;}
  .slogan-main .symbol-textbox h1{font-size: 25px; margin-top: 10.5px;}
  .slogan-main .symbol-text-sub li{font-size: 16px;}
  .slogan-main .symbol-text-sub{margin-left: 20px;}
}

@media all and (max-width: 768px) {
  .logo-image{width: 90%; margin: 0 auto;}
  .slogan-main .symbol-textbox{position: relative; display: table-cell; vertical-align: middle; top: 0; margin-top: 0; right: 0; text-align: center;}
  .slogan-main .symbol-textbox h1{float: none; display: inline-block;}
  .slogan-main .symbol-text-sub{float: none; margin-left: 0; margin-top: 20px;}
}

@media all and (max-width: 420px) {
  .logo-line-1 li, .logo-line-2 li{width: 100%; float: none; margin-bottom: 20px; padding-right: 0;}
  .logo-image{width: 100%;}
}
