@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{
	box-sizing: border-box;
}
body{
	font-family: 'Noto Sans TC', sans-serif !important;
	max-width: 100%;
}
.section-article{
}
a{
	text-decoration: none;
	color: #2ea3f2;
}
img{
	max-width: 100%;
	height: auto;
}
ol,ul{
	list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    padding-bottom: 10px;
    color: #333;
    font-weight: 500;
    line-height: 1em;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

/* ------maker web header--------------  */
#make-head-wrap {
  width: 100%;
  height: 64px;
  background-color: #000;
  top: 0;
  z-index: 999;
  color: #fff;
}
#make-head-wrap .make-head {
  max-width: 1140px;
  width: 80%;
  margin: 0 auto;
}
#make-head-wrap .make-head p {
  padding: 0;
}
#make-head-wrap .make-head .mb_logo {
  width: 150px;
  line-height: 64px;
  text-align: center;
  height: 64px;
  margin-right: 80px;
  float: left;
}
#make-head-wrap .make-head .mb_logo img {
  vertical-align: middle;
}
#make-head-wrap .make-head .input-icon,
#make-head-wrap .make-head .search-icon {
  color: #ffffff;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background-image: url(../img/search.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#make-head-wrap .make-head .search:hover {
color: #000000;
}
#make-head-wrap .make-head .search-icon.active {
  background-image: url(../img/close.png)!important;
}
#make-head-wrap .make-head .search-form {
  width: 100%;
  position: relative;
  margin-right: 15px;
}
#make-head-wrap .make-head .search-form input {
  width: 100%;
  height: 64px;
  outline: none;
  border: none;
  background-color: inherit;
  text-indent: 10px;
  text-indent: 30px;
}
#make-head-wrap .make-head .search-form .input-icon {
  position: absolute;
  left: 7px;
  top: 24px;
  background-image: url(../img/search.png);
}
#make-head-wrap .make-head .menu-wrap {
  display: none;
  width: 100%;
  height: auto;
}
#make-head-wrap .make-head .menu-left {
  width: 490px;
  height: 100%;
  line-height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#make-head-wrap .make-head .menu-left > li {
  -ms-flex-preferred-size: 15%;
      flex-basis: 15%;
  text-align: center;
  margin-right: 1.6%;
}
#make-head-wrap .make-head .menu-left > li a {
  font-size: 14px;
  text-align: center;
  color: #fff;
  height: 64px;
  width: 100%;
  display: inline-block;
}
#make-head-wrap .make-head .menu-left > li:hover {
  height: 64px;
  border-bottom: 4px solid #00b8ee;
}
#make-head-wrap .make-head .menu-left > li:hover a {
  color: #00b8ee;
}
#make-head-wrap .make-head .menu-left .hasIcon .full-wrap {
  width: 100%;
  position: absolute;
  top: 64px;
  left: 0;
  background-color: #f5f5f5;
  z-index: 999;
}
#make-head-wrap .make-head .menu-left .hasIcon ul {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  z-index: 999;
}
#make-head-wrap .make-head .menu-left .hasIcon ul li {
  -ms-flex-preferred-size: 16.6%;
      flex-basis: 16.6%;
  height: 250px;
  position: relative;
  padding-bottom: 20px;
}
#make-head-wrap .make-head .menu-left .hasIcon ul a {
  width: 100%;
  -ms-flex-preferred-size: 16%;
      flex-basis: 16%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  margin-top: 20px;
  display: inline-block;
  color: #474747;
  border-left: 1px solid #ddd;
}
#make-head-wrap .make-head .menu-left .hasIcon ul a p {
  line-height: 20px;
  text-align: left;
}
#make-head-wrap .make-head .menu-left .hasIcon ul .name {
  border-left: 4px solid #00b8ee;
  padding-left: 16px;
  font-size: 99%;
  font-weight: 600;
}
#make-head-wrap .make-head .menu-left .hasIcon ul .desc {
  padding-left: 20px;
  width: 90%;
  font-size: 95%;
}
#make-head-wrap .make-head .menu-left .hasIcon ul img {
  position: absolute;
  left: 0;
  top: 106px;
}
#make-head-wrap .make-head .menu-left .noIcon .menu-wrap {
  width: 160px;
  display: none;
  background-color: #d8d8d8;
  position: absolute;
}
#make-head-wrap .make-head .menu-left .noIcon .menu-wrap ul li {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 14px;
  color: #474747;
}
#make-head-wrap .make-head .menu-left .noIcon .menu-wrap ul li:hover {
  background-color: #fff;
}
#make-head-wrap .make-head .menu-left .noIcon .menu-wrap ul li a {
  color: #000;
  opacity: .7;
}
#make-head-wrap .make-head .menu-left .noIcon > a {
  height: 64px;
  width: 100%;
  display: inline-block;
}
#make-head-wrap .make-head .menu-right {
  height: 64px;
  width: 100px;
  line-height: 64px;
  color: #fff;
  float: right;
}
#make-head-wrap .make-head .menu-right .search {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
  height: 100%;
  width: 16px;
}
#make-head-wrap .make-head .menu-right span {
  display: inline-block;
}
#make-head-wrap .make-head .menu-right .menu {
  width: 60px;
  height: 64px;
  background-color: #00b8ee;
  text-align: center;
  display: inline-block;
}
#make-head-wrap .make-head .menu-right .menu .menu-wrap {
  width: 160px;
  display: none;
  background-color: #d8d8d8;
  position: absolute;
}
#make-head-wrap .make-head .menu-right .menu .menu-wrap ul li {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 14px;
  color: #474747;
  cursor: pointer;
}
#make-head-wrap .make-head .menu-right .menu .menu-wrap ul li:hover {
  background-color: #fff;
}
#make-head-wrap .make-head .menu-right .menu .menu-wrap ul li a {
  color: #000;
  opacity: .7;
  display: inline-block;
  width: 100%;
}
#make-head-wrap .make-head .menu-right .menu > a {
  height: 64px;
  width: 100%;
  display: inline-block;
  color:#fff;
}
#make-head-wrap .menu-icon {
  width: 16px;
  height: 16px;
  background-image: url(../img/search-hover.png);
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  left: 10px;
  top: 24px;
}
#make-head-wrap .menu-icon.active {
  background-image: url(../img/search-hover.png);
}
#make-head-wrap:hover {
  background-color: #fff;
}
#make-head-wrap:hover .make-head .menu-left > li > a {
  color: #000;
}
#make-head-wrap:hover .make-head .search-icon {
		color: #000000;
  background-image: url(../img/search-hover.png);
}
#make-head-wrap:hover .make-head .input-icon {
  background-image: url(../img/search-hover.png);
}

