body{
	margin: 0;
	padding: 0;
	font-family: 'Dosis','Noto Sans TC', sans-serif;
	font-size: 16.5px;
	line-height: 1.5em;
	color: #222222;
	letter-spacing: 1px;
	background: #f5f5f5;
}
:root{
    --color: #ff6752;        
}
*, *::before, *::after{
    box-sizing: border-box;
}
ul{ margin: 0; padding: 0;}
ul, li{
    list-style: none;
}
a{
    text-decoration: none;
    transition: 0.5s;
	color: var(--color);
}
a:hover, a:focus{
    text-decoration: none;
    outline: none;
	color: var(--color);
}
img{ 
	width: 100%;
}
p{
    line-height: 1.7;
}
::-moz-selection { /* Code for Firefox */ color: #fff; background: #ff6752;}
::selection {color: #fff; background: #ff6752;}

.container{
    width: 95%;
    padding: 0px 0px;
	margin: 0px auto;
	max-width: 1200px;
}
.inner_container{
    max-width: 986px;
    padding-bottom: 50px;
}
.container.top_hi_article{
    max-width: 1600px;
}
.container.top_hi_1200_article{
    max-width: 1200px;
}
 
.display_nor{display: block;}
.display_mo{display: none;}

content_right .display_mo {
    display: none!important;
}

.overflow_h{ overflow: hidden;}

/* ----- banner ----- */
.banner_area{ margin: 50px 0; text-align: center;}
.banner_area_f{ background-color: #3F3F3F; text-align: center;}
.bannerphoto_728x90{ width: 100%; max-width: 728px; margin: auto; display: inline-block;}
.bannerphoto_336x280{ width: 100%; max-width: 336px; margin: auto; display: inline-block;}
.bannerphoto_970x250{ width: 100%; max-width: 970px; margin: auto; display: inline-block;}
/* ----- banner - end ----- */

/* ----- index_header ----- */
header.index_header{
	width: 100%;
	z-index: 50;
	position: absolute;
	background: none;
	color: #222;
	transition: top 0.5s;
}
.index_header .container{
	width: 95%;
	padding: 43px 0 5px;
	position: relative;
	 display: -webkit-box; display: -moz-box; display: flex;
	align-items: flex-end;
	max-width: 1600px;
}
.index_header .logo{
    width: 126px;
	height: 79px;
	display: inline-block;
}
.index_header .logo.top_logo_b{
	display: inline-block;
    line-height: 1; 
}
.index_header .logo.top_logo_w{
	display: none;   
}
header.index_header nav{
    margin-bottom: 7px;
}
.index_header nav ul{
	display: inline-block;
    line-height: 1;
	margin: 0;
	padding-left: 15px;
}
.index_header nav ul li{
	margin: 0 8px;
    display: inline-block;
}
.index_header nav ul li:last-child{
    margin-left: 20px;
}
.index_header nav ul li a{
	font-size: 19px;
	color: #222;
	font-weight: 300;
	position: relative;
}
.index_header nav ul li a:focus{
	color: #222;
}
.index_header nav ul li a:hover{
	color: #222;
}
.index_header nav ul li a::after{
	content: "";
	position: absolute;
	width: 8px;
	height: 10px;
	border-radius: 10px;
	background: var(--color);
	left: 50%;
	transform: translateX(-50%);
	top: 5px;
	transition: 0.5s;
	opacity: 0
}
.index_header nav ul li a.active{
	cursor: default;
	pointer-events: none;
}
.index_header nav ul li a.active::after{
	top: -16px;
	opacity: 1;
}
.index_header nav ul li a:hover::after{
	top: -16px;
	opacity: 1;
}

.index_header .m_divd .menu_link{
	width: 1px;
	height: 11px;
	display: inline-block;
	background: #666;
}

.index_header .control_toggle{
	position: absolute;
	right: 0px;
	display: inline-block;
    line-height: 1;
	top: 20px; 
	transform: none;
}
.index_header .control_toggle a{
	width: 38px;
	margin-left: 15px;
    height: 46px;
    display: inline-block;
}
.index_header .control_toggle #menu_btu{
	width: 35px;
	margin-left: 12px;
}
.index_header .tagline{
	width: 130px;
	height: 29px;
}
.index_header .tagline.tagline_b{
	display: inline-block;
    vertical-align: top;    
}
.index_header .tagline.tagline_w{
	display: none;     
}

.main_menu nav ul li{
	margin: 0 0 15px;
}

/* ----- index_header - end ----- */

/* ----- header ----- */
header{
	width: 100%;
	z-index: 50;
	position: absolute;
	background: #222;
	color: #fff;
	transition: top 0.5s;
	margin-bottom: 30px;
}
header .container{
	width: 95%;
	padding: 2px 0 8px;
	position: relative;
	 display: -webkit-box; display: -moz-box; display: flex;
	align-items: flex-end;
	max-width: initial;
}
.logo{
    width: 126px;
	height: 79px;
	display: inline-block;
}
.logo.top_logo_b{
	display: none;    
}
.logo.top_logo_w{
    display: inline-block;
    line-height: 1;
}
header nav{
    margin-bottom: 7px;
}
nav ul{
	display: inline-block;
    line-height: 1;
	margin: 0;
	padding-left: 15px;
}
nav ul li{
	margin: 0 8px;
    display: inline-block;
}
nav ul li:last-child{
    margin-left: 20px;
}
nav ul li a{
	font-size: 19px;
	color: #fff;
	font-weight: 300;
	position: relative;
}
nav ul li a:focus{
	color: #fff;
}
nav ul li a:hover{
	color: #fff;
}
nav ul li a::after{
	content: "";
	position: absolute;
	width: 8px;
	height: 10px;
	border-radius: 10px;
	background: var(--color);
	left: 50%;
	transform: translateX(-50%);
	top: 5px;
	transition: 0.5s;
	opacity: 0
}
nav ul li a.active{
	cursor: pointer;
    pointer-events: auto;
}
nav ul li a.active::after{
	top: -16px;
	opacity: 1;
}
nav ul li a:hover::after{
	top: -16px;
	opacity: 1;
}

.m_divd .menu_link{
	width: 1px;
	height: 11px;
	display: inline-block;
	background: #666;
}

.control_toggle{
	position: absolute;
	right: 0px;
	display: inline-block;
    line-height: 1;
	top: 52%; 
	transform: translateY(-50%);
}
.control_toggle a{
	width: 38px;
	margin-left: 15px;
    height: 46px;
    display: inline-block;
}
.control_toggle #menu_btu{
	width: 35px;
	margin-left: 12px;
}
.tagline{
	width: 130px;
	height: 29px;
}
.tagline.tagline_b{
	display: none;    
}
.tagline.tagline_w{
    display: inline-block;
    vertical-align: top;
}
/* ----- header - end ----- */

/* ----- top banner ----- */
.t_banner_area {
    height: 90px;
	width: 100%;
    background: #F5F5F5;
    text-align: center;
	position: absolute;
	z-index: 60;
}
.t_banner_area a{ display: block; max-width: 1100px; min-height: 90px; margin: auto;}
.t_banner_area a img{ width: auto;}
header.has_banner{
	margin-top: 90px;
}
/* ----- top banner - end ----- */


/* ----- header - navbar-fixed-top ----- */
header.navbar-fixed-top{
	background: #222;
	color: #fff;
	z-index: 50;
    position: fixed;
	border: none;
	margin-top: 0;
}
header.navbar-fixed-top .container{
	padding: 2px 0 8px;
	max-width: inherit;
}
header.navbar-fixed-top .logo{
	margin-left: 0px;
}
header.navbar-fixed-top .logo.top_logo_b{
    display: none;
}
header.navbar-fixed-top .logo.top_logo_w{
    display: inline-block;
    line-height: 1;
}
header.navbar-fixed-top nav ul li a{
	color: #fff;
}
header.navbar-fixed-top .control_toggle{
	top: 52%; 
	transform: translateY(-50%);
}
header.navbar-fixed-top .tagline.tagline_b{
    display: none;
}
header.navbar-fixed-top .tagline.tagline_w{
    display: inline-block;
    vertical-align: top;
}



/* ----- header - navbar-fixed-top - end ----- */



/* ----- full screen popup ----- */
.full_s_popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 60px;
	background: #222;
	transform: translateY(-200vh);
	opacity: 0;
	transition: .5s;
	z-index: 0;
}
.full_s_popup.show{
	transform: translateY(0vh);
	opacity: 1;
	z-index: 999;
    overflow-y: auto;
}
.popup_close_btu{
	position: absolute;
	width: 25px;
	height: 25px;
    top: 20px;
    right: 20px;
}
.popup_close_btu img{
	display: block;
	transition: .5s;
}
.popup_close_btu:hover img{
	opacity: .5;
}

