@charset "utf-8";





/************************************** header **************************************/

.header-container { position: relative; width: 100%;}
.header-container .header-wrap { width: 100%; margin: 0 auto; position: relative; height:65px; background:#eff1f8; padding:15px 58px; border-bottom:1px solid #e3e3e3}

/* LOGO */
.header-wrap .left-area {float:left;}
.header-wrap .left-area .logo-area { float: left; width:136px; height:34px; }
.header-wrap .left-area .logo-area > img { width: 100%; height: auto; }
.header-wrap .left-area .edit-mode-title {margin-left:15px; float:left; padding-top:11px;}
.header-wrap .left-area .edit-mode-title > span {padding:3px 10px; border:1px solid #642eff; color:#642eff;border-radius:15px; font-weight:600; font-size:1.2rem;}

.header-wrap .right-area {float:right;padding-top:2px;}
.header-wrap .right-area > ul > li {float:left; margin-right:15px;}
.header-wrap .right-area > ul > li:last-child {margin-right:0;}
.header-wrap .right-area > ul > li > a,
.header-wrap .right-area > ul li.draft-btn {display:block; font-weight:600; color:#898698; padding:6px 12px; border-radius:5px;}
.header-wrap .right-area > ul > li > a > .material-icons {padding-right:6px}
.header-wrap .right-area > ul > li > a:hover {background:#e3e7f5}


@media(max-width:1200px) {
	.header-container .header-wrap {padding:15px}
}

@media(max-width:1024px) {
	.header-wrap .left-area .logo-area {width:110px; height:28px;}
	.header-wrap .left-area .edit-mode-title {margin-left:8px; padding-top:7px; }
	.header-wrap .left-area .edit-mode-title > span {font-size:1.1rem; padding:3px 8px;}
	
	.header-wrap .right-area > ul > li {margin-right:7px;}
	.header-wrap .right-area > ul > li > a {padding: 5px 9px;}
	.header-wrap .right-area > ul > li > a > .material-icons {padding-right:4px}
}

@media(max-width:500px) {
	.header-container .header-wrap {padding:18px 10px} 
	.header-wrap .left-area .logo-area {width:95px; height:24px;}
	.header-wrap .left-area .edit-mode-title > span {font-size:1rem; padding:2px 5px;} 
	.header-wrap .right-area {padding-top:0px}
	.header-wrap .right-area > ul > li > a {font-size:1.2rem}
	.header-wrap .right-area > ul > li:first-child {display:none;}
}

/************************************** section **************************************/

.sec-width {width:1200px; margin:0 auto;}



/************************************** page title **************************************/

/* banner */
.banner-text-wrap { width: 1200px; margin: 0 auto; padding: 90px 0;}
.banner-text-wrap .banner-text { text-align: center; }
.banner-text-wrap .banner-text .sub-tit { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.6px; background: -webkit-linear-gradient(45deg, #37eaff, var(--theme-color) 110%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;word-break: keep-all;  }
.banner-text-wrap .banner-text .sub-tit br { display: none; }
.banner-text-wrap .banner-text .main-tit { padding-top:30px; font-size: 3rem; font-weight: 500; word-break: keep-all; }
.banner-text-wrap .banner-text .main-tit br { display: none; }

@media (max-width: 1200px) {
	.banner-text-wrap { width:100%; padding: 90px 30px; }
}
@media (max-width: 768px) {
	.banner-text-wrap { padding: 60px 30px; }
	.banner-text-wrap .banner-text .sub-tit { font-size: 1.3rem !important; }
	.banner-text-wrap .banner-text .main-tit { font-size: 2.7rem !important; padding-top: 20px !important; }
}

@media (max-width: 500px) {
	.banner-text-wrap { padding: 40px 20px; }
	.banner-text-wrap .banner-text .sub-tit { font-size: 1.2rem !important; }
	.banner-text-wrap .banner-text .main-tit { font-size: 2.2rem !important; padding-top: 10px !important; }
}













/************************************** content-width **************************************/

.section-width { width:1200px; margin: 0 auto; position: relative; padding-top: 10px;}

@media(max-width: 1200px) {
	.section-width { width: 100%; padding:30px; }
}
@media(max-width: 500px) {
	.section-width { padding: 20px; }
}