/* --------------------------------------------------------------------------------------------------------------------
Main
-------------------------------------------------------------------------------------------------------------------- */
.main { display:flex; justify-content: center; align-items: center; height:100vh; padding:0; background:#ff0000; background:url("/assets/images/main.05.gif") no-repeat center; background-size:cover; }
.main .mainTxt { height:10rem; }
.mainTxt h1 { font-size: 10rem; font-weight:700; font-family:"Blacksword";  color: #fff; margin:0; line-height:10rem; text-align: center; }
.mainTxt span { opacity: 0; transition: all 0.4s ease; }
.mainTxt span.fade { opacity: 1; }

.arrow { position:absolute; bottom:5vh; left:calc(50% - 2.5rem); text-align: center; margin:0 0; }
.arrow a { font-size:5rem; color:#fff; }

@media screen and (max-width:993px){
    .mainTxt h1 { font-size: 8rem; }
}
@media screen and (max-width:768px){
    .mainTxt h1 { font-size: 5rem; }
    .arrow { bottom:4vh; left:calc(50% - 1.5rem); }
    .arrow a { font-size:3rem; }
}
@media screen and (max-width:430px){
    .main { display:flex; justify-content: center; align-items: center; height:100vh; padding:0; background:#ff0000; background:url("/assets/images/main.03.gif") no-repeat center; background-size:cover; }
    .mainTxt h1 { font-size: 4rem; }
}

/* --------------------------------------------------------------------------------------------------------------------
history
-------------------------------------------------------------------------------------------------------------------- */
.history { min-height:100vh; padding:2% 0; background:rgba(0,0,0,0.9); }
.history .historyTitle h1 { font-family: 'Blacksword'; font-size:6rem; color:#fff; letter-spacing: 1.1rem; text-align: center; }

.history .historyArea { display: flex; justify-content: space-between; padding:5% 0; }
.historyArea .historyL { flex:1 1 30%; padding:0 0; }
.historyArea .historyL img { opacity:0; }
.historyArea .historyR { flex:1 1 70%; padding:0 10%; }
.historyArea .historyR h3 { /* font-family:'NanumPenScript'; */ font-size:3rem; font-weight: 500; /* font-style: oblique; */ color:#fff; opacity:0; }
.historyArea .historyR h5 { /* font-family:'NanumPenScript'; */ font-size:1.8rem; font-weight: 500; /* font-style: oblique; */ color:#fff; opacity:0; }
.historyArea .historyR h5 a { margin:3% 0 0; }
.historyArea .historyR h5 a:hover { color:#ffb600 !important; }
.historyArea .historyR ul { list-style:none; }
.historyArea .historyR ul li { /* font-family:'NanumPenScript'; */ font-size:1.8rem; font-weight: 500; /* font-style: oblique; */ color:#fff; opacity:0; line-height: 3.6rem; }
.historyArea .historyR .logoArea ul { list-style:none; display: flex; justify-content: space-between; padding-left: 0; }
.historyArea .historyR .logoArea ul li { flex:1 1 10%; max-width:12%; }
.historyArea .historyR .bookArea { width:100%; }


@media screen and (max-width:768px){
    .history { height:auto; padding:2% 0; background:url("/assets/images/profile.02.gif") no-repeat center; background-size: cover; }
    .history .historyTitle h1 { font-size:4rem; margin:0.37em 0; }
    .history .historyArea { display: flex; justify-content: space-between; flex-flow: column wrap; }
    .historyArea .historyL { flex:1 1 100%; display:none; }
    .historyArea .historyR { flex:1 1 100%; padding:0 2%; }
    .historyArea .historyR .logoArea ul { justify-content: flex-start; flex-flow: row wrap; }
    .historyArea .historyR .logoArea ul li { flex:1 1 20%; max-width:19%; margin:0 0 5px 5px; }
    .historyArea .historyR .logoArea ul li:first-child { margin:0 0 5px 0; }
}
@media screen and (max-width:430px){
    .history .historyArea { padding:2% 0; }
    .historyArea .historyR { flex:1 1 100%; padding:0 0%; }
    .historyArea .historyR h3 { font-size:2.0rem; }
    .historyArea .historyR ul li { display: flex; justify-content: flex-start; font-size:1.6rem; }
}

/* --------------------------------------------------------------------------------------------------------------------
resume
-------------------------------------------------------------------------------------------------------------------- */
.resume { height:100vh; padding:2% 0; background:rgba(0,0,0,0.85); }
/*.resume .container { width:100%; }*/
.resume .resumeTitle h1 { font-family: 'Blacksword'; font-size:6rem; color:#fff; letter-spacing: 1.1rem; text-align: center; }

.resume .resumeArea { display: block; padding:5% 0; }

.resumeArea .tabItem { flex: 1 1 50%; max-width: 100%; margin:0 0; padding: 0 0; border-bottom: 1px solid #545454; opacity: 1; }
.resumeArea .tabArea { width:100%; }
.resumeArea .tabArea .tabLinks { display:flex; list-style:none; margin:0 0; padding:0 0; border-bottom:1px solid #545454; font-size:1.6rem; }
.resumeArea .tabArea .tabLinks > li > a { float:left; margin:0 0rem 0 0; padding:1.0rem; border:1px solid #545454; border-bottom-color:transparent; border-radius:2px 2px 0 0; color:#fff; }
.resumeArea .tabArea .tabLinks > li > a:hover { border-color:#fff; }
.resumeArea .tabArea .tabLinks > li.active > a,
.resumeArea .tabArea .tabLinks > li.active > a:hover,
.resumeArea .tabArea .tabLinks > li.active > a:focus { color:#fff; font-weight:bold; background:#545454; border:1px solid #fff; }
.resumeArea .tabArea .tabContent { font-size:1.6rem; line-height:2.0rem; color:#545454; width:100%; margin:2rem 0 0; }
.resumeArea .tabArea .tabContent > .tabPane { display:none; }
.resumeArea .tabArea .tabContent > .tabPane.active { display:block; padding:1rem 1.5rem; background:transparent; border:1px solid #fff; }
.resumeArea .tabArea .tabContent > .active { display:block; }
.resumeArea .tabArea .tabContent > .tabPane ul { color:#fff; }
.resumeArea .tabArea .tabContent > .tabPane ul li { margin:0 0 2rem; }

.tabContent .resumeTitle span { font-size:1.6rem; font-weight:500; color:#ffb600; /* #ffd700; */ }
.tabContent .resumeTitle span.sub { font-size:1.4rem; font-weight:500; color:#fff; }

.tabContent .resumeItem { display:flex; justify-content: flex-start; flex-flow:row nowrap; }
.tabContent .resumeItem span { font-size:1.6rem; line-height:2.5rem; color:#fff; }
.tabContent .resumeItem span.mobile { display:none; }
.tabContent .resumeItem span.bold { font-size:1.4rem; font-weight:700; color:#bd2333; }
.tabContent .resumeItem .term { padding:5px 10px; }
.tabContent .resumeItem .store { position:relative; padding:5px 10px; min-width:220px; }
.tabContent .resumeItem .store img { position:absolute; top:3px; right:10px; width:30px; }
.tabContent .resumeItem .store span { font-size:1.6rem; font-weight:700; color:#fff; }
.tabContent .resumeItem .storeExp { padding:5px 10px; }

.resumeArea .tabArea .tabContent #s01 { /* background:url("/assets/images/resume.01.gif") no-repeat center; background-size: cover; */ }
.tabContent #s02 .resumeItem .store { position:relative; padding:5px 10px; min-width:215px; }
.tabContent #s02 .resumeItem .storeExp { flex:1 1 70%; padding:5px 5px; }

.resumeArea .tabArea .tabLinkRight .tabLinks { display:flex; justify-content:flex-end; }

.resumeArea .tabArea.tabJustified .tabLinks { display:flex; justify-content:space-between; flex-flow: row wrap; }
.resumeArea .tabArea.tabJustified .tabLinks > li { flex:1 1 33%; }
.resumeArea .tabArea.tabJustified .tabLinks > li > a { width:100%; }


@media screen and (max-width:993px){
    .resume .resumeTitle h1 { font-size:4rem; margin:0.37em 0; }
    .resumeArea .tabArea .tabContent > .tabPane.active { padding:0.5rem; }

    .tabContent .resumeTitle span { font-size:1.6rem; }
    .tabContent .resumeTitle span.sub { font-size:1.4rem; }

    .tabContent .resumeItem span { font-size:1.2rem; }
    .tabContent .resumeItem .store { padding:5px 5px 5px 10px; min-width:195px; }
    .tabContent .resumeItem .store span { font-size:1.4rem; }
    .tabContent .resumeItem .storeExp { padding:5px 5px; }
}
@media screen and (max-width:768px){
    .resume { height:auto; padding:5% 0; background:rgba(0,0,0,0.85); }
    .resume .resumeTitle h1 { font-size:4rem; margin:0.37em 0; }
    .resumeArea .tabArea .tabLinks { font-size:1.2rem; }
    .resumeArea .tabArea .tabLinks > li > a { padding:0.75rem; }
    .tabContent .resumeItem { display:flex; justify-content: flex-start; flex-flow:row nowrap; }
    .tabContent .resumeItem span { font-size:1.0rem; line-height:1.5rem; }
    .tabContent .resumeItem span.mobile { display:block; font-weight:500; }
    .tabContent .resumeItem .term { flex:1 1 20%; padding:5px 5px; }
    .tabContent .resumeItem .term.pc { display:none; }
    .tabContent .resumeItem .store { flex:1 1 25%; padding:5px 5px; min-width:155px; }
    .tabContent .resumeItem .store img  { position:absolute; top:10px; right:5px; width:25px; }
    .tabContent .resumeItem .store span { font-size:1.2rem; }
    .tabContent .resumeItem .storeExp { flex:1 1 40%; padding:5px 5px; }

    .tabContent #s02 .resumeItem .store { position:relative; padding:5px 10px; min-width:140px; }
    .tabContent #s02 .resumeItem .storeExp { padding:2.5px 5px; }
    .tabContent #s02 .resumeItem span { font-size:1.0rem; line-height:1.2rem; }

    .resumeArea .tabArea.tabJustified .tabLinks > li { flex:1 1 33%; }
}

/* --------------------------------------------------------------------------------------------------------------------
gallery
-------------------------------------------------------------------------------------------------------------------- */
.gallery { height:auto; min-height:100vh; padding:2% 0; background:rgba(0,0,0,0.9); }

.filter-menu{ display:flex; justify-content: flex-start; flex-flow:row wrap; padding:1% 2%; margin:1.0rem 0; list-style: none; }
.filter-menu li{ padding: 10px 18px; background: #eb4d4b; color: #fff; cursor: pointer; margin:0 0.5rem 0 0; }
.filter-menu li:last-child { margin:0 0 0 0; }
.filter-menu li:hover, .filter-menu li.current{ background: #ff7979; }

.filter-item { list-style:none; /* height:90vh; */ padding:1% 2%; overflow: hidden;  }
.filter-item li{ width:12.5%; padding: 2px; float: left; }
.filter-item li.active{ width:12.5%; padding: 2px; transition: all 0.5s ease; }
.filter-item li.delete{ width: 0%; padding: 0; transition: all 0.5s ease; }
.filter-item img{ display: block; width: 100%; height: 100%; }

@media screen and (max-width:768px){
    .gallery { padding:5% 0; }
    .filter-menu{ margin:0 0 2.0rem; }
    .filter-menu li{ width:calc((100% - 1rem) / 3 ); padding: 10px 18px; background: #eb4d4b; color: #fff; cursor: pointer; margin:0 0.5rem 0.5rem 0; }
    .filter-menu li:nth-child(3n) { margin:0 0 0.5rem 0; }
    .filter-item li.active, .filter-item li{ width: 33%; }
    /*.filter-item { height:90vh; max-height:500px;  }*/
}