@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

.rows{max-width: 1200px; margin: 0 auto;}
/*폰트*/

.rowwwwww {
    font-family: 'Noto Sans KR', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Raleway', sans-serif;
    font-family: 'Dancing Script', cursive;
    font-family: 'Roboto', sans-serif;
}

/*//////////////////*/
.img_render{width:1200px; height:auto;  image-rendering:-webkit-optimize-contrast; transform:translateZ(0);backface-visibility:hidden;}
.m_img_render{width:640px; height:auto;  image-rendering:-webkit-optimize-contrast; transform:translateZ(0);backface-visibility:hidden;}

/*header*/


.header_wrap{width: 100%; margin: 0 auto; height: 104px; position: absolute; top: 0; left: 0; right: 0; z-index: 5; transition: all 0.3s;}
.header{display: flex; align-items: center; justify-content: space-between; max-width: 1800px; width: 100%; margin: 0 auto; height: 100%; box-sizing: border-box; padding: 0 10px;  z-index: 5;}
.header_wrap:hover, .header_wrap.on{background: rgba(17,17,17,0.8);}

.navi{height: 100%;}
.menu{display: flex; align-items: center; width: 875px; justify-content: space-between;}
.menu > li.bigmenu{position: relative;}
.menu > li.bigmenu > a{display: block; color: #fff; font-weight: 500;  line-height: 104px; font-family: 'Noto Sans KR', sans-serif;}
.menu > li.bigmenu:hover > a{color: #4ab9fe;}


.submenu{position: absolute; width: 170px; top: 135px; left: 50%; transform: translateX(-50%); margin: 0 auto; display: none; }
.submenu li{margin-bottom: 20px; text-align: center; font-family: 'Noto Sans KR', sans-serif;}
.submenu li:last-child{margin-bottom: 0;}
.submenu li a{ color: #fff; text-align: center; position: relative; font-family: 'Noto Sans KR', sans-serif; }
.submenu li a::after{position: absolute; bottom: -3px; left: 0; right: 0; margin: 0 auto;  width: 0; height: 1px; background: #fff; box-sizing: border-box; content: "";  transition: all 0.3s; }

.submenu li:hover a::after, .submenu li.on a::after {width: 100%;}

.bg{position: absolute; top: 100px; width: 100%; height: 215px; background-color: rgba(17,17,17,0.8); left: 0; z-index: -1; display: none; border-top: 1px solid #3c3c3c; box-sizing: border-box;}


.sns_mmenu{display: flex; align-items: center; position: relative; z-index: 15;}
.sns_link{}
.sns_link a{margin-right: 20px; display: inline-block; vertical-align: baseline;}

.m_menubtn{width: 34px; height: 27px; position: relative; cursor: pointer;}
.m_btn{width: 100%; height: 1px; background: #fff; position: absolute; transition: all 0.2s; }
.m_btn01{ top: 0; left: 0; right: 0;}
.m_btn02{ top: 50%; transform: translateY(-50%); left: 0; right: 0;}
.m_btn03{bottom: 0; left: 0; right: 0;}





/* m_head */

.mhead_wrap{position:fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 15; display: none;}

.m_header{position: absolute; top: 0; width: 505px; right: -100%; height: 100%; background: rgba(0,0,0,1);}

.m_snsBox{ padding: 0 60px; box-sizing: border-box;}
.m_sns_mmenu{height: 104px; display: flex; align-items: center; justify-content: flex-end;}
/* .m_sns_mmenu{margin-right: 15px;} */


.m_menubtn02.on .m_btn01{transform: rotate(45deg); top: 13px;}
.m_menubtn02.on .m_btn02{opacity: 0;}
.m_menubtn02.on .m_btn03{transform: rotate(-45deg); bottom: 12px;}

.m_sns_menuBox{margin-top: 55px;}
.m_sns_menuBox > ul{}
.m_sns_menuBox > ul > li{margin-bottom: 45px;}
.m_sns_menuBox > ul > li > a{display: block; color: #fff; font-weight: 600; font-family: 'Noto Sans KR', sans-serif; font-size: 22px;}
.m_sns_menuBox > ul > li.on > a{color: #37b0ff;}

.m_sns_SubMenu{width: 100%; padding: 0 30px; box-sizing: border-box; background: #353535; display: none; margin-top: 25px; }
.m_sns_SubMenu li{ margin-bottom: 20px;}
.m_sns_SubMenu li:first-child{padding-top: 35px;}
.m_sns_SubMenu li:last-child{margin-bottom: 0; padding-bottom: 35px;}
.m_sns_SubMenu li a{display: inline-block; color: #fff; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; font-size: 20px; position: relative;}
.m_sns_SubMenu li a::after{position: absolute; bottom: -7px; left: 0; right: 0; margin: 0 auto; text-align: center; transition: all 0.3s; box-sizing: border-box; content:""; width: 0;height: 1px; background: #fff;}

.m_sns_SubMenu li.on a::after , .m_sns_SubMenu li:hover a::after{width: 100%;}

/*pops*/

.headPop{position: fixed; top: 104px; right: 0; z-index: 5;}
.header_pop{width: 60px;}
.pops{width: 100%; height: 270px; color: #fff; position: relative; display: block; transition: all 0.4s;}
.pop01{background: #0095f1;}
.pop02{background: #50565a;}
.pop03{background: #2f363a;}

.pop01:hover{background: #0aa2ff;}
.pop02:hover{background: #393d40;}
.pop03:hover{background: #21272b;}


.pops_text{position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; width: 100%; text-align: center; transform: translateY(-50%);}
.pops_text img{margin-bottom: 13px;}
.pops_text p{writing-mode: vertical-rl; text-align: center; margin: 0 auto;font-weight: 300; font-family: 'Noto Sans KR', sans-serif; letter-spacing: 5px;}

/*footer*/

.footer_wrap{width: 100%; padding: 10px 0; background: #161616;}

.footer{display: flex; align-items: center; justify-content: space-between; max-width: 1800px; margin: 0 auto; }

.f_logo{}
.f_logo img{margin-bottom: 10px; width: 150px;}
.copy{font-size: 11px; color: #fff; opacity: 0.26; }

.footCont{}
.footCont ul{text-align: right; margin-bottom: 10px;}
.footCont ul:last-child{margin-bottom: 0;}
.footCont ul li{display: inline-block; color: #fff;  opacity: 0.4 ;font-weight: 400; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; }
.footCont ul li::after{content: ""; width: 1px; height: 12px; background: #fff; opacity: 0.4; display: inline-block; vertical-align: middle; margin: 0 ; margin: 0 18px; }
.footCont ul li:last-child::after{display: none;}






@media screen and (max-width: 1199px){

    .navi{display: none;}
    .header .sns_mmenu .sns_link{display: none;}

    .header_wrap:hover, .header_wrap.on{background: transparent;}
    .headPop{display: none;}
    .m_header{width: 100%; text-align: center;}
    .pops{height: 84px;}
    /* .pops_text{width: 142px; margin: 0 auto;}
    .pops_text::after{content: ''; display: block; visibility: hidden; clear: both;} */
    .pops_text img{display: none;}
    .pops_text p{
        writing-mode: horizontal-tb; letter-spacing: 0; height: 21px;
        background-position: left top; background-repeat: no-repeat;
    }
    .pop01 .pops_text p{background-image: url('/web/images/common/icon01.png'); width: 106px;}
    .pop02 .pops_text p{background-image: url('/web/images/common/icon02.png'); width: 171px;}
    .pop03 .pops_text p{background-image: url('/web/images/common/icon03.png'); width: 130px;}


    .footer{width: 95%; display: block;}
    .footCont ul li:first-child::after{display: none;}
    .footer > p{margin-top: 10px;}
    .m_img_render{width:640px; height:auto;  image-rendering:-webkit-optimize-contrast; transform:translateZ(0);backface-visibility:hidden;}
}



@media screen and (max-width: 768px){


    .header_wrap{height: 54px;}
    .logo{width: 85px;}
    .logo a img{width: 100%;}
    #m_mainBtn{width: 19px; height: 15px;}
    .m_menubtn{right: 5%;}
    .m_snsBox{padding: 0;}
    .m_header h2{width: 115px; position: absolute; top: 10px; left: 5%;}
    .m_header h2 a img{width: 100%;}
    .m_sns_mmenu{height: 52px;}
    .sns_link a{width: 25px; height: 25px;}
    .sns_link a img{width: 100%;}
    .m_sns_menuBox{margin-top: 35px;}
    .m_sns_menuBox > ul > li{margin-bottom: 24px;}
    .m_sns_menuBox > ul > li > a{font-size: 21px;}
    .m_sns_SubMenu li:first-child{padding-top: 18px;}
    .m_sns_SubMenu li:last-child{padding-bottom: 18px;}
    .m_sns_SubMenu li a{font-size: 18px;}
    .pops{height: 40px;}
    .pops_text p{font-size: 14px;}
    /* header */


    .footer_wrap{padding: 10px 0;}
    .f_logo img{margin-bottom: 0; width: 115px;}
    .footCont ul li{font-size: 10px; font-weight: 200; line-height: 1.2em}
    .footCont ul:last-of-type li{display: block;}
    .footer > p{margin-top: 10px; font-size: 10px;}
    .m_img_render{width:640px; height:auto;  image-rendering:-webkit-optimize-contrast; transform:translateZ(0);backface-visibility:hidden;}
}