/* ==========================================================================
    iPad Pro : landscape
============================================================================= */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* ==========================================================================
    iPad Pro : portrait
============================================================================= */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}


/* ==========================================================================
    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) {
   #main { font-size:100%; }
   .mlist .m { height:180px; }
   section .box { width: 365px; }
   #notice .box+nav .drp { padding:6px 38px 7px 8px; }
}
/* ==========================================================================
    M Narrow Desktop
============================================================================= */
@media only screen and (max-width:1200px) {

}
/* ==========================================================================
    SM Narrow Desktop
============================================================================= */
@media only screen and (max-width:950px) {
    
}
/* ==========================================================================
    Mobile
============================================================================= */
@media only screen and (max-width:767px) {
    #main { font-size:100%; }
    .pgw.mfullw { width:100%; }
    #learnidxbnr.esbanner.fixh100 { height:120px; }
    #learnidxbnr .title { width:87%; }
    #learnidxbnr .title tr>* { vertical-align:middle; }
    #learnidxbnr .title tr>td { padding:8px 0; text-align:center; width:20%; }
    #learnidxbnr .title tr>td img { /*width:80%;*/ height:60px; }
    #learnidxbnr .title tr>th { padding:12px; }
    #learnidxbnr .title tr>th>div { font-size:80%; }
    #learnidxbnr .title th>h1 { font-size:200%; }
    
   
    #notice .mbx .fa-bookmark-o.sel { color:#fff; }

    
    h2>.dbx { display:none; }
    /*h2>.box { padding:10px; font-size:90%; }*/
    h2>.box>img.ico { height:80%; }
    section { width:calc(100% - 40px);  padding:0; margin:0 auto;}    
    section .box { width:100%; display:block; }
    #module { padding: 0 0 20px 0; margin-top:20px; }
    #module .arw { font-size:36px; bottom:-16px; margin-left:-10px; top:auto; }
    #module>.pgw { width:100%; }
    #module>.pgw>*:not(h2) { width:calc(100% - 40px); margin:0 auto 15px auto; }    
    #module>.pgw>h2 { margin-bottom:15px; }
    .mbx { height:auto; }
    .mbx .box { height:auto;  }
    .mbx .box h3 { position:relative; top:0; left:0; transform:translateY(0); 
                    font-size:180%; }    
    .mbx .box h3 br { display:none; }
    .mbx h3, .mbx p { padding:8px; }
    .mbx p { position:relative; left:0; top:0; transform:translateY(0); width:100%;
                box-sizing:border-box; display:block; padding:15px 8px; min-height: 200px;}    
                
    .mlist .m { float:none; height:auto; overflow: hidden; }
    #m2.mlist .m, #m4.mlist .m { width:100%; margin:0 0 15px 0; overflow: hidden; }
    .mlist .m .lay { width:85%; }
    .mlist .m .lay p { width:90%; }
    .mlist .m .dbx { height:24px; }
    .mlist .m img.mob { width:100%;}
    #module .mlist .m .arw { bottom:-24px; left:50%; margin-left:-10px; }
    #module .mlist .m .arw:before { content:'\f0de';}
    
    #module .fa-bookmark-o, #notice .fa-bookmark-o { font-size:14px; }
    
    .rm .box { position:relative; text-align:left; }
    .rm.mbx p { right:auto; left:0; text-align:left; min-height: 200px; }
    .rm.mbx>em.fa { left:auto; right:15px; top:10px; }
    
    #m1 em.fa-bookmark-o,#m3 em.fa-bookmark-o { z-index:50; top:10px; right:15px; left:auto; }
    #m1 { background-image:none; }
    #m1 p { background-position:bottom right; background-size:auto 100%; }    
    
    
    #notice { margin-top:25px; background:#fff; }
    #notice .btarw { display:none; }
    #ntclist { background:#fff; }
    #ntcframe { width:100%; height:auto; }
    #ntcframe .pg { height:auto; position:relative; }
    #ntcframe .pg .itm { width:100%; display:block; padding:15px; margin-top:5px; background:#eee; 
                            border-right:none; }
    #ntcframe .pg .itm:first-child { border-left:none; }
    #ntcframe .pg .itm em.fa { top:15px; }
    
    #links { margin:25px auto 25px auto; }
    .lkbk { width:100%; float:none; margin-bottom:20px; }
    .lkbk>img { width:25%; margin-right:0;}
    .lkbk>div { width:72%; float:right; }
    .lkbk>div.clear { float:none;}
    
    #module #m5 .arw { top:-23px; }
    
    #notice .box+nav { position:relative; top:0; transform:translateY(0); 
                        background:#DEDEDE; margin-top:5px; padding:10px 0; }
    #notice .box+nav .drp { position:absolute; right:10px; top:12.5px; }
    #notice .box+nav>a { top:10px; }
    #notice .box+nav>a em.fa { font-size:14px; }
    #notice .box+nav nav.opts { right:10px; transform:translateY(17px); }
    
    #module .fa.arw.mbtm { bottom:-16px; top:auto; left:50%; margin-left:-10px; right:auto; height:28px; }
    #module .fa.arw.mbtm:before { content:"\f0de"; }
    #module .fa.arw.mtop { bottom:auto; top:-23px; }
    #module .fa.arw.mtop:before { content:"\f0dd"; }
    #module .fa.arw.mleft { bottom:2px; top:auto; left:-3px; right:auto; margin-left:0; height:auto; }
    #module .fa.arw.mleft:before { content:"\f0da"; }
    #module .fa.arw.mright { bottom:2px; top:auto; right:-3px; left:auto; margin-left:0; height:auto; }
    #module .fa.arw.mright:before { content:"\f0d9"; }

}

@media only screen and (max-width:420px) {
    .mbx p { min-height: 100px;}    
    .rm.mbx p { min-height: 100px; }
}