﻿
.pageSec{display:inline-block;width:100%;float:right;position:relative}
.omarPlayerPage .content-wrap{background: #111;width:100%}
.omarPlayerPage .content{background: #111;padding:0}
.paddingBottom{min-height: 869px;}
.CntrDiv{display:inline-block;width:605px;height:auto;position:absolute;top:50%;transform:translateY(-50%);right:320px}
.PlayerPagebutton{display:inline-block;width:230px;height:60px;background: linear-gradient(90deg, #3BD6FF 50%, #1AB4F6 100%);border-radius:8px;color:#1C2C5B;font-size:20px;font-family:droidLight, Arial;line-height:60px;float:right}
.PlayerPattern{padding:30px 320px;}

.PlayerPattern .ttl{background:no-repeat;text-align:center;color:#3BD6FF;font-size:42px;font-family:droidLight, Arial;font-weight:700;height:auto;padding:0;right:0;border:0;margin-bottom:20px;cursor:default}
.PlayerPattern .ttl h2{text-align:center;line-height:unset;float:none}
.pattern1 ul li:hover .desc p { color: #fff!important;}
.landingView{background:#111;}
.landingView .flickity-viewport{height:100%!important}
.landingView .slideShow {width:100%;height:100%;position:absolute;top:0;left:0;bottom:0;right:0}
.landingView .slideShow .image:before{content:'';background-image:url(../Images/OmarMarmosh/bk.webp);background-position: right;display: inline-block;position: absolute;width: 100%;height: 100%;right: 0;background-size: auto 100%;z-index: 0;pointer-events: none;}
.landingView .slideShow .image:after{content:'';background: linear-gradient(90deg, #001838 0%, rgba(0, 24, 56, 0.80) 80%, rgba(0, 24, 56, 0.00) 100%);display: inline-block;position: absolute;width: calc(100% - 430px);height: 100%;left: 0;background-size: auto 100%;z-index: 1;pointer-events: none;}

.landingView .slideShow .image img{display:inline-block;position:absolute;    width: 788px;height: auto;left: 310px;z-index: 3;top: 50%;transform: translateY(-50%);}
.landingView .slideShow .video{position: absolute;top: 0;left: 50%;transform: translateX(-50%);width:100%;height:100%}
.landingView .slideShow .video iframe{position: absolute;top: 0;left: 0;right:0;bottom:0;width:100%;height: 100%}

.landingView .slideShow .textcontainer{display:inline-block;position:absolute;width:713px;left:325px;top: 50%;transform: translateY(-50%);z-index:2;cursor:default}
.landingView .slideShow .image p,
.landingView .slideShow .image span{display:inline-block;width:100%;color:#fff;font-size: 96px;font-family:droidBold, Arial;line-height:1.5;text-align:right}
.landingView .slideShow .image span{color:#3BD6FF;font-size:122px;}

.quizDes{background:url(../Images/OmarMarmosh/secondBK.jpg?ver=0.1) top right no-repeat #111}
.quizDes:before{content:'';background:url(../Images/OmarMarmosh/omarImgsecond.png) left bottom no-repeat;display: inline-block;position: absolute;width: 100%;height: 100%;bottom:0;right: 0;background-size: auto 100%;z-index: 0;pointer-events: none;}
.quizDes label{display:inline-block;width:100%;font-size:42px;font-family:droidLight, Arial;font-weight:700;color:#fff;text-align:right;margin-bottom:20px;float:right}
.quizDes p{display:inline-block;width:100%;font-size:24px;font-family:droidLight, Arial;color:#fff;line-height:1.8;margin-bottom:70px;float:right}

.PlayerPattern .pattern1 .ttl,
.PlayerPattern .pattern1 ul li .secName,
.PlayerPattern .pattern1 ul li .desc .time,
.PlayerPattern .pattern2 .ttl{display:none}

.PlayerPattern .pattern1 ul li{width:calc((100% - 60.1px) / 4);height:290px;border-radius: 16px;background: rgba(59, 214, 255, 0.20);box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.10);border:0}
.PlayerPattern .pattern1 ul li:first-child{width:calc((100% - 60.1px) / 4)}
.PlayerPattern .pattern1 ul li .desc p{color:#fff;height:54px}
.PlayerPattern .PlayerPagebutton{float:none}

.bkpattern{background-image:url(../Images/OmarMarmosh/videoSecondbk.webp?ver=0.1);background-repeat: no-repeat;  background-size: cover; }
.PlayerPattern .pattern2 ul li:first-child {width: calc((100% - 25px) / 2);margin-right: 0;margin-bottom: 0;}
.PlayerPattern .pattern2 ul li:first-child a .imageCntnr {padding-bottom: calc(97% + 2px);width:100%}
.PlayerPattern .pattern2 ul li:first-child  .desc {width: 100%;height: 70%;overflow: hidden;cursor: pointer;position: absolute;bottom: 0;right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000000);
    background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    background: -o-linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    background: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    background: -ms-linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#ff1a3b00',GradientType=0);}
.PlayerPattern .pattern2 ul li:first-child  .desc p{line-height: 1.6;padding: 10px;font-size: 20px;position: absolute;bottom: 0;right: 0;}
.PlayerPattern .pattern2 ul li:first-child .secName{left: 50%;transform: translate(-50%, -50%);width: 80px;height: 80px;border: 8px solid #fff;right:auto}

.PlayerPattern .pattern2 ul li {border-radius: 16px;border:0;width:calc(100% - (calc((100% - 23px) / 2)) - 24px);margin-right: 25px;margin-left: 0;margin-bottom:25px;float: right; height: auto; position: relative;overflow: hidden;}
.PlayerPattern .pattern2 ul li:last-child{margin-bottom:0}
.PlayerPattern .pattern2 ul li .secName{display:block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80px;height: 80px;background: unset;border-radius: 50%;border: 8px solid #fff;    font-size: 13px; color: #fff;    z-index: 1;    line-height: 2.3;    overflow: hidden; padding: 0;}
.PlayerPattern .pattern2 ul li .secName .icon{    background: unset;width: 35px;height: 35px;top: 50%;left: 50%;transform: translate(-50%, -50%);right: auto;    position: absolute;margin-left: 0;}
.PlayerPattern .pattern2 ul li:first-child.video .secName .icon:before{font-size:33px}
.PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom:calc((198px * 66.57)/ 100);width:198px;float:right;    position: relative;  overflow: hidden;}
.PlayerPattern .pattern2 .desc {width: calc(100% - 198px);float: left;height: 131px;position: relative;bottom: auto;right: auto;background: rgba(59, 214, 255, 0.20);      overflow: hidden;cursor: pointer;}
.PlayerPattern .pattern2 .desc p{position: relative;height: auto;bottom: auto;right: auto;padding:20px 10px;font-size:18px;    color: #fff;text-align: right;direction:rtl;line-height:1.6}
.PlayerPattern .pattern2 .desc p.date{display:none;}
.PlayerPattern .pattern2 ul li .secName{transform: translateY(-50%);right: 74px;left: auto;width: 50px;height: 50px;border: 4px solid #FFF;background: unset;border-radius: 50%;}
.PlayerPattern .pattern2 ul li.video .secName .icon:before{font-size:24px;content: 'm'; color: #fff; float: left;  left: 50%; position: absolute; top: 50%;  transform: translate(-50%, -50%);}
.pattern2 ul li a { display: block;}
.PlayerPattern .pattern2 { display: inline-block; width: 100%; float: right;}
.PlayerPattern.newBK{ background-image: url(../Images/OmarMarmosh/Newsbk.webp?ver=0.1);background-repeat: no-repeat;  background-size: cover;}
.pattern2 ul li a img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto;width: 100%; height: 100%; border: none;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;}


@media screen and (min-width:1912) and (max-width:1919px) 
{
    .PlayerPattern .pattern2 .desc {width: calc(100% - 250px);height: 166px;}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((250px* 66.57) / 100);width: 250px;}
}

@media screen and (min-width:1680px) and (max-width:1911px) {
    .landingView .slideShow .image img{width: 640px;left: 248px;}
    .CntrDiv{right:170px;width:626px}
    .PlayerPattern{padding:30px 170px}
    .paddingBottom{min-height: 860px;}

        .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((208px* 66.57) / 100);width: 208px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 208px);height:138px}

    .quizDes:before{height:90%}
    .landingView .slideShow .textcontainer{left: 100px;}

    .landingView .slideShow .image:after{width: calc(100% - 350px);}
}

@media screen and (min-width:1600px) and (max-width:1679px) {
        .landingView .slideShow .image img{width: 640px;left: 248px;}
    .CntrDiv{right:170px;width:630px}

    .PlayerPattern{padding:30px 170px}
    .paddingBottom{min-height: 710px;}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:21px}

    .landingView .slideShow .textcontainer{left: 145px;}
    .landingView .slideShow .image p{font-size:90px}
    .landingView .slideShow .image span{font-size:116px}

    .landingView .slideShow .image:after{width: calc(100% - 370px);}
}

@media screen and (min-width:1536px) and (max-width:1599px) {
       .landingView .slideShow .image img{width: 600px;left: 230px;}
    .CntrDiv{right:170px;width:630px}
     .quizDes:before{height:94%}

    .PlayerPattern{padding:30px 170px}
    .paddingBottom{min-height: 674px;}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((188px* 66.57) / 100);width: 188px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 188px);height:125px}

    .landingView .slideShow .textcontainer{left: 130px;}
    .landingView .slideShow .image p{font-size:86px}
    .landingView .slideShow .image span{font-size:112px}
    .landingView .slideShow .image:after{width: calc(100% - 350px);}
}

@media screen and (min-width:1440px) and (max-width:1535px) {
       .landingView .slideShow .image img{width: 600px;left: 155px;}
    .CntrDiv{right:120px;width:575px}
     .quizDes:before{height:94%}

    .PlayerPattern{padding:30px 120px}
    .PlayerPattern .ttl{font-size:40px}
    .paddingBottom{min-height: 710px;}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((188px* 66.57) / 100);width: 188px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 188px);height:125px}

    .quizDes label{font-size:40px}
    .quizDes p{font-size:22px}
    
    .landingView .slideShow .textcontainer{left: 142px;    width: 561px;}
    .landingView .slideShow .image p{font-size:75px}
    .landingView .slideShow .image span{font-size:96px}
    .landingView .slideShow .image:after{width: calc(100% - 370px);}


}

@media screen and (min-width:1360px) and (max-width:1439px) {
    .paddingBottom{min-height:578px}
   .landingView .slideShow .image img{width: 570px;left: 155px;}
    .CntrDiv{right:120px;width:526px}
    .PlayerPattern{padding:30px 120px}
    .PlayerPattern .ttl{font-size:38px}
    .PlayerPattern .pattern2 .desc p{font-size:16px}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important;min-height:unset}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((175px* 66.57) / 100);width: 175px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 175px);height:116px}

    .quizDes label{font-size:38px}
    .quizDes p{font-size:20px}
    .PlayerPattern .pattern1 ul li .desc p{height:81px}

      .landingView .slideShow .textcontainer{left: 188px;    width: 561px;}
    .landingView .slideShow .image p{font-size:72px}
    .landingView .slideShow .image span{font-size:92px}
    .landingView .slideShow .image:after{width: calc(100% - 300px);}
}

@media screen and (min-width:1280px) and (max-width:1359px) {
    .paddingBottom{min-height:610px}
   .landingView .slideShow .image img{width: 555px;left: 145px;}
    .CntrDiv{right:80px;width:526px}
    .PlayerPattern{padding:30px 80px}
    .PlayerPattern .ttl{font-size:35px}
    .PlayerPattern .pattern2 .desc p{font-size:16px}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important;min-height:unset}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px;}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((175px* 66.57) / 100);width: 175px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 175px);height:116px}

     .PlayerPattern .pattern1 ul li{width:calc((100% - 60.1px) / 4)}
    .PlayerPattern .pattern1 ul li:nth-of-type(3n){margin-left:20px}
    .PlayerPattern .pattern1 ul li:nth-of-type(4n){margin-left:0}

    .quizDes label{font-size:35px}
    .quizDes p{font-size:20px}

        .PlayerPattern .pattern1 ul li .desc p{height:81px}

             .landingView .slideShow .textcontainer{left: 195px;    width: 450px;}
    .landingView .slideShow .image p{font-size:60px}
    .landingView .slideShow .image span{font-size:77px}
    .landingView .slideShow .image:after{width: calc(100% - 315px);}
}

@media screen and (min-width:1152px) and (max-width:1279px) {
    .paddingBottom{min-height:578px}
   .landingView .slideShow .image img{width: 465px;left: 125px;}
    .CntrDiv{right:40px;width:425px}
    .PlayerPattern{padding:30px 40px}
    .PlayerPattern .ttl{font-size:35px}
    .PlayerPattern .pattern2 .desc p{font-size:16px}

    .PlayerPagebutton{width:210px;height:50px;line-height:50px}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important;min-height:unset}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px;}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((165px * 66.57) / 100);width: 165px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 165px);height:109px}

     .PlayerPattern .pattern1 ul li{width:calc((100% - 60.1px) / 4)}
    .PlayerPattern .pattern1 ul li:nth-of-type(3n){margin-left:20px}
    .PlayerPattern .pattern1 ul li:nth-of-type(4n){margin-left:0}

    .quizDes label{font-size:35px}
    .quizDes p{font-size:16px}

        .PlayerPattern .pattern1 ul li .desc p{height:81px}

         .landingView .slideShow .textcontainer{left: 162px;    width: 392px;}
    .landingView .slideShow .image p{font-size:52px}
    .landingView .slideShow .image span{font-size:67px}
    .landingView .slideShow .image:after{width: calc(100% - 300px);}

}

