/*CSS Document*/
* { margin: 0 auto; padding: 0; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a{ display:inline-block; text-decoration:none !important; }

.visual, aside, main, footer { width: 100%; position: relative; float: left; }

/* login-popup */
.login-popup-wrap{ width:100%; background:rgba(0, 0, 0, 0.5); position:absolute; left:0; top:0; z-index:-1; opacity:0; }
.login-popup-wrap .login-popup{ max-width:389px; width:100%; height:486px; border-radius:5px; background:#fff; position:absolute; left:50%; top:15%; transform:translateX(-50%); }
.login-popup-wrap .login-popup .close{ width:100%; text-align:right; padding:14px 14px 0 0; }
.login-popup-wrap .login-popup .close a{ padding:5px; }
.login-popup-wrap .login-popup p.title{ width:100%; text-align:center; font-size:30px; font-weight:bold; margin:19px 0 70px; }
.login-popup-wrap .login-popup div{ text-align:center; }
.login-popup-wrap .login-popup .user{ margin-bottom:25px; }
.login-popup-wrap .login-popup .user img{ width:19px; height:21px; }
.login-popup-wrap .login-popup .user input{ width:265px; height:40px; border:none; background:none; border-bottom:1px solid #cbcacb; padding-left:10px; }
.login-popup-wrap .login-popup .pw img{ width:21px; height:21px; }
.login-popup-wrap .login-popup .pw input{ width:265px; height:40px; border:none; background:none; border-bottom:1px solid #cbcacb; padding-left:10px; }
.login-popup-wrap .login-popup .submit{ margin-top:30px; }
.login-popup-wrap .login-popup .submit input{ width:289px; height:46px; background:#ea8201; color:#fff; font-size:20px; border:none; cursor:pointer; }
.login-popup-wrap .login-popup .find-user{ text-align:center; margin-top:20px; }
.login-popup-wrap .login-popup .find-user a{ font-size:12px; }
.login-popup-wrap .login-popup .popup-footer{ position:absolute; left:0; bottom:0; width:100%; height:56px; border-top:2px solid #cccbcb; text-align:center; line-height:54px; }
.login-popup-wrap .login-popup .popup-footer p{ font-size:14px; color:#191813; display:inline-block; }
.login-popup-wrap .login-popup .popup-footer a{ color:#c6a26b; font-size:14px; margin-left:5px; text-decoration:underline; }

/* header */
header{ width:100%; min-height:100px; position:absolute; z-index:999; left:0; top:0; }

/*LOGO*/
.logo { display: inline-block; }
.logo img { border: none; display: block; width:145px; height:116px; }

/*NAVIGATION*/
nav.container{ max-width:1200px; width:100%; padding:0; }
nav .navigation { float: right; }
nav .navigation .toggleNavigation{ display:none; }
nav .navigation .menu { float: right; }
nav .navigation .menu li { position: relative; }
nav .navigation .menu li.login-out, nav .navigation .menu li.user-nickname { margin-left: 30px; }
nav .navigation .menu li.user-nickname { font-weight:bold; }
nav .navigation .menu a { color: #ffffff; }
nav .navigation .menu .item { display: inline-block; padding:0 15px; }
nav .navigation .menu > .item:nth-of-type(3) ul{ width:500px; }
nav .navigation .menu .item > a { height: 80px; line-height: 80px; display: block; font-weight: 600; color: #333; font-size:0.95em; text-transform:uppercase; }
nav .navigation .menu .item:hover .submenu { display: block; }
nav .navigation .menu .item .submenu { width: 200px; line-height: 1.2em; position: absolute; left: 0; background: #1c2b37; display: none; }
nav .navigation .menu .item .submenu.submenu-lg { width: 500px; }
nav .navigation .menu .item .submenu > li a { font-size: 0.85em; display: block; }
nav .navigation .menu .item .submenu > li > a { padding: 10px 8px; }
nav .navigation .menu .item .submenu > li > a:hover { background: #2c363e; }
nav .navigation .menu .item .submenu > li:hover .submenu-2 { top: 0; left: 100%; position: absolute; display: block; }
nav .navigation .menu .item .submenu > li .submenu-2 {
    width: 100%;
    display: none;
}
nav .navigation .menu .item .submenu > li .submenu-2 > li {
    background: #5f6f7b;
}
nav .navigation .menu .item .submenu > li .submenu-2 > li > a {
    padding: 10px 8px;
}
nav .navigation .menu .item .submenu > li .submenu-2 > li > a:hover {
    background: #90a4b3;
}

/* toggleMenu */
.toggleMenu{ width:100%; height:50px; background:#222; display:none; }

/* main-slide */
.main-slide {
    width:100%;
    height:600px;
    overflow:hidden;
    position:relative;
}

.main-slide__list {
    width:500%;
    height:inherit;
    position:relative;
    font-size:0;
}

.main-slide__list-item {
    width:20%;
    height:inherit;
    position:relative;
    display:inline-block;
    vertical-align:top;
}

.main-slide__list-item-img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.main-slide__box--wrap {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    max-width:1600px;
    width:100%;
    height:200px;
    z-index:200;
}

.main-slide__box {
    max-width:637px;
    width:100%;
    height:inherit;
    float:right;
    background:#017DC3;
    padding:19px 0 19px 32px;
    font-size:0;
    position:absolute;
    right:0;
    bottom:0;
    opacity:0;
    z-index:10;
}

.main-slide__box:first-child {
    opacity:1;
}

.main-slide__box-title {
    font-size:40px;
    line-height:1.2em;
    margin-bottom:24px;
    font-weight:bold;
    color:#fff;
}

.main-slide__box-arrow {
    display:inline-block;
    position: relative;
    z-index:200;
}

.main-slide__box-arrow--left, 
.main-slide__box-arrow--right {
    width:62px;
    height:70px;
    background:#005789;
    font-size:40px;
    color:#fff !important;
    text-align:center;
    line-height:70px;
    font-family:'Batang';
}

.main-slide__box-arrow--right {
    margin-left:10px;
}

.main-slide__box-link {
    width:199px;
    height:48px;
    text-align:center;
    line-height:46px;
    border:1px solid #fff;
    font-size:15px;
    font-weight:bold;
    text-transform:uppercase;
    color:#fff;
    margin-left:112px;
}

.main-slide__dot {
    position:absolute;
    left:0;
    bottom:73px;
    width:100%;
    text-align:center;
    position:relative;
    z-index:100;
}

.main-slide__dot-list {
    font-size:0;
}

.main-slide__dot-list-item {
    width:13px;
    height:13px;
    border-radius:100%;
    background:rgba(255, 255, 255, 0.75);
    margin:0 5px 0 4px;
    display:inline-block;
    cursor:pointer;
}

.main-slide__dot-list-item.active {
    background:#017dc3;
}

/* banner1 */
.banner1 {
    max-width:1600px;
    width:100%;
    height:450px;
    font-size:0;
    margin:100px auto 0;
}

.banner1-left,
.banner1-right {
    width:50%;
    height:inherit;
    display:inline-block;
    vertical-align:top;
}

.banner1-left {
    padding:0 20px;
}

.banner1-left__title {
    border-bottom:1px solid #333;
    padding-bottom:20px;
    font-size:30px;
    margin-bottom:10px;
}

.banner1-left__more-btn {
    font-size:14px;
    color:#333;
    float:right;
    margin-top:12px;
}

.banner1-left__list {
    margin-top:20px;
    padding:0 5px;
}

.banner1-left__list-item {
    margin-bottom:20px;
    font-size:16px;
    width:100%;
    color:3333;
}

.banner1-left__list-item-link {
    width:100%;
    color:#333;
}

.banner1-left__list-item-date {
    float:right;
    font-size:13px;
    color:#999;
}

.banner1-right__youtube {
    width:100%;
    height:inherit;
}

/* banner2 */
.banner2 {
    max-width:1600px;
    width:100%;
    font-size:0;
    position:relative;
    margin:0 auto;
}

.banner2-left {
    max-width:66.66%;
    width:100%;
    height:750px;
    display:inline-block;
    background:url('../images/csm_sportswear_e529fc5895.jpg') 50% 50% no-repeat;
    background-size:cover;
}

.banner2-right {
    max-width:33.33%;
    width:100%;
    height:750px;
    display:inline-block;
    background:url('../images/csm_TT_Home_e2412db83b.jpg') 50% 50% no-repeat;
    background-size:cover;
}

.banner2-box {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    max-width:800px;
    width:100%;
    min-height:295px;
    padding:30px;
    background:#017dc3;
}

.banner2-box__title {
    font-size:40px;
    color:3fff;
    line-height:48px;
    margin-bottom:30px;
    color:#fff;
}

.banner2-box__content {
    color:#fff;
    margin-bottom:1rem;
    font-size:18px;
    font-weight:300;
    line-height:1.5;
}

.banner2-box__link-btn {
    width:199px;
    height:48px;
    border:1px solid #fff;
    text-align:center;
    line-height:46px;
    position:absolute;
    right:30px;
    bottom:30px;
    color:#fff;
    font-size:15px;
    text-transform:uppercase;
    font-weight:bold;
}

/*CONTENTS*/
#products{ min-height:385px; }
#products > .container{ overflow:hidden; max-width:1200px; width:100%; padding:0; }
#products > .container > .row{ position:relative; margin:0; }
#products > .container > .row .product{ float:left; margin:0 10px; }
.product .img {
    width: 100%;
    max-height: 200px;
	height:100%;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.product .img img {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    object-fit: cover;
}
.product p{ margin-bottom:10px; }

/*FOOTER*/
footer {
    padding: 60px 0;
    background: #1c2b37;
}
footer a img{ width:140px; }

/* event-popup */
.event-popup{ position:absolute; z-index:9999; background:#222; top:70px; left:250px; }
.event-popup img{ max-width:350px; }
.event-popup .popup-footer{ padding:0 10px; height:40px; line-height:40px; }
.event-popup .popup-footer a{ color:#fff; }
.event-popup .popup-footer a:last-child{ float:right; }

@media screen and (max-width:900px){
	/* header */
	header.main{ text-align:center; }
}

@media screen and (max-width:768px){
    header {
        position:static;
        height:auto;
    }

	/* navigation */
	nav .navigation{ float:none; }
	nav .navigation .menu{ display:none; }
	nav .navigation .toggleMenu{ display:block; margin:30px 0 0; }
	nav .navigation .toggleMenu li{ display:inline-block; height:50px; line-height:50px; margin:0 20px; color:#fff; }
	nav .navigation .toggleMenu li a{ color:#fff; }
	nav .navigation .toggleMenu li img{ width:50px; }

	/* toggleNavigation */
	.toggleNavigation{ margin-top:-10px; }
	.toggleNavigation ul{ width:100%; }
	.toggleNavigation ul li{ width:100%; min-height:50px; background:#222; text-align:center; border-top:1px solid #ccc; }
	.toggleNavigation ul li a{ color:#fff; width:100%; height:50px; line-height:50px; }
	.toggleNavigation ul li ul{ display:none; }
	.toggleNavigation ul li ul > li{ background:#8d8d8d; }
	.toggleNavigation ul li ul > li:not(:last-child){ border-bottom:1px solid #222; }
	.toggleNavigation > ul > li > ul > li > ul li{ background:#cacaca; }

	.toggleNavigation > ul > li:hover > ul{ display:block; }
    .toggleNavigation > ul > li > ul > li:hover > ul{ display:block; }
    
    /* banner1 */
    .banner1 {
        height:auto;
    }

    .banner1-left {
        margin-bottom:30px;
    }

    .banner1-left,
    .banner1-right {
        width:100%;
        height:450px;
    }

    /* banner2 */
    .banner2 {
        height:auto;
    }

    .banner2-left,
    .banner2-right {
        height:400px;
    }

    .banner2-box {
        position:static;
        transform:translateX(0);
    }
}

@media screen and (max-width:636px) {
    .main-slide {
        height:600px;
    }

    .main-slide__list {
        height:400px;
    }
}

@media screen and (max-width:500px) {
    .main-slide {
        height:560px;
    }

    .main-slide__list {
        height:300px;
    }

    .main-slide__box--wrap {
        height:260px;
    }

    .main-slide__box-arrow {
        display:block;
    }

    .main-slide__box-link {
        margin:30px 0 0 0;
    }

    .banner2-left,
    .banner2-right {
        max-width:100%;
    }
    
    .banner2-box__link-btn {
        position:static;
    }
}