@charset "utf-8";

.wrapper.sub{background-color: #fff;}
.wrapper.login .contents_wrap{min-height: 100vh; background-color: #96c3d5; background-image: url('../img/main_visual_img_002_m.jpg'); background-repeat: no-repeat; background-position: right -80px top 0px; background-size: auto 50%; padding-top: 50px; padding-bottom: 70px;}

.sub .sub_visual_wrap{top:0; background-color:#96c3d5;}
.sub .sub_visual_text_box{overflow: hidden; float:none; margin:0 auto; padding-bottom: 190px; text-align: center; z-index: 0;}
.sub .sub_visual_text_box .sub_visual_text{overflow: hidden;}
.sub .sub_visual_text_box .sub_visual_text h2{position:relative; margin-bottom: 3px; font-size:50px; font-size:5.0rem; line-height:56px; line-height:5.6rem; letter-spacing: -0.02em; font-weight: 400; color:#fff; opacity: 0;}
.sub.third .sub_visual_text_box .sub_visual_text h2{font-size:45px; font-size:4.5rem; line-height:52px; line-height:5.1rem;}
.sub .sub_visual_text_box .sub_visual_text .h_desc2{padding-left: 4px; font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem; letter-spacing: 0.0em; font-weight: 400; color:#fff; word-spacing: -0.09em; opacity: 0;}
.sub .sub_visual_text_box .sub_visual_text .h_desc2 .font_helve{font-weight: 300; letter-spacing: 0.02em !important;}

/* hr */
.sub .h_line2{display:none; opacity:0; position: absolute; bottom:148px; left:15px; border-bottom:2px solid #fff; width:35px; text-align: left;}
.sub.third .h_line2{top:257px; bottom:auto;}

[data-wv-agent="ie"] .sub.second .h_line2{bottom:150px;}
[data-wv-agent="edge"] .sub.second .h_line2{bottom:149px;}
[data-wv-agent="firefox"] .sub.second .h_line2{bottom:149px;}

/* text_box */
.sub .sub_visual_text_box .sub_visual_text{display: none;}
.sub.first .sub_visual_text_box .sub_visual_text:nth-child(1){display:block;}
.sub.second .sub_visual_text_box .sub_visual_text:nth-child(2){display:block;}
.sub.third .sub_visual_text_box .sub_visual_text:nth-child(3){display:block;}
.sub.fourth .sub_visual_text_box .sub_visual_text:nth-child(4){display:block;}
.sub.fifth .sub_visual_text_box .sub_visual_text:nth-child(5){display:block;}
.sub.sixth .sub_visual_text_box .sub_visual_text:nth-child(6){display:block;}

/* content 영역 여백 */
.sub .contents_wrap{z-index: 1; overflow: hidden; padding-top: 85px; padding-bottom: 100px; background-color: #fff;}
.sub.second .contents_wrap{padding-top:60px;}
.sub.third .contents_wrap{padding-top:0;}
.sub.fourth .contents_wrap{padding-top:60px;}
.sub.fifth .contents_wrap{padding-top:65px;}
.sub.sixth .contents_wrap{padding-top:60px;}


/* canvas관련 */
.sub .sub_canvas_box{position: relative; bottom:-3px; float:right; transform: scale(0.6); transform-origin: right bottom;}

.sub .sub_visual_img_box{position: absolute; bottom:0; display: none;}
.sub.first .sub_visual_img_box:nth-child(1){display:block; right: 0px;}
.sub.second .sub_visual_img_box:nth-child(2){display:block; right: 0px;}
.sub.third .sub_visual_img_box:nth-child(3){display:block; right: 0px;}
.sub.fourth .sub_visual_img_box:nth-child(4){display:block; right: 0px;}
.sub.fifth .sub_visual_img_box:nth-child(5){display:block; right: 0px;}
.sub.sixth .sub_visual_img_box:nth-child(5){display:block; right: 0px;}

/* third */
.sub.third .sub_visual_wrap{background-image: url('../img/main_visual_img_002_m.jpg'); background-repeat: no-repeat; background-position: right -80px top 0px; background-size: auto 60%;}
.sub .sub_visual_con{display: table; height: 377px;}
.sub.third .sub_visual_con{height: 860px;}
.sub .sub_visual_box{display: table-cell; float:none; vertical-align:bottom; overflow: hidden; height: 377px; box-sizing: border-box;}
.sub.third .sub_visual_box{vertical-align: bottom; padding-top:216px;}
.sub.third .sub_visual_text_box{padding-bottom: 63px;}
.sub .sub_product_con{display: none;}
.sub.third .sub_product_con{display: block; z-index:10;}
.sub .sub_visual_title_con{text-align: center; margin-bottom: 115px;}
.sub .sub_visual_title{font-size: 45px; font-size: 4.5rem; line-height: 51px; line-height: 5.1rem; letter-spacing: -0.04em; font-weight: 500; color:#fff; margin-bottom: 23px;}
.sub.third .sub_visual_title_con{margin-bottom: 85px;}
.sub.third .sub_visual_title{letter-spacing: 0em; font-weight: 400;}
.sub .sub_visual_sub_title{font-size: 23px; font-size: 2.3rem; line-height: 29px; line-height: 2.9rem; letter-spacing: -0.04em; font-weight: 500; color:#fff; margin-bottom: 15px;}
.sub .sub_visual_desc{font-size: 19px; font-size: 1.9rem; line-height: 30px; line-height: 3.0rem; letter-spacing: -0.015em; font-weight: 300; color:#fff; word-break: keep-all;}
.sub.third .sub_visual_desc{font-size: 17px; font-size: 1.7rem;}
.sub .sub_product_con .shortcut_btn_con {position:absolute; top:-50px; right:0;}
.sub .sub_product_con .shortcut_btn{position: relative; display: inline-block; font-size:0px; font-size:0rem; line-height:0px; line-height:0.0rem;}
.sub .sub_product_con .shortcut_btn > span{display: inline-block; vertical-align: middle;}
.sub .sub_product_con .shortcut_btn_text{font-size: 15px; font-size: 1.5rem; line-height: 24px; line-height: 2.4rem; letter-spacing: -0.015em; font-weight: 400; color:#fff; margin-right: 12px;}
.sub .sub_product_con .shortcut_btn_icon{width:22px; height:22px; overflow: hidden; background-color:#fff; border-radius:50%; background-image: url("../img/shortcut_icon.png"); background-repeat:no-repeat; background-size: cover; background-position: right 0px top 0px;}

/* 첫번째 제품이 얇아서 margin-left로 정렬 맞춤 */
.sub .main_product_list_con{margin-left:23px; margin-bottom: 0;}
.sub .main_product_list .product_text_con{max-width: 150px; height: 40px; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2.0rem; margin-bottom: 28px; word-break: keep-all; padding-left: 10px; padding-right: 10px;}
/*.sub .product_btn_con{opacity: 0.5;}*/ /*쇼핑몰 마이페이지 버튼때문에 주석 ...hsj*/
.sub .product_btn{font-size: 12px; font-size: 1.2rem; line-height: 18px; line-height: 1.8rem; letter-spacing: 0.02em; font-weight: 500; color:#fff; margin-bottom: 5px;}
.sub .product_btn_con .origin{display: block;}
.sub .product_btn_con .active{display: none;}
.sub .product_btn_con .active > img{vertical-align: top; padding-top: 4px; width: 15px;}
.sub .product_btn_con hr{width: 2px; height: 47px; background-color: #fff; margin:0 auto;}
.sub .main_product_list .product_img_con{margin-bottom: 15px;}
.sub .main_product_list .product_img_con > img{max-width: 80px; max-height: 220px;}
.sub .main_product_list.active .product_text_con{color: #000; font-weight: 500;}
.sub .main_product_list.active .product_btn_con{opacity: 1;}
.sub .main_product_list.active .product_btn{margin-bottom: 52px;}
.sub .main_product_list.active .product_btn_con .origin{display: none;}
.sub .main_product_list.active .product_btn_con .active{display: block;}
.sub .main_product_list.active .product_btn_con hr{display: none;}

@media all and (min-width: 768px){
    .sub .main_product_list .product_text_con{max-width: none; height: auto; padding-left: 0; padding-right: 0;}
}

@media all and (min-width: 992px) {
    .wrapper.login .contents_wrap{height: 100vh; padding-top:0; padding-bottom: 0; background-image: url('../img/main_visual_img_002.jpg'); background-position: right 0px top 0px; background-size: auto 70%;}

    .sub .contents_wrap{padding-top: 128px; padding-bottom: 200px;}
    .sub.first .contents_wrap{padding-top: 142px; padding-bottom: 195px;}
    .sub.second .contents_wrap{padding-top:123px;}
    .sub.third .contents_wrap{padding-bottom: 218px;}
    .sub.fourth .contents_wrap{padding-top: 80px;}
    .sub.fifth .contents_wrap{padding-top:97px;}
    .sub.sixth .contents_wrap{padding-top: 80px;}
    .sub.fifth .contents_wrap.register{padding-top: 89px; padding-bottom: 200px;}

    .sub .h_line2{display:block; left:15px; width:20px;}
    .sub.second .h_line2{left:15px; width:20px;}
    .sub.fourth .h_line2{left:15px; width:35px;}

    /* canvas */
    .sub .sub_visual_text_box{float:left; text-align: left; padding-bottom: 103px;}
    .sub.third .sub_visual_text_box{padding-bottom: 143px;}
    .sub .sub_visual_text_box .sub_visual_text h2{font-size:60px; font-size:6.0rem; line-height:66px; line-height:6.6rem;}
    .sub .sub_visual_text_box .sub_visual_text .h_desc2{font-size:20px; font-size:2.0rem; line-height:26px; line-height:2.6rem;}

    .sub .sub_visual_con{height: 404px;}
    .sub.third .sub_visual_con{height: 1083px;}
    .sub .sub_visual_box{height: 404px;}

    .sub.third .sub_visual_wrap{background-image: url('../img/main_visual_img_002.jpg'); background-repeat: no-repeat; background-position: right 0px top 0px; background-size: auto 70%;}
    .sub.third .sub_visual_title_con{margin-bottom: 135px;}
    .sub.third .sub_visual_desc{font-size: 19px; font-size: 1.9rem;}

    .sub .sub_canvas_box{bottom:-2px; transform: scale(1);}
    .sub.first .sub_visual_img_box:nth-child(1){right: 15px;}
    .sub.second .sub_visual_img_box:nth-child(2){right: 47px;}
    .sub.third .sub_visual_img_box:nth-child(3){right: 0px;}
    .sub.fourth .sub_visual_img_box:nth-child(4){right: 37px;}
    .sub.fifth .sub_visual_img_box:nth-child(5){right: 19px;}
    .sub.sixth .sub_visual_img_box:nth-child(5){right: 19px;}

    .sub .main_product_list_con{margin-left:0;}
    .sub .main_product_list .product_text_con{margin-bottom: 39px;}
    .sub .main_product_list .product_img_con > img{max-width: 100px; max-height: 240px;}

    .sub .sub_product_con .shortcut_btn_con { top:-190px; }
}

@media all and (min-width: 1200px) {
    .sub .h_line2{left:calc(((100% - 1170px) / 2) + 3px); width:calc(((100% - 1170px) / 2) + 3px);}
    .sub.second .h_line2{left:calc(((100% - 1170px) / 2) + 4px); width:calc(((100% - 1170px) / 2) + 4px);}
    .sub.fourth .h_line2{left:calc(((100% - 1170px) / 2) + 20px); width:calc(((100% - 1170px) / 2) + 20px);}
}