@media screen and (min-width:1024px) and (max-width:1151px) {
        .paddingBottom{min-height:578px}
   .landingView .slideShow .image img{width: 385px;left: 125px;}
    .CntrDiv{right:30px;width:335px}
    .PlayerPattern{padding:30px 30px}
    .PlayerPattern .ttl{font-size:32px}
    .PlayerPattern .pattern2 .desc p{font-size:15px;padding:10px}

    .PlayerPagebutton{width:210px;height:50px;line-height:50px}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important;min-height:unset}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px;}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((145px * 66.57) / 100);width: 145px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 145px);height:96px}

     .PlayerPattern .pattern1 ul li{width:calc((100% - 60.1px) / 4)}
    .PlayerPattern .pattern1 ul li:nth-of-type(3n){margin-left:20px}
    .PlayerPattern .pattern1 ul li:nth-of-type(4n){margin-left:0}

    .quizDes label{font-size:32px}
    .quizDes p{font-size:15px}

        .PlayerPattern .pattern1 ul li .desc p{height:81px}

              .landingView .slideShow .textcontainer{left: 40px;    width: 392px;}
    .landingView .slideShow .image p{font-size:52px}
    .landingView .slideShow .image span{font-size:67px}
    .landingView .slideShow .image:after{width: calc(100% - 300px);}
}

