@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url('/lib/font-awesome/css/font-awesome.min.css');
@import url('./base.css');

html, body {
    -webkit-touch-callout: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

	margin: 0 auto;
	width: 100%;
	max-width: 1920px;
	overflow-x: hidden;

    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    letter-spacing: -0.5px;
}
body.scroll, html.scroll {
	overflow: hidden;
}
.clearfix::after {
	display: block;
	content: '';
	clear: both;
}
.inner {
	margin: 0 auto;
    width: 960px;
    padding: 100px 0px;
}
.tit {margin-bottom: 40px;}

/* sec_req */
.sec_req {
    width: 100%;
	text-align: center;
}
.sec_req .inner .req_select {
	width: 500px;
	margin: 0 auto;
}
.sec_req .inner .req_select li {
	display: inline-block;
	width: calc(50% - 10px);
	height: 50px;
	line-height: 50px;
	margin-right: 10px;
}
.sec_req .inner .req_select li:last-child {
	margin-right: 0px;
}
.sec_req .inner .req_select li select{
	display:inline-block; width:100%; height:50px; line-height:50px; 
	background:white url('../img/select_arrow.png') no-repeat right 20px center; 
	text-align:center; outline:none; vertical-align:top; font-size:18px; cursor:pointer;
}
.sec_req .inner .req_select li button {
	margin: 0;padding: 0; width: 100%; font-size: 18px; font-weight: 500; line-height: 50px;
	color: rgba(255,255,255,0.9); background: #2e2c27;
}

/* sec_noti */
.sec_noti {
    background: #0e0e0e;
    padding: 100px 0 150px;
    text-align: left;
}
.sec_noti .inner {
    width: 860px;
	padding: 0px;
}
.sec_noti .inner h4 {
    position: relative;
    display: inline-block;
    vertical-align: top;
    color: #f7f7f7;
    margin-bottom: 20px;
}
.sec_noti .inner h4 img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.sec_noti .inner h4 span {
    padding-left: 25px;
    color: #f7f7f7;
    font-size: 20px;
    font-weight: 500;
}
.sec_noti .inner ul {    
    display: inline-block;
    margin-left: 6px;
    width: auto;
}
.sec_noti .inner ul li {
    position: relative;    
    margin-bottom: 8px;
    padding-left: 10px;
    
    word-break: keep-all;
    color: #a1a1a1;
    font-size: 18px;
    line-height: 150%;
	font-weight: 400;    
}
.sec_noti .inner ul li strong {
    color: #f7f7f7;
    font-weight: 400;
}
.sec_noti .inner ul li:before{
    position: absolute;
    top: 0;
    left: 0;
    
	font-weight: 300;
    content:'·';
    color:#a1a1a1;
    font-size: 18px;
}

/* fixed banner */
#bt_fix {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
}

#bt_fix > div {
    width: 100%;
}

#bt_fix > div a {
    display: block;
    width: 50%;
    line-height: 70px;
    text-align: center;
    float: left;
}

#bt_fix > div a.bt_f_btn01 {
    background: #ffcc33;
    box-shadow: inset 0px 0px 20px rgba(0,0,0,0.2);
}
#bt_fix > div a.bt_f_btn01 span {
    color: rgba(0,0,0,0.7);
}

#bt_fix > div a.bt_f_btn02 {
    background: #C90000;
    box-shadow: inset 0px 0px 20px rgba(0,0,0,0.2);
}

#bt_fix > div a span {
    display: inline-block;
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.7px;
}

/* #loginModal */
#loginModal {
	display: none;
	padding-top: 7%;
}

#loginModal.login_modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
}

#loginModal .modal_content {
	position: relative;
	margin: 0 auto;
	padding: 70px 50px 60px;
	width: 450px;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
}

#loginModal .modal_content>ul {
	text-align: center;
}

#loginModal .modal_content>ul>li {
	margin-bottom: 10px;
}

#loginModal .modal_content>ul>li:first-child {
	position: absolute;
	top: 21px;
	right: 20px;
}

#loginModal .modal_content>ul>li:first-child a {
	display: block;
}

#loginModal .modal_content>ul>li:nth-child(2) {
	display: block;
}

#loginModal .modal_content>ul>li:nth-child(2) img {
	width: 40%;
}

#loginModal .modal_content>ul>li:nth-child(4) {
	font-size: 30px;
	color: #333;
	font-weight: 500;
}

#loginModal .modal_content>ul>li:nth-child(5) {
	font-size: 18px;
	letter-spacing: -0.04em;
}

