.none {display:none}
@import url('common.css');
/*인트로*/
#main{position: fixed;left: 0;top:0;width: 100%;height: 100vh;}
#main:after{content:'';position: absolute;left: 0;top:0;width: 100%;height: 100vh;overflow: hidden;background-color: #272727;opacity:1;transition: opacity 1s;}
#main header, #main header .wrap, #main header .logo{width:100%;height: 100%;}
#main header p, #main header .link{display: none;}
#main header .logo{display: flex;justify-content: center;align-items: center;animation:logo_down 0.5s 1 forwards;}
#main header .logo a{opacity: 0;animation:logo_fade 1s 1 forwards;}

#main.show{position: relative;height: auto;overflow-x: hidden;}
#main.show:after{opacity: 0;}
#main.show header, #main.show header .wrap{height:132px;transition: height 1.2s;}
#main.show header p, #main.show header .link, #main.show header .link2{font-family:'Work Sans', sans-serif;display: block;color: #fff;font-size: 16px;text-align: center;}
#main.show header .link{position:fixed;width: 87px;height:80px;border-radius: 50%;display: flex;justify-content: center;align-items: center;left:3%;}
#main.show header .link2{position:fixed;width: 87px;height:80px;border-radius: 50%;display: flex;justify-content: center;align-items: center;right:3%;color:#ccc}
#main.show header .wrap{display: flex;align-items: center;justify-content: space-between;}
#main.show header .logo{flex-wrap: wrap;align-items: flex-end;/*로고가 너무 크게 잡혀서 크기랑 마진 오토 넣음->*/width: 227px;margin:auto}
#main.show header .logo p{width: 100%;display: flex;justify-content: center;margin-top: 15px;margin-bottom: auto;}
#main.show header .logo p span{font-family: 'Work Sans';font-weight:400;margin-right: 9px;display: block;letter-spacing: 0;}
#main.show header .logo p span:last-child{margin-right: 0;}