@media  screen and (min-width:768px) and  (max-width: 1023px) {
   .paddingBottom{min-height:578px}
   .landingView .slideShow .image img{width: 385px;left: 50%;top:auto;bottom:30px;transform:translateX(-50%)}
   .landingView .slideShow .image:after{        width: 100%; height: 100%; bottom: 0; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.10) 100%);}

    .CntrDiv{right: auto;width: 100%;position: relative;top: auto;transform: none;padding: 30px;}

    .PlayerPattern{padding:30px 30px}
    .PlayerPattern .ttl{font-size:32px}
    .PlayerPattern .pattern2 .desc p{font-size:15px;padding:10px}

    .PlayerPagebutton{width:210px;height:50px;line-height:50px;float:none}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important;min-height:unset}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}



    .PlayerPattern .pattern2 ul li{margin-bottom:20px;width:100%;margin-right:0}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((145px * 66.57) / 100);width: 145px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 145px);height:96px}
    .PlayerPattern .pattern2 ul li:first-child{width:100%;margin-bottom:20px}
    .PlayerPattern .pattern2 ul li:first-child a .imageCntnr {padding-bottom:66.57%}
    .PlayerPattern .pattern1 ul li{height:auto;width:100%}
    .PlayerPattern .pattern1 ul li:first-child{width:100%}
   .PlayerPattern  .pattern1 ul li .desc{    background: none; margin-top: 0;}
   .PlayerPattern .pattern2 ul li .secName{right:47px}

     .quizDes {height:auto!important}
    .quizDes:after {content: '';background: url(../Images/OmarMarmosh/omarImgsecond.png) center bottom no-repeat;display: inline-block;float:right;position: relative;width: 100%;height: 275px;z-index: 0;pointer-events: none;background-size: auto 100%;}
    .quizDes:before{display:none}    
    .quizDes label{font-size:24px;text-align:center}
    .quizDes p{font-size:16px;text-align:center;margin-bottom:50px}

    .landingView .slideShow .textcontainer{top:auto;bottom:20px;left:50%;transform:translateX(-50%);width:422px;}
     .landingView .slideShow .image p{font-size:56px}
    .landingView .slideShow .image span{font-size:72px}
