@charset "UTF-8";

html {font-size:10px;}
body {background:#fff; font-family:'NotoSansKR', sans-serif; font-weight:400; font-size:1.7rem; color:#272727; line-height:1.5; letter-spacing:-0.8px; overflow-x: hidden;}
input, button, textarea, select {font-family:'NotoSansKR', sans-serif; font-weight:400; color:#272727; letter-spacing:-0.8px;}
button, input[type="button"], input[type="submit"] {border:0; cursor:pointer; vertical-align:top; background:#1e1e1e; color:#fff; padding:7px 23px;}
input[type="checkbox"] {vertical-align:middle;}
select::-ms-expand {display:none;}
select,
input[type="text"],
input[type="password"] {padding:7px 13px; border:1px solid #ddd;}
h1, h2, h3, h4, h5 {font-size:1.7rem; font-weight:normal; letter-spacing:-1.3px;}
img {vertical-align:middle;}
a {color:#272727;}
b {font-weight:500;}
.noScroll {overflow:hidden;}
.wrap {max-width:1400px; margin:0 auto;}
.wrap2 {max-width:1600px; margin:0 auto;}
.ir, .arrow {position:relative;}
/* .arrow:before {content:''; position:absolute; top:50%; width:6px; height:6px; border-bottom:2px solid #322820; border-right:2px solid #322820; transform:translateY(-50%) rotate(45deg);} */
#container {clear:both;}

/* header */
#header{padding: 0 3rem; z-index: 100; height: 100px;}
#header .logo{width: 180px; float: left; display: flex; height: 100px; align-items: center;}
#header .logo > a{color: #1c1c1c;}
#header .logo > a > em{background:url('/sjur/img/layout/logo.png') no-repeat center; text-indent:-9999px; float: left; width: 59px; height: 60px;}
#header .logo > a span{display:inline-block; font-weight: 700; padding-left: 10px; font-size: 20px;}
#header .logo > a span:nth-of-type(1){font-weight: 500;}
#header .left_link{height: 100px; display: flex; float: left; align-items: center; padding-left: 35px;}
#header .left_link ul{overflow: hidden; background: #f6f6f6; border-radius: 50px; padding: 7px 32px;}
#header .left_link ul li{float: left;}
#header .left_link ul li a{color: #363636; font-size: 16px; font-weight: 500;}
#header .left_link ul li:last-child a{padding-left: 30px; position: relative;}
#header .left_link ul li:last-child a::after{position: absolute; content: ""; background: #363636; width: 1px; height: 10px; top: 50%; transform: translateY(-50%); left: 15px;}
#header .pc_nav nav{float: right; padding-right: 60px; position: relative;}
#header .menu{width: 50px; height: 100px; line-height: 100px; right: 0; position: absolute;}
#header .menu a.nav_open {margin-right:30px; z-index:100; display: inline-block;}
#header .menu a.nav_open span{text-indent:-9999px; display: block; position: relative; }
#header .menu a.nav_open span::after{position: absolute; content: ""; background:url('/sjur/img/layout/sitemap.png') no-repeat center; width: 21px; height: 19px; left: 0; top: 50%; transform: translateY(-50%);}

#header .pc_nav .depth01 {display:inline-block;}
#header .pc_nav .depth01 > li {float:left; margin:0 25px; position: relative;}
#header .pc_nav .depth01 > li > a {display:block; position: relative; height: 100px; line-height: 100px; font-family: 'GmarketSans'; font-size:2.2rem; font-weight:500; letter-spacing:-1.3px;}
#header .pc_nav .depth01 > li:last-child > a:before {display:none;}
/* #header .pc_nav .depth01 > li:hover > a {font-weight: 600;} */

/* #header .pc_nav .depth01 > li > a::after{content:''; position:absolute; left:50%; bottom: 17px; width:0; height:0.3rem; border-radius:1rem; background:linear-gradient(90deg, #a4b200 0%, #777f18 100%); transition:all .2s;} */
#header .pc_nav .depth01 > li > a::after{content:''; position:absolute; left:50%; bottom: 17px; width:0; height:0.3rem; border-radius:1rem; background:#1958cc; transition:all .2s;}
#header .pc_nav .depth01 > li:hover > a::after{left: 0; width: 100%;}

#header .pc_nav .depth01 > li:nth-child(3){padding-right: 30px;}
#header .pc_nav .depth01 > li sup{font-size: small; padding-left: 4px; top: -3px; position: absolute;}
/* #header .pc_nav .depth02 {display:none; position:absolute; top:100px; left: -29px; width:200px; padding: 30px 20px 0; z-index:300; background: #fff;} */
#header .pc_nav .depth02 {display: none; position:absolute; top:96px; left: -30px; width:190px; z-index:300; padding: 8px 5px; background: #fff; box-shadow:5px 5px 15px rgba(0,0,0,.3);}
#header .pc_nav .depth02 > li {width: 100%; text-align: center;}
#header .pc_nav .depth02 > li > a {position:relative; display: block; padding: 14px 28px; color: #272727; font-weight: 500;}
#header .pc_nav .depth02 > li:hover > a{font-weight: 600; color: #1958cc;}
#header .pc_nav .depth03 {padding:14px 0 10px;}
#header .pc_nav .depth03 > li > a {position:relative;/* margin:5px 0; */ font-size:1.6rem;/* padding-left:20px; */color: #3e3e3e; }
#header .pc_nav .depth03 > li > a:before {/* content:''; */ position:absolute; top:10px; left:8px; width:3px; height:3px; background:#747474;}
#header .pc_nav .depth03 > li:hover > a {text-decoration:underline;}
#header .pc_nav .depth03 > li:hover > a:before {background:#000;}

#header .m_nav {display:block; visibility:hidden; position:fixed; right:0; top:0; width:100%; height:100%; z-index:300;}
#header .m_nav:before {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0); transition:all 0.85s cubic-bezier(0.43, 0.03, 0.21, 1);}
#header .m_nav nav {position:fixed; top:0; right:-100%; width:100%; max-width:280px; height:100%; overflow-y:auto; padding:55px 0; background:#fff; text-align:center; z-index:100; transition:all 0.85s cubic-bezier(0.43, 0.03, 0.21, 1);}
#header .m_nav.open {visibility:visible;}
#header .m_nav.open:before {background:rgba(0,0,0,0.7);}
#header .m_nav.open nav {right:0;}

#header .m_nav .top{overflow: hidden; position: absolute; top: 0; width: 100%; height: 55px; display: flex; align-items: center; text-align: left; padding-left: 2rem; background: #fff; border-bottom: 1px solid #ddd;}
#header .m_nav .top li{float: left;}
#header .m_nav .top li:first-child{padding-right: 14px;}
#header .m_nav .top li a{font-size: 15px;}
/* #header .m_nav .top li a span{display: inline-block; padding-right: 17px; background: url('/sjur/img/layout/blank_b.png') no-repeat right 47%;} */
#header .m_nav .depth01 {text-align:left; position: absolute; top: 55px; width: 100%;}
#header .m_nav .depth01 li a {position:relative; padding-right:20px; padding-left:20px; display: block;}
#header .m_nav .depth01 > li > a {display: block; padding-top:15px; padding-bottom:15px; border-bottom:1px solid #ddd; font-size:1.8rem; font-weight:500; letter-spacing:-1px;}
#header .m_nav .depth01 > li > a:before {content:''; position:absolute; top:50%; right:20px; width:6px; height:6px; margin-top:-3px; background:none; border-bottom:2px solid #322820; border-right:2px solid #322820; transform:rotate(-45deg);}
#header .m_nav .depth01 > li > a.on {background:#1958cc; color:#fff;}
#header .m_nav .depth01 > li > a.on:before {margin-top:-6px; transform:rotate(45deg); border-color:#fff;}
#header .m_nav .depth02 {display:none; background:#f2f6ffc4; border-bottom:1px solid #ddd; padding:10px 0 10px 2px;}
#header .m_nav .depth01 > li sup{font-size: 12px; padding-left: 4px; position: absolute; top: 15px;}
#header .m_nav .depth02 > li > a {margin:10px 0 10px 1px; font-size:1.7rem; font-weight:500; letter-spacing:-1px;}
#header .m_nav .depth02 > li:hover > a {color:#1958cc; font-weight:600;}
#header .m_nav .depth03 {padding:0 0 5px 25px;}
#header .m_nav .depth03 > li > a {margin:5px 0; color:#747474; font-size:1.6rem;}
#header .m_nav .depth03 > li > a:before {content:''; position:absolute; top:10px; left:8px; width:3px; height:3px; background:#747474;}
#header .m_nav .depth03 > li:hover > a {text-decoration:underline;}
#header .m_nav .depth03 > li:hover > a:before {background:#000;}
#header .m_nav_close {position:absolute; top:0; right:0; width:55px; height:55px; background:#505050;}
#header .close_btn {display:block; position:absolute; top:50%; left:50%; width:20px; height:20px; z-index:200; transform:translate(-50%, -50%);}
#header .close_btn span {display:block; position:absolute; top:50%; left:0; width:100%; height:2px; background:rgba(255,255,255,0); color:transparent; transform:translate(0, -50%);}
#header .close_btn span:before,
#header .close_btn span:after {content:""; position:absolute; left:0; top:0; width:100%; height:2px; background: #fff;}
#header .close_btn span:before {top:0; transform:rotate(45deg);}
#header .close_btn span:after {top:0; transform:rotate(-45deg);}

nav a[target="_blank"] span{display: inline-block; padding-right: 17px; background: url('/sjur/img/layout/blank_b.png') no-repeat right 47%;}
.m_nav nav .depth03 a[target="_blank"] span{background: url('/sjur/img/layout/blank_g.png') no-repeat right 47%;}
.pc_nav .depth02 > li:hover > a[target="_blank"] span,
.m_nav .depth02 > li:hover > a[target="_blank"] span{background: url('/sjur/img/layout/blank_hover.png') no-repeat right 47%;}



@media all and (max-width:1440px) {
    #header .pc_nav .depth01 > li {margin:0 20px;}
    #header .pc_nav .depth01 > li > a {font-size:2rem;}
}
@media all and (max-width:1240px) {
    #header .pc_nav nav{padding-right: 35px;}
    #header .pc_nav .depth01{top: 45px;}
    #header .pc_nav .depth01 > li {margin:0 12px;}
    #header .pc_nav .depth01 > li > a {top:0; font-size:1.8rem;}
    #header .pc_nav .depth02 > li > a {font-size:1.5rem;}
    #header .pc_nav .depth02 > li > a:before {top:16px; width:4px; height:4px;}
    #header .pc_nav .depth03 > li > a {font-size:1.5rem;}
    #header .pc_nav .depth03 > li > a:before {top:8px;}
        #header .m_nav .top{height: 45px;}
        #header .m_nav .depth01{top: 45px;}
		#header .m_nav .depth01 > li > a {padding-top:13px; padding-bottom:13px; font-size:1.7rem;}
		#header .m_nav .depth01 > li > a:before {width:4px; height:4px; margin-top:-4px;}
		#header .m_nav .depth01 > li > a.on:before {margin-top:-5px;}
		#header .m_nav .depth02 > li > a {font-size:1.6rem;}
		#header .m_nav_close {width:45px; height:45px;}
		#header .close_btn span:before, #header .close_btn span:after {width:90%;}
}
@media all and (max-width:1060px) {
    #header .white_box {display:none !important;}
    #header .mask {display:none;}
    #header .logo, #header .right {height:80px;}
    #header .pc_nav {display:none;}
}
@media all and (max-width:599px) {
    #header{display: flex; height: 70px; align-items: center; padding: 0 1rem;}
    #header .menu{height: auto; width: 39px;}
    #header .menu a.nav_open{margin-right: 0;}
    #header .left_link{display: none;}
    #header .logo{padding-top: 16px;}
    #header .logo > a {line-height: 1.2; width: 100%;}
    #header .logo > a > em{background-size: 80%; background-position: top; display: block;}
    #header .logo > a span{font-size: 16px; padding-left: 0; display: block;}
}


/* footer */
#footer{position: relative; background: #363636; clear: both;}
#footer .wrap{padding: 56px 10px;}
#footer .wrap .left{ width: 60%;}
#footer .wrap .left .f_link ul{overflow: hidden;}
#footer .wrap .left .f_link ul li{float: left; padding-right: 48px;}
#footer .wrap .left .f_link ul li a{position: relative; color: #fff; font-size: 1.9rem; font-weight: 400;}
#footer .wrap .left .f_link ul li a::after{position: absolute; content: ""; background: #fff; width: 1px; height: 10px; right: -27px; top: 50%; transform: translateY(-50%);}
#footer .wrap .left .f_link ul li:last-child a::after{display: none;}
#footer .wrap .left .f_info{padding-top: 20px; color: #fff; font-size: 1.8rem;}
#footer .wrap .left .f_info address{margin-bottom: 4px;}
#footer .wrap .left .f_info address div{display: table-cell; padding-right: 20px;}
#footer .wrap .left .f_info address div b{font-weight: 600;}

#footer .wrap .f_site{float: right;}
#footer .wrap .f_site > div{background: #121212; font-weight: 500; margin-bottom: 10px; width: 274px; position: relative;}
#footer .wrap .f_site > div a{color: #fff; padding: 1.3rem 3rem; display: block;}
#footer .wrap .f_site .arrow2{display: block; background: url('/sjur/img/layout/footer_arrow.png') no-repeat right center;}

#footer .wrap .f_site > div .listbox{display: none; position: absolute; bottom: 0; left: 0; background:#0e1217; overflow-y:scroll; width:100%; height:15rem; font-size:1.6rem; color:#fff;}
.listbox > a{position: relative; color: #fff; display: block; padding: 1rem 2rem; font-size: 1.6rem; background: #121212;}
.listbox > ul li a{background: #000;  border-bottom:1px dashed rgba(255,255,255,0.3);}
.listbox a span{display: block; position: absolute; text-indent: -9999px; background: url('/sjur/img/layout/close_2.png') no-repeat center right; width: 12px; height: 12px; right: 12px; top: 50%; transform: translateY(-50%);}

@media all and (max-width: 970px) {
    #footer .wrap{padding: 30px 0; display: block;}
    #footer .wrap .left{width: 100%; text-align: center;}
    #footer .wrap .left .f_info{padding-top: 8px; font-size: 1.6rem;}
    #footer .wrap .left .f_info address div{display: inline-block;}
    #footer .wrap .left .f_link{display: inline-block; }
    #footer .wrap .left .f_link ul li:last-child{padding-right: 0;}
    #footer .wrap .left .f_link ul li a{font-size: 1.6rem;}
    #footer .wrap .f_site{display: flex; justify-content: center; width: 100%; gap: 3px; margin-bottom: 30px;}
    #footer .wrap .f_site > div{width: 46%; margin-bottom: 0;}
    #footer .wrap .f_site .arrow2{font-size: 16px; font-weight: 400;}
}

@media all and (max-width: 480px) {
    #footer .wrap .left .f_link ul li{padding-right: 25px;}
    #footer .wrap .left .f_link ul li a{font-size: 1.5rem;}
    #footer .wrap .left .f_link ul li a::after{right: -15px;}
    #footer .wrap .left .f_info{font-size: 1.5rem;}
    #footer .wrap .f_site > div a{padding: 1.3rem 2rem; }
}