@charset "utf-8";

header {width: 1280px; margin: 0 auto; background: #fff;}
header .header {padding: 19px 0; position: relative;}
header .header .logo {}
header .header .logo a {display: block; font-size: 0;}
header .header .logo a img {}

header .header .right_menu {position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;}
header .header .right_menu > ul {text-align: right;}
header .header .right_menu > ul > li {display: inline-block; vertical-align: middle; margin-right: 32px; position: relative; text-align: left;}
header .header .right_menu > ul > li:last-child {margin-right: 0;}
header .header .right_menu > ul > li > a {font-size: 20px; font-weight: bold; padding: 40px 16px; display: block;}
header .header .right_menu > ul > li > a.arrow_down {padding-right: 40px; background: url(../img/ico/ico_header_chevron_down.png) no-repeat right 14px center/18px;}

header .header .right_menu > ul > li .inner {display: none; position: absolute; left: 0; top: 110px; width: 200px;  background: #fff;}
header .header .right_menu > ul > li .inner.big {/* width: 424px; min-height: 296px; */}
header .header .right_menu > ul > li.on {}
header .header .right_menu > ul > li.on .inner {display: block;}

header .header .right_menu > ul > li .inner .depth {width: 200px;}
header .header .right_menu > ul > li .inner .depth > li {cursor: pointer;}
header .header .right_menu > ul > li .inner .depth > li > a {display: block; padding: 14px 16px; font-size: 18px; font-weight: 500; }
header .header .right_menu > ul > li .inner .depth > li:hover > a {background: #F2F6FD;}

header .header .right_menu > ul > li .inner .depth > li .depth02 {display: none; position: absolute; left: 200px; top: 0; width: 200px; padding-left: 8px; background: #fff;}
header .header .right_menu > ul > li .inner .depth > li.on .depth02 {display: block;}
header .header .right_menu > ul > li .inner .depth > li .depth02 > li {cursor: pointer;}
header .header .right_menu > ul > li .inner .depth > li .depth02 > li > a {display: block; padding: 14px 16px; font-size: 18px; font-weight: 500;}
header .header .right_menu > ul > li .inner .depth > li .depth02 > li:hover > a {background: #F2F6FD;}

.right_menu_mo {display: none;}

.btn_scrolltop {position: fixed; right: 40px; bottom: 40px; z-index: 10;}
.btn_scrolltop button {background: #1F2E3D url(../img/ico/go_top.png) no-repeat center/24px; border: 0; padding: 0; width: 56px; height: 56px; border-radius: 16px; font-size: 0;}

/* fade in 애니메이션 */
.bounce-up .fadeIn {
	opacity: 0;
	-moz-transition: all 700ms ease-out;
	-webkit-transition: all 700ms ease-out;
	-o-transition: all 700ms ease-out;
	transition: all 700ms ease-out;
	-moz-transform: translate3d(0px, 200px, 0px);
	-webkit-transform: translate3d(0px, 200px, 0px);
	-o-transform: translate(0px, 200px);
	-ms-transform: translate(0px, 200px);
	transform: translate3d(0px, 200, 0px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bounce-up.in_view .fadeIn {
	opacity: 1;
	-moz-transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate3d(0px, 0px, 0px);
}

.bounce-up.in_view .fadeIn.delay_01 {transition-delay: 0.5s;}
.bounce-up.in_view .fadeIn.delay_02 {transition-delay: 1.0s;}
.bounce-up.in_view .fadeIn.delay_03 {transition-delay: 1.5s;}
.bounce-up.in_view .fadeIn.delay_04 {transition-delay: 2.0s;}
.bounce-up.in_view .fadeIn.delay_05 {transition-delay: 2.5s;}
.bounce-up.in_view .fadeIn.delay_06 {transition-delay: 3.0s;}

footer {background: #F2F6FD; padding: 64px 0;}
.foot_link {padding: 0 0 64px;}
.foot_link ul {font-size: 0; text-align: center;}
.foot_link ul li {display: inline-block; vertical-align: top; width: 320px; text-align: left;}
.foot_link ul li strong {display: block; font-size: 18px; padding: 0 0 16px;}
.foot_link ul li button,
.foot_link ul li a {display: block; font-size: 16px; font-weight: 500; color: #748BA4; display: block; margin-bottom: 8px;}
.foot_link ul li button:last-child,
.foot_link ul li a:last-child {margin-bottom: 0;}

.foot_info {border-top: 1px solid #C8D7E5; padding: 56px 0; display: flex; justify-content: center; gap: 24px;}
.foot_info .foot_left {width: 55%;}
.foot_info .foot_left ul {font-size: 0; margin: 0 0 32px;}
.foot_info .foot_left ul li {display: inline-block; margin-right: 40px;}
.foot_info .foot_left ul li:last-child {margin-right: 0;}
.foot_info .foot_left ul li a {font-size: 14px; font-weight: bold; color: #748BA4;}
.foot_info .foot_left ul li a.privacy {font-weight: bold; color: #1F2E3D;}

.foot_info .foot_left > div {}
.foot_info .foot_left > div dl {display: inline-block; margin-right: 8px; position: relative;}
.foot_info .foot_left > div dl:after {content: ''; width: 1px; height: 10px; background: #748BA4; position: absolute; top: 50%; margin-top: -5px; right: -8px;}
.foot_info .foot_left > div dl:last-child:after {display: none;}
.foot_info .foot_left > div dt,
.foot_info .foot_left > div dd {display: inline-block; font-size: 14px; font-weight: 500; color: #748BA4;}
.foot_info .foot_left > div dt {}
.foot_info .foot_left > div dd {}
.foot_info .foot_left .copyright {display: block; margin: 16px 0 0; font-size: 14px; font-weight: 500; color: #748BA4;}

.foot_info .foot_right {}
.foot_info .foot_right > a {font-weight: bold; font-size: 22px; display: block; margin: 0 0 62px;}

.foot_info .foot_right select {background: url(../img/ico/ico_header_chevron_down.png) no-repeat right center/18px; width: 100%; appearance: none; -webkit-appearance: none; border: 0; height: 48px; font-size: 16px; font-weight: bold; padding-right: 26px; box-sizing: border-box;}

.mmmm {opacity: 0; position: fixed; left: 0; top: 0; z-index: 11; background: #000; padding: 10px; height: 50px; overflow-y: auto; box-sizing: border-box;}
.mmmm.on {opacity: 1; height: 100%;}
.mmmm p {cursor: pointer; color: #fff;}
.mmmm li a {color: #999; padding-left: 10px;}
.mmmm h2,
.mmmm ul {display: none;}
.mmmm.on h2,
.mmmm.on ul {display: block;}

.m_all_btn {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 20px; display: none;}
.m_all_btn button {display: block; padding: 0; background: none; border: 0; width: 24px; height: 20px;}
.m_all_btn span {width: 24px; height: 2px; border-radius: 10px; background: #000; position: absolute; left: 0; font-size: 0;}
.m_all_btn span:first-child {top: 0;}
.m_all_btn span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.m_all_btn span:last-child {bottom: 0;}
.m_all_btn.on {}
.m_all_btn.on span:first-child {transform: rotate(45deg) translate(6px,6px);}
.m_all_btn.on span:nth-child(2) {opacity: 0;}
.m_all_btn.on span:last-child {transform: rotate(-45deg) translate(7px,-7px);}

.pop_bg {background-color:rgba(0, 0, 0, .5); position:fixed; top:0; left:0; right:0; bottom:0; z-index:301;}
.pop_wrap {width:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); padding:30px 10px; max-width:800px; box-sizing:border-box;}
.pop_wrap .pop_cover {background-color:#fff; position:relative;}
.pop_wrap .pop_cover h2.tit {text-align:left; font-size:20px; padding:15px 0 15px 30px;}
.pop_wrap .pop_cover .btn_x {position:absolute; right:20px; top:22px; cursor:pointer;}
.pop_wrap .pop_cover .pop_cont {height:500px; overflow-y:auto; padding: 0 20px 15px; box-sizing:border-box;}

.pop_tbl {margin: 15px 0;}
.pop_tbl table {border: 1px solid #eee; border-bottom: 0; border-right: 0;}
.pop_tbl table th,
.pop_tbl table td {padding: 10px 15px; border-bottom: 1px solid #eee; text-align: center; border-right: 1px solid #eee; vertical-align: middle; word-break: keep-all;}
.pop_tbl table th {background: #ccc;}

.pop_wrap .pop_cover .pop_cont .btn_center_box {text-align: center;}
.pop_wrap .pop_cover .pop_cont .btn_center_box button {width:150px; height: 40px; border-radius: 8px;}
.pop_wrap .pop_cover .pop_cont .btn_center_box button.btn_ok {background: #3399ff; color: #fff;}


/* 팝업 */
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px;  left: 0; top: 0; width: 100%; height: 100%; overflow: auto;  background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.modal .modal-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 300px; max-width: 60%; padding: 30px; border-radius: 20px; background: #ffffff; box-shadow: 3px 3px 6px rgba(0,0,0,0.3); box-sizing: border-box; }
.modal .close { position : absolute; right : 30px; top : 30px; display: inline-block; width: 20px; height: 20px; padding : 0px;  background: url('../img/ico/ico_x30.png') no-repeat 50%; cursor: pointer; }

.pop_btn_wrap { margin: 10px auto; }
.pop_btn_wrap .pop_btn { display: inline-block; min-width: 100px; width: 100%; padding: 10px 20px; line-height: 120%; font-size: 14px;  font-weight: bold; color: #fff; text-align: center; background: #0058FB; border-radius: 3px; box-sizing: border-box; }
.pop_title { margin-bottom: 20px; font-size: 24px; font-weight: 700; line-height: 140%; color: #1F2E3D; }
.pop_txt1 { margin-bottom: 15px; font-size: 20px; font-weight: 500; line-height: 140%; color: #1F2E3D; letter-spacing: -0.05px}
.pop_txt2 { font-size: 14px; font-weight: 400; line-height: 140%; color: #748BA4; word-break: keep-all;}
.pop_txt3 { font-size: 14px; font-weight: 400; line-height: 140%; color: #748BA4; word-break: keep-all;}


@media screen and (max-width:1350px) {
	#headers {}
	header {width: 100%; padding: 0 50px; box-sizing: border-box;}
	header .header {padding: 10px 0;}
	header .header .right_menu > ul > li {margin-right: 15px;}
	header .header .right_menu > ul > li > a {padding: 34px 8px; font-size: 16px;}
	header .header .right_menu > ul > li .inner {width: 150px;}
	header .header .right_menu > ul > li .inner.big {width: 384px;}
	header .header .right_menu > ul > li .inner .depth {width: 192px;}
	header .header .right_menu > ul > li .inner .depth > li .depth02 {left: 192px; width: 192px;}
	header .header .right_menu > ul > li .inner {top: 92px;}

	.foot_link ul {padding: 0 20px;}
	.foot_link ul li {width: 25%;}
}

@media screen and (max-width: 900px) {
	.foot_info {display: block; gap: unset; padding: 20px;}
	.foot_info .foot_left {width: 100%; margin: 0 0 20px;}

	.foot_info .foot_right > a {margin: 0; font-size: 18px;}
	.foot_info .foot_right select {width: auto;}
}

@media screen and (max-width: 700px) {
	.m_all_btn {display: block;}

	header {padding: 0 20px;}
	header .header .logo a img {height: 36px;}
	header .header .right_menu {display: none;}
	header .header .right_menu_mo.on {display: block;}

	.right_menu_mo {display: none; position: absolute; left: -20px; right: -20px; top: 56px; background: #fff; z-index: 10; padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
	.right_menu_mo.on {display: block;}

	.right_menu_mo > ul {}
	.right_menu_mo > ul > li {margin-bottom: 10px;}
	.right_menu_mo > ul > li:last-child {margin-bottom: 0;}
	.right_menu_mo > ul > li > a {font-size: 16px; font-weight: bold; display: block;}
	.right_menu_mo > ul > li > a.arrow_down {padding-right: 40px; background: url(../img/ico/ico_header_chevron_down.png) no-repeat right 14px center/18px;}
	.right_menu_mo > ul > li .inner {display: none; padding: 10px 0 10px 10px; background: #e6e6e6; margin: 8px 0 0;}
	.right_menu_mo > ul > li .inner.on {display: block;}
	.right_menu_mo > ul > li .inner .depth {}
	.right_menu_mo > ul > li .inner .depth li {margin-bottom: 8px;}
	.right_menu_mo > ul > li .inner .depth li:last-child {margin-bottom: 0;}
	.right_menu_mo > ul > li .inner .depth li > a {font-size: 14px; display: block;}
	.right_menu_mo > ul > li .inner .depth li > a.arrow_down {padding-right: 40px; background: url(../img/ico/ico_header_chevron_down.png) no-repeat right 14px center/18px;}
	.right_menu_mo > ul > li .inner .depth li .depth02 {padding: 5px 0 5px 10px; display: none;}
	.right_menu_mo > ul > li .inner .depth li .depth02.on {display: block;}

	.right_menu_mo > ul > li .inner .depth li .depth02 li {margin-bottom: 4px;}
	.right_menu_mo > ul > li .inner .depth li .depth02 a {font-size: 12px;}

	.foot_link ul li {width: 50%;}
	.foot_link ul li:nth-child(3),
	.foot_link ul li:nth-child(4) {margin-top: 20px;}

	.foot_link ul li strong {font-size: 15px;}
	.foot_link ul li button,
	.foot_link ul li a {font-size: 13px; margin-bottom: 3px;}
	.foot_info .foot_left ul li button,
	.foot_info .foot_left ul li a {font-size: 12px; padding: 2px 0; display: block;}

	.btn_scrolltop {right: 20px; bottom: 20px;}
	.btn_scrolltop button {width: 30px; height: 30px; border-radius: 5px; background-size: 14px;}
}