@charset "utf-8";

@font-face {
    font-family: 'The Jamsil 4';
    src: url('TheJamsil4Medium.eot');
    src: url('TheJamsil4Medium.eot?#iefix') format('embedded-opentype'),
        url('TheJamsil4Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 5';
    src: url('TheJamsil5Bold.eot');
    src: url('TheJamsil5Bold.eot?#iefix') format('embedded-opentype'),
        url('TheJamsil5Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 6';
    src: url('TheJamsil6ExtraBold.eot');
    src: url('TheJamsil6ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('TheJamsil6ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 1';
    src: url('TheJamsil1Thin.eot');
    src: url('TheJamsil1Thin.eot?#iefix') format('embedded-opentype'),
        url('TheJamsil1Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 2';
    src: url('TheJamsil2Light.eot');
    src: url('TheJamsil2Light.eot?#iefix') format('embedded-opentype'),
        url('TheJamsil2Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 3';
    src: url('TheJamsil3Regular.eot');
    src: url('TheJamsil3Regular.eot?#iefix') format('embedded-opentype'),
        url('TheJamsil3Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    font-family: 'The Jamsil 4';
    color: #333;
    line-height: 1;
    position: relative;
}

header {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    border-bottom: 1px solid #fff;
}

header.on {
    background-color: #fff;
}



header .inner {
    width: 1440px;
    height: 100%;
    line-height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.main_visual .bg_video {
    position: relative;
    width: 100%;
    height: 100%;
}

.main_visual .bg_video::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.main_visual .bg_video video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


header .inner nav .gnb .depth01 {
    font-family: 'The Jamsil 5';
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 55px;
    font-size: 20px;
    color: #fff;
}

header .inner h1 .logo2 {
    display: none;
}

header.on .inner nav .gnb .depth01 {
    color: #333;
}

header .inner h1 .logo1 {
    vertical-align: middle;
}

header.on .inner h1 .logo1 {
    display: none;
}

header.on .inner h1 .logo2 {
    display: block;
}

header .inner>ul li a .search2 {
    display: none;
}

header.on .inner>ul li a .search1 {
    display: none;
}

header.on .inner>ul li a .search2 {
    display: block;
}

header .inner>ul li a .bag2 {
    display: none;
}

header.on .inner>ul li a .bag1 {
    display: none;
}

header.on .inner>ul li a .bag2 {
    display: block;
}

header.on .inner>ul li {
    color: #333;
}

header .inner>ul>li {
    display: inline-block;
    padding-left: 30px;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

header .inner nav .gnb .depth01:hover {
    color: rgb(255, 19, 97);
}



header .gnb .depth02 {
    width: 1920px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 100px;
    left: 0;
    background-color: #fff;
    color: #333;
    justify-content: center;
    border-top: 5px solid #333;
    display: none;
}

header .gnb .dpt23 a {
    display: block;
    width: 100%;

}

header .gnb .depth02 ul {
    padding: 0 100px;
    font-size: 20px;
    font-weight: bold;
}

header .gnb .depth02>ul:hover {
    color: rgb(255, 19, 97);
}


header .gnb .depth02 ul li {
    font-family: 'The Jamsil 2';
    display: flex;
    flex-direction: column;
    line-height: 50px;
    font-size: 16px;
    color: #333;
}

header .gnb .depth02>ul>li:hover {
    color: rgb(255, 19, 97);
}

header .gnb .depth02 {
    display: none;
}

header .gnb .dpt23>a:hover {
    color: rgb(255, 19, 97);
}

header .gnb .dpt23 ul li:hover {
    color: rgb(255, 19, 97);
}

header .gnb .dpt23>ul>li {
    display: inline-block;
}

header .gnb .dpt23 div li {
    padding: 0 20px;
}


/* 👉👉👉👉👉👉👉👉검색창👉👉👉👉👉👉👉👉👉👉 */
header .top_search {
    display: none;
}

header .top_search.on {
    display: block;
    width: 800px;
    height: 500px;
    background-color: #fff;
    color: #333;
    position: relative;
    border: 1px solid #333;
    position: absolute;
    top: 100px;
    right: 0px;
}


header .top_search .inner {
    width: 760px;
    height: 460px;
    padding: 20px;
    line-height: 1;
    display: block;
}

header .top_search .inner .search .text {
    width: 720px;
    height: 40px;
    border: 1px solid #fff;
    border-bottom: 2px solid #333;
    font-size: 18px;
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px;
}


header .top_search .inner .search img {
    position: absolute;
    top: 27px;
    right: 20px;
    cursor: pointer;
}

header .top_search .inner .info {
    width: 760px;
    height: 415px;
    display: flex;
    color: #333;
    position: absolute;
    top: 80px;
    left: 20px;
    margin-top: 10px;
}

header .top_search .inner .info .left {
    width: 50%;
    height: 380px;
    border-right: 1px solid #d7d7d7;
}

header .top_search .inner .info .left .recent {
    display: flex;
    justify-content: space-between;
    font-family: 'The Jamsil 2';
}

header .top_search .inner .info .left .recent div:nth-child(1) {}

header .top_search .inner .info .left .recent div:nth-child(2) {
    color: #d7d7d7;
    text-decoration: underline;
    cursor: pointer;
    padding-right: 20px;
}

header .top_search .inner .info .left p {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 300;
    font-family: 'The Jamsil 3';
}

header .top_search .inner .info .right ul li {
    margin-bottom: 20px;
    padding-left: 20px;
    font-size: 18px;
    font-family: 'The Jamsil 3';
}

header .top_search .inner .info .right ul li:first-child {
    font-family: 'The Jamsil 2';
    font-size: 16px;
}



/* 🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨main🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨 */

.main_visual .title {
    position: absolute;
    top: 586px;
    left: 240px;
    color: #fff;
}

.main_visual .title h2 {
    font-size: 72px;
    font-family: 'The Jamsil 3';
    font-weight: normal;
}

.main_visual .title h2 strong {
    font-family: 'The Jamsil 6';
    font-weight: 600;
}

.main_visual .title p {
    font-size: 48px;
    font-family: 'The Jamsil 3';
    font-weight: normal;
    line-height: 1.6;
}

.main_visual .title .btn a {
    display: block; 
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff; 
    color: #333;
    border-radius: 10px;
    margin-top: 30px; 
}

.main_visual .title .btn a:hover {
    width: 200px;
    background-color: #333;
    color: #fff;
    border-radius: 10px;
    transition: 1s;
}


/* ✨✨✨✨✨NEW✨✨✨✨✨✨ */

.new {
    width: 100%;
    height: 100%;
}

.new .inner {
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 100px 0;
}

.new .inner h3 {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 50px;
}

.new .inner .list {
    display: flex;
    justify-content: space-between;
}

.new .inner .list>div {
    width: 710px;
    height: 891px;
    position: relative;
}

.new .inner .list>div .item h4 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.6;
}

.new .inner .list>div figure {
    height: 100%;
    position: relative;
    text-align: center;
}

.new .inner .list>div figure::before {
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.1);
    transition: 1s;
}


.new .inner .list>div figure img {
    width: 100%;
    height: 100%;
}

.new .inner .list>div .item {
    position: absolute;
    bottom: 63px;
    left: 0;
    width: 100%;
    text-align: center;
}

.new .inner .list>div .item h4 {
    text-align: center;
    color: #fff;
    margin-bottom: 25px;
}

.new .inner .list>div .item p {
    position: absolute;
    bottom: -40px;
    right: 55px;
    color: #fff;
}

.new .inner .list>div .item p:hover {
    border-bottom: #fff solid 2px;
}

.new .inner .list>div .item img {
    width: 538px;
    height: 538px;
}

.new .inner .list>div:hover figure::before {
    background-color: rgba(0, 0, 0, 0.8);
}



/* ✨✨✨✨✨.best✨✨✨✨✨✨✨ */
.best {
    width: 100%;
}

.best .inner {
    width: 1540px;
    margin: 0 auto;
    padding: 100px 0;
}

.best .inner .title {
    display: flex;
    justify-content: space-between;
}


.best .inner .title h3 {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 50px;
}

.best .inner .title p {
    color: #7b7b7b;
}

.best .inner .title p:hover {
    border-bottom: 2px #7b7b7b solid;
}

.best .inner .cont {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.best .inner .cont .left {
    width: 594px;
    height: 803px;
}

.best .inner .cont .left figure {
    width: 490px;
    height: 803px;
}

.best .inner .cont .left figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.best .inner .cont .left .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    color: #fff;
}

.best .inner .cont .left .text p {
    padding: 15px 0 25px 30px;
    font-size: 18px;
}

.best .inner .cont .left .text span {
    padding: 0 0 20px 43px;
    font-size: 18px;
}


.best .inner .cont .right {
    display: flex;
    justify-content: space-between;
    width: 846px;
    height: 803px;
}

.best .inner .cont .right .left_list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.best .inner .cont .right .left_list .on:hover .on2 {
    color: #ff0000;
    font-family: 'The Jamsil 5';
}

.best .inner .cont .right .right_list .on:hover .on2 {
    color: #ff0000;
    font-family: 'The Jamsil 5';
}

.best .inner .cont .right .left_list figure .best_img2 {
    display: none;
}

.best .inner .cont .right .left_list figure:hover .best_img1 {
    display: none;
}

.best .inner .cont .right .left_list figure:hover .best_img2 {
    display: block;
    object-fit: cover;
}

.best .inner .cont .right .left_list>div {
    width: 423px;
    height: 186px;
    display: flex;
}

.best .inner .cont .right .left_list>div p {
    font-size: 14px;
    margin-bottom: 20px;
    margin-right: 15px;
}

.best .inner .cont .right .left_list>div strong {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}


.best .inner .cont .right .left_list>div a>img {
    width: 172px;
    height: 186px;
}

.best .inner .cont .right .left_list>div .text_box {
    font-size: 14px;
    padding: 10px 0 0 30px;
}

.best .inner .cont .right .left_list>div .text_box img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* 베스트아이템 5~8위 */
.best .inner .cont .right .right_list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.best .inner .cont .right .right_list figure .best_img2 {
    display: none;
}

.best .inner .cont .right .right_list figure:hover .best_img1 {
    display: none;
}

.best .inner .cont .right .right_list figure:hover .best_img2 {
    display: block;
}


.best .inner .cont .right .right_list>div {
    width: 423px;
    height: 186px;
    display: flex;
}

.best .inner .cont .right .right_list>div p {
    font-size: 14px;
    margin-bottom: 20px;
    margin-right: 15px;
}

.best .inner .cont .right .right_list>div strong {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}


.best .inner .cont .right .right_list>div a>img {
    width: 172px;
    height: 186px;
}

.best .inner .cont .right .right_list>div .text_box {
    font-size: 14px;
    padding: 10px 0 0 30px;
}

.best .inner .cont .right .right_list>div .text_box img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}



/* ✨✨✨✨✨✨✨골프웨어✨✨✨✨✨✨✨✨✨ */
.golf {
    width: 100%;
}

.golf .inner {
    width: 100%;
    padding: 100px auto;
    position: relative;
}

.golf .inner h3 {
    font-size: 40px;
    text-align: center;
    margin-bottom: 70px;
    font-family: 'The Jamsil 4';
    letter-spacing: 3px;
}

.golf .inner div figure {
    width: 100%;

}

.golf .inner div figure img {
    width: 100%;
    object-fit: cover;
}

.golf .inner .golf_text {
    position: absolute;
    top: 345px;
    left: 240px;
    color: #fff;
}

.golf .inner .golf_text p {
    font-size: 72px;
    font-family: 'The Jamsil 5';
    margin-bottom: 25px;
}

.golf .inner .golf_text span {
    font-size: 48px;
    margin-bottom: 30px;
    display: block;
}

.golf .inner .golf_text strong {
    display: block;
    width: 200px;
    height: 50px;
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
}

.golf .inner .golf_text strong a {
    display: block;
}

.golf .inner .golf_text strong a:hover {
    font-family: 'The Jamsil 3';
    background-color: #333;
    color: #fff;
    border-radius: 10px;
}


/* ✨✨✨✨✨✨✨✨액세서리✨✨✨✨✨✨✨✨✨✨✨✨ */
.accessories {
    width: 100%;
}

.accessories .inner {
    width: 100%;
    padding: 100px 0;
}

.accessories .inner h3 {
    text-align: center;
    font-size: 40px;
    font-family: 'The Jamsil 4';
}

.swiper {
    margin-top: 50px;
    position: relative;
}

.swiper .swiper-wrapper .swiper-slide {
    position: relative;
    height: 740px;
    width: 470px;
}


.swiper .swiper-wrapper .swiper-slide figure:hover .ac_img1 {
    display: none;
}

.swiper .swiper-wrapper .swiper-slide figure:hover .ac_img2 {
    display: block;
}

.swiper .swiper-wrapper .swiper-slide figure img {
    width: 470px;
    height: 630px;
    cursor: pointer;
    display: block;
}

.swiper .swiper-wrapper .swiper-slide figure .ac_img2 {
    display: none;
}

.swiper .swiper-wrapper .swiper-slide .ac_text {
    width: 470px;
    text-align: center;
}

.swiper .swiper-wrapper .swiper-slide .ac_text p {
    font-family: 'The Jamsil 5';
    margin-top: 25px;
    font-size: 18px;
}

.swiper .swiper-wrapper .swiper-slide .ac_text strong {
    font-family: 'The Jamsil 3';
    display: block;
    font-size: 14px;
    margin-top: 15px;
}

.swiper .swiper-wrapper .swiper-slide .ac_text span {
    font-family: 'The Jamsil 3';
    font-size: 14px;
    margin-top: 15px;
}

.swiper .swiper-wrapper .swiper-slide .ac_text span img {
    vertical-align: bottom;
}

.swiper-button-next,
.swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-next::after {
    content: url('../img/Icon/icons8-arrow앞으로.png');
}

.swiper-button-prev::after {
    content: url('../img/Icon/icons8-arrow-40뒤로\ .png');
}






/* ✨✨✨✨✨✨✨✨membership✨✨✨✨✨✨✨✨✨✨✨✨ */
.membership {
    width: 100%;
}

.membership .inner {
    width: 100%;
    height: 300px;
    background-color: #c01d1d;
    color: #fff;
}

.membership .inner .m_text {
    text-align: center;
}

.membership .inner .m_text h3 {
    font-size: 34px;
    font-family: 'The Jamsil 2';
    padding-top: 60px;

}

.membership .inner .m_text p {
    font-size: 20px;
    font-family: 'The Jamsil 2';
    margin-top: 25px;
    margin-bottom: 55px;
}

.membership .inner .m_text span {
    display: block;
    font-size: 20px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    margin: 0 auto;
}

.membership .inner .m_text span a {
    display: block;
}

.membership .inner .m_text span a:hover {
    background-color: #333;
    color: #fff;
    border-radius: 10px;
    transition: 1s;
}


/* ✨✨✨✨✨✨✨✨pop-up✨✨✨✨✨✨✨✨✨✨✨✨✨✨ */
.pop {
    width: 448px;
    height: 540px;
    display: none;
    background-color: #fff;
    border-radius: 5px;
}

/* .pop.on {
    display: block; 
} */



.pop .inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.pop .inner .top_img {
    width: 448px;
    height: 200px;
    position: relative;
}

.pop .inner .top_img>img {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.pop .inner .top_img figure {
    width: 448px;
    height: 200px;
    position: relative;
}

.pop .inner .top_img figure::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.pop .inner .top_img figure img {
    width: 448px;
    height: 200px;
    border-radius: 5px 5px 0 0;
    object-fit: cover;
}

.pop .inner .top_img .text p {
    color: #fff;
}

.pop .inner .top_img .text img {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pop .inner .top_img .text p {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 34px;
}

.pop .inner .check {
    padding: 20px;
}


.pop .inner .check .search {
    width: 420px;
    height: 40px;
    border: 2px solid #333;
    border-radius: 5px;
    margin: 0 auto;
    padding: 10px;
}


.pop .inner .check .check_box>div {
    display: flex;
    margin: 20px 0;
}

.pop .inner .check_box p {
    font-size: 20px;
    padding-left: 5px;
}

.pop .inner .check_box p:first-child {
    padding-left: 5px;
}


.pop .inner .check_box p span {
    color: #ff0000;
    padding-right: 5px;
}

.pop .inner .check_box p strong {
    border-bottom: 1px solid #333;
    font-weight: 200;
}


.pop .inner .apply {
    width: 420px;
    height: 40px;
    background-color: #333;
    color: #fff;
    line-height: 40px;
    text-align: center;
    margin: 10px auto;
    border-radius: 5px;
}

.pop .inner .apply:hover {
    background-color: #d7d7d7;
    color: #333;
}


.pop .inner .apply a {
    display: block;
}





/* 👣👣👣👣👣👣👣👣👣👣footer👣👣👣👣👣👣👣👣👣👣👣👣👣 */
footer {
    width: 100%;
    background-color: #333;
    color: #fff;
}

footer .inner {
    width: 100%;
    padding: 50px 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

footer .inner .company1 ul li {
    display: inline-block;
    padding-right: 40px;
    margin-bottom: 40px;
}

footer .inner .company1 ul li:hover {
    color: #7d7d7d;
}

footer .inner .company2 ul li {
    display: inline-block;
    margin-top: 25px;
    padding-right: 20px;
    font-size: 13px;
}

footer .inner .right .info {
    display: flex;
    justify-content: space-between;
}

footer .inner .right .info div:nth-child(1) {
    padding-right: 175px;
}

footer .inner .right .info>div>a {
    font-size: 30px;
}

footer .inner .right .info>div>a img {
    width: 36px;
    height: 36px;
    vertical-align: bottom;
}

footer .inner .right .info .sns img {
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

footer .inner .right .time {}

footer .inner .right .time .call_center {
    display: flex;
    margin-top: 30px;
}

footer .inner .right .time .call_center .icon {
    width: 90px;
    height: 25px;
    background-color: #fff;
    border-radius: 10px;
    color: #333;
    margin-right: 10px;
}

footer .inner .right .time .call_center .icon img {
    width: 20px;
    height: 16px;
    margin-left: 5px;

}

footer .inner .right .time .call_center .icon span {
    font-size: 14px;
    font-family: 'The Jamsil 5';
}

footer .inner .right .time .call_center div:nth-child(2) {
    font-size: 14px;
    margin-top: 5px;
}

footer .inner .right .time .call_center div:nth-child(2) p {}

footer .inner .right .time .call_center div:nth-child(2) p span {
    color: #888888;
}

footer .inner .right .time .delivery {
    margin-top: 15px;
    margin-bottom: 60px;
}

footer .inner .right .time .delivery .icon {
    border: 2px solid #fff;
    display: inline-block;
    width: 90px;
    height: 25px;
    border-radius: 10px;
}

footer .inner .right .time .delivery .icon img {
    width: 20px;
    height: 16px;
}

footer .inner .right .time .delivery .icon img span {
    display: block;
    font-size: 14px;
}

footer .inner .right div:nth-child(3) p {
    font-family: 'The Jamsil 4';
}


.side_btn a:nth-child(1) {
    display: scroll;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
}

.side_btn a:nth-child(2) {
    display: scroll;
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 99;
    color: tomato;
    font-weight: bold;
    font-size: 20px;
    display: none;
}


/* ✨✨✨✨✨✨✨카카오채팅✨✨✨✨✨✨ */

.chat_wrap { 
    display: none;
}

.chat_wrap.on {
    display: block;
    background-color: #fff;
    border:5px solid #888; 
    width:400px;
    padding:5px;
    font-size:13px; 
    color:#333;
    position: fixed;
    bottom: 50px;
    right: 100px;
    z-index: 99;
    border-radius: 10p;
}
.chat_wrap.on .inner{
    background-color:#333; 
    border-radius:5px; 
    padding:10px; 
    overflow-y:scroll;
    height: 400px;

}

.chat_wrap.on .item{margin-top:15px}
.chat_wrap.on .item:first-child{margin-top:0px}
.chat_wrap.on .item .box{display:inline-block; max-width:180px; position:relative}
.chat_wrap.on .item .box::before{content:""; position:absolute; left:-8px; top:9px; border-top:0px solid transparent; border-bottom:8px solid transparent;border-right:8px solid #fff;}
.chat_wrap.on .item .box .msg {background:#fff; border-radius:10px; padding:8px; text-align:left; word-break: break-word;}
.chat_wrap.on .item .box .time {font-size:11px; color:#777; position:absolute; right: -75px; bottom:5px; width:70px}
.chat_wrap.on .item.mymsg{text-align:right}
.chat_wrap.on .item.mymsg .box::before{left:auto; right:-8px; border-left:8px solid #fee600; border-right:0;}
.chat_wrap.on .item.mymsg .box .msg{background:rgb(228, 163, 163); color:#fff;}
.chat_wrap.on .item.mymsg .box .time{right:auto; left:-75px}
.chat_wrap.on .item .box{transition:all .3s ease-out; margin:0 0 0 20px;opacity:0}
.chat_wrap.on .item.mymsg .box{transition:all .3s ease-out; margin:0 20px 0 0;}
.chat_wrap.on .item.on .box{margin:0; opacity: 1;}

input[type="text"]{border:0; width:100%;background:#d7d7d7; border-radius:5px; height:30px; padding-left:5px; box-sizing:border-box; margin-top:5px}
input[type="text"]::placeholder{color:#333}