@charset "utf-8";

@font-face {
    font-family: 'NotoSans';
    font-weight: 300;
    src: url(../fonts/NotoSansCJKkr-Thin.eot);
    src: url(../fonts/NotoSansCJKkr-Thin.eot?#iefix) format('embedded-opentype'), url(../fonts/NotoSansCJKkr-Thin.woff) format('woff'), url(../fonts/NotoSansCJKkr-Thin.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans';
    font-weight: 400;
    src: url(../fonts/NotoSansCJKkr-Regular.eot);
    src: url(../fonts/NotoSansCJKkr-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/NotoSansCJKkr-Regular.woff) format('woff'), url(../fonts/NotoSansCJKkr-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans';
    font-weight: 500;
    src: url(../fonts/NotoSansCJKkr-Medium.eot);
    src: url(../fonts/NotoSansCJKkr-Medium.eot?#iefix) format('embedded-opentype'), url(../fonts/NotoSansCJKkr-Medium.woff) format('woff'), url(../fonts/NotoSansCJKkr-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans';
    font-weight: 700;
    src: url(../fonts/NotoSansCJKkr-Bold.eot);
    src: url(../fonts/NotoSansCJKkr-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/NotoSansCJKkr-Bold.woff) format('woff'), url(../fonts/NotoSansCJKkr-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans';
    font-weight: 800;
    src: url(../fonts/NotoSansCJKkr-Black.eot);
    src: url(../fonts/NotoSansCJKkr-Black.eot?#iefix) format('embedded-opentype'), url(../fonts/NotoSansCJKkr-Black.woff) format('woff'), url(../fonts/NotoSansCJKkr-Black.ttf) format('truetype');
}

/* defult */
*,
*:before,
*:after{box-sizing: border-box;}
*:focus{outline: none;}
html {-webkit-text-size-adjust: none;-webkit-tap-highlight-color: transparent}
body,textarea,select,table,button {margin:0;padding:0;}
body,textarea,select,table,button,input{font-family:'NotoSans',NanumGothic,'나눔고딕',dotum,'돋움',sans-serif;font-size:14px;color:#222;font-weight: 400;line-height: 1.5;letter-spacing: -0.02em;}
img {border:0;vertical-align:middle;max-width: 100%}
ul,ol {margin:0;padding:0;list-style:none;}
dl,dl dt,dl dd,form,td,p {margin:0;padding:0;}
li,li img,dt img,dd img,td img,p img {vertical-align:top;margin:0;padding:0;}
fieldset {margin:0;padding:0;border:0;}
legend {position:absolute;visibility:hidden;overflow:hidden;height:0;line-height:0;width:0;margin:0;padding:0;font:0/0 Arial;}
caption {visibility:hidden;overflow:hidden;height:0;line-height: 0;width:0;margin:0;padding:0;font:0/0 Arial;}
svg {overflow: hidden;vertical-align: middle}
hr {display:none;}
h1,h2,h3,h4,h5,h6{margin: 0;}
a {text-decoration:none;color:#222;}
a:hover {text-decoration:none;}
table {table-layout:fixed;border-spacing: 0;border-collapse: collapse;width: 100%;}
td{word-break: break-word;word-break: break-all;}
input {overflow:visible;vertical-align:middle;}
button{border: 0;cursor: pointer;background:transparent;}
button,input[type=submit],input[type=text],input[type=button],input[type=tel],input[type=number],input[type=email],input[type=password]{-moz-appearance: none;-webkit-appearance: none;border-radius: 0;white-space:normal;background:none;line-height:1;}
select,label {padding:0;margin:0;vertical-align:middle;}
label{display: inline-block;}
em,address,i {font-style:normal;}
textarea {vertical-align:top;margin:0;padding:0;}
object,param {padding:0;margin:0;line-height:0;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption {display:block;}

.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}

.black{color: #222 !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}

html,
body,
#wrap,
#container{height: 100%;}

#header{border-top: 6px solid #d91d52;position: fixed;width: 100%;z-index: 100;}
#header h1{position: fixed;left:60px;top: 41px;}
#header h1 a{display: block;background: url('../images/logo.svg') 0 0 no-repeat;width: 168px;height: 43px;}
#header address{position: fixed;right: 60px;top: 41px;line-height: 24px;display: block;text-align: right;color: #555;}
#header nav{position: fixed;left:270px;top: 43px;}
#header nav ul:after{content:'';display:block;clear:both}
#header nav li{position: relative;padding-right: 21px;margin-right: 20px;float: left;}
#header nav li:before{content: '';display: block;width: 1px;height: 11px;background-color: #ccc;position: absolute;right:0;top:50%;margin-top: -6px;}
#header nav li:last-child:before{display: none;}
#header nav a{font-weight: 500;font-size: 18px;display: block;}
#header nav a.on{color: #d91d52;}

#container > div{height: 100%;position: relative;}

h2{color: #d91d52;height: 75px;line-height: 1;margin-bottom: 35px;}
h2 span{font-size: 46px;font-weight: 300;letter-spacing: -0.02em;position: relative;display: inline-block;padding-bottom: 30px;}
h2 span:before{content: '';display: block;width: 100%;height: 2px;background-color: #d91d52;position: absolute;left:0;bottom: 0;}
h2 b{font-weight: 800;font-size: 26px;margin-left: 5px;}

.txt{font-size: 18px;color: #999;line-height: 26px;margin-bottom: 15px;}
.txtL{font-size: 26px;color: #777;font-weight: 500;line-height: 36px;}
.txtL strong{font-weight: 500;font-size: 30px;color: #d91d52;margin-left: 8px;}

.bgMobile {display: none;}

#page1{}
#page1 .bg{padding-bottom: 180px;height: 100%;position: absolute;top: 0;left: 0;width: 100%;}
#page1 .bg div{height: 100%;background:#e4ddd5 url('../images/bg1.png') 50% 100% no-repeat;}
#page1 .scroll{position: absolute;bottom: 5px;left: 0;width: 100%;text-align: center;}
#page1 .content{text-align: center;position: absolute;left: 0;top: 20%;width: 100%;}
#page1 p{font-size: 46px;color: #222;font-weight: 300;}
#page1 p strong{font-weight: 400;color: #d91d52;}
#page1 p span{position: relative;}
#page1 p span:before{content: '';display: block;width: 6px;height: 6px;background-color: #d91d52;border-radius: 6px;position: absolute;top: -18px;left: 50%;margin-left: -3px;}
#page1 .down{margin-top: 60px;}
#page1 .down a{margin: 0 9px;}

#page2 h2{margin-top: 60px;}
#page2 .bg{background: url('../images/bg2.png') 0 0 no-repeat;position: absolute;left:50%;top:50%;width: 50%;height: 460px;margin-top: -230px;}
#page2 .content{height: 460px;width: 1200px;position: absolute;left:50%;top: 50%;margin: -230px 0 0 -600px;}
#page2 .obj{position: absolute;right: 78px;top: -73px;}

#page3 h2{margin-top: 125px;}
#page3 .bg{position: absolute;left: 0;top: 50%;width: 100%;height: 460px;margin-top: -230px;background-color: #eee;border-top: 200px solid #fff;}
#page3 .content{height: 460px;width: 1200px;position: absolute;left:50%;top: 50%;margin: -230px 0 0 -600px;}
#page3 .obj{position: absolute;right: -30px;top: -60px;}

#page4 h2{margin-top: 85px;}
#page4 .bg{position: absolute;left: 0;top: 42%;width: 100%;height: 460px;margin-top: -230px;background-color: #eee;}
#page4 .content{height: 460px;width: 1200px;position: absolute;left:50%;top: 42%;margin: -230px 0 0 -600px;}
#page4 .obj{position: absolute;right: -30px;top: -92px;}
#page4 .info{width: 100%;text-align: center;position: absolute;left: 0;bottom: 0;font-size: 16px;line-height: 26px;color: #777;padding-bottom: 55px;}
#page4 .info .time span{margin: 0 5px;}
#page4 .info .time em{color: #222;}
#page4 .info .address{margin: 15px 0 25px;}
#page4 .info .copyright{color: #999;}
#page4 .info .copyright span{color: #222;}
#page4 .info .copyright span i{color: #d91d52;}

.gallery .bg{position: absolute;left: 0;top: 48%;width: 100%;height: 440px;margin-top: -220px;background-color: #eee;}
.gallery .content{width: 100%;position: absolute;left:0;top: 48%;margin: -280px 0 0 0;}
.gallery .info{width: 100%;text-align: center;position: absolute;left: 0;bottom: 0;font-size: 16px;line-height: 26px;color: #777;padding-bottom: 50px;}
.gallery .info .time span{margin: 0 5px;}
.gallery .info .time em{color: #222;}
.gallery .info .address{margin: 15px 0 25px;}
.gallery .info .copyright{color: #999;}
.gallery .info .copyright span{color: #222;}
.gallery .info .copyright span i{color: #d91d52;}
.gallery .swiper-slide {width: 600px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.gallery .item{padding-left: 250px;position: relative;width: 600px;}
.gallery .text{position: absolute;left:0;top:12px;width: 240px;}
.gallery .brand{font-weight: 800;font-size: 20px;color: #222;height: 50px;position: relative;}
.gallery .brand:before{content: '';display: block;width: 60px;height: 2px;background-color: #0a0e04;position: absolute;left:0;bottom:0;}
.gallery .name{font-weight: 500;font-size: 26px;color: #222;margin-top: 30px;line-height: 1.3;}
.gallery .option{font-weight: 400;font-size: 16px;color: #999;margin-top: 10px;}
.gallery .number{font-weight: 300;font-size: 80px;color: #d91d52;line-height: 1.4;}
.gallery .image{}
.gallery .image img{height: 520px;}
.gallery .nav{width: 1200px;position: absolute;left:50%;bottom: 0;margin-left: -600px;z-index: 10;}
.gallery .nav a{display: inline-block;cursor: pointer;margin-right: 18px;}
#swiperMobile {display: none;}
#navMobile {display: none;}

@media screen and (max-width:1024px){
    #header h1{left: 20px;}
    #header nav{left: 230px;}
    #header address{right: 20px;}
    
    #page2 .content{width: 984px;margin-left: -492px;}
    #page2 .obj{width: 250px;top: 0;}
    #page2 .obj img{height: 450px;}
    
    #page3 .content{width: 984px;margin-left: -492px;}
    #page3 .obj{right: 0;top: 0;}
    #page3 .obj img{height: 450px;}
    
    #page4 .content{width: 984px;margin-left: -492px;}
    #page4 .obj{right: 0;top: 0;}
    #page4 .obj img{height: 450px;}
}

@media screen and (max-width:768px){
    img{max-width:100%}
    
    .mt30{margin-top: 10px !important;}
    
    #header{border-top: 3px solid #d91d52;}
    #header h1{left: 20px;top: 25px;}
    #header h1 a{width: 110px;-webkit-background-size: 100% auto;background-size: 100% auto;}
    #header address{display: none;}
    #header nav{position: fixed;left:160px;top: 25px}
    #header nav ul:after{content:'';display:block;clear:both}
    #header nav li{position: relative;padding-right: 11px;margin-right: 10px;float: left;}
    #header nav li:before{content: '';display: block;width: 1px;height: 11px;background-color: #ccc;position: absolute;right:0;top:50%;margin-top: -6px;}
    #header nav li:last-child:before{display: none;}
    #header nav a{font-size: 14px;padding: 0 3px;}
    
    h2{color: #d91d52;height: 45px;line-height: 1;margin-bottom: 10px;}
    h2 span{font-size: 26px;font-weight: 300;letter-spacing: -0.02em;position: relative;display: inline-block;padding-bottom: 15px;}
    h2 span:before{content: '';display: block;width: 100%;height: 1px;background-color: #d91d52;position: absolute;left:0;bottom: 0;}
    h2 b{font-weight: 800;font-size: 17px;margin-left: 5px;}

    .txt{font-size: 13px;line-height: 18px;margin-bottom: 5px;letter-spacing: -0.03em;}
    .txtL{font-size: 16px;line-height: 20px;}
    .txtL strong{font-size: 20px;color: #d91d52;margin-left: 5px;}
    
    .bgMobile {display: block;}
    
    #page1 .bg{padding-bottom: 150px;height: 100vh;}
    #page1 .bg div{background-size: auto 100%}
    #page1 p{font-size: 28px;}
    #page1 p em{display: block;margin-top: 10px;}
    #page1 p span:before{width: 4px;height: 4px;top: -10px;margin-left: -2px;}
    #page1 .scroll{bottom: -18px;}
    #page1 .scroll img{width: 40px;}
    #page1 .down{margin-top: 30px;}
    #page1 .down a{margin: 0 5px;}
    #page1 .down a img{width: 130px;}
    
    #page2 .bg{display: none;}
    #page2 .content{height: auto;width: auto;position: static;margin: 0;padding: 0 20px;}
    #page2 .obj{display: none;}
    #page2 .bgMobile{margin-top: 10px;}
   
    #page3 h2{margin-top: 0;}
    #page3 .bg{display: none;}
    #page3 .content{height: auto;width: auto;position: static;margin: 0;padding: 0 20px;}
    #page3 .obj{display: none;}
    #page3 .bgMobile{margin-top: 10px;}
    
    #page4 h2{margin-top: 0;}
    #page4 .bg{display: none;}
    #page4 .content{height: auto;width: auto;position: static;margin: 0;padding: 0 20px;}
    #page4 .obj{display: none;}
    #page4 .bgMobile{margin-top: 10px;padding-bottom: 20px;}
    #page4 .info{font-size: 11px;line-height: 14px;padding-bottom: 15px;}
    #page4 .info .address{margin: 10px 0;}
    
    #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{height: 8px;width: 8px;margin: -4px 0 0 -4px;}
    
    .gallery{display: table;height: 100%;width: 100%;}
    .gallery .bg{position: absolute;left: 0;top: 44%;width: 100%;height: 280px;margin-top: -130px;background-color: #eee;border-bottom: 60px solid #fff;}
    .gallery .content{width: 100%;height: 280px;position: absolute;left:0;top:44%;margin-top: -180px;}
    .gallery .info{font-size: 11px;line-height: 14px;padding-bottom: 12px;}
    .gallery .info .address{margin: 8px 0;}    
    #swiperDesktop{display: none;}
    #navDesktop{display: none;}
    #swiperMobile {display: block;}
    #navMobile {display: block;}
    .gallery .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
    .gallery .item{position: relative;width: 100%;padding-left: 0;}
    .gallery .text{position: absolute;left:20px;top:12px;width: 60%;}
    .gallery .brand{font-size: 15px;height: 40px;position: relative;}
    .gallery .brand:before{content: '';display: block;width: 40px;height: 2px;background-color: #0a0e04;position: absolute;left:0;bottom:0;}
    .gallery .name{font-size: 18px;margin-top: 30px;line-height: 1.3;letter-spacing: -0.02em;}
    .gallery .option{font-size: 14px;margin-top: 10px;}
    .gallery .number{font-size: 56px;line-height: 1.4;}
    .gallery .image{text-align: right;padding-right: 0;}
    .gallery .image img{height: 390px;}
    .gallery .nav{position: relative;width: auto;margin: -100px 0 0 20px;left: 0;}
    .gallery .nav a{display: inline-block;cursor: pointer;margin-right: 12px;}
    .gallery .nav a img{width: 40px;}
   
}

@media screen and (max-width:360px){
    #header h1{left: 15px;top: 20px;}
    #header nav{position: fixed;left:140px;top: 25px}
    #header nav a{font-size: 13px;}
    
    .txt{font-size: 12px;letter-spacing: -0.04em;}
    
    #page2 .content{height: auto;width: auto;position: static;margin: 0;padding: 0 15px;}