*{box-sizing: border-box}

body{background:url(../12_19/img/patten_bg.jpg);color: #fff;
font-family: 'Libre Baskerville', serif;
font-family: 'Song Myung', serif;}
body::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height:100%;z-index: -2;
background: url(../12_19/img/sheet_music_bg.jpg)no-repeat left top;background-size: cover}
body::after{content: '';position: absolute;left: 0;top: 0;width: 100%;height:100%;z-index: -1;
background: rgba(0, 0, 0, 0.4);}
.wrap{max-width: 94%;margin: auto;}
h2{font-family: 'Cormorant Garamond', serif;;font-size:1.5em;
letter-spacing: 0.1em;margin: 10px 0;}
a{color: rgb(255, 181, 85);text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);transition: all .3s linear}
a:hover{color: rgb(224, 120, 0)}
i{display: block;font-style: normal;font-size: 0.5em;}

.intro{margin-left: 10px}

.mast h1 a{display: block;width: 60%;margin: auto}

.nav{text-align: center;letter-spacing: 0.1em;text-transform: uppercase;font-size: 0.8em}
.nav::after{content: '';clear: both;}
.nav li{background: url(../12_19/img/ornament_ss.png)no-repeat 0 100%;}
.nav li:hover{background-position: center bottom;}
.nav li a{display: block;padding: 1em 0.5em 3em}


.main li{text-align: center;font-size: 0.8em}
.main li:hover img{border-radius: 50%;animation: album 4s linear infinite}
.main img{width: 100%}
.main li{position: relative;float: left;margin: 1% 10px 0 0}
.main li:hover::before{content: '';position: absolute;display: block;left: 50%;top: 42%;
transform: translate(-50%,-50%);width: 5px;height: 5px;
background: #fff;border-radius: 50%;z-index: 10;}
.main li:hover:after{content: '';position: absolute;display: block;left: 50%;top: 42%;
transform: translate(-50%,-50%);background: rgba(139, 69, 12, 0.85);border-radius: 50%;z-index: 5;}

.section{margin: 16px 0}

@keyframes album{
    0%{transform: rotate(0)}
    100%{transform: rotate(360deg)}
}

.main{text-align: center}
.main::before{content: '';display: block;width: 100%;height: 100%;background: url(../12_19/img/ornament_s.png)no-repeat 0 100%;
background-position: center}
.main::after{content: '';display: block;width: 100%;height: 100%;clear: both;}
.section b{display: block;font-style: normal;font-size: 1.3em;}
.intro span{color: #ff9900;font-weight: bold}
.intro p {width: 90%;}

.footer{text-align: center;background: url(../12_19/img/ornament_ss.png)no-repeat 0 100%;
background-position: center top;padding: 45px 0 0;font-size: 12px;}


@media only screen and (max-width: 360px){
.mast h1 img{width: 100%;padding-top: 120px;}
.nav{position: absolute;left: 0;top: 0;}
.nav{width: 100%;}
.nav a{padding-top: 1em;}
.nav li{display: inline-block;width: 26%;margin: 0 1%}

.section li{width: 46%;}
.section li:hover:after{top: 40%;width: 33%;height: 26%;}
.section li:hover::before{top: 40%}

.footer{width: 100%;}
}
@media only screen and (min-width: 361px) and (max-width: 1299px){
.mast{float: left;max-width: 30%}
.nav{margin: 70px 0 1em;width: 100%;}
.nav a{padding-top: 1em;}
.nav li{width: 90%;margin:auto}

.mast h1{float: left;background:url(../12_19/img/orchestra_logo_bg_ss.png)no-repeat;
background-size: cover;margin-top: 50px}
.mast h1 img{width: 90%;padding:34% 0}
.intro{padding-top: 80px}
.intro h2{text-align: center}
.section li:hover:after{width: 35%;height: 30%;}
.section{margin-left: 30%}  
.section li{width: 30%;}
.footer{width: 30%;margin-left: 50%}
}
@media only screen and (min-width: 1300px){
.nav{float: right;margin: 70px 0 1em;width: 70%;}
.nav a{padding-top: 1em;}
.nav li{display: inline-block;width: 30%;margin-right: 2.9%}

.mast h1{max-width: 30%;float: left;background:url(../12_19/img/orchestra_logo_bg_ss.png)no-repeat;
background-size: cover;margin-top: 50px}
.mast h1 img{width: 90%;padding: 32% 0;}
.section li:hover:after{width: 35%;height: 28%;}
.section{margin-left: 30%}
.section li{width: 15%;}
.footer{width: 22%;margin-left: 50%}
}