@charset "utf-8";

/* common */
::selection{background:rgba(0, 0, 0, 0.8); color:#fff;}
body{font-size:16px; word-break:keep-all;}
p, li, a{line-height:1.7; font-weight:300; font-size:16px; color:#666;}

/* header */
#header{position:absolute; width:100%;  z-index:99;}
#header h1{display:none; position:absolute; top:50%; left:20px; margin-top:-19px;}
#header h1 a{display:block;}
#header .inr{padding-left:50px; box-sizing:border-box;}
#header nav .btn_menu{display:none; position:absolute;top:50%;left:50%;z-index:91; width:35px; height:26px; margin-top:-12px; margin-left:-12px; font-size:0px;transition:all 0.3s ease 0s;}
#header nav .btn_menu > span{display:block;position:absolute;left:0px;width:100%;height:2px; background:#111;}
#header nav .btn_menu > span:nth-of-type(1){top:0;}
#header nav .btn_menu > span:nth-of-type(2){top:50%; width:20px; margin-top:-1px; transition:background 0.3s ease 0s;}
#header nav .btn_menu > span:nth-of-type(3){bottom:0;}
#header nav .btn_menu > span:nth-of-type(1),
#header nav .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header nav .btn_menu.active{transform:rotate(180deg);}
#header nav .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg);}
#header nav .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header nav .btn_menu.active > span:nth-of-type(3){top:10px; transform:rotate(45deg);}
#header nav .btn_menu.active > span:nth-of-type(1),
#header nav .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header nav .btn_close{display:none; position:absolute; top:0px; left:0px; width:30%; height:100%; font-size:0;}

#header.mob nav{position:fixed; top:0px; left:-100%; z-index:100; width:100%; height:100%; transition:all 0.5s ease-out 0s;}
#header.mob nav.active{left:0px;}
#header.mob nav .gnb{position:absolute; top:0px; left:0px; z-index:91; width:100%; height:100%; padding-top:250px; background:#fff url(../images/common/bg_gnb.png) no-repeat; overflow-y:auto; box-sizing:border-box;}
#header.mob nav .gnb > li > a{display:block; padding:30px 0 25px; font-family:'yg-jalnan'; font-size:38px; color:#111; transition:all 0.3s ease 0s;}
#header.mob nav .gnb > li > a.active{background:#eeaf5e; color:#fff; border-color:#eeaf5e;}
#header.mob nav .gnb > li ul{display:none; padding:20px; border-bottom:1px solid #ececec;}
#header.mob nav .gnb > li ul > li > a{display:block; padding:10px 0px;}
#header .menu_fix{position:absolute; top:0; right:0; width:134px; height:120px; border-bottom:1px solid rgba(255, 255, 255, 0.15); transition:left 0.6s ease-in-out 0s, background 0.5s ease 0s; box-sizing:border-box;}
#header .menu_fix.hideMenu{left:-100%;}
#header *[data-layout-menu="white"]{background:#fff;}
#header *[data-layout-menu="black"]{background:rgba(0,0,0,0.16);}
#header *[data-layout-menu="black"] > .btn_menu > span{background:rgba(255, 255, 255, 0.43);}
#header *[data-layout-menu="black"] em{color:#fff;}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){background:#111;}
#header .area_util > ul{position:absolute; top:38px; right:138px;}
#header .area_util li{display:inline-block;}
#header .area_util li a{display:inline-block; opacity: 0.5; font-size:12px; font-weight:500; color:#222;}
#header .area_util li.on a{opacity:1; font-weight:700;}
#header .area_util li:first-child:after{content:''; display:inline-block; margin:0 7px 0 10px; width:1px; height:10px; background-color: rgba(255,255,255,0.2);background-color:rgba(0,0,0,0.2);}

.bgBlack #header .area_util li a{color:#fff;}
.bgBlack #header .area_util li:first-child:after{background-color: rgba(255,255,255,0.2);}

/* gnb */
#header nav{position:fixed; z-index:90; width:45%; transition:all 0.3s ease 0s;}
#header .gnb > li{float:left; position:relative; width:25%; text-align:center;}
#header .gnb > li > a{display:inline-block; padding:50px 0; color:#111; font-family:'Quicksand'; font-size:18px; font-weight:600; letter-spacing:1px; transition:all 0.8s ease 0s;}
#header.active .gnb > li > a{color:#111; transition-delay:0s;}
nav > .gnb > li > ul{position:absolute; top:70px; left:0px; z-index:90; width:100%; padding:20px 10px; background:rgba(0, 0, 0, 0.9); box-sizing:border-box;}
nav > .gnb > li > ul > li > a{display:block; position:relative; margin-top:4px; color:#fff; font-weight:300; font-size:14px; transition:all 0.3s ease 0s;}
nav > .gnb > li > ul > li:first-child > a{border-top:0;}
nav > .gnb > li > ul > li > a:hover,
nav > .gnb > li > ul > li > a:focus{color:#31a324;}
nav > .gnb > li > ul > li:first-child > a:hover,
nav > .gnb > li > ul > li:first-child > a:focus{border-top:0;}
nav > .gnb > li > ul > li > a:hover:before,
nav > .gnb > li > ul > li > a:focus:before{opacity:1;}
nav > .gnb > li:last-child > ul{right:0px; left:auto;}
nav > .gnb > li > a.open{display:none;}
.bgBlack #header .gnb > li > a{color:#fff;}

/* lnb */
.lnb{position:fixed; top:100px; left:0px; z-index:50; width:100%; background:#666;}
.lnb .inr{max-width:1500px; margin:0 auto;}
.lnb .dept > li{float:left; position:relative; width:210px; height:40px; border-right:1px solid #323232; box-sizing:border-box;}
.lnb .dept_tit a{position:relative; transition:all 0s ease 0.3s;}
.lnb .dept_tit a:hover,
.lnb .dept_tit a.active{background:#333;}
.lnb .dept_tit a:after{content:''; display:block; position:absolute; top:50%; right:10%; width:9px; height:5px; margin-top:-2.5px; background:url(../images/common/lnb_arrow.png) no-repeat 90% 50%;}
.lnb .dept_tit a.active:after{transform:rotate(180deg);}
.lnb .dept > li a,
.lnb .dept_tit span{display:block; padding:9px 10px 8px 20px; font-size:14px; color:#fff; font-weight:200; box-sizing:border-box;}
.lnb .dept_tit span{display:block; padding:8px 10px 8px 20px; font-family:'Quicksand'; font-size:15px; color:#fff; font-weight:400; letter-spacing:1px;}
.lnb .dept .home{width:42px; padding:0; border-left:1px solid #323232; background:url(../images/common/ico_home.png) no-repeat 50%; box-sizing:border-box;}
.lnb .dept .home a{display:block; height:100%; padding:0; font-size:0; text-indent:100%; overflow:hidden; white-space:nowrap;}
.lnb .dept_list{display:none; position:absolute; top:40px; left:0; width:100%; z-index:20;}
.lnb .dept_list a{display:block; width:100%; font-size:14px; font-weight:200; box-sizing:border-box; color:#fff; background:rgb(125, 125, 125);}
.lnb .dept_list a:hover{background:#565656;}
.lnb .dept:after{content:''; display:block; clear:both;}
.btn_m_lnb{display:none; position:relative; padding:12px 35px 12px 15px; border:1px solid #dbdbdb; font-size:16px; transition:all 0.3s ease 0s;}
.btn_m_lnb:after{content:''; display:block; position:absolute; right:20px; top:50%; width:9px; height:5px; margin-top:-2.5px; background:url(../images/common/img_arrow_blue.png) no-repeat 0 0; background-size:100%; transition:all 0.3s ease 0s;}
.btn_m_lnb.active{background-color:#faa61a; border:1px solid #faa61a; color:#fff;}
.btn_m_lnb.active:after{background-image:url(../images/common/img_arrow.png); transform:rotate(-360deg);}
.dept_tit.contact_tit > a:after{display:none;}

/* mob_gnb */
#header .all_menu{position:fixed; top:0; right:0; width:130px; height:130px; z-index:1;}
#header .all_menu:before{content:''; display:block; position:absolute; left:50%; top:50%; width:29px; height:24px; margin-left:-14.5px; margin-top:-12px; background:url(../images/common/all_menu.png) no-repeat; transition:all 0.5s ease 0s;}
#header .all_menu.active{background:#fff; z-index:100;}
#header .all_menu.active:before,
.bgBlack #header .all_menu.active:before{width:26px; height:27px; margin-left:-13px; margin-top:-13.5px; background:url(../images/common/menu_close.png) no-repeat;}
.bgBlack #header .all_menu:before{background:url(../images/common/all_menu_w.png) no-repeat;}

#header .mob_gnb{position:absolute; top:0; left:0; z-index:90; width:100%; height:100vh; min-height:830px; background:rgba(0, 1, 3, 0.9); box-sizing:border-box; box-sizing:border-box; transition:all 0.7s cubic-bezier(0, 0, 0.26, 0.63) 0.5s; opacity:0; visibility:hidden;}
#header .mob_gnb .gnb{max-width:1500px; height:100%; margin:0 auto; padding-top:250px; box-sizing:border-box;}
#header .mob_gnb .gnb > li{float:left; width:25%; text-align:left; opacity:0; transition:all 0.5s ease 0s;}
#header .mob_gnb .gnb > li > a{padding:0; color:#fff; transition:all 0.3s ease 0s;}
#header .mob_gnb .gnb > li > a:hover{color:#bbb;}
#header .mob_gnb .gnb > li ul{margin-top:30px;}
#header .mob_gnb .gnb > li ul li{margin-top:15px;}
#header .mob_gnb .gnb > li ul li:first-child{margin-top:0;}
#header .mob_gnb .gnb > li ul a{display:block; color:#999; font-size:14px;}
#header .mob_gnb.active{left:0px; transition-delay:0s; opacity:1; visibility:visible;}
#header .mob_gnb.active .gnb > li{opacity:1; transform:translateX(0);}
#header .mob_gnb.active .gnb > li:nth-of-type(1){transition-delay:0.4s;}
#header .mob_gnb.active .gnb > li:nth-of-type(2){transition-delay:0.5s;}
#header .mob_gnb.active .gnb > li:nth-of-type(3){transition-delay:0.6s;}
#header .mob_gnb.active .gnb > li:nth-of-type(4){transition-delay:0.7s;}
#header .mob_gnb .gnb:after{content:''; display:block; clear:both;}

/* mobile gnb */ 
#header .btn_menu{display:none; position:absolute; top:35px; right:20px; z-index:101; width:30px; height:24px; transform:translateY(-50%);}
#header .btn_menu span{opacity:1; display:block; position:relative; right:0px; height:1px; margin:10px 10px 6px 0; background:#111; font-size:0px; transition:all 0.5s ease 0s;}
#header .btn_menu:before,
#header .btn_menu:after{content:''; display:block; width:100%; height:1px; background:#111; transition:all 0.5s ease-out 0s;}
.bgBlack #header .btn_menu span{background:#fff;}
.bgBlack  #header .btn_menu:before,
.bgBlack  #header .btn_menu:after{content:''; display:block; width:100%; height:1px; background:#fff; transition:all 0.5s ease-out 0s;}
#header .btn_menu:after{margin-top:10px;}
#header .btn_menu.active span{opacity:0;}
#header .btn_menu.active:before{background:#111; transform:rotate(45deg) translate(9px, 7px);}
#header .btn_menu.active:after{background:#111; transform:rotate(135deg) translate(-9px, 6px);}
#header .bg_gnb{position:absolute; left:0px; top:0px; z-index:70; width:100%; background:#fff; transform:translateY(-100%); transition:all 0.6s ease 0s; box-shadow:0 2px 10px 0 rgba(0, 0, 0, 0.1);}
#header .bg_gnb.active{transform:translateY(0);}
.m_gnb{position:fixed; top:0px; right:-100%; z-index:102; width:250px; height:100%; background:#000; transition:all 0.8s ease-out 0s; overflow-y: auto;}
.m_gnb > ul{padding-top:50px;}
.m_gnb > ul > li > a{display:block; position:relative; padding:10px 30px; color:#fff; font-family:'Quicksand'; font-size:18px; font-weight:600;}
.m_gnb > ul > li > a > span{display:none;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:28px; right:25px; width:9px; height:5px; background:url(../images/common/lnb_arrow.png) no-repeat 50% 0; transition:all 0.4s ease 0s;}
.m_gnb > ul > li > a.active:before{background:url(../images/common/lnb_arrow.png) no-repeat; transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; margin-bottom:20px;}
.m_gnb > ul > li > ul > li > a{display:block; position:relative; padding:5px 0 5px 30px; color:#999; font-size:14px; font-weight:400;}
.m_gnb .btn_close{opacity:0; display:block; position:fixed; top:0px; right:-100%; width:calc(100% - 250px); height:100%; font-size:0px;}
.m_gnb.active{left:0;}
.m_gnb.active .btn_close{opacity:1; right:0; background:rgba(0, 0, 0, 0.6);}

/* fullMenu */
#fullMenu{position:fixed; right:0; width:130px; height:100%; z-index:10; box-sizing:border-box;}
#fullMenu ul{position:absolute; top:50%; margin-top:-32px;}
#fullMenu li{margin-top:15px;}
#fullMenu li:first-child{margin-top:0;}
#fullMenu li a{display:block; width:13px; height:2px; background:#111; font-size:0; text-indent:100%; overflow:hidden; white-space:nowrap; transition:background 0.5s ease 0s;}
#fullMenu li.active a{width:13px; height:13px; border-radius:50%; background:none; border:2px solid #111; box-sizing:border-box;}
.fp-viewing-service #fullMenu{border:1px solid rgba(232, 50, 73, 0.15);}
.fp-viewing-service #fullMenu li a{color:rgba(232, 50, 73, 0.3);}
.fp-viewing-service #fullMenu li a:before{background:rgba(232, 50, 73, 0.3);}
.fp-viewing-service #fullMenu li.active a{color:#e83249;}
.fp-viewing-service #fullMenu li.active a:before{background:#e83249;}
.fp-viewing-service #fullMenu li.active a:after{border:1px solid #e83249;}
.fp-viewing-yogo #fullMenu{border:1px solid rgba(65, 46, 52, 0.15);}
.fp-viewing-yogo #fullMenu li a{color:rgba(65, 46, 52, 0.3);}
.fp-viewing-yogo #fullMenu li a:before{background:rgba(65, 46, 52, 0.3);}
.fp-viewing-yogo #fullMenu li.active a{color:#412e34;}
.fp-viewing-yogo #fullMenu li.active a:before{background:#412e34;}
.fp-viewing-yogo #fullMenu li.active a:after{border:1px solid #412e34;}
.fp-viewing-downcenter #fullMenu{border:1px solid rgba(30, 53, 96, 0.15);}
.fp-viewing-downcenter #fullMenu li a{color:rgba(30, 53, 96, 0.3);}
.fp-viewing-downcenter #fullMenu li a:before{background:rgba(30, 53, 96, 0.3);}
.fp-viewing-downcenter #fullMenu li.active a{color:#1e3560;}
.fp-viewing-downcenter #fullMenu li.active a:before{background:#1e3560;}
.fp-viewing-downcenter #fullMenu li.active a:after{border:1px solid #1e3560;}
.bgBlack #fullMenu li.active a{background:transparent; border-color:#fff;}
.bgBlack #fullMenu li a{background:#fff;}

/* tab */
.area_tab{position:relative; top:102px; left:720px; width:calc(100% - 720px); background:#f7f7f7;}
.area_tab ul{margin-left:50px;}
.area_tab li{float:left; margin-right:35px;}
.area_tab li a{display:block; position:relative; padding:20px 0; color:#888; font-size:15px; font-weight:300; box-sizing:border-box;}
.area_tab li a.on{color:#cab271; font-weight:500;}
.area_tab li a.on:before{content:''; display:block; position:absolute; top:-1px; left:0; width:47px; height:1px; background:#cab271; z-index:10;}
.area_tab ul:after{content:''; display:block; clear:both;}

/* footer */
#footer{position:fixed; bottom:40px; left:0; width:100%; z-index:100;}
#footer .inr{position:relative; width:calc(100% - 260px); margin:0 auto;}
#footer .left{float:left;}
#footer .right{float:right;}
#footer h1{display:inline-block; position:relative; margin-right:10px; padding-left:25px; color:#bbb; font-size:14px; font-weight:500; vertical-align:middle;}
#footer h1:before{content:''; display:block; position:absolute; left:0; top:0; width:19px; height:18px; background:url(../images/common/logo.png) no-repeat 50%;}
#footer p{display:inline-block; color:#bbb; font-family:'Quicksand'; font-size:13px; font-weight:400; vertical-align:middle; word-break:break-word;}
#footer .inr:after,
#container:after{content:''; display:block; clear:both;}

/* navi  */
.navi{position:fixed; right:50px; top:50%; z-index:30; transform:translateY(-50%);}
.navi.fixed{position:fixed;}
.navi li{margin-top:15px;}
.navi li:first-child{margin-top:0;}
.navi li a{display:block; width:13px; height:2px; background:#111; font-size:0; text-indent:100%; overflow:hidden; white-space:nowrap; transition:background 0.5s ease 0s;}
.navi li a.active{height:13px; border-radius:50%; background:none; border:2px solid #111; box-sizing:border-box;}

@media all and (max-width:1850px){
	#fullMenu ul{left:50%; margin-left:-6.5px;}
}

@media all and (max-width:1700px){
	#fullMenu{width:100px;}
	#header .mob_gnb .gnb{max-width:100%;}
	#header .mob_gnb .gnb > li{text-align:center;}
}

@media all and (max-width:1500px){
	#header nav{width:70%;}
	.lnb .inr{max-width:100%;}
	#footer .inr{width:100%; padding:0 50px; box-sizing:border-box;}
	.navi{right:5px;}
}

@media all and (max-width:1200px){
	#wrap{position:relative;}
	#header nav{position:absolute; width:80%;}
	#fullMenu{display:none;}
    #footer .inr{padding:0 20px;}
    
    #header .gnb > li{width:21%;}
}

@media all and (min-width:1024px){
	#header nav .gnb > li{transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; position:absolute; top:120px; left:0; width:100%; height:100vh; box-sizing:border-box; padding:30px 15px; background:#fff;}
	#header nav .gnb > li ul.active{display:block;}
	#header nav .gnb > li.active{position:relative; background:#fff;}
	#header nav .gnb > li.active a{color:#111;}
	#header nav .gnb > li.active ul{z-index:10;}
	#header nav .gnb > li.active ul:before{content:''; display:block; position:absolute; left:50%; top:0; width:1px; height:30px; margin-left:-0.5px; background:#888;} 
	#header nav .gnb > li.active ul:after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; z-index:-1;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10px; background:#fff; text-align:center; color:#111; font-size:15px; font-weight:300; transition:background 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{font-weight: 600; color:#b8255b;}
	#header nav + em.bg{opacity:0; visibility:hidden; position:absolute; left:0; top:0; z-index:80; width:100%; height:100vh; background:rgba(6, 7, 9, 0.6); transition:all 0.3s ease 0s;}
	#header nav.active + em.bg{opacity:1; visibility:visible;}	
}


@media all and (max-width:1024px){
	#header .menu_fix{width:114px; height:100px;}	
	#header .btn_menu,
	#header .btn_close{display:block;}
	#header nav{margin:0;}
	#header nav .gnb > li{display:block;}
	#header{position:absolute; width:100%;}
	#header.mob nav .gnb,
	#header .mob_gnb,
	#header .all_menu{display:none;}
	#header .inr{padding:0 20px; box-sizing:border-box;}
	.lnb ul li a{width:100%; padding:12px 50px; font-size:16px;}
	.lnb ul li.home a{padding:15px 15px 12px;}
    .lnb{top:70px;}
    
    #header .area_util > ul{top:22px; right:80px;}
}

@media all and (max-width:970px){
	#footer{position:relative; bottom:0; padding-bottom:20px;}
	#footer .left,
    #footer .right{float:none;}
}

@media all and (max-width:500px){
	#footer h1{margin-right:5px; font-size:13px;}
	#footer h1:before{top:-1px;}
	#footer p{font-size:12px;}
	.lnb .dept > li.home,
	.lnb .dept > li.dept01{display:none;}
	.lnb .dept > li{width:100%;}
	.lnb .dept > li a{padding:9px 20px 8px;}
	.lnb .dept_tit a:after{right:20px;}
}

@media all and (max-width:400px){
	body,
	p,
	li,
    a{font-size:13px;}
    
    #header h1{margin-top:-16px;}
    #header h1 a > img{width:80%;}
    #header .area_util > ul{top:25px; right:75px;}
}