/*general*/ 
html, body {font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; background: #fff; position: relative;}
body {margin:0; width: 100%; height: 100%; }
ul, li {list-style: none; padding: 0; margin: 0; display: inline-block;}
input {padding: 0; margin: 0;}

.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;}

body {font-family: 'Myriad Pro', sans-serif; background: url(../images/bg_unit.png) repeat 75px 30px; background-size: 255px;}
#outer {width: 100%; max-width: 1200px; margin: 0 auto; background-color: #fff;}

/*-- header --*/
#header {height: 185px;}
#logo, #title {display: inline-block; vertical-align: top;}
#logo {padding: 20px;}
#logoImg {height: 140px;}
#title {font-size: 46px; margin-top: 34px; margin-left: 15px;}
#title1Txt { color: #438fb1; font-family: 'Eurostile',sans-serif; letter-spacing: 0.5px;}
#title1Txt span {font-weight: 700;}
#title2Txt {font-weight: 900; letter-spacing: 0.5px; word-spacing: 2px; color: #363636;}
#title2Txt sup {font-size:27px;}

/*-- function bar --*/
#function {height: 60px; background-color: #000; color: #fff; padding:14px 0;}
#search, #upload, #share {display: inline-block; height: 100%; vertical-align: top; text-align: center;}
#upload {width: 28%; height: 60px;}
#search {width: 35%; height:40px; margin: 10px 0; border-left: 1px solid #fff;}
#share {width: 35%; height:40px; margin: 10px 0;}

/*upload*/
#uploadBtn {
    background-color: #df8e3d;
    text-align: center;
    width: 80%;
    height: 50px;
    margin: 5px auto;
    border-radius: 5px;
}
#uploadTxt {font-weight: bold; font-size: 32px; line-height: 50px;}


/*search*/
#search {text-align: left; position:relative;}
#field_holder, #keyword_input, #searchClear, #searchBtn {display: inline-block;}
#searchHolder {width: 90%; margin: 0 auto;}
#field_holder {width: 74%; position: relative;}
#keyword_input{
    border: none;
    line-height: 40px;
    width: 95%;
    padding-left: 5%;
    font-weight: 600;
    font-size: 14px;
}
#keyword_input::placeholder {
    color: #000;
}

#searchClear {
    position:absolute; 
    top: 12px; 
    right: 8px;
    height: 16px;
    display: none;
}
#searchBtn{
    text-align: center;
    width: 22%;
    float: right;
}
#searchBtnTxt {line-height: 40px; font-weight: bold;font-size: 21px;}
#searchInfo{width:100%; height:14px; text-align:left; position:absolute; top: 48px; font-size:12px; font-style:italic; color:#FFF;}

#clearSearchDiv{display:none; font-family: Arial, San-serif; font-size:10px; color:#b6151b; font-weight:normal; font-style:normal; text-align:center;}

#valid_search {width: 85%; text-align: center; margin-top: 2px; font-size: 14px;}

#mobileSearch {
    position: absolute;
    height: auto;
    max-height:255px;
    /*margin-left: 5%;*/
    width: 66.6%;
    overflow:scroll;
    background: #999;
    color:#FFF;
    z-index:9999;
    overflow-x: hidden;
}

.scroll-wrapper {position: relative !important; width: 66.6%; margin-left: 5%;}
/*************** 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: #df8e3d; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #db8024; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #af661d; }


/* 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*/
#shareTitle, #shareIcons {display: inline-block; vertical-align: top; height: 34px; padding: 3px;}
#shareTxt {font-weight: bold; font-size: 32px;}
#fbShare, #twShare {display: inline-block; margin-left: 10px;}
#fbIcon, #twIcon {height: 35px;}

/*-- footer --*/
#sponsor {width: 590px; margin: 30px auto; color: #3d3d3d;}
#leftSponsor, #rightSponsor {display: inline-block;}
#leftSponsorImg, #rightSponsorImg {height: 110px;}
#leftSponsor {padding-right: 25px;}
#rightSponsor {border-left: 1px solid #3d3d3d; padding-left: 25px;}
#credit {width: 790px; margin: 0 auto; font-size: 15px; font-weight: 600; padding: 5px 0;}
#leftCredit, #rightCredit, #rightReserve {display: inline-block;}
#leftCredit {padding-right: 6px;}
#rightCredit {padding-left: 6px; border-left: 1px solid #3d3d3d;}
#rightReserve {padding-left: 4px;}
#links {width: 190px; margin: 20px auto 0; padding-bottom: 40px; font-size: 15px; font-weight: 600;}
#privacy, #terms {display: inline-block;}
#privacy {padding-right: 5px;}
#terms {padding-left: 8px; border-left: 1px solid #3d3d3d;}



/*
 *
 * Responsive
 *
 *
 */

@media (max-width: 1170px) {
    #upload {width: 26%;}
    #uploadBtn {width: 92%;}
    #uploadTxt {font-size: 28px;}
    #search {width: 37%;}
    #searchHolder {width: 92%;}
    #mobileSearch {width: 68.08%; }
    .scroll-wrapper {width: 68.08%; margin-left: 4%;}

    #title {font-size: 3.6vw;  margin-left: 8px; margin-top: calc(60px - 1vw);}
    #title2 {margin-top: calc(12px - 1.2vw);}
    #title2Txt sup {font-size: 2.4vw;}
}

@media (max-width: 950px) {
    #upload {width: 24%;}
    #search {width: 40%;}
    #searchHolder {width: 94%;}
    #field_holder {width: 78%;}
    #mobileSearch {width: 73.32%; }
    .scroll-wrapper {width: 73.32%; margin-left: 3%;}
    #searchBtn {width: 20%;}
    #share {width: 34%;}
    #shareTxt {font-size: 27px;}
    #shareIcons {padding: 3px 0;}
    #fbShare, #twShare {margin-left: 8px;}
    #fbIcon, #twIcon {height: 30px;}

}

@media (max-width: 830px) {
    #function {height: 200px; padding: 0;}
    #search, #upload, #share {display: block; width: 90%; margin: 0 auto;}
    #upload {padding: 15px 0; }
    #uploadBtn {width: 100%;}
    #search {padding: 0; border: none;}
    #searchHolder {width: 100%;}
    #mobileSearch {width: 78%; }
    .scroll-wrapper {width: 78%; margin: 0;}
    #share {margin-top: 15px;}
    #shareTxt {font-size: 30px;}
    #fbIcon, #twIcon {height: 34px;}

    #credit {width: 85%; font-size: 14px; text-align: center;}
    #leftCredit, #rightCredit {padding: 0;}
    #leftCredit {display: block;}
    #rightCredit {border: none; margin-top: 10px;}
    #rightReserve {margin-top: 10px;}
    #links {font-size: 14px;}
}

@media (max-width: 750px) {
    #header {text-align: center; height: 200px;}
    #logo, #title {display: block;}
    #logo {padding: 18px;}
    #logoImg {height: 80px; }
    #title {margin-top: 0; margin-left: 0; font-size: 23px;}
    #title2 {margin-top: 5px;}
    #title2Txt sup {font-size: 15px;}
}

@media (max-width: 640px) {
    #sponsor {width: 95%; text-align: center;}
    #leftSponsor {padding-right: 3vw;}
    #rightSponsor {padding-left: 4.3vw;}
    #leftSponsorImg, #rightSponsorImg {height: 17.5vw;}
}

@media (max-width: 500px) {
    #title {font-size: 4.5vw;}
    #title2Txt sup {font-size: 3.5vw;}

    
}