#flag-page .ml-slider .flexslider{
	max-height: 720px;
}
.ml-slider{
	width:80%;
	margin:0 auto;
}
@media(max-width:768px){
	.ml-slider{
		width:100%;
	}
}
/**************************************new-maker-css*******************************************/
.section-article .section-width{
	width:80%;
	margin:0 auto;
	padding:30px;
	background-image:url(http://www.flag.com.tw/assets/maker/img/maker-back.png);
}
@media (max-width:768px){
	.section-article .section-width{
		width:95% !important;
	}
}
.mk-section .mk-content{
	margin:20px auto;
}
.mk-section .mk-content img{
	width:100%;
}
.mk-section .mk-content p{
	font-size:20px;
	color:#191917;
}
.mk-section .mk-title h2{
	font-size:34px;
	background-color:#ffed00;
	padding:5px;
	margin:0px;
}
.mk-section .mk-img-posit{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.mk-section .mk-img-posit .mk-img{
	margin:0 10px;
	width:46%;
}
@media (max-width:768px){
	.mk-section .mk-img-posit .mk-img{
		width:100%;
	}
	.mk-section .mk-text{
		width:100% !important;
		margin:0px !important;
	}
}
.mk-section .mk-text{
	width:50%;
	margin-left:45px;
}
.mk-1 .mk-title{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	margin-bottom:30px;
}
.mk-2 .t-1{
	width:250px;
}
.mk-2 .t-2{
	width:190px;
}
.mk-2 .mk-content{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.mk-2 .mk-img-posit-text{
	width:50%;
}
@media (max-width:768px){
	.mk-2 .mk-img-posit-text{
		width:100%;
	}
	.mk-2 .mk-detail{
		width:100% !important;
	}
	.mk-2 .mk-img-posit{
		width:100% !important;
	}
}
.mk-2 .mk-img-posit{
	width:50%;
}
.mk-2 .mk-img-posit .mk-img{
	width:100%;
}
.mk-2 .mk-detail{
	width:350px;
	margin:0 auto;
}
.mk-2 .mk-detail p{
	margin-top:20px;
}
.mk-3 .mk-title p{
	margin-top:20px;
}
.mk-3 .t-1{
	width:290px;
}
.mk-3 .t-2{
	width:270px;
}
.mk-4 .mk-product{
	width:280px;
}
.mk-4 .mk-product-row{
	width:420px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
/*---------------------------flag-main-area---------------------------*/

/*--------------------------------flagpro-row--------------------------------------*/
.flagpro_row{
	display: block;
	position: relative;
    width: 80%;
    max-width: 1080px;
    margin: auto;
}
.flagpro_text > :last-child {
    padding-bottom: 20px;
}
.flagpro_text_inner {
    position: relative;
}
.maker-video{
	width: 90%;
	position: absolute;
	z-index: -1;
}
/******footer******/
footer {
	width:100%;
	background:#111111;
	font-size: 12px;
	color:#9b9b9b;
	line-height:200%;
	padding-top: 10px;
	z-index:99;
}

footer .clmtable{
	margin: 10px auto 0;
}
footer .clmtable td {
	padding: 0 50px;
}
footer .clmtable a {
	color:#9b9b9b;
	text-decoration:none;
}
footer .clmtable a:hover {
	color:#ffffff;
	text-decoration:none;
}
footer .footer-bottom{
	width: 95%;
	margin: 0 auto;
	padding: 0 1%;
	text-align: center;
}

footer p{
	display: inline-block ;
	margin:1px !important;	
}


@media (min-width: 981px){
.flag-maker .flagpro_column_1_2, .flag-maker.flagpro_row .flagpro_column_1_2 {
    width: 48.5%;
}
.flag-maker .flagpro_column, .flag-maker.flagpro_row .flagpro_column {
    margin-right: 1%;
}
}
.flagpro_css_mix_blend_mode_passthrough {
    mix-blend-mode: unset !important;
}
.flagpro_column {
	display: inline-block;
    position: relative;
    z-index: 9;
    background-position: center;
    background-size: cover;
}
.flagpro_column_1_2{
	display: inline-block;
}
.flagpro_gutters1.flagpro_row.flagpro_row_fullwidth, .flagpro_gutters1 .flagpro_row.flagpro_row_fullwidth, .flagpro_specialty_fullwidth > .flagpro_gutters1.flagpro_row, .flagpro_gutters1 .flagpro_specialty_fullwidth > .flagpro_row {
    width: 100% !important;
    max-width: 100% !important;
}
.flagpro_column_7{
  width: 90%;
}
.flagpro_text_5{
	float:right;
}
.flagpro_row_4,
.flagpro_row_6{
	background-position: center;
	background-size: cover;
}
@media (min-width: 768px) and (max-width: 1024px) {
  #make-head-wrap .make-head {
    max-width: 1080px;
  }
  #make-head-wrap .make-head .mb_logo {
    width: 70px;
    position: absolute;
    left: 20px;
    margin-right: 10px;
  }
  #make-head-wrap .make-head .menu-right {
    position: absolute;
    right: 20px;
  }
  #make-head-wrap .make-head .search-icon {
    margin-left: 0;
    margin-right: 30px;
  }
  #make-head-wrap .make-head .menu-left {
    margin-left: 50px;
    width: 540px;
  }
  #make-head-wrap .make-head .menu-left > li {
    -ms-flex-preferred-size: 16%;
        flex-basis: 16%;
    margin-right: 0;
  }
  #main-footer .foot-wrap {
    max-width: 1080px;
  }
}
@media (max-width: 765px) {
  #make-head-wrap .make-head .menu-left {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    height: auto;
    background: #fff;
  }
  #make-head-wrap .make-head .menu-left > li {
    padding-left: 20px;
    margin-right: 1.6%;
    border-bottom: 1px solid #ccc;
  }
  #make-head-wrap .make-head .menu-left > li > a {
    text-align: left;
    padding-left: 20px;
  }
  #make-head-wrap .make-head .mb_logo {
    margin-right: 0;
    margin: 0 10px 0px 15px;
  }
  #make-head-wrap .make-head .menu-right {
    right: 10px;
  }
  #make-head-wrap .make-head .menu-right .search-icon {
    display: none;
  }
  #make-head-wrap .menu-icon {
    display: inline-block;
    background-size: contain;
    left: 10px;
	background-image: url(http://www.flag.com.tw/assets/maker/img/menu.png);
  }
  #make-head-wrap:hover .menu-icon {
	  background-image: url(http://www.flag.com.tw/assets/maker/img/menu-hover.png);
  }
	#make-head-wrap .menu-icon.active {
    background-image: url(http://www.flag.com.tw/assets/maker/img/close.png);
}
  footer .footer-bottom {
	text-align: center;
}
}
@media (max-width:580px){
		footer .clmtable td {
	padding: 0 10px;
}
}
@media (max-width: 480px) {
  #flag-main-area{
	padding-top: 0px;
}
  #make-head-wrap{
    position:relative;
  }
  #make-head-wrap .menu-icon {
    display: inline-block;
  }
  #make-head-wrap .make-head {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  #make-head-wrap .make-head .menu-left .hasIcon ul img {
    top:126px;
  }
  #make-head-wrap .make-head .logo {
    width: 10%;
    margin-right: 5%;
  }
  #make-head-wrap .make-head .menu-left {
    display: none;
    width: 100%;
    text-align: center;
  }
  #make-head-wrap .make-head .menu-left .hasIcon:hover .submenu {
    width: 100%;
  }
  #make-head-wrap .make-head .menu-left .hasIcon:hover .submenu li {
    -ms-flex-preferred-size: 50%;
        flex-basis: 33%;
  }
  #make-head-wrap .make-head .menu-left li {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  #make-head-wrap .make-head .menu-right {
    width: auto;
  }
  #make-head-wrap .make-head .menu-right > li:hover ul {
    width: auto;
  }
  .flagpro_row{
    width:85%;
  }
}