body {max-width: 2000px;    margin: 0 auto;}

#main {background-image: url(../img/youtube_thum.jpg); background-repeat: no-repeat; width: 100%;overflow: hidden; position: relative;  background-position: center center;background-size: cover;}
#main img {position: absolute; z-index: 0;top: 0;} /*임시이미지, 영상으로 교체 예정*/
#main .cont {color: #fff;}
#logo .sub_logo {display: none;}

.h100vh {height: 100vh; padding: 0;}
.section {width: 100%;overflow: hidden; position: relative;}

.section_mid {padding: 290px 0;}
.section_max {padding: 500px 0 ;}

.text_upper {text-transform: uppercase;}

.cont {	text-align: center;margin: 0 auto; height: 100%; position: relative;z-index: 1; letter-spacing: 0; min-height: 300px; max-width: 1400px;}
.cont_mid {width: 80%;}
.cont_max {width: 100%;}


.center_50 {top: 50%;position: absolute;left: 50%;transform: translate(-50%,-50%);width: 100%;}
span.line {height: 3px; width: 5%;  display: inline-block;  margin: 0 .5em;max-width: 250px;margin-bottom: 0.3em;}

.deco_symbol {margin-left: 0;}
.deco_symbol::before {content: ""; position: absolute;height: 69px; width: 68px; left: -30px;   top: -15px; background: url(../img/symbol.png) no-repeat 100%; background-size: contain;}


