/*commond use on /web */
.cursor_pointer{cursor:pointer;}
.home_bg_white_opacity_03{opacity: 0.3; background-color: rgb(255, 255, 255);}
.no_border{border:0px;}
.home_image_height{height: 4.7rem;}
.home_login_user_icon{width:26px; height:26px; border:solid 2px white; max-width:26px !important;}
.home_height_60px{height:60px;}
.line_height_1_25{line-height:1.25em;}
.line_height_22{line-height:1.25em;}

.home_sm_list_icon{ width:30px; height:auto; border:solid 2px #ffffff; padding-right:4px; padding-bottom:5px; }
.web_category_list_date{color:#fbae3b; font-style:italic; font-size:0.875em;}
.web_user_signin_img_flag{height:22px; width:22px;}


.height_4_7_rem{height: 4.7rem;}
.line_height_1_25em {line-height:1.25em;}


.font_size_0_5em{font-size:0.5em;}
.font_size_0_75em{font-size:0.75em;}
.font_size_0_875em{font-size:0.875em;}

.font_size_1em{font-size:1em;}
.font_size_1_25em{font-size:1.25em;}
.font_size_1_5em{font-size:1.5em;}
.font_size_1_75em{font-size:1.75em;}
.font_size_1_875em{font-size:1.875em;}
.font_size_2em{font-size:2em;}
.font_size_2_25em{font-size:2.25em;}
.font_size_2_5em{font-size:2.5em;}
.font_size_2_75em{font-size:2.75em;}
.font_size_2_875em{font-size:2.875em;}
.font_size_3em{font-size:3em;}
.font_size_3_5em{font-size:3.5em;}


a.linelogin, a.linelogin:visited { display:inline-block; position:relative; width: 142px; height:40px; background-image: url(../../assets_app/images/line/DeskTop/2x/20dp/btn_login_base.png); background-repeat:no-repeat; }
a.linelogin:hover { background-image: url(../../assets_app/images/line/DeskTop/2x/20dp/btn_login_hover.png); }
a.linelogin:active { background-image: url(../../assets_app/images/line/DeskTop/2x/20dp/btn_login_press.png); }
/*a.linelogin::before{
		content: url(../../assets_app/images/line/DeskTop/2x/20dp/btn_base.png) ;
}*/


/*____________________________________
# kawpod_extension
_____________________________________*/
.area_img_body:hover .area_img img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  border:0px !important;
  border-radius: 15px !important;
}
.area_img {
  overflow: hidden;
  margin-bottom: 15px;
}
.area_img img {
  transition: 0.3s ease-in-out;
}
.card_hover{
	 transition: box-shadow ease-in-out 0.3s;
}
.card_hover:hover{
	box-shadow: 0 0 20px rgba(239,103,130,.2); 
	border:solid 1px #c0c0c0;
}

.card_hover:hover .area_img_hover_scale_up img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.area_img_hover_scale_up{
	overflow: hidden;
}
.area_img_hover_scale_up img {
  transition: 0.3s ease-in-out;
}

.news_list_highlight_date{color:#ff9933; font-size:.875em;}
.news_list_highlight_title{color:#0253c0;}
.news_list_highlight_title:hover{color:#0468cf;}

.person_area_img_body:hover .person_area_img img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  border:0px !important;
  border-radius: 15px !important;
}
.person_area_img {
  overflow: hidden;
  margin-bottom: 15px;
}
.person_area_img img {
  transition: 0.3s ease-in-out;
  border:solid 2px #e8cbda !important;
}

a.readmore, a.readmore:visited, a.readmore:link, a.readmore:active{color:#0099ff;}
a.readmore{
	-webkit-transition: width .35s ease-in-out;
	transition: width .35s ease-in-out;
	border-bottom:solid 0px green;
}

a.readmore:hover{
	color:#ff9966;
	botder-bottom:solid 2px red;
}

a.readmore:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 0px; /* Change this to whatever width you want to have before hover. */
    padding-top: 0px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #ff9966; /* This creates the border. Replace black with whatever color you want. */
    transition: .3s; /* This establishes the amount of time in seconds the animation should take from start to finish */
}

a.readmore:hover:after {
    width: 98%; /* This will be the new width of your border when on hover */
}


a.menu_underline:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 0px; /* Change this to whatever width you want to have before hover. */
    padding-top: 0px; /* This creates some space between the element and the border. */
    border-bottom: 3px solid #ed1c24; /* This creates the border. Replace black with whatever color you want. */
    transition: .5s; /* This establishes the amount of time in seconds the animation should take from start to finish */
}

a.menu_underline:hover:after {
    width: 98%; /* This will be the new width of your border when on hover */
}

.underline3 { border-bottom: 3px solid #ed1c24; /* This creates the border. Replace black with whatever color you want. */ }