/* ==========================================================================
    Pad : landscape
============================================================================= */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape){
    
}
/* ==========================================================================
    Pad : Portrait
============================================================================= */
@media only screen and (min-width: 768px) and (max-width: 959px) and (orientation : portrait) {
    
    .htabs td { font-size:180%; }
    .bnrtxt .lfont { font-size:110%; }
    .bnrtxt .xlfont { font-size:160%; }
    
    #looksqrs div.sqr { width:50%; }
    #looksqrs div.sqr.empty { display:none; }
}
/* ==========================================================================
    Mobile
============================================================================= */
@media only screen and (max-width:767px) {
    #topbnr { height:150px; }
    #toprollbnr.esbanner.fixh100 { /*height:calc( 24.4vw - 9.8px );*/ height:150px; }
    #topbnr.duty .sqr { height:100px; width:100px; top:15px; left:15px; }
    #topbnr.duty .sqr>p { padding:10px; font-size:24px; line-height:1.1;}
    #topbnr.duty .arw { bottom:10px; right:10px; }
    #topbnr.duty .intro { display:none; }
    #topbnr .dbx.vctr { width:30px; height:30px; display:none; }
    #topbnr .dbx.vctr>em.fa { font-size:12px; top:2px; right:4px; }
    #topbnr video { display:none; }
    #hpspbnr+.esbrmtxt { display:none; }    
    .esbanner+.esbrmtxt .btns { margin-top:10px; color:#fff; }
    .esbanner+.esbrmtxt a.act { color:#fff !important; }
    
    #mlogin { margin:20px 0; color:#fff; font-size:160%; font-weight:300; 
    background: #b0b0b1; /* Old browsers */
    background: -moz-linear-gradient(top, #b0b0b1 0%, #868389 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b0b0b1 0%,#868389 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b0b0b1 0%,#868389 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0b0b1', endColorstr='#868389',GradientType=0 ); /* IE6-9 */
    }
    #mlogin>p { margin-left:15px; padding:30px 60px 5px 15px; background:#666; display:inline-block;
                background: linear-gradient(to bottom, #767676 0%,#666666 100%);
                position:relative; }
    #mlogin>p>img.arw { position:absolute; bottom:8px; right:8px; height:20%;  }
    #mlogin>.dbx { position:absolute; top:10px; right:10px; width:30px; height:30px; }
    #mlogin>.dbx>em { background:#666; }
    #mlogin>.dbx>em.b2 { background:#888; }
    
    /*tabs*/
    .htabs,.htabs tr,.htabs tbody,.htabs.btm { display:block; }
    .htabs td { display:none; }
    .htabs td.on { display:block; }
    .htabs tbody,.htabs td,.htabs td:last-child { width:100%; }
    .htabs td>img,.htabs td.msel>img { display:none; }
    .htabs td.minside { display:block; }
    .htabs td.sel.on { 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 */ }

    /*tab-columns*/    
    #htabcts { display:none; }
    #htabcts.open { display:block; }
    .columns.col2 section { width:100%; float:none; margin-left:0; }
    .columns.col2 section:first-child { margin-left:0; margin-bottom:35px; }
    
    /*look & recmd*/
    #homebtm.open #lkrctop { display:none; }
    #lookfor,#recmd { width:100%; float:none; }
    #lookfor { margin-bottom:30px; }
    #looksqrs div.sqr { width:50%; }
    #looksqrs div.sqr.empty { display:none; }
    #looksqrs div.sqr>div h3 { font-size:120%; }
    #looksqrs .sqr.ph3 img.pat { height:60px; }
    #looksqrs .sqr.ph2 img.pat { height:40px; }
    #looksqrs .sqr.ph1 img.pat { height:20px; }
    #homebtm.open #recmd { margin-top:25px; }
    
    /*bottom banner*/
    .bnrtxt.vmid { top:20px; left:20px; transform:translateY(0); width:calc(100% - 40px); }
    .bnrtxt.vmid>.xlfont { font-size:180%; }
}

/* ==========================================================================
    Print
============================================================================= */
@media print {
    #looksqrs div.sqr { opacity:1; }
    #recmd div.it { opacity:1; }
    .blkslider .blk>img { margin-bottom:10px; }
    #htabcts .blkslider { margin-bottom:25px; }
    #htabcts .blkslider .blk h4 { font-size:130%; }
    #looksqrs div.sqr>div h3 { font-size:135%; font-weight:500; }
    #recmd div.it h3 { font-size:130%; }
}