@CHARSET "UTF-8"; 
.body {min-width:900px !important; }
html,body,p, input, select, form, label, mark, ul, ul li, ol, ol li, dl, dl dt, dl dd, img, a, table { margin:0; padding:0; } 
img { border:0; } 
ul, ol { list-style:none; } 

table { border:0; border-collapse:collapse; } 
.mb5 { margin-bottom:5px !important; } 
.mt5 { margin-top:5px !important; } 
* { margin:0; padding:0; } 
.wrapper { width: 900px; height: 565px; border: 1px solid #dbdbdb; background: #fff url(/sgis_edu/resource/images/video-bg3.png)no-repeat center / cover; } 
.content { vertical-align:middle; margin: 26px 0 0 26px; } 
.left { float:left; width:620px; height:512px; background-color:#c3d4e8; border-radius: 15px; overflow: hidden; } 
.right { float:left; width: 212px; margin: 0 20px; } 

.bgimg { position: absolute; right: 1%; bottom: 1%; } 
.subj {text-align:center;}
.fl ul { width:100%; height:100%; overflow:hidden; text-align:center;} 
.fl ul li {width:100%; margin-bottom: 8px;}
.fl ul span{font-family: 'itcAgs','esamanru', sans-serif; display:inline-block; transition: 0.3s;color: #9f9f9f; margin:auto; font-weight: 500; height: 35px; line-height: 35px;border: 1px solid #9f9f9f61; text-align: center; box-sizing: border-box; margin-bottom: 7px; } 



caption { visibility: hidden; height:10px; } 
/* .on { color:#0b50ac; font-weight:bold; }  */
/* p.subj { margin-bottom: 13px; }  */


.fl ul #li_1 { background: #02BF9F; border: 1px solid #02BF9F; color: #fff; } 
.fl ul #li_2 { background: #3B7BDC; border: 1px solid #3B7BDC; color: #fff; } 
.fl ul #li_3 { background: #1F2C35; border: 1px solid #1F2C35; color: #fff; } 

.video {width:calc( 100% - 20px); background:white; border-radius: 50px 50px 0 50px; font-size: 12pt; }
.download { width:95px;font-size: 8pt; background: white; height: 28px !important; line-height: 27px !important; border-radius: 50px; font-family:'notoSansKR', sans-serif; }
.download:hover{box-shadow:0 1px 1px 1px #ccc;    border: 1px solid #636b68; }
.download:hover img {transform: rotate(10deg);}
.download i{color:#333; font-family:'tmoneyRound', sans-serif;}

.view {width: 80px;  cursor:pointer;font-size: 8pt; background: white;height: 28px !important; line-height: 27px !important; border-radius: 50px;font-family:'notoSansKR', sans-serif;}
    
.view:hover{box-shadow:0 1px 1px 1px #ccc; border: 1px solid #636b68;}
.view:hover img {transform: rotate(10deg);}
.view i{color:#333; font-family:'tmoneyRound', sans-serif; }    
.view.on {border: 1px solid #1f2c35; }
    
    
img.svg-icon { margin-right: 5px; width: 25px; vertical-align: sub; filter: invert(73%) sepia(7%) saturate(21%) hue-rotate(345deg) brightness(87%) contrast(88%); } 
.fl ul li:hover img.svg-icon, .fl ul li.on img.svg-icon {filter: invert(100%) sepia(100%) saturate(11%) hue-rotate(198deg) brightness(103%) contrast(105%) !important; border-radius:50px;}

.scriptDiv { height: 135px;
    width: 620px;
    background: #eff6ff;
    overflow-y: scroll;
    margin: 1px 0;
    border-radius: 8px;
    border: 1px solid white;
    padding: 6px 16px;
    font-family:'tmoneyRound', sans-serif; font-size:10pt;}
    