/* common */
@charset "utf-8";
::selection{background:rgba(246, 117, 53, 0.36); color:#fff;}
body{font-size:16px;word-break:keep-all;overflow-x: hidden;}
p,
li,
a{line-height:1.7; font-weight:300; font-size:16px; color:#666;}
.wrap{width:1200px; margin:0 auto;}
#container{background:url(../images/main/bg_main.jpg) repeat 50% 50%;}
#container:not(.main){padding:50px 0 50px 100px;}
#container .join_area .box.join .button.login{background:#f67537; border:1px solid #f67537;}
#container .button.red{background:#f67537; border:1px solid #f67537;}

#container.member_page{height: -webkit-calc(100vh - 100px * 1);height: calc(100vh - 100px * 1);}

/* common btn */
.box_btnBasic{text-align:center;}
.btn_basic{display:inline-block; position:relative; padding-left:54px; background:url(../images/common/icon_arrow.svg) no-repeat 0% 50%; background-size:17px 9px; font-weight:900; font-size:13px; transition:all 0.4s ease-out 0s;}
.btn_basic.color{background:url(../images/common/icon_arrowColor.svg) no-repeat 0% 50%;background-size:17px 10px;color:#222;position: relative;left: -9px;}
.btn_basic:hover{opacity:0.7;}
.btn_basic:hover{background-position:10% 50%;}
.btn_basic:after{content:""; position:absolute; top:-18px; left:-21px; width:55px; height:56px; border:1px dashed #fff; transition:all 0.3s ease-out 0s; border-radius:100px;}
.btn_basic.color:after{border:1px dashed #555;}
.btn_basic.color:hover{opacity:1; background:url(../images/common/icon_arrowColor_hover.svg) no-repeat 10% 50%; background-size:17px 10px; color:#f67536;}
.btn_basic:hover:after{width:177px;}
.btn_basic.color:hover:after{border:1px dashed #f67536;}
.btn_basic.wideSize:hover:after{width:190px;}

/* header */
#header{position:absolute; z-index:999; width:100%; height:110px; background:#fff; text-align:center;}
#header h1{position:absolute;top: 25px;left:100px;}
#header h1 img{height: 47px;}
#header a{transition:all 0.3s ease-out 0s;}
#header a:hover,
#header nav .gnb > li > a:hover,
#header nav .gnb > li:hover > a{color:#f67535;}

#header .area_util span{display:inline-block; width:110px; height:110px; background:#f67536; animation-name:online; animation-duration:1.1s; animation-iteration-count:infinite;}
#header .area_util span a{display:block; padding:20px 0; color:#fff;}
#header .area_util{position:absolute; top:0; right:0;}
#header .area_util ul{float:left; margin:37px 29px 0 0;}
#header .area_util ul li a{font-size:14px;}
#header .area_util span img{display:block; height:27px; margin:0 auto;}
#header .area_util span i{display:block; line-height:1.4; margin-top:11px; font-size:12px;}
#header .area_util ul li{float:left;}
#header .area_util ul li:first-child{margin-right:30px;}

#header .area_quick{position:fixed; top:0; left:0; width:100px; height:100%; background:#fff;}
#header .area_quick ul li a{font-weight:400; font-size:13px; color:#222;}
#header .area_quick ul li{float:left; margin-right:60px;}
#header .area_quick ul{position:relative; overflow:hidden; top:310px; left:-101px; width:300px; transform:rotate(270deg); -webkit-transform:rotate(270deg);}
#header .area_quick ul li:last-child{margin-right:0;}
#header .area_quick > a{position:absolute; bottom:157px; left:11px; font-weight:500; font-size:13px; color:#666; transform:rotate(270deg); -webkit-transform:rotate(270deg);}
#header .area_quick > a:after{content:""; position:absolute; bottom:6px; left:-21px; width:8px; height:8px; background:#f67536; border-radius:10px;}

#header .quick_icon{position:fixed; right:10px; bottom:100px; width:80px;}
#header .quick_icon ul li{position:relative; width:100%; height:80px; padding:8px 5px; margin-bottom:5px; box-sizing:border-box; background:#fff; box-shadow:3px 3px 5px rgba(0,0,0,0.10);}
#header .quick_icon ul li a{display:block;}
#header .quick_icon ul li a p{font-size:12px; color:#fff;}
#header .quick_icon ul li a em{display:block; width:48px; height:46px; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%; background-size:contain;}
#header .quick_icon ul li:nth-child(1){background-color:#31b14a;}
#header .quick_icon ul li:nth-child(2){background-color:#d1272b;}
#header .quick_icon ul li:nth-child(3){background-color:#ffe600;}
#header .quick_icon ul li:nth-child(1) a em{background-image:url(/images/common/icon_quick01.png);}
#header .quick_icon ul li:nth-child(2) a em{background-image:url(/images/common/icon_quick02.png);}
#header .quick_icon ul li:nth-child(3) a em{background-image:url(/images/common/icon_quick03.png);}
#header .quick_icon ul li:nth-child(4) a em{background-image:url(/images/common/icon_quick04.png);}
#header .quick_icon ul li:nth-child(5) a em{background-image:url(/images/common/icon_quick05.png);}
#header .quick_icon ul li:nth-child(6) a em{background-image:url(/images/common/icon_quick06.png);}
#header .quick_icon ul li:nth-child(3) a p{color:#391f1f;}
#header .quick_icon ul li:nth-child(4) a p{color:#3eaf44;}
#header .quick_icon ul li:nth-child(5) a p{color:#333;}
#header .quick_icon ul li.icon_tel{display:none; background-color:#f67536;}


#header .btn_menu,
#header .btn_close{display:none;}
#header .btn_menu{position:absolute; top:50%; right:15px; z-index:91; width:23px; height:24px; margin-top:-12px; font-size:0px; transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0px; width:100%; height:2px; background:#000;}
#header .btn_menu > span:nth-of-type(1){top:5px;}
#header .btn_menu > span:nth-of-type(2){top:50%; margin-top:-1px; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:17px;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active{transform:rotate(180deg);}
#header .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10px; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{position:absolute; top:0px; left:0px; width:30%; height:100%; font-size:0;}

#header nav{display:inline-block; margin-top:39px;}
#header nav .gnb{text-align:center;}
#header nav .gnb > li{display:inline-block; position:relative; padding:0 40px;}
#header nav .gnb > li:after{content:""; position:absolute; opacity:0.28; top:8px; right:0; width:1px; height:15px; background:#fff;}
#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a{display:inline-block;padding-bottom:30px;font-weight:400;font-size: 18px;color:#555;}

#header.mob nav{position:fixed; top:0px; right:-100%; z-index:90; width:100%; height:100%; transition:all 0.5s ease-out 0s;}
#header.mob nav.active{right:0px;}
#header.mob nav .gnb{position:absolute;top:0px;right:0px;z-index:91;width:70%;height:100%;background:#fff;box-shadow:-5px 0px 15px rgba(0,0,0,0.1);overflow-y:auto;}
#header.mob nav .gnb > li {
    padding: 0;
}
#header.mob nav .gnb > li > a{display:block;padding: 17px 20px;border-bottom:1px solid #ececec;font-size: 15px;color:#111;transition:all 0.3s ease 0s;text-align: left;}
#header.mob nav .gnb > li > a.active{background: #f67536;color:#fff;border-color: #f67536;}
#header.mob nav .gnb > li ul{display:none;padding: 10px 20px;border-bottom:1px solid #ececec;text-align: left;}
#header.mob nav .gnb > li ul > li > a{display:block; padding:10px 0px;}

.emblum{position:fixed;right:21px;top:130px;width: 100px;z-index: 998;transition: all 0.3s ease-out 0s;}
.emblum img{width:100%;}
.emblum.position{top:30px;}

#footer{padding-bottom:100px; background:url(../images/common/bg_footer.jpg) repeat 50% 50%;}
#footer .wrap > ul{overflow:hidden; padding:50px 0 40px; border-bottom:1px solid rgba(255,255,255,0.1);}
#footer .wrap > ul li{float:left;}
#footer .wrap > ul li a{margin-right:8px; padding:8px 14px; border:1px solid rgba(255,255,255,0.3); font-weight:100; font-size:14px; color:#cbcbcb;}
#footer .wrap > ul li:last-child a{background:rgba(255,255,255,0.1);}
#footer address{padding-top:40px;}
#footer address ul li{float:left; margin-right:30px; font-size:14px; color:rgba(255,255,255,0.9);}
#footer address ul{overflow:hidden;}
#footer address ul li i{color:#f67536;}
#footer address + p{margin-top:9px; font-size:14px;}


@media screen and (max-width:1580px){
	#header{height:90px;}
	#header h1{top:25px; left:80px;}
	#header h1 img{height:32px;}
	#header .area_quick{width:80px;}
	#header .area_quick ul{top:280px; left:-113px;}
	#header .area_quick > a{bottom:130px; left:0;}
	#header nav .gnb > li{padding:0 30px;}
	#header .area_util ul{margin:28px 19px 0 0;}
	#header nav{margin-top:30px;}
	#header .area_util span{width:90px; height:90px;}
	#header .area_util span img{height:19px;}
	#header .area_util span i{margin-top:9px; font-size:11px;}
	#header .area_util span a{padding:16px 0;}
	#header .area_util ul li:first-child{margin-right:22px;}
	.emblum{top:104px; right:16px; width:90px;}
}

@media screen and (max-width:1480px){
	#footer{padding:0 0 100px 90px;}
}

@media screen and (max-width:1380px){
	.wrap{width:1000px; margin:0 auto;}
	#header .area_util span{display:none;}
}

@media screen and (max-width:1280px){
	p,
	li,
	a{font-size:15px;}
	.wrap{width:auto; margin:0 50px;}

	#header nav{float:right; margin-top:48px;}
	#header nav .gnb > li{padding:0 23px;}
	#header nav .gnb > li > a{font-size:15px;}
	#header .area_util{top:0; right:0; padding:3px 12px; background:#f1f1f1;}
	#header .area_util ul{margin:0;}
	#header .area_util ul li:first-child{margin-right:16px;}
}

@media screen and (min-width:1024px){
	#header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:46px; right:-60px; width:100%; padding:9px 12px; background:#fff; box-shadow:15px 20px 29px 0px rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, right, visibility; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; right:-15px; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:11px 11px; background:#fff; border-top:1px solid #e1e1e1; font-size:15px; color:#404040; text-align:left; transition:background 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{color:#f67535;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}
}

@media screen and (max-width:1023px){
	.wrap{width:auto; margin:0 30px;}

	#header{height:70px;}
	#header .btn_menu,
	#header .btn_close{display:block;}
	#header nav{margin:0;}
	#header nav .gnb > li{display:block;}
	#header h1{top:16px; left:80px;}
	#header .area_util{top:21px; right:64px; padding:0; background:none;}
	.emblum{top:88px; right:16px; width:86px;}
}

@media screen and (max-width:767px){
	.wrap{width:auto; margin:0 15px;}
	body,
	p,
	li,
	a{font-family:Ubuntu, Sans-serif; font-size:14px;}

	.btn_basic:hover{background-size:12px 7px;}
	.btn_basic:after{top:-14px; left:-14px; width:45px; width:135px; height:46px;}
	.btn_basic{padding-left:39px; background-size:12px 7px; background-position:11% 50%; font-size:12px;}
	.btn_basic:hover:after{width:135px;}
	.btn_basic.wideSize:after,
	.btn_basic.wideSize:hover:after{width:151px;}
	.btn_basic.color:hover{background-size:12px 8px;}
	.btn_basic.wideSize{background-size:12px 8px; background-position:10% 52%;}
	
	#header{height:60px;}
	#header .area_quick{display:none;}
	#header h1{top:13px; left:15px;}
	#header h1 img{height:27px;}
	#header .area_util ul li a{font-size:13px;}
	#header .area_util{top:18px; right:53px;}
	#header .area_util ul li:first-child{margin-right:11px;}
	#header.mob nav .gnb > li > a{padding:14px 15px; font-size:14px; color:#444;}
	.emblum{top:72px; right:10px; width:60px;}
	
	#footer{padding:0 0 20px 0;}
	#footer .wrap > ul li a{margin-right:5px; font-size:12px;}
	#footer .wrap > ul{overflow:hidden; padding:22px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
	#footer address{padding-top:18px;}
	#footer address ul li{margin-right:20px; font-size:12px;}
	#footer address + p{margin-top:29px; font-size:12px;}
}

@media all and (max-width:680px){
    #header .quick_icon{width:40px;}
    #header .quick_icon ul li{height:40px;}
    #header .quick_icon ul li a p{display:none;}
    #header .quick_icon ul li.icon_tel{display:block;}
    #header .quick_icon ul li a em{width:32px; height:27px;}
}

@media screen and (max-width:400px){
	body,
	p,
	li,
	a{font-size:13px;}
}

@keyframes online {
	0%{opacity:0;}
	100%{opacity:1;}
}