@charset "utf-8";


@font-face {
     font-family: 'S-CoreDream-5Medium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}








<style type="text/css">
    header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption, summary, mark, meter, output, progress, time, video{ display: block; }
    body,form,th,td,p { margin:0;padding:0; -webkit-text-size-adjust:none;}
    html { font-family:"Malgun Gothic","Dotum","Gulim,Helvetica","sans-serif";}
    a:link, a:visited, a:active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }
    a:hover{ text-decoration:none; color:yellow; cursor:pointer; }




    a { text-decoration:none;}
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, hgroup, header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0;  vertical-align:baseline; background:transparent; }






@media all and (min-width:821px){
#mobileonly {display: none;}
body { font-size:12px; margin: 0; overflow-x: hidden;}
#header {width:1450px; margin:0 auto;  padding:0px 0 0 0; position:relative; }
#header div.logo { position:absolute; padding-top:10px; margin: 0 0 0 181px;}
#header div.logo img { height:40px; width:190px;}
#top{background-image: url('http://www.yong-sung.co.kr/base/img/image/mainbanner1.jpg'); background-size: cover; height: 85vh;}
#top .maintext{  font-family: 'S-CoreDream-5Medium'; font-size: 45px; font-weight: bold; color: #000048; position: absolute; top: 40%; left: 75%; transform: translate(-50%, -50%); text-shadow: 1px 1px 1.2px white; white-space: nowrap; line-height: 0.65; }
#top .maintext span{ font-family: 'S-CoreDream-3Light'; font-size: 25px; display: contents; line-height: 55px; text-shadow: none; }
aside.util {width:100%; display:block; background-color:rgba(0, 0, 0, 0.7); color:#fff; text-align: right;}
aside.util div.util_Area { width:1450px; margin:0 auto;  text-align:right; padding:25px 0 0 0; height:40px; }
aside.util div.util_Area ul{ position: relative; list-style: none; float: right; display: inline-flex; margin: -3px 181px 0 0;}
aside.util div.util_Area ul a{ padding:0px 5px; font-size:12px; color: #fff; }
aside.util div.util_Area ul :hover>a{ color: #5887da; }
















/* --------------------»ó´Ü ¸Þ´º------------------------------ */
.menunavbox{ width: 1450px; text-align: center; display: flex; justify-content: center; margin: 0 auto; }
.Main_Menu{list-style : none; position: absolute; padding: 10px 0 0 0; white-space: nowrap; }
.Main_Menu>li{ display: inline-block; height: 40px;}
.Main_Menu>li>a{line-height: 40px; text-align: center; font-weight: bold; font-size: 15px; color: #fff; margin-left: 20px; text-decoration: none;}
.Main_Menu>li>a.active{ color:#5887da; font-weight: bolder;}
.Main_Menu>li:hover>a{ color: #5887da;}
.subMain_Menu{ display:none; overflow: hidden; list-style : none; background-color : rgba(0, 0, 0, 0.7); position: fixed; top: 65px; z-index: 1; height: 40px; width: 100vw; left: 0%; min-width: 1450px; }
.subMain_Menu>li{ display: inline;}
.subMain_Menu>li>a{ line-height: 40px; font-size: 16px; text-align: center; color: #fff; margin-left: 10px; text-decoration: none;}
.subMain_Menu>li:hover>a{ color: #5887da;}














/* ------------- °øÁö»çÇ×, Äü¸Þ´º ÄÁÅÙÃ÷ ½ÃÀÛ ----------------------------------------------*/
#btm_cont_area{ width:100%; height:150px; background-color:#EFEFEF;}
#btm_cont_area .btm_c_box { width:1450px; height:140px; margin:0 auto;}








/* ------------- °øÁö»çÇ× ¹Ú½º ----------------------------------------------*/
#btm_cont_area .btm_c_box .Box_04 { float:left; width:50%; height:140px;}
section.Box_04 p.tit01{ float:left; text-align:left; box-sizing:border-box; font-size:18px; color:#0c1d42; padding: 15px 0 0 280px; }
section.Box_04 p.tit02{ float:left; text-align:left; padding:22px 6px 0 300px; box-sizing:border-box; font-size:13px;}
section.Box_04 p.tit02 a{ color:#0c1d42; text-decoration: none;}








/* ------------- °øÁö»çÇ× ÃßÃâ ----------------------------------------------*/
#btm_cont_area .btm_c_box .Box_04 .list { padding:10px 0 0 300px; float:left; font-size:13px;}
#btm_cont_area .btm_c_box .Box_04 .list table{ line-height:25px;}
#btm_cont_area .btm_c_box .Box_04 .list table tbody tr td a{text-decoration:none; color:#000;}
#btm_cont_area .btm_c_box .Box_04 .list table .bd_out1{ width:280px;}








/* ------------- Äü¸Þ´º ----------------------------------------------*/
#btm_cont_area .btm_c_box .Box_05{ float:left; width:49.9%; height:140px;}
#btm_cont_area .btm_c_box .Box_05 ul li{ list-style: none; float:left; width:150px;}








/* ------------- ½ºÆ¿ÄÆ, Ãßõ »óÇ°, °í°´ °¡À̵å ----------------------------------------------*/
.cont_area_2{ width:1450px; height: 520px; background-color: #fff; margin: 0 auto; }








/* ------------- ½ºÆ¿ÄÆ ----------------------------------------------*/
section.still_cut { float:left; width:40%; height:520px;}
section.still_cut p.tit01{ padding:30px 0 10px 0; margin: 0 0 0 276px; box-sizing:border-box; font-size:18px; color:#0c1d42;}
section.still_cut .outer { width: 303px; height: 402px; margin: 0 0 0 276px; overflow: hidden; background-color:#EFEFEF; position: relative; }
section.still_cut .inner-list { display: flex; transition: .3s ease-out; height: 100%;}
section.still_cut .inner { padding: 0;}
section.still_cut .inner img{ width: 303px; height: 402px; object-fit: cover;}


section.still_cut .button-list { text-align: center;}
section.still_cut .button-list .button-left { position: absolute; bottom: 42%; left: 3%; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.7); font-weight: bold; border-color: transparent; border: none; font-size: 20px;}
section.still_cut .button-list .button-right { position: absolute; bottom: 42%; right: 3%; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.7); font-weight: bold; border-color: transparent; border: none; font-size: 20px; }




.slide_pagination { display: flex; gap: 5px; position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%); list-style: none; }
.slide_pagination > li { color: #ffffff88; cursor: pointer; font-size: 40px; }
.slide_pagination > li.active { color: #ffffff; }








/* ------------- Ãßõ »óÇ° ----------------------------------------------*/
section.recommend_product{ float: left; width: 60%; height: 290px;}
section.recommend_product p.tit01{ padding:30px 0 10px 35px; box-sizing:border-box; font-size:18px; color:#0c1d42; margin: 0 0 0 0;}
section.recommend_product ul{ width: 100%; list-style: none; float: left; display: flex; padding: 0 0 0 35px; }
section.recommend_product ul li{ width: 182px; text-align: center; margin-right: 5px; }
section.recommend_product ul li a{ text-decoration: none; color: #0c1d42; font-size: 15px; }
section.recommend_product ul li a img{ width: 182px; height: 180px; }








/* ------------- °í°´ °¡À̵å ----------------------------------------------*/
section.Customer_guide{ float: left; width: 600px; height: 176px;}
section.Customer_guide p.tit01{ padding:20px 0 10px 35px; box-sizing:border-box; font-size:18px; color:#0c1d42; margin: 0 0 0 0;}
section.Customer_guide section.guide_list { width: 100%; padding: 0 0 0 35px; }
section.Customer_guide section.guide_list div{ width: 276px; height: 59px; margin: 0 5px 5px 0; display: contents; }








/* ------------- ǪÅÍ ----------------------------------------------*/
#footer { width:100%; background-color:#FFFFFF; color:#454545; clear:both;}
#footer .f_info_area{ width:100%; height: 35px; background-color:#ffffff; clear:both; border-top:1px solid #fff; border-bottom:1px solid #fff;}
#footer .f_info{ margin:5px auto;  width:1450px; clear:both; font-size:12px; overflow:hidden;}
#footer .f_info .f_info_txt{ list-style-type:none; margin: 0 0 0 350px;}
#footer .f_info .f_info_txt li{ float:left; margin-top:5px;}   
#footer .f_info .f_info_txt li a{ padding:0px 10px; display:block; color: #5887da; border-right:1px solid #5887da; text-decoration: none;}     




/*copy_right*/
#footer .f_copy_area{ width:100%; background-color:#5887da; clear:both; border-top:1px solid #fff; border-bottom:1px solid #fff;} 
#footer .f_copy{ margin:0 auto; width:1450px; clear:both; font-size:12px; overflow:hidden; padding:20px 0;}
#footer .f_copy p{ margin: 0 0 0 350px; color:#fff; font-size:12px; line-height:1.5em; }
}
/* ------------------------------PC Style End--------------------- */




















/* ----------------------------- ¸ð¹ÙÀÏ ¸ÞÀÎ ¸Þ´º ------------------------- */
.menu_btn{ display: none; text-align: right; padding:20px; }
.menu_btn a img{ width: 25px; }
.sidebar_menu{ display: none; text-align : center; background-color: #fff; z-index: 1; }
.close_btn{ display:none; width: 25px; height: 25px; margin:10px; }
.close_btn > a{ display: block; width: 100%; height: 5%; position: absolute;}
.Main_Menu_M { list-style : none; overflow: hidden; margin: 0px auto; }
.Main_Menu_M > li { width: 100%; text-align: center; line-height: 40px; background-color: #fff; list-style: none; }
.Main_Menu_M a { color: #000; font-weight:bold; }
.subMain_Menu_M { list-style : none; overflow: hidden; }
.subMain_Menu_M > li { line-height: 25px; background-color: #fff; width:50%; float:left; list-style: none; }
.subMain_Menu_M a { color: #585858; font-weight:normal; font-size: 13px; }








/* ------------- ¸ð´Þâ ----------------------------------------------*/
.container{width:100%;}
.popup-wrap{justify-content:center; align-items:center; position:absolute; top:50px; left:325px; z-index: 999;}
.popup{width:100%; max-width:400px; background-color:#264db5; box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); display: none;}
.popup-body{width:100%;  background-color:#ffffff;}
.body-content{width:100%;}
.body-contentbox{word-break:break-word;  min-height:100px;  max-height:405px;}
.body-contentbox img{width: 100%;}
.popup-foot{width:95%;  height:45px; color:#ffffff; text-align: right;}
.popup-foot input{margin: 10px;}
.pop-btn{display:inline-flex;  width:15%;  height:100%; justify-content:center;  align-items:center; cursor:pointer;}
.pop-btn.confirm{border-right:1px solid #3b5fbf;}




.container1{width:100%;}
.popup-wrap1{justify-content:center; align-items:center; position:absolute; top:50px; left:750px; z-index: 999;}
.popup1{width:100%; max-width:400px; background-color:#264db5; box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); display: none;}
.popup-body1{width:100%;  background-color:#ffffff;}
.body-content1{width:100%;}
.body-contentbox1{word-break:break-word;  min-height:100px;  max-height:405px;}
.body-contentbox1 img{width: 100%;}
.popup-foot1{width:100%;  height:45px; color:#ffffff; text-align: right;}
.popup-foot1 input{margin: 10px;}
.pop-btn1{display:inline-flex;  width:15%;  height:100%; justify-content:center;  align-items:center; cursor:pointer;}
.pop-btn1.confirm1{border-right:1px solid #3b5fbf;}












/* -----------------------¸ð¹ÙÀÏ ¼³Á¤------------------------------ */
@media all and (max-width:820px){


html, body { max-width: 100%; overflow-x: hidden; }
/* Çì´õ */
#top{background-image: url('http://www.yong-sung.co.kr/base/img/image/mainbanner1m.jpg'); background-size: cover; height: 45vh; position: relative;}
#top .maintext{ font-size: 23px; font-weight: 900; color: #0B0B3B; position: absolute; top: 50%; left: 70%; transform: translate(-50%, -50%); text-shadow: 0.4px 0.4px 0.1px midnightblue; white-space: nowrap; line-height: 26px; }
#top .maintext span{ font-size: 12px; display: contents; line-height: 30px; text-shadow: none; }


#header {width:40%; padding:1px 0; position:absolute; top:0; z-index: 1; }
#header div.logo { float:left; padding:8px 0 0 10px;}
#header div.logo img { height:30px; width:135px; }
aside.util { display: none; }
#main{width:100%; margin:0 auto; }




/* ¸ð¹ÙÀÏ ¸Þ´º */
.menunavbox{display: none;}
.menu_btn{display: block; background: rgba(0, 0, 0, 0.7); height: 50px; width: 100%; position: absolute; top: 0; padding: 0;}
.menu_btn a img{margin: 11px 10px 0 0;}
.sidebar_menu{display: none; width: 70%; height: 100%; background: #fff; position: fixed; top:0; right: -50%;}
.close_btn{display:block; margin: 10px 0 0 40%;}








/* ------------- °øÁö»çÇ×, Äü¸Þ´º ÄÁÅÙÃ÷ ½ÃÀÛ ----------------------------------------------*/
#btm_cont_area{ width:100%;}
#btm_cont_area .btm_c_box { display: flex; flex-direction: column; }




/* ------------- Äü¸Þ´º ----------------------------------------------*/
#btm_cont_area .btm_c_box .Box_05{ float:left; width:100%; display: block; order: 1; }
#btm_cont_area .btm_c_box .Box_05 strong.tit01{ font-size:17px; float:left; text-align:center; padding:27px 15px; color:#454545;}
#btm_cont_area .btm_c_box .Box_05 ul li{ list-style: none; float:left; width:33.3%;}
#btm_cont_area .btm_c_box .Box_05 ul li a img{width: 100%;}




/* ------------- °øÁö»çÇ× ¹Ú½º ----------------------------------------------*/
#btm_cont_area .btm_c_box .Box_04 { float:left; width:100%; height:100px; background-color: #EFEFEF; display: block; order: 2; margin: -5px 0 0 0;}
section.Box_04 p.tit01{ width: 50%; float:left; text-align:left; box-sizing:border-box; font-size:12px; color:#0c1d42; padding: 14px 0 0 32px; }
section.Box_04 p.tit02{ width: 45%; float:left; text-align:right; margin: 13px 13px 0 0; box-sizing:border-box; font-size:11px;}
section.Box_04 p.tit02 a{ color:#0c1d42; text-decoration: none; padding:16px 20px 0 0; }




/* ------------- °øÁö»çÇ× ÃßÃâ ----------------------------------------------*/
#btm_cont_area .btm_c_box .Box_04 .list { padding:8px 0 0 32px; float:left; font-size:11px; width: 80%;}
#btm_cont_area .btm_c_box .Box_04 .list table{ line-height:16px;}
#btm_cont_area .btm_c_box .Box_04 .list table tbody{ white-space: nowrap; }
#btm_cont_area .btm_c_box .Box_04 .list table tbody tr td a{text-decoration:none; color:#000;}












/* ------------- ½ºÆ¿ÄÆ, Ãßõ »óÇ°, °í°´ °¡À̵å ----------------------------------------------*/
.cont_area_2{ width:100%; background-color: #fff; margin: 0; display: flex; flex-direction: column;}




/* ------------- Ãßõ »óÇ° ----------------------------------------------*/
section.recommend_product{ float: left; width: 100%; display: block; order: 1; }
section.recommend_product p.tit01{ padding:25px 0 10px 13px; box-sizing:border-box; font-size:13px; color:#0c1d42; }
section.recommend_product ul{ margin: 0 13px; list-style: none;}
section.recommend_product ul li{ width: 31%; float: left; text-align: center; padding-right: 5px; }
section.recommend_product ul li a{ text-decoration: none; color: #0c1d42; font-size: 13px; }
section.recommend_product ul li a img{ width: 100%; }




/* ------------- ½ºÆ¿ÄÆ ----------------------------------------------*/
section.still_cut { float:left; width:100%; display: block; order: 2; }
section.still_cut p.tit01{ padding:25px 0 10px 13px; box-sizing:border-box; font-size:13px; color:#0c1d42;}
section.still_cut .outer { margin: 0 13px; overflow: hidden; background-color:#fff; position: relative; }
section.still_cut .inner-list { display: flex; transition: .3s ease-out; height: 100%;}
section.still_cut .inner img{ width: 100%; height: 100%; object-fit: cover; }




section.still_cut .button-list { text-align: center;}
section.still_cut .button-list .button-left { position: absolute; bottom: 45%; left: 3%; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.7); font-weight: bold; border-color: transparent; border: none; font-size: 20px;}
section.still_cut .button-list .button-right { position: absolute; bottom: 45%; right: 3%; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.7); font-weight: bold; border-color: transparent; border: none; font-size: 20px; }




.slide_pagination { display: flex; gap: 5px; position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%); list-style: none; }
.slide_pagination > li { color: #ffffff88; cursor: pointer; font-size: 40px; }
.slide_pagination > li.active { color: #ffffff; }








/* -----------------------°í°´ °¡À̵å------------------------------ */
section.Customer_guide{ float: left; width: 100%; display: block; order: 3; margin: 0 0 10px 0;}
section.Customer_guide p.tit01{ padding:25px 0 10px 13px; box-sizing:border-box; font-size:13px; color:#0c1d42; }
section.Customer_guide section.guide_list { width: 100%; padding: 0; margin: 0 13px 10px;}
section.Customer_guide section.guide_list div{ width: 46%; display: inline-block; }
section.Customer_guide section.guide_list div a img{width: 100%;}








/* ǪÅÍ */
#footer { width:100%; background-color:#FFFFFF; color:#454545; clear:both; }
#footer .f_info_area{ width:100%; background-color:#5887da; clear:both; border-top:1px solid #fff; border-bottom:2px solid #fff;}
#footer .f_info{ margin:0 auto; width:100%; clear:both; font-size:11px; overflow:hidden; padding:10px 0; color: #fff; }
#footer .f_info .f_info_txt{ list-style-type:none; }
#footer .f_info .f_info_txt li{ float:left; margin-top:1px; }   
#footer .f_info .f_info_txt li a{ padding:0px 10px; display:block; border-right:1px solid #fff; }
/*copy_right*/
#footer .f_copy{ margin:0 auto; width:100%; clear:both; font-size:11px; overflow:hidden; padding:20px 0; text-align:left; }
#footer .f_copy_area{background-color:#5887da;}
#footer .f_copy p{ margin-left:10px; color:#fff; font-size:11px; line-height:1.5em; }
#footer .f_copy .f_copy_adr{ display:none; }








/* ¸ð´Þâ  */
.popup-wrap{left: 0;}
.popup-wrap1{left: 0;}


.popup-foot{font-size: 13px;}
.popup-foot1{font-size: 13px;}


}
















</style>