.node-marquee {background: #000;}
.node-marquee__el {font-size: 0;}
.node-marquee__el p {color: #fff;letter-spacing: .2em;padding: 1em 0;}
.stroke {-webkit-text-stroke: 0.5px #fff;}

#section02 .box_wrap {letter-spacing: -.05em;}
#section02 .box {width: 58%; float: right; padding-top:0 ;}
#section02 .box.tit {width: 42%; float: left;}
#section02 .box .chain {display: table;}
#section02 .box .chain li {width: 50%; display: inline-block; padding-bottom: 4em;}
#section02 .box .chain h2 {margin-bottom: .5em; position: relative;}
#section02 .box .chain h2::after {content: ""; font-weight: 300;margin-left: 10px; background: url(../img/plus_black.png) no-repeat; width: 25px; height: 25px;position: absolute;
    top: 50%;    transform: translateY(-50%);    transition: 1.0s ease all;    -moz-transition: 1.0s ease all;    -webkit-transition: 1.0s ease all; background-size: cover; background-position: center;}
#section02 .box .chain h2:hover::after {transform:  translateY(-50%) rotate(360deg);    -moz-transform:  translateY(-50%) rotate(360deg);    -webkit-transform:  translateY(-50%) rotate(360deg);}
#section02.main span.block{width: 50%;}

.ptColor {color:#1e5ff1;}
span.line {background: #1e5ff1;}
.cont p span.l_01 { background: #fff; height: 2px;}
.cont p span.l_02 { background: #1e5ff1; width: 12%;}

#section03.main {height: 100vh;}
#section03.main .cont {height: 100%;}
#section03 .slot_wrap {top: auto; position: relative; left: auto; transform: none; width: auto;  display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 100%;-webkit-justify-content: space-around;-ms-flex-pack: distribute;justify-content: space-around;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.slot_img {overflow: hidden;position: absolute;height: 350px;width: 989px;z-index: -1;}
.s_img {position: relative;height: 350px;width: 989px;background-size: cover;background-repeat: no-repeat;}
.s_img01 {z-index: 4; background-image: url(../img/slot01.png);}
.s_img02 {z-index: 3; background-image: url(../img/slot02.png);}
.s_img03 {z-index: 2; background-image: url(../img/slot03.png);}
.s_img04 {z-index: 2; background-image: url(../img/slot04.png);}

.slot_text {height: 100%;width: 100%;position: absolute;overflow: hidden;}
.slot_text .s_text {position: absolute;left: 0%;top: 0%;right: 0%;bottom: 0%;z-index: 1;width: 100%;height: 100%;text-transform: uppercase;font-weight: 900;text-align: center;    opacity: 0;transform:translateY(50%);}
.slot_text .s_text.s_text01{transform: translateY(0%); opacity: 1;}

.s_text p {top: 50%;position: absolute;left: 50%;width: 100%;transform: translate(-50%,-50%);}
  
#section04.index {height: auto; padding-top: 0;}
#section04 .textplay {	width: 100%;    text-align: center;    display: flex;	font-size: 16.5rem;}
#section04 .textplay .play {display: flex; justify-content: space-around; animation: textLoop 50s linear infinite;}
#section04 .textplay:nth-of-type(2) .play, #section04 .textplay:nth-of-type(4) .play {    animation-direction: reverse;}

@keyframes  textLoop{
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-100%, 0);
	}
	
}
.textplay .play li span {-webkit-text-stroke: 1.5px #000;color: rgba(0,0,0,0);}
.textplay .play li span.img {background-repeat: no-repeat;-webkit-text-stroke: 0;background-position: center;}
.textplay .play li span.img.p_img01 {background-image: url(../img/play01.png);}
.textplay .play li span.img.p_img02 {background-image: url(../img/play02.png);}
.textplay .play li span.img.p_img03 {background-image: url(../img/play03.png);}
.textplay .play li span.img.p_img04 {background-image: url(../img/play04.png);}
.textplay .play li span.img.p_img05 {background-image: url(../img/play05.png);}
.textplay .play li span.img.p_img06 {background-image: url(../img/play06.png);}
.textplay .play li span.img.p_img07 {background-image: url(../img/play07.png);}
 
#section05.main h1 {padding: 0;}

.common_sec {background: #fff;	color: #fff;	padding-bottom: 0;}
.common_sec .cover {background: #1e5ff1; margin: 0 auto; width: 95%; height: 100%; transition: all ease 0.2s;}
.common_sec h1 {-webkit-text-stroke: 0.5px #fff;   color: rgba(0,0,0,0);	position: relative;   padding: auto; opacity: 0; transform: translate(0px, 40px);}
.common_sec h1::before, .common_sec h1::after {content: ""; position: absolute; height: 1px; width: 500px; background: rgba(255, 255, 255, 0.5); top: 50%;width: 20%;}
.common_sec h1::before {left: 0;}
.common_sec h1::after {right: 0;}
.common_sec p {opacity: 0; transform: translate(0px, 40px);}
.common_sec p:nth-child(2) {padding: 1.3em 0 1.5em 0;}
.common_btn {width: 11em;margin: 0 auto;background: #fff;	padding: 0.875rem 0;cursor: pointer;}
.common_sec .section {    padding: 230px 0;}
.common_sec a {color: var(--pointcolor);}

.common_sec .section_mid:not(.common_sec.main .section_mid) {padding: 230px 0;}

/* 맵 */
#map {	width: 100%;	height: 600px;	overflow: hidden;}
#map .label .center {	background: #fff;padding: 0.4em 1.4em 0.4em 2.45em;border-radius: 50px;    border: 2px solid #0475f4;}
#map .label .center::before {content: ""; position: absolute; width: 1.6em; height: 1.55em;border-radius: 50%;left: 0.4em;top: -0.095em;    background: #0475f4 url(../img/location.svg) no-repeat center center / auto 60%;}


#map .label .left::before {	content: '';	position: absolute;	left: 0.98em;    top: 1.7em;	width: 0;	z-index: 1;	height: 0;
	border-style: solid;    border-width: 6px;    border-color: #fff transparent transparent transparent;   }
#map .label .left::after {	content: '';	position: absolute;	left: 0.9em;    top: 1.725em;	width: 0;	z-index: -1;	height: 0;	border-style: solid;	border-width: 8px;    border-color: #0475f4 transparent transparent transparent;}

.pc {display: block;}
.mo {display: none;}


@media (max-width: 1820px){
    .cont_max {width: 80%;}
    .common_sec h1::before, .common_sec h1::after {width: 15%;}
}

@media (max-width: 1240px){
    /* .cont {width: 80%;} */
    span.line {width: 10%;}
    #section05.main h1 {padding: 0 16%; }    
}

@media (max-width: 990px){


    p.font-20 {font-size: 1.5625rem;}

    .deco_symbol {margin-left: 3%;}
    .deco_symbol::before {left: -20px;top: -10px;height: 100%; width: 39px;}

    .pc {display: none;}
    .mo {display: block;}
    
    #quick .to_top {font-size: 1.375rem;}
    #quick>div {width: 53px;height: 53px;}

    span.line {width: 18%;}

    .node-marquee__el p {padding: 1.5em 0;}

    /* #main.main.h100vh {height: auto;} */
    #section01.main p {font-size: 3.125rem; padding-bottom: 1.5%;}
    #section02.main span.block{width: 100%;padding-top: 2.375rem; font-size: 1.5625rem;}
    #section02.main .box.tit,#section02.main .box  {width: 100%;}
    #section02.main .box {padding-top: 4.375rem;}
    #section04.main .textplay {font-size: 13.5rem;}

    .slot_img {height: 250px;width: 75%;}   
    p.common_btn {width: 9em;font-size: 2.000rem;}

    .common_sec h1 {padding: 0 20%;}
    /* .common_sec .section_mid {padding: 140px 0 190px 0;} */

    #section02 .box .chain h2::after {width: 20px; height: 20px; margin-left: 6px;}

}

@media (max-width: 768px){
    .section_mini {padding: 100px 0;}
    #main.main.h100vh {height: 50vh;}
  }
  
@media (max-width: 600px){
	.cont {width: 90%;}
    .section_mid {padding: 150px 0; }
    #section01.main.section_mid {padding-bottom: 0;}
	
}
@media (max-width: 480px){
    .h100vh:not(.main) {height: auto; padding: 30em 0 23em 0;}
    #map {height: 450px;}
    .bg.img.mo {width: 90%;}
    .section_mid {padding: 220px 0 150px 0;}

    #main .font-100 {font-size: 4.5rem;}

}

@media (max-width: 375px){
	#header {padding: 2% 0;}
    .font-30 {font-size: 1.375rem;}
    #main>.cont>div.mt-30 {margin-top: 0;}
    #main>.cont>div.mt-30>p:nth-child(1) {margin-left: 10px;}

	span.line {width: 8%;margin: 0 0.3em 0.3em;	}
    #section01.main p {font-size: 3.000rem;}
    #section02 .box .chain h2 {font-size: 2.125rem;  white-space: nowrap;  }
    #section02 .box .chain li {width: 48%;}
    #section02 .box .chain li:nth-child(2),#section02 .box .chain li:nth-child(4),
    #section02 .box .chain li:nth-child(6) {padding-left: 5%;}
	
    #main .font-100 {font-size: 4rem;}
}


#section02.main + .pin-spacer {z-index: -1 !important;}
#section04.section {padding: 200px 0 !important;}


/*temp*/
#section02 .box .chain li {padding-bottom: 2em;}
#section02 .box .chain h2 {margin-bottom: .1em;}
#section02 .box .chain h2::after { width: 15px; height: 15px;}
#section02 .box .chain li p {line-height: 1.3;}
#section02 .box .chain li .chain_img{border-radius: 10px;    width: 75%;    margin-bottom: .75rem; overflow: hidden;}
#section02 .box .chain li .chain_img img { transition: .3s ease; }
#section02 .box .chain li .chain_img:hover img {transform: scale(1.1);}
@media (max-width: 500px) {
    #section02 .box .chain li .chain_img{border-radius: 7px; width: 90%;}
    #section02 .box .chain h2::after {width: 12px;height: 12px;margin-left: 5px;}

}