/*
layout
CSS 기본 규칙
좌표계 > 크기 > 모양(형태) > 색상 > 기타 속성

dark :#0e151c rgba(21,19,18,1);
primary : #2E2823 rgba(46,40,35,1);
light : #403C37;
text : #a59f94; rgba(165,159,148,1);
accent: #BBA26F;
*/

/* layout */
html,
body{background-color: #2e2823; color: #a59f94; font-size: 14px; height: auto;}
#header{
    background-color: #403C37;
    background: linear-gradient(to bottom, rgba(64,60,55,1) 0%,rgba(64,60,55,0.2) 50%,rgba(64,60,55,0.2) 51%,rgba(64,60,55,1) 100%);
}
#header .table{height: 8rem;}
#header .logo{width: 1px; padding: 0;}
#header .logo img{height: 4em; display: block;}
#header .menu{text-align: right; padding-top: 2rem;}
#header .menu > .item{padding: 1rem; font-weight: bold; color: #a59f94;}
#header .menu > .item:hover,
#header .menu > .item.active{color: #BBA26F;}
#header #opener{display: none;}

.fg-light{color: #BBA26F;}
.fg-normal{color: #a59f94;}

.ui.button.normal{background-color: #BBA26F; color: white; border-radius: 0;}
.ui.button.invert{background-color: transparent; color: white; border-radius: 0; border: 1px rgba(255,255,255,0.5) solid;}
.ui.table.bg-light{background-color: #403C37; color: rgba(255,255,255,0.7);}
.ui.table.bg-dark{background-color: #151312; color: rgba(255,255,255,0.7);}
.ui.padded.divider{margin: 2rem auto;}
.ui.image.left.floated{margin-bottom: 2rem; margin-right: 2rem;}
.ui.image.right.floated{margin-bottom: 2rem; margin-left: 2rem;}
.ui.slider .main{padding: 0;}
.ui.slider .description{background-color: #151312; min-height: 3rem;}
.ui.slider .thumbs{background-color: #403C37;}
.ui.slider .thumbs > .image{cursor: pointer; display: inline-block;}
.ui.slider .thumbs > .image:hover,
.ui.slider .thumbs > .image.active{outline: 1px #BBA26F solid;}
.ui.image.ratio{position: relative; width: 100%;}
.ui.image.ratio:before{content: ""; display: block;}
.ui.image.ratio.square:before{padding-top: 100%;}
.ui.image.ratio.photo:before{padding-top: 75%;}
.animated{visibility: hidden;}

.ui.table.layout{border-radius: 0; border: none; background-color: transparent; color: #a59f94;}
.ui.table.layout .aside{width: 20%; background-color: #151312; padding: 0; vertical-align: top;}
.ui.table.layout .aside > .header{padding: 2rem; font-size: 16px;}
.ui.table.layout .aside > .header > .sub{font-size: 12px; margin-top: 1em;}
.ui.table.layout .aside > .item{display: block; width: 100%; padding: 1em 2em; color: rgba(255,255,255,0.7);}
.ui.table.layout .aside > .item:hover{background-color: #403C37;}
.ui.table.layout .aside > .item.active{background-color: #BBA26F;}
.ui.table.layout .section{width: 80%; padding: 0; padding-left: 5rem; vertical-align: top;}
.ui.table.layout .section > .header{font-size: 20px; margin: 2em 0; color: #BBA26F;}
.ui.table.layout .section > article{padding: 40px 0; border-top: 1px #BBA26F solid;}
.ui.table.layout .section > article .table{border-radius: 0;}
.ui.table.layout .section > article .table tr td{border-top: 1px solid rgba(34,36,38,0.1);}
.ui.table.layout .section > article .table tr:first-child td{border-top: none;}
.ui.table.layout .section > article > h3{margin-top: 0;}

.ui.form .field label{color: #BBA26F;}
.ui.form .field input,
.ui.form .field textarea,
.ui.form .field select{background-color: transparent; color: #a59f94; border-color: #a59f94; border-radius: 0;}
.ui.form .field .file{display: none;}
.ui.form .field .button{border-radius: 0;}
.ui.form .field .button.dummy{width: 100%; margin-top: 1rem; background-color: #a59f94; color: rgba(255,255,255,0.7);}
.ui.form .field .button.insert{background-color: #BBA26F; color: white;}
.ui.form .field .button.update{background-color: #2E2823; color: rgba(255,255,255,0.7);}
.ui.form .field .button.delete{background-color: #a59f94;}

a.link{display: block; text-align: right; color: #a59f94;}
a.link:hover{color: #BBA26F;}
td.linked{position: relative;}
td.linked .segment{position: static; padding-bottom: 4rem;}
td.linked .segment a.link{position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem;  border-top: 1px rgba(255,255,255,0.1) solid;}
td.linked .segment a.link:hover{background-color: rgba(0,0,0,0.7); color: rgba(255,255,255,0.7);}
td.padless{padding: 0 !important;}
td.padless .segment{margin-top: 0;}
.ui.image.text{position: relative;}
.ui.image.text > .content{position: absolute; width: 100%; bottom: 0; left: 0; padding: 1rem; background-color: rgba(0,0,0,0.7); color: white;}
.ui.pagination > .item{border-radius: 0 !important;}
.ui.form .field.hidden{display: none;}
.ui.image.large{width: 50%;}

#main .container > .layout{min-height: calc(100vh - 20em);}
#main.main .masthead .scene{height: 40em;}
#main.main .masthead .scene table{width: 100%; height: 100%; text-align: center;}
#main.main .masthead .scene h1.tlt{color: rgba(255,255,255,0.7); text-shadow: 1px 1px 5px rgba(0,0,0,0.5); margin: 0.5em 0;}
#main.main .section > .table{margin: 2rem 0;}
#main.customer .section > article > table{margin: 3rem 0;}
#main.customer .section > article > table:first-child{margin-top: 0;}
#main .slick-dots {bottom:25px;}
#footer{
    background-color: #403C37;
    background: linear-gradient(to bottom, rgba(64,60,55,1) 0%,rgba(64,60,55,0.2) 50%,rgba(64,60,55,0.2) 51%,rgba(64,60,55,1) 100%);
}
#footer .layout{height: 12rem;}

.popup{position: absolute; z-index: 2;}
.popup > .image{width: 100%; display: block;}
.popup > .image > img{width: 100%; display: block;}
.popup > .buttons{position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; text-align: right;}
.popup > .buttons > .button{background-color: #403C37; color: #BBA26F; border-radius: 0; margin: 0; font-size: 12px;}

.mobile.only{display: none;}

.ui.table.mobile thead{display: table-header-group !important;}
.ui.table.mobile tbody{display: table-row-group !important;}
.ui.table.mobile tr{display: table-row !important; box-shadow: none !important;}
.ui.table.mobile tr td,
.ui.table.mobile tr th{display: table-cell !important; text-align: center; border-right: 1px rgba(255,255,255,0.1) solid !important; border-bottom: 1px rgba(255,255,255,0.1) solid !important; padding: 0.75em !important; font-weight: normal !important;}
.ui.table.mobile tr th{background-color: #37332F;}

.ui.table.reserv-mobile thead{display: table-header-group !important;}
.ui.table.reserv-mobile tbody{display: table-row-group !important;}
.ui.table.reserv-mobile tr{display: table-row !important; box-shadow: none !important;}
.ui.table.reserv-mobile tr td,
.ui.table.reserv-mobile tr th{display: table-cell !important; font-weight: normal !important; background-color: #37332F;}
.ui.table.reserv-mobile tr th {text-align:center;}

.about .ui.table {color:#a59f94!important;}

@media only screen and (max-width: 1023px){
    #main.main .masthead .scene{height: 15em;}
    #main.main .masthead .scene h1.tlt{font-size: 20px;}
    #header .menu > .item{display: none;}
    #header .table{height: 7em;}
    #header #opener{display: block; position: absolute; top: 2rem; right: 2rem; color: #a59f94; font-size: 1.5em; box-shadow: 0 0 0 .1em rgba(255,255,255,0.1) inset;}
    #sidebar{background-color: #403C37;}
    #sidebar .item{ color: rgba(255,255,255,0.7);}
    .ui.image.floated{margin-left: 0 !important; margin-right: 0 !important; float: none; width: 100%;}
    .popup{top: 0 !important; left: 0 !important; padding: 1em; width: 100% !important;}
    .ui.table.mobile{display: table; margin-top: 0;}
    .ui.table.mobile th.four.wide{width: 25% !important;}
    .pc.only{display: none;}

    /*아이폰숫자*/
    span.num a {color:rgba(255,255,255,.9);}
    #footer span.num a {color:#a59f94;}

    .ui.table.reserv-mobile{display:table; margin-top:0; font-size:12px;}
    .ui.table.reserv-mobile th.two.wide{width: 20% !important;}
    .ui.table.reserv-mobile .pc.only {display:none!important;}
    .ui.table.reserv-mobile tr td,
    .ui.table.reserv-mobile tr th{ border-right: 1px rgba(255,255,255,0.1) solid !important; border-bottom: 1px rgba(255,255,255,0.1) solid !important;}
}