.wrapper-main-menu { background-color:#fff; width: 100%; height: 111px; } .wrapper-main-menu .wrapper-menu-01 { width: 1280px; height: 60px; margin: 0 auto; position: relative; } .wrapper-main-menu .wrapper-menu-01 .logo-plookpanya { /*background: url(../images/img-main-menu/logo-plookpanya.png) no-repeat;*/ /*width: 107px;*/ /*height: 41px;*/ float: left; margin-left: 39px; margin-right: 19px; margin-top: 9px; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .line-height-styles-01 { width: 1px; height: 46px; float: right; background-color: #dddddd; margin-top: 7px; } .wrapper-main-menu .wrapper-menu-01 .line-height-styles-02 { width: 1px; height: 46px; float: left; background-color: #dddddd; margin-top: 7px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon { width: auto; height: 42px; float: left; margin-top: 10px; margin-left: 19px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-tv { background: url(../images/img-main-menu/icon-menu-top.png) no-repeat; width: 31px; height: 42px; background-position: 0px; float: left; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-website { background: url(../images/img-main-menu/icon-menu-top.png) no-repeat; width: 40px; height: 42px; background-position: -56px; float: left; margin-left: 25px; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-magazine { background: url(../images/img-main-menu/icon-menu-top.png) no-repeat; width: 47px; height: 42px; background-position: -112px; float: left; margin-left: 16px; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-radio { background: url(../images/img-main-menu/icon-menu-top.png) no-repeat; width: 31px; height: 42px; background-position: -180px; float: left; margin-left: 21px; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-mobileApp { background: url(../images/img-main-menu/icon-menu-top.png) no-repeat; width: 56px; height: 42px; background-position: -228px; float: left; margin-left: 17px; cursor: pointer; } .top-menu-icon{ margin-left: 15px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login { width: 155px; height: 30px; margin-top: 15px; float: right; margin-right: 20px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login .icon-img-user { width: 30px; height: 30px; border-radius: 100%; /*////////////*/ background-color: white; overflow: hidden; float: left; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login .icon-img-user img { width: 30px; height: 30px; border-radius: 100%; overflow: hidden; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login .btn-login { width: 36px; font-family: 'TrueTextB'; font-size: 22px; text-transform: capitalize; color: #888888; line-height: 30px; cursor: pointer; float: left; margin-left: 10px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login .font-line-height { width: 2px; font-family: 'TrueTextB'; font-size: 24px; text-transform: capitalize; color: #888888; line-height: 30px; float: left; margin-left: 12px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login .btn-register { width: 54px; font-family: 'TrueTextB'; font-size: 22px; text-transform: capitalize; color: #888888; line-height: 30px; cursor: pointer; float: left; margin-left: 10px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social { width: 102px; height: 30px; float: right; margin-left: 20px; margin-right: 20px; margin-top: 15px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social .menu-icon-facebook { background: url(../images/img-main-menu/facebook-circle.svg) no-repeat; width: 30px; height: 30px; /*background-size: contain;*/ /*background-position: 0px;*/ float: left; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social .menu-icon-facebook:hover { background: url(../images/img-main-menu/facebook-circle-hover.svg) no-repeat; width: 30px; height: 30px; /*background-position: 0px;*/ } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social .menu-icon-twitter { background: url(../images/img-main-menu/icon-social.png) no-repeat; width: 30px; height: 30px; background-position: -36px; float: left; cursor: pointer; margin-left: 6px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social .menu-icon-twitter:hover { background: url(../images/img-main-menu/icon-social-hover.png) no-repeat; width: 30px; height: 30px; background-position: -36px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social .menu-icon-line { background: url(../images/img-main-menu/icon-social.png) no-repeat; width: 30px; height: 30px; background-position: -72px; float: left; cursor: pointer; margin-left: 6px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social .menu-icon-line:hover { background: url(../images/img-main-menu/icon-social-hover.png) no-repeat; width: 30px; height: 30px; background-position: -72px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-contact { width: 102px; height: 30px; float: right; margin-left: 20px; margin-right: 20px; margin-top: 15px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-contact .menu-icon-contact { background: url(../images/img-main-menu/icon-contact.png) no-repeat; width: 31px; height: 30px; float: left; cursor: pointer; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-contact .txt-menu-contact { width: 61px; font-family: 'TrueTextB'; font-size: 18px; text-transform: capitalize; color: #888888; line-height: 30px; cursor: pointer; float: left; margin-left: 10px; } .wrapper-main-menu .solid-menu-01 { width: 100%; height: 10px; background-color: #dddddd; } .wrapper-main-menu .wrapper-menu-02 { width: 1280px; height: 40px; margin: 0 auto; font-family: 'trueplookpanya-Regular'; letter-spacing: 0.5px; } .wrapper-main-menu .wrapper-menu-02 .line-height-styles-02 { width: 1px; height: 24px; float: left; background-color: transparent; margin-top: 8px; } .wrapper-main-menu .wrapper-menu-02 .menu-home { width: 47px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-left: 113px; margin-right: 27px; text-transform: capitalize; cursor: pointer; } .wrapper-main-menu .wrapper-menu-02 .menu-home:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-education { /*width: 135px;*/ width: 125px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 28px; margin-right: 27px;*/ text-transform: capitalize; text-align: center; cursor: pointer; } .wrapper-main-menu .wrapper-menu-02 .menu-education:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-knowledge { /*width: 147px;*/ width: 137px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 28px; margin-right: 29px;*/ text-transform: capitalize; cursor: pointer; text-align: center; } .wrapper-main-menu .wrapper-menu-02 .menu-knowledge:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-friends { width: 112px; height: 44px; font-size: 28px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 26px; margin-right: 25px;*/ text-transform: capitalize; cursor: pointer; text-align: center; } .wrapper-main-menu .wrapper-menu-02 .menu-friends:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-tv { /*width: 74px;*/ width: 70px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 23px; margin-right: 28px;*/ text-transform: capitalize; cursor: pointer; text-align: center; } .wrapper-main-menu .wrapper-menu-02 .menu-tv:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-precept { width: 99px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 27px; margin-right: 27px;*/ text-transform: capitalize; cursor: pointer; text-align: center; } .wrapper-main-menu .wrapper-menu-02 .menu-precept:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-activities { width: 115px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 27px; margin-right: 27px;*/ text-transform: capitalize; cursor: pointer; text-align: center; } .wrapper-main-menu .wrapper-menu-02 .menu-activities:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-project { width: 214px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 26px; margin-right: 25px;*/ text-transform: capitalize; cursor: pointer; text-align: center; } .wrapper-main-menu .wrapper-menu-02 .menu-project:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-blog { width: 36px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; margin-left: 20px; margin-right: 20px; text-transform: capitalize; cursor: pointer; } .wrapper-main-menu .wrapper-menu-02 .menu-blog:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-dogood { width: 75px; height: 44px; font-size: 26px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; margin-left: 18px; text-transform: capitalize; cursor: pointer; } .wrapper-main-menu .wrapper-menu-02 .menu-dogood:hover { color: #e2231a; } .wrapper-main-menu .wrapper-menu-02 .menu-classroom { width: 125px; height: 44px; font-size: 24px; font-weight: 700; line-height: 40px; color: #333333; float: left; margin-top: 0px; /*margin-left: 18px;*/ text-transform: capitalize; text-align: center; cursor: pointer; } .wrapper-main-menu .wrapper-menu-02 .menu-classroom:hover { color: #e2231a; } .wrapper-main-menu .solid-menu-02 { width: 100%; height: 4px; background-color: #ffffff; border-bottom: 1px solid #ddd; /*height: 1px;*/ /*background-color: #dddddd;*/ } .test-box { width: 100%; height: 3000px; background-color: #57f9ff; } .wrapper-menu-search { width: 15px; height: 15px; } .wrapper-menu-search .menu-icon-search { background: url(../images/img-main-menu/icon-search.png) no-repeat; width: 15px; height: 15px; float: right; cursor: pointer; background-color: #FFFFFF; } .menu-burger { background: url(../images/img-main-menu/menu-burger.png) no-repeat; width: 34px; height: 24px; margin-top: 18px; margin-left: 50px; float: left; cursor: pointer; } /**** search ****/ .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-search input.txtsearch:first-child { -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border-radius: 30px; width: 30px; height: 30px; font-size: 0.9em; padding: 6px 12px; margin-right: 20px; position: relative; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-search { float: right; position: relative; width: auto; margin-left: 0px; margin-top: 14px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-search button.btn-default[type=submit] { border: 0; background-color: transparent; position: absolute; top: 1px; right: 20px; color: #CCC; z-index: 3; width: 20px; height: 20px; border-radius: 50%; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-search button.btn-default[type=reset] { border: 0; background-color: transparent; position: relative; float: right; color: #CCC; z-index: 3; display: none; font-family: 'TrueTextB'; font-size: 22px; padding: 0; right: 10px; top: 5px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-search .menu-icon-search { background: url(../images/img-main-menu/icon-search.png) no-repeat; background-color: #FFFFFF; width: 15px; height: 15px; cursor: pointer; position: relative; right: -4px; } /******* scroll menu ********/ .wrapper-menu-02-styles02 { height: 60px; position: relative; top: 3px; } .menu-fixed-top { display: none; } .bullet { /*background: url(../images/img-main-menu/bullet.png) no-repeat;*/ background: transparent; width: 3px; height: 4px; float: left; margin-top: 29px; } .menu-fixed-top .wrapper-menu-02 .menu-home { width: 47px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 20px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-education { width: 85px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-classroom { width: 85px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-knowledge { width: 95px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-friends { width: 65px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-tv { width: 23px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-precept { width: 50px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-activities { width: 65px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-project { width: 173px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 .menu-blog { width: 36px; height: 63px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; margin-top: 0px; margin-left: 7px; margin-right: 7px; text-transform: capitalize; cursor: pointer; } .menu-fixed-top .wrapper-menu-02 { float: left; width: auto; } /*////close-menu////*/ .close-menu-all { background: url(../images/img-main-menu/close.png) no-repeat; width: 30px; height: 30px; margin-top: 15px; float: right; display: none; cursor: pointer; } /*////content-menu-dropdown////*/ /*////content-menu-dropdown-education////*/ .wrapper-menu-education { width: 100%; background-color: #dddddd; position: absolute; /*height: 400px;*/ padding-bottom: 20px; display: none; margin-top: 0; z-index: 999; } .wrapper-menu-education .detail-menu-education { width: 1250px; /*height: 400px;*/ position: relative; margin: 0 auto; } .wrapper-menu-education .detail-menu-education .block-menu-01 { width: 200px; height: auto; position: relative; left: 0; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-education .detail-menu-education .block-menu-01 .menu-red-style-normal { font-family: 'TrueTextB'; font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-education .detail-menu-education .block-menu-02 .menu-red-style-normal { font-family: 'TrueTextB'; font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-education .detail-menu-education .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-education .detail-menu-education .block-menu-03 .menu-red-style-normal { font-family: 'TrueTextB'; /*font-size: 21px;*/ font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-education .detail-menu-education .block-menu-04 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-education .detail-menu-education .block-menu-04 .menu-red-style-normal { font-family: 'TrueTextB'; font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-04 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-04 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-education .detail-menu-education .block-menu-05 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-education .detail-menu-education .block-menu-05 .menu-red-style-normal { font-family: 'TrueTextB'; font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-05 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-05 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-education .detail-menu-education .block-menu-06 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-education .detail-menu-education .block-menu-06 .menu-red-style-normal { font-family: 'TrueTextB'; font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-06 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-education .detail-menu-education .block-menu-06 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-education////*/ /*////content-menu-dropdown-knowledge////*/ .wrapper-menu-knowledge { width: 100%; background-color: #dddddd; position: absolute; height: 150px; display: none; margin-top: 0; z-index: 2; } .wrapper-menu-knowledge .detail-menu-knowledge { width: 1250px; /*height: 150px;*/ padding-bottom: 20px; position: relative; margin: 0 auto; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-01 { width: 200px; height: auto; position: relative; left: 0; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-01 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-01 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-04 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-04 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-04 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-05 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-05 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-05 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-06 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-06 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-06 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-knowledge////*/ /*////content-menu-dropdown-friends////*/ .wrapper-menu-friends { width: 100%; background-color: #dddddd; position: absolute; /*height: 89px;*/ padding-bottom: 20px; display: none; margin-top: 0; z-index: 1; } .wrapper-menu-friends .detail-menu-friends { width: 830px; /*height: 89px;*/ padding-bottom: 20px; position: relative; margin: 0 auto; } .wrapper-menu-friends .detail-menu-friends .block-menu-01 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-friends .detail-menu-friends .block-menu-01 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-friends .detail-menu-friends .block-menu-01 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-friends .detail-menu-friends .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-friends .detail-menu-friends .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-friends .detail-menu-friends .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-friends .detail-menu-friends .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-friends .detail-menu-friends .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-friends .detail-menu-friends .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-friends .detail-menu-friends .block-menu-04 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-friends .detail-menu-friends .block-menu-04 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-friends .detail-menu-friends .block-menu-04 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-friends////*/ /*////content-menu-dropdown-tv////*/ .wrapper-menu-tv { width: 100%; background-color: #dddddd; position: absolute; height: 89px; display: none; margin-top: 0; z-index: 1; } .wrapper-menu-tv .detail-menu-tv { width: 620px; height: 89px; position: relative; margin: 0 auto; } .wrapper-menu-tv .detail-menu-tv .block-menu-01 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-tv .detail-menu-tv .block-menu-01 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-tv .detail-menu-tv .block-menu-01 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-tv .detail-menu-tv .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-tv .detail-menu-tv .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-tv .detail-menu-tv .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-tv .detail-menu-tv .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-tv .detail-menu-tv .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-tv .detail-menu-tv .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-tv////*/ /*////content-menu-dropdown-precept////*/ .wrapper-menu-precept { width: 100%; background-color: #dddddd; position: absolute; height: 89px; display: none; margin-top: 0; z-index: 1; } .wrapper-menu-precept .detail-menu-precept { width: 1250px; height: 89px; position: relative; margin: 0 auto; } .wrapper-menu-precept .detail-menu-precept .block-menu-01 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-precept .detail-menu-precept .block-menu-01 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-precept .detail-menu-precept .block-menu-01 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-precept .detail-menu-precept .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-precept .detail-menu-precept .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-precept .detail-menu-precept .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-precept .detail-menu-precept .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-precept .detail-menu-precept .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-precept .detail-menu-precept .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-precept .detail-menu-precept .block-menu-04 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-precept .detail-menu-precept .block-menu-04 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-precept .detail-menu-precept .block-menu-04 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-precept .detail-menu-precept .block-menu-05 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-precept .detail-menu-precept .block-menu-05 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-precept .detail-menu-precept .block-menu-05 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-precept .detail-menu-precept .block-menu-06 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-precept .detail-menu-precept .block-menu-06 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-precept .detail-menu-precept .block-menu-06 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-precept////*/ /*////content-menu-dropdown-activities////*/ .wrapper-menu-activities { width: 100%; background-color: #dddddd; position: absolute; height: 89px; display: none; margin-top: 0; z-index: 1; } .wrapper-menu-activities .detail-menu-activities { width: 1250px; height: 89px; position: relative; margin: 0 auto; } .wrapper-menu-activities .detail-menu-activities .block-menu-01 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-activities .detail-menu-activities .block-menu-01 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-activities .detail-menu-activities .block-menu-01 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-activities .detail-menu-activities .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-activities .detail-menu-activities .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-activities .detail-menu-activities .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-activities .detail-menu-activities .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-activities .detail-menu-activities .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-activities .detail-menu-activities .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-activities .detail-menu-activities .block-menu-04 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-activities .detail-menu-activities .block-menu-04 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-activities .detail-menu-activities .block-menu-04 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-activities .detail-menu-activities .block-menu-05 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-activities .detail-menu-activities .block-menu-05 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-activities .detail-menu-activities .block-menu-05 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-activities .detail-menu-activities .block-menu-06 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-activities .detail-menu-activities .block-menu-06 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 21px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-activities .detail-menu-activities .block-menu-06 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-activities////*/ /*////content-menu-dropdown-project////*/ .wrapper-menu-project { width: 100%; background-color: #dddddd; position: absolute; height: 89px; display: none; margin-top: 0; z-index: 1; } .wrapper-menu-project .detail-menu-project { width: 620px; height: 89px; position: relative; margin: 0 auto; } .wrapper-menu-project .detail-menu-project .block-menu-01 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-project .detail-menu-project .block-menu-01 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-project .detail-menu-project .block-menu-01 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-project .detail-menu-project .block-menu-02 { width: 200px; height: auto; float: left; margin-top: 16px; margin-right: 10px; } .wrapper-menu-project .detail-menu-project .block-menu-02 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-project .detail-menu-project .block-menu-02 .menu-red-style-gray-color:hover { color: #FF0004; } .wrapper-menu-project .detail-menu-project .block-menu-03 { width: 200px; height: auto; float: left; margin-top: 16px; } .wrapper-menu-project .detail-menu-project .block-menu-03 .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-menu-project .detail-menu-project .block-menu-03 .menu-red-style-gray-color:hover { color: #FF0004; } /*////end-content-menu-dropdown-project////*/ .menu-all { display: none; width: 80px; height: 60px; font-size: 28px; font-weight: 700; line-height: 60px; color: #333333; float: left; text-transform: capitalize; position: relative; left: 25px; } .horizontal-line-style-01 { width: 200px; height: 2px; background-color: #e8e8e8; } .horizontal-line-style-02 { width: 200px; height: 2px; background-color: #d4d4d4; } .horizontal-line-style-03 { width: 100%; height: 2px; background-color: #e0807b; margin-top: -5px; } /*////wrapper-all-menu////*/ .text-header-all-menu { font-family: 'trueplookpanya-Regular'; font-size: 26px; /*21*/ font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; } .menu-red-style-normal { font-family: 'TrueTextB'; font-size: 18px; font-weight: 700; color: #e2231a; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .menu-red-style-gray-color { font-family: 'TrueTextB'; font-size: 18px; color: #333333; letter-spacing: 0.4px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; } .wrapper-all-menu { width: 100%; background-color: #dddddd; /*height: 1054px;*/ padding-bottom: 30px; display: none; position: absolute; } .wrapper-all-menu .content-all-menu { width: 1250px; /*min-height: 1254px;*/ height: auto; position: relative; margin: 0 auto; /*overflow-y: auto;*/ } @media (max-width: 1024px) { .wrapper-all-menu .content-all-menu { min-height: 1200px; } } @media (max-width: 736px) { .wrapper-all-menu .content-all-menu { min-height: 1550px; } } @media (max-width: 667px) { .wrapper-all-menu .content-all-menu { min-height: 1550px; } } .wrapper-all-menu .content-all-menu .all-menu-row-01 { width: 1250px; /*height: 411px;*/ margin-top: 15px; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01 { width: 1040px; /*height: 411px;*/ padding-bottom: 20px; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01 .block-menu-01 { width: 200px; height: auto; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01 .block-menu-02 { width: 200px; height: auto; float: left; margin-right: 0px; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-02 { width: 200px; /*height: 411px;*/ padding-bottom: 20px; float: left; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-02 .block-menu-01 { width: 200px; height: auto; } .wrapper-all-menu .content-all-menu .all-menu-row-02 { width: 1250px; /*height: 411px;*/ padding-bottom: 20px; margin-top: 15px; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-01 { width: 410px; /*height: 407px;*/ padding-bottom: 20px; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-01 .block-menu-01 { width: 200px; height: auto; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-01 .block-menu-02 { width: 200px; height: auto; float: left; margin-right: 0px; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-02 { width: 200px; /*height: 411px;*/ padding-bottom: 20px; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-02 .block-menu-01 { width: 200px; height: auto; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-03 { width: 200px; /*height: 411px;*/ padding-bottom: 20px; float: left; margin-right: 0px; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-03 .block-menu-01 { width: 200px; height: auto; } .wrapper-all-menu .content-all-menu .all-menu-row-03 { width: 1250px; /*height: 197px;*/ padding-bottom: 20px; margin-top: 15px; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-02 { width: 200px; /*height: 197px;*/ padding-bottom: 20px; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-02 .block-menu-01 { width: 200px; height: auto; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-03 { width: 200px; /*height: 197px;*/ padding-bottom: 20px; float: left; margin-right: 10px; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-03 .block-menu-01 { width: 200px; height: auto; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-04 { width: 200px; /*height: 197px;*/ padding-bottom: 20px; float: left; margin-right: 0px; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-04 .block-menu-01 { width: 200px; height: auto; } /*////end-wrapper-all-menu////*/ .wrapper-all-menu { /*height: 720px;*/ overflow: scroll; overflow-x: hidden; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.28); } .menu-fixed-top { height: 61px; background-color: #FFFFFF; } .wrapper-all-menu-responsive-width-640 { display: none; } /* ====================================================================== */ /* MENU ADDITIONAL CODE */ .group-menu-container { position: absolute; top: 0; right: -25px; width: 530px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-contact { display: block; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social { display: block; } .wrapper-menu-contact, .wrapper-menu-social, .contact-line, .social-line { display: block !important; } .showSearchBar .wrapper-menu-contact, .showSearchBar .wrapper-menu-social, .showSearchBar .contact-line, .showSearchBar .social-line { display: none !important; } .wrapper-main-menu.firstmenu .wrapper-menu-02 { max-width: 1050px; width: 100%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-home { margin-left: 0; } .wrapper-main-menu .wrapper-menu-01 .logo-plookpanya { margin-left: 20px; } @media (max-width: 1280px) { .wrapper-main-menu .wrapper-menu-01 { width: 100%; max-width: 1280px; } .wrapper-all-menu .content-all-menu { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-01, .wrapper-all-menu .content-all-menu .all-menu-row-02, .wrapper-all-menu .content-all-menu .all-menu-row-03 { width: 100%; clear: both; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01, .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-02 { width: auto; height: auto; padding-left: 5px; padding-right: 5px; margin-right: 0; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01 { width: 83%; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-02 { width: 17%; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01 .block-menu-01, .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-01 .block-menu-02 { width: 20%; margin-right: 0; padding-left: 5px; padding-right: 5px; } .wrapper-all-menu .content-all-menu .all-menu-row-01 .wrapper-menu-block-01-style-02 .block-menu-01 { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-01 { width: 33.32%; height: auto; padding-left: 5px; padding-right: 5px; margin: 0; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-01 .block-menu-01, .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-01 .block-menu-02 { width: 50%; padding: 0 5px; margin: 0; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-02, .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-03 { width: 16.66%; height: auto; padding-left: 5px; padding-right: 5px; margin: 0; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-02 .block-menu-01 { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-02 .wrapper-menu-block-01-style-03 .block-menu-01 { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-03 { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-02, .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-03, .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-04 { width: 16.66%; padding: 0 5px; margin-right: 0; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-02 .block-menu-01 { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-03 .block-menu-01 { width: 100%; } .wrapper-all-menu .content-all-menu .all-menu-row-03 .wrapper-menu-block-01-style-04 .block-menu-01 { width: 100%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-home, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-education, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-knowledge, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-friends, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-tv, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-precept, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-activities, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-project, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-blog, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-dogood { width: 8%; margin: 0; text-align: center; font-size: 24px; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-education { width: 12%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-knowledge { width: 12%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-friends { width: 11%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-project { width: 23%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-tv { width: 5%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-precept { width: 8%; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-activities { width: 10%; } .wrapper-menu-education .detail-menu-education, .wrapper-menu-knowledge .detail-menu-knowledge, .wrapper-menu-friends .detail-menu-friends, .wrapper-menu-tv .detail-menu-tv, .wrapper-menu-precept .detail-menu-precept, .wrapper-menu-activities .detail-menu-activities, .wrapper-menu-project .detail-menu-project { width: 100%; max-width: 1280px; height: auto; } .wrapper-menu-education .detail-menu-education .block-menu-01, .wrapper-menu-education .detail-menu-education .block-menu-02, .wrapper-menu-education .detail-menu-education .block-menu-03, .wrapper-menu-education .detail-menu-education .block-menu-04, .wrapper-menu-education .detail-menu-education .block-menu-05, .wrapper-menu-education .detail-menu-education .block-menu-06 { width: 16%; padding: 10px; margin-right: 0px; } .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-01, .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-02, .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-03, .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-04, .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-05, .wrapper-menu-knowledge .detail-menu-knowledge .block-menu-06 { width: 16%; padding: 10px; margin-right: 0px; } .wrapper-menu-friends .detail-menu-friends .block-menu-01, .wrapper-menu-friends .detail-menu-friends .block-menu-02, .wrapper-menu-friends .detail-menu-friends .block-menu-03, .wrapper-menu-friends .detail-menu-friends .block-menu-04 { width: 25%; padding: 10px; margin-right: 0px; } .wrapper-menu-tv .detail-menu-tv .block-menu-01, .wrapper-menu-tv .detail-menu-tv .block-menu-02, .wrapper-menu-tv .detail-menu-tv .block-menu-03 { width: 33%; padding: 10px; margin-right: 0px; } .wrapper-menu-precept .detail-menu-precept .block-menu-01, .wrapper-menu-precept .detail-menu-precept .block-menu-02, .wrapper-menu-precept .detail-menu-precept .block-menu-03, .wrapper-menu-precept .detail-menu-precept .block-menu-04, .wrapper-menu-precept .detail-menu-precept .block-menu-05, .wrapper-menu-precept .detail-menu-precept .block-menu-06 { width: 16%; padding: 10px; margin-right: 0px; } .wrapper-menu-activities .detail-menu-activities .block-menu-01, .wrapper-menu-activities .detail-menu-activities .block-menu-02, .wrapper-menu-activities .detail-menu-activities .block-menu-03, .wrapper-menu-activities .detail-menu-activities .block-menu-04, .wrapper-menu-activities .detail-menu-activities .block-menu-05, .wrapper-menu-activities .detail-menu-activities .block-menu-06 { width: 16%; padding: 10px; margin-right: 0px; } .wrapper-menu-project .detail-menu-project .block-menu-01, .wrapper-menu-project .detail-menu-project .block-menu-02, .wrapper-menu-project .detail-menu-project .block-menu-03 { width: 33%; padding: 10px; margin-right: 0px; } .horizontal-line-style-01 { width: 100%; } .horizontal-line-style-02 { width: 100%; } .wrapper-menu-education, .wrapper-menu-knowledge, .wrapper-menu-friends, .wrapper-menu-tv, .wrapper-menu-precept, .wrapper-menu-activities, .wrapper-menu-project { height: auto; } } @media (max-width: 1270px) { .menu-group.showSearchBar { display: none; } } /*================*/ .hide-on-small { display: none; } /*================*/ @media (max-width: 1100px) { .showSearchBar .wrapper-menu-icon { display: none !important; } .wrapper-menu-02.showSearchBar { display: none !important; } } @media (max-width: 1080px) { .menu-fixed-top .wrapper-menu-02 .menu-home, .menu-fixed-top .wrapper-menu-02 .menu-education, .menu-fixed-top .wrapper-menu-02 .menu-knowledge, .menu-fixed-top .wrapper-menu-02 .menu-friends, .menu-fixed-top .wrapper-menu-02 .menu-tv, .menu-fixed-top .wrapper-menu-02 .menu-precept, .menu-fixed-top .wrapper-menu-02 .menu-activities, .menu-fixed-top .wrapper-menu-02 .menu-project, .menu-fixed-top .wrapper-menu-02 .menu-blog, .menu-fixed-top .wrapper-menu-02 .menu-dogood, .menu-fixed-top .wrapper-menu-02 .menu-classroom { font-size: 18px; width: auto; } } @media (max-width: 1020px) { .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-contact { display: none !important; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-social { display: none !important; } .contact-line { display: none !important; } .social-line { display: none !important; } .group-menu-container { width: 240px; } .wrapper-menu-education .detail-menu-education .menu-red-style-normal, .wrapper-menu-education .detail-menu-education .menu-red-style-gray-color { font-size: 18px !important; } .wrapper-menu-knowledge .detail-menu-knowledge .menu-red-style-gray-color { font-size: 18px !important; } .wrapper-menu-friends .detail-menu-friends .menu-red-style-gray-color { font-size: 18px !important; } .wrapper-menu-tv .detail-menu-tv .menu-red-style-gray-color { font-size: 18px !important; } .wrapper-menu-precept .detail-menu-precept .menu-red-style-gray-color { font-size: 18px !important; } .wrapper-menu-activities .detail-menu-activities .menu-red-style-gray-color { font-size: 18px !important; } .wrapper-menu-project .detail-menu-project .menu-red-style-gray-color { font-size: 18px !important; } .menu-red-style-gray-color, .menu-red-style-normal { font-size: 18px; } .text-header-all-menu { font-size: 20px; } .menu-all { font-size: 18px; } } @media (max-width: 944px) { .menu-fixed-top .wrapper-menu-02 { display: none; } } @media (max-width: 800px) { #searchForm .txtsearch { width: 210px !important; } .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-home, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-education, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-knowledge, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-friends, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-tv, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-precept, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-activities, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-project, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-blog, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-dogood, .wrapper-main-menu.firstmenu .wrapper-menu-02 .menu-classroom { font-size: 20px; } .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-home, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-education, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-knowledge, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-friends, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-tv, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-precept, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-activities, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-project, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-blog, .wrapper-main-menu.menu-fixed-top .wrapper-menu-02 .menu-dogood { font-size: 20px; } } @media (max-width: 767px) { .top-menu-icon{ margin-left: 5px; } } @media (max-width: 720px) { .wrapper-menu-icon { margin-left: 8px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-magazine, .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-mobileApp { margin-left: 7px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-website, .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon .menu-icon-radio { margin-left: 10px; } .wrapper-main-menu .wrapper-menu-01 .wrapper-login { margin-right: 10px; } .wrapper-main-menu .wrapper-menu-01 .logo-plookpanya { margin-left: 20px; } .group-menu-01 { left: -15px !important; } .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-icon { margin-left: 10px; } } @media (max-width: 640px) { .menu-fixed-top { display: none !important; } } /* ====================================================================== */ /*////wrapper-all-menu-responsive-width-640////*/ @media (max-width: 640px) { @-webkit-keyframes mymoveL { from { left: 100%; } to { left: 0px; } } @-webkit-keyframes mymoveR { from { left: 0px; } to { left: 100%; display: none; } } /* Standard syntax */ @keyframes mymoveL { from { left: 100%; } to { left: 0px; } } @keyframes mymoveR { from { left: 0px; } to { left: 100%; display: none; } } .firstmenu { display: none; } .wrapper-all-menu-responsive-width-640 { display: block; width: 100%; height: auto; padding: 0; margin: 0; z-index: 2; background-color: #FFFFFF; } #root{height:52px;} .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive { width: 100%; height: 52px; background-color: #ffffff; /*position: fixed;*/ position: absolute; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .line-height-styles-03 { width: 100%; height: 1px; background-color: #dddddd; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive { width: 95%; height: 50px; margin: 0 auto; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .menu-burger-responsive { background: url(../images/img-main-menu-responsive/menu-burger.png) no-repeat; background-size: 22px 12px; width: 22px; height: 12px; position: relative; top: 20px; float: left; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .logo-plookpanya-responsive { background: url(../images/img-main-menu-responsive/logo-plookpanya.png) no-repeat; width: 86px; height: 32px; background-size: 86px 32px; position: absolute; top: 8px; right: 0; left: 0; margin-left: auto; margin-right: auto; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive { width: 92%; height: 50px; position: relative; top: 19px; float: right; z-index: 0; } } @media (max-width: 640px) and (max-width: 580px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive { width: 90%; } } @media (max-width: 640px) and (max-width: 470px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive { width: 88%; } } @media (max-width: 640px) and (max-width: 390px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive { width: 83%; } } @media (max-width: 640px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive .menu-icon-search-responsive2 { background: url(../images/img-main-menu-responsive/icon-search.png) no-repeat; background-size: 30px 30px; width: 30px; height: 30px; float: right; background-color: #FFFFFF; border-radius: 50%; position: relative; left: 12px; top: -25px; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive .menu-icon-search-responsive { background: url(../images/img-main-menu-responsive/icon-search-v2.png) no-repeat; width: 20px; height: 20px; position: relative; left: 6px; top: -27px; background-size: 20px 20px; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive .input-group { float: right; width: 90%; } } @media (max-width: 640px) and (max-width: 470px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive .input-group { width: 93%; } } @media (max-width: 640px) and (max-width: 390px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search-responsive .input-group { width: 100%; } } @media (max-width: 640px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search input.txtsearch:first-child { -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border-radius: 30px; height: 30px; font-size: 18px; font-weight: normal; top: -10px; width: 100%; display: none; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search button.btn-default[type=submit] { border: 0; background-color: transparent; position: absolute; top: 7px; right: 4px; color: #CCC; z-index: 3; width: 50px; height: 50px; border-radius: 50%; } .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search button.btn-default[type=reset] { border: 0; background-color: transparent; position: relative; float: right; z-index: 3; display: none; font-family: 'TrueTextB'; font-size: 18px; color: #231f20; padding: 0; right: 0px; top: -15px; margin-left: 3px; } } @media (max-width: 640px) and (max-width: 470px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search button.btn-default[type=reset] { font-size: 18px; margin-left: 5px; /*top: 3px;*/ } } @media (max-width: 640px) { .dropdown-all { width: 100%; height: auto; overflow: auto; position: relative; background-color: #ffffff; -webkit-animation-timing-function: linear; animation-timing-function: linear; display: none; right: 100%; } .dropdown-all .wrapper-menu-all-responsive-icon { width: 100%; height: 100%; background-color: #FFFFFF; margin-bottom: 100px; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive { width: 100%; height: auto; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .wrapper-img-profile-txt-name { width: 200px; height: 246px; margin: 0 auto; position: relative; top: 20px; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .wrapper-img-profile-txt-name .img-profile-login { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background-color: #FFFFFF; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .wrapper-img-profile-txt-name .img-profile-login img { width: 200px; height: 200px; border-radius: 50%; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .wrapper-img-profile-txt-name .text-name { width: 200px; height: 30px; position: absolute; bottom: 0; font-family: 'TrueTextB'; font-size: 40px; text-align: center; line-height: 30px; color: #231f20; text-transform: capitalize; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-profile { width: 100%; height: 80px; background-color: #f1f1f2; margin-top: 35px; position: relative; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-profile .icon-profile-menu { background: url(../images/img-main-menu-responsive/icon-profile-menu.png) no-repeat; width: 61px; height: 60px; position: relative; top: 10px; margin-left: 42px; margin-right: 19px; float: left; } } @media (max-width: 640px) and (max-width: 480px) { .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-profile .icon-profile-menu { margin-left: 10px; } } @media (max-width: 640px) { .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-blog { width: 100%; height: 80px; background-color: #ffffff; position: relative; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-blog .icon-blog-menu { background: url(../images/img-main-menu-responsive/icon-blog-menu.png) no-repeat; width: 61px; height: 60px; position: relative; top: 10px; margin-left: 42px; margin-right: 19px; float: left; } } @media (max-width: 640px) and (max-width: 480px) { .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-blog .icon-blog-menu { margin-left: 10px; } } @media (max-width: 640px) { .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-favorites { width: 100%; height: 80px; background-color: #f1f1f2; position: relative; } .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-favorites .icon-favorites-menu { background: url(../images/img-main-menu-responsive/icon-favorites-menu.png) no-repeat; width: 61px; height: 60px; position: relative; top: 10px; margin-left: 42px; margin-right: 19px; float: left; } } @media (max-width: 640px) and (max-width: 480px) { .dropdown-all .wrapper-menu-all-responsive-icon .wrapper-login-responsive .btn-icon-menu-favorites .icon-favorites-menu { margin-left: 10px; } } @media (max-width: 640px) { .close-menu-all { background: url(../images/img-main-menu-responsive/menu-close.png) no-repeat; width: 61px; height: 61px; display: inline; position: relative; top: 15px; right: 40px; } } @media (max-width: 640px) and (max-width: 480px) { .close-menu-all { width: 40px; height: 40px; display: inline; position: relative; top: -7px; right: 10px; background-size: 40px; } } @media (max-width: 640px) { .line-height-styles-04 { width: 100%; height: 1px; background-color: #ebeced; position: absolute; bottom: 0; } .line-height-styles-05 { width: 100%; height: 1px; background-color: #ebeced; position: absolute; top: 0; } .txt-menu-responsive { font-family: 'trueplookpanya-Regular'; font-size: 40px; line-height: 80px; text-transform: capitalize; color: #333333; } } @media (max-width: 640px) and (max-width: 560px) { .txt-menu-responsive { font-size: 30px; } } @media (max-width: 640px) and (max-width: 480px) { .txt-menu-responsive { font-size: 30px; } } @media (max-width: 640px) { .txt-main-menu-responsive-header { font-family: 'trueplookpanya-Regular'; font-size: 40px; line-height: 80px; text-transform: capitalize; color: #e2231a; float: left; } } @media (max-width: 640px) and (max-width: 560px) { .txt-main-menu-responsive-header { font-size: 30px; } } @media (max-width: 640px) and (max-width: 480px) { .txt-main-menu-responsive-header { line-height: 65px; font-size: 30px; } } @media (max-width: 640px) and (max-width: 400px) { .txt-main-menu-responsive-header { font-size: 24px; } } @media (max-width: 640px) and (max-width: 340px) { .txt-main-menu-responsive-header { font-size: 20px; } } @media (max-width: 640px) { .txt-main-menu-responsive-sub { font-family: 'trueplookpanya-Regular'; font-size: 35px; line-height: 35px; text-transform: capitalize; color: #000; float: left; } } @media (max-width: 640px) and (max-width: 560px) { .txt-main-menu-responsive-sub { font-size: 30px; } } @media (max-width: 640px) and (max-width: 480px) { .txt-main-menu-responsive-sub { font-size: 30px; line-height: 65px; } } @media (max-width: 640px) and (max-width: 400px) { .txt-main-menu-responsive-sub { font-size: 24px; } } @media (max-width: 640px) and (max-width: 340px) { .txt-main-menu-responsive-sub { font-size: 20px; } } @media (max-width: 640px) { .wrapper-submenu-responsive { width: 100%; height: 78px; position: relative; border: 0; padding: 0px; overflow: hidden; background-color: #FFFFFF; } } @media (max-width: 640px) and (max-width: 480px) { .wrapper-submenu-responsive { height: 65px; } } @media (max-width: 640px) { .wrapper-subsubmenu-responsive { width: 100%; height: 78px; position: relative; border: 0; padding: 0px; overflow: hidden; background-color: #FFFFFF; } } @media (max-width: 640px) and (max-width: 480px) { .wrapper-subsubmenu-responsive { height: 65px; } } @media (max-width: 640px) { .img-drop-down { background: url(../images/img-main-menu-responsive/icon-dropdown.png) no-repeat; width: 43px; height: 43px; float: right; vertical-align: top; position: relative; top: 19px; right: 50px; } } @media (max-width: 640px) and (max-width: 480px) { .img-drop-down { right: 10px; width: 30px; height: 30px; background-size: 30px; } } @media (max-width: 640px) { .list-group-submenu { margin-top: -20px; } } /* css for menu mobile */ .list-group.panel > .list-group-item { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .list-group-submenu { margin-left: 0px; } /* css for search menu desktop */ .wrapper-main-menu .wrapper-menu-01 .wrapper-menu-search button.btn-default[type=button] { border: 0; background-color: transparent; position: relative; top: 0px; right: 0px; color: #CCC; z-index: 3; width: 30px; height: 31px; padding: 0; border-radius: 50%; margin-left: 15px; } .wrapper-menu-search .menu-icon-search2 { background: url(../images/img-main-menu/icon-search-v2.png) no-repeat; width: 30px; height: 30px; float: right; cursor: pointer; background-color: #fff; } @media (max-width: 640px) { .wrapper-all-menu-responsive-width-640 .wrapper-menu-responsive .content-menu-responsive .wrapper-menu-search button.btn-default[type=button] { border: 0; background-color: transparent; position: absolute; top: 7px; right: 4px; color: #CCC; z-index: 3; width: 50px; height: 50px; border-radius: 50%; } } .testClick { width: 100%; height: 80px; background-color: #FC0004; position: relative; z-index: 99; } .list-group { margin-bottom: 0px; padding-left: 120px; width: 100%; height: auto; background-color: #FFFFFF; } @media (max-width: 480px) { .list-group { padding-left: 10px; } } .list-group2 { width: 100%; height: auto; background-color: #FFFFFF; position: relative; top: 20px; margin-bottom: 20px; padding-left: 155px; } @media (max-width: 480px) { .list-group2 { padding-left: 20px; } } /**/ .wraper-all-menu-responsive { width: 100%; height: 80px; } .wraper-all-menu-responsive .content-menu-text { width: 100%; height: 80px; background-color: #e31d1a; font-family: 'trueplookpanya-Regular'; font-size: 40px; line-height: 80px; text-transform: uppercase; color: #FFFFFF; padding-left: 42px; } @media (max-width: 560px) { .wraper-all-menu-responsive .content-menu-text { font-size: 30px; } } @media (max-width: 480px) { .wraper-all-menu-responsive .content-menu-text { padding-left: 10px; font-size: 30px; } } .wraper-all-menu-responsive .main-menu-responsive-header { width: 100%; height: auto; background-color: #FFFFFF; position: relative; padding-left: 42px; overflow: hidden; } @media (max-width: 480px) { .wraper-all-menu-responsive .main-menu-responsive-header { padding-left: 0px; height: auto; } } .wraper-all-menu-responsive .main-menu-responsive-header .icon-menu-responsive { width: 60px; height: 60px; border-radius: 50%; background-color: #d0d2d3; position: relative; top: 10px; margin-right: 19px; float: left; overflow: hidden; } @media (max-width: 480px) { .wraper-all-menu-responsive .main-menu-responsive-header .icon-menu-responsive { width: 45px; height: 45px; background-size: 45px; margin-left: 10px; } } .wraper-all-menu-responsive .main-menu-responsive-header .icon-menu-responsive img { width: 60px; height: 60px; border-radius: 50%; } @media (max-width: 480px) { .wraper-all-menu-responsive .main-menu-responsive-header .icon-menu-responsive img { width: 45px; height: 45px; background-size: 45px; } } .wraper-all-menu-responsive .main-menu-responsive-header .img-drop-down { background: url(../images/img-main-menu-responsive/icon-dropdown.png) no-repeat; width: 43px; height: 43px; float: right; vertical-align: top; position: relative; top: 19px; right: 50px; } @media (max-width: 480px) { .wraper-all-menu-responsive .main-menu-responsive-header .img-drop-down { width: 30px; height: 30px; background-size: 30px; right: 10px; } } ul li { list-style-type: none; } .group-menu-01 { position: relative; left: -30px; } a, a:hover, a:focus, a:active, a.active { color: #000; text-decoration: none; } a img { border: none; } /*==============login-finish===================*/ .txt-name-login { width: 115px; height: 30px; font-size: 14px; text-transform: capitalize; color: #333333; line-height: 30px; font-family: Tahoma, Verdana, Segoe, sans-serif; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; padding-left: 5px; }