@import "navigation.css";

/* fixed navigation */
#g-navigation{/*z-index:auto*/z-index:15;position:fixed;top:-2px;width:100%}
.g-offcanvas-right .g-offcanvas-toggle{position:fixed}
#g-header{padding-top:calc(4% + 60px) !important}
:lang(en-US) #g-navigation+#g-header, :lang(en-US) #g-navigation+#g-header{padding-top:calc(4% + 94px) !important}

/*product carouosel*/
.container.col-lg-6 .arrow-right, .container.col-lg-6 .arrow-left{border:none;display:block !important}
.container .carousel-item img{width:100%}
.container #myCarousel{width:100% !important; height:auto !important;background:transparent}

/*base attribute*/
/*body{
font-family:"verdana", "Times New Roman", "微軟正黑體", "新細明體";
}*/
h3, h4{
font-weight:bold !important;}
h3{margin-top:13px !important}
ul {
margin:  15px 0px;
}
li, p{
font-size:18px;
}
#tab3 td{
border:none;
font-size:22px;
line-height:32px;
width:70%;
padding:33px 0;
position:relative
}
li strong{
color:#FFAA33
}
#tab3 tr{
width:100%
}
th{
color: #373737;
width:30%;
font-size:24px;
padding-left:4.5%;
background:none;
}
tr:last-child, tr:last-child th{
	border-bottom: none;
}
input{
border-radius: 5px;
}
button{
border-radius: 10px;
}
table{
border:none;
margin-top:7.5%; /*84*/
}
button:active{
background-color:#0079c3;
color: #FFAA33;
}
button:hover{
color: #0079c3;
background-color: #fff;
}
form label{
margin-bottom:0;
display:block;
color: #9497a7;
}
select{
width:100%;
}
input:focus:invalid:focus, textarea:focus:invalid:focus{
border: none;
border-bottom: 1px solid #f00;
box-shadow: none;
}
input[type="text"], .pop-content input[type="email"], select, input[type="text"]:focus, .pop-content input[type="email"]:focus{
color:#fff;
background:none;
border:none;
margin:2px 0 0;
padding: 0;
height:28px;
}
select{border-bottom:1px solid #9196AE;}
textarea{
background: rgba(79, 82, 101, 0.35);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border:none;
border-bottom:1px solid #9196AE;
margin:30px 0 45px !important;
color:#fff
}
input[type="submit"]{
width: 100%;
background: rgba(78, 84, 115, 0.8);
color: #fff;
border-radius: 0 !important;
padding:8px
}
input[type="submit"]:hover {
background-color: #004B97;
}
.pop-content div:not(:first-child)>input {
	display: none;
}
.pop-content form>div:nth-of-type(-n+4) {
	margin-bottom: 3.5vw;
	border-bottom: 1px solid #9196AE;
}

/*G-* section css*/
#g-header{
background:url(/images/ezdupe/webpage/bg_B11.png) center no-repeat;
background-size:cover;
padding:4% 0 9%;
}
#g-intro{
background: #ffffff;
padding: 0;
position: relative;
z-index: 0;
}
/*class*/
.g-owlcarousel-item-img{
width:100%;
}
/*tab on top*/
.nav-pills.top{
text-align:center;
/*background: #373737;
width: 343px;*/
margin: auto;
height: 75px;
border-radius:50px;
align-items:center;
justify-content:center;
margin-top: -6rem;
}
.nav-pills.top > li{
display: flex;
height: 100%;
align-items:center;
padding: 0 0.67rem;
position:relative;
background:#3e3a39;
}
.nav-pills.top>li>a{
color:#fff;
height:75px;
line-height:63px;
}
/*右側線*/
.nav-pills.top li:not(:last-child):after {
content: "";
background: #fff;
width: 2px;
height: 35px;
right: -1px;
z-index:1;
top:20px;/*for ie 10*/
border-radius: 10px;
position: absolute;
}
.nav-pills li.active {
background: #999999;
}
.nav-pills.top li:first-child {
border-radius: 50px 0 0 50px;
}
.nav-pills.top li:last-child {
border-radius: 0 50px 50px 0;
}
/*.nav-pills.top>li>a.active{background-color: #0088cc}*/
.nav-pills.top > .active > a, .nav-pills>.active>a:hover {background: none;}
.nav-pills.top > li:last-child{
border:none;
}
.nav-pills li:hover {background: #999999;}
/*tab bottom 173-193, .bottom li can delete after modifying*/
.bottom{
margin-top:0 !important;
background:none;
width:auto;
margin:5px;
position:relative
}
.bottom>div a{
color:#fff;
padding:4px 16px;
font-size:16px
}
.bottom a {
border: 2px solid #0BFFF8;
border-radius: 2rem;
margin:3px 0;
}
.bottom a:hover {color:#373737;background:#0BFFF8}
div#background.bottom {background: #373737;}
.bottom>div{text-align:center;display:flex;flex-direction:column;justify-content:space-between; align-items:center}
.bottom>div:nth-of-type(1):after {
	position: absolute;
	content: "";
	width: 0.75pt;
	height: 76%;
	background: #fff;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.bottom h1, .bottom h3{font-weight:bold;margin-bottom:7%;font-size:42px;line-height:1.5}
.header-pic{
position:relative;
text-align:center;
}
.header-pic>img{
max-width:100%
}
.all{
padding:3% 7% 2%;
color: #fff;
font-size:22px;
position:relative;
align-items:center;
max-width:1700px;
margin:auto !important;
min-height:600px;
}
.all h2{
font-size:24px;/*34*/
color:#06ffff;
line-height: initial !important;
margin:10px 0 30px;
}
.all>div{
font-size: 18px;
line-height: 30px;
padding:0 7% 0 2.4%;
}
.all>div:last-child{padding:0}
.all h1 {
color: #fff;
font-size: 42px;
line-height: 61px;
font-weight:bold;
}
.series{
background: #fff;
padding:2px 5px;
color: #3a4ea5 !important;
font-weight: bold;}
.content h2, .content-r h2, #other h2, #other_3 h2, #other_6 h2 {
font-size: 34px;
margin-bottom:30px;
line-height:49px
}
.fa.fa-video-camera{
font-size:28px;
}
.content-r>.pic{padding:0 17px 0 0}
.content-l, .content-r, #other_3, #other_6{
align-items: center;
justify-content: center;
font-size:18px;
max-width:1700px;
margin:auto !important;
padding:8% 9% 9%;
}
.content-l{
flex-direction: row-reverse;
}
.content-r .content, .content-l .content{
padding:6% 4%;
text-align:justify
}
.content-l>.pic {
text-align: center;
padding:0
}
.content-r span, .content-l span{color:#004e96}
.slide-text>p {margin: 0 0.2rem;}
#tab2 .col-lg-6, #tab2 .col-lg-12{
margin-bottom:134px;
}
#tab2 .col-lg-6:nth-of-type(2n+1){
padding-left:20px;
}
#tab2 .col-lg-6:nth-of-type(2n){
padding-right:20px;
}
.vcontainer {
position: relative;
width:100%;
height:0;
padding-bottom: 56.25%;
}
.vcontainer>div {
position: absolute;
bottom: -83px;
background: #373737;
width: 100%;
line-height:26px;
color: #fff;
padding: 16px 30px;
}
iframe.videoembed {
position:absolute;
height:100%;
width:100%;
}
.headimg {
padding-bottom:5vh;
}
/*side button*/
#s-side, #side-button{
background: #373737;
height:168px;
position:absolute;
color: #fff;
top:27vw;
left:0;
display:flex;
align-items:center;
z-index:2;
justify-content:center;
}
#side-button{
width:84px;
text-align:center;
flex-direction:column;
}
#side-button>div{
height: 84px;
width:100%;
position:relative
}
#side-button>div img{
position: absolute;
right: 50%;
top: 50%;
transform: translateX(50%) translateY(-50%);
}
.download img{top:41% !important}
#s-side{
width: 18px;
border-radius: 0px 10px 10px 0px;
cursor:pointer;
}
#s-side:after{
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
#s-side.change:after {
transform:rotate(-135deg);
}
#side-button hr{width:64px;height:2px; margin:auto !important}
.download {
padding: 13px;
display:flex;
justify-content:center;
}
.inquiry2{
margin:auto;
padding:13px;
height:56px;
}
.inquiry2:hover, .download:hover{
background:rgba(0,0,0,0.2);
}
.pop-up{
display:none;
position:fixed;
width:100%;
margin:auto;
top:0;
z-index: 999999;
}
.full-screen{
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,0.35);
height:100vh;
padding:20px
}
.pop-content{
background:#030825;
width:400px;
height:fit-content;
position:relative;
padding:48px 44px 45px;/*5.8VW 3.1VW 3.1VW*/
}
.pop-up td, .pop-up tr{
border:none !important;
}
.btn-close{
position:absolute;
right:2.25%;
top:2.25%;
width:30px;
height:30px;
transition:.3s;
cursor:pointer;
color:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:1;
transform: rotate(45deg);
}
.btn-close:after,.btn-close:before{
	position:absolute;
	content:"";
	background:#000
}
.btn-close:after{width: 1px;height: 15px;}
.btn-close:before{height: 1px;width: 15px;}
.btn-close:hover{
transform:rotate(135deg);
}
.pop-content .btn-close:after, .pop-content .btn-close:before{background:#fff}
.change {
/*box-shadow: 2px 0px 4px inset #424753;*/
left:83px !important;
transition:.6s
}
.inline-link{
border:2px solid #0BFFF8;
padding:9px 16px;
border-radius:2rem;
color:#373737 !important;
text-decoration: none !important;
}
.inline-link:hover{
background:#0BFFF8;
}
.g-title{margin-bottom:90px}
/*id*/
/*#tab1:first-child {
padding-top: 4rem;
}*/
#tab2, #tab3{
padding: 0.7% 1.5%;
font-size:20px}
#tab2 h3{
color:#0079c3;padding:3% 0 0}
#tab2 .col-md-12 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position:relative;
}
#tab2 .col-md-12:after{
	width:calc(100% - 30px);
	height:2px;
	left:15px;
	top:23px;
	background:#000;
	position:absolute;
	content:"";
}
#tab3 h2{padding-left:45px;position:relative}
#tab3 h2:before {
	content: "";
	position: absolute;
	background: #4f4f4f;
	width: 25px;
	height: 50px;
	left: 0;
	top: -5px;
}
#tab2 h2{
padding:0 32px 1rem;
background:#fff;
z-index:1;
}
#related-p{
padding: 0 7% 10.6%;
}
.pro#center>div { 
padding: 0 2% 4%;/*0 2% 105*/
}
.pro2#center>div{ /*3個一排*/
padding: 3.5% 7% 0; /*0 7% 105px*/
}
.pro2#center .pic, .pro#center .pic{align-self:baseline;}
.pro2.content-r{
padding:8% 4% 9%;/*0 4% 17%*/
}
#copy{width:100%}
.owl-carousel .owl-stage-outer{overflow:hidden}
.owl-nav div{display:block;display:flex;align-items: center;justify-content: center;}
.owl-nav>div.disabled{display:none}
.owl-nav .fa{font-size:60px; color:rgba(0,0,0,0.7)}
.owl-item {background: #fafafa;padding: 44px 20px 40px/*44 12 23*/;box-shadow:2px 2px 5px rgba(0, 0, 0, 0.25)}
#background.erase{margin-bottom:0; background:#fff;color:#000; padding:9% 0/*#fafafa*/}
#background.erase>div{padding:2% 9% 2%}/*10% 9%*/
.owl-carousel .owl-stage{display:flex;padding-bottom:10px}
.owl-item img{max-width:204px;margin:auto;padding:0 9px}
.owl-dots{display:none}
.item{text-align:center}
.item h3{font-size:24px;margin-bottom:10px}
.item .des{font-size:18px;}
#other_3, #other_6{max-width: unset;position:relative;color:#fff;overflow:hidden;padding:9%;background:linear-gradient(290.32deg, #1B61AD -35.81%, #029AEA 100%);}
#other_3:after{
	position: absolute;
	content: "";
	width: 800px;
	height: 800px;
	left: -15%;
	transform: translateY(-50%);
	top:50%;
	background: linear-gradient(146.33deg, #AFD2FC 10.33%, rgba(196, 196, 196, 0.51295) 53.78%, rgba(78, 89, 101, 0) 96.45%);
	border-radius: 50%;
	z-index:1
}
#other_3>div{position:relative;z-index:2}
#other_6 h2{text-align:center;margin-bottom:3%}
#text{flex-direction:column}
#text>div{display:flex;flex-basis:50px;align-items:center;padding:2% 0}
#text>div>p{flex:2 1 200px;padding-left:4px}
#text img {width: 50px;height: 50px;}
/*#text{
text-align: left;
margin: 45px 0 50px}
#text p {
padding: 25px 27px;
border-right: 2px solid #373737;
align-items: center;
display:flex;
}
#text p:last-child {
border-right: none;
border-bottom:none;
padding-right:0;
}
#text p:first-child{padding-left:0}*/
#center{
text-align:center;
}
#center>div{padding: 0 14% 2.3%} /*12.7*/
#other{
padding-right:10%;display: flex;align-items:center;padding-bottom:17%}
#other>div:nth-child(2){
padding:0 0 0 8%;/*0 3 0 12*/
}
#other-r{
padding-right:0;
margin-right:0 !Important;
}
#other-r >div:last-child{padding-right:12%}
#other-r >div:first-child{padding:0;text-align: right;}
#other-r >div:first-child >img {width: 100%;}
#asy{
width:100%;
max-width:1170px
}
#change{
position: absolute;
right: 90px;
width:70px;
bottom:7px;
cursor: pointer;
text-align: center;
animation: jump 1.5s ease-in-out infinite;
}
#change>img{width:100%}
#change i{
margin:auto;
top:13px;
position:relative
}
#background{background:#1D2056; color:#fff;margin:0 0 7%;background-size:cover !Important; width:100%}
#background>div{padding:11% 9%}
.contact{line-height:2; color:#373737 !important}
/*click too see other pic*/
.click-light{
border:1px solid #fff;
padding:5px;
border-radius:50%;
position:absolute;
right:30px;width:56px;height:56px;
cursor:pointer;
font-size:22px;
color:#fff;
text-align:center;
bottom:24px;
}
.click-light > i{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.overpage{
display:flex;
align-items:center;
background:rgba(0,0,0,0.6);
position:fixed;
width:100vw;
height:100vh;
top:0;
z-index:1
}
.arrow-right, .arrow-left{
font-size:48px;
color:#fff;
position:absolute;
z-index:1;top:45%;
cursor:pointer;
}
.arrow-right{
right: -12px;
transform:translateX(50%);
}
.arrow-left{
left:-12px;
transform:translateX(-50%);
}
.arrow-right, .arrow-left{
border-radius:50%;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid;
}
.lightcase{
z-index:2;
left:0;
position:absolute
}
/*carousel本人*/
.carousel-container {
position: relative;
margin:auto !important;
max-width:576px;
/*padding:0 8px;*/
}
#myCarousel{
width:570px;
background:#fff;
}
.carousel-inner{margin:auto}
.carousel-item img {
object-fit: cover;
margin:auto;
width: 85%;
}
#carousel-thumbs {
background: rgba(0,0,0,.3);
bottom: 0;
left: 50%;
transform:translate(-50%);
width:100%;
max-width: 576px;
padding: 0 50px;
margin: 20px auto;
position: absolute;
right: 0;
}
#carousel-thumbs img {
border: 5px solid transparent;
cursor: pointer;
background:#fff
}
#carousel-thumbs img:hover {
border-color: rgba(255,255,255,.3);
}
#carousel-thumbs .selected img {border-color: #fff;}
#carousel-thumbs .carousel-item {display: block;}
#myCarousel>.carousel-inner {margin-top: 25px}
.carousel-control-prev,
.carousel-control-next {
width:6% !important;
}
#carousel-thumbs .selected img {
border-color: aqua !important;
}
.thin img{margin-top:25px}
.rectangle, .graphic{
display:flex;
align-items:center;
justify-content: space-around;
margin-top:2.3%
}
.rectangle span{width:196px;height:20px; margin-right:20px;background:#dbdbdb}
.rectangle:first-child span{background:#B9E7FD}
#copy{display:flex;flex-wrap:wrap;justify-content:space-around;}
#copy img {margin-bottom: 1vw;}
#copy h3{position:relative}
#copy>div{max-width:590px;text-align:left;align-self:baseline;margin-bottom:25px}
.yellow-bak{background: #F6B42C;font-size:1rem;padding:4px 8px 3px;line-height:1rem;font-weight:bold;color:#373737;margin-bottom:0;display:inline-block}
.efficient {
    position: absolute;
    background: #F6B42C;
    color: #424242 !important;
    font-size: 1rem;
    padding: 4px 8px 3px;
    top: -30px;
}
.example {
    margin-top: 1vw;
    display: inline-block;
    background: #424242;
    padding: 2px 8px;
    font-size: 1rem;
    margin-bottom: 8px;
    color: #fff !important;
}
#anim{display:none}
#sizeChange{cursor:pointer}
#sizeChange p{margin:0;font-size:22px;}
#sizeChange span{
	content: "";
	background: #fff;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 42px;
	cursor: pointer;
	left:350px;
	border-right: 1px #000 solid;
	transform: rotate(45deg);
	border-bottom: 1px solid #000;
	transition:all .5s
}
#sizeChange span.active{transform:rotate(-45deg)}

@keyframes jump{
0% { transform: translateY(0);}
50% {transform: translateY(-15px); }
100% { transform: translateY(0); }
}
@keyframes finger-animate{
	from{right:0%}
	to{right:10%;opacity:0}
}
/*media queries*/
@media only screen and (max-width:360px){
	.nav-pills.top > li{padding:0 0.2rem}
	#tab3 .col-md-12{padding:0}
	input[type="text"], .pop-content input[type="email"], select, input[type="text"]:focus, .pop-content input[type="email"]:focus{height:25px	}
}
@media only screen and (min-width:476px){
	.nav-pills.top > li{padding:0 15px}
	.nav-pills.top > li:last-child{padding-right:41px}
	.nav-pills.top > li:first-child{padding-left:41px}
}
@media screen and (min-width:992px) and (max-width:1240px){
.header-pic>img{
text-align:center;
width:100%;
}}
@media screen and (max-width:992px){
.all{padding-bottom:7vw}
.pro#center>.col-md-4{padding:3%}
#center:not(.pro):not(.pro2){text-align:left; flex-direction: column-reverse;padding-bottom:24.8vw}
.content-r>.pic {text-align: center}
.all>div{padding:0 6%}
#center>div {padding: 0 4% 2.3%;}
#other p{
border-right:none !important;
border-bottom:1px solid #373737;
padding:10px 0 !important;margin:0
}
.rectangle span{width:50px;margin-right:10px}
}
@media screen and (min-width:992px) and (max-width:1199px){.container {max-width: 750px !important;}}
@media screen and (max-width:767px){
#side-button{display:none;}
#myCarousel {
	width: 320px;
	height: 320px
}
.carousel-inner {
	display: flex
}
#carousel-thumbs {
	max-width: 320px
}
.arrow-left, .arrow-right {
	display: none
}
.header-pic>img, .click-light{
text-align:center;
margin-bottom:17vw;}
#other>div:nth-child(2){
padding:0}/*0 3% 0 12%;*/
#copy{display:block;white-space:nowrap;overflow:scroll;position:relative}
#copy>div{margin-bottom:0;display:flex;flex-direction:column; white-space:normal;display:inline-block;height:590px;vertical-align:top}
#copy img {width: auto;height:auto}
#copy:after{position:absolute;background:#373737;height:1px;bottom:0;width:100%}
.rectangle span{width:20px;margin-right:5px}
}
@media screen and (min-width:1080px){
.content-l .content{padding-left:1%;padding-right:7%}
.content-r .content{padding-left:7%;padding-right:1%}
.carousel-container{max-width:600px}
#copy>div:nth-of-type(-n+2) {margin-bottom: 80px;}
#other_3{min-height:600px}
}
@media screen and (min-width:768px) {
	#myCarousel {
		width: 576px;
		height: 576px
	}
	#carousel-thumb {
		max-width: 576px
	}
	.carousel-inner {
		margin: auto;
	}
}
/*mobile*/
@media screen and (max-width:575px){
#sizeChange span{left:170px;width:8px;height:8px;top:13px}
#sizeChange span.active{top:calc(50% - 5px)}
.all{padding:9.3vw 5.6% 17vw}
.all h1{font-size:32px;line-height:46px}
.all h2, #tab2 h2, #tab3 h2, #center.pro h3,#center.pro2 h3, .g-title, .item h3,.bottom h1, .bottom h3{font-size:18px !important}
.all>div, .content, #center, #center p, #other li, #text p, .content p, .item .des{font-size:15px;line-height:22px;margin-bottom:18px;margin-top:10px}
#text img {width: 20px;height: 20px;}
#text p{margin-bottom:0px}
.header-pic>img, .click-light{margin-bottom:30px}
.click-light{width:35px;height:35px}
#s-side, #side-button{top:15rem}
.click-light > i{font-size:15px}
.arrow-right, .arrow-left{width:30px;height:30px;padding-top:4px}
.lightcase i{font-size:20px}
.nav-pills a, th, #tab3 td, #tab3 p{font-size:12px;line-height:19px}
.nav-pills.top{height:40px;margin-top:-5rem}
.nav-pills.top li:not(:last-child):after{height:18px;top:12px}
#tab1, #tab2, #tab3 {padding-top: 13.3vw;} /*left right 4%*/
.vcontainer>div{padding:16px 15px}
#tab3 h2:before{width: 10px;height: 30px;left: 0;top: 3px;}
#tab3 h2{padding-left:20px}
#tab3 td{padding:9px 0}
.content-l, .content-r{padding:0 7% 17%;}
.content h2, .content-r h2, #other h2, #other_3 h2, #other_6 h2{font-size:24px !important;margin-bottom:10px;line-height:35px}
.content-r .pic, .content-l .pic{padding:0 5vw}
#change{width:37px; right:55px}
.pro#center>div, .pro2#center>div{padding:3% 4% 7vw;}
#center.pro .pic, #center.pro2 .pic{display: flex;align-items:flex-start;/*center*/}
#center>div{padding:5.3vw 4% 2.3%}
.pro p{margin-top:10px}
/*760可刪*/
.pro img, .pro2 img, .item img{width:102px;height:85px}
.owl-item img{max-width:130px;height:108px}
.pro .pic >div, .pro2 .pic>div {text-align: left;margin-left:10px}
.carousel-container{max-width:320px}
.container.col-lg-6 .carousel-container{max-width:none}
/*765-770有.bottom li的皆可刪*/
#other .col-md-5, #other .col-5{padding-left:0}
.bottom{margin:0}
.bottom>div a{padding:6px 16px;font-size:15px;margin:0}
#other{padding-bottom:21.3vw}
#other p:last-child{border-bottom:none;}
#other_3:after{width:300px;height:300px;top:-7%}
#tab2 h2{padding:0 8px;line-height: 1.5;}
#text{margin:0 0 10px}
#tab2 .col-md-12:after{height:1px;top:18px}
.g-title{margin-bottom:20px}
#related-p {padding-bottom:13.3vw;}
.inline-link{padding:7px 9px}
#tab3 th{padding-right:0.9rem;padding-left:5px}
#anim{color:#f09601;position:absolute;top:30%;right:0;/*animation: finger-animate 2s 2 ease-in-out;*/display:block;animation-fill-mode: forwards;}
.owl-carousel .owl-stage-outer{overflow:visible}
}
@media screen and (max-width:1440px){
	.pop-content form>div:nth-of-type(-n+4){margin-bottom:3.5vh}
	textarea{margin:2vmin 0 3.5vh !important}
	.pop-content{padding:5.8vw 3.1vw 3.1vw;}
}
@media screen and (max-width:767px) and (min-width:457px){
	#copy>div{height:590px}
}
/*only for chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width:1200px){ }
/*only for firfox*/
@-moz-document url-prefix() {
.vcontainer{
height:640px
}
#related-p{
  padding-bottom:10.5vw;
}
}
/*only for ie*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.btn-close::after, .btn-close::before{transform:translateX(-50%) translateY(-50%);top:50%; left:50%}
#copy{flex:1 1 auto}
}

.link-back {
	background: #373737;
	padding: 6px 8px;
	border-radius: 2px;
	color: #fff;
	text-decoration: none !important;
}
.link-back:hover{background:#999;color:#fff}