﻿/* 0101_인사말 */
.greeting_box{position: relative;}
.greeting_box::after{display: block; content: ''; clear: both;}
.greeting_box .greeting_img{position: relative; width: 9.5rem; margin-right: 3rem; float: left; padding: 1rem 0 0 1rem; padding-bottom: 5rem;}
.greeting_box .greeting_img::before{width: 2.75rem; height: 2.1rem; background: url('/images/template/40176/sub/ico_greeting.png') no-repeat; background-size: contain; position: absolute; top: 0; right: -1rem; z-index: 1; content: '';}
.greeting_box .greeting_img::after{width: 3.95rem; height: 2.3rem; background: url('/images/template/40176/sub/bg_greeting02.png') no-repeat; background-size: contain; position: absolute; right: 0; bottom: 0; content: '';}
.greeting_box .greeting_img .img{position: relative; width: 7.75rem; height: 9.75rem; }
.greeting_box .greeting_img .img::before{width: 100%; height: 100%; border-radius: 0 1.5rem; border:2px solid #ccc; position: absolute; top: -1rem; left: -1rem; content: '';}
.greeting_box .greeting_img .img::after{width: 100%; height: 100%; max-width: 100%; border-radius: 0 1.5rem; background: url('/images/template/40176/sub/bg_greeting.png') no-repeat right bottom; position: absolute; bottom: -0.75rem; right: -0.75rem; z-index: -1; content: '';}
.greeting_box .greeting_img .img span{display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 0 1.5rem;}
.greeting_box .greeting_img .img span img{position: relative; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); vertical-align: middle;}
.greeting_box .greeting_txt{width: calc(100% - 12.5rem); float: left;}
.greeting_box .greeting_txt .tit{line-height: 2; margin-bottom: 2rem;}
.greeting_box .greeting_txt .txt{ font-weight: 300; line-height: 1.8; margin-bottom: 2rem;}
.greeting_box .greeting_txt .name{font-weight: 600;}
.greeting_box .greeting_txt .name em{padding-left: 0.5rem; font-size: 1.1rem;}

/* 0102_학교상징 */
.symbol_list{display: table; width: calc(100% + 3rem); border-spacing: 1.5rem; table-layout: fixed; transform: translateX(-1.5rem); -webkit-transform: translateX(-1.5rem);}
.symbol_list li{display: table-cell; position: relative; padding-bottom: 1.5rem; }
.symbol_list li::before{width: 100%; height: calc(100% - 4.5rem); border: 2px dashed #ccc; position: absolute; bottom: 0; left: 0; content: '';}
.symbol_list li.list1::before{border-bottom-left-radius: 1.5rem;}
.symbol_list li.list3::before{border-bottom-right-radius: 1.5rem;}
.symbol_list li:first-child{margin-left: 0;}
.symbol_list li .img{position: relative; width: 7.5rem; height: 7.5rem; margin: 0 auto 0.75rem; z-index: 2; text-align: center;}
.symbol_list li .img::before{width: 100%; height: 100%; position: absolute; background:#eb6100 url('/images/template/40176/sub/bg_symbol_list.png') no-repeat right bottom; background-size: cover; right: -0.25rem; bottom: -0.25rem; border-radius: 50%; content: '';}
.symbol_list li .img span{display: block; width: 100%; height:100%; border-radius: 50%; position: relative; overflow: hidden;}
.symbol_list li .img img{width: 100%; max-width: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.symbol_list li h3{font-size: 1rem; color: #eb6100; line-height: 1.75rem; text-align: center; margin-bottom: 0.5rem; padding: 0 0.5rem;}
.symbol_list li h3 em{display: inline-block; background: #eb6100; width: 4.1rem; margin-right: 0.75rem; color: #fff; font-size: 0.9rem; border-radius: 0 0.75rem;}
.symbol_list li .txt{font-weight: 200; line-height: 1.8; padding: 0 2rem; word-break: keep-all; text-align: center;}
.song_control{ position: absolute; top: -1rem; right: 1.5rem; z-index: 3; font-size: 0; line-height: 0;}
.song_control a{display: inline-block; line-height: 2.5rem; padding: 0 2rem; color: #fff; text-align: center; font-size: 0.8rem;}
.song_control a:hover{text-decoration: underline;}
.song_control a.btn_play{border-radius: 0 1rem; background: #5074cf; }
.song_control a.btn_expand{border-radius: 1rem 0; background: #324e96; }
.song_control a i{margin-left: 0.5rem;}
/* 학교상징:color */
.symbol_list li.list2 .img::before{background-color: #009944;}
.symbol_list li.list3 .img::before{background-color: #009e96;}
.symbol_list li.list2 h3{color: #009944;}
.symbol_list li.list3 h3{color: #009e96;}
.symbol_list li.list2 h3 em{background: #009944;}
.symbol_list li.list3 h3 em{background: #009e96;}

@media(max-width:768px){
    /* 0101_인사말 */
    .greeting_box .greeting_img{float: none; margin: 0 auto; padding-bottom: 3rem;}
    .greeting_box .greeting_img::after{display: none;}
    .greeting_box .greeting_txt .tit{font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5;}
    .greeting_box .greeting_txt .tit br{display: none;}
    .greeting_box .greeting_txt{width: 100%; float: none; text-align: center; border: 1px solid #ccc; padding: 1.5rem;}
    .greeting_box .greeting_txt .txt{margin-bottom: 1.5rem; word-break: keep-all;}
    .greeting_box .greeting_txt .txt br{display: none;}

    /* 0102_학교상징 */
    .symbol_list{width: calc(100% + 2rem); border-spacing: 1rem; transform: translateX(-1rem); -webkit-transform: translateX(-1rem);}
    .symbol_list li{padding-bottom: 1rem;}
    .symbol_list li .img{width: 6.5rem; height: 6.5rem;}
    .symbol_list li .txt{padding: 0 1rem;}
}

@media(max-width:680px){
    /* 0102_학교상징 */
    .symbol_list{width: 100%; border-spacing: none; transform: none; -webkit-transform: none; display: block;}
    .symbol_list li{display: block; padding: 2rem 1rem 2.5rem 8.5rem; margin-bottom: 1rem;}
    .symbol_list li::before{height: 100%;}
    .symbol_list li:nth-of-type(1)::before{border-radius: 1.5rem 0 0 0;}
    .symbol_list li h3{text-align: left; padding: 0;}
    .symbol_list li h3 em{text-align: center;}
    .symbol_list li .img{position: absolute; left: 1rem; top: calc(50% - 3.25rem);}
    .symbol_list li .txt{padding: 0; text-align: left;}
}

@media(max-width:380px){
    .symbol_list li{padding: 1rem;}
    .symbol_list li .img{position: relative; left: 0;}
    .song_control a{padding: 0 1rem;}
}