#loginModal .modal_content>ul>li:nth-child(5),
#loginModal .modal_content>ul>li:nth-child(7),
#loginModal .modal_content>ul>li:nth-child(8) {
	margin-bottom: 20px;
}

#loginModal .modal_content>ul>li:nth-child(8) ul {
	display: table;
}

#loginModal .modal_content>ul>li:nth-child(8) ul li {
	float: left;
}

#loginModal .modal_content>ul>li:nth-child(8) ul:first-child {
	float: left;
	color: #999;
}

#loginModal .modal_content>ul>li:nth-child(8) ul:last-child {
	float: right;
	color: #666;
}

#loginModal .modal_content>ul>li:nth-child(9) button,
#loginModal .modal_content>ul>li:last-child button {
	width: 100%;
}

#loginModal .modal_content>ul>li:last-child button {
	border: 1px solid #FF944D;
	color: #FF944D;
}

#loginModal input.modal_input {
	padding: 0 20px;
	text-align: left;
	width: 100%;
}

#loginModal input[type=text].modal_input,
#loginModal input[type=password].modal_input {
	width: 100%;
	margin: 0;
	border-radius: 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
	height: 44px;
	font-size: 16px;
}

#loginModal.login_modal button {
	padding: 14px 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#ccc));
	background-image: linear-gradient(to bottom, #f1f1f1, #ccc);
	color: #3e3e3e;
	border: 0;
	cursor: pointer;
	border-radius: 5px;
	height: 54px;
	font-size: 16px;
}

#loginModal.login_modal button.btn_main {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFC107), to(#FFC107));
	background-image: linear-gradient(to bottom, #FFC107, #FFC107);
	color: #fff;
}

#loginModal.login_modal button.btn_sub {
	background-image: none;
	background-color: #fff;
	border: 1px solid #cecece;
	color: #3e3e3e;
}

/* back-to-top */
.back-to-top {
	display: none;
	position: fixed;
	right: 100px;
	bottom: 90px;
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 25px;
	border: 1px solid #dbdbdb;
	font-size: 14px;
	font-weight: bold;
	color: #6e6e6e;
	text-align: center;
	z-index: 110;
}

.back-to-top i.fa {
	text-align: center;
}

.back-to-top i.fa-chevron-up:after {
	content: "TOP";
	display: block;
	margin-top: 2px;
}

.back-to-top i.fa-chevron-up:before {
	content: "\f077";
	display: block;
	margin-top: 7px;
}

/* 모바일 */
@media all and (max-width:768px){
	.back-to-top {right: 12px;bottom: 100px;}
}



