@charset "utf-8";

@import url('/design/common/css/SUIT.css');
@import url('/design/common/css/esamanru.css');


::-webkit-scrollbar {width:18px;}
::-webkit-scrollbar-thumb {border:5px solid #fff; border-radius:20px; background:#ccc;}
::-webkit-scrollbar-track {background:#fff; border-radius:20px;}

body {background:#fff; font-family:'SUIT', sans-serif; font-weight:400; font-size:18rem; color:#1c1c1c; line-height:1.7; letter-spacing: -0.3px;}
input, button, textarea, select {font-family:'SUIT', sans-serif; font-weight:400; font-size:17rem; color:#1c1c1c; line-height:1.7; border-radius:0; vertical-align:middle; border:1px solid #ddd;}
button, input[type="submit"] {cursor:pointer;}
h1, h2, h3, h4, h5 {font-size:18rem; font-weight:400; letter-spacing:-1rem; line-height:1.5;}
a {color:#1c1c1c;}

/*wrap*/
.wrap{width:100%; max-width:1540rem; margin:0 auto; padding: 0 20rem;}
.wrap02{width: 100%; max-width: 1920rem; margin: 0 auto;}

@media all and (max-width:1640px){
    .wrap{max-width:100%; padding:0 40rem;}
}
@media all and (max-width:1240px) {
    html {font-size:0.95px;}
    .wrap{padding:0 20rem;}
}
@media all and (max-width:768px) {
    html {font-size:0.9px;}
}

#header h1 { display:flex; align-items:center; margin-left:20rem; }
#header h1 a { position:relative; display:flex; align-items:center; color:#fff; font-weight:600; gap:10rem; }
#header h1 a:first-of-type::before {content:''; display:block; width:90rem; height:45rem; background:url('/design/icevalley/img/layout/logo.png') no-repeat 0 0/100% auto; }
#header h1 p {float:left;}
#header h1 p:not(.site_name) { font-size:28rem;  }
#header h1 p:not(.site_name) span { display:block; font-size:10rem; color:#a1a1a1; text-transform:uppercase; font-weight:400; letter-spacing:0.3rem; }
#header h1 p.site_name { position:relative; font-size:22rem; padding-left:30rem;  }
#header h1 p.site_name span { display:block; font-size:11rem; text-transform:uppercase; opacity:0.6; }
#header h1 p.site_name::before { content:''; position:absolute; left:15rem; top:calc(50% - 11rem); width:1px; height:22rem; background:#fff; opacity:0.5;}


#header {position: absolute; top: 0; width: 100%; height: 88rem; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap:30rem; }
#header a.go_usc { display:flex; color:#fff; align-items:center; gap:10rem;  }
#header a.go_usc::after { content:''; display:block; width:12rem; height:12rem; background:url('/design/common/img/blank_wh.png') no-repeat center/cover; }

#pc_nav { flex-grow:1; text-align:center; }
#pc_nav .depth1 {display:inline-block;}
#pc_nav .depth1 > li {display: inline-block; position: relative;}
#pc_nav .depth1 > li > a{height: 88rem; display: block; color: #fff; font-size: 22rem; font-weight: 600; padding: 25rem 38rem 0; position: relative;}

#pc_nav .depth1 > li > a::before{position: absolute; content: ""; left: 50%; bottom: 0; width: 0; height: 3rem; background: #004d9d; transition: all 0.4s; z-index: 100;}
#pc_nav .depth1 > li > a:hover::before /* #pc_nav .depth1 > li > a.active::before */{left: 0; width: 100%;}


#pc_nav .depth2{display: none; position: absolute; top: 87rem; left: 0; width: 100%; text-align: center; padding-top: 20rem; z-index: 199;}

#header.on{background: #fff; border-bottom: 1px solid #000;}
#header.on::before{position: fixed; content: ""; width: 100%; height: 100vh; left: 0; top: 87rem; background: rgba(0, 0, 0, 0.5);}
#header.on h1.logo a {color:#333; }
#header.on h1 p.site_name::before { background:#333; }
#header.on #pc_nav .depth1::before{position: absolute; content: ""; width: 100%; height: 300rem; background: #fff; left: 0; top: 87rem; z-index: 10; border-top: 1px solid #ddd; }
#header.on #pc_nav .depth1 > li > a{color: #1c1c1c;}

#pc_nav .depth2 > li > a {display: block; padding: 15rem 5rem; letter-spacing:-1.5rem; line-height:1.4; transition: all .3s;}
#pc_nav .depth2 > li > a span{position: relative;}
#pc_nav .depth2 > li > a span::before{position: absolute; content: ""; width: 5rem; height: 5rem; top: -7rem; left: -7rem; border-radius: 50rem; background: #004d9d;  opacity: 0; transition: all 0.3s;}
#pc_nav .depth2 > li > a.on,
#pc_nav .depth2 > li > a:hover{color: #004d9d; font-weight: 700;}
#pc_nav .depth2 > li > a.on span::before,
#pc_nav .depth2 > li > a:hover span::before{opacity: 1;}


/* 사이트맵 */
.sitemap{display: block; color: #fff; font-size: 18rem; font-weight: 700; height: 100%; background: #004d9d; padding: 0 47rem;}
.sitemap span{display: block; padding: 27rem 0 0 60rem; position: relative;}
.sitemap span::before{position: absolute; content: ""; left: 0; top: 32rem; background: url('../img/layout/sitemap.png') no-repeat center center / 100%; width: 30rem; height: 20rem;}
.sitemap.mobile{display: none;}


@media (max-width: 1600px) {
    #pc_nav{margin-right: 0;}
}
@media (max-width: 1420px) {
    #header{height: 80rem; gap:20rem;}
    #pc_nav .depth1 > li > a {height: 80rem; padding: 23rem 26rem 0 ; font-size: 20rem; letter-spacing:-2rem;}
    #pc_nav .depth2 > li > a{font-size: 17rem;}
    #header.on::before,
    #header.on #pc_nav .depth1::before{top: 79rem;}
    .sitemap{padding: 0 30rem;}
    .sitemap span{width: 30rem; text-indent: -9999px; padding-left: 0;}
}
@media (max-width: 1023px) {
    #header a.go_usc { flex-grow:1; justify-content:end; }
    #pc_nav{display: none;}
    .sitemap.pc{display: none;}
    .sitemap.mobile{display: block;}
}
@media (max-width: 600px) {
    #header h1 {margin-left:2%;}
    #header h1 p:not(.site_name) {display:none;}
}
@media (max-width: 480px) {
    #header h1 {gap:10rem; }
    #header h1 p.site_name {padding-left:0; font-size:20rem;}
    #header h1 p.site_name::before {display:none;}
    #header h1 a:first-of-type::before {zoom:0.8;}
    #header a.go_usc  {display:none;}
    .sitemap{background: none; padding: 0 20rem;}
    .sitemap span::before{top: 22px;}
}

/* 모바일 내비 */
#m_nav{display: none; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; z-index: 200;}
#m_nav::before{position: absolute; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition: all 0.3s cubic-bezier(0.43, 0.03, 0.21, 1);}
#m_nav nav{position: absolute; max-width: 360rem; width: 100%;height: 100%;top: 0;right:-360rem;background: #004d9d;z-index: 300;overflow-y: auto;}
#m_nav nav .top{padding: 10rem 10rem 24rem; border-bottom: 1px solid #ddd;}
#m_nav nav .top img{width: 258rem;margin-top: 11rem;}
#m_nav nav .depth1 > li > a{display: block; padding: 12rem 15rem;font-size: 19rem; font-weight: 600;color: #fff;border-bottom: 1px dashed rgba(255,255,255,0.6); position: relative;}
#m_nav nav .depth1 > li > a::before{position: absolute; content: ""; border-right: 2px solid #fff; border-bottom: 2px solid #fff; width: 8rem; height: 8rem; transform: rotate(45deg); right: 20rem; top: 21rem;}
#m_nav nav .depth1 > li > a.on{border-bottom: 0; font-weight: 800; text-decoration: underline;}
#m_nav nav .depth1 > li > a.on::before{transform: rotate(226deg); top: 25rem;}

#m_nav nav .depth2{display: none; border-bottom: 2px solid #fff; padding: 10rem; background: #fff;}
#m_nav nav .depth2 li a{display: block; font-size: 17rem; padding:5rem 10rem 5rem 25rem; position: relative;}
#m_nav nav .depth2 li a::before{position: absolute; content: ""; width: 4rem; height: 4rem; border-radius: 50rem; left: 10rem; top: 50%; transform: translateY(-50%); background: #9abbdd; transition: .2s;}
#m_nav nav .depth2 li a.on{font-weight: 700; color: #004d9d; text-decoration: underline;}
#m_nav nav .depth2 li a.on::before{background: #004d9d;}

#m_nav nav .depth1 > li > a.on + .depth2{display: block;}

@media (max-width: 1023px) {
    #m_nav nav h1{gap: 10rem; margin-left: 0;}
    #m_nav nav h1 p:not(.site_name) {display:none;}
    #m_nav nav h1 a:first-of-type::before{zoom: 0.8;}
    #m_nav nav h1 p.site_name{padding-left: 0; font-size: 20rem;}
    #m_nav nav h1 p.site_name::before{display: none;}
}
/*닫기*/
.close{display: block; position: absolute; right: 10rem; top: 24rem; width: 26rem; height: 26rem; text-indent: -9999px;}
.close::before, .close::after{position: absolute;content: "";left: 50%;top: 0;width: 2rem;height: 100%;background: #fff;transform: rotate(45deg);}
.close::after{transform: rotate(-45deg);}


#pc_nav a[target="_blank"] span{display: inline-block; padding-right: 20rem; background: url('../img/layout/blank_bl.png') no-repeat right;}
#pc_nav .depth1 > li > a[target="_blank"] > span{background-image: url('../img/layout/blank_wh.png');}
#header.on #pc_nav .depth1 > li > a[target="_blank"] > span{background-image: url('../img/layout/blank_bl.png');}

#m_nav a[target="_blank"] span{display: inline-block; padding-right: 20rem; background: url('../img/layout/blank_wh.png') no-repeat right;}
#m_nav .depth2 a[target="_blank"] span{background-image: url('../img/layout/blank_bl.png')}

/* 푸터 */
#footer{background: #1c1c1c; color: #fff; margin-top: 80rem;}
#footer > .wrap{position: relative; padding: 50rem 20rem;} 
#footer > .wrap .go_top{display: block; color: #fff; width: 85rem; height: 85rem; background: #0144ac url('../img/layout/top_arrow.png') no-repeat center top 23rem; position: absolute; top: -35rem; right: 20rem; text-align: center; padding-top: 39rem;}
#footer > .wrap > div{display: flex; justify-content: space-between; align-items: flex-end;}


.info_wrap ul li{display: inline-block;}
.info_wrap .info li a{display: block; color: #d5d5d5; margin-right: 20rem;}
.info_wrap .info li:first-child a{font-weight: 700; color: #fff; text-decoration: underline;}
.info_wrap .info li:last-child a{margin-right: 0;}

.info_wrap .address{margin-top: 10rem; color: #d5d5d5;}
.info_wrap .address li:first-child{margin-right: 20rem;}
.info_wrap .copy{font-size: 17rem; color: #fff; opacity: 0.48; margin-top: 23rem; font-weight: 300;}

#footer .logo img{width: 336rem; opacity: 0.4;}


#footer .logo { display:flex; align-items:center; margin-left:20rem; opacity: 0.7;}
#footer .logo a { position:relative; display:flex; align-items:center; color:#fff; font-weight:600; gap:10rem; }
#footer .logo a:first-of-type::before {content:''; display:block; width:90rem; height:45rem; background:url('/design/icevalley/img/layout/logo.png') no-repeat 0 0/100% auto; }
#footer .logo p {float:left;}
#footer .logo p:not(.site_name) { font-size:28rem;  }
#footer .logo p:not(.site_name) span { display:block; font-size:10rem; color:#a1a1a1; text-transform:uppercase; font-weight:400; letter-spacing:0.3rem; }
#footer .logo p.site_name { position:relative; font-size:22rem; padding-left:30rem;  }
#footer .logo p.site_name span { display:block; font-size:11rem; text-transform:uppercase; opacity:0.6; }
#footer .logo p.site_name::before { content:''; position:absolute; left:15rem; top:calc(50% - 11rem); width:1px; height:22rem; background:#fff; opacity:0.5;}


@media (max-width: 960px) {
    #footer > .wrap > div{flex-wrap: wrap; align-items: start;}
    .info_wrap{width: 100%;}
    #footer .logo{margin: 30rem 0;}
    #footer .logo img{width: 300rem;}
}
@media (max-width: 530px) {
    .info_wrap .info li a, .info_wrap .address{font-size: 16rem;}
}
@media (max-width: 480px) {
    #footer .logo{display: none;}
}