.nav-button{cursor: pointer;font-family: 'Work Sans';font-weight: 700;letter-spacing: 0;}
#main header.relative .link, #main header.relative .link2{background: #000;}
#main header.relative p{color: #272727;}
#main header.relative .logo a{background:url(../img/logo_b.png)center no-repeat;}
.scroll_down {position:absolute;z-index:9999;width:100%;bottom:6%;text-align:center;font-size:14px;color:#fff;font-weight:300;letter-spacing:1px; animation: ani 1s infinite alternate;transition: 0.3s;}
@keyframes ani {
	from {
		transform: translate(0,0)
	} to {
		transform:translate(0,30px)
	}
}
@keyframes logo_down {
/*    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }*/
}
@keyframes logo_fade {
    0% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

/*메인비주얼*/
.vs_m {display:none}
.vs_p {display:block;}
#visual{width: 100%;height: 100vh;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.visual_img{width: 100%;}
.arch-bg{position: absolute;left: 0;top:0%;width: 100%;height: 100%;background: url(../img/arch.png)center no-repeat;background-size: cover;}
/*타이틀CSS*/
.main_txt .en_tit {font-family: 'Work Sans',sans-serif;font-size:60px;text-align:center;font-weight:500;color:#6d6d6d;line-height:120%;letter-spacing:-2px}

.main_txt .en_tit span{
	font-family: 'Work Sans',sans-serif;
	background: -ms-linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
.main_txt .en_tit span {
    /* IE10+ */
    background: linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
    /* Mozilla Firefox */
    background: linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
    /* Opera */
    background: linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
    /* Webkit (Safari/Chrome 10) */
    background: linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
    /* Webkit (Chrome 11+) */
    background: linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
    /* W3C Markup */
    background: linear-gradient(to bottom, #24012d, #ba00ff 50%, #24012d);
    /*background: linear-gradient(linear, left bottom, right top, from(brown), to(red));*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .main_txt .en_tit span {
        color: #b401e3;
        background: transparent;
    }
}
.main_txt .ko_tit {font-size:62px;text-align:center;font-weight:600;line-height:150%;color:#333}
/*
.titleM{font-size: 62px;text-align: center;font-weight: 600;letter-spacing: -4px;color: #212121;}
.titleMs{font-size:17px;color: #212121;text-align: center;margin-top: 20px;line-height: 1.5;font-weight: 600;}
.titleB{font-size: 44px;font-weight: 600;color: #212121;letter-spacing: -3px;}
.titleB .gold{display: block;font-size: 18px;font-weight: 600;letter-spacing: 0;}
*/
#info01{padding: 205px 0 140px 0;position: relative;}
#info01 .wrap{width: 1570px;margin: 0 auto}
.line{position: absolute;left: 50%;top:0;width: 1px;height: 190px;background: #1c1c1c;}
#info01 .titleM{text-align: center;font-weight: 600;}
#info01 .titleM span{font-size: 65px;color:#333;display: block;margin: 0 auto;width: 70%;line-height: 1.2;margin:2% auto;letter-spacing: -4px;}
#info01 .titleM em{font-family: 'Work Sans';font-size: 60px;font-weight: 500;letter-spacing: -2px;display: inline-block;}
.review-list{display:flex; justify-content:center;margin-top:90px;}
.review-list li{width: calc(100% / 3);text-align: center;}
.review-list .imgarea{width: 412px;height: 537px;border-radius: 30px;background-color: #000;display: inline-block;margin-bottom:22px;overflow: hidden;}
.review-list .imgarea img{width: 100%;}
.review-list .textarea .gold{font-family: 'Work Sans';font-size: 20px;font-weight: 700;letter-spacing: -0.5px;}
.review-list .textarea .text{font-size: 24px;color: #212121;margin-top: 7px;font-weight: 600;color:#333}

#info02{padding: 220px 0 110px 0;background-color: #eeeeee;position: relative;}
#info02 .wrap{width: 1260px;margin: 0 auto}
#info02 .top{position: absolute;left: 50%;top:83px;background-color: #414141;display: inline-block;width:88px;height: 95px;text-align: center;border-radius: 88px 88px 20px 20px;display: flex;align-items: flex-end;justify-content: center;margin-left: -44px;}
#info02 .top:before{content: '';width: 1px;height: 83px;background:#1a1a1c;position: absolute;left: 50%;top:-83px;}
#info02 .top span{font-size: 16px;font-family: 'Work Sans';color: #fff;display: block;font-weight: 600;letter-spacing: -0.5px;padding-bottom: 10px;}
#info02 .titleM{font-size: 50px;text-align: center;font-weight: 600;letter-spacing: -1px;color: #212121;}
#info02 .titleMs{margin:3% auto 6% auto;font-size:18px;color: #212121;text-align: center;line-height: 200%;font-weight: 400;}

#info03{padding: 120px 0 150px 0;}
#info03 .wrap{width: 1240px;margin: 0 auto;}
#info03 .titleB{font-size: 44px;font-weight: 600;color: #212121;letter-spacing: -1px;margin-bottom:5%}
#info03 .titleB .gold{display: block;font-family: 'Work Sans';font-size: 20px;font-weight: 700;letter-spacing: 0;margin-bottom:3%}
#info03 .titleMs{font-size:18px;color: #212121;text-align:left;margin:2% 0;line-height: 1.5;font-weight: 400;}
.bullet01 li{font-size:18px;padding-left: 10px;position: relative;margin-top: 15px;width:95%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.bullet01 li:before{content: '';width: 3px;height: 3px;background: #212121;border-radius: 50%;position: absolute;left:0;top:50%;margin-top: -1.5px;}

.info-flex{display: flex;align-items: center;}
.info-flex .titleMs{text-align: left;font-size: 15px;}
.info-flex.flex01{flex-direction: row-reverse;margin-bottom: 60px;}
.info-flex.flex01 .imgarea{border-radius: 30px;width: 596px;height: 568px;background-color: #000;overflow: hidden;}
.info-flex.flex01 .textarea{width: calc(100% - 596px);padding-right: 50px;}
.info-flex.flex02 .imgarea{border-radius: 30px;width: 595px;height: 361px;background-color: #000;overflow: hidden;}
.info-flex.flex02 .textarea{width: calc(100% - 595px);padding-left: 150px;}
.info-flex.flex02 .textarea .titleMs{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;display: block;margin-top: 0;}
.info-flex.flex02 .textarea .titleMs:hover{text-decoration: underline;}



@media screen and (max-width: 1680px) {
	#visual{width: auto;height: 100vh;}
	.visual_img{width: auto; height:100vh}
}

@media screen and (max-width: 1570px) {
    .titleM{font-size: 3vw;}
    .titleMs {font-size: 1.2vw;}
    .line{height: 120px;}

    #info01 {padding: 150px 0 100px 0;}
    #info01 .wrap{width: 100%;padding: 0 30px;margin: 0;}
    /*#info01 .titleM em{font-size: 3.5vw;}*/
    .review-list{margin-top: 5.5vw;}
    .review-list li{margin-right: 40px;width: calc((100% - 80px) / 3);}
    .review-list li:last-child{margin-right: 0;}
    .review-list .imgarea{width: 100%;height: 38vw;}
    .review-list .textarea .gold {font-size: 1.2vw;}
    .review-list .textarea .text {font-size: 1.6vw;}

    #info02{padding: 180px 0 100px 0;}
    #info02 .top span {font-size: 14px;}
    #info02 .top{width: 79px;height: 80px;top: 60px;margin-left: -39px;}
    #info02 .top:before{height: 60px;top: -60px;}
    #info02 img{width: 100%;max-width: 1262px;margin: 0 auto;}

    #info03{padding: 100px 0;}
}
@media screen and (max-width: 1300px) {
    #info02 .wrap{width: 100%;padding: 0 30px;margin: 0;}
    #info03 .wrap{width: 100%;padding: 0 30px;margin: 0;}
    .info-flex.flex01 .imgarea{width: 45vw;height: 42vw;}
    .info-flex.flex01 .imgarea img{width: 100%;}
    .info-flex.flex01 .textarea{padding-right: 2%;width: calc(100% - 45vw);}
    .info-flex.flex02 .imgarea{width: 45vw;height: 27vw;}
    .info-flex.flex02 .imgarea img{width: 100%;}
    .info-flex.flex02 .textarea{padding-left: 5%;width: calc(100% - 45vw);}
}
@media screen and (max-width: 1112px) {
	.arch-bg{display: none;}
	.scroll_down {display:none}
	/*헤더*/
    #visual{height: auto;/*padding-top: 80px;*/}
	#main.show header .link, #main.show header .link2 {width: 70px;height: 70px;}
    #main.show header, #main.show header .wrap {height: 95px;}
    #main.show header .logo{width: 190px;margin-top:%}
    .logo a{height: 20px;background-size: 190px;}
    #main.show header .logo a{background-size: 100%;}
    #main.show header .logo p{margin-top: 10px;}
}
@media screen and (max-width: 1024px) {
    .line { height: 70px;}
    /*.titleM { font-size: 4vw;}
    .titleMs {font-size: 1.7vw;}
    .titleB {font-size: 3.8vw;}
    .titleB .gold{font-size: 16px;}*/
	.main_txt .ko_tit {font-size:44px;}
	.main_txt .en_tit {font-size:50px;}
	#info02 .titleM{font-size: 38px;}
	#info03 .titleB{font-size: 30px;}
    #info01 {padding: 120px 0 90px 0;}
    /*#info01 .titleM span{width: 80%;}
    #info01 .titleM em {font-size: 4.2vw;}*/
    .review-list {margin-top: 4.5vw;}
    .review-list li {margin-right: 25px;width: calc((100% - 50px) / 3);}
    .review-list .imgarea {margin-bottom: 8px;height: 35vw;}
    .review-list .textarea .gold {font-size: 1.8vw;}
    .review-list .textarea .text {font-size: 1.8vw;}

    #info02 {padding: 140px 0 50px 0;}
    #info02 .top {width: 74px;height: 74px;top: 40px;margin-left: -37px;}
    #info02 .top:before {height: 40px;top: -40px;}
    /*#info02 .titleMs {margin-bottom: 35px;}*/

    .bullet01 li{margin-top: 10px;}
}
@media screen and (max-width: 900px) {
    /*.titleM {font-size: 28px;}
    .titleMs {font-size: 14px;}
    .titleB {font-size: 23px;}
    .titleB .gold {font-size: 15px;}
    .more-link{padding: 9px 10px 10px 10px;margin-top: 30px;min-width: 140px;}

    #info01 {padding: 92px 0 70px 0;}
    .info-flex .titleMs br{display:none;}	*/
    .review-list .textarea .gold {font-size: 15px;}
    .review-list .textarea .text {font-size: 24px;}

	#info02 .titleMs{line-height: 160%;}

    /*#info01 .titleM em {font-size: 32px;}
    #info02 {padding: 140px 0 35px 0;}
    #info02 .titleMs {margin-bottom: 25px;margin-top: 10px;}*/
    #info03 {padding: 60px 0;}
	#info03 .titleMs, .bullet01 li{font-size:16px}
}
@media screen and (max-width: 600px) {
	.vs_m {display:block}
	.vs_p {display:none;}
	#visual{width: 100%;height: auto;align-items: start;}
	.visual_img{width: 100%; height:auto}
	/*#main.show header .link {display:none}*/

	.main_txt .en_tit {font-size:38px;text-align:center;padding-top:10%}
	.main_txt .ko_tit {font-size:45px;text-align:center}
	
    #info01 {padding: 62px 0 50px 0;}
    /*#info01 .titleM span {width: 100%;}*/
    .review-list{flex-wrap: wrap;max-width: 100%;margin:0 auto;}
	.review-list li:first-child{margin-top: 50px;}
	.review-list li:last-child{margin-bottom: 50px;}
    .review-list li{width: 100%;margin-right: 0;margin-top: 80px;}
    .review-list .imgarea{height: 100vw;}
    .review-list .textarea .gold {font-size: 18px;margin-top:10px}
    .review-list .textarea .text {font-size:30px;margin-top: 4px;}

    #info02 {padding: 130px 0 65px 0;}
    #info02 .top { width: 65px;height: 62px;top: 30px;margin-left: -32px;}
    #info02 .top:before{height: 30px;top: -30px;}
    #info02 .top span {font-size: 13px;padding-bottom: 5px;}
	#info02 .titleMs{font-size:16px;line-height: 170%;}

    /*#info02 .titleMs br{display: none;}*/
	#info03 .titleB .gold {font-size:16px;}
	#info03 .titleMs {font-size:18px;margin:0}
	.bullet01 li{font-size:18px;}
    /*#info01 .titleM em {font-size: 25px;}*/
    /*.review-list {margin-top: 30px;}
    .review-list li {margin-right: 20px;width: calc((100% - 20px) / 3);}
    .review-list .imgarea{border-radius: 20px;}
	*/
    .info-flex{flex-wrap: wrap;}
    .info-flex.flex01{margin-bottom: 60px;}
	.info-flex.flex01 .imgarea {height:75vw}
	.info-flex.flex02 .imgarea {height:50vw}
    .info-flex.flex01 .imgarea, .info-flex.flex01 .textarea, .info-flex.flex02 .imgarea, .info-flex.flex02 .textarea{width: 100%;padding: 0;}
    .info-flex.flex01 .textarea, .info-flex.flex02 .textarea{margin-top: 20px;}
    .info-flex.flex01 .imgarea, .info-flex.flex02 .imgarea{border-radius: 20px;}
}

/*아이폰6,7,8*/
@media screen and (max-width: 500px) {
	/*헤더*/
    #main.show header, #main.show header .wrap {height: 75px;}
    #main.show header .logo {width: 130px;}
    #main.show header .logo p {margin-top: 4px;}
    #main.show header p, #main.show header .link{font-size: 12px;}
	#main.show header .link {width: 55px;height: 55px; position:absolute;}
    #main.show header .link2  {width: 55px;height: 55px;}
    /*비주얼*/
	.line {height: 50px;}
	.main_txt .en_tit {font-size:34px;text-align:center;padding-top:0%}
	.main_txt .ko_tit {font-size:40px;text-align:center}
	/**/
	.review-list li:first-child{margin-top: 30px;}
	.review-list li:last-child{margin-bottom: 30px;}
    .review-list li{width: 100%;margin-right: 0;margin-top: 50px;}
	.review-list .textarea .text {font-size:26px;}
	#info02 .titleM{font-size: 32px;}
	#info03 .titleB{font-size: 24px;margin-bottom:2%}
}

/*아이폰 12,13 Pro Max*/
@media screen and (max-width: 428px) {
	.main_txt .en_tit {font-size:30px;text-align:center;padding-top:0%}
	.main_txt .ko_tit {font-size:34px;text-align:center}
	.review-list .textarea .gold {margin-top:5px;font-size:16px}
	.review-list .textarea .text {font-size:22px}
	#info02 .titleM {font-size:28px}
	#info03 .titleB .gold {font-size:16px}
	#info03 .titleB {font-size:20px}
	.bullet01 li, #info03 .titleMs {font-size:16px}
}

/*아이폰 6,7,8 Plus,갤럭시 S20 울트라,*/
@media screen and (max-width: 414px) {
    /*.titleM {font-size: 24px;}
    .more-link {margin-top: 18px;min-width: 126px;}
    #info03 {padding: 40px 0;}
    .review-list{max-width: 100%;}
    .review-list .imgarea {height: 80vw;}
    .review-list .textarea .text {font-size: 17px;}
    .info-flex.flex01 .imgarea, .info-flex.flex02 .imgarea{height: 53vw;}
    .info-flex .titleMs{margin-top: 12px;}
    .bullet01 li {margin-top: 5px;}*/
}

/*아이폰 12,13 Pro Max*/
@media screen and (max-width: 390px) {
}

/*아이폰6,7,8,X, 갤럭시 S20, S21*/
@media screen and (max-width: 375px) {
}

/*갤럭시 S8*/
@media screen and (max-width: 360px) {
}

/*아이폰5, 폴드z*/
@media screen and (max-width: 320px) {
}