/* reset */
body{ position: relative; width: 100%; margin: 0; padding: 0; }
a{ text-decoration: none; cursor: pointer; }
ul, li{ list-style: none; text-decoration: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, em{ margin: 0; padding: 0; }
em{ font-style: normal; text-transform: none; list-style: none; }

/* temp */
*, :after, :before{ box-sizing: content-box; }
html{ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.breadcrumb{ padding: 0; margin: 16px 0; border-radius: 0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ line-height: normal; }
.detail-title h4,.related-text h5{ font-weight:400!important }
a{ text-decoration: none; }
a:hover{ text-decoration: none; }
.nav-icon{ line-height: 1.4em; }
.popup-device h4{ font-weight:300!important }
footer{ overflow: visible; }
.popup-attention h4{ font-weight:300!important }
.tab-content h5{ padding-left: 0; }
.voucher-sheets h5{ font-weight: 300!important }
.voucher-title h4{ font-weight: 400!important }

*{font-family: PingFangTC,微軟正黑體,Microsoft JhengHei,Open Sans,sans-serif;}
body{width: 100%; overflow-x: hidden; background: #121212; font-size: 16px;}
.scrollfixed{overflow: hidden;}
.scrollx{ overflow-x: scroll;}
.content-container{ width: 95%; min-width: 1200px; position: relative; margin: 50px auto; }
section.ai-container{position: relative;}
section.ai-container .ai-container-bg{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;width: 100%;height: 115%;transform: translateY(-30px);}
/* ============================================================
LOADING
============================================================ */
.progress {position: fixed; z-index: 11111; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; color: #1b62b4;}
.progress-inner {position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%);}
.progress-bar {position: absolute; width: 100%; height: 100%; background-color: #000000;}
.progress-text {color: #ffffff; font-family: "Roboto", "Noto Sans TC", sans-serif; font-size: 2em; font-weight: 500; position: absolute; z-index: 9999999; width: 220px; text-align: center; top: 100%; left: 50%; transform: translate(-50%, 0);}
.progress-logo {-moz-transform: scale(1.02, 1.02); -ms-transform: scale(1.02, 1.02); -webkit-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02); position: absolute; top: 0;}
.progress-complete .progress-bar {background-color: transparent;}

.loading-circle {border-color: #1b62b4 rgba(0,0,0,.07) #1b62b4 rgba(0,0,0,.07); background: 0 0; -moz-animation: rotate 1.5s linear infinite; -webkit-animation: rotate 1.5s linear infinite; animation: rotate 1.5s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border: 4px solid; border-radius: 50%;}
.loading-circle:after {position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); width: 70px; height: 70px; border: 4px solid; border-radius: 50%; content: ""; margin-top: -39px; margin-left: -39px;}
.loading-circle:after {border-color: transparent #fff transparent #fff; -moz-animation: rotate 4s linear infinite; -webkit-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite;}

@-moz-keyframes rotate { 0%{-moz-transform: rotate(0); transform: rotate(0);} 100%{-moz-transform: rotate(360deg); transform: rotate(360deg);} }
@-webkit-keyframes rotate { 0%{-moz-transform: rotate(0); transform: rotate(0);} 100%{-moz-transform: rotate(360deg); transform: rotate(360deg);} }
@keyframes rotate { 0%{-moz-transform: rotate(0); transform: rotate(0);} 100%{-moz-transform: rotate(360deg); transform: rotate(360deg);} }

/* ============================================================
NAV
============================================================ */
nav{width: 100%; height: 74px; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .3); z-index: 30;}
nav.darkbg{background: rgba(0, 0, 0, .9);}
.nav-container{width: 97%; min-width: 722px; position: relative; margin: 0 auto;}
.nav-container:after{content: ''; display: table; clear: both;}
.nav-logo{max-width: 140px; min-width: 100px; position: relative; margin: 25px 15px 0 0; float: left;}
.nav-logo img{width: 100%; vertical-align: bottom;}
ul.nav-content{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; float: left;}
li.nav-item{font-size: 1em; font-weight: 300; color: #ffffff; padding: 25px 10px; position: relative; transition: .15s linear;}
li.nav-item a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
li.nav-item:hover{background-color:rgba(39,69,175,.4);}
.nav-item-more{width: 460px; position: absolute; background: rgba(0, 0, 0, .9); bottom: 0; left: 0; transform: translate(0, 100%); left: -1000em; opacity: 0; transition: opacity 0.5s 0s,left 0s 0.5s; padding: 20px; box-sizing: border-box;}
.nav-item-btn:hover .nav-item-more{left: 0; opacity: 1; transition: opacity 0.5s 0s;}
.nav-more-container{width: 95%; position: relative; margin: 0 auto; padding: 10px 0;}
.nav-more-content{width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.nav-more-item{font-size: 1.1em; font-weight: 300; color: #ffffff; margin-right: 20px; transition: .15s linear; position: relative; padding-bottom: 5px; border-bottom: 3px solid rgba(255, 253, 228, 0);}
.nav-more-item:nth-last-child(1){margin-right: 0;}
.nav-more-item:hover{border-bottom: 3px solid rgba(255, 253, 228, 1);}
.nav-more-topic{width: 100%; position: relative; margin: 20px 0;}
.nav-more-topic h6{font-size: 1em; font-weight: 300; color: #999999; margin-bottom: 10px;}
.nav-topic-area{width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.nav-topic-item{padding: 5px 15px; border-radius: 5000px; border: 1px solid #ffffff; box-sizing: border-box; color: #ffffff; font-size: 1em; font-weight: 300; margin: 5px 0; margin-right: 10px; position: relative; transition: .15s linear;}
.nav-topic-item span{margin-left: 20px;}
.nav-topic-item a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.nav-topic-item:hover{background: #00A0FC; border: 1px solid #00A0FC;}
.nav-program-btn{width: 120px; height: 40px; position: relative; border: 1px solid #ffffff; box-sizing: border-box; background: linear-gradient(225deg,rgba(39,70,175,.6),rgba(103,47,127,.6)); border-radius: 5000px; text-align: center; line-height: 40px; font-size: 1.1em; font-weight: 300; line-height: 40px; color: #ffffff; margin: 15px 0; float: right;}
.nav-program-btn a{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;}
.nav-program-btn:before{content: ''; display: table; background: rgba(39, 69, 175, .3); position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 5000px; animation: btnOutline 1.25s linear forwards infinite;}
.nav-program-btn-text{width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; line-height: 40px; color: #ffffff; font-size: 1.1em; font-weight: 300;}
@keyframes btnOutline{ 0%{opacity: 0; transform: scale(1,1);} 20%{opacity: 1;} 80%{opacity: 1;} 100%{opacity: 0; transform: scale(1.5,2);} }
.nav-register-login{float: right;}
.nav-register-login ul{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 22px 10px;}
.nav-register-login li{font-size: 1.2em; font-weight: 300; color: #ffffff; border-right: 1px solid #ffffff; padding: 0 10px;}
.nav-register-login li:nth-last-child(1){border-right: none;}
.nav-register-login li a{color: #ffffff; transition: .15s linear;}
.nav-register-login li a:hover{color: #b9b9b9; text-decoration: underline;}
.nav-icon{width: 30px; position: relative; float: right; margin: 20px 10px; }
.nav-icon img{width: 100%; vertical-align: bottom;}
.nav-icon-dotted{position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; border-radius: 50%; background: #ff0000;}
.nav-record{width: 165px; position: absolute; background: rgba(0, 0, 0, .9); bottom: -20px; left: 50%; transform: translate(-50%, 100%); left: -1000em; opacity: 0; transition: opacity 0.5s 0s,left 0s 0.5s; padding: 15px; box-sizing: border-box;}
.nav-icon-record:hover .nav-record{left: 50%; opacity: 1; transition: opacity 0.5s 0s;}
.nav-record-container{width: 100%; position: relative; margin: 0 auto;}
.nav-record-first{width: 100%; position: relative; display: flex; justify-content: space-between; align-items: center;}
.nav-record-first h6{font-size: 1em; font-weight: 300; color: #ffffff;}
.nav-record-btn{padding: 3px 10px; border-radius: 5000px; font-size: 1em; font-weight: 300; color: #ffffff; background: #1b62b4; position: relative; transition: .15s linear;}
.nav-record-btn a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.nav-record-btn:hover{color: #1b62b4; background: #ffffff;}
.nav-record-content{width: 100%; position: relative; margin: 5px 0;}
.nav-record-item{width: 100%; position: relative; padding-bottom: 66.67%; margin: 10px 0;}
.nav-record-item img{width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute;}
.nav-record-item a{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3;}
.nav-record-item:after{content: ''; display: table; position: absolute; width: 100%; height: 60%; bottom: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); z-index: 1;}
.nav-record-item p{position: absolute; width: 90%; left: 5%; bottom: 1px; color: #ffffff; font-size: .8em; font-weight: 300; z-index: 2; height: 23px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.nav-record-play{width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.nav-record-play-black{width: 100%; height: 100%; position: relative; border-radius: 50%; background: rgba(0, 0, 0, .6);}
.nav-record-play-triangle{position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid #ffffff; display: inline-block; z-index: 2;}
.nav-search{width: 200px; height: 40px; position: relative; float: right; margin: 15px 10px;}
.nav-search-form input{width: 200px; height: 40px; position: relative; border-radius: 5000px; border: 1px solid #ffffff; box-sizing: border-box; background: none; padding: 0 0 0 40px; font-size: 1.05em; font-weight: 300; line-height: 40px; color: #ffffff;}
.nav-search-form input:focus{outline: none;}
.nav-search-form input::placeholder{color: #eeeeee;}
.nav-search-icon{width: 20px; position: absolute; top: 8px; left: 15px;}
.nav-search-icon img{width: 100%; vertical-align: bottom;}
.search-tag-area{width: 350px; position: absolute; background: rgba(0, 0, 0, .9); bottom: -19px; left: 50%; transform: translate(-50%, 100%); display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; opacity: 0; display: none;}
.search-tag{width: 50%; position: relative; padding: 20px; box-sizing: border-box;}
.search-tag h6{font-size: 1.1em; font-weight: 400; color: #ffffff; border-bottom: 3px solid #ffffff; padding-bottom: 5px; margin-bottom: 15px;}
.search-tag ul li{margin: 5px 0; font-size: 1em; font-weight: 300;}
.search-tag ul li a{color: #ffffff;}
.search-cross{width: 20px; height: 20px; position: absolute; top: 22px; right: 20px; cursor: pointer;}
.search-cross:before{content: ''; display: table; position: absolute; width: 1px; height: 20px; transform: rotate(45deg); margin-left: 10px; background: #ffffff;}
.search-cross:after{content: ''; display: table; position: absolute; width: 1px; height: 20px; transform: rotate(-45deg); margin-left: 10px; background: #ffffff;}

/* search */
.autocomplete-suggestion {cursor: pointer;}
.autocomplete-items {position: absolute; background: rgba(0, 0, 0, .9); border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0; color: #ffffff; font-weight: 300; font-size: 1em;}
.autocomplete-items div {padding: 5px 15px; cursor: pointer;}
.search-em{color: #1b62b4;}
.autocomplete-items div:hover {background-color: rgba(255, 255, 255, .1); }

/* RWD */
@media (max-width:1450px){li.nav-item{padding:25px 8px}
.nav-search, .nav-search-form input,.nav-search-form input.focus{max-width:155px;width:155px}
.nav-register-login ul{margin: 22px 5px;}
.nav-register-login li{padding: 0 5px;}

/*
.navbar-brand{padding:25px 6px; display: flex; align-items: center;}
.btn{padding:6px 14px}
nav .navbar-form{margin-right:0!important}
nav .btn{margin-left: 6px; font-size: 16px; }
.navbar-form .nav-search{padding-left:42px}
.search-top input,.search-top input.focus{font-size:12px}
.navbar-brand>img{width:100px}
.nav-icon{width: 20px;height: 20px;margin-right: 5px;} */
}

@media (max-width:1260px){li.nav-item{padding:25px 5px}
.nav-logo{max-width: 100px; margin: 25px 5px 0 0;}
.nav-search,.nav-search-form input,.nav-search-form input.focus{font-size: 12px;max-width:130px;width:130px}
.nav-search{margin: 15px 5px;}
/* nav .navbar-form{padding: 0 5px;}
.nav-search, .nav-search-form input,.nav-search-form input.focus{max-width:130px;width:130px}
.navbar-brand{padding:25px 3px}
.navbar-brand>img{width:80px} */
}

/* ============================================================
footer
============================================================ */
footer {width: 100%; background: #121212; background: linear-gradient(0deg, #121212 50%, #18293d 100%); position: relative; background-size: 100%; }
footer .footer-box {padding-top: 30px; padding-bottom: 30px; background: #1E1E1E; }
footer .footer-box a {color: #E5E5E5; }
footer .footer-box small {font-size: 0.875em; color: #E4E4E4; margin-left: -15px; }
footer .footer-box small span {display: inline-block; padding-left: 20px; }

/* gotop */
.gotop-btn{width: 120px; height: 66px; position: absolute; background: url('/img/footer/triangle.png') no-repeat; background-position: left top; background-size: contain; top: 0; right: 0; transform: translate(0, -100%);}
.gotop-btn p.gotop-text{position: relative; text-align: center; line-height: 90px; color: #ffffff; font-size: 1em;}
.gotop-btn a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.triangle {width: 130px; height: 130px; position: absolute; bottom: 20px; right: 0px; clip: rect(auto, 180px, auto, 100px); transform: rotate(-90deg); cursor: pointer; }
@media (max-width: 970px) { .triangle {right: 30px;} }
.triangle span {z-index: 100; right: -5px; top: 50%; position: absolute; transform: rotate(90deg); margin-top: -10px; letter-spacing: 2px; font-size: 14px; }
.triangle:after {content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(103, 47, 127, 0.5)), color-stop(100%, rgba(39, 69, 175, 0.5))); transform: rotate(-45deg); }
.triangle:hover:after {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(103, 47, 127, 0.7)), color-stop(100%, rgba(39, 69, 175, 0.7))); }

/* footer */
.footer-container{width: 100%; max-width: 970px; position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.footer-social{width: 17%; position: relative;}
h6.footer-h6{font-size: 14px; font-weight: 500; color: #ffffff; text-align: left; text-transform: uppercase;}
.social-container{width: 100%; position: relative; margin: 10px auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.social-btn{width: 24%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; opacity: 1; transition: .2s linear;}
.social-btn img{width: 100%;}
.social-btn a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.social-btn:hover{opacity: .7;}
.footer-shortcut{width: 70%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.shortcut-group{width: 22%; position: relative;}
.shortcut-group:nth-last-child(1){width: 27%;}
.shortcut-item{position: relative; margin: 20px 0; transition: .2s linear;}
.shortcut-item a:hover{text-decoration: underline;font-weight: 700;}
footer .footer-box .shortcut-item a{color: #ffffff;}
.footer-download-item p{text-align: left; font-size: 13px; font-weight: 500; color: #e4e4e4; position: relative; transition: .2s linear;}
.footer-download-item p a:hover{text-decoration: underline; font-weight: 700;}
.footer-download-item p a{font-size: 14px; color: #e4e4e4;}
.footer-qrcodes{width: 100%; position: relative; margin: 20px 0; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.footer-gp, .footer-as{width: 45%; position: relative;}
.footer-gp img, .footer-as img{width: 100%;}
.gp-btn, .as-btn{width: 100%; position: relative; margin: 10px 0;}
.gp-btn img{width: 110%; margin-left: -5%;}
.as-btn img{width: 100%;}
.footer-gp a, .footer-as a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
footer p.copyright{width: 100%; margin: 30px 0 10px 0; text-align: center; font-size: 13px; font-weight: 500; color: #e4e4e4; position: relative;}
footer p.copyright span{margin-right: 10px;}
footer p.copyright span:nth-child(1){margin-right: 30px;}
footer p.copyright span:nth-last-child(1){margin-right: 0;}
.ott-badge{ width: 75px; position: relative; margin: 20px auto; } 
.ott-badge img{ width: 100%; vertical-align: bottom; }
/* ============================================================
main
============================================================ */
/* tag */
.feature-tag{ width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.feature-item{ font-size: .8em; font-weight: 300; color: #ffffff; padding: 2px 4px; box-sizing: border-box; margin-right: 5px; min-width: 40px; text-align: center; position: relative;}
.program-item{ font-size: 1em; font-weight: 400; color: #ffffff; padding: 2px 4px; box-sizing: border-box; margin-right: 5px; min-width: 40px; text-align: center; position: relative;}
.feature-item.purple{ background: #5D4A88;}
.feature-item.red{ background: #B70B0B;}
.feature-item.orange{ background: #DD6332;}
.feature-item.multiblue{ background: #3d5afe; font-size: .8em;}
.program-item.green{ background: #1a8ba6; font-size: .8em;}
.program-item.blue{ background: #1b62b4; font-size: .8em;}
.program-item.purple{ background: #313F9A; font-size: .8em;}
.program-item.pink{ background: #C04983; font-size: .8em;}
.feature-item a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/* title */
h1.title-chi{ font-size: 2.3em; font-weight: 500; line-height: 1.2em; color: #ffffff; margin: 10px auto;}
h1.title-chi a{ color: #ffffff;}
h2.title-eng{ font-size: 1.5em; font-weight: 300; line-height: 1.2em; color: #ffffff; margin: 10px auto; letter-spacing: .05em;}

/* breadcrumb */
.breadcrumb { position: relative; z-index: 10;}
.breadcrumb>li { display: inline-block;}
.breadcrumb > li a { color: #e6e6e6;}
.breadcrumb>li a img { vertical-align: middle; margin-top: -3px; margin-right: 5px;}
.breadcrumb>li+li:before { content: "/ "; padding: 0 5px; color: #e6e6e6;}
.breadcrumb>.active { color: #fff;}
ol.breadcrumb{ margin-left: 0; padding-left: 5%;}
/*End Of breadcrumb */

/*===============================================
popup
===============================================*/
.popup-content-info{color:#000; width: 60%; max-width: 350px; background: #ffffff; padding: 30px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popup-content-info .check label { color: #fff;}
.popup, .popup-modal{display:none;width:100%; height:100vh; position:fixed; top: 0; left: 0; background: rgba(0, 0, 0, .9); /* opacity: 0; display: none; */ overflow-y: y:hidden; z-index: 50; }
.popup-content{z-index:3}
.popup.scroll{ overflow-y: scroll; }

.popup-content-4k, .popup-content-multi{ width: 90%; max-width: 600px; background: #ffffff; padding: 20px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popup-content-info h3{ font-size: 1.3em; font-weight: 600; color: #000000; text-align: left; margin-bottom: 15px;}
.ppopup-content-info ol.decimal, .popup-content-info ol.decimal li{ font-size: 1em; list-style: decimal; color: #000000; margin-left: -0.5em; line-height: 1.8em;}
.popup-content-info ul.disc, .popup-content-info ul.disc li{ list-style: disc; margin-left: 12px;}
.popup-content-info ol.cjk, .popup-content-info ol.cjk li{ width: 90%; margin: 0 auto; font-size: 1em; font-weight: 500; list-style: cjk-ideographic; color: #000000; line-height: 1.8em;}
.popup-content-info ol.cjk li ol.decimal, .popup-content-info ol.cjk li ol.decimal li{ list-style: decimal; font-weight: 300; margin-left: -10px;}
.popup-content-info ol.cjk li ol.decimal li ul.disc, .popup-content-info ol.cjk li ol.decimal li ul.disc li{ list-style: disc; margin-left: 12px; font-weight: 300;}
.popup-content-info li{ font-size: .95em; font-weight: 300; transition: .15s linear; line-height: 1.6em;}
.popup-content-info p,.popup-term-info p{ font-size: 1.1em;color: #000000;text-align: left;font-weight: unset;}
.popup-login-first ol.cjk{ padding-bottom: 100px;}
.popup-know-btn{ width: 100px; height: 46px; position: relative; margin: 0 auto; margin-top: 15px; border-radius: 5000px; text-align: center; line-height: 46px; font-size: 1.1em; font-weight: 400; cursor: pointer; transition: .15s linear;}
@media all and (min-width: 350px) { .popup-know-btn{width: 120px;} }
.popup-know-btn.blue{ color: #ffffff; background: #1b62b4; border: 1px solid #1b62b4;}
.popup-know-btn.blue:hover{ color: #1b62b4; background: #ffffff;}
.popup-know-btn.border{ color: #000000; border: 1px solid #000000; background: #ffffff;}
.popup-know-btn.border:hover{ background: #b9b9b9;}
.popup-know-btn.border-blue{ color: #1B62B4;; border: 1px solid #000000; background: #ffffff;}
.popup-know-btn.border:hover{ background: #b9b9b9;}

.popup-attention{ width: 90%; max-width: 400px; background: #ffffff; padding: 30px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popup-content-info h4{ font-size: 1.4em; font-weight: 300; color: #000000; text-align: left; margin-bottom: 15px; text-align: center;}
.popup-content-info h4 em{ font-weight: 400; color: #ff0000;}
.popup-content-info-btns{ width: 100%; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.popup-content-info-btns .popup-know-btn{ margin: 10px;}
.popup-login-first{ width: 90%; max-width: 350px; background: #ffffff; padding: 30px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popup-close-black{ width: 24px; height: 24px; position: absolute; top: 10px; right: 10px; cursor: pointer;}
.popup-close-black:before{ content: ''; display: table; position: absolute; width: 2px; height: 24px; transform: rotate(45deg); margin-left: 12px; background: #000000;}
.popup-close-black:after{ content: ''; display: table; position: absolute; width: 2px; height: 24px; transform: rotate(-45deg); margin-left: 12px; background: #000000;}
.popup-close-fixed{ position: fixed; z-index: 5; top: 10px; right: 15p;}
.popup-login-term{ width: 90%; min-width: 800px; max-height: 85vh; background: #ffffff; padding: 30px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none; opacity: 0; overflow: hidden;}
.popup-term-info{ max-height: 78vh; overflow-y: scroll;}



/*===============================================
device
===============================================*/
.popup-device{ width: 90%; max-width: 1200px; background: #ffffff; padding: 20px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popup-device h3{ width: 100%; position: relative; font-size: 1.2em; font-weight: 300; color: #000000;}
.popup-device h4{ width: 100%; position: relative; font-size: 1.1em; font-weight: 300; color: #666666;}
.device-container{ width: 100%; position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; margin: 10px 0;}
.device-item{ width: 220px; height: 305px; position: relative; padding: 20px 10px 0 10px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .3); box-sizing: border-box;}
.device-pic{ width: 100%; position: relative; margin-bottom: 20px; text-align: center;}
.device-pic img{ height: 60px;}
.device-name h6{ font-size: 1.1em; font-weight: 600; text-align: center; color: #666666;}
.device-name{ position: relative; padding-bottom: 10px; margin-bottom: 5px; border-bottom: 1px solid #c2c2c2;}
ul.device-info, ul.device-info li{ list-style: disc;}
ul.device-info{ min-height: 100px;}
.device-info li{ font-size: 1em; font-weight: 300; color: #666666; margin-left: 1.5em;}
button.device-cancel{ font-size: 1.1em; font-weight: 300; color: #000000; background: #ffffff; border: 1px solid #000000; box-sizing: border-box; border-radius: 5000px; padding: 6px 14px; text-align: center; line-height: 1.5em; position: relative; margin-left: 50%; transform: translate(-50%, 0); transition: .15s linear;}
button.device-cancel:hover{ background: #1b62b4; border: 1px solid #1b62b4; color: #ffffff;}
.device-popup-close{ width: 24px; height: 24px; position: absolute; top: 10px; right: 10px; cursor: pointer;}
.device-popup-close:before{ content: ''; display: table; position: absolute; width: 2px; height: 24px; transform: rotate(45deg); margin-left: 12px; background: #000000;}
.device-popup-close:after{ content: ''; display: table; position: absolute; width: 2px; height: 24px; transform: rotate(-45deg); margin-left: 12px; background: #000000;}