@charset "utf-8";





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

.header-container { position: relative; width: 100%; }
.header-container:before { content:''; top:0; left: 0; position: absolute; width:100%; height: 540px; background-image: url('../../img/common/banner_bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; }
.header-container .header-wrap { width: 1200px; margin: 0 auto; position: relative; padding-top: 50px; }

/* LOGO */
.header-wrap .logo-area { cursor: pointer; float: left; width:175px; position: relative; top: -10px; }
.header-wrap .logo-area > img { width: 100%; height: auto; }

/* GNB - PC */
.header-wrap .gnb-area .nav-pc { width: calc(100% - 325px); position: absolute; top: 60px; left: calc(50% + 13px); transform: translateX(-50%);}
.header-wrap .gnb-area .nav-pc > ul { text-align: center; }
.header-wrap .gnb-area .nav-pc > ul > li { display: inline-block; position: relative; }
.header-wrap .gnb-area .nav-pc > ul > li > a { font-size: 1.6rem; font-weight: 600; padding: 12px 25px; transition: background .15s, color .2s; }
.header-wrap .gnb-area .nav-pc > ul > li > a > .material-icons { padding-left: 3px;}
.header-wrap .gnb-area .nav-pc > ul > li.m-select > a,
.header-wrap .gnb-area .nav-pc > ul > li > a:hover { color: var(--theme-color); }

.header-wrap .gnb-area .nav-pc .sub-menu { display: none; width:auto; text-align: center; width:100%; margin-top: 20px;}
.header-wrap .gnb-area .nav-pc .sub-menu.m-open { display: inline-block; }
.header-wrap .gnb-area .nav-pc .sub-menu ul {background:#f2f4fd; padding:10px; border-radius: 50px; width: auto; display: inline-block; }
.header-wrap .gnb-area .nav-pc .sub-menu ul > li { display: inline-block; margin: 0 5px;}
.header-wrap .gnb-area .nav-pc .sub-menu ul > li > a { display: block; font-size: 1.3rem; padding: 8px 20px; border-radius: 50px; color:#9499b3; font-weight:600;  transition: background .15s, color .2s; }
.header-wrap .gnb-area .nav-pc .sub-menu ul > li:hover a,
.header-wrap .gnb-area .nav-pc .sub-menu ul > li.m-select > a { background:#fff; color:#280553; box-shadow: 1px 1px 4px rgba(0,0,0,0.1); }

/* GNB - mobile */
.header-wrap .gnb-area .nav-mo { display: none; }
.header-wrap .gnb-area .nav-mo .mo-hamburger { position: absolute; top: 30px; right:30px; cursor: pointer; width:35px; height:35px; padding-top: 12px; z-index: 99;}
.header-wrap .gnb-area .nav-mo .mo-hamburger:before { content:''; display: block; width:100%; height: 100%; border-radius: 50%; background:var(--theme-color); position: absolute; top: 0; left:0; z-index: -1;}
.header-wrap .gnb-area .nav-mo .mo-hamburger > span { display: block; height:1px; width:17px; margin: 0 auto 4px; background:#fff; opacity: 1; transform: rotate(0); transition: transform .2s, opacity .2s, margin .2s; }
.header-wrap .gnb-area .nav-mo .mo-hamburger > span:last-child { margin-bottom:0; }
.header-wrap .gnb-area .nav-mo .nav-mo-area { position: fixed; top: 0; right: -305px; width: 300px; padding: 80px 20px 20px; border-radius: 0; background:var(--theme-color); z-index: 90; height: 100vh; overflow-y: auto; transition: right .2s; }
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu { padding: 30px 0;}
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li { position: relative; }
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li > a { color: #fff; padding: 15px; font-size: 1.5rem; display: block; border-bottom:1px solid rgba(255,255,255,0.1); }
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li > a .material-icons { position: absolute; top:13px; right:0; transform: rotate(0); transition: transform .2s; }
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li > ul { transform: scaleY(0); padding:0; height:0; background:rgba(0,0,0,0.1); transition: transform .3s, padding .2s, height .2s; transform-origin: top; overflow: hidden; }
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li.m-select > ul { transform: scaleY(1); padding: 10px; height:auto; }
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li.m-select > a .material-icons { transform: rotate(180deg);}
.header-wrap .gnb-area .nav-mo .nav-mo-area > ul.menu > li > ul > li > a { color: #fff; padding:10px; font-size: 1.4rem; display: block; }
.header-wrap .gnb-area .nav-mo .nav-mo-area .user-tool ul { border-radius: 5px; overflow: hidden; }
.header-wrap .gnb-area .nav-mo .nav-mo-area .user-tool ul li { float: left; width:50%; text-align: center; padding: 10px 0; background:#fff; }
.header-wrap .gnb-area .nav-mo .nav-mo-area .user-tool ul li:first-child { border-right:1px solid var(--theme-color); }
.header-wrap .gnb-area .nav-mo .nav-mo-area .user-tool ul li a { color:var(--theme-color); font-size: 1.2rem; height:100%; width:100%; font-weight: 600;}
.header-wrap .gnb-area .nav-mo .nav-mo-area .user-tool ul li a .material-icons { font-size: 17px; margin-right:5px; }
.header-wrap .gnb-area .nav-mo.mo-open .nav-mo-area { right:0; }
.header-wrap .gnb-area .nav-mo.mo-open .mo-hamburger { position: fixed; }
.header-wrap .gnb-area .nav-mo.mo-open .mo-hamburger:before { border:1px solid #fff;}
.header-wrap .gnb-area .nav-mo.mo-open .mo-hamburger span { background:#fff; }
.header-wrap .gnb-area .nav-mo.mo-open .mo-hamburger span.line1 { transform: rotate(-45deg); margin:5px auto -2px; }
.header-wrap .gnb-area .nav-mo.mo-open .mo-hamburger span.line2 { transform: rotate(45deg); margin:1px auto 0;}
.header-wrap .gnb-area .nav-mo.mo-open .mo-hamburger span.line3 { opacity: 0; }


/* Start btn */
.header-wrap .start-btn-area { float: right; }
.header-wrap .start-btn-area .btn-wrap button { position: relative; height:35px; padding: 0 25px; box-shadow:none; transition: box-shadow .2s, padding .2s;}
.header-wrap .start-btn-area .btn-wrap button .material-icons { font-size: 16px; position: absolute; top: 8px; right:20px; opacity: 0; transition: opacity .2s, right .2s;}
.header-wrap .start-btn-area .btn-wrap button:hover { padding: 0 35px 0 25px; box-shadow: 0 0 0 4px rgba(100,46,255,0.19); }
.header-wrap .start-btn-area .btn-wrap button:hover .material-icons { right:15px; opacity: 1;}

/* User tool */
.header-wrap .user-tool-area { position: absolute; top: 20px; right: 0;}
.header-wrap .user-tool-area ul li { float: left; padding: 0 10px; }
.header-wrap .user-tool-area ul li a { font-size: 1.3rem; }

@media (max-width: 1200px) {

	/* header */
	.header-container:before { background-position: top center; background-size: 100%; }
	.header-container .header-wrap { width: 100%; padding: 50px 30px 0; }

	/* User tool */
	.header-wrap .user-tool-area { right:30px; }
}

@media (max-width: 1024px) {

	/* header */
	.header-container .header-wrap { width: 100%; padding: 30px 30px 0; }

	/* GNB mobile */
	.header-wrap .gnb-area .nav-pc { display: none; }
	.header-wrap .gnb-area .nav-mo { display: block; }
	
	/* Start btn */
	.header-wrap .start-btn-area { margin-right:50px; }
	.header-wrap .start-btn-area .btn-wrap button,
	.header-wrap .start-btn-area .btn-wrap button:hover { padding: 0 30px; box-shadow: 0 0 0 4px rgba(100,46,255,0.19);  }
	.header-wrap .start-btn-area .btn-wrap button .material-icons,
	.header-wrap .start-btn-area .btn-wrap button:hover .material-icons { display: none; }

	/* User tool */
	.header-wrap .user-tool-area { display: none; }
}

@media (max-width: 500px) {

	/* header */
	.header-container .header-wrap { padding: 20px 20px 0;}

	/* logo */
	.header-wrap .logo-area { width: 130px; top: 0; }

	/* GNB mobile */
	.header-wrap .gnb-area .nav-mo .mo-hamburger { top:20px; right:20px; }
	
	/* Start btn */
	.header-wrap .start-btn-area { margin-right:50px; }
	.header-wrap .start-btn-area .btn-wrap button .mo-none { display: none; }
}



/************************************** 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; }
}

/************************************** footer **************************************/

.footer-container { width:100%; position: relative; padding: 40px 20px; border-top:1px solid #d3d7dc; margin-top: 160px; text-align: center; }
.footer-container .footer-area { width:100%; position: relative; }
.footer-container .footer-area .logo { font-size: 2rem; color:#2b3266; font-weight: 900; padding-bottom: 15px; }
.footer-container .footer-area .terms a { font-size: 1.3rem; color:#9198b0; display: inline-block; margin: 0 10px 15px; font-weight: 600; }
.footer-container .footer-area .terms a:hover { text-decoration: underline; }
.footer-container .footer-area .info span { display: inline-block; font-size: 1.3rem; color:#8385a0; padding: 0 10px 10px; }
.footer-container .footer-area .copyright { font-size: 1.3rem; color:#8385a0; }














/************************************** 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; }
}