@charset "utf-8";

/*기본 레이아웃::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#wrapper {overflow: hidden;}


/*헤더::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
header{position: fixed; left: 0; top: 0; width: 100%; z-index: 105; text-align: center; padding-bottom: 30px; transition: all .25s ease;}
header::after{content: ""; display: block; clear: both;}
header > h1{width: 280px; height: 30px; background: url("../images/logo_w.png")0 0 no-repeat; background-size: 100%; position: absolute; left: 50px; top: 40px; transition: all .25s ease; text-indent: left;}
header > h1 > a{display: block; width: 100%; height: 100%; overflow: hidden; text-indent: -9999px;}
header > nav{display: inline-block; margin-top: 47px; transition: all .25s ease;}
#gnb {display: inline-block;}
#gnb::after {content: ""; display: block; clear: both;}
#gnb > li {float: left; margin: 0 25px;}
#gnb > li > a{font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.03em;}
#gnb > li > a:hover{color: rgba(255,255,255,1);}
header > .btn_box{position: absolute; right: 50px; top: 30px; transition: all .25s ease;}

a.btn_app {display: inline-block; width: 170px; height: 50px; border: 1px dashed rgba(255,255,255,0.3); border-radius: 30px; padding-left: 45px; font-size: 13px; font-weight: 700; color: #fff; line-height: 48px; position: relative; letter-spacing: 0; margin-right: 3px; text-align: left; transition: all .25s ease;}
a.btn_app:hover {background-color: rgba(255,255,255,0.15); text-decoration: underline;}
a.btn_app:last-of-type {margin-right: 0;}
a.btn_app.apple {padding-left: 60px;}
a.btn_app::before {content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; left: 15px; top: 14px; background-image: url('../images/ic_sp_store.png'); background-repeat: no-repeat;}
a.btn_app.google::before {background-position: 0 0;}
a.btn_app.apple::before {background-position: -20px 0; left: 20px;}

/* fixed 클래스 */
header.fixed{background-color: #fff; border-bottom: 1px solid #BCC1E5;}
header.fixed > h1{top: 28px; background-image: url('../images/logo_b.png');}
header.fixed > nav{margin-top: 35px;}
header.fixed #gnb > li{float: left; position: relative;}
header.fixed #gnb > li > a{font-weight: 600; color: #090D2B; }
header.fixed #gnb > li > a:hover{color: #000;}
header.fixed #gnb > li.on > a{color: #1ECC8F;}
header.fixed #gnb > li.on::before{content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: black; position: absolute; bottom: -10px; left: calc(50% - 3px); background-color: #1ECC8F;}
header.fixed > .btn_box{top: 20px; transition: all .25s ease;}
/* on */
header.fixed #gnb > li:nth-of-type(3).on > a{color: #16C3D9;}
header.fixed #gnb > li:nth-of-type(3).on::before{background-color: #16C3D9;}
header.fixed #gnb > li:nth-of-type(5).on > a{color: #FCC22B;}
header.fixed #gnb > li:nth-of-type(5).on::before{background-color: #FCC22B;}
header.fixed #gnb > li:nth-of-type(7).on > a{color: #090D2B;}
header.fixed #gnb > li:nth-of-type(7).on::before{background-color: #090D2B;}

header.fixed a.btn_app {border-color:#C6C9E0; color: #121212;}
header.fixed a.btn_app.apple::before {background-position: -40px 0; left: 20px;}
header.fixed a.btn_app:hover {background-color: rgba(0,0,0,.1);}

/* 모바일 메뉴 버튼 */
header .mo_btn_box {display: none;}

@media screen and (max-width:1650px) {
	header{padding-bottom: 25px;}
	header > h1{width: 220px; height: 28px; left: 20px; top: 20px; background-size: 100%; text-align: left;}
	header > nav{margin-top: 30px;}
	#gnb > li {float: left; margin: 0 20px;}
	#gnb > li > a{font-size: 15px; letter-spacing: 0em;}
	header > .btn_box{right: 20px; top: 15px;}
	header a.btn_app {width: 136px; height: 45px; padding-left: 35px; font-size: 12px; line-height: 43px;}
	header a.btn_app::before {left: 10px; top: 10px;}
	
	/* fixed 클래스 */
	header.fixed > h1{top: 25px;}
	header.fixed > nav{margin-top: 28px;}
	header.fixed #gnb > li {margin: 0 20px;}
	header.fixed #gnb > li > a{}
	header.fixed #gnb > li.on::before{content: ""; display: none;}
	header.fixed > .btn_box{top: 15px;}
}

@media screen and (max-width:1190px) {
	header{text-align: right;}
	header > h1{}
	header > nav{margin-top: 25px;}
	#gnb > li {float: left; margin: 0 20px;}
	#gnb > li > a{font-size: 15px; letter-spacing: 0em;}
	header > .btn_box{display: none;}
}

@media screen and (max-width:1000px) {
	header {height: 65px; padding-bottom: 0;}
	header.fixed {height: 65px;}

	header > h1{top: 22px;}
	header.fixed > h1{top: 22px;}
	
	/* 모바일 메뉴 버튼 */
	header a.mo_btn_box{display: block; position: absolute; right: 10px; top: 13px;}
	header a.mo_btn_box span{display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-size: 100%; overflow:hidden; text-indent: -9999px; text-align: left;}
	header a.mo_btn_box span.menu{background-image: url('../images/btn_mobile_menu_w.png');}
	header a.mo_btn_box span.close{background-image: url('../images/btn_mobile_menu_close_w.png'); display: none;}
	header a.mo_btn_box.on span.menu{display: none;}
	header a.mo_btn_box.on span.close{display: block;}
	
	header.fixed a.mo_btn_box span.menu{background-image: url('../images/btn_mobile_menu.png');}
	header.fixed a.mo_btn_box span.close{background-image: url('../images/btn_mobile_menu_close.png');}
	
	/* 모바일 메뉴 */
	header > nav{position: fixed; left: 0; top: 66px; z-index: 90; background-color: #fff; width: 100%; height: 0; overflow: hidden; margin-top: 0; transition: all .25s ease;}
	#gnb{width: 100%; padding: 0;}
	#gnb > li{display: block; float: none; margin: 0; width: 100%; border-bottom: 1px solid rgba(112,112,112,.12); text-align: left;}
	#gnb > li >a{display: block; padding: 17px 20px; font-size: 17px; font-weight: 500;}
	header > nav.on{display: block; height: calc(100vh - 66px);}

	header.fixed > nav{margin-top: 0;}
	header.fixed #gnb > li{margin: 0; width: 100%;}
}

/*헤더::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/




/*푸터::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
footer{position: relative; background-color: #090D1D;}
footer .inner{width: 1180px; margin: 0 auto; padding: 67px 0 48px;}
footer .top{width: 100%; margin-bottom: 60px;}
footer .top .info{float: left; width: 34%; height: 276px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.12); padding: 65px 50px 40px;}
footer .top .info > h2{overflow: hidden; text-indent: -9999px; width: 90px; height: 30px; background: url('../images/logo_fnb.png') no-repeat left top; margin-bottom: 30px; background-size: 100%;}
footer .top .info > dl{width: 100%;}
footer .top .info > dl::after{content: ""; display: block; clear: both;}
footer .top .info > dl > dt{float:left; width: 80px; color: #fff; margin-bottom: 10px; font-size: 14px;}
footer .top .info > dl > dd{float:left; width: calc(100% - 80px); color: #fff; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0;}
footer .top .info > dl > dd > a{color: #fff; word-break: break-all;}
footer .top .menu{float: right; width: calc(66% - 70px);}
footer .top .menu > dl{float: left; width: calc(76% / 3); margin-left: 12%;}
footer .top .menu > dl:first-of-type{margin-left: 0;}
footer .top .menu > dl > dt{width: 100%; padding: 10px 9px 16px; border-bottom: 1px dashed rgba(255,255,255,0.28); color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 20px; letter-spacing: 0;}
footer .top .menu > dl > dd{}
footer .top .menu > dl > dd > a{display:block; padding: 7px 9px; font-size: 14px; color: #fff; font-weight: 500; letter-spacing: 0;}
footer .top .menu > dl > dd > a:hover{text-decoration: underline;}

footer address{width: 100%; opacity: 0.5; text-align: right; position: relative; padding-left: 80px;}
footer address h2{position: absolute; left: 0; top: 0; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0;}
footer address span{display: inline-block; vertical-align: top; font-size: 14px; margin-left: 15px; color: #fff;}

@media screen and (max-width:1200px) {
	footer .inner{width: 100%; padding-left: 10px; padding-right: 10px;}
}

@media screen and (max-width:1000px) {
	footer{}
	footer .inner{padding: 30px 20px 50px;}
	footer .top{margin-bottom: 30px;}
	footer .top .info{float: none; width: 100%; height: auto; padding: 30px 20px 25px; margin-bottom: 20px;}
	footer .top .info::after{content: ""; display: block; clear: both;}
	footer .top .info > h2{width: 75px; height: 30px; margin-bottom: 0; float: left;}
	footer .top .info > dl{float: right; width: calc(100% - 90px); padding-left: 10px;}
	footer .top .info > dl > dt{width: 70px; font-size: 12px;}
	footer .top .info > dl > dd{width: calc(100% - 70px); font-size: 12px;}
	footer .top .menu{float: none; width: 100%;}
	footer .top .menu > dl{float: none; width: 100%; margin-left: 0; margin-bottom: 15px;}
	footer .top .menu > dl > dt{width: 100%; padding: 10px 9px 12px; font-size: 15px; margin-bottom: 12px; position: relative;}
	footer .top .menu > dl > dt::after{content: ''; display: block; width: 15px; height: 7px; background: url('../images/btn_arr_mobile.png') no-repeat left top; background-size: 100%; position: absolute; right: 10px; bottom: 15px; transform: rotate(180deg); opacity: .5; transition: all .25s ease;}
	footer .top .menu > dl > dd{display: none;}
	footer .top .menu > dl > dd > a{font-size: 13px;color: rgba(255, 255, 255, .5);}
	footer .top .menu > dl > dd > a:hover{text-decoration: underline;}
	footer .top .menu > dl.on{}
	footer .top .menu > dl.on > dt::after{transform: rotate(0); opacity: 1;}
	footer .top .menu > dl.on{}
	footer .top .menu > dl.on > dd{display: block;}
	

	footer address{padding:0 0 30px; text-align: left;}
	footer address h2{left: 10px; top: auto; bottom: 5px; font-size: 13px;}
	footer address span{font-size: 13px; margin-left: 10px;}
}


/*푸터::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



@keyframes radio_c {
	0% {transform: scale(.7)}
	100% {transform: scale(1)}
}