/*general*/ 
html, body {margin:0; padding:0; position: relative; }
body {margin:0; overflow-x: hidden;}
ul, li {list-style: none; padding: 0; margin: 0; display: inline-block;}
input {padding: 0; margin: 0; font-family: Helvetica, Arial, sans-serif; margin: 0; border: 0;}
img {vertical-align: bottom; max-width: 100%; max-height: 100%;}

.click {cursor: pointer;}
.noselect {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

*:fullscreen,
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

.hide-scrollbar::-webkit-scrollbar {display: none;}
/*::-webkit-scrollbar {display: auto;}*/

.mainBtn {
  background: #c60925;
  background-image: -webkit-linear-gradient(top, #c60925, #9f0206);
  background-image: -moz-linear-gradient(top, #c60925, #9f0206);
  background-image: -ms-linear-gradient(top, #c60925, #9f0206);
  background-image: -o-linear-gradient(top, #c60925, #9f0206);
  background-image: linear-gradient(to bottom, #c60925, #9f0206);
  text-decoration: none;
}

.mainBtn:hover, .mainBtn:active {
  background: #9f0206;
  background-image: -webkit-linear-gradient(top, #9f0206, #c60925);
  background-image: -moz-linear-gradient(top, #9f0206, #c60925);
  background-image: -ms-linear-gradient(top, #9f0206, #c60925);
  background-image: -o-linear-gradient(top, #9f0206, #c60925);
  background-image: linear-gradient(to bottom, #9f0206, #c60925);
  text-decoration: none;
}

html {background-color: transparent; background: url(../images/bg.jpg) no-repeat; background-size: cover; background-position: center; background-attachment: fixed; height: 100%; width: 100%;}
body {font-family: 'Gotham Pro', Arial, sans-serif; padding-bottom: 30px; width: 100%;}
#outer {/*width: 100vw; height: 100%; */max-width: 1050px; margin: 0 auto; background-color: transparent;}

/* FAQ */
.headline {
    padding:25px 0;
    text-align:center;
    border-bottom:1px solid #c60925;
}

.headline{width:98%;margin: 0 auto;}
.faqs{width:75%; margin: 0 auto;max-width: 750px;}
.question {
    margin:45px 0 16px 0;
}
.answer {
    margin:0 0 12px 0;
}
.black_16 {color: #000; font-size: 16px;}
.pink_18 {color: #c60925; font-size: 18px; }
.pink_32 {color: #c60925; font-size: 32px; }

/*-- header --*/
#header {border-top: solid 6px #c40924; margin-top: 30px; background-color: rgba(255,255,255,.75); padding: 10px 15px 15px;}
#top {display: flex; align-items: center; height: 80px; margin-bottom: 10px;}
#logo, #title {height: 100%;}
#logo {flex: 3.5 3.5 35%; display: flex; align-items: center; justify-content: center;}
#title { flex: 6.5 6.5 65%; }


#title { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 50px;}
#instructionTxt {font-size: 15px; line-height: 18px; width: 98%; margin: 0 auto; text-align: center;}

/*-- function --*/
#function {display: flex; align-items: center; color: #fff; background-color: #1d232d; height: 54px; padding: 15px 18px;}
#upload {flex: 3.1 3.1 31%;}
#search {flex: 3.4 3.4 34%;}
#share {flex: 3.5 3.5 35%;}

/*upload*/
#upload {height: 100%; justify-content: flex-start; display: flex; align-items: center;}
#uploadBtn {width: 94%; height: 100%; display: flex; justify-content: center; align-items: center;}
#uploadTxt { color: #fff; font-size: 22px; text-align: center;}


/*search*/
#search { display: flex; justify-content: flex-end; align-items: center; height: 100%;}
#searchTxt {font-size: 24px; font-weight: bold; margin-bottom: 30px; width: 80%; text-align: center;}
#searchContent {
    width: 92%; 
    height: 100%;
    position: relative;
}

#search_part { display: flex; align-items: center; justify-content: center; height: 100%;}
#field_holder {flex: 8 8 80%; height: 52px;border: 1px solid #999; }
#searchBtn {flex: 2 2 20%; height: 100%; }

#field_holder { position: relative;  }
#keyword_input { height: 100%; width: 86%; padding: 0 12% 0 2%; font-size: 16px; outline: none; font-weight: 300;  border-radius: 0;}
#keyword_input::placeholder {color: #4d4d4d; font-size: 16px; font-weight: 300;}
#searchClear { width: 20px; position:absolute; right: 10px; top: 16px;  display: none;}
#keyword_input::-ms-clear {display: none;}

#searchBtn {display: flex; align-items: center; justify-content: center;  }
#searchBtn img {height: 38px;}

#result_part {position: absolute; width: 100%; }
#valid_search { text-align: left; margin-top: 1px; font-size: 12px;}
#searchTip {font-size:13px; font-weight: 600; text-align: center;}
#mobileSearch {
    height: auto;
    max-height: 280px;
    width: 100%;
    position: relative;
    overflow:scroll;
    background:#c60925;
    z-index:9990;
    overflow-x: hidden;
    color:#fff;
    border-radius: 0;
    display: none;

    padding-bottom: 6px;

}

.resultUnit {margin: 0.5vw 0;}
.resultTable {width: 100%; height: 100%;}
.resultImgPart {width: 32%; height: 100%; text-align: center;}
.resultImg {width: 6vw; max-width: 70px; min-width: 50px;}
.resultNamePart {width: 68%; height: 100%;}
.resultName {font-size: 16px; color: #fff; text-align: center; width: 93%;}


.searchResultTxt {color: #fff;}
.searchResultItem {height: 60px; margin-top: 5px;}
.searchResultImg {width:60px; height:60px; margin-left:5px;}
.searchResultName {margin-left: 8px; color: #fff;}


#searchContent .scroll-wrapper {width: 100%; margin-top: 0px;}
/*************** SIMPLE INNER SCROLLBAR ***************/
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 12px;

    z-index: 10000;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #fff; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c60925; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #3086e8; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #1461b8; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

/*.scrollbar-inner > .scroll-element.scroll-x {display: none;}*/

/*share*/

#share {display: flex; justify-content: flex-end; }

#shareContent { display: flex; align-items: center; justify-content: flex-end; width: 95%; }
#shareTxt {font-size: 18px; color: #fff; }
#shareIcons {margin-left: 15px; display: flex; align-items: center; justify-content: center;}
#share_fb, #share_tw { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px;  border-radius: 50px;}
#share_fb {margin-right: 10px; background-color: #3862a7; }
#share_tw {background-color: #008dd2;}
#fbIcon, #twIcon {background-image: url('../images/social_white.png'); background-repeat: no-repeat; height: 27px; width: 27px; background-size: auto 27px;}
#fbIcon {background-position: -37px 0; }
#twIcon {background-position: -84px 0; }

/*-- mosaic --*/
#mosaic {max-width: 1050px; width: 100%; margin:0 auto; }


/*-- footer --*/
#footer { padding: 30px 0;}


/*-- carousel --*/
#carousel {color: #000; background-color: rgba(255,255,255,.75); padding: 20px; position:relative;}

#carouselTitle { padding-left: 5%; font-size: 22px; font-weight: 500; }
#photoContainer {padding: 20px 0; overflow: hidden; height: 150px; display: flex; align-items: center;}
#leftScroll, #rightScroll {flex: .6 .6 6%; height: 100%; display: flex; justify-content: center; align-items: center;}
#leftScroll  {justify-content: flex-start;}
#rightScroll {justify-content: flex-end;}
#carouselMiddle {width: 90%; height: 100%;}
#arrowLeft, #arrowRight {height: 40px; width: 100%;}
#arrowLeft {background: url(../images/arrow_left.png) no-repeat; background-size: contain; background-position: left center;}
#arrowRight {background: url(../images/arrow_right.png) no-repeat; background-size: contain; background-position: right center;}

#displayContainer {height: 100%; flex: 8.8 8.8 88%; max-width: 88%;}
#carouselLoading {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.carouselPhoto {width: 100%; height: 100%;}
.carouselLike {
    background-color:#FFF; 
    position:absolute; 
    bottom: 2px; 
    right: 2px; 
    font-weight: 600;
    border-radius: 60px; 
    padding: 1px;
}
.carouselItem {width: 150px; height:150px; position: relative;}
.carouselName { position: absolute; bottom: 0; left: 0; background-color: #c60925; background-color:rgba(198, 9, 37, 0.7); width: 100%; height: auto; color: #fff;}
.nameTxt { margin-left: 9px; font-size: 15px; line-height: 18px; font-weight: 500; padding: 5px 0;}


/*-- footer --*/
#footer {padding: 30px 0;}
#footer a {text-decoration: none; color: #fff;}

/*about*/
#about {display: flex; align-items: flex-start; margin-bottom: 12px;}
#aboutLeft, #aboutRight {flex: 5 5 50%; display: flex; }
#aboutLeft {justify-content: flex-start;}
#aboutRight {justify-content: flex-end;}
.aboutContainer {width: 95%;}
.aboutTitle { background-color: rgba(255,255,255,.75); font-size: 20px; font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 8px; word-spacing: 1px; text-align: center;}
.aboutBody { background-color: rgba(205,203,199,.75); padding: 10px; font-size: 15px; line-height: 19px; min-height: 140px;}

/*bottom*/
#bottom {display: flex; align-items: flex-start; color: #fff; font-size: 11px;}
#bottomLeft, #bottomRight {flex: 3.8 3.8 38%;}
#bottomCenter {flex: 2.4 2.4 24%; justify-content: center;}
#bottomLeft {justify-content: flex-start;}
#bottomRight {justify-content: flex-end;}

#info {display: flex; align-items: center; justify-content: space-between; width: 240px;}
#team a {text-decoration: none; color: #fff;}
/*#logo_footer {height: 80px; text-align: center;}*/

#socialLink {display: flex; align-items: center; justify-content: space-around; width: 190px;
    margin: 0 auto;}
#socialLink div {width: 32px; height: 32px; background-image: url(../images/social_white.png); background-repeat: no-repeat; background-size: auto 32px;}
#link_fb {background-position: -43px 0;}
#link_tw {background-position: -100px 0;}
#link_in {background-position: 0 0;}


/*-- pm --*/
#pm {margin: 5px 10px; position:absolute; top:0; right:0;}
#pm a {text-decoration: none; color: #fff;}
#pmCredit {display: flex; align-items: center; justify-content: flex-end; margin-right: 5px;}
#pmLogo {height: 13px; display: flex; margin-right: 4px;}
#pmLogo img {height: 100%;}
#pmTxt {font-size: 11px; letter-spacing: -0.2px; color:#000;}

/*others*/
#animateOn, #animateOff { font-family: 'Myriad Pro', Helvetica, sans-serif; }

/*-- responsive --*/

@media (max-width: 1060px) {
    #footer {padding: 30px 4%;}
    .aboutContainer {width: 97%;}
    .aboutBody {min-height: 192px;}

}

@media (max-width: 860px) {
    #function {height: auto; flex-direction: column;}
    #upload, #search, #share {flex: auto; width: 95%; margin: 0 auto; height: 54px;}
    #search {margin: 20px auto 12px;}
    #uploadBtn, #searchContent, #shareContent {width: 100%;}
    #shareContent {justify-content: center;}

    #about {flex-direction: column; align-items: center; justify-content: center; width: 95%; margin: 0 auto 15px;}
    #aboutLeft, #aboutRight {flex: auto; justify-content: center;}
    #aboutLeft {margin-bottom: 20px;}
    .aboutContainer {width: 100%;}
    .aboutBody {min-height: unset;}

    #bottom {width: 95%; margin: 0 auto; flex-direction: column; align-items: center; justify-content: center;}
    #bottomLeft, #bottomRight, #bottomCenter {flex: auto;}
    #bottomCenter {margin: 15px 0;}

}

@media (max-width: 767px) {
    #header {margin-top: 0;}

    .resultName {font-size: 14px;}

    #carousel {padding: 30px 2% 20px; position:relative;}
    #leftScroll, #rightScroll {flex: .8 .8 8%;}
    #displayContainer {flex: 8.4 8.4 84%; max-width: 84%;}
    #photoContainer {height: 110px;}
    .carouselImage, .carouselItem {height: 110px !important; width: 110px !important; } 
    #arrowLeft, #arrowRight {height: 36px;}
    .carouselName .nameTxt {font-size: 13px; line-height: 15px;}
}

@media (max-width: 700px) {
    #header {padding: 10px;}
    #top {height: auto; flex-direction: column;}
    #logo, #title {flex: auto; height: 80px;}
    #title {height: 11.5vw; font-size: 8.2vw;}
}

@media (max-width: 600px) {

    .aboutTitle {font-size: 3.8vw; word-spacing: 0;}
}

@media (max-width: 420px) {

    #keyword_input, #keyword_input::placeholder {font-size: 14px;}

    #leftScroll, #rightScroll {flex: 1 1 10%;}
    #displayContainer {flex: 8 8 80%; max-width: 80%;}
    #arrowLeft, #arrowRight {height: 32px;}

    .aboutTitle {font-size: 4.4vw;}

    #socialLink {width: 150px;}
    #socialLink div {width: 25px; height: 25px;  background-size: auto 25px;}
    #link_fb { background-position: -34px 0; }
    #link_tw { background-position: -78px 0; }
    #pmTxt {font-size: 10px;}
}