#topbnr { width:100%; height:350px; background-color:#003; overflow:hidden; }
#topbnr.img { background-repeat:no-repeat; background-size:cover; background-position:center center; }
#topbnr .bbox { background-color:rgba(0,0,0,0.7); color:#fff; }
#topbnr .wbox { background-color:rgba(255,255,255,0.8); color:#000; }
#topbnr.duty { background-size:cover; background-position:center center; }
#topbnr.duty .sqr { position:absolute; left:25px; /*top:25px;*/ bottom:111px; height:96px;/*150*/ width:150px; }
#topbnr.duty .sqr>p { padding:15px; font-size:26px;  }
#topbnr.duty .intro { width:calc( 100% - 200px ); right:25px; bottom:15px; height:96px; /*150*/
                        padding:15px; box-sizing:border-box; position:absolute; }
#topbnr.duty .intro>p { font-size:100%; line-height:1.5; font-weight:300 }                        
#topbnr.duty .intro>p.more::after { content:"..."; }

#topbnr.duty .intro>.login { position:absolute; bottom:0; right:0; height:100%; width:150px;
                             /*background-color:rgba(0,0,0,0.6);*/ cursor:pointer; 
                             /*background-color:rgba(0,0,0,0.8); color:#fff;*/
                             background-color:#C31F26; color:#fff; }
#topbnr.duty .intro>.login>p { position:absolute; bottom:10px; left:10px; font-size:26px; }                             
#topbnr.duty .intro>.login>.dbx { position:absolute; top:15px; right:15px; width:24px; height:24px; /*50*/ }
#topbnr.duty .intro>.login>.dbx>em { background:#999; }
#topbnr.duty .intro>.login>.dbx>em.b2 { background:#777; }
#topbnr.duty .intro>.login+p { width:calc(100% - 150px); box-sizing:border-box; }                            
#topbnr.duty .b2x2.bl3 { position:absolute; left:175px; /*bottom:175px;*/ bottom:111px; width:50px; height:50px; }
#topbnr.duty .arw { position:absolute; right:15px; bottom:20px; height:15%;}
#topbnr .dbx.vctr { position:absolute; top:0; right:0; width:60px; height:60px; cursor:pointer; }
#topbnr .dbx.vctr>em,#topbnr.dbx.vctr>em.b2 { background:#fff; }
#topbnr .dbx.vctr>em.fa { color:#333; position:absolute; top:5px; right:10px; z-index:10;
                            font-size:16px; }
#topbnr.img .dbx.vctr>em.fa { display:none; }
#topbnr.video video { min-width:100%; min-height:100%; position:absolute; top:50%; left:0; 
                        transform:translateY(-50%);}

#toprollbnr.esbanner.fixh100 { height:350px; }     
                   
