@charset "utf-8";
/* ================================================================== */
/* Name	: main.css
/* Script : main style CSS
/* Author : Design Geulggol
/* Date	: 2018-07-24
/* ================================================================== */


/* ==========================================================================
   Parallax Scroll
   ========================================================================== */

.no-js {
    padding:0;
}

.no-js section {
    opacity: 1;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
}

main {
    overflow-x: hidden;
    max-width:1460px;
    margin:0 auto;
    background:#fff;
    min-height:100%;
    display:block;
}

#preload {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.hsContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.hsContent {
    max-width: 700px;
    position: absolute;
    left: 50%;
    top: 50%;
}
.hsContent h2  {
    color: #fff8de;
    background-color: rgba(0,0,0,0.5);
    padding: 10px 5px;
    font-size: 35px;
    line-height: 38px;
    margin-bottom: 12px;
}


/* navigation */
.sticky {
    position: fixed !important;
    top: 0 !important;
    width: 100%;
    z-index:99999999;
    background:#f67476;
    padding:.8rem 0 1rem 0;
}

.nav_pc { display:none; }

#gnb_mo { display:none; }

.gnb_mo_btn {
    position:absolute;
    right:0;
    top:18px;
    z-index:9999;
}
.gnb_mo_list {
    position:fixed;
    right:-300px;
    top:0;
    width:300px;
    height:100%;
    background:#00a1e9;
    z-inded:9990;
}