/* sec01 */
.sec01 {
    width: 100%;
    height: auto;
    
    background-image: url(../img/vis_sec01_bg.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    
    text-align: center;
}
.sec01 .inner {position: relative;}
.sec01 .logo {
    position: absolute;
    right: 0;
    z-index: 10;
    
    display: inline-block;
    width: 110px;
    height: auto;
}
.sec01 .yuji {
    position: relative;
    
    width: 565px;
    height: 565px;
    margin: 30px auto 65px;
    
    background-image: url(../img/vis_yuji.png);
    background-position: top center;
    background-size: cover;
}
.sec01 .yuji .login_bubble {
    position: absolute;
    top: 25%;
    left: -14%;
}
.sec01 .yuji .bubble {
    position: absolute;
    top: 6%;
    right: -12%;
}
.sec01 .yuji .login_bubble .speech_bubble {
    display: flex;
    justify-content: center;
    align-items: center;
    
	position: relative;
	background: #f7f7f7;
	border-radius: 12px;
    width: 226px;
    height: 85px;
}
.sec01 .yuji .login_bubble .speech_bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 18px solid transparent;
	border-top-color: #f7f7f7;
	border-bottom: 0;
	border-right: 0;
	margin-left: 25%;
	margin-bottom: -18px;
}
.sec01 .yuji .login_bubble .speech_bubble p {
    font-size: 18px;
    line-height: 1.5;
    color: #1e1e1e;
}
.sec01 .cont1,
.sec01 .cont2 {margin-bottom: 100px;}
.sec01 .cont1 .cont_img {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sec01 .cont2 .cont_img p {
    display: inline-block;
    margin-right: 16px;
}
.sec01 .cont2 .cont_img p:nth-child(2n) {margin-right: 0px;}
.sec01 .cont2 .cont_img p:first-child,
.sec01 .cont2 .cont_img p:nth-child(2n) {margin-bottom: 16px;}
.sec01 .cont3 .cont_img p {
    display: inline-block;
    margin-bottom: 16px;
}
.sec01 .cont3 .cont_img p:nth-child(odd) {margin-right: 16px;}
.sec01 .cont3 .cont_img p:nth-child(5),
.sec01 .cont3 .cont_img p:nth-child(6) {margin-bottom: 0px;}


/* sec02 */
.sec02 {
    width: 100%;
    height: auto;
    
    background-image: url(../img/sec02_bg.png);
    background-position: top center;
    background-size: cover;
    
    text-align: center;
}
.sec02 .cont1, .sec02 .cont2, .sec02 .cont3, .sec02 .cont4 {margin-bottom: 100px;}
.sec02 .cont2 .step1 {margin-bottom: 50px;}
.sec02 .cont2 .step2 {margin-bottom: 40px;}
.sec02 .cont5 .apply01 {
    padding: 40px 0px;
    border-radius: 12px;
    background: #C5BA98;
}
.sec02 .cont5 .apply01 .noti {
    margin-top: 30px;
    font-size: 18px;
    color: #1e1e1e;
}
.sec02 .cont5 .apply01 ul {
    display: flex;
    justify-content: center;
    align-content: center;
}
.sec02 .cont5 .apply01 select {
    background-color: #fff;
    background-image: url(../img/arrow.png);
    background-position: 90% 50%;
    background-size: 5%;
    
    width: 347px;
    height: 80px;
    border-radius: 12px;
    margin-right: 16px;
    
    color: #1e1e1e;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}
.sec02 .cont5 .apply01 .btn {
    width: 200px;
    height: 80px;
    background: #1e1e1e;
    border-radius: 50px;
    
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}
.sec02 .cont6 {margin-top: 40px;}
.sec02 .cont6 .tit {margin-bottom: 20px;}
.sec02 .cont6 .my_info {
    display: flex;
    justify-content: center;
    
    width: 100%;
    height: auto;
    padding: 30px 0px;
    background: #fff;
    border-radius: 12px;
}
.sec02 .cont6 .my_info span {
    padding: 0px 20px;
    color: #1e1e1e;
}
.sec02 .cont6 .my_info span.bld {
    padding-left: 0px;
    font-weight: 700;
}
.sec02 .cont6 .my_info div {
    position: relative;
}
.sec02 .cont6 .my_info div::after {
    position: absolute;
    top: 50%;
    right: 0;
    
    content: "";
    width: 1px;
    height: 19px;
    transform: translateY(-50%);
    background-color: #333;
}
.sec02 .cont6 .my_info div:last-child::after {display: none;}

/* sec03 */
.sec03 {
    width: 100%;
    height: auto;
    
    background-image: url(../img/sec03_bg.png);
    background-position: top center;
    background-size: cover;
    
    text-align: center;    
}
.sec03 .tit {margin-bottom: 50px;}
.sec03 .yujis {margin-top: 20px;}
.sec03 .inner .noti {
    background: #B6C19B;
    margin-top: 30px;
    padding: 30px 40px;
    text-align: left;
}
.sec03 .inner .noti ul {    
    display: inline-block;
    margin-left: 6px;
    width: auto;
}
.sec03 .inner .noti ul li {
    position: relative;
    color: #1e1e1e;
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 8px;
    padding-left: 8px;
	font-weight: 400;
}
.sec03 .inner .noti ul li strong {
    color: #1e1e1e;
    font-weight: 600;
}
.sec03 .inner .noti ul li:before{
    position: absolute;
	font-weight: 700;
    content:'·'; 
    top: 0;
    left: 0;
    color: #1e1e1e;
    font-size: 18px;
}
.sec03 .inner .noti ul li:last-child {margin-bottom: 0;}


/* sec04 */
.sec04 {
    width: 100%;
    height: auto;
    background-color: #4C65B6;
}
.sec04 .inner {text-align: center;}
.sec04 .inner .cont1 .gift1,
.sec04 .inner .cont2 .gift1 {margin-bottom: 16px;}
.sec04 .inner .cont1 .gift2,
.sec04 .inner .cont2 .gift2,
.sec04 .inner .cont2 .gift3 {margin-right: 10px;}
.sec04 .inner .cont1 .gift2,
.sec04 .inner .cont1 .gift3,
.sec04 .inner .cont2 .gift2,
.sec04 .inner .cont2 .gift3,
.sec04 .inner .cont2 .gift4 {display: inline-block;}
.sec04 .inner .cont1,
.sec04 .inner .cont2,
.sec04 .inner .cont3 {margin-bottom: 100px;}
.sec04 .inner .cont2 .accent {
    margin-top: 30px;
    
    font-size: 22px;
    color: #ffcc33;
}
.sec04 .inner .cont2 .accent span {
    background: rgba(0,0,0,0.5);
    padding: 0px 4px;
}