<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); unicode-range:U+AC00-D7A3;}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); unicode-range:UU+AC00-D7A3;}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); unicode-range:U+AC00-D7A3;}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); unicode-range:U+AC00-D7A3;}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); unicode-range:U+AC00-D7A3;}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); unicode-range:U+AC00-D7A3;}
@font-face { font-family: 'Noto Sans KR-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/Noto Sans KR-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }

/* common _ jyp */
* {
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
}
body {
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  color:#000;
  letter-spacing:0;
  -webkit-text-size-adjust: none;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,button,input {
  color:#333;
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.756em;
  font-weight:500;
}
table,td,th {
  color:#000;
}
table {
  border-collapse:collapse;
  border-spacing:0
}
ul,ol,li {
  list-style:none;
}
a,img {
  outline:0;
  text-decoration:none;
  border:0;
}
a:link,a:visited,a:active,a:hover {
  outline:0;
  text-decoration:none;
  color:#000;
}

img.fit {
  width:100%;
}
img.max-fit {
  max-width:100%;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6, {
  margin-top:0;
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
}
.row {
  padding-right:0px !important;
  padding-left:0px !important
}
.row::after {
  clear:both;
}
.row::before,.row::after {
  display:table;
  content: " ";
}

[canvas=container],
[off-canvas] {
  padding: 10px 20px;
}

[class*=js-] {
  cursor: pointer;
}


/* Footer */
.P-footer {
  width: 100%;
  float: left;
  background: #fff;
  border-top:1px solid #ededed;
  position: relative;
  z-index:9;
}
.f_wrap{width: 100%;max-width:1340px; margin: auto;position: relative;}
.footer-info {width: 100%;margin-top: 50px;margin-bottom: 50px;float: left;}
.footer-info ul{float: left;width: 100%;}
.footer-info li {width: 100%;}
.copy-item {
  display: block;
  width: 60%;
  text-align: left;
  font-size: 13px;
  line-height: 19px;
  color: #8a8a8a;
  font-weight: 300;
  float: left;
  word-break: keep-all;
}
.footer_m{display: none;}
.copy-item b {color:#000;}
.copy-item div {font-size: 13px;font-weight: 400;color: #8a8a8a;line-height: 1.4;}
.footer-info li div span{margin-right: 10px; font-weight: 500;margin-right: 5px;color: #8a8a8a;}
.footer-info li div span span {font-weight: 400;margin-right: 5px;color: #8a8a8a;}
.footer_call_wrap{width: 100%;    background: #fff;border-top:1px solid #ccc;}
#totalANDzeroweb {font-size: 12px;position: relative;padding: 0 !important; word-break:keep-all;}
#totalANDzeroweb div{font-size: 12px;color: #8a8a8a; text-align: left; background: #fff;}
/* Footer 끝*/
#menu_box { display:none; }
}


/* all  */
@media all{
  dl {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
  }

  a{
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  }
}
#SUB_Scontent {margin: 0 auto;}

.m { display: none; }
.t { display: none; }
.pc { display: block; }

#sticky-sticky-wrapper {z-index: 99999999; position: relative;}

.wrap .P-member {
    display: block;
    position: absolute;
    text-align: right;
    width: 100%;
    right: 0;
    z-index: 1;
}
.wrap .P-member-nav a{color: #000;height: 50px;line-height: 50px;margin-left: 10px;font-size: 14px;font-weight: 400;}
.wrap .P-member-nav a:active, .wrap .P-member-nav a:visited{color: #fff;}

.pushy .P-member{background: #f5f5f5;width: 100%;padding: 15px 0;float: left;margin-bottom: 50px;}
.pushy .P-member-nav a{float: left;width: 50%;text-align: center;font-size: 18px;line-height: 18px;color: #fff;}
.pushy .P-member-nav a:active, .pushy .P-member-nav a:visited{color: #fff;}

#menu_box { display:none;}
.P-header {
	width: 100%;
	height: 90px;
	margin:auto;
	top: 0;
	z-index: 2;
	position: relative;
	display: inline-block;
	background:#fff;
}
.P-header.change {background:#fff;}
.P-nav-logo {
    position: relative;
    float: left;
    margin: auto;
    width: 180px;
    padding: 23px 0;
    overflow: hidden;
}
.P-nav {width:735px; position: absolute; left: 50%; transform: translateX(-50%);}
.P-nav2 {width: 165px;cursor: pointer;float: right;}
.P-nav2 div{text-align: center;padding: 7px 0 3px 0;margin: 30px 0px;font-size: 17px;font-weight: 400;border-radius: 50px;transition-duration: .2s;border: 1px solid #333;letter-spacing: 1px;}
.P-nav2 div a{color: #fff;} 
.P-nav2 div:hover{background: #000; border: 1px solid #000;}
.P-nav2 div:hover a{color: #fff;}
#btn-top-menu{display: none !important;}
 
.P-nav li{position: relative; float: left;}
.P-nav ul ul{display: none;margin-top: 90px;position: absolute;text-align: center;width: 160%;background: #fff;left: -30%;}
.P-nav ul .members{width: 160%;left: -30%;}
.P-nav-item:hover .P-nav ul ul{display: block;}
.P-nav ul ul li{height: 50px;line-height: 50px;font-size: 15px;font-weight: 300;float: inherit;}
.P-nav ul ul li:hover a{font-weight: 400;color: #000; border-bottom: 2px solid #000; padding-bottom: 5px;}
.P-nav ul ul li a {transition:all .3s;}

.P-nav-item {
	position: relative;
	display: block;
	padding: 0 22px;
	height: 90px;
	color: #000 !important;
	float: left;
	text-align: center;
	font-weight: 400;
	transition-duration: .2s;
	font-size: 17px;
	line-height: 90px;
	letter-spacing: 0px;
} 
.visible-lg ul li:hover > ul{display:block;}
.P-nav-item span{
    position: absolute; 
    width: 100%; 
    top: 25px;
    opacity: 0;
    transition-duration: .2s;
}
.P-nav-item:hover, .P-nav-item:focus {
	color: #000 !important;
	height: 90px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.visible-lg {display: block !important;}
.hidden-lg {display: none!important;}

.lang_btn{float: right; padding:28px 20px;}
.lang_col{border: 0;padding: 5px 10px; cursor: pointer;font-size: 17px; font-weight:500; background-image: none;}

.gnb ul:after {content:""; display:block; clear:both;}


/*로고 끝*/
.wrap {
  width: 100%;
  max-width:1340px;
  margin: auto;
}
.wrap_in {
  height: 90px;
  margin:0 auto;
}
.visible-lg {
  display: flex !important;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.hidden-lg {display:none;}

/*서일캐스팅 메인*/
.si_main {width:100%; height:800px; position:relative; margin-bottom:60px;}
.swiper-container{width: 100%;height: 800px; position:fixed;} 
.swiper-slide{width: 100%; height: 800px !important; background-position: center center !important; background-repeat: no-repeat; background-size: cover;}
.si_txtWrap {width:1340px; margin:auto;}
.si_txt {position:absolute; top:50%; transform:translateY(-50%); z-index:2; word-break:keep-all;}
.si_txt small {font-size:22px; line-height: 1.4; font-weight:400; color:#88b2d8;}
.si_txt h1 {font-size:53px; font-weight:700; line-height:1.3; color:#fff; padding-top:10px;}

.si_about {position:absolute; right:0; bottom:0; width:70%; height:114px; padding:48px 55px; background:#fff url("../images/main/about_bg.png") no-repeat 30px 26px / 32px; z-index:2;}
.si_about_in {width:83%; background:transparent;}
.si_about_in > div {width:90%; float:left; font-size:22px; color:#333333;}
.si_about_in > a {width:8%; float:right; margin-top: -11px;}
.si_about_in > a img {transform:translateX(0px); transition:all .5s ease;}
.si_about_in > a img:hover {transform:translateX(-15px);}
.si_about_in:after, .si_main:after {content:""; display:block; clear:both;}


/*서일캐스팅 제품소개*/
.si_products {position:relative; padding-bottom: 8%; overflow: hidden;}
.si_products > .bg_img img {position: absolute; top: 0; right: 0; z-index:-1;}
.section_in {width:1340px; margin: auto;}
.si_eng {display:block; font-size:17px; color:#284361; font-weight:600; padding-bottom:10px;}
.si_tit {font-size:35px; color:#000; font-weight:700; margin-bottom:80px;}
.si_proTab {width:40%; float:left; padding-top: 118px;}
.si_proWrap {width:60%; float:right;}

.pro_tab {width:325px; height:54px; line-height:54px; padding-left:20px; margin-bottom:8px; background:#ebeff2;  transition:all 0.4s ease; cursor:pointer;}
.pro_tab a {font-size:20px; font-weight:400; color:#797d82;}
.pro_tab img {opacity:0; float: right; margin: 18px;}
.pro_tab.on {width:372px; background:#3c5e83;}
.pro_tab.on a {font-weight:700; color:#fff;}
.pro_tab.on img {opacity:1;transform:translateX(0px); transition:all .5s ease;}
.pro_tab.on img:hover {transform:translateX(-15px);}
.pro_contents {width: 80%; margin-top: 11%;}
.pro_tab:after, .section_in:after {content:""; display:block; clear:both;}
/*서일캐스팅 제조공정 및 설비현황 · 서일베트남*/
.si_process {margin-top: -170px;}
.si_process .section_in {z-index: 2; position: relative; margin-top: -30px; padding:50px 66px;background:url("../images/main/210128_si_01.jpg") no-repeat center / cover; box-shadow:0px 15px 40px 0px rgba(101, 101, 95, 0.5);}
.bg_txt {font-size:150px; line-height:1; font-weight:800; text-align:left; color:#ebeff2; z-index:-1;}
.si_process .left {width:60%; float:left;}
.si_process .right {width:40%; float:left;}
.si_process .right .gobtn {width:325px; height:54px; line-height:54px; padding:0 20px; border:1px solid #eaeef1; background:transparent; float:right; text-align: left;}
.si_process .right .gobtn:first-child {margin-bottom:8px; }
.si_process .right .gobtn a {font-size:22px; color:#fff;}
.si_process .right .gobtn img {float: right; margin: 18px; transform:translateX(0px); transition:all .5s ease;}
.si_process .right .gobtn:hover img {transform:translateX(-15px);}
.si_process .si_eng {color:#b9c9d7; margin-top: 24px;}
.si_process .si_tit {margin-bottom:0; color:#fff;}
.si_process .right:after {content:""; display:block; clear:both;}


/*서일캐스팅 공지사항*/
.bando_news {width:100%; padding:192px 0 100px; margin-top:-80px; background:#ebeff2;}
.news_left {width:60%; margin-right:68px; float:left;}
.news_right {width:calc(40% - 68px); float:right;}

.bando_news .section_in:after {content:""; display:block; clear:both;}
.bando_news .si_tit {margin-bottom:11px;}
.bando_news .news_list li {width:100%; padding:17px 0 12px; border-bottom:1px solid #8f9192;}
.bando_news .news_list li > div {width:70%; float:left; font-size:16px; color:#333333; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bando_news .news_list .date {width:30%; float:right; font-size:14px; color:#727272; float:right; text-align:right;}
.bando_news .news_list li:after {content:""; display:block; clear:both;}

.news_right a {display:block; width:calc(50% - 6px); height:214px; float:left; padding:40px 0; text-align:center;}
.news_right a .si_eng {display:block; color:#ebeff2; padding:13px 0;}
.news_right a .si_tit {color:#fff;}
.news_right a:first-child {background:#3c5e83; box-shadow:0px 15px 40px 0px rgba(101, 101, 95, 0.5);}
.news_right a:last-child {background:#6886a0; box-shadow:0px 15px 40px 0px rgba(101, 101, 95, 0.5); margin-left:12px;}
.news_right:after {content:""; display:block; clear:both;}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  
}


/* [ 0 ~ 1340px 적용] */
@media all and (max-width:1340px){  
  #main {width:90%; margin: 0 auto;}
  .pc{display:none;}
  .si_main .pc {display:block;}
  .t{display:block;}
  .m{display:none;}
  .subMenu {display:none;}
  .P-header{height: 70px; background: #fff;}
  .P-nav-logo{padding:17px 0;width: 150px; margin-left:5%;}
  #btn-top-menu{display: block !important; width: 26px; float: right; padding: 22px 0; margin-right: 4%;}
  .visible-lg{display: none !important;}
  .wrap .P-member{display: none;}
  .right.pushy-open {z-index:99999999999999999;}
  .lang_btn {float:left; margin-left: 30%; padding: 19px 20px; position:absolute; right:60px;}
  .bando_sns {float: right; margin-right: 5%; padding-top: 21px;}
  .si_proTab {padding-top:92px;}

  .section_in {width:90%;}
  .si_txt {left: 5%;}
  .si_about_in {width:100%;}
  .si_products > .bg_img img {right:-11%;}
  .pro_contents {width:90%;}
  .f_wrap {max-width:90%;}
  
}

@media all and (max-width:1078px) {
  .si_main .pc {display:none;}
  .si_about {width:80%;}
  .si_about_in > div h3 {line-height:1.4; word-break:keep-all;}
  .si_about_in > div, .pro_tab a, .si_process .right .gobtn a  {font-size:18px;}
  .si_about_in > a {width:5%;}
  .si_tit {font-size:26px; line-height: 1.3; word-break:keep-all;}
  .si_proTab {padding-top:0px;}
  .pro_tab, .si_process .right .gobtn {width:260px;}
  .pro_tab.on {width:300px;}
  .bg_txt {font-size:120px; margin-top: 130px;}
  .si_process .section_in {padding:50px 26px; margin-top:-14px;}
}

@media all and (max-width:974px) {
  .swiper-container, .si_main {height:700px;}
  .si_txt h1 {font-size:46px;}
  .si_txt small {font-size:18px;}
  .si_process .left, .si_process .right {width:100%; float:none;}
  .si_process .right  {margin-top:25px;}
  .si_process .right .gobtn {float:left; margin-right:10px;}
  .si_tit {margin-bottom:50px;}
  .si_process .right .gobtn img {margin:18px 0 18px 18px;}
  .news_left {width:100%; float:none; margin-right:0;}
  .news_right {width:100%; float:none; margin-top: 50px;}
  .news_right a {height:142px; padding:28px 0;}
  .news_right a img {float: left; width: 50px; margin:18px 0 0 54px;}
  .news_right a .si_eng, .news_right a .si_tit {width:60%; float:left; text-align:left; margin-left:22px;}
  .news_right a .si_eng {padding:13px 0 8px;}
  .lang_col {font-size:15px;}
  .lang_btn {right:50px;}
}

@media all and (max-width:640px){
  .swiper-container, .si_main {height:500px;}
  .si_txt {top: 45%;}
  .si_txt h1{font-size:34px;}
  .si_txt small {width:78%; display:block; font-size:16px;}
  .si_about {width:90%; padding:34px 30px; background:#fff url("../images/main/about_bg.png") no-repeat 21px 19px / 26px;}
  .si_about_in > a img {width:26px;}
  .si_about_in > a {margin-top:12px; width:8%;}
  .si_tit {margin-bottom: 20px;}
  .si_eng {padding-bottom:0;}
  .pro_contents {margin-top:0;}
  .si_proWrap {width:80%;}
  .si_proTab {width:100%;}
  .si_products > .bg_img img {width:184%; right:-23%; top:inherit; bottom:8%;}
  .bg_txt {font-size:76px;}
  .si_process .si_eng {margin-top:0; line-height:1.2;}
  .news_right a {height:180px; padding:28px 0;}
  .news_right a img {float: none; width: 50px; margin:0 auto;}
  .news_right a .si_eng, .news_right a .si_tit {width:100%; float:none; text-align:center; margin-left:0;}
  .news_right a .si_eng {padding:8px 0 0;}
}