/*    .landingView .slideShow .image:before{background-image:url(../Images/OmarMarmosh/Mobilebk.jpg) ;background-size:auto 100%;background-repeat:no-repeat}
*/}


@media screen and (min-width: 320px) and (max-width: 767px) {
   .paddingBottom{min-height:unset}
   .landingView .slideShow .image img{width: 290px;left: 50%;top:auto;bottom:30px;transform:translateX(-50%)}
   .landingView .slideShow .image:after{        width: 100%; height: 100%; bottom: 0; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.10) 100%);}
   .landingView .slideShow .image:before{background-image: url(../Images/OmarMarmosh/Mobilebk.webp);background-size:100% auto;background-repeat:no-repeat;background-position: center;}

   
   .bkpattern { background-image: url(../Images/OmarMarmosh/VideosbkMobile.webp);padding:30px 0!important }

    .landingView .slideShow .textcontainer{top:auto;bottom:20px;left:50%;transform:translateX(-50%);width:316px;}
     .landingView .slideShow .image p{font-size:42px}
    .landingView .slideShow .image span{font-size:54px}

    .CntrDiv{right: auto;width: 100%;position: relative;top: auto;transform: none;padding: 30px;}

    .quizDes {height:auto!important}
    .quizDes:after {content: '';background: url(../Images/OmarMarmosh/omarImgsecond.png) center bottom no-repeat;display: inline-block;float:right;position: relative;width: 100%;height: 275px;z-index: 0;pointer-events: none;background-size: auto 100%;}
    .quizDes:before{display:none}    
    .quizDes label{font-size:24px;text-align:center}
    .quizDes p{font-size:16px;text-align:center;margin-bottom:50px}

    .PlayerPattern{padding:30px 20px}
    .PlayerPattern .ttl{font-size:24px}
    .PlayerPattern .pattern2 .desc p{font-size:12px;padding:10px;color:#fff}


    .PlayerPagebutton{width: calc(100% - 40px);margin:0 20px;height: 50px;line-height: 50px;font-size: 16px;}

    .PlayerPatternCustom{padding-bottom:unset;height:auto!important;min-height:unset}
    .PlayerPatternCustom .PlayerPagebutton{margin-bottom:30px}

    .PlayerPattern .pattern1 ul li a .imageCntnr{width:100%;padding-bottom:66.57%}
    .PlayerPattern .pattern1 ul li .desc{width:100%; background: none;margin-top:0;padding:20px 10px}
    .PlayerPattern .pattern1 ul li .desc p{padding:0;height:44px;line-height:1.8}

    .PlayerPattern .pattern1 ul li{height:auto;width:100%;margin-bottom:20px}
    .PlayerPattern .pattern1 ul li:first-child{width:100%;}

    .PlayerPattern .pattern2 ul li{margin-bottom:20px;width:calc(100% - 40px);margin-right:20px;background:unset}
    .PlayerPattern .pattern2 ul li a .imageCntnr{padding-bottom: calc((120px * 66.57) / 100);width: 120px;}
    .PlayerPattern .pattern2 .desc{width:calc(100% - 120px);height:80px}
    .PlayerPattern .pattern2 ul li:first-child{width:100%;margin-bottom:20px;margin-right:0}
    .PlayerPattern .pattern2 ul li:first-child a .imageCntnr {padding-bottom:97%}

   .PlayerPattern .pattern2 ul li .secName{right:47px;width:30px;height:30px;border:2px solid #fff}
   .PlayerPattern .pattern2 ul li .secName .icon{width:28px;height:28px}
   .PlayerPattern .pattern2 ul li.video .secName .icon:before{font-size:12px}
   .PlayerPattern .pattern2 ul li:first-child .secName{width:60px;height:60px;border:5px solid #fff}
   .PlayerPattern .pattern2 ul li:first-child.video .secName .icon:before{font-size:22px}

   .PlayerPattern .pattern2 ul li:first-child .desc p{font-size:16px}

}









