@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body, h1, h2, h3, h4, h5, h6, input, textarea, select {
	font-family: 'Noto Sans KR', sans-serif;
}
a{text-decoration: none; color: #fff;}
/* ------------------------------ */


.history_top{width: 100%; height: 60vh; position: relative;}
.hit_bg{width: 100%; height: 100%; background: url(beer_top.jpg) no-repeat center; background-size: cover; filter: brightness(0.7); background-position-y: -300px;}
.hit_txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; color: #fff;}
.hit_txt h2{font-size: 80px; font-weight: bold; text-shadow: 3px 4px 5px #353535;}
.hit_txt p{font-size: 18px; margin-top: 27px; line-height: 27px;}
.history{max-width: 1000px; margin: 3% auto; padding: 0 10px;}
.history .comment-tog {position: relative; font-size: 33px; line-height: 1; cursor: pointer;}
.history .comment-tog:before { content:""; position: absolute; left:-48px; top:50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 100%; background:#fff; border: 5px solid #2667e0; box-sizing: border-box;}
.history .history_box {position: relative; padding: 0 0 30px 48px;}
.history .history_box:before { content:""; position:absolute; left:8px; top:0; width: 2px; height:100%; background:#ddd;}
.history .history_box:first-child:before { top:10px; height:calc(100% - 10px);}
.history ol { padding: 20px 0; display: flex; align-items: center;}
.history li {font-size: 17px; line-height: 29px;  }
.comment{display: none;}
.show{display: block;}
.txt_area{padding: 2% 0 0; }
.h_date{font-size: 18px; font-weight: 300; margin: 10px 0; line-height: 22px;}
.h_info{font-size: 16px;  margin: 10px 0; line-height: 22px;}
.h_info span{font-size: 18px; font-weight: 500;}
.h_slo{font-size: 20px; font-weight: 600;}
.on_festival a{color: #333; line-height: 24px; transition: all .3s;}
.on_festival a:hover{color: #158aff; text-decoration: underline;}
.history_box img{max-width: 300px; margin-right: 15px;}

.bg_white{background-color: #fff; color: #333;}
.comment-tog.chg{color: #158aff; font-weight: bold;}
.bh_txt{line-height: 24px; font-size: 18px;  text-overflow: ellipsis; overflow: hidden; display: -webkit-box;   -webkit-box-orient: vertical; -webkit-line-clamp: 2; cursor: pointer; margin-bottom: 60px;}
.bh_txt.more{text-overflow: inherit; overflow: inherit; display: inherit;   -webkit-box-orient: inherit;}
.bh_txt b{font-weight: bold; font-size: 20px;}
.bh_txt.notop{margin: 3% 0;}

@media screen and (max-width:1400px) {
    .hit_txt h2{font-size: 63px;}
    .history_top{height: 45vh;}
    .hit_bg{background-position: inherit;}
}
@media screen and (max-width:1280px) {
    .hit_txt h2{font-size: 54px;}
    .hit_txt p{font-size: 16px; margin-top: 15px; line-height: 20px;}
    .history ol{overflow-x: scroll}
    .history .comment-tog{font-size: 28px;}
    .bh_txt {font-size: 16px; margin-bottom: 18px;}
}
@media screen and (max-width:960px) {
    .hit_txt{width: 100%;}
    .hit_txt h2{font-size: 50px;}
}
@media screen and (max-width:720px) {
    .history{margin: 5% auto; padding: 0 30px 0 10px;}
    .hit_txt h2{font-size: 45px;}
    .history_top{height: 35vh;}
    .hit_txt p{font-size: 14px; line-height: 18px;}
    .history .comment-tog{font-size: 26px;}
    .h_slo{font-size: 18px;}
    .h_date{font-size: 16px; margin: 5px 0;}
    .on_festival a{font-size: 15px; line-height: 22px;}
    .h_info{font-size: 14px;}
    .history .comment-tog:before{left: -37px;}
    .history .history_box{padding: 0 0 30px 38px;}
}
@media screen and (max-width:540px) {
    .hit_txt h2{font-size: 36px;}
    .h_info span{font-size: 16px;}
}
@media screen and (max-width:380px) {
    .hit_txt h2{font-size: 30px;}
    .hit_txt p{font-size: 12px; line-height: 16px;}
    .on_festival a{font-size: 12px; line-height: 17px;}
    .h_info{font-size: 12px; line-height: 18px;}
    .h_date{font-size: 14px;}
    .h_slo{font-size: 16px;}
    .bh_txt b{font-size: 16px;}
    .bh_txt{font-size: 14px; line-height: 18px;}
}