@charset "utf-8";

@import url("./fonts.css");
* { margin:0; padding:0; box-sizing:border-box }

/* font */
body,pre,textarea,input,select,button, a {font-family:"Pretendard", Malgun Gothic, sans-serif; color: var(--gc-white) !important; letter-spacing: -1px;}

:root {
    --max-width: 1560px;
    --height-100vh: 100vh;
    --gc-white: #fff;
    --point-color:  #009320;
    --point-color2: #007ADE;
    --point-color3: #D74683;
    --point-color4: #FAE100;
    --txt-color: #191919;
    --S-CoreDream: "S-CoreDream";
    --fs_14: 14px;
    --fs_16: 16px;
    --fs_18: 18px;
    --fs_20: 20px;
    --fs_24: 24px;
    --fs_32: 32px;
    --fs_40: 40px;
    --fs-g1: 50px;
    --fs-g2: 40px;
    --fs-g3: 20px;
}

body{overflow-y: hidden; line-height: 1 !important;  background: #3c3772;}
a {text-decoration: none;}
li {list-style: none;}

/*이미지*/
.img_box.wide {position: relative; background: url(../images/bg.jpg); background-size: cover; background-position: bottom; width: calc(100% - 25%); height: 90vh; border-radius: 0 0 250px 0;}

/*비디오*/
.video_box video {width: calc(100% - 500px); object-fit: cover; border-radius: 0 0 250px 0;}
.video_box.wide{display:block}
.video_box.height{display:none}

h1 {position: absolute; top: 7%; left: 5%;}
h2 {font-size: var(--fs_24); margin-bottom: 1rem; text-align: center; line-height:120%}
h3 {font-size: var(--fs_20); margin-bottom: 1rem; color: #fff; padding: 0; background: none;}

/*홍보동영상 바로가기*/
/* .sns_box {width: 100%; max-width:500px; position: absolute; bottom: 5%; left: 5%;}
.sns_box a {position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 40px 40px 60px 40px; background: var(--gc-white); background: var(--point-color2); transition:all 0.5s;-webkit-transition:all 0.5s; border-radius: 15px;}
.sns_box a:hover {background: var(--point-color);}
.sns_box .txt p{margin: 15px 0 10px 0; font-size: var(--fs_32); color: var(--gc-white); font-weight: bold; line-height: normal;}
.sns_box .img {position: absolute; bottom: 20px; right: 40px;} */

.spot_txt { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%;}

.fs_big1 { font-size: var(--fs-g1); font-weight: 600;}
.fs_big2 {font-size: var(--fs-g2);}
.fs_big3 {font-size: var(--fs-g3);}
.spot_txt p { font-family: 'Gmarket Sans'; font-size: 40px; color: #fff; text-shadow: 0 6px 12px rgba(0,0,0,.4); line-height: 130%; max-width: var(--max-width); width: 100%; line-height: 1.2; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0 auto; opacity: 0; transition: opacity 1s ease-in-out;}
.spot_txt p span:nth-child(2) {margin-bottom: 2rem;}

.spot_txt span { display: block; text-align: center; position: relative; min-height: 3rem;}
.spot_txt span em { text-align: right; margin-top: -2rem; position: absolute; right: 0; top: -10px; font-weight: normal; font-style: normal;}

.arrow{display: block; position: absolute; bottom: auto; right: 30px; transition:all 0.5s; -webkit-transition:all 0.5s; padding: 0 1rem 0 0;}
.sns_box .arrow{display: block; position: absolute; bottom: 20px; left: 40px; transition:all 0.5s; -webkit-transition:all 0.5s; padding: 0 1rem 0 0;}

.link a:hover .arrow, .bottomBlock a:hover .arrow{right: -.5px;}
.sns_box a:hover .arrow{left: 70px;}

.right_menu {position: absolute; top: 0; right: 0; width: 25%; height: var(--height-100vh); overflow: hidden;}
.right_menu > .inner {display: flex; flex-direction: column; padding: 40px 40px 0; height: var(--height-100vh);overflow-y: auto; gap: 2rem; z-index:20; position:relative}

.middleBlock a {height: 70px;}
.topBlock a, .middleBlock a {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.bottomBlock a {display: flex; align-items: center; justify-content: flex-start; gap: 10px;}

.topBlock {font-size: var(--fs_18); line-height: 160%; display: flex; flex-direction: column;}
.topBlock .descript {background: var(--gc-white);margin-bottom: 2rem;letter-spacing: 0;padding: 2rem;border: 1px solid #4f4f4f; color:var(--txt-color);}
ul.descript li {position: relative; padding-left: 25px;}
/* ul.descript li:before {content: '★'; margin-right: 5px; list-style-position: outside; margin-left: -18px;} */
ul.descript li:before {content: ''; width:20px; height:20px; position: absolute; left: 0; top: 3px; background: url(../images/icon_notice.png) 0 0 no-repeat; background-size: contain;}
.topBlock .link {position: relative; display: flex; flex-direction: column; gap: 0.5em;}
.topBlock li:nth-child(n) a {background: var(--point-color3);}
.topBlock li:nth-child(1) a {background: var(--point-color4);color: #191919 !important;}
.topBlock li a {position: relative; padding: 15px 30px; font-size: var(--fs_24);}

.middleBlock li {margin-bottom: 10px;}
.middleBlock li img {height: 40px;}
.middleBlock a {background: var(--gc-white); font-size: var(--fs_20); color: var(--txt-color); font-weight: 600; padding: 12px 30px; }
.middleBlock p {font-size: var(--fs_20); color: var(--txt-color); font-weight: 600;}

.bottomBlock li {margin-bottom: 1rem;}
.bottomBlock li:nth-child(1) a {background: var(--point-color);}
.bottomBlock li:nth-child(2) a {background: var(--point-color2);}
.bottomBlock li a {position: relative; padding: 30px; font-size: var(--fs_24);}
.bottomBlock li p {font-size: var(--fs_24);}
.bottomBlock li span {display: block; font-size: var(--fs_14); letter-spacing: 0;}

.inquiry{font-family: var(--S-CoreDream);}
.inquiry p {margin-top: 30px; margin-bottom: 1rem; color: var(--gc-white); font-size: var(--fs_20); font-weight: 600;}
.inquiry > div {font-size: var(--fs_40); font-weight: 700;}
.inquiry .img_box {text-align: right;}

.copy{display:none}
footer {position: absolute; bottom: 0; width: 100%; text-align: center; padding: 50px 0; letter-spacing: 0;}
footer p {font-size: var(--fs_14); font-weight: 200;}
footer span {font-weight: 400;}

@media only all and  (min-width:1201px) and (max-width: 1920px){
	:root {
    --fs_14: 14px;
    --fs_16: 15px;
    --fs_18: 16px;
    --fs_20: 18px;
    --fs_24: 20px;
    --fs_32: 32px;
    --fs_40: 40px;
}
	.video_box.wide{display:none}
	.video_box.height{display:block}

	.right_menu{width:25%}
	.right_menu > .inner{padding:25px 25px 0; gap:1rem}
	.topBlock .descript{padding:0.5rem}
	.topBlock .link{gap:0.4rem}
	.middleBlock a{padding:12px 20px; height:60px}
	.middleBlock li,.bottomBlock li{margin-bottom:0.4rem}
	.video_box video{width:75%; border-radius: 0 0 80px 0; max-width: fit-content;}
	.copy{padding: 1rem; width: 75%; text-align: center; letter-spacing:0; display:block;}
	footer{display:none}
}

@media only all and (max-width: 2050px){
    .arrow{padding: 0;}
    .bottomBlock li a {flex-direction: column; align-items: flex-start;}
}

@media only all and (max-width: 1500px){
    .sns_box .arrow{position: unset;}
    .arrow{position: unset;}
}

@media only all and (max-width: 1200px){
    body {overflow-y: auto; }
    #wrap {display: flex; flex-direction: column; justify-content: space-between;} 
    .video_box video {width: 100%; height: 100%; object-fit: cover; border-radius:0}
    h1 {position: absolute; top: 5%; left: 5%;}
    h1 img {width: 70%;}
    h2 {bottom: 60%; right: 10%; }
    h3 {display: none;}

    .img_box.wide {width: 100%; height: 500px; border-radius: 0 0 100px 0;}

    .right_menu {position: relative; width: 100%; height: auto; background: 0; padding: 40px 40px 0}
    .right_menu > .inner {flex-direction: row; justify-content: center; gap: 40px; padding: 0; height: auto; align-items: flex-start; overflow-y: visible;}

    .topBlock {flex-grow: 1;}
    .topBlock h3{display: none;}
    .topBlock ul{height: 100%; margin-bottom: 20px;}

    .middleBlock {display: flex;flex-direction: column;justify-content: space-between;align-items: stretch;margin-top: 47px;}
    .middleBlock a {font-size: var(--fs_18); margin-bottom: 10px; padding: 12px 30px; height: 106px; flex-direction: column; flex-direction: column-reverse; display: flex;}
    .middleBlock p {font-size: var(--fs_18);}

    .bottomBlock {margin-top: 47px;}
    .bottomBlock li {margin-bottom: 10px;}
    .bottomBlock li a {padding: 24px;  flex-direction: column;}
    .bottomBlock li p {font-size: var(--fs_20);}

    .inquiry p {margin-top: 30px; font-size: var(--fs_18);}
    .inquiry > div {font-size: var(--fs_32);}

    footer {position: inherit; padding: 50px 20px 20px; margin-top: auto;}
    foot p { margin-top: -30px;}
	
	.copy{display:none}
	footer{display:block}
}

@media only all and (max-width: 960px){
    :root {
    --fs-g1: 30px;
    --fs-g2: 24px;
    --fs-g3: 14px;
}
    .right_menu > .inner{flex-direction: column;}
    .right_menu > .inner > div{width: 100%; margin-top:0;}
    .bottomBlock li a {align-items: center;}

    .spot_txt span em {margin-top: -1rem;}
    .sns_box {max-width: 400px;}
    .sns_box a {padding: 30px;}
    .sns_box .txt p{font-size: var(--fs_24);}
}
@media only all and (max-width: 480px){
	.right_menu > .inner{gap: 1rem;}
	.right_menu{padding: 1rem;}
	.topBlock a, .middleBlock a, .bottomBlock a{gap:5px}
	.topBlock .descript{padding:1rem; margin-bottom:1rem;}
	.topBlock .descript span{display:block;}
	.topBlock ul,.middleBlock li:last-child,.middleBlock a:last-child{margin-bottom:0}
    
    .img_box.wide {border-radius: 0 0 30px 0;}
    .sns_box {left: 0; max-width: 100%; padding: 1rem;}
    .sns_box a{background: rgb(0, 122, 222, 0.8);}
    .sns_box .img {text-align: right;}
    .sns_box .img img {width: 70%;}
}