@charset "UTF-8";

/* noto-serif-kr-regular - korean_latin */
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-kr-v1-korean_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif KR'), local('NotoSerifKR-Regular'),
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-regular.svg#NotoSerifKR') format('svg'); /* Legacy iOS */
}
/* noto-serif-kr-700 - korean_latin */
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Serif KR Bold'), local('NotoSerifKR-Bold'),
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-serif-kr-v1-korean_latin/noto-serif-kr-v1-korean_latin-700.svg#NotoSerifKR') format('svg'); /* Legacy iOS */
}

.font-NotoSerif {
	font-family: 'Noto Serif KR';
}
.font-NotoSerifKR-Bold {
  font-family: 'Noto Serif KR';
  font-weight: 700;
}
.italic {
	font-style:italic;
}
.f-normal{
	font-style: normal;
}
.subtit {
	font-size : 35px;
	text-shadow: 0 2px 1px rgba(0,0,0,.15);
}
.subtit2 {
	font-size : 30px;
	color: #005b6b;
}

.subtit_t {
	font-size : 24px;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.subtit_t2 {
	font-size : 20px;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.subtit_t3 {
	font-size: 1.3rem;
	line-height: 2rem;
}
/*------------font end------------*/

.ms-header { /* ���� ��� ���� ���� */
  min-height: 50px;
}

.ms-thumbnail .ms-thumbnail-caption {
	background-color: rgba(66,66,66,.6);
}

.ms-icon.ms-icon-main { /* main card icon ����*/
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 50px;
  background-size: cover;
}

.ms-navbar .navbar-collapse .navbar-nav .nav-item>a, .ms-lead-navbar .navbar-collapse .navbar-nav .nav-item>a {
	padding: 0 15px;
}

.ms-icon.ms-icon-lg {
	font-size: 37px;
}

/* �׺� �׸���
.ms-navbar, .ms-lead-navbar {
	-webkit-box-shadow: 0px 0px 0px 0px #000;
	-moz-box-shadow:    0px 0px 0px 0px #000;
  box-shadow: 0 0px 0px rgba(0,0,0,.0);
} */

.color-gray {
  color: #777!important;
}

.color-pink {
  color: #fab2ff;
}

.color-brown {
  color: #c07c41;
}

.color-lightgreen {
	color: #8aef1d;
}

.color-lightgray {
  color: #bcbcbc;
}

.color-deepcyan{
	color: #368c96;
}

.color-blue {
  color: #4684c4;
}

.color-lightblue {
  color: #90d4ff;
}

.ms-icon.color-gray {
  color: #777!important;
  background-color: #efefef;
	margin: 0px;
}


i.icon {
	margin: 0px;
}

.responsive {
  width: 100%;
  height: auto;
}

.responsive-80 {
  width: 80%;
  height: 80%;
}

.main-tx {
  border: none;
  color: #616161;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 30px 30px 10px 30px;
  padding: 3rem 3rem 1rem 3rem;
  position: relative;
  font-weight: 400;
}

.btn-c-dark {
  background-color: #3b4c55;
  color: #fff;
  border: none;
  border-radius: 0px;
  display: block;
	width: 100%;
  padding: 10px 20px;
  padding: 1rem 2rem;
  transition: all ease .3s;
  text-transform: uppercase;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.3)
}

.main-event-card {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
	0 3px 1px -2px rgba(0,0,0,.2),
	0 1px 5px 0 rgba(0,0,0,.12);
  background-color: #fff;
	margin-bottom: 2rem;
  border: 0;
	border-bottom: solid 3px #f44336;
  border-radius: 3px;
}

.ms-hero.ms-hero-material:before {
	content:none;
}

.ms-hero.ms-hero-material .ms-hero-material-text-container .ms-hero-material-title {
    text-align: left;
    margin-bottom: 0.5rem;
}

.ms-hero.ms-hero-material .ms-hero-material-text-container .ms-hero-material-list li {
    margin-bottom: 1.5rem;
}

.ms-hero.ms-hero-material .ms-hero-img {
    margin: 0 0 0 3rem;
}

.icon-dic {
	margin-right: 10px;
}


/* main card ����̹��� */
.ms-hero-img-main1 {
	background-image: url(../imgs/main_th1_bg.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.ms-hero-img-main2 {
	background-image: url(../imgs/main_th2_bg.jpg);
	background-size: cover;
	background-position: center center;
}
.ms-hero-img-main3 {
	background-image: url(../imgs/main_th3_bg.jpg);
	background-size: cover;
	background-position: center center;
}
.ms-hero-img-main4 {
	background-image: url(../imgs/main_th4_bg.jpg);
	background-size: cover;
	background-position: center center;
}
.ms-hero-img-main5 {
	background-image: url(../imgs/main_th5_bg.jpg);
	background-size: cover;
	background-position: center center;
}
.ms-hero-img-main6 {
	background-image: url(../imgs/main_th6_bg.jpg);
	background-size: cover;
	background-position: center center;
}
/* main card ����̹��� end */

.ms-fare-btn {
	background-color: #3b4c55;
	color: #fff;
	border: none;
	border-radius: 0px;
	display: block;
	width: 100%;
	padding: 10px 20px;
	padding: 1rem 2rem;
	transition: all ease .3s;
	text-transform: uppercase;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.3)
}
.ms-fare-btn:hover, .ms-subscribre-btn:focus {
	background-color: #3b4c55;
}
.ms-fare-btn:hover, .ms-subscribre-btn:focus {
	background-color: rgba(0,0,0,.5);
}
.ms-fare-btn:after {
	font-family: Material-Design-Iconic-Font;
	font-size:2rem;
	content: "\f1f5";
	margin-left: 10px;
	transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
}
.ms-fare-btn:hover:after, .ms-fare-btn:focus:after {
	font-size:2rem;
	content: "\f1f7";
	display: inline-block;
	margin-left: 20px;
}
.ms-fare-btn:after {
	font-family: Material-Design-Iconic-Font;
	font-size:2rem;
	content: "\f1f5";
	margin-left: 10px;
	transition: all ease .3s;
	-webkit-transition: all ease .3s;
	-moz-transition: all ease .3s;
}

.carousel-cards .carousel-indicators.carousel-indicators-dark li {
	border-color: #666;
}
.carousel-cards .carousel-indicators.carousel-indicators-dark li.active {
	background-color: #666;
}

/* modal pricing-table ����*/
.pricing-table-container {
	background-color: #fff;
	box-shadow: none;
}
.pricing-table-head {
	font-size: 1.4rem;
	text-align: center;
	background-color: #fff;
	margin: 0;
	font-weight: 700;
	padding: 10px;
}
.pricing-table-head.warning {
	border-bottom: 3px solid #ff9800;
}
.table-tx-head{
	font-size:1.2rem;
	font-weight:700;
	border-top: 3px solid #333;
}
.table thead.warning {
	border-bottom: 1px solid #ff9800;
}
.table thead.royal {
	border-bottom: 1px solid #9b26ad;
}
.table thead.info {
	border-bottom: 1px solid #1ebdd2;
}
.table thead.success {
	border-bottom: 1px solid #50af55;
}
.table thead.primary {
	border-bottom: 1px solid #1daaf1;
}
.table-tx-body{
	font-size:1.2rem;
}
.table td, .table th {
	padding: .3rem;
	vertical-align: top;
}
.table tr td, .table tr th {
	padding: 5px;
	border-color: #e0e0e0!important;
}
.column1 {
	width:15%;
}
.column2 {
	width:25%;
}
.column3 {
	width:28%;
}
.column4 {
	width:8%;
}
.tb-bg{
	background-color:#fafafa;
}
.td-warning-bg {
	background-color:#f8f5f0;
}
.td-royal-bg {
	background-color:#f6f1ff;
}
.td-info-bg {
	background-color:#e9f4f5;
}
.td-success-bg {
	background-color:#eff9f0;
}
.td-primary-bg {
	background-color:#f8f5f0;
}
.table-bottom{
	border-bottom: 1px solid #999;
}


/* tab ���� */
#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	border-bottom: 3px solid !important;
}

/*����*/
.ms-site-title-lg span {
    font-weight: 700;
}

.lead.lead-lg {
    font-size: 1.8rem;
		line-height: 1.8;
}
/*���� end*/

/* ���� */
.ms-icon.color-natmal-read {
	color: #392052;
	background-color: #fff;
	font-size: 2.3rem;
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

.ms-icon.color-royal2 {
	color: #333!important;
	background-color: transparent;
	font-size:4rem;
}

.card.card-royal2 {
	border-bottom: solid 3px #acacac;
	border-radius: 3px;
}

.btn.btn-raised.btn-royal2 {
	background-color: #fff;
	color: #67199a;
	border: solid 1px #d8aff3;
}

.btn.btn-raised.btn-royal2:hover {
	background-color: #a353d7;
	color: rgba(255,255,255,.84);
	border: solid 1px #a353d7;
}

.ms-icon.color-royal3 {
	color: #333!important;
	background-color: transparent;
	font-size:4.5rem;
}

.card.card-royal3 {
	border-bottom: solid 3px #acacac;
	border-radius: 3px;
	background-color:#efefef;
}

.btn.btn-raised.btn-royal3 {
	background-color: #b08258;
	color: rgba(255,255,255,.84);
}

.btn.btn-raised.btn-royal3:hover {
	background-color: #955922;
	color: rgba(255,255,255,.95);
}

.ms-hero-img-read-app {
    background-image: url(../imgs/bg_read_app.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.subtit-read-app1 {
	font-size: 2rem;
}
.subtit-read-app2 {
	font-size: 3rem;
	padding: 1rem 0px;
}

/* ���� end */

/* ���� */
.dic-search {
    padding: 3rem 0;
    background-color: #4c6773;
    color: white;
    box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.14), inset 0 3px 1px -2px rgba(0,0,0,.2), inset 0 1px 5px 0 rgba(0,0,0,.12);
}

.btn:not(.btn-raised), .btn:not(.btn-raised).btn-default {
	color: #fff;
	font-size: 12pt;
}

.btn-group, .btn-group-vertical {
	position: relative;
	margin: 0px;
}

.form-group {
	padding-bottom: 0px;
	margin: 0px;
}

.card-custom{
	background-color:rgba(255,255,255,0);
  box-shadow: none;
}

.card-dic-detail {
  padding: 20px 20px 0px 20px;
}

.dic-search-bg {
	margin-top: 0.8rem;
	color: #fbb735;
	font-weight: 500;
	/*background-color:rgba(0, 0, 0, 0.3); */
	border: 1px solid #f47921;
	padding:13px;
}

.form-custom {
	font-size: 1.3rem;
	color:#333;
	background-color:#ffffff;
	border:1px solid #999;
	border-radius: 3px;
	width:100%;
}

select.form-custom {
	padding: 3px 10px;
	margin: 3px 0px;
}

.ms-input-subscribe label{
	color:rgba(255,255,255,.7)!important
}
.ms-input-subscribe label i{
	margin:0 5px
}
.is-focused .ms-input-subscribe label{
	color:white!important
}
.ms-subscribre-btn{
	background-color:rgba(0,0,0,.2);
	color:#fff;border:none;
	display:block;
	width:100%;
	border-radius:50px;
	padding:10px 20px;
	padding:1rem 2rem;transition:all ease .3s;
	text-transform:uppercase
}
.ms-subscribre-btn:after{
	font-family:Material-Design-Iconic-Font;
	content:"\f15a";
	margin-left:10px;transition:all ease .3s
}
.ms-subscribre-btn:hover,.ms-subscribre-btn:focus{
	background-color:rgba(0,0,0,.3)
}
.ms-subscribre-btn:hover:after,.ms-subscribre-btn:focus:after{
	content:"\f159";
	display:inline-block;
	margin-left:20px;
}
.ms-subscribre-btn:active{
	box-shadow:inset 0 2px 2px 0 rgba(0,0,0,.14),inset 0 3px 1px -2px rgba(0,0,0,.2),inset 0 1px 5px 0 rgba(0,0,0,.12);
	background-color:rgba(0,0,0,.4);
}

div.wordGradeBar {
	background-color: #686868 !important;
}
div.wordGrade {
	border-bottom: solid 3px #7c7c7c;
	border-radius: 3px;
}
div.searchHistoryBar {
	background-color: #686868!important;
}
div.searchHistory {
	border-bottom: solid 3px #7c7c7c;
	border-radius: 3px;
}
div.wordBookBar {
	background-color: #4d4d4d !important;
}
div.wordBook {
	border-bottom: solid 3px #7c7c7c;
	border-radius: 3px;
}

.btn.btn-raised.btn-warning2 {
	background-color: #955922;
	color: rgba(255,255,255,.84);
	border: solid 1px #955922;
}

.btn.btn-raised.btn-warning2:hover {
	background-color: #fff;
	color: #955922;
	border: solid 1px #b08258;
}

.btn.btn-raised.btn-warning3 {
	background-color: #fff;
	color: #955922;
	border: solid 1px #b08258;
}

.btn.btn-raised.btn-warning3:hover {
	background-color: #955922;
	color: rgba(255,255,255,.84);
	border: solid 1px #955922;
}

.line-box{
	border:dashed 1px #999;
	padding:20px 0;
}

.wrap.wrap-dic-app {
    background-color: rgba(0,0,0,0);
    color: #fafafa;
    background-image: url(../imgs/bg_dic_app.jpg);
    background-position: top bottom;
    background-size: cover;
    position: relative;
    -webkit-animation: moveBack;
    animation: moveBack;
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
		padding: 3rem 0 1rem 0;
}
.wrap.wrap-dic-app:after {
    display: block;
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,0);
}

.ms-hero-img-dic-app {
    background-image: url(../imgs/bg_dic_app.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
/* ���� end */

/* �������� */
.wrap.wrap-puzzle {
	background-color: #e4e4e4;
	padding: 50px 0;
}

.ms-puzzle-bg {
	background-image: url(../imgs/bg_puzzle.jpg);
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.owl-dots .owl-dot.active span {
	background-color: #666;
}
.owl-dots .owl-dot span {
	border: solid 2px #999;
}

.ms-hero-img-puzzle-app {
    background-image: url(../imgs/bg_puzzle_app.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
/* �������� end */

/* ����˻� */
.color-writing-icon{
	color:#fff;
	background-color: #2aabee;
}

.btn.btn-raised.btn-blue {
	background-color: #fff;
	color: #508fcf;
	border: solid 1px #508fcf;
}
.btn.btn-raised.btn-blue:hover {
	background-color: #508fcf;
	color: rgba(255,255,255,.84);
	border: solid 1px #508fcf;
}

.ms-hero-img-writing-sample {
    background-image: url(../imgs/bg_writing_sample.jpg);
    background-size: cover;
    background-position: center center;
}

.ms-hero-img-writing-info {
    background-image: url(../imgs/bg_writing_info.jpg);
    background-size: cover;
    background-position: center center;
		color : #fff;
}

.ms-icon.ms-icon-writing {
    color: #fff;
		background-color: none;
}

.ms-hero-img-writing-app {
    background-image: url(../imgs/bg_writing_app.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
/* ����˻� end */


/*����*/
.btn.btn-raised.btn-success2 {
	background-color: #fff;
	color: #288937;
	border: solid 1px #7cb785;
}
.btn.btn-raised.btn-success2:hover {
	background-color: #4f8e59;
	color: rgba(255,255,255,.84);
	border: solid 1px #7cb785;
}

.ms-hero-img-en-app {
    background-image: url(../imgs/bg_en_app.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
/*���� end*/


/* subtit-bg-img*/
.ms-hero-img-sub1 {
	background-image: url(../imgs/bg_tit_sub1.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.ms-hero-img-sub2 {
	background-image: url(../imgs/bg_tit_sub2.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.ms-hero-img-sub3 {
	background-image: url(../imgs/bg_tit_sub3.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.ms-hero-img-sub4 {
	background-image: url(../imgs/bg_tit_sub4.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.ms-hero-img-sub5 {
	background-image: url(../imgs/bg_tit_sub5.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-hero-bg-dark-light:after {
	background-color: rgba(38,38,38,.7);
}

.ms-hero-img-dic {
	background-image: url(../imgs/bg_orange.jpg) !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-hero-img-read {
	background-image: url(../imgs/bg_green_02.jpg) !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-hero-img-puzzle {
	background-image: url(../imgs/bg_blue.jpg) !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-hero-img-en {
	background-image: url(../imgs/bg_green.jpg) !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-hero-img-writing {
	background-image: url(../imgs/bg_purple.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-hero-img-service {
	background-image: url(../imgs/bg_blue_02.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.ms-service {
	padding: 1.2rem 0;
	background-color: #677d88;
	color: white;
	box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.14), inset 0 3px 1px -2px rgba(0,0,0,.2), inset 0 1px 5px 0 rgba(0,0,0,.12);
}

/* subtit-bg-img end*/

/* ����ǥ ���۹��� ��ư ��ġ���� */
.ms-configurator-btn {
	left: -3px !important;
	top: 160px !important;
}

/* ��� ���� ���� ����... */
.tooltip {
	z-index: 2080;
}

/* ribbon */
.ribbon-fm {
	position: absolute;
	left: -5px; top: -5px;
	z-index: 1;
	overflow: hidden;
	width: 75px; height: 75px;
	text-align: right;
}
.ribbon-fm span {
	font-size: 12px;
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	width: 100px;
	display: block;
	background: #1bb5ac;
	background: linear-gradient(#1bb5ac 0%, #1bb5ac 100%);
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	position: absolute;
	top: 19px; left: -21px;
}
.ribbon-fm span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1bb5ac;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1bb5ac;
}
.ribbon-fm span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1bb5ac;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1bb5ac;
}

.ribbon-m {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon-m span {
  font-size: 12px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #f06f2b;
  background: linear-gradient(#f06f2b 0%, #f06f2b 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon-m span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #f06f2b;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #f06f2b;
}
.ribbon-m span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #f06f2b;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #f06f2b;
}

.ribbon-f {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon-f span {
  font-size: 12px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #2886cd;
  background: linear-gradient(#2886cd 0%, #2886cd 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon-f span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #2886cd;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #2886cd;
}
.ribbon-f span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #2886cd;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #2886cd;
}

/*---------------------- ����� ------------------------*/
@media (max-width: 800px) {
	body{
		font-size:1.4rem;
		line-height:1.8em;
	}

	.responsive-80 {
		width:100%
	}

	.card .blockquote .m-avatar {
		width: 70px;
		height: 70px;
		border-radius: 100%;
		box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
		position: absolute;
		top: 5px;
		left: 10px;
		-webkit-transform: translate(-25%,-25%);
		transform: translate(-25%,-25%);
		transition: all ease .3s;
	}

	/*sub index top title */
	.subtit {
		font-size: 22px;
		letter-spacing: -1px;
	}
.subtit_t {
	font-size : 24px;
	text-shadow: 0 1px 1px rgba(0,0,0,.1);
	line-height: 1.5;
}

	.lead {
		font-weight: 300;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 18px;
		line-height: 1.8rem;
		margin: 0px 20px;
	}
	.ms-icon.ms-icon-lg {
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
	}

		#subbg-title  {
			display: none;
		}
		#subbg-title-center {
		  text-align: center;
		}

	.subtit-read-app1 {
		font-size: 1.5rem;
		padding: 1rem 0px 0px 0px;
		text-align: center;
	}
	.subtit-read-app2 {
		font-size: 2.1rem;
		padding: 0.5rem 0px;
		text-align: center;
	}
	#btn-read-app {
		text-align: center;
	}

	#icon-writing {
		display:none;
	}
}