.gnb_mo_list ul { padding:70px 30px 20px 30px; }
    .gnb_mo_list ul li { font-size:1.5rem; margin-bottom:15px; }
        .gnb_mo_list ul li a { color:#fff; }

.gnb_mo_list ul.multi_set   { padding:0 30px;}
    .gnb_mo_list ul.multi_set li    { width:20%; margin-right:5%; float:left; }
    .gnb_mo_list ul.multi_set li:last-child { margin-right:none; }


.nav_pc ul li.multi_language    { font-size:12px; }
.nav_pc ul li.multi_language img    { width:30px; }
.nav_pc ul li.language_kor      { margin-left:60px; margin-right:15px; }

/* main visual */
#main_visual_PC { position:relative; display:none; }
    #main_visual_PC h1 { width:100%; top:35%; left:0; text-align:center; font-family:'NotoSansMedium'; font-size:4rem; line-height:120%; letter-spacing: 2rem; color:#fff; display:block; position:absolute; z-index:999999; transform:skew(-20deg, 0deg); }

#main_visual_Mobile { position:relative; display:block; }
    #main_visual_Mobile h1 { width:100%; top:35%; left:0; text-align:center; font-family:'NotoSansMedium'; font-size:3rem; line-height:120%; letter-spacing: .5rem; color:#fff; display:block; position:absolute; z-index:999999; transform:skew(-20deg, 0deg); }


/* our story */
#our_story  { text-align:center; margin-top:60px; padding-bottom:3rem; background:url('/share/images/our_story_bg.jpg') no-repeat left bottom; background-attachment:fixed; }
#our_story:before   { content:""; width:100%; height:60px; background:#fff; transform:skew(0deg, -3deg); display:block; }
    #our_story article { margin-top:-30px; }
        #our_story article header { width:70%; text-align:center; background:url('/share/images/our_story_header_bg.jpg') no-repeat center 1px; padding:.6rem 0 1.8rem 0; margin:10px auto 2rem auto; background-size:100%;  }
            #our_story article header h1    { font-family:'NotoSansMedium'; font-size:1.2rem; text-shadow: 1px 1px #a3a3a3; }
        #our_story article dl dt { font-family:'NotoSansMedium'; font-size:1.5rem; color:#f6af1e; margin:2rem 0; line-height:100%; }
        #our_story article ul   { display:none; }
            #our_story article ul li span { display:block; }

    /* kkomomshoe collection */
#slide-3    { height:650px !important; color:#fff; }
    #slide-3 .bcg { background-image:url('/share/images/beam_collection_bg.jpg'); }
    #slide-3 .hsContent { width:100%; text-align:center; top:80px; left:0; max-width:100%; }

    #slide-3 h1 { font-family:'NotoSansMedium'; font-size:2rem; text-align:center; }
        #slide-3 h1 span    { font-size:1rem; }
    #slide-3 .beam_collection_content   { color:#ffffff; margin-top:3rem; margin-bottom:3rem; }
    #slide-3 .beam_collection_btn   {  }
        #slide-3 .beam_collection_btn a { background-color: #00c73c; font-family:'NotoSansRegular'; font-size:.97rem; color:#ffffff; padding:10px 15px;  /*font-family:'NotoSansRegular'; font-size:.97rem; border:2px solid #00c73c; color:#00c73c; padding:10px 15px;*/ }


/* kkomomshoes_detail */
#kkomomshoes_detail { background:#000; color:#fff; padding:20px 10px; }
    #kkomomshoes_detail div.tab { margin-bottom:2rem; }
    #kkomomshoes_detail div.tab ul { width:100%; margin:0 auto; }
    #kkomomshoes_detail div.tab ul li   { width:48%; text-align:right; margin-right:2%; float:left; border-bottom:2px solid #f4ea0f; padding:.5rem 0; opacity:.5; }
    #kkomomshoes_detail div.tab ul li.active    { opacity: 1; }
        #kkomomshoes_detail div.tab ul li.duckbeam-wrap    { border-bottom:2px solid #f67476; }
        #kkomomshoes_detail div.tab ul li.duckbeam-wrap a:after  { background:url('/share/images/duck_beam_icon.svg') no-repeat bottom left; }
        #kkomomshoes_detail div.tab ul li.duckbeam-wrap a, #kkomomshoes_detail div.tab ul li.duckbeam-wrap a:hover { color:#f67476; }

        #kkomomshoes_detail div.tab ul li.sneakersbeam-wrap    { border-bottom:2px solid #f6413b; }
        #kkomomshoes_detail div.tab ul li.sneakersbeam-wrap a:after  { background:url('/share/images/sneaker_beam_icon.svg') no-repeat bottom left; }
        #kkomomshoes_detail div.tab ul li.sneakersbeam-wrap a, #kkomomshoes_detail div.tab ul li.sneakersbeam-wrap a:hover { color:#f6413b; }
        #kkomomshoes_detail div.tab ul li:last-child    { margin-right:0; }
        #kkomomshoes_detail div.tab ul li a, #kkomomshoes_detail div.tab ul li a:hover  { color:#f4ea0f; }

        #kkomomshoes_detail div.tab ul li a { font-family:'NotoSansRegular'; font-size:1.1rem; display:block;  }
        #kkomomshoes_detail div.tab ul li a:after  { content:""; width:30px; height:30px; display:inline-block; background:url('/share/images/banana_beam_icon.svg') no-repeat bottom left; background-size:100%; margin-left:10px; }


    div.kkomomshoes_product { position: relative; }
    div.kkomomshoes_product div.img_animaition { text-align:center; }
    div.bananabeam_color_chip   {  }
        div.bananabeam_color_chip ul li { width:25%; float:left; margin-bottom:2rem; }
        div.bananabeam_color_chip ul li a   { font-size:.95rem; line-height:120%; text-align:center; display:block; }
        div.bananabeam_color_chip ul li a:before { content:""; width:50px; height:50px; display:block; border-radius:50%; margin:0 auto 5px auto; }
        div.bananabeam_color_chip ul li:first-child a, div.bananabeam_color_chip ul li:first-child a:hover { color:#fdbb34; }
        div.bananabeam_color_chip ul li:first-child a:before    { background:#fdbb34; }
        div.bananabeam_color_chip ul li:nth-child(2) a, div.bananabeam_color_chip ul li:nth-child(2) a:hover { color:#5dbb8a; }
        div.bananabeam_color_chip ul li:nth-child(2) a:before    { background:#5dbb8a; }
        div.bananabeam_color_chip ul li:nth-child(3) a, div.bananabeam_color_chip ul li:nth-child(3) a:hover { color:#f777a4; }
        div.bananabeam_color_chip ul li:nth-child(3) a:before    { background:#f777a4; }
        div.bananabeam_color_chip ul li:last-child a, div.bananabeam_color_chip ul li:last-child a:hover { color:#ebed68; }
        div.bananabeam_color_chip ul li:last-child a:before    { background:#ebed68; }

        div.duck_chip ul li:first-child a, div.duck_chip ul li:first-child a:hover  { color:#f6413b; }
        div.duck_chip ul li:first-child a:before { background:#f6413b; }
        div.duck_chip ul li:nth-child(2) a, div.duck_chip ul li:nth-child(2) a:hover  { color:#ebed68; }
        div.duck_chip ul li:nth-child(2) a:before { background:#ebed68; }
        div.duck_chip ul li:nth-child(3) a, div.duck_chip ul li:nth-child(3) a:hover  { color:#0082cb; }
        div.duck_chip ul li:nth-child(3) a:before { background:#0082cb; }
        div.duck_chip ul li:last-child a, div.duck_chip ul li:last-child a:hover  { color:#fff; }
        div.duck_chip ul li:last-child a:before { background:#000; border:1px solid #333; }

        div.sneakers_chip ul li:first-child a, div.sneakers_chip ul li:first-child a:hover  { color:#fff; }
        div.sneakers_chip ul li:first-child a:before { background:#fff; }
        div.sneakers_chip ul li:nth-child(2) a, div.sneakers_chip ul li:nth-child(2) a:hover  { color:#f777a4; }
        div.sneakers_chip ul li:nth-child(2) a:before { background:#f777a4; }
        div.sneakers_chip ul li:nth-child(3) a, div.sneakers_chip ul li:nth-child(3) a:hover  { color:#f6413b; }
        div.sneakers_chip ul li:nth-child(3) a:before { background:#f6413b; }
        div.sneakers_chip ul li:last-child a, div.sneakers_chip ul li:last-child a:hover  { color:#fff; }
        div.sneakers_chip ul li:last-child a:before { background:#000; border:1px solid #333; }

    .kkomomshoes_imagecut img   { width:100%; }
    .kkomomshoes_imagecut div   { margin-bottom:10px; }


/* 기타섹션 */

.etc_section    { padding:80px 20px; }
.etc_section article header { margin-bottom:4rem; }
.etc_section article header h1 { font-family:'NotoSansMedium'; font-size:1.8rem; text-align:center; padding-top:27px; }
/* .etc_section article header h1:before    { width:47px; height:95px; content:""; display:block; border:2px solid #fbba34; position:absolute; top:0; left:50%; margin-left:-25px;  } */
.etc_section article header h1 span { font-family:'NotoSansRegular'; font-size:1rem; }
.etc_section article header h1 span:before  { content:""; width:60px; height:1px; background:#000; display:block; margin:0 auto; }

#contact_us article header h1 span:before { width:180px; }

#map_wrap ul    { font-family:'NotoSansRegular'; font-size:.95rem; }
#map    { width:100%; height:500px; border:1px solid #d1d1d1; }
#contact    { text-align:right; }
#contact input[type=text],#contact textarea { font-size:1rem; }
#contact input[type=text] { width:100%; border-bottom:1px solid #d1d1d1; margin-bottom:20px; }
#contact textarea   { width:100%; height:248px; }
#contact button { font-family:'NotoSansRegular'; font-size:1rem; border:1px solid #000; padding:.8rem 1.2rem; margin-top:2rem; }


/* movie */
#movie  { background:#00a1e9; }
#movie article header h1   { color:#fff; }
#movie article header h1 span:before { background:#fff; }
.pr_movie_wrap {
    margin-top: 25px;
}
.pr_movie_wrap .pr_movie {
    width: 100%;
    float: none;
}

.pr_movie img   { cursor:pointer; }


/* sns */

#sns { padding-bottom:0; }

#sns ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
    -ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#sns ul li { margin-bottom:20px; }


    /* copyright */
#copyright { font-family:'NotoSansRegular'; font-size:.95rem; color:#fff; text-align:center; padding:3em 0; }


/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   mobile만
   ========================================================================== */

@media only screen and (max-width: 767px) {
    #slide-3 .bcg { background-image:url('/share/images/beam_collection_bg_mobile.jpg'); }
}

/* ==========================================================================
   tablet 이상
   ========================================================================== */

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

    /* main visual */
    #main_visual_PC { display:block; }
    #main_visual_Mobile { display:none; }
    #main_visual_PC h1 { top:25%; }

    /* our story*/
    #our_story  { text-align:center; padding-bottom:7rem; margin-top:-50px; }
    #our_story:before   { height:100px; }
    #our_story article { margin-top:-30px; }

    #our_story article header { width:100%; text-align:center; background:url('/share/images/our_story_header_bg.jpg') no-repeat center 1px; padding:1.2rem 0 1.8rem 0; margin:10px 0 2rem 0;  }
    #our_story article header h1 { font-size:2rem; }
    #our_story article dl dt { font-size:3rem; margin:4rem 0; }

    #our_story article ul   { padding:0 10%; margin-top:5rem; display:block; }
        #our_story article ul li    { width:28%; margin-right:8%; float:left; }
        #our_story article ul li:before { content:""; width:50%; height:100px; display:block; position:relative; margin:0 auto 2rem auto; background:url('/share/images/our_story_icon02.svg') no-repeat center; }
        #our_story article ul li:first-child:before { background:url('/share/images/our_story_icon01.svg') no-repeat center; }
         #our_story article ul li:last-child:before { background:url('/share/images/our_story_icon03.svg') no-repeat center; }
        #our_story article ul li:last-child { margin-right:0; }


    /* beam collection */
    #slide-3    { height:844px !important; }
        #slide-3 .beam_collection_content   { text-align:left; max-width:50%; margin-left:45%; margin-top:8rem; margin-bottom:3rem; }


    /* kkomomshoes_detail */
    #kkomomshoes_detail { padding:80px 10px; }
    #kkomomshoes_detail div.tab ul { width:80%; }
    #kkomomshoes_detail div.tab ul li   { width:32%; margin-right:2%; }
    #kkomomshoes_detail div.tab ul li:last-child   { margin-right:0; }
    #kkomomshoes_detail div.tab ul li a:after  { content:""; width:40px; height:40px; }
    #kkomomshoes_detail { padding:80px 40px; }
    #kkomomshoes_detail div.tab ul { width:50%; }
    .kkomomshoes_imagecut { position:relative; }



    /* sns */

    #sns ul li { width:23.94%; margin:0 1.4% 1.4% 0; /* float:left; */ }
    #sns ul li:nth-child(4n+0) { margin-right:0; }

    /* contact us */

    #map_wrap, #contact { float:left; }

    #map_wrap   { width:52.11%; margin-right:1.40%; }
    #contact    { width:35.21%; }
}

/* ==========================================================================
   PC
   ========================================================================== */

@media only screen and (max-width: 1023px) {
    #gnb_mo    { font-family:'NotoSansMedium'; display:block; position:fixed; padding:10px 0; background:#f67476; z-index:99999999; width:100%; }
    #gnb_mo > ul { max-width:1460px; margin:0 auto; padding:0 20px; }
    #gnb_mo > ul li  { margin-right:3%; float:left; }
    #gnb_mo > ul li:first-child a { padding-top:0; }
    #gnb_mo > ul li:first-child   { margin-right:10%; }
    #gnb_mo > ul li:last-child { margin-right:0; }
    #gnb_mo > ul li a { padding-top:20px; display:block; }
    #gnb_mo > ul li a, .nav ul li a:hover    { color:#fff; }
    #gnb_mo > ul li:first-child img   { width:100px; }
}


@media only screen and (min-width: 1024px) {

    .nav_pc    { font-family:'NotoSansMedium'; display:block; position:absolute; top:30px; z-index:99999999; width:100%; }
    .nav_pc ul { max-width:1460px; margin:0 auto; padding:0 20px; }
    .nav_pc ul li  { margin-right:3%; float:left; }
    .nav_pc ul li:first-child a { padding-top:0; }
    .nav_pc ul li:first-child   { margin-right:10%; }
    .nav_pc ul li:last-child { margin-right:0; }
    .nav_pc ul li a { padding-top:20px; display:block; }
    .nav_pc ul li a, .nav ul li a:hover    { color:#fff; }
    .nav_pc ul li:first-child img   { width:120px; }

    /* movie */
    .pr_movie_wrap {
        margin-top: 45px;
        position: relative;
    }
    .pr_movie_wrap .pr_movie {
        width: 56.5%;
        position: relative;
        margin:0 auto;
    }


}

@media only screen and (min-width: 1200px) {

    /* kkomomshoes_detail */
    #kkomomshoes_detail div.tab ul { width:45%; }

}

@media only screen and (min-width: 1440px) {

    /*common*/
    .no-js {
        padding:70px 0;
    }

    .nav_pc    { top:100px; }
    .nav_pc ul { padding:0 87px; }
    nav_pc ul li  { margin-right:5%; }

    #main_visual_PC h1 { top:35%; }

    .kkomomshoes_imagecut div { float:left; }
    .kkomomshoes_imagecut .kkomomshoes_description  { width:39.68%; font-size:.9rem; margin-right:1.58%; margin-bottom:1.58%; }
    .kkomomshoes_imagecut .kkomomshoes_img01  { width:28.57%; margin-right:1.58%; margin-bottom:1.58%; }
    .kkomomshoes_imagecut .kkomomshoes_img02  { width:28.49%; margin-bottom:1.58%; float:right; }
    .kkomomshoes_imagecut .kkomomshoes_img03  { width:69.84%; margin-right:1.58%; margin-bottom:1.58%; }
    .kkomomshoes_imagecut .kkomomshoes_img04  { width:32.3%; margin-right:1.58%; }
    .kkomomshoes_imagecut .kkomomshoes_img05  { width:32.3%; margin-right:1.58%; }
    .kkomomshoes_imagecut .kkomomshoes_img06  { width:32.23%; }


    /* kkomomshoes_detail */
    div.bananabeam_color_chip   { position:absolute; z-index:999; top:50px; right:0px; }
    div.bananabeam_color_chip ul li { width:100%; margin-bottom:20px; float:none; }

}