/* tabs & tab content */
#midctlay { background:#eee; }
.htabs { width:100%; border-top:solid 1px #ccc;}
.htabs td { color:#fff; padding:15px 100px 15px 21px; box-sizing:border-box;
width:33.3333%; border-right:solid 1px #ccc; vertical-align:bottom; 
font-weight:300; font-size:160%; cursor:pointer; position:relative; transition: all 0.3s ease-out;
background: #717171;
background: -moz-linear-gradient(top, #717171 0%, #b0b0b1 100%);
background: -webkit-linear-gradient(top, #717171 0%,#b0b0b1 100%);
background: linear-gradient(to bottom, #717171 0%,#b0b0b1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717171', endColorstr='#b0b0b1',GradientType=0 );}
.htabs td:last-child { border-right:none; width:33.3334%; }             
.htabs td.on.msel { color:#C31F26;
background: #e4e4e4; /* Old browsers */
background: -moz-linear-gradient(top, #e4e4e4 0%, #c5c2c8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e4e4e4 0%,#c5c2c8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e4e4e4 0%,#c5c2c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#c5c2c8',GradientType=0 ); /* IE6-9 */ }
.htabs td>em { font-weight:normal; font-size:50%; display:none;}
.htabs td.sel>em { display:block; }
.htabs td>img { position:absolute; right:15px; bottom:0; height:70%; display:none; }
.htabs td>img.ico { display:none; }
.htabs td>img.arw { display:block; transform:rotate(90deg); right:30px; bottom:15px; height:40%;}
.htabs td.sel>img.ico { display:block; }
.htabs td.sel>img.arw { display:none; }
.htabs td.minside { display:none; }
.htabs.btm { display:none; }

#htabcts {  }
#htabcts>section { display:none; position:relative; padding:25px 0; }
#htabcts>section.sel { /*display:block;*/ }


.columns { margin:0; }
.columns.col1 section { width:calc(100% - 42px); float:none; margin-left:21px; }
.columns.col2 section { width:calc(48% - 21px); float:left; margin-left:4%;}
.columns.col2 section:first-child { margin-left:21px; }
.columns.col3 section { width:calc(33.3333333% - 42px); float:left; margin-left:42px;}
.columns.col3 section:first-child { margin-left:21px; }
.columns section { font-size:120%; }
.columns section>a { color:#C31F26; text-decoration:none; font-weight:400; }
.columns section>a:after { content:" >"; }
.columns section>h3 { border-bottom:solid 1px #ccc; padding-bottom:8px; margin-bottom:15px; font-weight:400; text-transform:uppercase; }
.columns section ul { margin:0; padding:0; list-style:none; }
.columns section ul>li { margin:0 0 10px 0; padding:0 0 0 15px;  }
.columns section ul>li::before { content:"•"; position:absolute; top:2px; left:2px; }
.columns section ul>li a        { color:#000; text-decoration:none; cursor:pointer; transition: all 0.3s ease-out }
.columns section ul>li a:hover  { color:#C31F26!important; text-decoration:underline!important;}

.columns section dl { margin:0; padding:0; }
.columns section dl>div { margin-bottom:10px; }
.columns section dl dt { display:inline; font-weight:700; padding-right:15px;  }
.columns section ul>li, .columns section dl>div { font-weight:400}

/* lookfor */
#lkrctop { height:25px; }
#lookfor>h2,#recmd>h2 { padding:20px; font-weight:300; text-transform:uppercase; position:relative; font-size:120%}
#lookfor>h2>.dbx,#recmd>h2>.dbx { position:absolute; bottom:0; right:0; height:50%; }
#lookfor>h2>.dbx>img,#recmd>h2>.dbx>img { height:100%; }
    
#lookfor { width:65%; float:left; }
/*.tblook { margin-top:30px; width:100%; }
.tblook td { width:33%; border-left:solid 1px #ccc; vertical-align:top; box-sizing:border-box; 
             padding:20px 20px 120px 20px; position:relative; }
.tblook td>div { min-height:180px; }
.tblook td h3 { font-size:240%; font-weight:normal; }
.tblook td>img { position:absolute; bottom:20px; left:20px; }
.tblook td>img.r { left:auto; right:20px; }*/
#looksqrs { margin-top:30px; }
#looksqrs section { display:none; }
#looksqrs section.active { display:block; }
#looksqrs div.sqr { width:33%; box-sizing:border-box; float:left; border-left:solid 1px #ccc; 
                    cursor:pointer; overflow:hidden; opacity:0;  }
#looksqrs div.sqr.set { transform:translateY(100%); }                    
#looksqrs div.sqr.set.on { opacity:1; transform:translateY(0); transition:all 400ms ease; }                  
#looksqrs div.sqr.empty.set.on { cursor: default; }                  
#looksqrs div.sqr>div { position:absolute; top:20px; left:20px; z-index:10; font-weight:500}
#looksqrs div.sqr>div h3 { font-size:200%; font-weight:300; padding-bottom:10px}
#looksqrs div.sqr>em { box-sizing:border-box; display:block; width:100%; height:100%; 
                        position:absolute; top:0; left:0; z-index:5; }
#looksqrs img { width:100%; }
#looksqrs img.pat { position:absolute; bottom:20px; left:20px; width:auto; }
#looksqrs img.pat.r {left:auto; right:20px; }
#looksqrs img.hv { position:absolute; top:0; left:0; width:100%; opacity:0; z-index:2;
                    box-sizing:border-box;  transition:all 700ms ease; }
#looksqrs div.sqr:not(.empty):hover { background:#C31F26; color:#fff;}                    
#looksqrs div.sqr:not(.empty):hover img.hv { opacity:0.5; transform:scale(1.2,1.2); } 
#looksqrs div.sqr:not(.empty):hover img.pat { opacity:0.5; }
#looksqrs div.sqr:not(.empty):hover>em { border:solid 12px #C31F26; }

/* recommends */
#recmd { width:33%; float:right; }
#recmd section { display:none; }
#recmd section.active { display:block; }
#recmd>h2 { background:#aaa; font-size:120%; font-weight:400;}
#recmd div.it { background:#eee; margin-top:5px; padding:20px; opacity:0; transition:all 450ms ease; }
#recmd div.it:hover { background:#ccc;}
#recmd div.it .ftc { font-weight:400 }
#recmd div.it h3 { font-weight:400; font-size:140%; padding-top:8px; padding-right: 15px; }
#recmd div.it a { display:block; text-decoration:none; margin-top:25px;}
#recmd div.it em.fa { position:absolute; top:16px; right:20px; font-size:22px; }
#recmd div.it em.fa:hover,#recmd div.it i.fa.sel { color:#C31F26; }
#recmd div.it em.fa:hover:before,#recmd div.it i.fa.sel:before { content:"\f02e"; }
#recmd div.it>div { }
#recmd div.it>img { width:35%; float:left;  transition: all 0.3s ease-out}
#recmd div.it>img+div { width:60%; float:right;}
#recmd div.it.set { transform:translateX(100%); }
#recmd div.it.set.on      { opacity:1; transform:translateX(0); cursor: pointer; }
#recmd div.it:hover>img   { outline: 8px solid #C31F26; outline-offset: -8px;}


/* bottom banner */
a>#btmbnr img { border-style:none; outline:none; }
#btmbnr { width:100%; margin:30px 0 30px 0; font-weight:300; }
#btmbnr>img { width:100%; }

/* ==========================================================================
    Desktop view only
============================================================================= */
@media only screen and (min-width:768px) {
.notouch .htabs td:hover, .htabs td.sel { color:#C31F26; 
background: #e4e4e4; /* Old browsers */
background: -moz-linear-gradient(top, #e4e4e4 0%, #c5c2c8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e4e4e4 0%,#c5c2c8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e4e4e4 0%,#c5c2c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#c5c2c8',GradientType=0 ); /* IE6-9 */ }
.htabs td.sel>img.ico,.notouch #htabs td:hover>img.ico { display:block; }
.htabs td.sel>img.arw,.notouch #htabs td:hover>img.arw { display:none; }

}

/* ==========================================================================
    IE 10 fix only
============================================================================= */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}