@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Wix+Madefor+Display:wght@400..800&display=swap');
@import url("../gh/orioncactus/pretendard-v1.3.9/dist/web/variable/pretendardvariable.min.css");


/*Common*/
*{margin:0;padding:0}
html,body{width:100%;height:100%}
html{overflow-y:scroll}
body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all;
-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;-ms-text-size-adjust: 100% !important;}
body,h1,h2,h3,h4,h5,h6,th,td,li,dt,dd,a,p,input,textarea,select,option,button{
	color:#555;
	font-family:"Wix Madefor Display","Pretendard Variable","돋움",dotum,sans-serif;
	font-size:14px;font-weight:normal
}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{color:#7d7d7d;text-decoration:none;cursor:pointer}
a:hover{color:#333;text-decoration:none}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
textarea{overflow:auto}
option{padding-right:6px}
.input_text, textarea{*margin:-1px 0;padding-right:1px}
.input_check, .input_radio{width:13px;height:13px}
.blind, legend, caption{text-indent:-9999px;font-size:0;line-height:0;overflow:hidden}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}
img{max-width:100%;}
#wrap{overflow:hidden;}

/*test*/
.test1{border:1px solid red}
.test2{background:#4f7beb}

.font1{font-family:"Pretendard Variable";}
.font2{font-family:"Wix Madefor Display";}
.font2{font-family:"Nunito Sans";}





/* header */
#header{position:fixed;left:0;top:0;width:100%;z-index:1000;transition:all 0.6s;}
#header.nav-up{width:100%;left:0;transform:translateY(-100%);}
.head{
	position:relative;
	width:100%;height:100px;
	text-align:center;
}
.head h1{position:absolute;left:5%;top:20px;z-index:3000;}
.head h1 a{
	display:block;
	width:200px;height:56px;
	background:url(../images/Logo.svg) no-repeat;
	background-size:contain;
	text-indent:-9999px;
}
.head .pc_nav{position:relative;z-index:2000;}
.head .pc_nav>ul{display:flex;justify-content:center;}
.head .pc_nav>ul>li{margin:0 30px;}
.head .pc_nav>ul>li>a{
	font-size:18px;color:#fff;font-weight:400;line-height:100px;
}

.head .gnb{
	position:absolute;right:5%;top:40px;z-index:3000;
	display:flex;align-items:center;
}
.head .gnb ul{display:flex;margin-right:40px;}
.head .gnb ul>li{}
.head .gnb ul>li:nth-child(1){position:relative;margin-right:7px;padding-right:10px;}
.head .gnb ul>li:nth-child(1):after{
	display:block;content:"";
	width:1px;height:8px;
	background:rgba(255,255,255,0.4);
	position:absolute;right:0;top:4px;
}
.head .gnb ul>li>a{
	display:block;
	position:relative;
	font-family:"Wix Madefor Display";font-size:12px;color:rgba(255,255,255,0.9);font-weight:600;
}

.head .gnb .btn_menu{	
	position:relative;z-index:5000;
	width:36px;height:22px;
	cursor:pointer;
}
.head .gnb .btn_menu>div{
	width:100%;height:2px;
	margin-bottom:8px;
	background:#fff;
	transition:all 0.4s;
}
.head .gnb .btn_menu>div:nth-child(2){width:70%;}
.head .gnb .btn_menu>div:nth-child(3){}

.head .gnb .btn_menu.openmenu>div:nth-child(1){transform:rotate(45deg) translate(6px,8px);}
.head .gnb .btn_menu.openmenu>div:nth-child(2){opacity:0;}
.head .gnb .btn_menu.openmenu>div:nth-child(3){transform:rotate(-45deg) translate(6px,-8px);}


@media(max-width:1560px){
	.head .pc_nav>ul>li{margin:0 15px;}
}
@media(max-width:1399px){
	.head .pc_nav{display:none;}
}



/**/
.submenu{
	display:none;
	position:absolute;left:0;top:0;
	width:100%;
	background:#fff url(http://www.owellsteel.com/images/common/sub_bg.png) no-repeat right top;
}
.submenu .menuwrap{
	display:none;
	padding:147px 0 50px;
}
.submenu .menuwrap:first-child{display:block;}
.submenu .menuwrap>div{
	display:flex;align-items:center;
	padding:0 5%;
}
.submenu .menuwrap>div .title{
	display:flex;align-items:center;
	position:relative;box-sizing:border-box;
	width:400px;height:235px;
	padding:0 65px;margin-right:8vw;
	border-radius:115px;
}
.submenu .menuwrap:nth-child(1)>div .title{background:url(http://www.owellsteel.com/images/common/sub_title_bg1.jpg) no-repeat center;background-size:cover;}
.submenu .menuwrap:nth-child(2)>div .title{background:url(http://www.owellsteel.com/images/common/sub_title_bg1.jpg) no-repeat center;background-size:cover;}
.submenu .menuwrap:nth-child(3)>div .title{background:url(http://www.owellsteel.com/images/common/sub_title_bg1.jpg) no-repeat center;background-size:cover;}
.submenu .menuwrap:nth-child(4)>div .title{background:url(http://www.owellsteel.com/images/common/sub_title_bg1.jpg) no-repeat center;background-size:cover;}
.submenu .menuwrap:nth-child(5)>div .title{background:url(http://www.owellsteel.com/images/common/sub_title_bg1.jpg) no-repeat center;background-size:cover;}
.submenu .menuwrap:nth-child(6)>div .title{background:url(http://www.owellsteel.com/images/common/sub_title_bg1.jpg) no-repeat center;background-size:cover;}
.submenu .menuwrap>div .title>div{width:100%;}
.submenu .menuwrap>div .title h2{position:relative;font-size:30px;color:#fff;font-weight:600;width:100%;}
.submenu .menuwrap>div .title h2:after{
	display:block;content:"";
	width:27px;height:27px;
	background:url(http://www.owellsteel.com/images/common/sub_arr.png) no-repeat;
	border:1px solid rgba(255,255,255,0.4);border-radius:50%;
	position:absolute;right:0;top:5px;
}
.submenu .menuwrap>div .title p{margin-top:20px;font-size:17px;color:rgba(255,255,255,0.8);line-height:1.5em;}

.submenu .menuwrap>div>ul{
	display:flex;flex-wrap:wrap;justify-content:space-between;
	width:calc(100% - 400px - 30vw);
}
.submenu .menuwrap>div>ul>li{
	max-width:320px;width:46%;
	border-bottom:1px solid #ddd;
}
.submenu .menuwrap>div>ul>li>a{
	display:block;
	padding:24px 20px;
	font-size:18px;color:#000;font-weight:600;
	background:url(http://www.owellsteel.com/images/common/sub_arr2.png) no-repeat calc(100% - 20px) center;
	transition:all 0.4s;
}
.submenu .menuwrap>div>ul>li>a span{
	display:inline-block;
	position:relative;
}
.submenu .menuwrap>div>ul>li>a span.import{color:#ff5a3c;}
.submenu .menuwrap>div>ul>li>a span:after{
	display:block;content:"";
	width:100%;height:1px;
	background:#45b3c5;
	position:absolute;left:0;bottom:0;
	transform-origin:center;transform:scaleX(0);
	transition:all 0.4s;
}
.submenu .menuwrap>div>ul>li>a span.import:after{background:#ff5a3c;}
.submenu .menuwrap>div>ul>li:hover>a{color:#45b3c5;}
.submenu .menuwrap>div>ul>li:hover>a span:after{transform:scaleX(1);}



/**/
#header.on{}
#header.on .head{box-shadow:0 1px 0 #ddd;}
#header.on .head h1 a{background:url(../images/Logo2.svg) no-repeat;}
#header.on .head .pc_nav>ul>li>a{color:#000;}
#header.on .head .gnb ul>li:nth-child(1):after{background:rgba(0,0,0,0.4);}
#header.on .head .gnb ul>li>a{color:rgba(0,0,0,0.9);}
#header.on .head .gnb .btn_menu>div{background:#000;}

#header.bl{background:#fff;}
#header.bl .head{}
#header.bl .head h1 a{background:url(../images/Logo2.svg) no-repeat;}
#header.bl .head .pc_nav>ul>li>a{color:#000;}
#header.bl .head .gnb ul>li:nth-child(1):after{background:rgba(0,0,0,0.4);}
#header.bl .head .gnb ul>li>a{color:rgba(0,0,0,0.9);}
#header.bl .head .gnb .btn_menu>div{background:#000;}

#header.scroll{background:#fff;}
#header.scroll .head{}
#header.scroll .head h1 a{background:url(../images/Logo2.svg) no-repeat;}
#header.scroll .head .pc_nav>ul>li>a{color:#000;}
#header.scroll .head .gnb ul>li:nth-child(1):after{background:rgba(0,0,0,0.4);}
#header.scroll .head .gnb ul>li>a{color:rgba(0,0,0,0.9);}
#header.scroll .head .gnb .btn_menu>div{background:#000;}


#header.all .head h1 a{background:url(../images/Logo2.svg) no-repeat;}
#header.all .head .gnb .btn_menu>div{background:#000;}
#header.on.all .head .gnb .btn_menu>div{background:#000;}



/* allmenu */
.allmenuBg{
	display:block;
	width:46px;height:46px;
	background:#f2f2f2;
	border-radius:50%;
	position:absolute;left:calc(100% - 5% - 17px);top:58px;z-index:2000;
	transform:translate(-50%,-50%) scale(0);
	transition:all 0.6s ease-in-out;
}
.allmenuBg.on{transform:translate(-50%,-50%) scale(100);}
.allmenu{
	position:absolute;left:0;top:0;z-index:3000;
	box-sizing:border-box;
	width:100%;height:100vh;
	transform:scale(0);
	text-align:center;
}
.allmenu.open{transform:scale(1);transition:transform 0s 0.6s;}
.allmenu .allmenuwrap{
	opacity:0;
	display:flex;align-items:center;
	position:relative;
	width:100%;height:100%;
	background:url(http://www.owellsteel.com/images/common/all_bg.jpg) no-repeat center;
	background-size:cover;
}
.allmenu.open .allmenuwrap{opacity:1;transition:opacity 1s 0.6s;}
.allmenu .allmenuwrap>div{display:flex;flex-wrap:wrap;box-sizing:border-box;width:100%;height:100%;padding:110px 5% 50px;}
.allmenu.open .allmenuwrap>div .img{border-radius:0%;transform:translateY(0);transition:all 0.8s 0.6s;}
.allmenu .allmenuwrap>div>ul{display:flex;flex-wrap:wrap;box-sizing:border-box;width:100%;}
.allmenu .allmenuwrap>div>ul>li{
	box-sizing:border-box;
	width:25%;
	padding:0 60px;margin-top:4vh;
	border-right:1px solid #ddd;
	text-align:left;
	opacity:0;transform:translateY(100px);transition:all 1s;
}
.allmenu .allmenuwrap>div>ul>li.img1{
	position:relative;
	height:340px;
	padding:0;border-right:0;
}
.allmenu .allmenuwrap>div>ul>li.img1>div{
	position:absolute;left:0;top:0;z-index:10;
	width:100%;height:100%;
	background:url(../images/common/all_img1.jpg) no-repeat center;
	background-size:cover;
	border-radius:50px;
}
.allmenu.open .allmenuwrap>div>ul>li.img1>div{top:-20px;transition:all 1s 0.6s;}
.allmenu .allmenuwrap>div>ul>li.img1:before{
	display:block;content:"";
	width:100%;height:100%;
	background:#53c5d5;
	border-radius:50px;
}
.allmenu .allmenuwrap>div>ul>li.img2{
	position:relative;
	height:398px;
	padding:0;margin-top:-10px;
}
.allmenu .allmenuwrap>div>ul>li.img2>div{
	position:absolute;left:0;top:0;z-index:10;
	width:100%;height:100%;
	background:url(../images/common/all_img2.jpg) no-repeat center;
	background-size:cover;
	border-radius:50%;
}
.allmenu.open .allmenuwrap>div>ul>li.img2>div{left:20px;transition:all 1s 0.6s;}
.allmenu .allmenuwrap>div>ul>li.img2:before{
	display:block;content:"";
	width:100%;height:100%;
	background:#0fa7bc;
	border-radius:50%;
}
.allmenu.open .allmenuwrap>div>ul>li{opacity:1;transform:translateY(0);transition:all 1s 0.4s;}
.allmenu .allmenuwrap>div>ul>li:nth-child(4n){border-right:0;}
.allmenu .allmenuwrap>div>ul>li:nth-last-child(2){border-right:0;}
.allmenu .allmenuwrap>div>ul>li>a{
	display:block;
	padding:25px 0 0;
	font-size:34px;color:#000;font-weight:700;
	cursor:default;
}
.allmenu .allmenuwrap>div>ul>li>ul{margin-top:40px;}
.allmenu .allmenuwrap>div>ul>li>ul>li{margin-bottom:10px;}
.allmenu .allmenuwrap>div>ul>li>ul>li>a{font-size:20px;color:#666;font-weight:500;}
.allmenu .allmenuwrap>div>ul>li>ul>li>a:hover{color:#0e71b8;}
.allmenu .allmenuwrap>div>ul>li>ul>li.import>a{color:#ff5a3c;font-weight:600;}
.allmenu .allmenuwrap>div>ul>li>ul>li>ul{display:flex;margin-top:10px;}
.allmenu .allmenuwrap>div>ul>li>ul>li>ul>li{position:relative;padding-left:10px;margin-right:15px;}
.allmenu .allmenuwrap>div>ul>li>ul>li>ul>li:before{
	display:block;content:"";
	width:5px;height:5px;
	border-radius:50%;
	background:#b4b4b4;
	position:absolute;left:0;top:8px;
}
.allmenu .allmenuwrap>div>ul>li>ul>li>ul>li>a{font-size:16px;color:#8d8d8d;}
.allmenu .allmenuwrap>div>ul>li>ul>li>ul>li>a:hover{border-bottom:1px solid #888}



@media(max-width:1399px){

	.allmenu .allmenuwrap>div{overflow:hidden;overflow-y:auto;height:90%;}
	.allmenu .allmenuwrap>div>ul{display:block;border-top:1px solid #ddd;}
	.allmenu .allmenuwrap>div>ul>li.img1{display:none;}
	.allmenu .allmenuwrap>div>ul>li.img2{display:none;}
	.allmenu .allmenuwrap>div>ul>li{
		width:100%;
		padding:25px 20px;margin:0;
		border-right:0;border-bottom:1px solid #ddd;
	}
	.allmenu .allmenuwrap>div>ul>li>a{	padding:0;cursor:pointer;}
	.allmenu .allmenuwrap>div>ul>li>a:after{
		display:block;content:"";
		width:40px;height:40px;
		background:#b4b4b4 url(http://www.owellsteel.com/images/common/all_arr1.png) no-repeat center;
		background-size:cover;
		border-radius:50%;
		position:absolute;right:20px;top:27px;
		transition:all 0.4s;
	}
	.allmenu .allmenuwrap>div>ul>li.on>a:after{
		background:#0fa7bc url(http://www.owellsteel.com/images/common/all_arr1.png) no-repeat center;
		background-size:cover;
		transform:rotate(180deg);
	}
	.allmenu .allmenuwrap>div>ul>li>ul{display:none;}
	.allmenu .allmenuwrap>div>ul>li>ul>li{margin-bottom:20px;}
	

}
@media(max-width:812px){
	.head .gnb ul{display:none;}

	.allmenu .allmenuwrap>div>ul>li>a{font-size:26px;}
	.allmenu .allmenuwrap>div>ul>li>a:after{
		width:30px;height:30px;
	}
}






/* footer */
#footer{background:#191919;}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;padding:75px 5% 70px;}
.foot .area1{width:605px;}
.foot .area1 h1{}
.foot .area1 ul{display:flex;margin:35px 0 30px}
.foot .area1 ul li{
	position:relative;
	padding-right:12px;margin-right:12px;
}
.foot .area1 ul li:after{
	display:block;content:"";
	width:1px;height:14px;
	background:#474747;
	position:absolute;right:0;top:4px;
}
.foot .area1 ul li:last-child:after{display:none;}
.foot .area1 ul li a{font-size:17px;color:#fff;}
.foot .area1 address{font-size:17px;color:rgba(255,255,255,0.4);line-height:1.6em;}
.foot .area1 address .bar{
	display:inline-block;
	width:1px;height:14px;
	background:#474747;
	margin:0 10px;
}
.foot .area2{display:flex;flex-wrap:wrap;align-content:space-between;width:400px;}
.foot .area2 dl{width:100%;}
.foot .area2 dl dt{font-size:23px;color:#fff;font-weight:700;}
.foot .area2 dl dd{}
.foot .area2 dl dd .tel{margin:10px 0;font-size:44px;color:#0fa7bc;font-weight:700;line-height:1em;}
.foot .area2 dl dd .info{font-size:17px;color:rgba(255,255,255,0.4);}
.foot .area2 .copy{width:100%;height:20px;font-size:15px;color:rgba(255,255,255,0.2);}


@media(max-width:1200px){
	.foot .area2{width:100%;margin-top:40px;}
}
@media(max-width:813px){
	.foot .area1 h1 img{height:20px;}
}




/* sideMenu */
.sideMenu{
	position:fixed;right:2%;top:70%;z-index:1000;
	display:flex;align-items:center;justify-content:center;
	width:56px;height:56px;
	border-radius:50%;
	background:#ff5a3c;
	cursor:pointer;
}
.sideMenu .dot{}
.sideMenu .dot>div{
	width:4px;height:4px;
	margin-bottom:2px;
	background:#fff;
	border-radius:1px;
}
.sideMenu .dot>div:nth-child(3){margin-bottom:0;}





/* quickMenu */
.quickMenu{
	position:fixed;right:2%;top:70%;z-index:1000;
}
.quickMenu>a{
	display:block;
	position:relative;z-index:100;
	width:56px;height:56px;
	border-radius:50%;
	background:#ff5a3c url(../images/common/btn_f.png) no-repeat center;
}
.quickMenu>a.on{
	background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_f_x.png) no-repeat center;
}
.quickMenu ul{display:none;position:absolute;right:0;bottom:100%;}
.quickMenu ul li{margin-bottom:4px;}
.quickMenu ul li a{position:relative;display:block;}
.quickMenu ul li a .icon{
	display:block;
	position:relative;z-index:10;
	width:56px;height:56px;
	border-radius:50%;
	background:#000;		
	transition:all 0.4s;
}
.quickMenu ul li:hover a .icon{transition:all 0.6s;}
.quickMenu ul li:nth-child(1) a .icon{background:#000 url(http://www.owellsteel.com/images/common/btn_inquiery1.png) no-repeat center;}
.quickMenu ul li:nth-child(2) a .icon{background:#000 url(http://www.owellsteel.com/images/common/btn_inquiery2.png) no-repeat center;}
.quickMenu ul li:nth-child(3) a .icon{background:#000 url(http://www.owellsteel.com/images/common/btn_shop.png) no-repeat center;}
.quickMenu ul li:nth-child(4) a .icon{background:#000 url(http://www.owellsteel.com/images/common/btn_top.png) no-repeat center;}
.quickMenu ul li:nth-child(1):hover a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_inquiery1.png) no-repeat center;}
.quickMenu ul li:nth-child(2):hover a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_inquiery2.png) no-repeat center;}
.quickMenu ul li:nth-child(3):hover a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_shop.png) no-repeat center;}
.quickMenu ul li:nth-child(4):hover a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_top.png) no-repeat center;}
.quickMenu ul li a .tit{
	position:absolute;right:0;top:0;
	width:56px;height:56px;
	box-sizing:border-box;
	padding:0 0 0 20px;
	transform-origin:right;
	background:#ff5a3c;
	border-radius:28px;
	transition:all 0.4s;
}
.quickMenu ul li a .tit span{opacity:0;font-size:19px;color:#fff;font-weight:600;line-height:56px;transition:all 0.2s;}

.quickMenu ul li:hover a .tit{width:196px;}
.quickMenu ul li:hover a .tit span{opacity:1;transition:all 0.4s 0.2s;}


@media(max-width:1399px){
	
	.quickMenu ul{width:196px;}
	.quickMenu ul li a{display:flex;justify-content:flex-end;}
	.quickMenu ul li a .tit{width:196px;transition:all 0s;}
	.quickMenu ul li a .tit span{opacity:1;transition:all 0s;}
	.quickMenu ul li:nth-child(1) a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_inquiery1.png) no-repeat center;}
	.quickMenu ul li:nth-child(2) a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_inquiery2.png) no-repeat center;}
	.quickMenu ul li:nth-child(3) a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_shop.png) no-repeat center;}
	.quickMenu ul li:nth-child(4) a .icon{background:#ff5a3c url(http://www.owellsteel.com/images/common/btn_top.png) no-repeat center;}

}
@media(max-width:812px){
	.quickMenu{top:80%;}
}