#nav_menu_spill.full_s_popup{
	background: #3f3f3f;
}
#search_popup_spill.full_s_popup{
	background: var(--color);
}

.ovl_menu{ display: -webkit-box; display: -moz-box; display: flex; flex-wrap: wrap; height: 100%; padding: 0px 0px 0 0px;}
.main_menu{ align-self: flex-start; flex: 0 0 35%;}
.logo_w{ width: 140px; height: 88px; margin-bottom: 20px;}

.main_menu nav ul{ display: block; padding: 0;}
.main_menu nav ul li{ border-bottom: 1px solid #666; margin: 0 0 15px; padding-bottom: 12px; display: block;}
.main_menu nav ul li:last-child{ border: none;}
.main_menu nav ul li a{ font-size: 18px; letter-spacing: 4px; color: #fff;}
.main_menu nav ul li a::after{ top: 50%; transform: translateY(-50%); right: 0px; left: inherit}
.main_menu nav ul li a.active::after{ right: -12px;}
.main_menu nav ul li a:hover::after{ right: -12px;}
.main_menu .m_divd .menu_link{background: none; height: 5px;}
.main_menu nav ul li.m_divd{ border: none; margin: 0px; line-height: 10px; padding-bottom: 5px;}
.hot_tag{ margin-top: 40px; padding-bottom: 40px;}
.hot_tag h5{ color: #fff; letter-spacing: 3px; font-size: 16px; font-weight: 300;}

.second_main{align-self: flex-end; margin-left: auto; text-align: right; padding-bottom: 40px;}
.second_main ul li{ padding: 6px 0;}
.second_main ul li a{ font-size: 18px; letter-spacing: 3px; color: var(--color);}
.second_main ul li a:hover{opacity: .5;}
.second_main ul{ margin-bottom: 30px;}

.social_network{margin-bottom: 15px;}
.soc_net{ display: inline-block; width: 45px; margin-left: 20px;}
.soc_net:hover{ opacity: .5;}
.copyright{font-size: 13px; color: #ccc; opacity: .8; line-height: 1.6em; margin: 0;}

.ovl_search{ display: -webkit-box; display: -moz-box; display: flex; flex-wrap: wrap; height: 100%; padding: 15vh 0px 0 0px;}
.search_area{ flex: 0 0 100%;}
.searchText{ width: 100%; padding: 20px 25px; color: var(--color); font-size: 20px; letter-spacing: 3px; border: none; outline: none;}
.searchText::selection{ background: var(--color); color: #fff;}
.searchText:active, .searchText:focus{ border: none; outline: none;}
.ovl_search .copyright{ color: #fff;}

/* ----- full screen popup - end ----- */


/* ----- main_content ----- */
.main_content{
	width: 100%;
	padding: 130px 0 40px;	
}
#main_content.has_banner{
	padding-top: 230px;
}
.thumbnail_mask{
	overflow: hidden;
	position: relative;
}
.thumbnail_mask a{
	width: 100%;
	height: 100%;
	display: block;
}
.thumbnail_mask a img{
	transition: all 500ms ease-out 0s;
    transform: scale(1,1);
}
.article-col:hover .thumbnail_mask a img{
	transform: scale(1.2,1.2);
	filter: brightness(.8);
}

.top_hi_article .thumbnail_mask{ margin-bottom: 10px;}
.top_hi_article .caption_t h2{font-size: 32px;}

.article-col{ position: relative; margin-bottom: 40px;}
.caption_t{	padding-top: 20px; min-height: 150px;}
.caption_t h4{ margin: 0 0 5px; font-size: 15px;}
.caption_t h2{ margin: 0 0 10px; line-height: 1.4em; font-size: 22px;}
.article-publish-date{ letter-spacing: 2px; color: #333; margin-bottom: 0px; font-size: 11px; font-weight: 300;}
.sec_par a{
	color: var(--color);
}
.caption_t h2 a{
	color: #000;
	font-weight: 300;
}
.caption_t h2 a:hover, .sec_par a:hover{ opacity: .5;}
.tag_box{ margin-top: 5px;}
a.tag{ padding: 6px 12px; background: #fff; color: var(--color); border-radius: 30px; font-size: 13px; display: inline-block; line-height: 1.1em; font-weight: 500; margin: 2px 0;}
a.tag:hover{ opacity: .5;}

.section_title{ text-align: center; margin: 60px 0 20px;}
.section_top_title{ margin: 0 0 40px;}
.section_title h3{ color: var(--color);}

.container.top_hi_1200_article .section_title{margin: 0px 0 20px;}

.row{ display: -webkit-box; display: -moz-box; display: flex; flex-wrap: wrap; justify-content: center;}
.col_3{ width: 33%; padding: 15px;}
.col_2{ width: 49.5%; padding: 15px;}

/* ----- main_content - end ----- */

.row_1{ display: -webkit-box; display: -moz-box; display: flex; flex-wrap: wrap; align-items: flex-start; padding-bottom: 10px;}
.row_1.article-col{ margin-bottom: 0;}
.row_1 .thumbnail_mask{ flex: 0 0 50%;}
.row_1 .caption_t{ flex: 0 0 50%; padding: 0 0 0 10px; min-height: inherit;}
.row_1 .caption_t h2{ font-size: 16px; line-height: 1.2em;}
.row_1 .caption_t h4{ font-size: 14px; margin-bottom: 10px;}

.section_icon{ width: 150px; height: auto; margin: 0 auto 20px; display: inline-block; line-height: 1;}
.section_title h3{ letter-spacing: 8px; font-size: 1.1em; margin-top: 0px;}

.more_row {  text-align: right;  padding: 20px 20px 50px;}
.more_row a{font-size: 17px; padding-bottom: 10px; border-bottom: 4px solid var(--color); font-weight: 500;}

.full_h_row{ display: -webkit-box; display: -moz-box; display: flex; flex-wrap: wrap;}
.beginner_guide .full_h_row{ padding: 20px 20px 60px; background: #3f3f3f; position: relative; z-index: 9;}
.col_4{flex: 0 0 25%; padding: 1px;}
.mov_up{ margin-bottom: -20px; overflow: hidden;}
.mov_down{ margin-top: -20px; background: #292929; overflow: hidden;}
.mov_up lottie-player, .mov_down lottie-player{ width: 100%;}

.spillarea{ background: #292929; padding: 60px 0;}
.spillarea .container{ display: -webkit-box; display: -moz-box; display: flex; justify-content: center; flex-wrap: wrap; padding: 0 20px;}
.spill_box{ background: var(--color); flex: 0 0 30%; margin: 0 10px; color: #fff; position: relative; padding: 0px; max-width: 320px; }
.spill_box img{ transition: .5s;}
.spill_box:hover img{ filter: brightness(80%);}
.spill_box_icon{ width: 38%; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}

.footer{ background: #3f3f3f;}
.footer .logo_w{ width: 100px; margin-bottom: 30px;}
.footer .ovl_menu{ padding: 60px 50px 40px;}
.footer .main_menu{ margin-bottom: 80px;}
.footer .main_menu nav ul li{margin-bottom: 15px; padding-bottom: 10px; display: block;}
.footer .main_menu nav ul li.m_divd{margin: 0;}
.footer .main_menu nav ul li a{ font-size: 18px; color: #ccc; letter-spacing: 8px}
.footer .main_menu nav ul li a::after{ display: none;}
.footer .main_menu nav ul li a:hover{ opacity: .5;}
.footer .second_main ul li a{ font-size: 16px; letter-spacing: 8px; line-height: 2em;}
.footer .second_main ul li{ padding: 1px 0;}
.footer .soc_net{ width: 40px;}


/* ----- artice_content ----- */

.article_content .top_hi_1200_article .caption_t{
    padding: 0;
    margin: 30px 0;
    min-height: initial;
}
.top_hi_1200_article .article-col{ margin-bottom: 30px;}

.top_hi_1200_article .caption_t h2{ font-size: 32px; font-weight: 300;}
.article_info li {
    display: inline-block;
    color: #282828;
    font-size: 11px;
    font-weight: 300;
    margin-right: 10px;
}
.article_info li a{ color: #282828;}
.article_info li a:hover{ color: var(--color);}
.article_info .article-publish-date{ margin-right: 20px;}

.article_row{
    margin-bottom: 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.col_1{ width: 100%;}
.article-content {
    margin: 0;
    padding: 2px;
    position: relative;
}
.article-content h2 {
    font-weight: 300;
    color: #222;
    margin-top: 0;
	font-size: 28px;
}
.article-content h3 {
    color: var(--color);
    font-size: 21px;
    font-weight: 500;
    margin-top: 0;
}
.article-image{
    padding: 2px;
    overflow: hidden;
}
.caption_a {
    padding: 10px 10px 5px 0;
    font-weight: 400;
    color: #282828;
    font-size: 14.5px;
	line-height: 1.3;
}

.row_spe{ display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 6px;}
.row_spe .row_label{ font-weight: 500; flex: 0 0 120px;}
.row_spe .row_content{ flex: 1;}

.article_row .col_2{ padding: 0; flex: 0 0 49.5%;}

.page_con{ display: flex; justify-content: space-between; margin: 60px 0;}
.page_con a{ font-size: 17px; font-weight: 500; padding-bottom: 5px;}
.page_con a:hover{  border-bottom: 1px solid var(--color);}

/* ----- copy_link ----- */
.row_col{ display: flex; justify-content: space-between; align-items: center;}
.row_col .article_info{ flex: 1;}
.row_col .copy_link{ flex: 0 0 20px; position: relative; cursor: pointer;}
.copy_link .copy_icon{ transition: .3s;}
.copy_link:hover .copy_icon{ opacity: .7;}
.copy_text{ color: #222; background: #fff; padding: 4px 10px 8px; border-radius: 20px; font-size: 14px; line-height: 1; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); opacity: 0; transition: .5s;}
.lower_copylink{justify-content: flex-end; margin-bottom: 10px;}

.copy_text.show{animation: copy_mo 2s ease-in-out both;}
@keyframes copy_mo{
	0%{ opacity: 0; top: 5px;}
	15%{ opacity: 1; top: -30px;}
	70%{ opacity: 1; top: -30px;}
	100%{ opacity: 0; top: -30px;}
}
/* ----- copy_link - end ----- */


/* ----- artice_content - end ----- */


/* ----- content_right ----- */
.content_row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}
.content_left{
    flex: 1;
    padding-right: 40px;
    padding-bottom: 60px;
}
.content_right{
    flex: 0 0 300px;
    margin-left: auto;
    padding-bottom: 60px;
}
.content_right .section_title{ margin: 20px 0 20px;}
.content_right .section_icon{ width: 130px; height: auto;}

.banner_area_300x250 {
    width: 300px;
    display: block;
    margin-bottom: 15px;
}
.title_mostrecent {
    width: 150px;
    margin: auto;
    padding: 20px 0;
}
.section_col_r .container {
    padding: 0;
    width: 100%;
    border: 1px solid #e5e5e5;
}
.content_right .content_panel {
    width: 100%;
    padding: 6px;
    border-bottom: 1px solid #e5e5e5;
}
.content_right .content_panel:last-child{
    border: none;
}
.content_right .article-col {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
}
.content_right .thumbnail_mask{
    flex: 0 0 50%;
}
.content_right .caption_t{ 
    flex: 0 0 50%;
    padding: 0 0 0 10px;
    min-height: initial;
}
.content_right .caption_t h2{
    font-size: 14px;
    margin: 0;
	line-height: 1.3;
}
.content_right .caption_t h4{
    font-size: 13px;
    margin: 0 0 3px;
}

/* ----- content_right - end ----- */


/* ----- also_like_sec ----- */
.also_like_sec{ padding: 0px 0 50px;}
.also_like_sec .section_title{ margin-bottom: 50px; margin-top: 0;}
.like_list{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.like_list .content_panel{ flex: 0 0 24%;}
.slick_like .article-col{ margin: 0 10px;}
.slick_like .caption_t{ min-height: initial;}
.like_list .caption_t h2{ font-size: 17px;}

.like_sec .container{ max-width: 1200px;}

/* ----- also_like_sec - end ----- */

.feature_top_title .thumbnail_mask{ border-bottom: 6px solid var(--color);}
#upperfeaturelist { border-top: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7; background-color: #f5f5f5; width: 100%;  margin: 20px auto 30px;}
#upperfeaturelist .feed_content { padding: 20px 15px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; line-height: 1;}
.page_no{ flex: 0 0 40px;}
.feed_link{ flex: 1; }
.feed_link a{ color: #222; line-height: 1.3;}
.feed_link a:hover{ opacity: .5;}
#upperfeaturelist .feed_content.active{ background: var(--color);}
#upperfeaturelist .feed_content.active .feed_link a{ color: #fff;}
#upperfeaturelist .feed_content.active .page_no{ color: #fff;}
.down_arrow { width: 28px; height: 20px;  margin: 30px auto 0;}
.feature_num {
    width: 60px;
    height: 60px;
    margin: 50px auto;
    background-color: #ff6752;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    line-height: 60px;
    font-size: 22px;
    font-weight: 500;
}

#lowerfeaturelist {
    width: 100%;
    margin: 50px 0;
}
.fe_low{ display: flex; align-items: center; margin-bottom: 5px;}
.f_l_icon{ flex: 0 0 35px; margin-right: 15px;}
.f_l_hl{ flex: 1; }
.f_l_hl b{ color: var(--color);}
.fl_container{ padding-left: 50px;}
.feed_content {
    border-top: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    background-color: #f5f5f5;
    width: 100%;
}
.caption_fl{
	display: flex; flex-wrap: wrap; margin: 10px 0; padding: 0px 0;
}
.caption_fl .page_no{ flex: 0 0 28px; margin-right: 5px; padding-left: 5px; font-size: 16px;}
.caption_fl  .page_con{ flex: 1; font-weight: 500; padding: 0 5px 0; margin: 0;}
.caption_fl  .page_con a{ padding: 0; font-size: 16px; color: #222; text-decoration: none; font-weight: 400;}
.caption_fl  .page_con a:hover{ text-decoration: none; border: none; opacity: .5;}
.caption_fl.active{ color: var(--color);}
.caption_fl.active .page_con a{ pointer-events: none; cursor: pointer; font-weight: 500; color: var(--color);}



/* ----------------------------------------------------------------------------------*/

@media(max-width: 1030px){	
	#top_header nav{display: none;}
	#top_banner{display: none;}
    .beginner_guide .col_4{ flex: 0 0 33.33%;}
    .col_3{ width: 50%; padding: 10px;}  
    
    .like_list .content_panel{ flex: 0 0 48%;}
    .like_list .caption_t h2{ font-size: 16px;}
    
    .also_like_sec .article-col{ display: flex; align-items: flex-start; margin-bottom: 25px;}
    .also_like_sec .thumbnail_mask{ flex: 0 0 45%;}
    .also_like_sec .caption_t{ padding-top: 0; padding-left: 10px; min-height: initial;}
    
}

@media(max-width: 786px){
	.index_header .container { width: 100%; padding: 30px 20px 10px;}
	.index_header .logo { width: 120px; height: 75px;}
	.index_header .control_toggle { right: 20px;}
	
    header .container{ width: 100%; padding: 5px 20px;}
    header.navbar-fixed-top .container, header.top_bk_header .container{padding: 5px 20px;}
	.container{ width: 100%; padding: 0px 20px 0;}
    .logo{ width: 120px; height: 75px;}
    .tagline{ width: 120px;}
	.control_toggle{ right: 20px;}
	.display_nor{display: none;}
	.display_mo{display: block;}
	
	.full_s_popup{padding: 40px;}
	.main_menu{ flex: 0 0 50%; padding-bottom: 80px;}
	.second_main{ flex: 0 0 50%; margin-left: inherit; padding-bottom: 80px;}
	.soc_net{ margin: 0 0 5px 10px; width: 40px;}
	
	.ovl_search .second_main{ flex: 0 0 100%;}
	
	.top_hi_article .thumbnail_mask{ margin-left: -20px; margin-right: -20px;}	
	
	.spillarea .container{ display: block;}
	.spill_box{ flex: 0 0 100%; margin: 0 auto 1px; display: block;}
    
    .main_content{ padding-top: 115px; }
    .beginner_guide .col_4{ flex: 0 0 50%;}
	
	.mov_up lottie-player, .mov_down lottie-player{ width: 120%;}
    
    .content_left{ padding-right: 0; padding-bottom: 20px;}
    
    .article_content .top_hi_1200_article .caption_t{ padding-right: 0;}    
    .footer .ovl_menu{ padding: 60px 40px 40px;}
    
    .like_list .content_panel{ flex: 0 0 100%;}
    .like_list .caption_t h2{ font-size: 17px;}
	
	.tips{ font-size: 1.2rem; padding: 6px 10px;}
	
	.caption_t h2{ font-size: 19px;}
	
	.feature_top_title .thumbnail_mask{ margin: 0 -20px;}
	.feature_top_title .thumbnail_mask a{ display: flex; justify-content: center;}
	.feature_top_title .thumbnail_mask a img{ height: 300px; width: auto; }
	
	.f_l_icon {flex: 0 0 30px; margin-right: 10px;}
	.fl_container { padding-left: 40px;}	
	
}

@media(max-width: 586px){
	.col_3{ width: 100%;}
    .col_2{ width: 100%;}
    .full_s_popup{padding: 30px 30px 80px;}
	
	.index_header .container { padding: 25px 20px 10px;}
	.index_header .logo { width: 99px; height: 62px;}
	.index_header .control_toggle a { height: 38.5px;}
	.index_header .control_toggle a { width: 31.5px;}
	.index_header .control_toggle #menu_btu { width: 29.4px;}
    
    .logo{ width: 99px; height: 62px;}
    .control_toggle a{height: 38.5px;}
    .control_toggle a{ width: 31.5px;}
    .control_toggle #menu_btu{ width: 29.4px;}

    .main_content{ padding-top: 95px;}
    
    .top_hi_article .caption_t h2{ font-size: 26px;}
	
	.logo_w{ width: 90px; height: 56px; margin-bottom: 25px;}
    .tagline.tagline_b, .tagline.tagline_w{display: none!important;}
	.main_menu{ flex: 0 0 100%; margin-bottom: 50px;}
	.hot_tag{ margin-top: 30px;}
	.second_main{ flex: 0 0 100%; text-align: left; padding-bottom: 160px;}
	.second_main ul{ display: -webkit-box; display: -moz-box; display: flex; justify-content: flex-start; margin-bottom: 15px; flex-wrap: wrap; padding-left: 0;}
	.second_main ul li{ padding: 0; margin-right: 15px;}
    .second_main ul li a{ font-size: 16px; line-height: 2em;}
    .soc_net{ margin: 0 15px 0 0 ;}
	.ovl_search{ padding: 15vh 0px 0 0px;}
	
	.caption_t{ min-height: inherit; padding-bottom: 5px;}
	
	.mov_up lottie-player, .mov_down lottie-player{ width: 140%;}
    .article_row .col_2{ flex: 0 0 100%; margin-bottom: 60px;}
    .article_row .col_2:last-child{ margin-bottom: 0;}   
    
    .like_list .caption_t h2{ font-size: 15px;}
    
    .footer .ovl_menu{ padding: 60px 30px 40px;}
	.footer .second_main{ padding-bottom: 20px}
    
    .row_spe{ display: block; margin-bottom: 15px;}
    .caption_t{ padding-top: 15px;}
    .also_like_sec { padding: 0px 0 20px;}
    .article_row{ margin-bottom: 30px;}
    .article_row .col_2{ margin-bottom: 30px;}	
    
    .section_icon{ width: 130px; height: auto; margin: 0 auto 10px;}
    
    .top_hi_1200_article .caption_t h2{ font-size: 26px;}
	
	.f_l_hl b{ display: block;}
	
	.square_thunbnail a{
		padding-bottom: 100%; position: relative;
	}
	.square_thunbnail a img{
		position: absolute; height: 100%; width: auto; left: 50%; transform: translateX(-50%);
	}
	.article-col:hover .square_thunbnail a img{
		transform: translateX(-50%);
		filter: brightness(.8);
	}
}


/* ----------- 09-27-2021 ----------*/
.enlarge {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    width: 30px;
    background-color: var(--color);
    z-index: 98;
    background-image: url(../images/icon_enlarge.png);
    background-repeat: no-repeat;
    background-position: center center;
}
.article-image a {
    width: 100%;
    height: 100%;
    display: block;
	position: relative;
}
#upperfeaturelist .feed_content{
	border-top: none;
	padding: 18px 15px;
}
#upperfeaturelist .feed_content:first-child{
	border-top: 1px solid #c7c7c7;
}
#upperfeaturelist{
	border: none;
}

.spill_box{ background: none;}
.bguide_col img { transition: .5s;}
.bguide_col:hover img{filter: brightness(80%);}

.video-container{
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.more_row { padding: 0px 20px 50px;}
.mostrecent_col{ margin-bottom: 15px;}
.spill_area{ margin-bottom: 20px;}
.spill_area .container{ margin: 0; width: 100%;}
.spill_box{ margin: 0 auto 15px; display: block;}


.has_copy{ position: relative; }
.has_copy .copy_link{ position: absolute!important; right: 0; width: 20px; top: 50%; transform: translateY(-50%);}
.has_copy .tag_box{ width: 100%; margin-bottom: 0; text-align: center;}

@media(max-width: 586px){
	.has_copy .tag_box{ margin-top: 0;}
}

/* ----------- 10-05-2021 ----------*/
.gen_page{ background: #3f3f3f; color: #fff;}
.gen_page .inner_container{ max-width: 700px; margin: auto; padding: 0px 40px;}
.gen_page h2{ text-align: center; margin-bottom: 50px; font-weight: 300;}
.gen_page h3{ color: var(--color); font-weight: 300;}
.gen_page p{ font-weight: 300;}
.contactus{ text-align: center;}
.contactus p{ margin: 25px 0; line-height: 1.5;}
.contactus a{ color: #fff;}
.contactus a:hover{ color: var(--color);}

.signup .form_row{ display: flex; margin: 20px 0;}
.signup .f_col_l{ flex: 0 0 22%; padding-top: 6px; font-weight: 300;}
.signup .f_col_r{ flex: 1;}
.signup .f_col_r .input_box{ width: 100%; outline: none; padding: 6px; border: none;}
.f_remark{ font-size: 14px; color: #ccc; padding-top: 3px;}
.f_error_msg{ font-size: 14px; color: var(--color); padding-top: 3px;}
.f_col_ra{ padding-top: 6px;}
.f_col_ra label{ margin-right: 20px;}
.form_row .valid{ margin: -3px 8px 0;}
.btn_row { text-align: center; margin: 30px 0;}
.signup button { background-color: var(--color); color: #fff; border: none; outline: none; padding: 8px 20px;}
.f_line_d{ padding-bottom: 3px;}
.f_line_d a{ color: #fff;}
.f_line_d a:hover{ color: var(--color);}
.signup .form_box h3 { text-align: center; color: #fff; font-size: 18px; font-weight: 300;}
.gen_page h4{ margin: 40px 0 15px; font-size: 24px; font-weight: 400;}

.hidelayer{ display: none;}

.spillarea.white_bg {
    background: none;
    padding: 40px 0;
}
.spillarea.gray_bg {
    background: #3f3f3f;
    padding: 60px 0;
}

@media(max-width: 786px){
	.signup .form_row{ display: block;}
}
@media(max-width: 586px){
	.gen_page .inner_container{ padding: 0px 30px;}
	.signup button{ width: 100%; padding: 15px;}
}


/* ----------- 10-08-2021 ----------*/
.signup .f_col_r span{ padding-top: 5px; display: inline-block;}
.signup .f_col_r .input_box{ color: #1B1B1B;}


/* ----------- 10-09-2021 ----------*/
.row_col .copy_link {
    flex: 0 0 20px;
    position: relative;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    outline: none;
}



/* ----------- 10-15-2021 ----------*/
.article-content .promo_question{ color: var(--color); font-weight: 400; font-size: 25px;}
.login_p_area{ padding: 20px 30px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.login_p_area .form_row {
    display: flex;
    margin: 20px 0;
}
.login_p_area .f_col_l {
    flex: 0 0 22%;
    padding-top: 6px;
    font-weight: 400;
	color: var(--color);
}
.login_p_area .f_col_r {
    flex: 1;
}
.login_p_area .f_col_r .input_box {
    width: 100%;
    outline: none;
    padding: 6px;
    border: 1px solid #ccc;
	color: #1B1B1B;
}
.login_p_area .f_remark{
	color: #969696;
	padding-top: 3px;
}
.login_p_area .f_line_d a{
	color: var(--color);
}
.login_p_area .f_line_d a:hover{
	opacity: .5;
}
.login_p_area button {
    background-color: var(--color);
    color: #fff;
    border: none;
    outline: none;
    padding: 8px 20px;
}

.list_dic{ padding-left: 25px; margin-bottom: 20px;}
.list_dic li{list-style: decimal; padding: 5px 0 5px 5px;}

@media(max-width: 786px){
	.login_p_area .form_row { display: block;}
}

@media(max-width: 586px){
	.login_p_area button { width: 100%; padding: 15px;}
}

/* ----------- 10-18-2021 ----------*/
.login_p_area .f_col_l{ flex: 0 0 27%;}

/* ----------- 10-21-2021 ----------*/
header.index_header nav{ z-index: 999;}
.tag_box{ display: flex; flex-wrap: wrap;}
a.tag{ margin-right: 5px;}