/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트	: AGM-홈페이지
* ○ 파일		: builders_edition.css
* ○ 생성		: 2017.02.01(수요일)
* ○ 최종변경	: 2017.02.01(수요일)
***********************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');


/***********************************************************************************
* 기본 관련
***********************************************************************************/

body {background-color:white;}

.video_intro {overflow:hidden; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.video_intro iframe {width:100%; height:65em; overflow:hidden; display:inline-block; margin:0 auto;}

.tile__content-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    height: 100%;
    opacity: 1;
    transition-property: opacity;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    top: 0;
    left: 50%;
    width: 100%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tile__content--center {
    text-align: center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
    margin-left: 0;
    height: 100%;
    max-width: 600px;
    width: 100%;
}

.tile__content--center .tile__title {
    position: absolute;
    bottom: calc(50% + 100px);
    width: 100%;
}

.tile__title {
    font-size: 48px;
    /* font-family: "Sentinel SSm A", "Sentinel SSm B", serif; */
    font-family: 'Merriweather', serif;
    margin-bottom: 15px;
    color:white;
}

.tile__content--center .tile__copy-wrapper {
    position: absolute;
    top: calc(45%);
    width: 100%;
}

.tile__copy {
    line-height: 1.25;
    margin-bottom: 20px;
    font-weight: 700;
    color:white;
    font-size:16px;
}


/***********************************************************************************
* 상단 섹션 관련
***********************************************************************************/

.main_section_wrap {width:100%; height:540px; background-color:#eae5de; position:relative; overflow:hidden;}
.main_section_wrap .content_wrap {width:470px; margin-left:20%; overflow:hidden;}
.main_section_wrap .content_wrap .title {width:470px; color:#393939; text-align:left; font-size:34px; font-family:Oswald; font-weight:100; letter-spacing:1.5px;}
.main_section_wrap .content_wrap .content {width:470px; color:#393939; text-align:left; padding-top:20px; line-height:27.2px; font-size:16px; font-family:'Open Sans';}
.main_section_wrap .content_wrap .btn_explore {width:150px; padding:10px 20px; margin-top:20px; border:1px solid #999; color:#999; text-align:center; font-size:15px; font-family:Oswald; letter-spacing:1px; cursor:pointer; transition:background-color 0.3s, color 0.3s, border-color 0.3s;}
.main_section_wrap .content_wrap .btn_explore a {color:#999; transition:color 0.3s;}
.main_section_wrap .content_wrap .btn_explore:hover {background-color:#333; border-color:#333; color:white;}
.main_section_wrap .content_wrap .btn_explore:hover a {color:white;}

.btn_play {width:117px; height:86px; left:calc(50% - 58px); top:calc(50% - 43px); position:absolute; background-image:url(../image/vclass/btn_play.png); background-size:cover; z-index:1; cursor:pointer;}
.btn_play:hover {background-image:url(../image/vclass/btn_play_hover.png);}

/* 상품 카테고리 */
.nav_bar {width: 100%; transition: background 0.6s; background-color:#f6f5f1;}
.nav_bar.fixed {width: 100%; min-width:1500px; position: fixed; top: 130px; left: 0; z-index:11;}
.item_section {max-width: 1140px; padding:30px 0 30px 0; margin-left: auto; margin-right: auto; z-index:12; overflow:hidden; font-size:14px;}
.item_section .bld_item {margin:0 10px; display: inline-block;}
.item_section .bld_item a {color:#393939; cursor:pointer;}
.item_section .bld_item a u {text-decoration : none;}
.item_section .bld_item a:hover {color:#aa1f23; }
.item_section .bld_item.active a u {color:#aa1f23; text-decoration : none; border-bottom : 2px solid #aa1f23; padding-bottom : 3px;}

/* 섹션 공통 */
.section .title {width:1140px; margin:0 auto; text-align:center; font-size:35px; font-weight:bold; color:#393939; overflow:hidden;}
.section .content {width:1140px; margin:0 auto; padding-top:20px; line-height:27.2px; text-align:center; font-size:16px; color:#6b6354; overflow:hidden;} 
.section .movie {width:1140px; margin:0 auto; padding-top:20px; overflow:hidden;}
.section .movie iframe {width:100%; min-height:641px;}
.section .movie video {width:100%; min-height:641px;}
.red_line {background-color: #aa1f23; height: 6px; width: 70px; margin:0 auto; margin-top:30px;}

/* Builder's Edition 소개 섹션 */
.section {padding:95px 0 50px 0; overflow:hidden; background-color:#f6f5f1;}
.section.intro {background-color:#f6f5f1; font-size:14px;}
.section.intro .title {width:1140px; margin:0 auto; text-align:center; font-size:35px; font-weight:bold; color:#393939; overflow:hidden;}
.section.intro .content {width:1140px; margin:0 auto; padding-top:20px; line-height:27.2px; text-align:center; font-size:15px; color:#393939; overflow:hidden;}

/* Builder's Edition Collection 섹션 */
.section.Collection {padding:95px 0 95px 0; background-color:#eae5de;}
.section.Collection .title {font-size:45px; text-align:center; color:#393939;}
.section.Collection .content {width:1140px; margin:0 auto;}
.section.Collection .content .column-title {padding:15px 0; font-size:18px; font-weight:bold; color:#393939}
.section.Collection .content .column-copy {font-size: 14px; line-height: 1.5; margin-bottom: 20px;}
.section.Collection .content .column-box a {border-radius: 2px; border: 1px solid #8d8882; color: #393939; display: inline-block; font-size: 12px; padding: 10px 25px; text-align: center; text-transform: uppercase; transition-property: color,border-color; min-width: 170px; max-width: 270px; line-height: 20px;}
.section.Collection .content .column-box a:hover {color:#aa1f23; border: 1px solid #aa1f23;}

.swiper-container.collection_slide {width:1050px;}
.swiper-container.collection_slide .swiper-slide img {background-size:cover;}


/* Builder's Edition Philosophy  */
.section.philosophy {padding:95px 0 95px 0;}
.section.philosophy .content .column {width:33%; float:left; padding-top:30px;}
.section.philosophy .content .column .column-title {padding:15px 0; font-size:20px; font-weight:bold}


/* unique */
.section.unique {padding:95px 0 95px 0;}
.section.unique .content .column {width:25%; float:left; padding-top:30px;}
.section.unique .content .column img {width:90%;}
.section.unique .content .column .column-title {padding:15px 0; font-size:20px; font-weight:bold}
.section.unique .content .column-copy {font-size: 14px; line-height: 1.5; margin-bottom: 20px;}


/* Builder's Edition 기타들(큰 이미지) */
.section_items {padding:0; color:#fff;}
.section_items .primary_img {width:100%; height:100%; position: relative; display: block; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;  background-image: linear-gradient(45deg,transparent 50%,rgba(0,0,0,0.5) 100%);}
.section_items .primary_img .bg-img {background-color: #000; height: 631px; overflow: hidden; display: block; position: relative;}
.section_items .primary_img .foreground-img.left {height: 700px;opacity: 1; pointer-events: none; position: absolute; left: calc(50% - 600px); top: 0; width: auto; z-index: 2;}
.section_items .primary_img .foreground-img.right {height: 700px;opacity: 1; pointer-events: none; position: absolute; right: calc(50% - 600px); top: 0; width: auto; z-index: 2;}

.section_items .primary_content {max-width: 1140px; margin-left: auto; margin-right: auto; padding:60px 0; height: 100%; left: 50%; position: absolute; top: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; z-index: 1;}
.section_items .primary_content .tout.right {max-width: 350px; position: absolute; top: 25%; right:8%; -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%);}
.section_items .primary_content .tout.left {max-width: 350px; position: absolute; top: 25%; left:8%; -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%);}
.section_items .primary_content .tout .tout-title {text-shadow: 0px 0px 5px rgba(0,0,0,0.1); font-size: 34px; margin-bottom: 15px;}
.section_items .primary_content .tout .tout-content {text-shadow: 0px 0px 5px rgba(0,0,0,0.1);}
.section_items .primary_content .tout .cta-wrapper {background-color: #aa1f23; color: #e9e6e0; cursor: pointer; margin-top:20px; display: inline-block; font-size: 15px; font-weight: 600; line-height: 1; padding: 10px 30px; transition-property: background-color; transition-duration: .2s; border-radius: 2px;}
.section_items .primary_content .tout .cta-wrapper a {color:#fff; font-weight:bold; line-height: 20px;}


/* Builder's Edition 마지막 섹션  */
.section.gallery {padding:0; color:#393939;}
.guitar-tiles__wrapper {position: relative; padding-top: 56.94%; height: 0;}
.guitar-tiles__tile {padding: 0; margin: 0; border: 0;}
.guitar-tiles__tile button {-webkit-appearance: button; -webkit-writing-mode: horizontal-tb !important; text-rendering: auto; color: -internal-light-dark-color(buttontext, rgb(170, 170, 170)); letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; align-items: flex-start; cursor: default; background-color: -internal-light-dark-color(rgb(239, 239, 239), rgb(74, 74, 74)); box-sizing: border-box; margin: 0em; font: 400 13.3333px Arial; padding: 1px 6px; border-width: 2px; border-style: outset; border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195)); border-image: initial; border-radius: 2px;}
.guitar-tiles__tile--desktop {position: absolute; overflow: hidden;}
.guitar-tiles__tile--desktop img {height: 100%; width: 100%; transition-property: -webkit-transform; transition-property: transform; transition-duration: .5s; transition-timing-function: ease-in-out;}
.guitar-tiles__tile--desktop.img-1 {height: 65.975%; width: 41.38%; top: 0.244%; left: 0.1388%;}
.guitar-tiles__tile--desktop.img-2 {height: 32.80%; width: 37.5%; top: 0.244%; left: 41.73%;}
.guitar-tiles__tile--desktop.img-3 {height: 32.80%; width: 20.55%; top: 0.244%; left: 79.37%;}
.guitar-tiles__tile--desktop.img-4 {top: 33.41%; left: 41.73%; height: 32.80%; width: 28.75%; overflow: hidden;}
.guitar-tiles__tile--desktop.img-5 {left: 0.1388%; top: 66.58%; height: 32.8%; width: 22.63%;}
.guitar-tiles__tile--desktop.img-6 {left: 22.98%; top: 66.58%; height: 32.8%; width: 47.5%;}
.guitar-tiles__tile--desktop.img-7 {width: 29.16%; height: 65.97%; top: 33.41%; left: 70.69%;}







.main_section_wrap {width:100%; height:540px; background-color:#eae5de; position:relative; overflow:hidden;}
.main_section_wrap .content_wrap {width:470px; margin-left:20%; overflow:hidden;}
.main_section_wrap .content_wrap .title {width:470px; color:#393939; text-align:left; font-size:34px; font-family:Oswald; font-weight:100; letter-spacing:1.5px;}
.main_section_wrap .content_wrap .content {width:470px; color:#393939; text-align:left; padding-top:20px; line-height:27.2px; font-size:16px; font-family:'Open Sans';}
.main_section_wrap .content_wrap .btn_explore {width:150px; padding:10px 20px; margin-top:20px; border:1px solid #999; color:#999; text-align:center; font-size:15px; font-family:Oswald; letter-spacing:1px; cursor:pointer; transition:background-color 0.3s, color 0.3s, border-color 0.3s;}
.main_section_wrap .content_wrap .btn_explore a {color:#999; transition:color 0.3s;}
.main_section_wrap .content_wrap .btn_explore:hover {background-color:#333; border-color:#333; color:white;}
.main_section_wrap .content_wrap .btn_explore:hover a {color:white;}



