@charset "utf-8";


@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,500,600&display=swap');


/*G마켓폰트*/
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



*{margin: 0; padding: 0; box-sizing: border-box;}

body{font-family: 'NanumSquare', sans-serif; font-size: 15px; }

[lang="en"] {font-family: 'NanumSquare', sans-serif;}
[lang="txt"] {font-family: 'Raleway', sans-serif;}

.wrap {position: relative;}
.wrap .hdn {display: none;}

header {width: 100%; height: 60px; position: fixed; padding: 30px 40px 0 60px; z-index: 9999;}
header h1 {position: fixed; left: 30px; z-index: 1003;}
header h1 .logo {display: inline-block; float: right;}
header h1 .mologo {display: none;}
header .nav_btn {display: inline-block; width: 45px; height: 45px; border-radius: 50%; text-align: center; padding: 5px 0px 0; cursor: pointer; transition: all 0.4s; float: left;}
header .nav_btn .patty {display: block; width: 25px; height: 1px; background: #000; border-radius: 2px; margin-bottom: 7px; transition: all 0.4s;}
header .nav_btn .patty:nth-of-type(2){width: 18px;}
header .mo_btn {display: inline-block; width: 33px; height: 33px; border-radius: 50%; text-align: center; padding: 2px 0px 0; cursor: pointer; transition: all 0.4s; float: left; display: none;}
header .mo_btn .patty {display: block; width: 22px; height: 1px; background: #000; border-radius: 2px; margin-bottom: 6px; transition: all 0.4s;}
header .mo_btn .patty:nth-of-type(2){width: 16px;}
header .w_nav {width: 280px; position: fixed; top: 0; left: -280px; bottom: 0; padding: 100px 30px 100px; z-index: 1002; background: rgba(255,255,255,0.9); -webkit-background: rgba(255,255,255,0.9); -o-background: rgba(255,255,255,0.9); -moz-background: rgba(255,255,255,0.9);}
header .w_nav > ul {display: inline-block;width: 100%; margin-top: 30px;}
header .w_nav .main {font-size: 15px; display: block; margin-bottom: 8px; transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg); -moz-transform: skew(-0.03deg);}
header .w_nav .main.on > a {color: #ec1264;}
header .w_nav .main:hover > a {color: #ec1264;} 
header .w_nav .main > a{color: #000; float: left;  padding-right: 20px; display: block; width: 100%; padding: 15px 0; font-weight: bold;}
header .w_nav .main > ul{display: none; width: 100%;}
header .w_nav .main .sub {float: left; font-size: 15px; margin: 10px 15px;  transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg);; -moz-transform: skew(-0.03deg);}
header .w_nav .main .sub > a {color: #000;}
header .w_nav .main .sub > a.on {color: #ec1264;}
header .w_nav .main .sub:hover > a{text-decoration: underline;}
header .m_nav {width: 250px; position: fixed; left: -250px; top: 0; bottom: 0; padding: 60px 20px 0; z-index: 1000; background: rgba(255,255,255,0.95);}
header .m_nav > ul {display: inline-block;width: 100%; margin-top: 30px;}
header .m_nav .main {font-size: 15px; display: block; margin-bottom: 8px; transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg); -moz-transform: skew(-0.03deg);}
header .m_nav .main:hover > a {color: #ec1264;} 
header .m_nav .main > a{color: #000; float: left;  padding-right: 20px; display: block; width: 100%; padding: 15px 0; font-weight: bold;}
header .m_nav .main > ul{display: inline-block; width: 100%; display: none;}
header .m_nav .main .sub {float: left; font-size: 15px; margin: 0 15px;  transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg);; -moz-transform: skew(-0.03deg);}
header .m_nav .main .sub > a {color: #000;}
header .m_nav .main .sub:hover > a{text-decoration: underline;}
header .w_nav .adr {padding-top: 50%; font-size: 13px; color: #999;}
header .w_nav .adr address {padding: 50px 0 15px; line-height: 1.3; border-top: 1px solid #eee; transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg);; -moz-transform: skew(-0.03deg);}
header .w_nav .adr address span.name {font-weight: bold; display: inline-block; padding-bottom: 7px;}
header .w_nav .adr address span.se_ad {display: inline-block; padding-top: 3px;}
header .w_nav .adr_list {line-height: 1.4; transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg);; -moz-transform: skew(-0.03deg);}
header .m_nav .adr {padding-top: 50%; font-size: 13px; color: #999;}
header .m_nav .adr address {padding: 50px 0 15px; line-height: 1.3; border-top: 1px solid #eee; transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg);; -moz-transform: skew(-0.03deg);}
header .m_nav .adr_list {line-height: 1.4; transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg);; -moz-transform: skew(-0.03deg); color: #777;}
header .m_nav .adr address span.name {font-weight: bold; display: inline-block; padding-bottom: 7px;}
header .m_nav .adr address span.se_ad {display: inline-block; padding-top: 3px;}
.dim {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3);-webkit-background: rgba(0,0,0,0.3); -o-background: rgba(0,0,0,0.3); -moz-background: rgba(0,0,0,0.3); z-index: 999; display: none;}
.fix {background: rgba(255,255,255,0.85); -webkit-background: rgba(255,255,255,0.85); -moz-background: rgba(255,255,255,0.85); -o-background: rgba(255,255,255,0.85);}



.layer_pop_tutle {overflow:hidden; height:35px;background:#605b5b; width:100%; color:#fff;}
.layer_pop_tutle_L {float:left; padding-left:20px; line-height:34px; width:80%;}
.layer_pop_tutle_R {float:right;  padding-right:20px; line-height:32px;}
.layer_pop_tutle_R a {color:#fff;}




.mainVisual {width: 100%; position: relative; overflow: hidden;}
.mainVisual .slide1 {background: url(../images/inter_bg1.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide2 {background: url(../images/inter_bg2.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide3 {background: url(../images/inter_bg3.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide4 {background: url(../images/inter_bg4.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide5 {background: url(../images/inter_bg5.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide6 {background: url(../images/inter_bg6.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide7 {background: url(../images/inter_bg7.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide8 {background: url(../images/inter_bg8.jpg) center no-repeat; background-size: cover;}
.mainVisual .slide9 {background: url(../images/inter_bg9.jpg) center no-repeat; background-size: cover;}
.swiper-pagination {text-align: center;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {text-align: center; bottom: 25px;}
.swiper-pagination-bullet {background: #000; opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 10px;}
.swiper-pagination-bullet-active {background: #ec1264;}
.mainVisual .slide_txt {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.mainVisual .slide_txt p{font-size: 100px; color: #ec1264; font-weight: 100;}
.mainVisual .slogan {display: inline-block; position: absolute; color: #ec1264; top: 60%; left: 53%;}
.mainVisual .slide4 > .slogan {color: #ec1264;} 

.container .copy {position: fixed; bottom: 15px; left: 45px; color: #000; z-index: 9999; font-size: 14px;transform: skew(-0.03deg); -webkit-transform: skew(-0.03deg); -o-transform: skew(-0.03deg); -moz-transform: skew(-0.03deg); line-height: 1.2;}
.mainVisual .swiper-container {height: 100%;}
.mainVisual .swiper-container .swiper-slide{height: 100%;}


.typoWrap											{ position:absolute; top:52%; transform:translate(0,-50%); width:100%; text-align:left; z-index:999; text-align:center;}
.typoWrap > span									{ display:inline-block; vertical-align:top; width:100%; line-height:130%; }
.typoWrap .txt_type1								{ padding:0px 0px 0px 0px; text-align:center;}
.typoWrap .txt_type2								{ margin:10px 0px 40px 0px;  text-align:center; }
.typoWrap .txt_type3								{ margin:0px 0px 0px 50px; line-height:170%; }
.typoWrap .btn_type1								{ margin:30px 0px 0px 50px; }
.white_color2							{ color:#ffffff; text-shadow: 2px 2px 2px black; }
.txt_type1								{ font-size:32px; font-weight:400;  font-family: 'GmarketSansMedium';}
.txt_type2								{ font-size:60px; font-weight:700;  font-family: 'GmarketSansMedium';}


/*인트로*/

.intro_box {width: 100%; text-align: center; position: absolute; top: 43%; left: 50%; transform: translate(-50%,-50%);}
.intro_box h3 {padding: 30px 0 40px;}
.intro_box div > span {display: inline-block; padding: 8px 35px; color: #ec1264;font-size: 35px; letter-spacing: -0.8px; font-weight: 100;}
.intro_box > div {padding: 0 0 5px;}
.intro_box > div > p{color: #888; font-size: 17px; line-height: 1.7;}
.intro_box .pdf {position:relative;display: inline-block; height: 100%; color: #888; vertical-align: middle; padding: 5px 15px;}
.intro_box .pdf:hover span.name{color: #ec1264;}
.intro_box .pdf > span.icon {display: inline-block; width: 18px; height: 17px; background: url(../images/intro/down.png) center no-repeat; background-size: 17px 17px; vertical-align: middle;}

.pdf, .pdf:before, .pdf:after{transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;-ms-transition:all .4s;}
.pdfani:after{content:'';height:1px;position:absolute;left:0;right:0;bottom:0;opacity:1;width:0;background-color:#fff;display:block;margin:0 auto;}
.pdfani:hover:after{width:100%;background-color: #ec1264;transition:opacity 0.3s,width 0.3s;}

.intro_logo {width: 100%; text-align: center; position: absolute; bottom: 50px;}

.intro_logo p{color: #888; font-size: 17px; line-height: 1.7;}
.intro_logo p .pdf {position:relative;display: inline-block; height: 100%; color: #888; vertical-align: middle; padding: 5px 15px;}






@media all and (min-width:768px) and (max-width:1439px){
    .mainVisual .swiper-container .swiper-slide {background-size: contain;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {left: 90%;}
}




@media all and (max-width:767px) {


    
    header {padding: 20px 40px 0 60px; background: rgba(255,255,255,0.8);}
    header h1 {left: 10px; width: 100%;}
    header .nav_btn {display: none;}
    header .mo_btn {display: block; margin-right: 5px;}
    header h1 .logo {display: none;}
    header h1 .mologo {display: block; width: 100px; height: 20px; background: url(../images/main_logo1.png) center no-repeat; background-size: 100px 20px; float: left;}
    header .w_nav {padding: 100px 15px 0; display: none;}
    header .w_nav .main {font-size: 14px;}
    header .w_nav .main .sub {font-size: 14px;}
    header .m_nav .main > a {font-size: 14px;}
    header .m_nav .main .sub {margin: 0 10px; font-size: 14px;}
    header .m_nav .adr {font-size: 12px;}
    header .nav_btn {padding: 3px 0px 0; width: 40px; height: 40px;}
    header .nav_btn .patty {height: 1px;}
    .mainVisual .swiper-container .swiper-slide {background-size: cover; z-index: 998;}
    .swiper-pagination-bullet {width: 6px; height: 6px;}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 7px;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {left: 1%; bottom: 15px; top: 90%;}
    .mainVisual .slide_txt p {font-size: 50px;}
    .mainVisual .slide1 {background: url(../images/inter_bg1_mo.jpg) #fff center no-repeat;}
    .mainVisual .slide2 {background: url(../images/inter_bg2_mo.jpg) #fff center no-repeat;}
    .mainVisual .slide3 {background: url(../images/inter_bg3_mo.jpg) #fff center no-repeat;}
	.mainVisual .slide4 {background: url(../images/inter_bg4_mo.jpg) #fff center no-repeat;}
	.mainVisual .slide5 {background: url(../images/inter_bg5_mo.jpg) #fff center no-repeat;}
	.mainVisual .slide6 {background: url(../images/inter_bg6_mo.jpg) #fff center no-repeat;}
	.mainVisual .slide7 {background: url(../images/inter_bg7_mo.jpg) #fff center no-repeat;}
	.mainVisual .slide8 {background: url(../images/inter_bg8_mo.jpg) #fff center no-repeat;}
	.mainVisual .slide9 {background: url(../images/inter_bg9_mo.jpg) #fff center no-repeat;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {text-align: left;}
    .container .copy {left: 10px; font-size: 12px; color: #999;}
    
    .mainVisual .slogan {left: 16%; font-size: 13px; display: none;}
    .intro_box h2 img {width: 150px;}
    .intro_box h3 {padding: 30px 0 30px;}
    .intro_box h3 img {width: 250px;}
    .intro_box div > span {font-size: 25px; padding: 8px 35px 5px;}
    .intro_box > div > p {font-size: 14px;}
    .intro_logo img {width: 80px;}

	.txt_type1								{ font-size:20px; font-weight:400;  font-family: 'GmarketSansMedium';}
	.txt_type2								{ font-size:40px; font-weight:700;  font-family: 'GmarketSansMedium';}
}